diff --git a/package-lock.json b/package-lock.json
index cd382c6..797af43 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,6 +29,7 @@
         "moment": "^2.29.4",
         "npx": "^10.2.2",
         "pinia": "^2.0.28",
+        "pinia-plugin-persistedstate": "^3.2.3",
         "postcss": "^8.4.20",
         "primeicons": "^6.0.1",
         "primevue": "^3.53.0",
@@ -5669,6 +5670,8 @@
     },
     "node_modules/npm/node_modules/cross-spawn/node_modules/which": {
       "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -5717,6 +5720,8 @@
     },
     "node_modules/npm/node_modules/debug/node_modules/ms": {
       "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
       "dev": true,
       "inBundle": true,
       "license": "MIT"
@@ -7388,6 +7393,8 @@
     },
     "node_modules/npm/node_modules/wrap-ansi-cjs/node_modules/ansi-styles": {
       "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -8640,6 +8647,8 @@
     },
     "node_modules/npx/node_modules/npm/node_modules/fstream-npm/node_modules/fstream-ignore/node_modules/minimatch/node_modules/brace-expansion/node_modules/concat-map": {
       "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
       "inBundle": true,
       "license": "MIT"
     },
@@ -8661,6 +8670,8 @@
     },
     "node_modules/npx/node_modules/npm/node_modules/glob/node_modules/fs.realpath": {
       "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
       "inBundle": true,
       "license": "ISC"
     },
@@ -8691,11 +8702,15 @@
     },
     "node_modules/npx/node_modules/npm/node_modules/glob/node_modules/minimatch/node_modules/brace-expansion/node_modules/concat-map": {
       "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
       "inBundle": true,
       "license": "MIT"
     },
     "node_modules/npx/node_modules/npm/node_modules/glob/node_modules/path-is-absolute": {
       "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -9171,6 +9186,8 @@
     },
     "node_modules/npx/node_modules/npm/node_modules/node-gyp/node_modules/minimatch/node_modules/brace-expansion/node_modules/concat-map": {
       "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
       "inBundle": true,
       "license": "MIT"
     },
@@ -9763,6 +9780,8 @@
     },
     "node_modules/npx/node_modules/npm/node_modules/pacote/node_modules/minimatch/node_modules/brace-expansion/node_modules/concat-map": {
       "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
       "inBundle": true,
       "license": "MIT"
     },
@@ -10064,6 +10083,8 @@
     },
     "node_modules/npx/node_modules/npm/node_modules/request/node_modules/caseless": {
       "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
+      "integrity": "sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==",
       "inBundle": true,
       "license": "Apache-2.0"
     },
@@ -10080,6 +10101,8 @@
     },
     "node_modules/npx/node_modules/npm/node_modules/request/node_modules/combined-stream/node_modules/delayed-stream": {
       "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -10093,6 +10116,8 @@
     },
     "node_modules/npx/node_modules/npm/node_modules/request/node_modules/forever-agent": {
       "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
+      "integrity": "sha512-j0KLYPhm6zeac4lz3oJ3o65qvgQCcPubiyotZrXqEaG4hNagNYO8qdlUrX5vwqv9ohqeT/Z3j6+yW067yWWdUw==",
       "inBundle": true,
       "license": "Apache-2.0",
       "engines": {
@@ -10114,6 +10139,8 @@
     },
     "node_modules/npx/node_modules/npm/node_modules/request/node_modules/form-data/node_modules/asynckit": {
       "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
       "inBundle": true,
       "license": "MIT"
     },
@@ -10263,6 +10290,8 @@
     },
     "node_modules/npx/node_modules/npm/node_modules/request/node_modules/http-signature/node_modules/jsprim/node_modules/assert-plus": {
       "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+      "integrity": "sha512-NfJ4UzBCcQGLDlQq7nHxH+tv3kyZ0hHQqF5BO6J7tNJeP5do1llPr8dZ8zHonfhAu0PHAdMkSo+8o0wxg9lZWw==",
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -10341,6 +10370,8 @@
     },
     "node_modules/npx/node_modules/npm/node_modules/request/node_modules/http-signature/node_modules/sshpk/node_modules/dashdash": {
       "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
+      "integrity": "sha512-jRFi8UDGo6j+odZiEpjazZaWqEal3w/basFjQHQEwVtZJGDpxbH1MeYluwCS8Xq5wmLJooDlMgvVarmWfGM44g==",
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -10361,6 +10392,8 @@
     },
     "node_modules/npx/node_modules/npm/node_modules/request/node_modules/http-signature/node_modules/sshpk/node_modules/getpass": {
       "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
+      "integrity": "sha512-0fzj9JxOLfJ+XGLhR8ze3unN0KZCgZwiSSDz168VERjK8Wl8kVSdcu2kspd4s4wtAa1y/qrVRiAA0WclVsu0ng==",
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -10385,16 +10418,22 @@
     },
     "node_modules/npx/node_modules/npm/node_modules/request/node_modules/is-typedarray": {
       "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
+      "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==",
       "inBundle": true,
       "license": "MIT"
     },
     "node_modules/npx/node_modules/npm/node_modules/request/node_modules/isstream": {
       "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
+      "integrity": "sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g==",
       "inBundle": true,
       "license": "MIT"
     },
     "node_modules/npx/node_modules/npm/node_modules/request/node_modules/json-stringify-safe": {
       "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
+      "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==",
       "inBundle": true,
       "license": "ISC"
     },
@@ -10461,6 +10500,8 @@
     },
     "node_modules/npx/node_modules/npm/node_modules/request/node_modules/tunnel-agent": {
       "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
+      "integrity": "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==",
       "inBundle": true,
       "license": "Apache-2.0",
       "dependencies": {
@@ -11036,6 +11077,8 @@
     },
     "node_modules/npx/node_modules/npm/node_modules/update-notifier/node_modules/configstore/node_modules/make-dir/node_modules/pify": {
       "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -11394,6 +11437,8 @@
     },
     "node_modules/npx/node_modules/npm/node_modules/which/node_modules/isexe": {
       "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
       "inBundle": true,
       "license": "ISC"
     },
@@ -12349,6 +12394,14 @@
         }
       }
     },
+    "node_modules/pinia-plugin-persistedstate": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/pinia-plugin-persistedstate/-/pinia-plugin-persistedstate-3.2.3.tgz",
+      "integrity": "sha512-Cm819WBj/s5K5DGw55EwbXDtx+EZzM0YR5AZbq9XE3u0xvXwvX2JnWoFpWIcdzISBHqy9H1UiSIUmXyXqWsQRQ==",
+      "peerDependencies": {
+        "pinia": "^2.0.0"
+      }
+    },
     "node_modules/pinia/node_modules/vue-demi": {
       "version": "0.13.11",
       "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
@@ -18393,6 +18446,8 @@
           "dependencies": {
             "which": {
               "version": "2.0.2",
+              "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+              "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
               "bundled": true,
               "dev": true,
               "requires": {
@@ -18420,6 +18475,8 @@
           "dependencies": {
             "ms": {
               "version": "2.1.2",
+              "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+              "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
               "bundled": true,
               "dev": true
             }
@@ -19602,6 +19659,8 @@
           "dependencies": {
             "ansi-styles": {
               "version": "4.3.0",
+              "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+              "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
               "bundled": true,
               "dev": true,
               "requires": {
@@ -20421,6 +20480,8 @@
                             },
                             "concat-map": {
                               "version": "0.0.1",
+                              "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+                              "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
                               "bundled": true
                             }
                           }
@@ -20445,6 +20506,8 @@
               "dependencies": {
                 "fs.realpath": {
                   "version": "1.0.0",
+                  "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+                  "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
                   "bundled": true
                 },
                 "minimatch": {
@@ -20468,6 +20531,8 @@
                         },
                         "concat-map": {
                           "version": "0.0.1",
+                          "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+                          "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
                           "bundled": true
                         }
                       }
@@ -20476,6 +20541,8 @@
                 },
                 "path-is-absolute": {
                   "version": "1.0.1",
+                  "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+                  "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
                   "bundled": true
                 }
               }
@@ -20882,6 +20949,8 @@
                         },
                         "concat-map": {
                           "version": "0.0.1",
+                          "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+                          "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
                           "bundled": true
                         }
                       }
@@ -21396,6 +21465,8 @@
                         },
                         "concat-map": {
                           "version": "0.0.1",
+                          "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+                          "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
                           "bundled": true
                         }
                       }
@@ -21667,6 +21738,8 @@
                 },
                 "caseless": {
                   "version": "0.12.0",
+                  "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
+                  "integrity": "sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==",
                   "bundled": true
                 },
                 "combined-stream": {
@@ -21678,6 +21751,8 @@
                   "dependencies": {
                     "delayed-stream": {
                       "version": "1.0.0",
+                      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+                      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
                       "bundled": true
                     }
                   }
@@ -21688,6 +21763,8 @@
                 },
                 "forever-agent": {
                   "version": "0.6.1",
+                  "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
+                  "integrity": "sha512-j0KLYPhm6zeac4lz3oJ3o65qvgQCcPubiyotZrXqEaG4hNagNYO8qdlUrX5vwqv9ohqeT/Z3j6+yW067yWWdUw==",
                   "bundled": true
                 },
                 "form-data": {
@@ -21701,6 +21778,8 @@
                   "dependencies": {
                     "asynckit": {
                       "version": "0.4.0",
+                      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+                      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
                       "bundled": true
                     }
                   }
@@ -21808,6 +21887,8 @@
                       "dependencies": {
                         "assert-plus": {
                           "version": "1.0.0",
+                          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+                          "integrity": "sha512-NfJ4UzBCcQGLDlQq7nHxH+tv3kyZ0hHQqF5BO6J7tNJeP5do1llPr8dZ8zHonfhAu0PHAdMkSo+8o0wxg9lZWw==",
                           "bundled": true
                         },
                         "extsprintf": {
@@ -21861,6 +21942,8 @@
                         },
                         "dashdash": {
                           "version": "1.14.1",
+                          "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
+                          "integrity": "sha512-jRFi8UDGo6j+odZiEpjazZaWqEal3w/basFjQHQEwVtZJGDpxbH1MeYluwCS8Xq5wmLJooDlMgvVarmWfGM44g==",
                           "bundled": true,
                           "requires": {
                             "assert-plus": "^1.0.0"
@@ -21876,6 +21959,8 @@
                         },
                         "getpass": {
                           "version": "0.1.7",
+                          "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
+                          "integrity": "sha512-0fzj9JxOLfJ+XGLhR8ze3unN0KZCgZwiSSDz168VERjK8Wl8kVSdcu2kspd4s4wtAa1y/qrVRiAA0WclVsu0ng==",
                           "bundled": true,
                           "requires": {
                             "assert-plus": "^1.0.0"
@@ -21901,14 +21986,20 @@
                 },
                 "is-typedarray": {
                   "version": "1.0.0",
+                  "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
+                  "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==",
                   "bundled": true
                 },
                 "isstream": {
                   "version": "0.1.2",
+                  "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
+                  "integrity": "sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g==",
                   "bundled": true
                 },
                 "json-stringify-safe": {
                   "version": "5.0.1",
+                  "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
+                  "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==",
                   "bundled": true
                 },
                 "mime-types": {
@@ -21955,6 +22046,8 @@
                 },
                 "tunnel-agent": {
                   "version": "0.6.0",
+                  "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
+                  "integrity": "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==",
                   "bundled": true,
                   "requires": {
                     "safe-buffer": "^5.0.1"
@@ -22379,6 +22472,8 @@
                       "dependencies": {
                         "pify": {
                           "version": "2.3.0",
+                          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+                          "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
                           "bundled": true
                         }
                       }
@@ -22637,6 +22732,8 @@
               "dependencies": {
                 "isexe": {
                   "version": "2.0.0",
+                  "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+                  "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
                   "bundled": true
                 }
               }
@@ -23339,6 +23436,12 @@
         }
       }
     },
+    "pinia-plugin-persistedstate": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/pinia-plugin-persistedstate/-/pinia-plugin-persistedstate-3.2.3.tgz",
+      "integrity": "sha512-Cm819WBj/s5K5DGw55EwbXDtx+EZzM0YR5AZbq9XE3u0xvXwvX2JnWoFpWIcdzISBHqy9H1UiSIUmXyXqWsQRQ==",
+      "requires": {}
+    },
     "postcss": {
       "version": "8.4.35",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.35.tgz",
diff --git a/package.json b/package.json
index 95ed9d4..6cca633 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
     "moment": "^2.29.4",
     "npx": "^10.2.2",
     "pinia": "^2.0.28",
+    "pinia-plugin-persistedstate": "^3.2.3",
     "postcss": "^8.4.20",
     "primeicons": "^6.0.1",
     "primevue": "^3.53.0",
diff --git a/src/stores/acctMgmt.ts b/src/stores/acctMgmt.ts
index f042423..72af30f 100644
--- a/src/stores/acctMgmt.ts
+++ b/src/stores/acctMgmt.ts
@@ -25,6 +25,7 @@ interface EditDetail {
 }
 
 export default defineStore('acctMgmtStore', {
+  persist: true, 
   state: () => ({
     allUserAccoutList: [] as User[],
     isAcctMenuOpen: false,
@@ -181,6 +182,37 @@ export default defineStore('acctMgmtStore', {
         return false;
       }
     },
+    async editAccountName(userToEdit: string, newName: string): Promise<boolean> {
+      const apiEdit = `/api/users/${userToEdit}`;
+
+      try {
+        const response = await this.$axios.put(apiEdit, {
+          username: userToEdit,
+          name: newName,
+          is_active: this.currentViewingUser.is_active,
+        });
+        return response.status === 200;
+      } catch (error) {
+        apiError(error, 'Failed to edit name of account.');
+        return false;
+      }
+    },
+    async editAccountPwd(userToEdit: string, newPwd: string): Promise<boolean> {
+      const apiEdit = `/api/users/${userToEdit}`;
+
+      try {
+        const response = await this.$axios.put(apiEdit, {
+          username: userToEdit,
+          name: this.currentViewingUser.name,
+          password: newPwd,
+          is_active: this.currentViewingUser.is_active,
+        });
+        return response.status === 200;
+      } catch (error) {
+        apiError(error, 'Failed to edit password of account.');
+        return false;
+      }
+    },
     /** Add a role to the user in database.
      * @param {string} usernameToEdit
      * @param {string} roleCode
diff --git a/src/stores/main.ts b/src/stores/main.ts
index 609dfdb..a7ae4f4 100644
--- a/src/stores/main.ts
+++ b/src/stores/main.ts
@@ -1,5 +1,7 @@
 import { createPinia } from 'pinia';
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
 
 const pinia = createPinia();
+pinia.use(piniaPluginPersistedstate);
 
 export default pinia;
diff --git a/src/views/AccountManagement/MyAccount.vue b/src/views/AccountManagement/MyAccount.vue
index 99ee5fd..eda99c1 100644
--- a/src/views/AccountManagement/MyAccount.vue
+++ b/src/views/AccountManagement/MyAccount.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="general my-account flex flex-col items-center w-full h-full p-8">
-        <main class="flex main-part flex-col px-6 mt-6 w-[536px]">
+        <main class="flex main-part flex-col px-6 mt-6 w-[600px]">
             <h1 id="general_acct_info_user_name" class="text-[32px] leading-[64px] font-medium mb-2">
                 {{ name }}
             </h1>
@@ -15,7 +15,7 @@
                 </span> times.
             </div>
         </main>
-        <main class="flex flex-col pt-6 px-6 w-[536px]">
+        <main class="flex flex-col pt-6 px-6 w-[600px]">
             <h1 class="text-[20px] font-medium mb-4">
                 {{ i18next.t("AcctMgmt.UserInfo") }}
             </h1>
@@ -26,7 +26,7 @@
                     </span>
                 </div>
                 <div class="account flex flex-col">
-                    <span class="flex text-[#0F172A] text-[14px]">{{ username }}</span>
+                    <span class="flex text-[#0F172A] text-[16px]">{{ username }}</span>
                     <div v-show="false" class="error-wrapper my-2">                    
                         <div class="error-msg-section flex justify-start">
                             <img src="@/assets/icon-alert.svg" alt="!" class="exclamation-img flex mr-2">
@@ -45,15 +45,15 @@
                 </div>
                 <input v-if='isNameEditable' id="input_name_field"
                     class="w-[280px] h-[40px] rounded p-1 border border-[1px] border-[#64748B] flex items-center outline-none"
-                    v-model="inputName" :readonly="!isNameEditable"
+                    v-model="inputName"
                     autocomplete="off"
                 />
                 <span v-else class="not-editable displayable name w-[280px]">
                     {{ name }}
                 </span>
                 <button v-if='isNameEditable' class="flex save-btn rounded-full text-[#FFFFFF] h-[40px] w-[80px] items-center
-                    bg-[#0099FF] justify-center cursor-pointer ml-20
-                ">
+                    bg-[#0099FF] justify-center cursor-pointer ml-20"
+                    @click="onSaveNameClick">
                     {{ i18next.t("Global.Save") }}
                 </button>
                 <button v-else class="flex save-btn rounded-full text-[#666666] h-[40px] w-[80px] items-center
@@ -63,19 +63,18 @@
                     {{ i18next.t("Global.Edit") }}
                 </button>
             </div>
-            <div class="row w-full flex py-2 mb-4">
+            <div class="row w-full flex py-2 mb-4  border-b border-b-[#CBD5E1] border-b-[1px]">
                 <div class="field-label flex flex-col text-sm font-medium mr-4">
                     <span class="flex h-[40px] w-[80px] items-center">
                         {{ i18next.t("AcctMgmt.Password") }}
                     </span>
                     <div class="flex dummy-cell"></div>
                 </div>
-                <div class="flex input-and-error-msg flex-col w-[242px]">
-                    <!-- 280 扣掉 24 眼睛的寬度 是 256 ，還要扣掉留白的寬度 -->
+                <div class="flex input-and-error-msg flex-col w-[280px]">
                     <div v-if='isPwdEditable' class="input-and-eye flex items-center h-[40px] relative border-[1px] rounded"
                         :class="{'border-[#FF3366]': !isPwdLengthValid, 'border-[#64748B]': isPwdLengthValid,}"
                     >
-                        <input class="outline-none p-1 w-[242px]" :type="isPwdEyeOn ? 'text' : 'password'"
+                        <input class="outline-none p-1 w-[280px]" :type="isPwdEyeOn ? 'text' : 'password'"
                             v-model="inputPwd"
                             autocomplete="off" :class="{'color-[#FF3366]': !isPwdLengthValid,
                             'color-[#64748B]': isPwdLengthValid,}"/>
@@ -104,20 +103,20 @@
                         {{ i18next.t("Global.Reset") }}
                     </button>
                     <div class="flex dummy-cell h-[40px]"></div>
-                </div>
-                
+                </div>                
             </div>
         </main>
     </div>
 </template>
 
 <script>
-import { onMounted, computed, ref, onBeforeMount, } from 'vue';
+import { onMounted, computed, ref, onBeforeMount, watch, } from 'vue';
 import i18next from '@/i18n/i18n.js';
 import LoginStore from '@/stores/login';
 import useAcctMgmtStore from '@/stores/acctMgmt.ts';
 import Badge from '../../components/Badge.vue';
 import LoadingStore from '@/stores/loading.js';
+import { useToast } from 'vue-toast-notification';
 import { PWD_VALID_LENGTH } from '@/constants/constants.js';
 
 export default {
@@ -125,16 +124,18 @@ export default {
         const loadingStore = LoadingStore();
         const loginStore = LoginStore();
         const acctMgmtStore = useAcctMgmtStore();
+        const toast = useToast();
+
         const visitTime = ref(0);
         const currentViewingUser = computed(() => acctMgmtStore.currentViewingUser);
+        const name = computed(() => acctMgmtStore.currentViewingUser.name);
         const {
             username,
-            name,
             is_admin,
             is_active,
         } = currentViewingUser.value;
 
-        const inputName = ref(name);
+        const inputName = ref(name.value); // remember to add .value postfix
         const inputPwd = ref('');
         const isNameEditable = ref(false);
         const isPwdEditable = ref(false);
@@ -142,18 +143,32 @@ export default {
         const isPwdLengthValid = ref(true);
 
         const onEditNameClick = () => {
-            isNameEditable.value = true;
+            isNameEditable.value = true;           
         }
 
         const onResetPwdClick = () => {
             isPwdEditable.value = true;
         }
 
-        const onSavePwdClick = () => {
+        const onSaveNameClick = async() => {
+            if(inputName.value.length > 0) {
+                await acctMgmtStore.editAccountName(username, inputName.value);
+                await toast.success(i18next.t("AcctMgmt.MsgAccountEdited"));
+                await acctMgmtStore.getUserDetail(username);
+                isNameEditable.value = false;
+                inputName.value = name.value; // updated value
+            } 
+        };
+
+        const onSavePwdClick = async() => {
             validatePwdLength();
             if (isPwdLengthValid.value) {
-               isPwdEditable.value = false;
-               inputPwd.value = ''; 
+               isPwdEditable.value = false;               
+               await acctMgmtStore.editAccountPwd(username, inputPwd.value);
+               await toast.success(i18next.t("AcctMgmt.MsgAccountEdited"));
+               inputPwd.value = '';
+               // remember to force update
+               await acctMgmtStore.getUserDetail(loginStore.userData.username);
             }            
         }
 
@@ -165,6 +180,11 @@ export default {
             isPwdLengthValid.value = inputPwd.value.length >= PWD_VALID_LENGTH;
         }
 
+        watch(() => acctMgmtStore.currentViewingUser, (newVal, oldVal) => {
+            console.log('currentViewingUser updated:', newVal);
+            console.log('newVal.name', newVal.name);
+        });
+
         onBeforeMount(async() => {
             // 在此設定 current viewing user 的來源是登入者的身分
             await acctMgmtStore.getUserDetail(loginStore.userData.username);           
@@ -190,6 +210,7 @@ export default {
             onEditNameClick,
             onResetPwdClick,
             onSavePwdClick,
+            onSaveNameClick,
             togglePwdEyeBtn,
         };
   },
diff --git a/yarn.lock b/yarn.lock
index 731247e..f1effbd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5014,7 +5014,12 @@ pify@^2.2.0, pify@^2.3.0:
 pify@^3.0.0:
   version "3.0.0"
 
-pinia@^2.0.28:
+pinia-plugin-persistedstate@^3.2.3:
+  version "3.2.3"
+  resolved "https://registry.npmjs.org/pinia-plugin-persistedstate/-/pinia-plugin-persistedstate-3.2.3.tgz"
+  integrity sha512-Cm819WBj/s5K5DGw55EwbXDtx+EZzM0YR5AZbq9XE3u0xvXwvX2JnWoFpWIcdzISBHqy9H1UiSIUmXyXqWsQRQ==
+
+pinia@^2.0.0, pinia@^2.0.28:
   version "2.0.28"
   resolved "https://registry.npmjs.org/pinia/-/pinia-2.0.28.tgz"
   integrity sha512-YClq9DkqCblq9rlyUual7ezMu/iICWdBtfJrDt4oWU9Zxpijyz7xB2xTwx57DaBQ96UGvvTMORzALr+iO5PVMw==