diff --git a/package-lock.json b/package-lock.json
index 1d4af7ae4..dccf2178d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,10 +23,11 @@
         "i18next": "^21.6.11",
         "i18next-browser-languagedetector": "^6.1.3",
         "moment": "^2.30.1",
-        "react": "^17.0.2",
-        "react-dom": "^17.0.2",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0",
         "react-i18next": "^11.15.4",
-        "react-router-dom": "^6.2.1",
+        "react-query": "^3.39.3",
+        "react-router-dom": "^6.23.1",
         "recoil": "^0.7.1",
         "regenerator-runtime": "^0.13.9",
         "sass": "^1.50.0",
@@ -100,15 +101,16 @@
       }
     },
     "node_modules/@ant-design/cssinjs": {
-      "version": "1.9.1",
-      "license": "MIT",
+      "version": "1.21.0",
+      "resolved": "https://registry.npmjs.org/@ant-design/cssinjs/-/cssinjs-1.21.0.tgz",
+      "integrity": "sha512-gIilraPl+9EoKdYxnupxjHB/Q6IHNRjEXszKbDxZdsgv4sAZ9pjkCq8yanDWNvyfjp4leir2OVAJm0vxwKK8YA==",
       "dependencies": {
         "@babel/runtime": "^7.11.1",
         "@emotion/hash": "^0.8.0",
         "@emotion/unitless": "^0.7.5",
         "classnames": "^2.3.1",
-        "csstype": "^3.0.10",
-        "rc-util": "^5.27.0",
+        "csstype": "^3.1.3",
+        "rc-util": "^5.35.0",
         "stylis": "^4.0.13"
       },
       "peerDependencies": {
@@ -117,12 +119,12 @@
       }
     },
     "node_modules/@ant-design/icons": {
-      "version": "5.2.6",
-      "resolved": "https://registry.npmjs.org/@ant-design/icons/-/icons-5.2.6.tgz",
-      "integrity": "sha512-4wn0WShF43TrggskBJPRqCD0fcHbzTYjnaoskdiJrVHg86yxoZ8ZUqsXvyn4WUqehRiFKnaclOhqk9w4Ui2KVw==",
+      "version": "5.3.7",
+      "resolved": "https://registry.npmjs.org/@ant-design/icons/-/icons-5.3.7.tgz",
+      "integrity": "sha512-bCPXTAg66f5bdccM4TT21SQBDO1Ek2gho9h3nO9DAKXJP4sq+5VBjrQMSxMVXSB3HyEz+cUbHQ5+6ogxCOpaew==",
       "dependencies": {
         "@ant-design/colors": "^7.0.0",
-        "@ant-design/icons-svg": "^4.3.0",
+        "@ant-design/icons-svg": "^4.4.0",
         "@babel/runtime": "^7.11.2",
         "classnames": "^2.2.6",
         "rc-util": "^5.31.1"
@@ -136,9 +138,9 @@
       }
     },
     "node_modules/@ant-design/icons-svg": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/@ant-design/icons-svg/-/icons-svg-4.3.1.tgz",
-      "integrity": "sha512-4QBZg8ccyC6LPIRii7A0bZUk3+lEDCLnhB+FVsflGdcWPPmV+j3fire4AwwoqHV/BibgvBmR9ZIo4s867smv+g=="
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/@ant-design/icons-svg/-/icons-svg-4.4.2.tgz",
+      "integrity": "sha512-vHbT+zJEVzllwP+CM+ul7reTEfBR0vgxFe7+lREAsAA7YGsYpboiq2sQNeQeRvh09GfQgs/GyFEvZpJ9cLXpXA=="
     },
     "node_modules/@ant-design/react-slick": {
       "version": "1.0.1",
@@ -1711,10 +1713,11 @@
       "license": "MIT"
     },
     "node_modules/@babel/runtime": {
-      "version": "7.21.5",
-      "license": "MIT",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.7.tgz",
+      "integrity": "sha512-UwgBRMjJP+xv857DCngvqXI3Iq6J4v0wXmwc6sapg+zyhbwmQX67LUEFrkK5tbyJ30jGuG3ZvWpBiB9LCy1kWw==",
       "dependencies": {
-        "regenerator-runtime": "^0.13.11"
+        "regenerator-runtime": "^0.14.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1731,6 +1734,11 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/runtime/node_modules/regenerator-runtime": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
+    },
     "node_modules/@babel/template": {
       "version": "7.22.15",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.15.tgz",
@@ -1849,11 +1857,13 @@
     },
     "node_modules/@emotion/hash": {
       "version": "0.8.0",
-      "license": "MIT"
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
+      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
     },
     "node_modules/@emotion/unitless": {
       "version": "0.7.5",
-      "license": "MIT"
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
     },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
@@ -3199,7 +3209,8 @@
     },
     "node_modules/@rc-component/color-picker": {
       "version": "1.1.1",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/@rc-component/color-picker/-/color-picker-1.1.1.tgz",
+      "integrity": "sha512-MKYqgEncpISQiZIaj8ykcdzZewgjslEfDo2iHg627jPnt+DbWIKG1T8MS55qXjuxkokgL0cNueyGnOndfaaNKw==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "@ctrl/tinycolor": "^3.6.0",
@@ -3212,8 +3223,9 @@
       }
     },
     "node_modules/@rc-component/context": {
-      "version": "1.3.0",
-      "license": "MIT",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@rc-component/context/-/context-1.4.0.tgz",
+      "integrity": "sha512-kFcNxg9oLRMoL3qki0OMxK+7g5mypjgaaJp/pkOis/6rVxma9nJBF/8kCIuTYHUQNr0ii7MxqE33wirPZLJQ2w==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "rc-util": "^5.27.0"
@@ -3224,8 +3236,9 @@
       }
     },
     "node_modules/@rc-component/mini-decimal": {
-      "version": "1.0.1",
-      "license": "MIT",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@rc-component/mini-decimal/-/mini-decimal-1.1.0.tgz",
+      "integrity": "sha512-jS4E7T9Li2GuYwI6PyiVXmxTiM6b07rlD9Ge8uGZSCz3WlzcG5ZK7g5bbuKNeZ9pgUuPK/5guV781ujdVpm4HQ==",
       "dependencies": {
         "@babel/runtime": "^7.18.0"
       },
@@ -3234,8 +3247,9 @@
       }
     },
     "node_modules/@rc-component/mutate-observer": {
-      "version": "1.0.0",
-      "license": "MIT",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@rc-component/mutate-observer/-/mutate-observer-1.1.0.tgz",
+      "integrity": "sha512-QjrOsDXQusNwGZPf4/qRQasg7UFEj06XiCJ8iuiq/Io7CrHrgVi6Uuetw60WAMG1799v+aM8kyc+1L/GBbHSlw==",
       "dependencies": {
         "@babel/runtime": "^7.18.0",
         "classnames": "^2.3.2",
@@ -3250,8 +3264,9 @@
       }
     },
     "node_modules/@rc-component/portal": {
-      "version": "1.1.1",
-      "license": "MIT",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@rc-component/portal/-/portal-1.1.2.tgz",
+      "integrity": "sha512-6f813C0IsasTZms08kfA8kPAGxbbkYToa8ALaiDIGGECU4i9hj8Plgbx0sNJDrey3EtHO30hmdaxtT0138xZcg==",
       "dependencies": {
         "@babel/runtime": "^7.18.0",
         "classnames": "^2.3.2",
@@ -3266,8 +3281,9 @@
       }
     },
     "node_modules/@rc-component/tour": {
-      "version": "1.8.0",
-      "license": "MIT",
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/@rc-component/tour/-/tour-1.8.1.tgz",
+      "integrity": "sha512-CsrQnfKgNArxx2j1RNHVLZgVA+rLrEj06lIsl4KSynMqADsqz8eKvVkr0F3p9PA10948M6WEEZt5a/FGAbGR2A==",
       "dependencies": {
         "@babel/runtime": "^7.18.0",
         "@rc-component/portal": "^1.0.0-9",
@@ -3284,16 +3300,16 @@
       }
     },
     "node_modules/@rc-component/trigger": {
-      "version": "1.13.3",
-      "license": "MIT",
+      "version": "1.18.3",
+      "resolved": "https://registry.npmjs.org/@rc-component/trigger/-/trigger-1.18.3.tgz",
+      "integrity": "sha512-Ksr25pXreYe1gX6ayZ1jLrOrl9OAUHUqnuhEx6MeHnNa1zVM5Y2Aj3Q35UrER0ns8D2cJYtmJtVli+i+4eKrvA==",
       "dependencies": {
-        "@babel/runtime": "^7.18.3",
+        "@babel/runtime": "^7.23.2",
         "@rc-component/portal": "^1.1.0",
         "classnames": "^2.3.2",
-        "rc-align": "^4.0.0",
         "rc-motion": "^2.0.0",
         "rc-resize-observer": "^1.3.1",
-        "rc-util": "^5.31.1"
+        "rc-util": "^5.38.0"
       },
       "engines": {
         "node": ">=8.x"
@@ -3304,10 +3320,11 @@
       }
     },
     "node_modules/@remix-run/router": {
-      "version": "1.6.2",
-      "license": "MIT",
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.1.tgz",
+      "integrity": "sha512-es2g3dq6Nb07iFxGk5GuHN20RwBZOsuDQN7izWIisUcv9r+d2C5jQxqmgkdebXgReWfiyUabcki6Fg77mSNrig==",
       "engines": {
-        "node": ">=14"
+        "node": ">=14.0.0"
       }
     },
     "node_modules/@rollup/plugin-babel": {
@@ -4582,7 +4599,8 @@
     },
     "node_modules/array-tree-filter": {
       "version": "2.1.0",
-      "license": "MIT"
+      "resolved": "https://registry.npmjs.org/array-tree-filter/-/array-tree-filter-2.1.0.tgz",
+      "integrity": "sha512-4ROwICNlNw/Hqa9v+rk5h22KjmzB1JGTMVKP2AKJBOCgb0yL0ASf0+YvCcLNNwquOHNX48jkeZIJ3a+oOQqKcw=="
     },
     "node_modules/array-union": {
       "version": "2.1.0",
@@ -4676,7 +4694,8 @@
     },
     "node_modules/async-validator": {
       "version": "4.2.5",
-      "license": "MIT"
+      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.2.5.tgz",
+      "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg=="
     },
     "node_modules/asynckit": {
       "version": "0.4.0",
@@ -4977,7 +4996,6 @@
       "version": "1.6.51",
       "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.51.tgz",
       "integrity": "sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg==",
-      "dev": true,
       "engines": {
         "node": ">=0.6"
       }
@@ -5153,6 +5171,21 @@
         "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==",
+      "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/browser-process-hrtime": {
       "version": "1.0.0",
       "dev": true,
@@ -5866,8 +5899,9 @@
       "license": "MIT"
     },
     "node_modules/csstype": {
-      "version": "3.1.2",
-      "license": "MIT"
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
     "node_modules/cypress": {
       "version": "13.7.2",
@@ -6349,6 +6383,11 @@
         "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=="
+    },
     "node_modules/dexie": {
       "version": "3.2.3",
       "license": "Apache-2.0",
@@ -6406,7 +6445,8 @@
     },
     "node_modules/dom-align": {
       "version": "1.12.4",
-      "license": "MIT"
+      "resolved": "https://registry.npmjs.org/dom-align/-/dom-align-1.12.4.tgz",
+      "integrity": "sha512-R8LUSEay/68zE5c8/3BDxiTEvgb4xZTF0RKmAHfiEVN3klfIpXfi2/QCoiWPccVQ0J/ZGdz9OjzL4uJEP/MRAw=="
     },
     "node_modules/domexception": {
       "version": "2.0.1",
@@ -12690,6 +12730,11 @@
         "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
+    "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=="
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "license": "MIT"
@@ -13478,6 +13523,15 @@
         "tmpl": "1.0.5"
       }
     },
+    "node_modules/match-sorter": {
+      "version": "6.3.4",
+      "resolved": "https://registry.npmjs.org/match-sorter/-/match-sorter-6.3.4.tgz",
+      "integrity": "sha512-jfZW7cWS5y/1xswZo8VBOdudUiSd9nifYRWphc9M5D/ee4w4AoXLgBEdRbgVaxbMuagBPeUC5y2Hi8DO6o9aDg==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.8",
+        "remove-accents": "0.5.0"
+      }
+    },
     "node_modules/merge-stream": {
       "version": "2.0.0",
       "license": "MIT"
@@ -13501,6 +13555,11 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/microseconds": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/microseconds/-/microseconds-0.2.0.tgz",
+      "integrity": "sha512-n7DHHMjR1avBbSpsTBj6fmMGh2AGrifVV4e+WYc3Q9lO+xnSZ3NyhcBND3vzzatt05LFhoKFRxrIyklmLlUtyA=="
+    },
     "node_modules/mime-db": {
       "version": "1.52.0",
       "dev": true,
@@ -13576,6 +13635,14 @@
       "version": "2.1.2",
       "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==",
+      "dependencies": {
+        "big-integer": "^1.6.16"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
@@ -13643,6 +13710,7 @@
     },
     "node_modules/object-assign": {
       "version": "4.1.1",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -13749,6 +13817,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "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=="
+    },
     "node_modules/on-headers": {
       "version": "1.0.2",
       "dev": true,
@@ -14392,7 +14465,8 @@
     },
     "node_modules/rc-align": {
       "version": "4.0.15",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/rc-align/-/rc-align-4.0.15.tgz",
+      "integrity": "sha512-wqJtVH60pka/nOX7/IspElA8gjPNQKIx/ZqJ6heATCkXpe1Zg4cPVrMD2vC96wjsFFL8WsmhPbx9tdMo1qqlIA==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "classnames": "2.x",
@@ -14406,8 +14480,9 @@
       }
     },
     "node_modules/rc-cascader": {
-      "version": "3.12.0",
-      "license": "MIT",
+      "version": "3.12.1",
+      "resolved": "https://registry.npmjs.org/rc-cascader/-/rc-cascader-3.12.1.tgz",
+      "integrity": "sha512-g6In2y6eudHXS/Fs9dKFhp9acvHRUPqem/7xReR9ng8M1pNAE137uGBOt9WNpgsKT/cDGudXZQVehaBwAKg6hQ==",
       "dependencies": {
         "@babel/runtime": "^7.12.5",
         "array-tree-filter": "^2.1.0",
@@ -14423,7 +14498,8 @@
     },
     "node_modules/rc-checkbox": {
       "version": "3.0.1",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/rc-checkbox/-/rc-checkbox-3.0.1.tgz",
+      "integrity": "sha512-k7nxDWxYF+jDI0ZcCvuvj71xONmWRVe5+1MKcERRR9MRyP3tZ69b+yUCSXXh+sik4/Hc9P5wHr2nnUoGS2zBjA==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "classnames": "^2.3.2",
@@ -14436,7 +14512,8 @@
     },
     "node_modules/rc-collapse": {
       "version": "3.5.2",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/rc-collapse/-/rc-collapse-3.5.2.tgz",
+      "integrity": "sha512-/TNiT3DW1t3sUCiVD/DPUYooJZ3BLA93/2rZsB3eM2bGJCCla2X9D2E4tgm7LGMQGy5Atb2lMUn2FQuvQNvavQ==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "classnames": "2.x",
@@ -14450,7 +14527,8 @@
     },
     "node_modules/rc-dialog": {
       "version": "9.1.0",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/rc-dialog/-/rc-dialog-9.1.0.tgz",
+      "integrity": "sha512-5ry+JABAWEbaKyYsmITtrJbZbJys8CtMyzV8Xn4LYuXMeUx5XVHNyJRoqLFE4AzBuXXzOWeaC49cg+XkxK6kHA==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "@rc-component/portal": "^1.0.0-8",
@@ -14464,7 +14542,9 @@
       }
     },
     "node_modules/rc-drawer": {
-      "version": "6.1.5",
+      "version": "6.1.6",
+      "resolved": "https://registry.npmjs.org/rc-drawer/-/rc-drawer-6.1.6.tgz",
+      "integrity": "sha512-EBRFM9o3lPU5kYh8sFoXYA9KxpdT765HDqj/AbZWicXkhwEYUH7MjUH0ctenPCiHBxXQUgIUvK14+6rPuURd6w==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "@rc-component/portal": "^1.0.0-6",
@@ -14479,7 +14559,8 @@
     },
     "node_modules/rc-dropdown": {
       "version": "4.1.0",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/rc-dropdown/-/rc-dropdown-4.1.0.tgz",
+      "integrity": "sha512-VZjMunpBdlVzYpEdJSaV7WM7O0jf8uyDjirxXLZRNZ+tAC+NzD3PXPEtliFwGzVwBBdCmGuSqiS9DWcOLxQ9tw==",
       "dependencies": {
         "@babel/runtime": "^7.18.3",
         "@rc-component/trigger": "^1.7.0",
@@ -14493,7 +14574,8 @@
     },
     "node_modules/rc-field-form": {
       "version": "1.31.0",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/rc-field-form/-/rc-field-form-1.31.0.tgz",
+      "integrity": "sha512-3u6crithuSQMfHaDL3rMvzjG5oXJQIgCTxDfT0pJL9kI/C2LWuR8GrApzOvB9gKcf8VvvnejzmSPnsUJz4YGmQ==",
       "dependencies": {
         "@babel/runtime": "^7.18.0",
         "async-validator": "^4.1.0",
@@ -14509,7 +14591,8 @@
     },
     "node_modules/rc-image": {
       "version": "5.16.0",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/rc-image/-/rc-image-5.16.0.tgz",
+      "integrity": "sha512-11DOye57IgTXh2yTsmxFNynZJG3tdx8RZnnaqb38eYWrBPPyhVHIuURxyiSZ8B68lEUAggR7SBA0Zb95KP/CyQ==",
       "dependencies": {
         "@babel/runtime": "^7.11.2",
         "@rc-component/portal": "^1.0.2",
@@ -14525,7 +14608,8 @@
     },
     "node_modules/rc-input": {
       "version": "1.0.4",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/rc-input/-/rc-input-1.0.4.tgz",
+      "integrity": "sha512-clY4oneVHRtKHYf/HCxT/MO+4BGzCIywSNLosXWOm7fcQAS0jQW7n0an8Raa8JMB8kpxc8m28p7SNwFZmlMj6g==",
       "dependencies": {
         "@babel/runtime": "^7.11.1",
         "classnames": "^2.2.1",
@@ -14538,7 +14622,8 @@
     },
     "node_modules/rc-input-number": {
       "version": "7.4.2",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/rc-input-number/-/rc-input-number-7.4.2.tgz",
+      "integrity": "sha512-yGturTw7WGP+M1GbJ+UTAO7L4buxeW6oilhL9Sq3DezsRS8/9qec4UiXUbeoiX9bzvRXH11JvgskBtxSp4YSNg==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "@rc-component/mini-decimal": "^1.0.1",
@@ -14552,7 +14637,8 @@
     },
     "node_modules/rc-mentions": {
       "version": "2.2.0",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/rc-mentions/-/rc-mentions-2.2.0.tgz",
+      "integrity": "sha512-R7ncCldr02uKgJBBPlXdtnOGQIjZ9C3uoIMi4fabU3CPFdmefYlNF6QM4u2AzgcGt8V0KkoHTN5T6HPdUpet8g==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "@rc-component/trigger": "^1.5.0",
@@ -14569,7 +14655,8 @@
     },
     "node_modules/rc-menu": {
       "version": "9.8.4",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/rc-menu/-/rc-menu-9.8.4.tgz",
+      "integrity": "sha512-lmw2j8I2fhdIzHmC9ajfImfckt0WDb2KVJJBBRIsxPEw2kGkEfjLMUoB1NgiNT/Q5cC8PdjGOGQjHJIJMwyNMw==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "classnames": "2.x",
@@ -14584,12 +14671,13 @@
       }
     },
     "node_modules/rc-motion": {
-      "version": "2.7.3",
-      "license": "MIT",
+      "version": "2.9.2",
+      "resolved": "https://registry.npmjs.org/rc-motion/-/rc-motion-2.9.2.tgz",
+      "integrity": "sha512-fUAhHKLDdkAXIDLH0GYwof3raS58dtNUmzLF2MeiR8o6n4thNpSDQhOqQzWE4WfFZDCi9VEN8n7tiB7czREcyw==",
       "dependencies": {
         "@babel/runtime": "^7.11.1",
         "classnames": "^2.2.1",
-        "rc-util": "^5.21.0"
+        "rc-util": "^5.43.0"
       },
       "peerDependencies": {
         "react": ">=16.9.0",
@@ -14597,8 +14685,9 @@
       }
     },
     "node_modules/rc-notification": {
-      "version": "5.0.4",
-      "license": "MIT",
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/rc-notification/-/rc-notification-5.0.5.tgz",
+      "integrity": "sha512-uEz2jggourwv/rR0obe7RHEa63UchqX4k+e+Qt2c3LaY7U9Tc+L6ANhzgCKYSA/afm0ebjmNZHoB5Cv47xEOcA==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "classnames": "2.x",
@@ -14614,13 +14703,14 @@
       }
     },
     "node_modules/rc-overflow": {
-      "version": "1.3.0",
-      "license": "MIT",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/rc-overflow/-/rc-overflow-1.3.2.tgz",
+      "integrity": "sha512-nsUm78jkYAoPygDAcGZeC2VwIg/IBGSodtOY3pMof4W3M9qRJgqaDYm03ZayHlde3I6ipliAxbN0RUcGf5KOzw==",
       "dependencies": {
         "@babel/runtime": "^7.11.1",
         "classnames": "^2.2.1",
         "rc-resize-observer": "^1.0.0",
-        "rc-util": "^5.19.2"
+        "rc-util": "^5.37.0"
       },
       "peerDependencies": {
         "react": ">=16.9.0",
@@ -14629,7 +14719,8 @@
     },
     "node_modules/rc-pagination": {
       "version": "3.4.2",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/rc-pagination/-/rc-pagination-3.4.2.tgz",
+      "integrity": "sha512-arFQKD15h26+rSXRnQNA8b/tHy98/853W/leXkas2WlViOYG5A2qgEg7CRX64GKb9TqJjdqnDzaMAvl0qF4Tig==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "classnames": "^2.2.1"
@@ -14640,8 +14731,9 @@
       }
     },
     "node_modules/rc-picker": {
-      "version": "3.7.5",
-      "license": "MIT",
+      "version": "3.7.6",
+      "resolved": "https://registry.npmjs.org/rc-picker/-/rc-picker-3.7.6.tgz",
+      "integrity": "sha512-v84wVXjgx5hQ5vTLjMeMMtj6+gn480Gqzwur2A2+o8+eFnhY4jKmuqzHmD8sEevrz0WT/j1pLHFxAV8/lksI2A==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "@rc-component/trigger": "^1.5.0",
@@ -14675,8 +14767,9 @@
       }
     },
     "node_modules/rc-progress": {
-      "version": "3.4.1",
-      "license": "MIT",
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/rc-progress/-/rc-progress-3.4.2.tgz",
+      "integrity": "sha512-iAGhwWU+tsayP+Jkl9T4+6rHeQTG9kDz8JAHZk4XtQOcYN5fj9H34NXNEdRdZx94VUDHMqCb1yOIvi8eJRh67w==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "classnames": "^2.2.6",
@@ -14689,7 +14782,8 @@
     },
     "node_modules/rc-rate": {
       "version": "2.10.0",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/rc-rate/-/rc-rate-2.10.0.tgz",
+      "integrity": "sha512-TCjEpKPeN1m0EnGDDbb1KyxjNTJRzoReiPdtbrBJEey4Ryf/UGOQ6vqmz2yC6DJdYVDVUoZPdoz043ryh0t/nQ==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "classnames": "^2.2.5",
@@ -14704,12 +14798,13 @@
       }
     },
     "node_modules/rc-resize-observer": {
-      "version": "1.3.1",
-      "license": "MIT",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/rc-resize-observer/-/rc-resize-observer-1.4.0.tgz",
+      "integrity": "sha512-PnMVyRid9JLxFavTjeDXEXo65HCRqbmLBw9xX9gfC4BZiSzbLXKzW3jPz+J0P71pLbD5tBMTT+mkstV5gD0c9Q==",
       "dependencies": {
         "@babel/runtime": "^7.20.7",
         "classnames": "^2.2.1",
-        "rc-util": "^5.27.0",
+        "rc-util": "^5.38.0",
         "resize-observer-polyfill": "^1.5.1"
       },
       "peerDependencies": {
@@ -14719,7 +14814,8 @@
     },
     "node_modules/rc-segmented": {
       "version": "2.2.2",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/rc-segmented/-/rc-segmented-2.2.2.tgz",
+      "integrity": "sha512-Mq52M96QdHMsNdE/042ibT5vkcGcD5jxKp7HgPC2SRofpia99P5fkfHy1pEaajLMF/kj0+2Lkq1UZRvqzo9mSA==",
       "dependencies": {
         "@babel/runtime": "^7.11.1",
         "classnames": "^2.2.1",
@@ -14732,8 +14828,9 @@
       }
     },
     "node_modules/rc-select": {
-      "version": "14.5.1",
-      "license": "MIT",
+      "version": "14.5.2",
+      "resolved": "https://registry.npmjs.org/rc-select/-/rc-select-14.5.2.tgz",
+      "integrity": "sha512-Np/lDHvxCnVhVsheQjSV1I/OMJTWJf1n10wq8q1AGy3ytyYLfjNpi6uaz/pmjsbbiSddSWzJnNZCli9LmgBZsA==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "@rc-component/trigger": "^1.5.0",
@@ -14753,7 +14850,8 @@
     },
     "node_modules/rc-slider": {
       "version": "10.1.1",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/rc-slider/-/rc-slider-10.1.1.tgz",
+      "integrity": "sha512-gn8oXazZISEhnmRinI89Z/JD/joAaM35jp+gDtIVSTD/JJMCCBqThqLk1SVJmvtfeiEF/kKaFY0+qt4SDHFUDw==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "classnames": "^2.2.5",
@@ -14768,8 +14866,9 @@
       }
     },
     "node_modules/rc-steps": {
-      "version": "6.0.0",
-      "license": "MIT",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/rc-steps/-/rc-steps-6.0.1.tgz",
+      "integrity": "sha512-lKHL+Sny0SeHkQKKDJlAjV5oZ8DwCdS2hFhAkIjuQt1/pB81M0cA0ErVFdHq9+jmPmFw1vJB2F5NBzFXLJxV+g==",
       "dependencies": {
         "@babel/runtime": "^7.16.7",
         "classnames": "^2.2.3",
@@ -14785,7 +14884,8 @@
     },
     "node_modules/rc-switch": {
       "version": "4.1.0",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/rc-switch/-/rc-switch-4.1.0.tgz",
+      "integrity": "sha512-TI8ufP2Az9oEbvyCeVE4+90PDSljGyuwix3fV58p7HV2o4wBnVToEyomJRVyTaZeqNPAp+vqeo4Wnj5u0ZZQBg==",
       "dependencies": {
         "@babel/runtime": "^7.21.0",
         "classnames": "^2.2.1",
@@ -14797,8 +14897,9 @@
       }
     },
     "node_modules/rc-table": {
-      "version": "7.32.1",
-      "license": "MIT",
+      "version": "7.32.3",
+      "resolved": "https://registry.npmjs.org/rc-table/-/rc-table-7.32.3.tgz",
+      "integrity": "sha512-MqjrI/ibuGg7NEyFsux0dM5GK+3er1gTiZofAkifr2bHf/Sa1nUqXXFmSrYXSOjwpx0xyBnJ3GrHFCIqC/eOzw==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "@rc-component/context": "^1.3.0",
@@ -14816,7 +14917,8 @@
     },
     "node_modules/rc-tabs": {
       "version": "12.6.0",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/rc-tabs/-/rc-tabs-12.6.0.tgz",
+      "integrity": "sha512-L9yIptdrmft573MEsc+xKoGbXzfg3V6NYvgT0sNh+PSzWaeF34W7CIPi98lcWjtsYB80oFMOcAXRilUFxLHTaA==",
       "dependencies": {
         "@babel/runtime": "^7.11.2",
         "classnames": "2.x",
@@ -14836,7 +14938,8 @@
     },
     "node_modules/rc-textarea": {
       "version": "1.2.3",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/rc-textarea/-/rc-textarea-1.2.3.tgz",
+      "integrity": "sha512-YvN8IskIVBRRzcS4deT0VAMim31+T3IoVX4yoCJ+b/iVCvw7yf0usR7x8OaHiUOUoURKcn/3lfGjmtzplcy99g==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "classnames": "^2.2.1",
@@ -14851,7 +14954,8 @@
     },
     "node_modules/rc-tooltip": {
       "version": "6.0.1",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/rc-tooltip/-/rc-tooltip-6.0.1.tgz",
+      "integrity": "sha512-MdvPlsD1fDSxKp9+HjXrc/CxLmA/s11QYIh1R7aExxfodKP7CZA++DG1AjrW80F8IUdHYcR43HAm0Y2BYPelHA==",
       "dependencies": {
         "@babel/runtime": "^7.11.2",
         "@rc-component/trigger": "^1.0.4",
@@ -14863,8 +14967,9 @@
       }
     },
     "node_modules/rc-tree": {
-      "version": "5.7.4",
-      "license": "MIT",
+      "version": "5.7.12",
+      "resolved": "https://registry.npmjs.org/rc-tree/-/rc-tree-5.7.12.tgz",
+      "integrity": "sha512-LXA5nY2hG5koIAlHW5sgXgLpOMz+bFRbnZZ+cCg0tQs4Wv1AmY7EDi1SK7iFXhslYockbqUerQan82jljoaItg==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "classnames": "2.x",
@@ -14882,7 +14987,8 @@
     },
     "node_modules/rc-tree-select": {
       "version": "5.9.0",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/rc-tree-select/-/rc-tree-select-5.9.0.tgz",
+      "integrity": "sha512-oh3blESzLfLCBPSiVDtZ2irzrWWZUMeHvnSwRvFo79br8Z+K/1OhXhXBZmROvfKwaH8YUugAQy8B2j5EGQbdyA==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "classnames": "2.x",
@@ -14897,7 +15003,8 @@
     },
     "node_modules/rc-trigger": {
       "version": "5.3.4",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/rc-trigger/-/rc-trigger-5.3.4.tgz",
+      "integrity": "sha512-mQv+vas0TwKcjAO2izNPkqR4j86OemLRmvL2nOzdP9OWNWA1ivoTt5hzFqYNW9zACwmTezRiN8bttrC7cZzYSw==",
       "dependencies": {
         "@babel/runtime": "^7.18.3",
         "classnames": "^2.2.6",
@@ -14914,8 +15021,9 @@
       }
     },
     "node_modules/rc-upload": {
-      "version": "4.3.4",
-      "license": "MIT",
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/rc-upload/-/rc-upload-4.3.6.tgz",
+      "integrity": "sha512-Bt7ESeG5tT3IY82fZcP+s0tQU2xmo1W6P3S8NboUUliquJLQYLkUcsaExi3IlBVr43GQMCjo30RA2o0i70+NjA==",
       "dependencies": {
         "@babel/runtime": "^7.18.3",
         "classnames": "^2.2.5",
@@ -14927,11 +15035,12 @@
       }
     },
     "node_modules/rc-util": {
-      "version": "5.31.2",
-      "license": "MIT",
+      "version": "5.43.0",
+      "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.43.0.tgz",
+      "integrity": "sha512-AzC7KKOXFqAdIBqdGWepL9Xn7cm3vnAmjlHqUnoQaTMZYhM4VlXGLkkHHxj/BZ7Td0+SOPKB4RGPboBVKT9htw==",
       "dependencies": {
         "@babel/runtime": "^7.18.3",
-        "react-is": "^16.12.0"
+        "react-is": "^18.2.0"
       },
       "peerDependencies": {
         "react": ">=16.9.0",
@@ -14939,24 +15048,26 @@
       }
     },
     "node_modules/rc-util/node_modules/react-is": {
-      "version": "16.13.1",
-      "license": "MIT"
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="
     },
     "node_modules/rc-virtual-list": {
-      "version": "3.5.2",
-      "license": "MIT",
+      "version": "3.14.3",
+      "resolved": "https://registry.npmjs.org/rc-virtual-list/-/rc-virtual-list-3.14.3.tgz",
+      "integrity": "sha512-6+6wiEhdqakNBnbRJymgMlh+90qpkgqherTRo1l1cX7mK6F9hWsazPczmP0lA+64yhC9/t+M9Dh5pjvDWimn8A==",
       "dependencies": {
         "@babel/runtime": "^7.20.0",
         "classnames": "^2.2.6",
         "rc-resize-observer": "^1.0.0",
-        "rc-util": "^5.15.0"
+        "rc-util": "^5.36.0"
       },
       "engines": {
         "node": ">=8.x"
       },
       "peerDependencies": {
-        "react": "*",
-        "react-dom": "*"
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
       }
     },
     "node_modules/rc/node_modules/ini": {
@@ -14973,26 +15084,26 @@
       }
     },
     "node_modules/react": {
-      "version": "17.0.2",
-      "license": "MIT",
+      "version": "18.0.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.0.0.tgz",
+      "integrity": "sha512-x+VL6wbT4JRVPm7EGxXhZ8w8LTROaxPXOqhlGyVSrv0sB1jkyFGgXxJ8LVoPRLvPR6/CIZGFmfzqUa2NYeMr2A==",
       "dependencies": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
+        "loose-envify": "^1.1.0"
       },
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/react-dom": {
-      "version": "17.0.2",
-      "license": "MIT",
+      "version": "18.0.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.0.0.tgz",
+      "integrity": "sha512-XqX7uzmFo0pUceWFCt7Gff6IyIMzFUn7QMZrbrQfGxtaxXZIcGQzoNpRLE3fQLnS4XzLLPMZX2T9TRcSrasicw==",
       "dependencies": {
         "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
-        "scheduler": "^0.20.2"
+        "scheduler": "^0.21.0"
       },
       "peerDependencies": {
-        "react": "17.0.2"
+        "react": "^18.0.0"
       }
     },
     "node_modules/react-i18next": {
@@ -15019,28 +15130,55 @@
       "version": "17.0.2",
       "license": "MIT"
     },
+    "node_modules/react-query": {
+      "version": "3.39.3",
+      "resolved": "https://registry.npmjs.org/react-query/-/react-query-3.39.3.tgz",
+      "integrity": "sha512-nLfLz7GiohKTJDuT4us4X3h/8unOh+00MLb2yJoGTPjxKs2bc1iDhkNx2bd5MKklXnOD3NrVZ+J2UXujA5In4g==",
+      "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-router": {
-      "version": "6.11.2",
-      "license": "MIT",
+      "version": "6.23.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.1.tgz",
+      "integrity": "sha512-fzcOaRF69uvqbbM7OhvQyBTFDVrrGlsFdS3AL+1KfIBtGETibHzi3FkoTRyiDJnWNc2VxrfvR+657ROHjaNjqQ==",
       "dependencies": {
-        "@remix-run/router": "1.6.2"
+        "@remix-run/router": "1.16.1"
       },
       "engines": {
-        "node": ">=14"
+        "node": ">=14.0.0"
       },
       "peerDependencies": {
         "react": ">=16.8"
       }
     },
     "node_modules/react-router-dom": {
-      "version": "6.11.2",
-      "license": "MIT",
+      "version": "6.23.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.23.1.tgz",
+      "integrity": "sha512-utP+K+aSTtEdbWpC+4gxhdlPFwuEfDKq8ZrPFU65bbRJY+l706qjR7yaidBpo3MSeA/fzwbXWbKBI6ftOnP3OQ==",
       "dependencies": {
-        "@remix-run/router": "1.6.2",
-        "react-router": "6.11.2"
+        "@remix-run/router": "1.16.1",
+        "react-router": "6.23.1"
       },
       "engines": {
-        "node": ">=14"
+        "node": ">=14.0.0"
       },
       "peerDependencies": {
         "react": ">=16.8",
@@ -15183,6 +15321,11 @@
         "jsesc": "bin/jsesc"
       }
     },
+    "node_modules/remove-accents": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.5.0.tgz",
+      "integrity": "sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A=="
+    },
     "node_modules/request-progress": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/request-progress/-/request-progress-3.0.0.tgz",
@@ -15296,7 +15439,6 @@
     },
     "node_modules/rimraf": {
       "version": "3.0.2",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "glob": "^7.1.3"
@@ -15520,11 +15662,11 @@
       }
     },
     "node_modules/scheduler": {
-      "version": "0.20.2",
-      "license": "MIT",
+      "version": "0.21.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.21.0.tgz",
+      "integrity": "sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==",
       "dependencies": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
+        "loose-envify": "^1.1.0"
       }
     },
     "node_modules/scroll-into-view-if-needed": {
@@ -15978,8 +16120,9 @@
       }
     },
     "node_modules/stylis": {
-      "version": "4.2.0",
-      "license": "MIT"
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz",
+      "integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg=="
     },
     "node_modules/supports-color": {
       "version": "5.5.0",
@@ -16551,6 +16694,15 @@
         "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==",
+      "dependencies": {
+        "@babel/runtime": "^7.6.2",
+        "detect-node": "^2.0.4"
+      }
+    },
     "node_modules/untildify": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/untildify/-/untildify-4.0.0.tgz",
diff --git a/package.json b/package.json
index e45b18cec..b5c7597a2 100644
--- a/package.json
+++ b/package.json
@@ -23,10 +23,11 @@
     "i18next": "^21.6.11",
     "i18next-browser-languagedetector": "^6.1.3",
     "moment": "^2.30.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-i18next": "^11.15.4",
-    "react-router-dom": "^6.2.1",
+    "react-query": "^3.39.3",
+    "react-router-dom": "^6.23.1",
     "recoil": "^0.7.1",
     "regenerator-runtime": "^0.13.9",
     "sass": "^1.50.0",
diff --git a/src/App.tsx b/src/App.tsx
index be28d864b..6a168e9b6 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,5 @@
-import { notification } from "antd";
 import React, { useEffect } from "react";
+import { notification } from "antd";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import { useRecoilState, useRecoilValue } from "recoil";
 import { darkModeState, displayToast, backupRestoreModal, languageChangeModal } from "@store";
@@ -7,22 +7,26 @@ import { darkModeState, displayToast, backupRestoreModal, languageChangeModal }
 import lightAvatar from "@assets/images/mainAvatarLight.svg";
 import darkAvatar from "@assets/images/mainAvatarDark.svg";
 
-import { FAQPage } from "@pages/FAQPage/FAQPage";
-import { MyTimePage } from "@pages/MyTimePage/MyTimePage";
-import { LandingPage } from "@pages/LandingPage/LandingPage";
-import { FeedbackPage } from "@pages/FeedbackPage/FeedbackPage";
-import { ShowFeelingsPage } from "@pages/ShowFeelingsPage/ShowFeelingsPage";
 import GoalsPage from "@pages/GoalsPage/GoalsPage";
 import InvitePage from "@pages/InvitePage/InvitePage";
 import InvestPage from "@pages/InvestPage/InvestPage";
 import BackupRestoreModal from "@components/BackupRestoreModal";
+
+import { FAQPage } from "@pages/FAQPage/FAQPage";
+import { MyTimePage } from "@pages/MyTimePage/MyTimePage";
+import { LandingPage } from "@pages/LandingPage/LandingPage";
+import { FeedbackPage } from "@pages/FeedbackPage/FeedbackPage";
+import { FeelingsPage } from "@pages/FeelingsPage/FeelingsPage";
 import { LanguageChangeModal } from "@components/LanguageChangeModal/LanguageChangeModal";
+
+import useApp from "./hooks/useApp";
+import AppLayout from "./layouts/AppLayout";
 import { themeState } from "./store/ThemeState";
 
 import "./global.scss";
 import "./customize.scss";
 import "./override.scss";
-import useApp from "./hooks/useApp";
+import "./short.scss";
 
 const Context = React.createContext({ name: "Default" });
 
@@ -77,7 +81,14 @@ const App = () => {
             )}
             <Route path="/Feedback" element={<FeedbackPage />} />
             <Route path="/MyGoals" element={<GoalsPage />} />
-            <Route path="/MyJournal" element={<ShowFeelingsPage />} />
+            <Route
+              path="/MyJournal"
+              element={
+                <AppLayout title="myJournal">
+                  <FeelingsPage />
+                </AppLayout>
+              }
+            />
             <Route path="*" element={<GoalsPage />} />
             <Route path="/ZinZenFAQ" element={<FAQPage />} />
             <Route path="/invite/:id" element={<InvitePage />} />
diff --git a/src/Interfaces/ICommon.ts b/src/Interfaces/ICommon.ts
index 7e252972a..a82a3fd0c 100644
--- a/src/Interfaces/ICommon.ts
+++ b/src/Interfaces/ICommon.ts
@@ -23,7 +23,7 @@ export interface ZModalProps {
   children: React.ReactNode;
   type?: string;
   open: boolean;
-  onCancel: () => void;
+  onCancel?: () => void;
   width?: number;
   style?: React.CSSProperties;
 }
@@ -35,10 +35,10 @@ export interface ColorPaletteProps {
 
 export interface ISubHeaderProps {
   title: string;
-  leftNav: () => void;
-  rightNav: () => void;
-  showLeftNav: boolean;
-  showRightNav: boolean;
+  leftNav?: () => void;
+  rightNav?: () => void;
+  showLeftNav?: boolean;
+  showRightNav?: boolean;
 }
 
 export interface IconProps {
diff --git a/src/Providers.tsx b/src/Providers.tsx
new file mode 100644
index 000000000..f60f78664
--- /dev/null
+++ b/src/Providers.tsx
@@ -0,0 +1,14 @@
+import React, { ReactNode } from "react";
+import { QueryClient, QueryClientProvider } from "react-query";
+import { RecoilRoot } from "recoil";
+
+const Providers = ({ children }: { children: ReactNode }) => {
+  const queryClient = new QueryClient();
+  return (
+    <RecoilRoot>
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    </RecoilRoot>
+  );
+};
+
+export default Providers;
diff --git a/src/api/FeelingsAPI/index.ts b/src/api/FeelingsAPI/index.ts
index c9b1230b8..de2196523 100644
--- a/src/api/FeelingsAPI/index.ts
+++ b/src/api/FeelingsAPI/index.ts
@@ -1,106 +1,28 @@
 import { db, IFeelingItem } from "@models";
-import { getJustDate } from "@src/utils";
 
-export const getFeeling = async (feelingId: number) => {
-  db.transaction("rw", db.feelingsCollection, async () => {
-    const feeling = await db.feelingsCollection.get(feelingId);
-    return feeling;
-  }).catch((e) => {
-    console.log(e.stack || e);
-  });
+export const fetchFeelings = async ({ pageParam = 1 }) => {
+  const limit = 6;
+  const offset = (pageParam - 1) * limit;
+  const feelings = await db.feelingsCollection.orderBy("date").reverse().offset(offset).limit(limit).toArray();
+  return { feelings, nextPage: pageParam + 1 };
 };
 
-export const removeFeeling = (feelingId: number) => {
-  db.transaction("rw", db.feelingsCollection, async () => {
-    await db.feelingsCollection.delete(feelingId);
-  }).catch((e) => {
-    console.log(e.stack || e);
-  });
+export const addFeeling = async (feeling: Omit<IFeelingItem, "id">) => {
+  return db.feelingsCollection.add(feeling);
 };
 
-export const getAllFeelings = async () => {
-  const allFeelings = await db.feelingsCollection.toArray();
-  return allFeelings;
+export const getFeelings = async () => {
+  return db.feelingsCollection.toArray();
 };
 
-export const getFeelingsOnDate = async (date: Date) => {
-  let feelingsList: IFeelingItem[] = [];
-  await db
-    .transaction("rw", db.feelingsCollection, async () => {
-      feelingsList = await db.feelingsCollection.where("date").equals(date).toArray();
-    })
-    .catch((e) => {
-      console.log(e.stack || e);
-    });
-  return feelingsList;
+export const getFeelingById = async (id: number) => {
+  return db.feelingsCollection.get(id);
 };
 
-export const addFeelingWithNote = async (
-  feelingName: string,
-  feelingCategory: string,
-  feelingDate: Date,
-  feelingNote: string,
-) => {
-  // const currentDate = getJustDate(new Date());
-  const feelingDateFormatted = getJustDate(feelingDate);
-  const currentDateFeelings = await getFeelingsOnDate(feelingDate);
-  const checkFeelings = (feeling: IFeelingItem) => feeling.content === feelingName;
-  if (currentDateFeelings.some(checkFeelings)) {
-    return;
-  }
-  db.transaction("rw", db.feelingsCollection, async () => {
-    await db.feelingsCollection.add({
-      content: feelingName,
-      date: feelingDateFormatted,
-      category: feelingCategory,
-      note: feelingNote,
-    });
-  }).catch((e) => {
-    console.log(e.stack || e);
-  });
+export const updateFeeling = async (id: number, updatedFeeling: Partial<IFeelingItem>) => {
+  return db.feelingsCollection.update(id, updatedFeeling);
 };
 
-export const addFeeling = async (feelingName: string, feelingCategory: string, feelingDate: Date) => {
-  // const currentDate = getJustDate(new Date());
-  const feelingDateFormatted = getJustDate(feelingDate);
-  const currentDateFeelings = await getFeelingsOnDate(feelingDate);
-  const checkFeelings = (feeling: IFeelingItem) => feeling.content === feelingName;
-  if (currentDateFeelings.some(checkFeelings)) {
-    return;
-  }
-  db.transaction("rw", db.feelingsCollection, async () => {
-    await db.feelingsCollection.add({ content: feelingName, date: feelingDateFormatted, category: feelingCategory });
-  }).catch((e) => {
-    console.log(e.stack || e);
-  });
-};
-
-export const addFeelingNote = async (feelingId: number, InputNote: string) => {
-  const feeling = await db.feelingsCollection.get(feelingId);
-  const updatedFeeling = { ...feeling, note: InputNote };
-  let updatedFeelingsList;
-  await db
-    .transaction("rw", db.feelingsCollection, async () => {
-      await db.feelingsCollection.put(updatedFeeling as IFeelingItem);
-      updatedFeelingsList = await getAllFeelings();
-    })
-    .catch((e) => {
-      console.log(e.stack || e);
-    });
-  return updatedFeelingsList;
-};
-
-export const removeFeelingNote = async (feelingId: number) => {
-  const feeling = await db.feelingsCollection.get(feelingId);
-  delete feeling?.note;
-  let updatedFeelingsList;
-  await db
-    .transaction("rw", db.feelingsCollection, async () => {
-      await db.feelingsCollection.put(feeling!);
-      updatedFeelingsList = await getAllFeelings();
-    })
-    .catch((e) => {
-      console.log(e.stack || e);
-    });
-  return updatedFeelingsList;
+export const deleteFeeling = async (id: number) => {
+  return db.feelingsCollection.delete(id);
 };
diff --git a/src/common/LoadingContainer.tsx b/src/common/LoadingContainer.tsx
new file mode 100644
index 000000000..60cd24882
--- /dev/null
+++ b/src/common/LoadingContainer.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+import zinzenLightLogo from "@assets/images/zinzenLightLogo.svg";
+
+const LoadingContainer = () => {
+  return (
+    <div
+      className="place-middle f-col gap-8"
+      style={{
+        gap: 8,
+        height: "100%",
+      }}
+    >
+      <img className="logo-flip" src={zinzenLightLogo} alt="ZinZen" />
+      <p>loading...</p>
+    </div>
+  );
+};
+
+export default LoadingContainer;
diff --git a/src/common/SubHeader.tsx b/src/common/SubHeader.tsx
index 984009183..6440fd0cf 100644
--- a/src/common/SubHeader.tsx
+++ b/src/common/SubHeader.tsx
@@ -6,7 +6,7 @@ import chevronLeftIcon from "@assets/images/chevronLeft.svg";
 
 import { ISubHeaderProps } from "@src/Interfaces/ICommon";
 
-const NavBtn = ({ show, className, handleClick }: { show: boolean; className: string; handleClick: () => void }) => (
+const NavBtn = ({ show, className, handleClick }: { show?: boolean; className: string; handleClick?: () => void }) => (
   <Col span={6} style={{ textAlign: "center", alignSelf: "center" }}>
     {show && (
       <button type="button" className="ordinary-element" onClick={handleClick}>
diff --git a/src/components/FeelingsComponents/AddFeeling.scss b/src/components/FeelingsComponents/AddFeeling.scss
deleted file mode 100644
index ff46e87fd..000000000
--- a/src/components/FeelingsComponents/AddFeeling.scss
+++ /dev/null
@@ -1,59 +0,0 @@
-.feelings-category {
-  background-color: var(--bottom-nav-color);
-  border-radius: 10px;
-  display: flex;
-  position: relative;
-  height: 48px;
-  box-shadow: var(--shadow);
-  button {
-    background: transparent;
-    padding: 12px 16px;
-    font-weight: 400;
-    font-size: 1.143em;
-    align-self: center;
-    cursor: pointer;
-  }
-  button:first-child {
-    border: none;
-    width: 80%;
-    text-align: left;
-  }
-  button:last-child {
-    width: 20%;
-    display: flex;
-    justify-content: center;
-    border: none;
-  }
-}
-
-#feelingOptions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.feelingOption,
-.feelingOption-selected {
-  border: none;
-  border-radius: 7px;
-  padding: 7px 20px;
-  font-weight: 400;
-  background: var(--bottom-nav-color);
-  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.4);
-}
-
-.feelingOption-selected {
-  background: var(--selection-color);
-}
-
-#addFeelings-container {
-  display: flex;
-  flex-direction: column;
-  gap: 14px;
-
-  .action-btn {
-    margin-left: auto;
-    width: fit-content;
-    padding: 8px 18px;
-  }
-}
diff --git a/src/components/FeelingsComponents/AddFeeling.tsx b/src/components/FeelingsComponents/AddFeeling.tsx
deleted file mode 100644
index 6aae634f2..000000000
--- a/src/components/FeelingsComponents/AddFeeling.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-// @ts-nocheck
-import React, { useState } from "react";
-import { useTranslation } from "react-i18next";
-import { useRecoilValue } from "recoil";
-
-import backIcon from "@assets/images/backIcon.svg";
-
-import { darkModeState } from "@store";
-import { getJustDate } from "@utils";
-import { addFeelingWithNote, addFeeling } from "@src/api/FeelingsAPI";
-import { feelingsList, feelingsCategories, feelingsEmojis } from "@consts/FeelingsList";
-
-import "@translations/i18n";
-import "./AddFeeling.scss";
-import ZModal from "@src/common/ZModal";
-
-export const AddFeeling = ({ feelingDate }: { feelingDate: Date | null }) => {
-  const { t } = useTranslation();
-  const darkModeStatus = useRecoilValue(darkModeState);
-  const date = feelingDate ? getJustDate(feelingDate) : getJustDate(new Date());
-
-  const [feelingNote, setFeelingNote] = useState("");
-  const [selectedCategory, setSelectedCategory] = useState("");
-  const [choice, setChoice] = useState(0);
-  const [customFeeling, setCustomFeeling] = useState<string>("");
-
-  const addThisFeeling = async (directAdd = "") => {
-    if (directAdd !== "") {
-      await addFeeling(directAdd, directAdd, date);
-    } else if (feelingNote && feelingNote !== "") {
-      await addFeelingWithNote(
-        customFeeling === "" ? t(feelingsList[selectedCategory][choice]) : customFeeling,
-        selectedCategory,
-        date,
-        feelingNote,
-      );
-    } else {
-      await addFeeling(
-        customFeeling === "" ? t(feelingsList[selectedCategory][choice]) : customFeeling,
-        selectedCategory,
-        date,
-      );
-    }
-    window.history.back();
-  };
-  return (
-    <ZModal
-      type={`notes-modal${darkModeStatus ? "-dark" : ""}`}
-      open={!!feelingDate}
-      onCancel={() => window.history.back()}
-    >
-      {selectedCategory === "" ? (
-        <>
-          <p className="popupModal-title">
-            {date.getTime() === getJustDate(new Date()).getTime()
-              ? t("feelingsMessage")
-              : `${t("feelingsMessagePast")} ${date.toDateString()}`}
-          </p>
-          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
-            {feelingsCategories.map((category: string) => (
-              <div key={`feeling-${category}`} className="feelings-category">
-                <button
-                  type="button"
-                  onClick={async () => {
-                    await addThisFeeling(category);
-                  }}
-                >
-                  {feelingsEmojis[category]}&nbsp;&nbsp;
-                  {t(category)}
-                </button>
-                <button
-                  type="button"
-                  onClick={() => {
-                    setSelectedCategory(category);
-                  }}
-                >
-                  {" "}
-                  <img alt="add feeling" src={backIcon} className="chevronRight theme-icon" />
-                </button>
-              </div>
-            ))}
-          </div>
-        </>
-      ) : (
-        <div id="addFeelings-container">
-          <p className="popupModal-title">{`You feel ${
-            customFeeling === "" ? t(feelingsList[selectedCategory][choice]) : customFeeling
-          }`}</p>
-          <div id="feelingOptions">
-            {selectedCategory !== "" &&
-              feelingsList[selectedCategory].map((feeling, index) => (
-                <button
-                  type="button"
-                  className={`feelingOption${choice === index ? "-selected" : ""}`}
-                  key={`feelingOption-${feeling}`}
-                  onClick={() => {
-                    setChoice(index);
-                    setCustomFeeling("");
-                  }}
-                >
-                  {t(feeling)}
-                </button>
-              ))}
-          </div>
-          <input
-            type="text"
-            placeholder="New Feeling? Write here..."
-            onChange={(e) => {
-              setCustomFeeling(e.target.value);
-              setChoice(e.target.value === "" ? 0 : -1);
-            }}
-            value={customFeeling}
-          />
-          <input
-            type="text"
-            placeholder="Add Note"
-            onChange={(e) => {
-              setFeelingNote(e.target.value);
-            }}
-          />
-          <button
-            type="button"
-            onClick={async () => {
-              await addThisFeeling();
-            }}
-            className={`action-btn submit-icon${darkModeStatus ? "-dark" : ""}`}
-          >
-            {" "}
-            Save
-          </button>
-        </div>
-      )}
-    </ZModal>
-  );
-};
diff --git a/src/components/Header/Header.scss b/src/components/Header/Header.scss
index 0e17b85fe..f5207035f 100644
--- a/src/components/Header/Header.scss
+++ b/src/components/Header/Header.scss
@@ -21,7 +21,7 @@
       margin-left: 20px;
     }
   }
-  
+
   h6 {
     line-height: 27px;
     font-weight: 500;
@@ -54,7 +54,7 @@
   width: calc(100% - 26px);
   max-width: 560px;
   img {
-    width: 18px ;
+    width: 18px;
     height: 18px;
     align-self: center;
     padding: 14px 14px 14px 26px;
@@ -94,7 +94,7 @@
 }
 
 .logo-flip {
-  animation: flipAnimation 0.5s forwards;
+  animation: flipAnimation 0.8s forwards infinite;
 }
 
 @keyframes flipAnimation {
diff --git a/src/constants/FeelingsList.ts b/src/constants/FeelingsList.ts
index 8a8014632..0519b8520 100644
--- a/src/constants/FeelingsList.ts
+++ b/src/constants/FeelingsList.ts
@@ -1,6 +1,6 @@
 export const feelingsCategories = ["happy", "excited", "gratitude", "sad", "afraid", "angry", "tired"];
 
-export const feelingsEmojis = {
+export const feelingsEmojis: { [name: string]: string } = {
   happy: "😊",
   excited: "😃",
   gratitude: "😇",
@@ -10,7 +10,7 @@ export const feelingsEmojis = {
   tired: "😓",
 };
 
-export const feelingsList = {
+export const feelingsList: { [name: string]: string[] } = {
   happy: ["happy", "loved", "relieved", "content", "peaceful", "joyful"],
   excited: ["excited", "amused", "Top of the world", "proud", "compassionate", "cheerful"],
   gratitude: ["gratitude", "harmony", "thankful", "triumphed", "worthy", "satisfied", "awed"],
diff --git a/src/global.scss b/src/global.scss
index 9808b1ae5..f052e0a4a 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -31,16 +31,7 @@ h6 {
   height: 100vh;
   overflow: scroll;
   background: var(--app-background);
-  p,
-  button,
-  span,
-  div,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
+  * {
     color: black;
   }
   p,
@@ -58,17 +49,7 @@ h6 {
 }
 .App-dark,
 .popupModal-dark {
-  p,
-  button,
-  input,
-  span,
-  div,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
+  * {
     color: white;
   }
   .theme-icon {
@@ -152,12 +133,6 @@ h6 {
   background: var(--secondary-background);
 }
 
-.ordinary-element {
-  border: none;
-  background: transparent;
-  outline: none;
-}
-
 /* button */
 .default-btn,
 .default-btn-dark {
diff --git a/src/hooks/useFeelingsData.ts b/src/hooks/useFeelingsData.ts
deleted file mode 100644
index aa281fedc..000000000
--- a/src/hooks/useFeelingsData.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { useState, useEffect } from "react";
-import { getAllFeelings } from "@api/FeelingsAPI";
-import { getJustDate } from "@utils";
-import { feelingListType } from "@src/global";
-import { IFeelingItem } from "@src/models";
-
-const useFeelingsData = (trigger: boolean) => {
-  const [feelingsList, setFeelingsList] = useState<feelingListType>({});
-
-  useEffect(() => {
-    const fetchAndOrganizeFeelings = async () => {
-      const allFeelings: IFeelingItem[] = await getAllFeelings();
-      const feelingsByDates = allFeelings.reduce<feelingListType>((dates, feeling) => {
-        const newDates = { ...dates };
-        const formattedDate = getJustDate(feeling.date).toString();
-        if (newDates[formattedDate]) {
-          newDates[formattedDate].push(feeling);
-        } else {
-          newDates[formattedDate] = [feeling];
-        }
-        return newDates;
-      }, {});
-
-      const todayString = getJustDate(new Date()).toString();
-      if (!feelingsByDates[todayString]) {
-        feelingsByDates[todayString] = [];
-      }
-
-      setFeelingsList(feelingsByDates);
-    };
-
-    fetchAndOrganizeFeelings();
-  }, [trigger]);
-
-  return { feelingsList, setFeelingsList };
-};
-
-export default useFeelingsData;
diff --git a/src/index.tsx b/src/index.tsx
index bd49d79fd..e3a6dc9f7 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,17 +1,19 @@
 import React from "react";
-import ReactDOM from "react-dom";
-import { RecoilRoot } from "recoil";
+import { createRoot } from "react-dom/client";
 import * as serviceWorkerRegistration from "./service-worker/serviceWorkerRegistration";
 
 import App from "./App";
+import Providers from "./Providers";
 
-ReactDOM.render(
+// @ts-ignore
+const root = createRoot(document.getElementById("root"));
+
+root.render(
   <React.StrictMode>
-    <RecoilRoot>
+    <Providers>
       <App />
-    </RecoilRoot>
+    </Providers>
   </React.StrictMode>,
-  document.getElementById("root"),
 );
 
 serviceWorkerRegistration.register();
diff --git a/src/layouts/AppLayout.tsx b/src/layouts/AppLayout.tsx
index 6e7efcf42..5f019be3e 100644
--- a/src/layouts/AppLayout.tsx
+++ b/src/layouts/AppLayout.tsx
@@ -17,6 +17,7 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children, title, debounceSearch }
         marginTop: 60,
         height: "calc(100vh - 112px)",
         position: "sticky",
+        paddingBottom: 150,
       }}
     >
       {children}
diff --git a/src/models/FeelingItem.ts b/src/models/FeelingItem.ts
index 78b99b999..21288da9d 100644
--- a/src/models/FeelingItem.ts
+++ b/src/models/FeelingItem.ts
@@ -2,6 +2,8 @@ export interface IFeelingItem {
   id?: number;
   content: string;
   category: string;
-  date: Date;
+  date: number;
   note?: string;
 }
+
+export type TFeelingsObject = { [id: string]: IFeelingItem[] };
diff --git a/src/pages/ShowFeelingsPage/ShowFeelings.scss b/src/pages/FeelingsPage/FeelingsPage.scss
similarity index 51%
rename from src/pages/ShowFeelingsPage/ShowFeelings.scss
rename to src/pages/FeelingsPage/FeelingsPage.scss
index 3803e8a54..bc41e17f8 100644
--- a/src/pages/ShowFeelingsPage/ShowFeelings.scss
+++ b/src/pages/FeelingsPage/FeelingsPage.scss
@@ -1,23 +1,15 @@
+/* feelings page */
 .feelingOfDay,
 .feelingOfDay-dark {
-  display: flex;
-  justify-content: space-between;
   padding: 18px 21px;
-  width: 100%;
-  background: transparent;
-  border: none;
-  border-bottom: 1px solid var(--default-border-color);
+  border-bottom: 1px solid var(--default-border-color) !important;
   img {
     width: 18px;
     height: 18px;
   }
   .feelingOfDay-name {
     font-size: 1.143rem;
-    font-weight: 600;
-    display: flex;
-    justify-content: start;
     text-align: left;
-    align-items: center;
   }
   .feelingOfDay-content {
     display: -webkit-box;
@@ -26,7 +18,6 @@
     overflow: hidden;
   }
   .feelingOfDaty-options {
-    display: flex;
     align-self: center;
     gap: 20px;
     height: 25px;
@@ -42,7 +33,7 @@
 
 .feelingOfDay:last-child,
 .feelingOfDay-dark:last-child {
-  border: none;
+  border: none !important;
 }
 
 .addFeeling-btn,
@@ -59,27 +50,52 @@
   border: 3px solid #3a2a22 !important;
 }
 
-.notes-modal-input {
-  width: 100%;
+.feelingsModal-btn {
+  padding: 8px 14px;
 }
 
-.notes-modal-input,
-.show-feeling__note-textarea,
-.feelingsModal-btn {
-  border: none;
-  padding: 8px;
-  outline: none;
+/* note modal */
+.note-modal-actions {
+  align-self: flex-end;
+  button {
+    padding: 8px 12px;
+  }
+}
+
+.feeling-note-input {
   font-size: 16px;
-  border-radius: 8px;
+  border: 1px solid #c3c3c3 !important;
+  padding: 12px;
 }
 
-.feelingsModal-btn {
-  padding: 8px 14px;
+/* Add Feeling */
+.feelings-category {
+  background-color: var(--bottom-nav-color);
+  position: relative;
+  height: 48px;
+  box-shadow: var(--shadow);
+  button {
+    padding: 12px 16px;
+    font-size: 1.143em;
+    cursor: pointer;
+  }
+}
+
+.feelingOption,
+.feelingOption-selected {
+  border: none;
+  padding: 7px 20px;
+  font-weight: 400;
+  background: var(--bottom-nav-color);
+  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.4);
+}
+
+.feelingOption-selected {
+  background: var(--selection-color);
 }
 
-.show-feeling-actions {
-  display: flex;
-  gap: 15px;
-  justify-content: flex-end;
-  margin-top: 15px;
+.action-btn {
+  margin-left: auto;
+  width: fit-content;
+  padding: 8px 18px;
 }
diff --git a/src/pages/FeelingsPage/FeelingsPage.tsx b/src/pages/FeelingsPage/FeelingsPage.tsx
new file mode 100644
index 000000000..a2422f1ff
--- /dev/null
+++ b/src/pages/FeelingsPage/FeelingsPage.tsx
@@ -0,0 +1,86 @@
+/* eslint-disable react/no-array-index-key */
+import { message } from "antd";
+import { useLocation } from "react-router-dom";
+import { useRecoilValue } from "recoil";
+import React, { useEffect, useRef } from "react";
+import { useInfiniteQuery, useQueryClient } from "react-query";
+
+import SubHeader from "@src/common/SubHeader";
+import LoadingContainer from "@src/common/LoadingContainer";
+
+import { AddFeeling } from "@pages/FeelingsPage/components/AddFeeling";
+import { IFeelingItem } from "@src/models";
+import { displayAddFeeling } from "@src/store/FeelingsState";
+import { fetchFeelings, updateFeeling } from "@src/api/FeelingsAPI";
+import { getTitleForDate, groupFeelingsByDate } from "@src/utils/journal";
+
+import Feeling from "./components/Feeling";
+import NoteModal from "./components/NoteModal";
+
+import "./FeelingsPage.scss";
+
+export const FeelingsPage = () => {
+  const location = useLocation();
+  const queryClient = useQueryClient();
+  const { displayNoteModal, note } = location.state || {};
+  const showAddFeelingsModal = useRecoilValue(displayAddFeeling);
+
+  const { data, fetchNextPage, hasNextPage, status } = useInfiniteQuery("feelings", fetchFeelings, {
+    getNextPageParam: (lastPage) => (lastPage.feelings.length ? lastPage.nextPage : undefined),
+  });
+  const loadMoreRef = useRef(null);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting && hasNextPage) {
+          fetchNextPage();
+        }
+      },
+      { threshold: 1 },
+    );
+    if (loadMoreRef.current) {
+      observer.observe(loadMoreRef.current);
+    }
+    return () => {
+      if (loadMoreRef.current) {
+        observer.unobserve(loadMoreRef.current);
+      }
+    };
+  }, [hasNextPage, fetchNextPage]);
+
+  const renderFeelings = (feelingList: IFeelingItem[]) => {
+    const groupedFeelings = groupFeelingsByDate(feelingList);
+    return Object.keys(groupedFeelings).map((date) => (
+      <div key={date}>
+        <SubHeader title={getTitleForDate(new Date(date).toDateString())} />
+        {groupedFeelings[date].map((feeling) => (
+          <Feeling key={feeling.id} data={feeling} />
+        ))}
+      </div>
+    ));
+  };
+  if (status === "error") {
+    message.error("Something went wrong");
+    window.history.back();
+  }
+  return (
+    <>
+      {status === "loading" && <LoadingContainer />}
+      <div>{data && renderFeelings(data.pages.flatMap((page) => page.feelings))}</div>
+      <div ref={loadMoreRef} />
+      {displayNoteModal >= 0 && (
+        <NoteModal
+          open={displayNoteModal}
+          defaultValue={note}
+          saveNote={async (newNote = "") => {
+            await updateFeeling(displayNoteModal, { note: newNote });
+            queryClient.invalidateQueries("feelings");
+            window.history.back();
+          }}
+        />
+      )}
+      {showAddFeelingsModal && <AddFeeling />}
+    </>
+  );
+};
diff --git a/src/pages/FeelingsPage/components/AddFeeling.tsx b/src/pages/FeelingsPage/components/AddFeeling.tsx
new file mode 100644
index 000000000..4657aaf6d
--- /dev/null
+++ b/src/pages/FeelingsPage/components/AddFeeling.tsx
@@ -0,0 +1,138 @@
+import React, { useState } from "react";
+import { Row, Col } from "antd";
+import { useNavigate } from "react-router-dom";
+import { useRecoilValue } from "recoil";
+import { useQueryClient } from "react-query";
+import { useTranslation } from "react-i18next";
+
+import ZModal from "@src/common/ZModal";
+import backIcon from "@assets/images/backIcon.svg";
+
+import { addFeeling } from "@src/api/FeelingsAPI";
+import { getJustDate } from "@utils";
+import { darkModeState } from "@store";
+import { feelingsList, feelingsCategories, feelingsEmojis } from "@consts/FeelingsList";
+
+import "@translations/i18n";
+
+export const AddFeeling = () => {
+  const { t } = useTranslation();
+  const queryClient = useQueryClient();
+  const navigate = useNavigate();
+  const darkModeStatus = useRecoilValue(darkModeState);
+  const date = new Date();
+
+  const [feelingNote, setFeelingNote] = useState("");
+  const [selectedCategory, setSelectedCategory] = useState("");
+  const [customFeeling, setCustomFeeling] = useState({
+    text: "",
+    emojiIndx: 0,
+  });
+
+  const addThisFeeling = async (directCategory?: string) => {
+    const { emojiIndx, text } = customFeeling;
+    const optedCategory = directCategory || selectedCategory;
+    await addFeeling({
+      content: text || t(feelingsList[optedCategory][emojiIndx]),
+      category: optedCategory,
+      date: Date.now(),
+      note: feelingNote,
+    });
+    queryClient.invalidateQueries("feelings");
+    navigate(-1);
+  };
+  return (
+    <ZModal type={`notes-modal${darkModeStatus ? "-dark" : ""}`} open>
+      {selectedCategory === "" ? (
+        <>
+          <p className="popupModal-title">
+            {date.getTime() === getJustDate(new Date()).getTime()
+              ? t("feelingsMessage")
+              : `${t("feelingsMessagePast")} ${date.toDateString()}`}
+          </p>
+          <div className="d-flex f-col gap-8">
+            {feelingsCategories.map((category: string) => (
+              <Row key={`feeling-${category}`} className="feelings-category br-8">
+                <Col span={20}>
+                  <button
+                    className="simple w-100 fw-400"
+                    type="button"
+                    style={{ textAlign: "left" }}
+                    onClick={async () => {
+                      await addThisFeeling(category);
+                    }}
+                  >
+                    {feelingsEmojis[category]}&nbsp;&nbsp;
+                    {t(category)}
+                  </button>
+                </Col>
+                <Col span={4}>
+                  <button
+                    className="simple w-100 fw-400"
+                    type="button"
+                    onClick={() => {
+                      setSelectedCategory(category);
+                    }}
+                  >
+                    <img alt="add feeling" src={backIcon} className="chevronRight theme-icon" />
+                  </button>
+                </Col>
+              </Row>
+            ))}
+          </div>
+        </>
+      ) : (
+        <div className="d-flex f-col gap-16">
+          <p className="popupModal-title">{`You feel ${
+            customFeeling.text === "" ? t(feelingsList[selectedCategory][customFeeling.emojiIndx]) : customFeeling.text
+          }`}</p>
+          <div className="f-wrap gap-8">
+            {selectedCategory !== "" &&
+              feelingsList[selectedCategory].map((feeling, index) => (
+                <button
+                  type="button"
+                  className={`br-8 feelingOption${customFeeling.emojiIndx === index ? "-selected" : ""}`}
+                  key={`feelingOption-${feeling}`}
+                  onClick={() => {
+                    setCustomFeeling({
+                      text: "",
+                      emojiIndx: index,
+                    });
+                  }}
+                >
+                  {t(feeling)}
+                </button>
+              ))}
+          </div>
+          <input
+            type="text"
+            placeholder="New Feeling? Write here..."
+            onChange={(e) => {
+              setCustomFeeling({
+                text: e.target.value,
+                emojiIndx: e.target.value === "" ? 0 : -1,
+              });
+            }}
+            value={customFeeling.text}
+          />
+          <input
+            type="text"
+            placeholder="Add Note"
+            onChange={(e) => {
+              setFeelingNote(e.target.value);
+            }}
+          />
+          <button
+            type="button"
+            onClick={async () => {
+              await addThisFeeling();
+            }}
+            className={`action-btn submit-icon${darkModeStatus ? "-dark" : ""}`}
+          >
+            Save
+          </button>
+        </div>
+      )}
+    </ZModal>
+  );
+};
diff --git a/src/pages/FeelingsPage/components/Feeling.tsx b/src/pages/FeelingsPage/components/Feeling.tsx
new file mode 100644
index 000000000..2800b5ff6
--- /dev/null
+++ b/src/pages/FeelingsPage/components/Feeling.tsx
@@ -0,0 +1,72 @@
+import React from "react";
+import { useRecoilValue } from "recoil";
+import { useQueryClient } from "react-query";
+import { useTranslation } from "react-i18next";
+import { useLocation, useNavigate } from "react-router-dom";
+
+import { IFeelingItem } from "@src/models";
+import { darkModeState } from "@src/store";
+import { deleteFeeling } from "@src/api/FeelingsAPI";
+import { feelingsEmojis } from "@src/constants/FeelingsList";
+
+import noteIcon from "@assets/images/noteIcon.svg";
+import deleteIcon from "@assets/images/deleteIcon.svg";
+
+const ActionBtn = ({ icon, handleClick }: { icon: string; handleClick: () => void }) => {
+  const darkMode = useRecoilValue(darkModeState);
+  return (
+    <button type="button" className="simple" onClick={handleClick}>
+      <img alt="" className={`${darkMode ? "dark-svg" : ""}`} src={icon} />
+    </button>
+  );
+};
+
+const Feeling = ({ data }: { data: IFeelingItem }) => {
+  const { id, content, date, category, note } = data;
+  const { t } = useTranslation();
+  const location = useLocation();
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const darkMode = useRecoilValue(darkModeState);
+
+  const handleJournalClick = () => {
+    navigate("/MyJournal", {
+      state: {
+        ...location.state,
+        feelingDate: date,
+        displayNoteModal: id,
+        note,
+      },
+    });
+  };
+
+  return (
+    <button
+      type="button"
+      key={content + date}
+      className={`place-middle w-100 justify-sb feelingOfDay${darkMode ? "-dark" : ""} simple 
+    `}
+    >
+      <div className="place-middle feelingOfDay-name fw-600">
+        {feelingsEmojis[category]}&nbsp;
+        <div className="feelingOfDay-content">
+          <span>{t(content)}</span>
+          <br />
+          <span style={{ fontSize: "0.875rem", opacity: "0.8", wordBreak: "break-word" }}>{t(note || "")}</span>
+        </div>
+      </div>
+      <div className="d-flex justify-fe gap-16">
+        <ActionBtn icon={noteIcon} handleClick={handleJournalClick} />
+        <ActionBtn
+          icon={deleteIcon}
+          handleClick={async () => {
+            await deleteFeeling(id!);
+            queryClient.invalidateQueries("feelings");
+          }}
+        />
+      </div>
+    </button>
+  );
+};
+
+export default Feeling;
diff --git a/src/pages/FeelingsPage/components/NoteModal.tsx b/src/pages/FeelingsPage/components/NoteModal.tsx
new file mode 100644
index 000000000..479bda18c
--- /dev/null
+++ b/src/pages/FeelingsPage/components/NoteModal.tsx
@@ -0,0 +1,54 @@
+import React, { useState } from "react";
+
+import ZModal from "@src/common/ZModal";
+
+const NoteModal = ({
+  open,
+  defaultValue,
+  saveNote,
+}: {
+  open: boolean;
+  defaultValue?: string;
+  saveNote: (note?: string) => Promise<void>;
+}) => {
+  const [value, setValue] = useState(defaultValue || "");
+  return (
+    <ZModal open={open}>
+      <p className="m-0 fw-600">Feeling Note</p>
+      <form
+        onSubmit={async () => {
+          await saveNote(value);
+        }}
+        className="d-flex f-col gap-16"
+      >
+        <textarea
+          className="feeling-note-input simple br-8"
+          rows={5}
+          cols={32}
+          value={value}
+          onChange={(e) => {
+            setValue(e.target.value);
+          }}
+        />
+        <div className="d-flex gap-16 note-modal-actions">
+          {defaultValue && (
+            <button
+              type="button"
+              className="simple bg-sec fw-500 br-4"
+              onClick={async () => {
+                await saveNote();
+              }}
+            >
+              Delete
+            </button>
+          )}
+          <button type="submit" className="simple bg-primary fw-500 br-4">
+            Save
+          </button>
+        </div>
+      </form>
+    </ZModal>
+  );
+};
+
+export default NoteModal;
diff --git a/src/pages/MyTimePage/MyTimePage.tsx b/src/pages/MyTimePage/MyTimePage.tsx
index 76ba62cbe..7fda4e251 100644
--- a/src/pages/MyTimePage/MyTimePage.tsx
+++ b/src/pages/MyTimePage/MyTimePage.tsx
@@ -82,17 +82,7 @@ export const MyTimePage = () => {
   if (state?.displayFocus) {
     return (
       <AppLayout title="myTime">
-        <SubHeader
-          title="Focus"
-          leftNav={() => {
-            return null;
-          }}
-          rightNav={() => {
-            return null;
-          }}
-          showLeftNav={false}
-          showRightNav={false}
-        />
+        <SubHeader title="Focus" />
         <Focus />
       </AppLayout>
     );
diff --git a/src/pages/ShowFeelingsPage/ShowFeelingTemplate.tsx b/src/pages/ShowFeelingsPage/ShowFeelingTemplate.tsx
deleted file mode 100644
index 9d5cec0ff..000000000
--- a/src/pages/ShowFeelingsPage/ShowFeelingTemplate.tsx
+++ /dev/null
@@ -1,254 +0,0 @@
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
-// @ts-nocheck
-/* eslint-disable react/prop-types */
-import { useRecoilValue } from "recoil";
-import { useTranslation } from "react-i18next";
-import React, { useState, useEffect } from "react";
-import { useLocation, useNavigate } from "react-router-dom";
-
-import deleteIcon from "@assets/images/deleteIcon.svg";
-import noteIcon from "@assets/images/noteIcon.svg";
-import { darkModeState } from "@store";
-import { IFeelingItem } from "@models";
-import { feelingListType } from "@src/global";
-import { feelingsEmojis } from "@consts/FeelingsList";
-import { ShowFeelingTemplateProps } from "@src/Interfaces/IPages";
-import ZModal from "@src/common/ZModal";
-import { removeFeeling, addFeelingNote, removeFeelingNote } from "@api/FeelingsAPI";
-
-import "@translations/i18n";
-import { getJustDate } from "@src/utils";
-
-export const ShowFeelingTemplate: React.FC<ShowFeelingTemplateProps> = ({
-  feelingsListObject,
-  setFeelingsListObject,
-  currentFeelingsList,
-}) => {
-  const { t } = useTranslation();
-  const location = useLocation();
-  const navigate = useNavigate();
-  const darkModeStatus = useRecoilValue(darkModeState);
-  const [showInputModal, setShowInputModal] = useState(-1);
-  const [showNotesModal, setShowNotesModal] = useState(-1);
-  const [selectedFeelingNote, setSelectedFeelingNote] = useState("");
-  const [noteValue, setNoteValue] = useState("");
-
-  const handleInputClose = () => setShowInputModal(-1);
-  const handleInputShow = (id) => setShowInputModal(id);
-  const handleNotesClose = () => setShowNotesModal(-1);
-  const handleNotesShow = (id) => setShowNotesModal(id);
-
-  const handleFeelingsNoteModify = async (id: number, note: string) => {
-    console.log(id, note);
-    const res = await addFeelingNote(id, note);
-    console.log(res);
-    if (res) {
-      const feelingsByDates: feelingListType[] = res.reduce((dates: Date[], feeling: IFeelingItem) => {
-        if (dates[feeling.date]) {
-          dates[feeling.date].push(feeling);
-        } else {
-          // eslint-disable-next-line no-param-reassign
-          dates[feeling.date] = [feeling];
-        }
-        return dates;
-      }, {});
-      setFeelingsListObject.setFeelingsList({ ...feelingsByDates });
-    }
-  };
-
-  const handleJournalClick = (id: number) => {
-    if (feelingsListObject[id].note) {
-      navigate("/MyJournal", {
-        state: {
-          ...location.state,
-          displayNoteModal: feelingsListObject[id].id,
-          note: feelingsListObject[id].note,
-        },
-      });
-    } else {
-      navigate("/MyJournal", { state: { ...location.state, displayInputNoteModal: feelingsListObject[id].id } });
-    }
-  };
-
-  const handleTrashClick = (id: number) => {
-    const numFeelingId = feelingsListObject[id].id;
-    if (numFeelingId) {
-      removeFeeling(numFeelingId);
-    } else {
-      console.log("Attempting to remove feeling not in the database");
-    }
-    const newFeelingsList = { ...currentFeelingsList };
-    const feelingDate = feelingsListObject[id].date;
-    newFeelingsList[feelingDate] = newFeelingsList[feelingDate].filter(
-      (feelingOnDate: IFeelingItem) => feelingOnDate.id !== numFeelingId,
-    );
-    const todayString = getJustDate(new Date()).toString();
-
-    if (newFeelingsList[feelingDate].length === 0 && feelingDate.toString() !== todayString) {
-      delete newFeelingsList[feelingDate];
-    }
-    setFeelingsListObject.setFeelingsList(newFeelingsList);
-  };
-
-  const handleLocationChange = () => {
-    const locationState: ILocationState = location.state || {};
-    if (showNotesModal !== -1) {
-      handleNotesClose();
-    } else if (locationState.displayNoteModal) {
-      handleNotesShow(locationState.displayNoteModal);
-      setSelectedFeelingNote(locationState.note);
-    }
-    if (showInputModal !== -1) {
-      handleInputClose();
-      setNoteValue("");
-    } else if (locationState.displayInputNoteModal) {
-      handleInputShow(locationState.displayInputNoteModal);
-    }
-  };
-
-  useEffect(() => {
-    handleLocationChange();
-  }, [location]);
-
-  return (
-    <>
-      <div>
-        {feelingsListObject &&
-          Object.keys(feelingsListObject).map((ID: string) => {
-            const feelingId = Number(ID);
-            return (
-              <button
-                type="button"
-                key={feelingsListObject[feelingId].content + feelingsListObject[feelingId].date}
-                className={`feelingOfDay${darkModeStatus ? "-dark" : ""}`}
-              >
-                <div className="feelingOfDay-name">
-                  {feelingsEmojis[feelingsListObject[feelingId].category]}&nbsp;
-                  <div className="feelingOfDay-content">
-                    <span>{t(feelingsListObject[feelingId].content)}</span>
-                    <br />
-                    <span style={{ fontSize: "0.875rem", opacity: "0.8", wordBreak: "break-word" }}>
-                      {t(feelingsListObject[feelingId].note)}
-                    </span>
-                  </div>
-                </div>
-                <div className="feelingOfDaty-options">
-                  <img
-                    style={{ cursor: "pointer" }}
-                    alt="add note to feeling"
-                    className={`${darkModeStatus ? "dark-svg" : ""}`}
-                    src={noteIcon}
-                    onClick={() => handleJournalClick(feelingId)}
-                  />
-                  <img
-                    style={{ cursor: "pointer" }}
-                    alt="delete feeling"
-                    className={`${darkModeStatus ? "dark-svg" : ""}`}
-                    src={deleteIcon}
-                    onClick={() => handleTrashClick(feelingId)}
-                  />
-                </div>
-              </button>
-            );
-          })}
-      </div>
-      <ZModal
-        open={showInputModal !== -1}
-        onCancel={() => window.history.back()}
-        type={`${darkModeStatus ? "notes-modal-dark" : ""}`}
-      >
-        <p className="popupModal-title">Want to tell more about it? </p>
-        <div>
-          <textarea
-            rows={4}
-            // eslint-disable-next-line jsx-a11y/no-autofocus
-            autoFocus
-            placeholder="Write here..."
-            className="notes-modal-input"
-            value={noteValue}
-            onChange={(e) => {
-              setNoteValue(e.target.value);
-            }}
-            // Admittedly not the best way to do this but suffices for now
-            onKeyDown={async (e) => {
-              if (e.key === "Enter") {
-                await handleFeelingsNoteModify(showInputModal, noteValue);
-                window.history.back();
-              }
-            }}
-          />
-        </div>
-        <button
-          type="submit"
-          style={{ marginLeft: "auto", width: "fit-content" }}
-          onClick={async () => {
-            await handleFeelingsNoteModify(showInputModal, noteValue);
-            window.history.back();
-          }}
-          className={`action-btn submit-icon${darkModeStatus ? "-dark" : ""}`}
-        >
-          Save Note
-        </button>
-      </ZModal>
-      <ZModal
-        open={showNotesModal !== -1}
-        onCancel={() => window.history.back()}
-        className={`notes-modal${darkModeStatus ? "-dark" : ""}`}
-      >
-        <textarea
-          className="show-feeling__note-textarea"
-          rows={5}
-          cols={32}
-          value={selectedFeelingNote}
-          onChange={(e) => {
-            setSelectedFeelingNote(e.target.value);
-          }}
-        />
-        <div className="show-feeling-actions">
-          <button
-            type="button"
-            onClick={async () => {
-              const newFeelingsList = await removeFeelingNote(showNotesModal);
-              const feelingsByDates: feelingListType[] = newFeelingsList!.reduce(
-                (dates: Date[], feeling: IFeelingItem) => {
-                  if (dates[feeling.date]) {
-                    dates[feeling.date].push(feeling);
-                  } else {
-                    // eslint-disable-next-line no-param-reassign
-                    dates[feeling.date] = [feeling];
-                  }
-                  return dates;
-                },
-                {},
-              );
-              setFeelingsListObject.setFeelingsList({ ...feelingsByDates });
-              window.history.back();
-            }}
-            className="feelingsModal-btn"
-            style={{
-              background: "transparent",
-              boxShadow: darkModeStatus ? "rgba(255, 255, 255, 0.25) 0px 1px 2px" : "0px 1px 2px rgba(0, 0, 0, 0.25)",
-            }}
-          >
-            Delete
-          </button>
-          <button
-            type="button"
-            onClick={async () => {
-              await handleFeelingsNoteModify(showNotesModal, selectedFeelingNote);
-              window.history.back();
-            }}
-            className={`feelingsModal-btn${darkModeStatus ? "-dark" : ""}`}
-            style={{
-              background: "var(--primary-background)",
-              boxShadow: darkModeStatus ? "rgba(255, 255, 255, 0.25) 0px 1px 2px" : "0px 1px 2px rgba(0, 0, 0, 0.25)",
-            }}
-          >
-            Done
-          </button>
-        </div>
-      </ZModal>
-    </>
-  );
-};
diff --git a/src/pages/ShowFeelingsPage/ShowFeelingsPage.tsx b/src/pages/ShowFeelingsPage/ShowFeelingsPage.tsx
deleted file mode 100644
index 3182f0bce..000000000
--- a/src/pages/ShowFeelingsPage/ShowFeelingsPage.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import React from "react";
-import { useRecoilValue } from "recoil";
-
-import AppLayout from "@src/layouts/AppLayout";
-import SubHeader from "@src/common/SubHeader";
-import { displayAddFeeling } from "@src/store/FeelingsState";
-import { AddFeeling } from "@components/FeelingsComponents/AddFeeling";
-
-import { ShowFeelingTemplate } from "./ShowFeelingTemplate";
-
-import "./ShowFeelings.scss";
-import useFeelingsData from "../../hooks/useFeelingsData";
-
-export const ShowFeelingsPage = () => {
-  const showAddFeelingsModal = useRecoilValue(displayAddFeeling);
-  const { feelingsList, setFeelingsList } = useFeelingsData(showAddFeelingsModal);
-
-  const isToday = (date: string) => {
-    return new Date(date).toDateString() === new Date().toDateString();
-  };
-
-  const isYesterday = (date: string) => {
-    const yesterday = new Date();
-    yesterday.setDate(yesterday.getDate() - 1);
-    return new Date(date).toDateString() === yesterday.toDateString();
-  };
-
-  const formatSubheaderDate = (date: string) => {
-    return new Date(date).toLocaleDateString("en-US", {
-      year: "numeric",
-      month: "short",
-      day: "numeric",
-    });
-  };
-
-  const getTitleForDate = (date: string) => {
-    if (isToday(date)) {
-      return "Today";
-    }
-    if (isYesterday(date)) {
-      return "Yesterday";
-    }
-    return formatSubheaderDate(date);
-  };
-
-  const sortedDates = Object.keys(feelingsList).sort((a, b) => new Date(b).getTime() - new Date(a).getTime());
-
-  return (
-    <AppLayout title="myJournal">
-      <div>
-        {sortedDates.map((date) => (
-          <div key={date}>
-            {feelingsList[date] && (
-              <SubHeader
-                title={getTitleForDate(date)}
-                leftNav={() => {
-                  return null;
-                }}
-                rightNav={() => {
-                  return null;
-                }}
-                showLeftNav={false}
-                showRightNav={false}
-              />
-            )}
-            <ShowFeelingTemplate
-              key={date}
-              feelingsListObject={feelingsList[date]}
-              setFeelingsListObject={{ feelingsList, setFeelingsList }}
-              currentFeelingsList={feelingsList}
-            />
-          </div>
-        ))}
-      </div>
-      {showAddFeelingsModal && <AddFeeling feelingDate={new Date()} />}
-    </AppLayout>
-  );
-};
diff --git a/src/short.scss b/src/short.scss
new file mode 100644
index 000000000..d91e756b1
--- /dev/null
+++ b/src/short.scss
@@ -0,0 +1,85 @@
+.ordinary-element,
+.simple {
+  border: none;
+  background: transparent;
+  outline: none;
+}
+
+.bg-primary {
+  background: var(--selection-color);
+}
+
+.bg-sec {
+  background: var(--secondary-background);
+}
+
+.place-middle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.f-wrap {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.d-flex {
+  display: flex;
+}
+
+.f-col {
+  flex-direction: column;
+}
+
+.justify-sb {
+  justify-content: space-between;
+}
+
+.justify-fe {
+  justify-content: flex-end;
+}
+
+.gap-4 {
+  gap: 4px;
+}
+
+.gap-8 {
+  gap: 8px;
+}
+
+.gap-16 {
+  gap: 16px;
+}
+
+.br-4 {
+  border-radius: 4px;
+}
+
+.br-8 {
+  border-radius: 8px;
+}
+
+.br-12 {
+  border-radius: 12px;
+}
+
+.br-16 {
+  border-radius: 16px;
+}
+
+.bordered {
+  border: 1px solid var(--default-border-color);
+}
+
+.w-100 {
+  width: 100%;
+}
+
+.fw-600 {
+  font-weight: 600;
+}
+
+.m-0 {
+  margin: 0;
+}
diff --git a/src/utils/journal.ts b/src/utils/journal.ts
new file mode 100644
index 000000000..35497df92
--- /dev/null
+++ b/src/utils/journal.ts
@@ -0,0 +1,41 @@
+import { IFeelingItem } from "@src/models";
+import { TFeelingsObject } from "@src/models/FeelingItem";
+
+const isToday = (date: string) => {
+  return new Date(date).toDateString() === new Date().toDateString();
+};
+
+const isYesterday = (date: string) => {
+  const yesterday = new Date();
+  yesterday.setDate(yesterday.getDate() - 1);
+  return new Date(date).toDateString() === yesterday.toDateString();
+};
+
+const formatSubheaderDate = (date: string) => {
+  return new Date(date).toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+  });
+};
+
+export const getTitleForDate = (date: string) => {
+  if (isToday(date)) {
+    return "Today";
+  }
+  if (isYesterday(date)) {
+    return "Yesterday";
+  }
+  return formatSubheaderDate(date);
+};
+
+export const groupFeelingsByDate = (feelings: IFeelingItem[]) => {
+  return feelings.reduce<TFeelingsObject>((acc, feeling) => {
+    const date = new Date(feeling.date).toDateString();
+    if (!acc[date]) {
+      acc[date] = [];
+    }
+    acc[date].push(feeling);
+    return acc;
+  }, {});
+};