Style updates

2025-02-11 15:23:48 -06:00
parent b62ad44358
commit bfd958d78f
19 changed files with 574 additions and 702 deletions
--- a/README.md
+++ b/README.md
@@ -15,6 +15,8 @@ import defaultDatabase.sql into your database server
 To run:
 npm run dev

+alias lint="npx @biomejs/biome lint . --write --unsafe && npx @biomejs/biome format . --write && npx @biomejs/biome check . --write --unsafe && npx @biomejs/biome ci . --formatter-enabled=true --linter-enabled=true --organize-imports-enabled=true"
+
 To build:
 Add any background images to public/backgrounds to include them in the build
 npm run build
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,47 +10,47 @@
 			"dependencies": {
 				"@emotion/react": "^11.14.0",
 				"@iconify/react": "^5.2.0",
-				"@mantine/core": "^7.16.0",
-				"@mantine/dates": "^7.16.0",
-				"@mantine/form": "^7.16.0",
-				"@mantine/hooks": "^7.16.0",
-				"@mantine/modals": "^7.16.0",
-				"@tabler/icons-react": "^3.28.1",
-				"@tanstack/react-query": "^5.64.1",
-				"@tanstack/react-query-devtools": "^5.64.1",
-				"@tanstack/react-query-persist-client": "^5.64.1",
+				"@mantine/core": "^7.16.3",
+				"@mantine/dates": "^7.16.3",
+				"@mantine/form": "^7.16.3",
+				"@mantine/hooks": "^7.16.3",
+				"@mantine/modals": "^7.16.3",
+				"@tabler/icons-react": "^3.30.0",
+				"@tanstack/react-query": "^5.66.0",
+				"@tanstack/react-query-devtools": "^5.66.0",
+				"@tanstack/react-query-persist-client": "^5.66.0",
 				"clsx": "^2.1.1",
 				"dayjs": "^1.11.13",
 				"dotenv": "^16.4.7",
 				"idb-keyval": "^6.2.1",
-				"jotai": "^2.11.0",
+				"jotai": "^2.12.0",
 				"mantine-react-table": "^2.0.0-beta.6",
 				"react": "^19.0.0",
 				"react-dom": "^19.0.0",
 				"react-icons": "^5.4.0",
 				"react-query": "^3.39.3",
-				"react-router-dom": "^7.1.2",
+				"react-router-dom": "^7.1.5",
 				"react-toastify": "^11.0.3",
 				"recharts": "^2.15.1"
 			},
 			"devDependencies": {
-				"@types/node": "^22.10.7",
-				"@types/react": "^19.0.7",
+				"@types/node": "^22.13.1",
+				"@types/react": "^19.0.8",
 				"@types/react-dom": "^19.0.3",
-				"@typescript-eslint/eslint-plugin": "^8.20.0",
-				"@typescript-eslint/parser": "^8.20.0",
+				"@typescript-eslint/eslint-plugin": "^8.24.0",
+				"@typescript-eslint/parser": "^8.24.0",
 				"@vitejs/plugin-react": "^4.3.4",
-				"@vitest/coverage-v8": "^3.0.2",
-				"@vitest/ui": "^3.0.2",
-				"eslint": "^9.18.0",
+				"@vitest/coverage-v8": "^3.0.5",
+				"@vitest/ui": "^3.0.5",
+				"eslint": "^9.20.1",
 				"eslint-plugin-react-hooks": "^5.1.0",
-				"eslint-plugin-react-refresh": "^0.4.18",
+				"eslint-plugin-react-refresh": "^0.4.19",
 				"typescript": "^5.7.3",
-				"vite": "^6.0.7",
+				"vite": "^6.1.0",
 				"vite-plugin-dts": "~4.5.0",
 				"vite-plugin-eslint": "^1.8.1",
 				"vite-tsconfig-paths": "^5.1.4",
-				"vitest": "^3.0.2"
+				"vitest": "^3.0.5"
 			}
 		},
 		"node_modules/@ampproject/remapping": {
@@ -988,9 +988,9 @@
 			}
 		},
 		"node_modules/@eslint/js": {
-			"version": "9.18.0",
-			"resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.18.0.tgz",
-			"integrity": "sha512-fK6L7rxcq6/z+AaQMtiFTkvbHkBLNlwyRxHpKawP0x3u9+NC6MQTnFW+AdpwC6gfHTW0051cokQgtTN2FqlxQA==",
+			"version": "9.20.0",
+			"resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.20.0.tgz",
+			"integrity": "sha512-iZA07H9io9Wn836aVTytRaNqh00Sad+EamwOVJT12GTLw1VGMFV/4JaME+JjLtr9fiGaoWgYnS54wrfWsSs4oQ==",
 			"dev": true,
 			"engines": {
 				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -1243,9 +1243,9 @@
 			}
 		},
 		"node_modules/@mantine/core": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@mantine/core/-/core-7.16.0.tgz",
-			"integrity": "sha512-lYYwa4Itz77uC8zQzdiKiKdz9Q01NBOYPZsotIKsP/Zqij0qhpsVxoJ8MK3P8IqFyLfThTMmR4sT1qlGfLTA9Q==",
+			"version": "7.16.3",
+			"resolved": "https://registry.npmjs.org/@mantine/core/-/core-7.16.3.tgz",
+			"integrity": "sha512-cxhIpfd2i0Zmk9TKdejYAoIvWouMGhzK3OOX+VRViZ5HEjnTQCGl2h3db56ThqB6NfVPCno6BPbt5lwekTtmuQ==",
 			"dependencies": {
 				"@floating-ui/react": "^0.26.28",
 				"clsx": "^2.1.1",
@@ -1255,30 +1255,30 @@
 				"type-fest": "^4.27.0"
 			},
 			"peerDependencies": {
-				"@mantine/hooks": "7.16.0",
+				"@mantine/hooks": "7.16.3",
 				"react": "^18.x || ^19.x",
 				"react-dom": "^18.x || ^19.x"
 			}
 		},
 		"node_modules/@mantine/dates": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@mantine/dates/-/dates-7.16.0.tgz",
-			"integrity": "sha512-BVPA/3itdAjuX11GMebeS1c5VNruwkkRhCUVVv1F4lBhZqSeL/d8yPb8Iyfdw0tMGIkdxHKT9winG+bXAoF0Kw==",
+			"version": "7.16.3",
+			"resolved": "https://registry.npmjs.org/@mantine/dates/-/dates-7.16.3.tgz",
+			"integrity": "sha512-YI8aW3GFBmLJz0eu9Q6tFFXaubZIZMccA+6Jla8K8K8KMdx5wEPBrCCOHZnL3r0RcVLhARLa0VEmEyaQB+DTjQ==",
 			"dependencies": {
 				"clsx": "^2.1.1"
 			},
 			"peerDependencies": {
-				"@mantine/core": "7.16.0",
-				"@mantine/hooks": "7.16.0",
+				"@mantine/core": "7.16.3",
+				"@mantine/hooks": "7.16.3",
 				"dayjs": ">=1.0.0",
 				"react": "^18.x || ^19.x",
 				"react-dom": "^18.x || ^19.x"
 			}
 		},
 		"node_modules/@mantine/form": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@mantine/form/-/form-7.16.0.tgz",
-			"integrity": "sha512-PUxX5v8XMoNwjFdZbns4dDcQf8U9lIfagFsDGz3KKStgsuBcgnn97/MDP6SpsOHV3g7AGEJoF65+ax1fMOkkNA==",
+			"version": "7.16.3",
+			"resolved": "https://registry.npmjs.org/@mantine/form/-/form-7.16.3.tgz",
+			"integrity": "sha512-GqomUG2Ri5adxYsTU1S5IhKRPcqTG5JkPvMERns8PQAcUz/lvzsnk3wY1v4K5CEbCAdpimle4bSsZTM9g697vg==",
 			"dependencies": {
 				"fast-deep-equal": "^3.1.3",
 				"klona": "^2.0.6"
@@ -1288,20 +1288,20 @@
 			}
 		},
 		"node_modules/@mantine/hooks": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-7.16.0.tgz",
-			"integrity": "sha512-8KxrhckesbrV6tyOndm6fJ+jSKA4KX/67ppDFlfYMMbV6Yh+s0zRO4KLi2uCtl6tgckQd2/zDzX3kQk+VYKqDA==",
+			"version": "7.16.3",
+			"resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-7.16.3.tgz",
+			"integrity": "sha512-B94FBWk5Sc81tAjV+B3dGh/gKzfqzpzVC/KHyBRWOOyJRqeeRbI/FAaJo4zwppyQo1POSl5ArdyjtDRrRIj2SQ==",
 			"peerDependencies": {
 				"react": "^18.x || ^19.x"
 			}
 		},
 		"node_modules/@mantine/modals": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@mantine/modals/-/modals-7.16.0.tgz",
-			"integrity": "sha512-2AUFqwuz9JhEnNNjf7Oly4oj1nePKn6QcMKJOQx6Kr1eBcSZRsZ4EmlSONFvfTz/9UJDvm30Hk4HPOPoi0i5fQ==",
+			"version": "7.16.3",
+			"resolved": "https://registry.npmjs.org/@mantine/modals/-/modals-7.16.3.tgz",
+			"integrity": "sha512-BJuDzRugK6xLbuFTTo8NLJumVvVmSYsNVcEtmlXOWTE3NkDGktBXGKo8V1B0XfJ9/d/rZw7HCE0p4i76MtA+bQ==",
 			"peerDependencies": {
-				"@mantine/core": "7.16.0",
-				"@mantine/hooks": "7.16.0",
+				"@mantine/core": "7.16.3",
+				"@mantine/hooks": "7.16.3",
 				"react": "^18.x || ^19.x",
 				"react-dom": "^18.x || ^19.x"
 			}
@@ -1919,20 +1919,20 @@
 			}
 		},
 		"node_modules/@tabler/icons": {
-			"version": "3.28.1",
-			"resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-3.28.1.tgz",
-			"integrity": "sha512-h7nqKEvFooLtFxhMOC1/2eiV+KRXhBUuDUUJrJlt6Ft6tuMw2eU/9GLQgrTk41DNmIEzp/LI83K9J9UUU8YBYQ==",
+			"version": "3.30.0",
+			"resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-3.30.0.tgz",
+			"integrity": "sha512-c8OKLM48l00u9TFbh2qhSODMONIzML8ajtCyq95rW8vzkWcBrKRPM61tdkThz2j4kd5u17srPGIjqdeRUZdfdw==",
 			"funding": {
 				"type": "github",
 				"url": "https://github.com/sponsors/codecalm"
 			}
 		},
 		"node_modules/@tabler/icons-react": {
-			"version": "3.28.1",
-			"resolved": "https://registry.npmjs.org/@tabler/icons-react/-/icons-react-3.28.1.tgz",
-			"integrity": "sha512-KNBpA2kbxr3/2YK5swt7b/kd/xpDP1FHYZCxDFIw54tX8slELRFEf95VMxsccQHZeIcUbdoojmUUuYSbt/sM5Q==",
+			"version": "3.30.0",
+			"resolved": "https://registry.npmjs.org/@tabler/icons-react/-/icons-react-3.30.0.tgz",
+			"integrity": "sha512-9KZ9D1UNAyjlLkkYp2HBPHdf6lAJ2aelDqh8YYAnnmLF3xwprWKxxW8+zw5jlI0IwdfN4XFFuzqePkaw+DpIOg==",
 			"dependencies": {
-				"@tabler/icons": "3.28.1"
+				"@tabler/icons": "3.30.0"
 			},
 			"funding": {
 				"type": "github",
@@ -1958,29 +1958,29 @@
 			}
 		},
 		"node_modules/@tanstack/query-core": {
-			"version": "5.64.1",
-			"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.64.1.tgz",
-			"integrity": "sha512-978Wx4Wl4UJZbmvU/rkaM9cQtXXrbhK0lsz/UZhYIbyKYA8E4LdomTwyh2GHZ4oU0BKKoDH4YlKk2VscCUgNmg==",
+			"version": "5.66.0",
+			"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.66.0.tgz",
+			"integrity": "sha512-J+JeBtthiKxrpzUu7rfIPDzhscXF2p5zE/hVdrqkACBP8Yu0M96mwJ5m/8cPPYQE9aRNvXztXHlNwIh4FEeMZw==",
 			"funding": {
 				"type": "github",
 				"url": "https://github.com/sponsors/tannerlinsley"
 			}
 		},
 		"node_modules/@tanstack/query-devtools": {
-			"version": "5.62.16",
-			"resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.62.16.tgz",
-			"integrity": "sha512-3ff6UBJr0H3nIhfLSl9911rvKqXf0u4B58jl0uYdDWLqPk9pCvYIbxC35cGxK2+8INl4IaFVUHb/IdgWrNkg3Q==",
+			"version": "5.65.0",
+			"resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.65.0.tgz",
+			"integrity": "sha512-g5y7zc07U9D3esMdqUfTEVu9kMHoIaVBsD0+M3LPdAdD710RpTcLiNvJY1JkYXqkq9+NV+CQoemVNpQPBXVsJg==",
 			"funding": {
 				"type": "github",
 				"url": "https://github.com/sponsors/tannerlinsley"
 			}
 		},
 		"node_modules/@tanstack/query-persist-client-core": {
-			"version": "5.64.1",
-			"resolved": "https://registry.npmjs.org/@tanstack/query-persist-client-core/-/query-persist-client-core-5.64.1.tgz",
-			"integrity": "sha512-5SGe5IHKXJmkxL2gwKjHQrap18hY57kF0DVUd2yh6QLFn5pruUG4QO6DsjEuQGk33ZfxkX4Z7uJdZBgfMedA8g==",
+			"version": "5.66.0",
+			"resolved": "https://registry.npmjs.org/@tanstack/query-persist-client-core/-/query-persist-client-core-5.66.0.tgz",
+			"integrity": "sha512-y6bolShmbOmexexZfnmTiHsBOm4ruJxc2MQJzqi6PxkSPjkKAU+Zqviy4ZwQos5skwSw0g7b9L6V6Rd64oZc9g==",
 			"dependencies": {
-				"@tanstack/query-core": "5.64.1"
+				"@tanstack/query-core": "5.66.0"
 			},
 			"funding": {
 				"type": "github",
@@ -1988,11 +1988,11 @@
 			}
 		},
 		"node_modules/@tanstack/react-query": {
-			"version": "5.64.1",
-			"resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.64.1.tgz",
-			"integrity": "sha512-vW5ggHpIO2Yjj44b4sB+Fd3cdnlMJppXRBJkEHvld6FXh3j5dwWJoQo7mGtKI2RbSFyiyu/PhGAy0+Vv5ev9Eg==",
+			"version": "5.66.0",
+			"resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.66.0.tgz",
+			"integrity": "sha512-z3sYixFQJe8hndFnXgWu7C79ctL+pI0KAelYyW+khaNJ1m22lWrhJU2QrsTcRKMuVPtoZvfBYrTStIdKo+x0Xw==",
 			"dependencies": {
-				"@tanstack/query-core": "5.64.1"
+				"@tanstack/query-core": "5.66.0"
 			},
 			"funding": {
 				"type": "github",
@@ -2003,34 +2003,34 @@
 			}
 		},
 		"node_modules/@tanstack/react-query-devtools": {
-			"version": "5.64.1",
-			"resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.64.1.tgz",
-			"integrity": "sha512-8ajcGE3wXYlb4KuJnkFYkJwJKc/qmPNTpQD7YTgLRMBPTGGp1xk7VMzxL87DoXuweO8luplUUblJJ3noVs/luQ==",
+			"version": "5.66.0",
+			"resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.66.0.tgz",
+			"integrity": "sha512-uB57wA2YZaQ2fPcFW0E9O1zAGDGSbRKRx84uMk/86VyU9jWVxvJ3Uzp+zNm+nZJYsuekCIo2opTdgNuvM3cKgA==",
 			"dependencies": {
-				"@tanstack/query-devtools": "5.62.16"
+				"@tanstack/query-devtools": "5.65.0"
 			},
 			"funding": {
 				"type": "github",
 				"url": "https://github.com/sponsors/tannerlinsley"
 			},
 			"peerDependencies": {
-				"@tanstack/react-query": "^5.64.1",
+				"@tanstack/react-query": "^5.66.0",
 				"react": "^18 || ^19"
 			}
 		},
 		"node_modules/@tanstack/react-query-persist-client": {
-			"version": "5.64.1",
-			"resolved": "https://registry.npmjs.org/@tanstack/react-query-persist-client/-/react-query-persist-client-5.64.1.tgz",
-			"integrity": "sha512-2GmjTFU/QGF3p56UwnFW+N+WsKnzuNry3RQsyDtJ6/AQvy5nd567Mf58hc4bAj35nvI8MkuKCrzegRmHC8Wjxw==",
+			"version": "5.66.0",
+			"resolved": "https://registry.npmjs.org/@tanstack/react-query-persist-client/-/react-query-persist-client-5.66.0.tgz",
+			"integrity": "sha512-LpocQrJF9HCR6N09X7+k8TjkgYsVHPB4e4AvV2qvCeL5aOsQWORttEqCHldohnJwdVm/68tWacw2jVP/8AuI1w==",
 			"dependencies": {
-				"@tanstack/query-persist-client-core": "5.64.1"
+				"@tanstack/query-persist-client-core": "5.66.0"
 			},
 			"funding": {
 				"type": "github",
 				"url": "https://github.com/sponsors/tannerlinsley"
 			},
 			"peerDependencies": {
-				"@tanstack/react-query": "^5.64.1",
+				"@tanstack/react-query": "^5.66.0",
 				"react": "^18 || ^19"
 			}
 		},
@@ -2219,9 +2219,9 @@
 			"dev": true
 		},
 		"node_modules/@types/node": {
-			"version": "22.10.7",
-			"resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.7.tgz",
-			"integrity": "sha512-V09KvXxFiutGp6B7XkpaDXlNadZxrzajcY50EuoLIpQ6WWYCSvf19lVIazzfIzQvhUN2HjX12spLojTnhuKlGg==",
+			"version": "22.13.1",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-22.13.1.tgz",
+			"integrity": "sha512-jK8uzQlrvXqEU91UxiK5J7pKHyzgnI1Qnl0QDHIgVGuolJhRb9EEl28Cj9b3rGR8B2lhFCtvIm5os8lFnO/1Ew==",
 			"dev": true,
 			"dependencies": {
 				"undici-types": "~6.20.0"
@@ -2233,9 +2233,9 @@
 			"integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw=="
 		},
 		"node_modules/@types/react": {
-			"version": "19.0.7",
-			"resolved": "https://registry.npmjs.org/@types/react/-/react-19.0.7.tgz",
-			"integrity": "sha512-MoFsEJKkAtZCrC1r6CM8U22GzhG7u2Wir8ons/aCKH6MBdD1ibV24zOSSkdZVUKqN5i396zG5VKLYZ3yaUZdLA==",
+			"version": "19.0.8",
+			"resolved": "https://registry.npmjs.org/@types/react/-/react-19.0.8.tgz",
+			"integrity": "sha512-9P/o1IGdfmQxrujGbIMDyYaaCykhLKc0NGCtYcECNUr9UAaDe4gwvV9bR6tvd5Br1SG0j+PBpbKr2UYY8CwqSw==",
 			"dev": true,
 			"dependencies": {
 				"csstype": "^3.0.2"
@@ -2251,20 +2251,20 @@
 			}
 		},
 		"node_modules/@typescript-eslint/eslint-plugin": {
-			"version": "8.20.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.20.0.tgz",
-			"integrity": "sha512-naduuphVw5StFfqp4Gq4WhIBE2gN1GEmMUExpJYknZJdRnc+2gDzB8Z3+5+/Kv33hPQRDGzQO/0opHE72lZZ6A==",
+			"version": "8.24.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.24.0.tgz",
+			"integrity": "sha512-aFcXEJJCI4gUdXgoo/j9udUYIHgF23MFkg09LFz2dzEmU0+1Plk4rQWv/IYKvPHAtlkkGoB3m5e6oUp+JPsNaQ==",
 			"dev": true,
 			"dependencies": {
 				"@eslint-community/regexpp": "^4.10.0",
-				"@typescript-eslint/scope-manager": "8.20.0",
-				"@typescript-eslint/type-utils": "8.20.0",
-				"@typescript-eslint/utils": "8.20.0",
-				"@typescript-eslint/visitor-keys": "8.20.0",
+				"@typescript-eslint/scope-manager": "8.24.0",
+				"@typescript-eslint/type-utils": "8.24.0",
+				"@typescript-eslint/utils": "8.24.0",
+				"@typescript-eslint/visitor-keys": "8.24.0",
 				"graphemer": "^1.4.0",
 				"ignore": "^5.3.1",
 				"natural-compare": "^1.4.0",
-				"ts-api-utils": "^2.0.0"
+				"ts-api-utils": "^2.0.1"
 			},
 			"engines": {
 				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -2280,15 +2280,15 @@
 			}
 		},
 		"node_modules/@typescript-eslint/parser": {
-			"version": "8.20.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.20.0.tgz",
-			"integrity": "sha512-gKXG7A5HMyjDIedBi6bUrDcun8GIjnI8qOwVLiY3rx6T/sHP/19XLJOnIq/FgQvWLHja5JN/LSE7eklNBr612g==",
+			"version": "8.24.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.24.0.tgz",
+			"integrity": "sha512-MFDaO9CYiard9j9VepMNa9MTcqVvSny2N4hkY6roquzj8pdCBRENhErrteaQuu7Yjn1ppk0v1/ZF9CG3KIlrTA==",
 			"dev": true,
 			"dependencies": {
-				"@typescript-eslint/scope-manager": "8.20.0",
-				"@typescript-eslint/types": "8.20.0",
-				"@typescript-eslint/typescript-estree": "8.20.0",
-				"@typescript-eslint/visitor-keys": "8.20.0",
+				"@typescript-eslint/scope-manager": "8.24.0",
+				"@typescript-eslint/types": "8.24.0",
+				"@typescript-eslint/typescript-estree": "8.24.0",
+				"@typescript-eslint/visitor-keys": "8.24.0",
 				"debug": "^4.3.4"
 			},
 			"engines": {
@@ -2304,13 +2304,13 @@
 			}
 		},
 		"node_modules/@typescript-eslint/scope-manager": {
-			"version": "8.20.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.20.0.tgz",
-			"integrity": "sha512-J7+VkpeGzhOt3FeG1+SzhiMj9NzGD/M6KoGn9f4dbz3YzK9hvbhVTmLj/HiTp9DazIzJ8B4XcM80LrR9Dm1rJw==",
+			"version": "8.24.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.24.0.tgz",
+			"integrity": "sha512-HZIX0UByphEtdVBKaQBgTDdn9z16l4aTUz8e8zPQnyxwHBtf5vtl1L+OhH+m1FGV9DrRmoDuYKqzVrvWDcDozw==",
 			"dev": true,
 			"dependencies": {
-				"@typescript-eslint/types": "8.20.0",
-				"@typescript-eslint/visitor-keys": "8.20.0"
+				"@typescript-eslint/types": "8.24.0",
+				"@typescript-eslint/visitor-keys": "8.24.0"
 			},
 			"engines": {
 				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -2321,15 +2321,15 @@
 			}
 		},
 		"node_modules/@typescript-eslint/type-utils": {
-			"version": "8.20.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.20.0.tgz",
-			"integrity": "sha512-bPC+j71GGvA7rVNAHAtOjbVXbLN5PkwqMvy1cwGeaxUoRQXVuKCebRoLzm+IPW/NtFFpstn1ummSIasD5t60GA==",
+			"version": "8.24.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.24.0.tgz",
+			"integrity": "sha512-8fitJudrnY8aq0F1wMiPM1UUgiXQRJ5i8tFjq9kGfRajU+dbPyOuHbl0qRopLEidy0MwqgTHDt6CnSeXanNIwA==",
 			"dev": true,
 			"dependencies": {
-				"@typescript-eslint/typescript-estree": "8.20.0",
-				"@typescript-eslint/utils": "8.20.0",
+				"@typescript-eslint/typescript-estree": "8.24.0",
+				"@typescript-eslint/utils": "8.24.0",
 				"debug": "^4.3.4",
-				"ts-api-utils": "^2.0.0"
+				"ts-api-utils": "^2.0.1"
 			},
 			"engines": {
 				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -2344,9 +2344,9 @@
 			}
 		},
 		"node_modules/@typescript-eslint/types": {
-			"version": "8.20.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.20.0.tgz",
-			"integrity": "sha512-cqaMiY72CkP+2xZRrFt3ExRBu0WmVitN/rYPZErA80mHjHx/Svgp8yfbzkJmDoQ/whcytOPO9/IZXnOc+wigRA==",
+			"version": "8.24.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.24.0.tgz",
+			"integrity": "sha512-VacJCBTyje7HGAw7xp11q439A+zeGG0p0/p2zsZwpnMzjPB5WteaWqt4g2iysgGFafrqvyLWqq6ZPZAOCoefCw==",
 			"dev": true,
 			"engines": {
 				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -2357,19 +2357,19 @@
 			}
 		},
 		"node_modules/@typescript-eslint/typescript-estree": {
-			"version": "8.20.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.20.0.tgz",
-			"integrity": "sha512-Y7ncuy78bJqHI35NwzWol8E0X7XkRVS4K4P4TCyzWkOJih5NDvtoRDW4Ba9YJJoB2igm9yXDdYI/+fkiiAxPzA==",
+			"version": "8.24.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.24.0.tgz",
+			"integrity": "sha512-ITjYcP0+8kbsvT9bysygfIfb+hBj6koDsu37JZG7xrCiy3fPJyNmfVtaGsgTUSEuTzcvME5YI5uyL5LD1EV5ZQ==",
 			"dev": true,
 			"dependencies": {
-				"@typescript-eslint/types": "8.20.0",
-				"@typescript-eslint/visitor-keys": "8.20.0",
+				"@typescript-eslint/types": "8.24.0",
+				"@typescript-eslint/visitor-keys": "8.24.0",
 				"debug": "^4.3.4",
 				"fast-glob": "^3.3.2",
 				"is-glob": "^4.0.3",
 				"minimatch": "^9.0.4",
 				"semver": "^7.6.0",
-				"ts-api-utils": "^2.0.0"
+				"ts-api-utils": "^2.0.1"
 			},
 			"engines": {
 				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -2383,15 +2383,15 @@
 			}
 		},
 		"node_modules/@typescript-eslint/utils": {
-			"version": "8.20.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.20.0.tgz",
-			"integrity": "sha512-dq70RUw6UK9ei7vxc4KQtBRk7qkHZv447OUZ6RPQMQl71I3NZxQJX/f32Smr+iqWrB02pHKn2yAdHBb0KNrRMA==",
+			"version": "8.24.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.24.0.tgz",
+			"integrity": "sha512-07rLuUBElvvEb1ICnafYWr4hk8/U7X9RDCOqd9JcAMtjh/9oRmcfN4yGzbPVirgMR0+HLVHehmu19CWeh7fsmQ==",
 			"dev": true,
 			"dependencies": {
 				"@eslint-community/eslint-utils": "^4.4.0",
-				"@typescript-eslint/scope-manager": "8.20.0",
-				"@typescript-eslint/types": "8.20.0",
-				"@typescript-eslint/typescript-estree": "8.20.0"
+				"@typescript-eslint/scope-manager": "8.24.0",
+				"@typescript-eslint/types": "8.24.0",
+				"@typescript-eslint/typescript-estree": "8.24.0"
 			},
 			"engines": {
 				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -2406,12 +2406,12 @@
 			}
 		},
 		"node_modules/@typescript-eslint/visitor-keys": {
-			"version": "8.20.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.20.0.tgz",
-			"integrity": "sha512-v/BpkeeYAsPkKCkR8BDwcno0llhzWVqPOamQrAEMdpZav2Y9OVjd9dwJyBLJWwf335B5DmlifECIkZRJCaGaHA==",
+			"version": "8.24.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.24.0.tgz",
+			"integrity": "sha512-kArLq83QxGLbuHrTMoOEWO+l2MwsNS2TGISEdx8xgqpkbytB07XmlQyQdNDrCc1ecSqx0cnmhGvpX+VBwqqSkg==",
 			"dev": true,
 			"dependencies": {
-				"@typescript-eslint/types": "8.20.0",
+				"@typescript-eslint/types": "8.24.0",
 				"eslint-visitor-keys": "^4.2.0"
 			},
 			"engines": {
@@ -2454,9 +2454,9 @@
 			}
 		},
 		"node_modules/@vitest/coverage-v8": {
-			"version": "3.0.2",
-			"resolved": "https://registry.npmjs.org/@vitest/coverage-v8/-/coverage-v8-3.0.2.tgz",
-			"integrity": "sha512-U+hZYb0FtgNDb6B3E9piAHzXXIuxuBw2cd6Lvepc9sYYY4KjgiwCBmo3Sird9ZRu3ggLpLBTfw1ZRr77ipiSfw==",
+			"version": "3.0.5",
+			"resolved": "https://registry.npmjs.org/@vitest/coverage-v8/-/coverage-v8-3.0.5.tgz",
+			"integrity": "sha512-zOOWIsj5fHh3jjGwQg+P+J1FW3s4jBu1Zqga0qW60yutsBtqEqNEJKWYh7cYn1yGD+1bdPsPdC/eL4eVK56xMg==",
 			"dev": true,
 			"dependencies": {
 				"@ampproject/remapping": "^2.3.0",
@@ -2476,8 +2476,8 @@
 				"url": "https://opencollective.com/vitest"
 			},
 			"peerDependencies": {
-				"@vitest/browser": "3.0.2",
-				"vitest": "3.0.2"
+				"@vitest/browser": "3.0.5",
+				"vitest": "3.0.5"
 			},
 			"peerDependenciesMeta": {
 				"@vitest/browser": {
@@ -2486,13 +2486,13 @@
 			}
 		},
 		"node_modules/@vitest/expect": {
-			"version": "3.0.2",
-			"resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-3.0.2.tgz",
-			"integrity": "sha512-dKSHLBcoZI+3pmP5hiZ7I5grNru2HRtEW8Z5Zp4IXog8QYcxhlox7JUPyIIFWfN53+3HW3KPLIl6nSzUGgKSuQ==",
+			"version": "3.0.5",
+			"resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-3.0.5.tgz",
+			"integrity": "sha512-nNIOqupgZ4v5jWuQx2DSlHLEs7Q4Oh/7AYwNyE+k0UQzG7tSmjPXShUikn1mpNGzYEN2jJbTvLejwShMitovBA==",
 			"dev": true,
 			"dependencies": {
-				"@vitest/spy": "3.0.2",
-				"@vitest/utils": "3.0.2",
+				"@vitest/spy": "3.0.5",
+				"@vitest/utils": "3.0.5",
 				"chai": "^5.1.2",
 				"tinyrainbow": "^2.0.0"
 			},
@@ -2501,12 +2501,12 @@
 			}
 		},
 		"node_modules/@vitest/mocker": {
-			"version": "3.0.2",
-			"resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-3.0.2.tgz",
-			"integrity": "sha512-Hr09FoBf0jlwwSyzIF4Xw31OntpO3XtZjkccpcBf8FeVW3tpiyKlkeUzxS/txzHqpUCNIX157NaTySxedyZLvA==",
+			"version": "3.0.5",
+			"resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-3.0.5.tgz",
+			"integrity": "sha512-CLPNBFBIE7x6aEGbIjaQAX03ZZlBMaWwAjBdMkIf/cAn6xzLTiM3zYqO/WAbieEjsAZir6tO71mzeHZoodThvw==",
 			"dev": true,
 			"dependencies": {
-				"@vitest/spy": "3.0.2",
+				"@vitest/spy": "3.0.5",
 				"estree-walker": "^3.0.3",
 				"magic-string": "^0.30.17"
 			},
@@ -2536,9 +2536,9 @@
 			}
 		},
 		"node_modules/@vitest/pretty-format": {
-			"version": "3.0.2",
-			"resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-3.0.2.tgz",
-			"integrity": "sha512-yBohcBw/T/p0/JRgYD+IYcjCmuHzjC3WLAKsVE4/LwiubzZkE8N49/xIQ/KGQwDRA8PaviF8IRO8JMWMngdVVQ==",
+			"version": "3.0.5",
+			"resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-3.0.5.tgz",
+			"integrity": "sha512-CjUtdmpOcm4RVtB+up8r2vVDLR16Mgm/bYdkGFe3Yj/scRfCpbSi2W/BDSDcFK7ohw8UXvjMbOp9H4fByd/cOA==",
 			"dev": true,
 			"dependencies": {
 				"tinyrainbow": "^2.0.0"
@@ -2548,13 +2548,13 @@
 			}
 		},
 		"node_modules/@vitest/runner": {
-			"version": "3.0.2",
-			"resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-3.0.2.tgz",
-			"integrity": "sha512-GHEsWoncrGxWuW8s405fVoDfSLk6RF2LCXp6XhevbtDjdDme1WV/eNmUueDfpY1IX3MJaCRelVCEXsT9cArfEg==",
+			"version": "3.0.5",
+			"resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-3.0.5.tgz",
+			"integrity": "sha512-BAiZFityFexZQi2yN4OX3OkJC6scwRo8EhRB0Z5HIGGgd2q+Nq29LgHU/+ovCtd0fOfXj5ZI6pwdlUmC5bpi8A==",
 			"dev": true,
 			"dependencies": {
-				"@vitest/utils": "3.0.2",
-				"pathe": "^2.0.1"
+				"@vitest/utils": "3.0.5",
+				"pathe": "^2.0.2"
 			},
 			"funding": {
 				"url": "https://opencollective.com/vitest"
@@ -2567,14 +2567,14 @@
 			"dev": true
 		},
 		"node_modules/@vitest/snapshot": {
-			"version": "3.0.2",
-			"resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-3.0.2.tgz",
-			"integrity": "sha512-h9s67yD4+g+JoYG0zPCo/cLTabpDqzqNdzMawmNPzDStTiwxwkyYM1v5lWE8gmGv3SVJ2DcxA2NpQJZJv9ym3g==",
+			"version": "3.0.5",
+			"resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-3.0.5.tgz",
+			"integrity": "sha512-GJPZYcd7v8QNUJ7vRvLDmRwl+a1fGg4T/54lZXe+UOGy47F9yUfE18hRCtXL5aHN/AONu29NGzIXSVFh9K0feA==",
 			"dev": true,
 			"dependencies": {
-				"@vitest/pretty-format": "3.0.2",
+				"@vitest/pretty-format": "3.0.5",
 				"magic-string": "^0.30.17",
-				"pathe": "^2.0.1"
+				"pathe": "^2.0.2"
 			},
 			"funding": {
 				"url": "https://opencollective.com/vitest"
@@ -2587,9 +2587,9 @@
 			"dev": true
 		},
 		"node_modules/@vitest/spy": {
-			"version": "3.0.2",
-			"resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-3.0.2.tgz",
-			"integrity": "sha512-8mI2iUn+PJFMT44e3ISA1R+K6ALVs47W6eriDTfXe6lFqlflID05MB4+rIFhmDSLBj8iBsZkzBYlgSkinxLzSQ==",
+			"version": "3.0.5",
+			"resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-3.0.5.tgz",
+			"integrity": "sha512-5fOzHj0WbUNqPK6blI/8VzZdkBlQLnT25knX0r4dbZI9qoZDf3qAdjoMmDcLG5A83W6oUUFJgUd0EYBc2P5xqg==",
 			"dev": true,
 			"dependencies": {
 				"tinyspy": "^3.0.2"
@@ -2599,15 +2599,15 @@
 			}
 		},
 		"node_modules/@vitest/ui": {
-			"version": "3.0.2",
-			"resolved": "https://registry.npmjs.org/@vitest/ui/-/ui-3.0.2.tgz",
-			"integrity": "sha512-R0E4nG0OAafsCKwKnENLdjpMbxAyDqT/hdbJp71eeAR1wE+C7IFv1G158sRj5gUfJ7pM7IxtcwIqa34beYzLhg==",
+			"version": "3.0.5",
+			"resolved": "https://registry.npmjs.org/@vitest/ui/-/ui-3.0.5.tgz",
+			"integrity": "sha512-gw2noso6WI+2PeMVCZFntdATS6xl9qhQcbhkPQ9sOmx/Xn0f4Bx4KDSbD90jpJPF0l5wOzSoGCmKyVR3W612mg==",
 			"dev": true,
 			"dependencies": {
-				"@vitest/utils": "3.0.2",
+				"@vitest/utils": "3.0.5",
 				"fflate": "^0.8.2",
 				"flatted": "^3.3.2",
-				"pathe": "^2.0.1",
+				"pathe": "^2.0.2",
 				"sirv": "^3.0.0",
 				"tinyglobby": "^0.2.10",
 				"tinyrainbow": "^2.0.0"
@@ -2616,7 +2616,7 @@
 				"url": "https://opencollective.com/vitest"
 			},
 			"peerDependencies": {
-				"vitest": "3.0.2"
+				"vitest": "3.0.5"
 			}
 		},
 		"node_modules/@vitest/ui/node_modules/pathe": {
@@ -2626,12 +2626,12 @@
 			"dev": true
 		},
 		"node_modules/@vitest/utils": {
-			"version": "3.0.2",
-			"resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-3.0.2.tgz",
-			"integrity": "sha512-Qu01ZYZlgHvDP02JnMBRpX43nRaZtNpIzw3C1clDXmn8eakgX6iQVGzTQ/NjkIr64WD8ioqOjkaYRVvHQI5qiw==",
+			"version": "3.0.5",
+			"resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-3.0.5.tgz",
+			"integrity": "sha512-N9AX0NUoUtVwKwy21JtwzaqR5L5R5A99GAbrHfCCXK1lp593i/3AZAXhSP43wRQuxYsflrdzEfXZFo1reR1Nkg==",
 			"dev": true,
 			"dependencies": {
-				"@vitest/pretty-format": "3.0.2",
+				"@vitest/pretty-format": "3.0.5",
 				"loupe": "^3.1.2",
 				"tinyrainbow": "^2.0.0"
 			},
@@ -3369,17 +3369,17 @@
 			}
 		},
 		"node_modules/eslint": {
-			"version": "9.18.0",
-			"resolved": "https://registry.npmjs.org/eslint/-/eslint-9.18.0.tgz",
-			"integrity": "sha512-+waTfRWQlSbpt3KWE+CjrPPYnbq9kfZIYUqapc0uBXyjTp8aYXZDsUH16m39Ryq3NjAVP4tjuF7KaukeqoCoaA==",
+			"version": "9.20.1",
+			"resolved": "https://registry.npmjs.org/eslint/-/eslint-9.20.1.tgz",
+			"integrity": "sha512-m1mM33o6dBUjxl2qb6wv6nGNwCAsns1eKtaQ4l/NPHeTvhiUPbtdfMyktxN4B3fgHIgsYh1VT3V9txblpQHq+g==",
 			"dev": true,
 			"dependencies": {
 				"@eslint-community/eslint-utils": "^4.2.0",
 				"@eslint-community/regexpp": "^4.12.1",
 				"@eslint/config-array": "^0.19.0",
-				"@eslint/core": "^0.10.0",
+				"@eslint/core": "^0.11.0",
 				"@eslint/eslintrc": "^3.2.0",
-				"@eslint/js": "9.18.0",
+				"@eslint/js": "9.20.0",
 				"@eslint/plugin-kit": "^0.2.5",
 				"@humanfs/node": "^0.16.6",
 				"@humanwhocodes/module-importer": "^1.0.1",
@@ -3440,9 +3440,9 @@
 			}
 		},
 		"node_modules/eslint-plugin-react-refresh": {
-			"version": "0.4.18",
-			"resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.4.18.tgz",
-			"integrity": "sha512-IRGEoFn3OKalm3hjfolEWGqoF/jPqeEYFp+C8B0WMzwGwBMvlRDQd06kghDhF0C61uJ6WfSDhEZE/sAQjduKgw==",
+			"version": "0.4.19",
+			"resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.4.19.tgz",
+			"integrity": "sha512-eyy8pcr/YxSYjBoqIFSrlbn9i/xvxUFa8CjzAYo9cFjgGXqq1hyjihcpZvxRLalpaWmueWR81xn7vuKmAFijDQ==",
 			"dev": true,
 			"peerDependencies": {
 				"eslint": ">=8.40"
@@ -3476,6 +3476,18 @@
 				"url": "https://opencollective.com/eslint"
 			}
 		},
+		"node_modules/eslint/node_modules/@eslint/core": {
+			"version": "0.11.0",
+			"resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.11.0.tgz",
+			"integrity": "sha512-DWUB2pksgNEb6Bz2fggIy1wh6fGgZP4Xyy/Mt0QZPiloKKXerbqq9D3SBQTlCRYOrcRPu4vuz+CGjwdfqxnoWA==",
+			"dev": true,
+			"dependencies": {
+				"@types/json-schema": "^7.0.15"
+			},
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+			}
+		},
 		"node_modules/eslint/node_modules/ansi-styles": {
 			"version": "4.3.0",
 			"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -3732,9 +3744,9 @@
 			]
 		},
 		"node_modules/fastq": {
-			"version": "1.18.0",
-			"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.18.0.tgz",
-			"integrity": "sha512-QKHXPW0hD8g4UET03SdOdunzSouc9N4AuHdsX8XNcTsuz+yYFILVNIX4l9yHABMhiEI9Db0JTTIpu0wB+Y1QQw==",
+			"version": "1.19.0",
+			"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.0.tgz",
+			"integrity": "sha512-7SFSRCNjBQIZH/xZR3iy5iQYR8aGBE0h3VG6/cwlbrpdciNYBMotQav8c1XI3HjHH+NikUpP53nPdlZSdWmFzA==",
 			"dev": true,
 			"dependencies": {
 				"reusify": "^1.0.4"
@@ -4235,9 +4247,9 @@
 			"dev": true
 		},
 		"node_modules/jotai": {
-			"version": "2.11.0",
-			"resolved": "https://registry.npmjs.org/jotai/-/jotai-2.11.0.tgz",
-			"integrity": "sha512-zKfoBBD1uDw3rljwHkt0fWuja1B76R7CjznuBO+mSX6jpsO1EBeWNRKpeaQho9yPI/pvCv4recGfgOXGxwPZvQ==",
+			"version": "2.12.0",
+			"resolved": "https://registry.npmjs.org/jotai/-/jotai-2.12.0.tgz",
+			"integrity": "sha512-j5B4NmUw8gbuN7AG4NufWw00rfpm6hexL2CVhKD7juoP2YyD9FEUV5ar921JMvadyrxQhU1NpuKUL3QfsAlVpA==",
 			"engines": {
 				"node": ">=12.20.0"
 			},
@@ -4426,9 +4438,9 @@
 			}
 		},
 		"node_modules/loupe": {
-			"version": "3.1.2",
-			"resolved": "https://registry.npmjs.org/loupe/-/loupe-3.1.2.tgz",
-			"integrity": "sha512-23I4pFZHmAemUnz8WZXbYRSKYj801VDaNv9ETuMh7IrMc7VuVVSo+Z9iLE3ni30+U48iDWfi30d3twAXBYmnCg==",
+			"version": "3.1.3",
+			"resolved": "https://registry.npmjs.org/loupe/-/loupe-3.1.3.tgz",
+			"integrity": "sha512-kkIp7XSkP78ZxJEsSxW3712C6teJVoeHHwgo9zJ380de7IYyJ2ISlxojcH2pC5OFLewESmnRi/+XCDIEEVyoug==",
 			"dev": true
 		},
 		"node_modules/lru-cache": {
@@ -5041,9 +5053,9 @@
 			}
 		},
 		"node_modules/react-router": {
-			"version": "7.1.2",
-			"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.1.2.tgz",
-			"integrity": "sha512-KeallSO30KLpIe/ZZqfk6pCJ1c+5JhMxl3SCS3Zx1LgaGuQbgLDmjuNi6KZ5LnAV9sWjbmBWGRw8Um/Pw6BExg==",
+			"version": "7.1.5",
+			"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.1.5.tgz",
+			"integrity": "sha512-8BUF+hZEU4/z/JD201yK6S+UYhsf58bzYIDq2NS1iGpwxSXDu7F+DeGSkIXMFBuHZB21FSiCzEcUb18cQNdRkA==",
 			"dependencies": {
 				"@types/cookie": "^0.6.0",
 				"cookie": "^1.0.1",
@@ -5064,11 +5076,11 @@
 			}
 		},
 		"node_modules/react-router-dom": {
-			"version": "7.1.2",
-			"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.1.2.tgz",
-			"integrity": "sha512-kE7JdrDfeWO/2d6RPucLmqp2UL8Isv1VWtI5MQyYNA99KtncqxWDL6550+0rH4fboJKJbXRcyjRnIRT/gkxTcA==",
+			"version": "7.1.5",
+			"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.1.5.tgz",
+			"integrity": "sha512-/4f9+up0Qv92D3bB8iN5P1s3oHAepSGa9h5k6tpTFlixTTskJZwKGhJ6vRJ277tLD1zuaZTt95hyGWV1Z37csQ==",
 			"dependencies": {
-				"react-router": "7.1.2"
+				"react-router": "7.1.5"
 			},
 			"engines": {
 				"node": ">=20.0.0"
@@ -5704,9 +5716,9 @@
 			}
 		},
 		"node_modules/ts-api-utils": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.0.0.tgz",
-			"integrity": "sha512-xCt/TOAc+EOHS1XPnijD3/yzpH6qg2xppZO1YDqGoVsNXfQfzHpOdNuXwrwOU8u4ITXJyDCTyt8w5g1sZv9ynQ==",
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.0.1.tgz",
+			"integrity": "sha512-dnlgjFSVetynI8nzgJ+qF62efpglpWRk8isUEWZGWlJYySCTD6aKvbUDu+zbPeDakk3bg5H4XpitHukgfL1m9w==",
 			"dev": true,
 			"engines": {
 				"node": ">=18.12"
@@ -5955,14 +5967,14 @@
 			}
 		},
 		"node_modules/vite": {
-			"version": "6.0.7",
-			"resolved": "https://registry.npmjs.org/vite/-/vite-6.0.7.tgz",
-			"integrity": "sha512-RDt8r/7qx9940f8FcOIAH9PTViRrghKaK2K1jY3RaAURrEUbm9Du1mJ72G+jlhtG3WwodnfzY8ORQZbBavZEAQ==",
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/vite/-/vite-6.1.0.tgz",
+			"integrity": "sha512-RjjMipCKVoR4hVfPY6GQTgveinjNuyLw+qruksLDvA5ktI1150VmcMBKmQaEWJhg/j6Uaf6dNCNA0AfdzUb/hQ==",
 			"dev": true,
 			"dependencies": {
 				"esbuild": "^0.24.2",
-				"postcss": "^8.4.49",
-				"rollup": "^4.23.0"
+				"postcss": "^8.5.1",
+				"rollup": "^4.30.1"
 			},
 			"bin": {
 				"vite": "bin/vite.js"
@@ -6026,15 +6038,15 @@
 			}
 		},
 		"node_modules/vite-node": {
-			"version": "3.0.2",
-			"resolved": "https://registry.npmjs.org/vite-node/-/vite-node-3.0.2.tgz",
-			"integrity": "sha512-hsEQerBAHvVAbv40m3TFQe/lTEbOp7yDpyqMJqr2Tnd+W58+DEYOt+fluQgekOePcsNBmR77lpVAnIU2Xu4SvQ==",
+			"version": "3.0.5",
+			"resolved": "https://registry.npmjs.org/vite-node/-/vite-node-3.0.5.tgz",
+			"integrity": "sha512-02JEJl7SbtwSDJdYS537nU6l+ktdvcREfLksk/NDAqtdKWGqHl+joXzEubHROmS3E6pip+Xgu2tFezMu75jH7A==",
 			"dev": true,
 			"dependencies": {
 				"cac": "^6.7.14",
 				"debug": "^4.4.0",
 				"es-module-lexer": "^1.6.0",
-				"pathe": "^2.0.1",
+				"pathe": "^2.0.2",
 				"vite": "^5.0.0 || ^6.0.0"
 			},
 			"bin": {
@@ -6142,30 +6154,30 @@
 			}
 		},
 		"node_modules/vitest": {
-			"version": "3.0.2",
-			"resolved": "https://registry.npmjs.org/vitest/-/vitest-3.0.2.tgz",
-			"integrity": "sha512-5bzaHakQ0hmVVKLhfh/jXf6oETDBtgPo8tQCHYB+wftNgFJ+Hah67IsWc8ivx4vFL025Ow8UiuTf4W57z4izvQ==",
+			"version": "3.0.5",
+			"resolved": "https://registry.npmjs.org/vitest/-/vitest-3.0.5.tgz",
+			"integrity": "sha512-4dof+HvqONw9bvsYxtkfUp2uHsTN9bV2CZIi1pWgoFpL1Lld8LA1ka9q/ONSsoScAKG7NVGf2stJTI7XRkXb2Q==",
 			"dev": true,
 			"dependencies": {
-				"@vitest/expect": "3.0.2",
-				"@vitest/mocker": "3.0.2",
-				"@vitest/pretty-format": "^3.0.2",
-				"@vitest/runner": "3.0.2",
-				"@vitest/snapshot": "3.0.2",
-				"@vitest/spy": "3.0.2",
-				"@vitest/utils": "3.0.2",
+				"@vitest/expect": "3.0.5",
+				"@vitest/mocker": "3.0.5",
+				"@vitest/pretty-format": "^3.0.5",
+				"@vitest/runner": "3.0.5",
+				"@vitest/snapshot": "3.0.5",
+				"@vitest/spy": "3.0.5",
+				"@vitest/utils": "3.0.5",
 				"chai": "^5.1.2",
 				"debug": "^4.4.0",
 				"expect-type": "^1.1.0",
 				"magic-string": "^0.30.17",
-				"pathe": "^2.0.1",
+				"pathe": "^2.0.2",
 				"std-env": "^3.8.0",
 				"tinybench": "^2.9.0",
 				"tinyexec": "^0.3.2",
 				"tinypool": "^1.0.2",
 				"tinyrainbow": "^2.0.0",
 				"vite": "^5.0.0 || ^6.0.0",
-				"vite-node": "3.0.2",
+				"vite-node": "3.0.5",
 				"why-is-node-running": "^2.3.0"
 			},
 			"bin": {
@@ -6179,9 +6191,10 @@
 			},
 			"peerDependencies": {
 				"@edge-runtime/vm": "*",
+				"@types/debug": "^4.1.12",
 				"@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0",
-				"@vitest/browser": "3.0.2",
-				"@vitest/ui": "3.0.2",
+				"@vitest/browser": "3.0.5",
+				"@vitest/ui": "3.0.5",
 				"happy-dom": "*",
 				"jsdom": "*"
 			},
@@ -6189,6 +6202,9 @@
 				"@edge-runtime/vm": {
 					"optional": true
 				},
+				"@types/debug": {
+					"optional": true
+				},
 				"@types/node": {
 					"optional": true
 				},
--- a/package.json
+++ b/package.json
@@ -12,46 +12,46 @@
 	"dependencies": {
 		"@emotion/react": "^11.14.0",
 		"@iconify/react": "^5.2.0",
-		"@mantine/core": "^7.16.0",
-		"@mantine/dates": "^7.16.0",
-		"@mantine/form": "^7.16.0",
-		"@mantine/hooks": "^7.16.0",
-		"@mantine/modals": "^7.16.0",
-		"@tabler/icons-react": "^3.28.1",
-		"@tanstack/react-query": "^5.64.1",
-		"@tanstack/react-query-devtools": "^5.64.1",
-		"@tanstack/react-query-persist-client": "^5.64.1",
+		"@mantine/core": "^7.16.3",
+		"@mantine/dates": "^7.16.3",
+		"@mantine/form": "^7.16.3",
+		"@mantine/hooks": "^7.16.3",
+		"@mantine/modals": "^7.16.3",
+		"@tabler/icons-react": "^3.30.0",
+		"@tanstack/react-query": "^5.66.0",
+		"@tanstack/react-query-devtools": "^5.66.0",
+		"@tanstack/react-query-persist-client": "^5.66.0",
 		"clsx": "^2.1.1",
 		"dayjs": "^1.11.13",
 		"dotenv": "^16.4.7",
 		"idb-keyval": "^6.2.1",
-		"jotai": "^2.11.0",
+		"jotai": "^2.12.0",
 		"mantine-react-table": "^2.0.0-beta.6",
 		"react": "^19.0.0",
 		"react-dom": "^19.0.0",
 		"react-icons": "^5.4.0",
 		"react-query": "^3.39.3",
-		"react-router-dom": "^7.1.2",
+		"react-router-dom": "^7.1.5",
 		"react-toastify": "^11.0.3",
 		"recharts": "^2.15.1"
 	},
 	"devDependencies": {
-		"@types/node": "^22.10.7",
-		"@types/react": "^19.0.7",
+		"@types/node": "^22.13.1",
+		"@types/react": "^19.0.8",
 		"@types/react-dom": "^19.0.3",
-		"@typescript-eslint/eslint-plugin": "^8.20.0",
-		"@typescript-eslint/parser": "^8.20.0",
+		"@typescript-eslint/eslint-plugin": "^8.24.0",
+		"@typescript-eslint/parser": "^8.24.0",
 		"@vitejs/plugin-react": "^4.3.4",
-		"@vitest/coverage-v8": "^3.0.2",
-		"@vitest/ui": "^3.0.2",
-		"eslint": "^9.18.0",
+		"@vitest/coverage-v8": "^3.0.5",
+		"@vitest/ui": "^3.0.5",
+		"eslint": "^9.20.1",
 		"eslint-plugin-react-hooks": "^5.1.0",
-		"eslint-plugin-react-refresh": "^0.4.18",
+		"eslint-plugin-react-refresh": "^0.4.19",
 		"typescript": "^5.7.3",
-		"vite": "^6.0.7",
+		"vite": "^6.1.0",
 		"vite-plugin-dts": "~4.5.0",
 		"vite-plugin-eslint": "^1.8.1",
 		"vite-tsconfig-paths": "^5.1.4",
-		"vitest": "^3.0.2"
+		"vitest": "^3.0.5"
 	}
 }
--- a/src/components/DataTable/DataTable.tsx
+++ b/src/components/DataTable/DataTable.tsx
@@ -44,7 +44,7 @@ export function DataTableComponent({
 		table,
 		row,
 	}) => {
-		editRow({ method: 'PATCH', endpoint: endpoint, body: { ...values, id:row.id }});
+		editRow({ method: 'PATCH', endpoint: endpoint, body: { ...values, id: row.id } });
 		table.setEditingRow(null);
 	};
 	const openDeleteConfirmModal = (row: MRT_Row<any>) =>
--- a/src/components/WeatherModal/CurrentWeather.tsx
+++ b/src/components/WeatherModal/CurrentWeather.tsx
@@ -1,9 +1,33 @@
 import { Grid, Group, Stack, Text, ThemeIcon } from '@mantine/core';
+import { useCommonHooks } from 'hooks';
+import { useSunStateAPI } from 'hooks/useAPI';
+import { useEffect, useState } from 'react';
 import { FaLongArrowAltDown, FaLongArrowAltUp, FaWind } from 'react-icons/fa';
-import { WiBarometer, WiHumidity } from 'react-icons/wi';
+import { WiBarometer, WiHumidity, WiSunrise, WiSunset } from 'react-icons/wi';
 import WeatherIcon from './WeatherIcon';

 export default function CurrentWeather({ weather }: any) {
+	const { currentLocation } = useCommonHooks();
+	const { data: sunStateData } = useSunStateAPI({
+		lat: currentLocation.lat,
+		lon: currentLocation.lon,
+	});
+
+	const [sunStates, setSunStates] = useState<any>([]);
+
+	useEffect(() => {
+		if (sunStateData) {
+			setSunStates(
+				sunStateData.results.map((item: any) => {
+					return {
+						date: item.date,
+						sunrise: item.sunrise,
+						sunset: item.sunset,
+					};
+				}),
+			);
+		}
+	}, [sunStateData]);
 	return (
 		<Stack
 			gap={0}
@@ -16,7 +40,7 @@ export default function CurrentWeather({ weather }: any) {
 				paddingBottom: '.5rem',
 			}}
 		>
-			<Group gap={0} px={16} w={'100%'}>
+			<Group gap={0} px={16} w={'100%'} justify='space-between'>
 				<Text
 					c={'var(--color-text-pri)'}
 					style={{
@@ -30,7 +54,21 @@ export default function CurrentWeather({ weather }: any) {
 			<Group gap={8} w={'100%'} justify='space-between'>
 				<Stack gap={0} w={'45%'}>
 					<Group gap={0} justify='flex-end'>
-						<WeatherIcon textDescription={`${weather.textDescription}`} />
+						<WeatherIcon
+							textDescription={`${
+								weather.textDescription.includes('and')
+									? weather.textDescription.substring(
+											0,
+											weather.textDescription.indexOf('and'),
+										)
+									: weather.textDescription.includes('then')
+										? weather.textDescription.substring(
+												0,
+												weather.textDescription.indexOf('then'),
+											)
+										: weather.textDescription
+							}`}
+						/>
 						<Text fz={'7rem'} fw={200}>
 							{weather.temperature}°<sup style={{ fontSize: '3rem' }}>F</sup>
 						</Text>
@@ -52,8 +90,8 @@ export default function CurrentWeather({ weather }: any) {
 						Feels like {weather.heatIndex ?? weather.windChill ?? weather.temperature}°
 						<sup>F</sup>
 					</Text>
-					<Grid align='center' w={'100%'}>
-						<Grid.Col span={2}>
+					<Grid align='center'>
+						<Grid.Col span={1}>
 							<ThemeIcon
 								h={'auto'}
 								w={'auto'}
@@ -63,12 +101,12 @@ export default function CurrentWeather({ weather }: any) {
 								<FaLongArrowAltUp size={32} />
 							</ThemeIcon>
 						</Grid.Col>
-						<Grid.Col span={1}>
+						<Grid.Col span={3}>
 							<Text>
 								{weather.highTemp}°<sup>F</sup>
 							</Text>
 						</Grid.Col>
-						<Grid.Col span={2}>
+						<Grid.Col span={1}>
 							<ThemeIcon
 								h={'auto'}
 								w={'auto'}
@@ -85,7 +123,35 @@ export default function CurrentWeather({ weather }: any) {
 						</Grid.Col>
 					</Grid>
 					<Grid align='center'>
-						<Grid.Col span={2}>
+						<Grid.Col span={1}>
+							<ThemeIcon
+								h={'auto'}
+								w={'auto'}
+								variant='subtle'
+								c={'var(--color-text-pri)'}
+							>
+								<WiSunrise size={32} />
+							</ThemeIcon>
+						</Grid.Col>
+						<Grid.Col span={3}>
+							<Text>{sunStates[0]?.sunrise}</Text>
+						</Grid.Col>
+						<Grid.Col span={1}>
+							<ThemeIcon
+								h={'auto'}
+								w={'auto'}
+								variant='subtle'
+								c={'var(--color-text-pri)'}
+							>
+								<WiSunset size={32} />
+							</ThemeIcon>
+						</Grid.Col>
+						<Grid.Col span={3}>
+							<Text>{sunStates[0]?.sunset}</Text>
+						</Grid.Col>
+					</Grid>
+					<Grid align='center'>
+						<Grid.Col span={1}>
 							<ThemeIcon
 								h={'auto'}
 								w={'auto'}
@@ -95,7 +161,7 @@ export default function CurrentWeather({ weather }: any) {
 								<WiHumidity size={32} />
 							</ThemeIcon>
 						</Grid.Col>
-						<Grid.Col span={2}>
+						<Grid.Col span={3}>
 							<Text>Humidity</Text>
 						</Grid.Col>
 						<Grid.Col span={2}>
@@ -103,7 +169,7 @@ export default function CurrentWeather({ weather }: any) {
 						</Grid.Col>
 					</Grid>
 					<Grid align='center'>
-						<Grid.Col span={2}>
+						<Grid.Col span={1}>
 							<ThemeIcon
 								h={'auto'}
 								w={'auto'}
@@ -113,7 +179,7 @@ export default function CurrentWeather({ weather }: any) {
 								<FaWind size={32} />
 							</ThemeIcon>
 						</Grid.Col>
-						<Grid.Col span={2}>
+						<Grid.Col span={3}>
 							<Text>Wind</Text>
 						</Grid.Col>
 						<Grid.Col span={2}>
@@ -121,7 +187,7 @@ export default function CurrentWeather({ weather }: any) {
 						</Grid.Col>
 					</Grid>
 					<Grid align='center'>
-						<Grid.Col span={2}>
+						<Grid.Col span={1}>
 							<ThemeIcon
 								h={'auto'}
 								w={'auto'}
@@ -131,7 +197,7 @@ export default function CurrentWeather({ weather }: any) {
 								<WiBarometer size={32} />
 							</ThemeIcon>
 						</Grid.Col>
-						<Grid.Col span={2}>
+						<Grid.Col span={3}>
 							<Text>Pressure</Text>
 						</Grid.Col>
 						<Grid.Col span={2}>
--- a/src/components/WeatherModal/HourlyCard.tsx
+++ b/src/components/WeatherModal/HourlyCard.tsx
@@ -1,122 +0,0 @@
-import { Icon } from '@iconify/react/dist/iconify.js';
-import { Box, Card, Center, Group, Image, Stack, Text } from '@mantine/core';
-import { useCommonHooks } from 'hooks';
-
-export enum WindDirection {
-	N = 0,
-	NE = 45,
-	E = 90,
-	SE = 135,
-	S = 180,
-	SW = 225,
-	W = 270,
-	NW = 315,
-}
-
-export default function HourlyCard({ weather }: any) {
-	const { isMobile } = useCommonHooks();
-	return (
-		<Stack gap={0} align='center' mx={isMobile ? '.25rem' : 0}>
-			<Card
-				style={{
-					height: '8rem',
-					width: '4rem',
-					backgroundColor: 'var(--color-text-pri)',
-					background: 'rgba(255, 255, 255, 0.6)',
-					padding: 0,
-					margin: 0,
-				}}
-			>
-				<Stack gap={0} h={'100%'} w={'100%'} align='center'>
-					<Stack gap={0} align='center'>
-						<Text fz={12} style={{ zIndex: 2, color: 'black' }}>
-							{new Date(weather.startTime).toLocaleTimeString('en-US', {
-								hour: 'numeric',
-								minute: 'numeric',
-							})}
-						</Text>
-						<Stack gap={0} align='center'>
-							<Box
-								style={{
-									position: 'absolute',
-									width: '56px',
-									height: '56px',
-									backgroundColor: 'transparent',
-									boxShadow:
-										'inset 0px 0px 10px 3px rgba(255, 255, 255, 1), 0px 0px 10px 0px rgba(255, 255, 255, .6)',
-									zIndex: 1,
-									borderRadius: '100%',
-									borderStyle: 'none',
-									border: '0px solid',
-								}}
-							/>
-							<Image
-								src={weather.icon}
-								style={{
-									zIndex: 0,
-									borderRadius: '100%',
-									border: '0px solid',
-									borderStyle: 'none',
-								}}
-							/>
-						</Stack>
-					</Stack>
-					<Stack gap={0} align='center' style={{ zIndex: 1 }}>
-						<Center>
-							<Icon
-								icon={'mdi:navigation'}
-								style={{
-									position: 'absolute',
-									transform: `rotate(${WindDirection[weather.windDirection]}deg)`,
-									color: 'black',
-								}}
-							/>
-							<Icon
-								fontSize={28}
-								icon={'mdi:circle-outline'}
-								style={{ color: 'black' }}
-							/>
-						</Center>
-						<Text mt={-6} fz={12} style={{ color: 'black' }}>
-							{weather.windSpeed}
-						</Text>
-					</Stack>
-				</Stack>
-			</Card>
-			<Text
-				mt={4}
-				w={'100%'}
-				fz={14}
-				style={{
-					textAlign: 'center',
-					borderRadius: '4px',
-					background: 'rgba(0, 0, 0, 0.6)',
-					color: 'white',
-				}}
-			>
-				{weather.temperature}°{weather.temperatureUnit}/{weather.relativeHumidity?.value}%
-			</Text>
-			<Box
-				mt={4}
-				w={'100%'}
-				fz={14}
-				style={{
-					textAlign: 'center',
-					borderRadius: '4px',
-					background: 'rgba(0, 0, 0, 0.6)',
-					color: 'white',
-				}}
-			>
-				<Group gap={0} justify='center'>
-					<Icon
-						icon={'mdi:drop'}
-						style={{
-							transform: `rotate(${WindDirection[weather.windDirection]}deg)`,
-						}}
-					/>
-					{`${weather.probabilityOfPrecipitation?.value}`}%
-				</Group>
-			</Box>
-		</Stack>
-	);
-}
--- a/src/components/WeatherModal/SmallOutlookCard.tsx
+++ b/src/components/WeatherModal/SmallOutlookCard.tsx
@@ -1,61 +0,0 @@
-import { Icon } from '@iconify/react/dist/iconify.js';
-import { Box, Center, Image, Overlay, Stack, Text } from '@mantine/core';
-
-export enum WindDirection {
-	N = 0,
-	NE = 45,
-	E = 90,
-	SE = 135,
-	S = 180,
-	SW = 225,
-	W = 270,
-	NW = 315,
-}
-
-export default function SmallOutlookCard({ weather }: any) {
-	return (
-		<Center display={'flex'}>
-			<Box pos={'relative'} style={{ zIndex: -1 }}>
-				<Image radius={'lg'} src={weather.icon === '' ? undefined : weather.icon} />
-				<Overlay
-					color='black'
-					gradient='linear-gradient(0deg, rgba(0, 0, 0, .85), rgba(0, 0, 0, 0.35))'
-					zIndex={0}
-					radius={'lg'}
-				/>
-			</Box>
-			<Stack h={'124px'} w={'124px'} gap={0} pos={'absolute'}>
-				<Stack gap={0} align='center' pos={'absolute'} right={0} top={0}>
-					<Center>
-						<Icon
-							icon={'mdi:navigation'}
-							style={{
-								position: 'absolute',
-								transform: `rotate(${WindDirection[weather.windDirection]}deg)`,
-								color: 'white',
-							}}
-						/>
-						<Icon fontSize={32} icon={'mdi:circle-outline'} style={{ color: 'white' }} />
-					</Center>
-					<Text mt={-6} fz={12} style={{ color: 'white' }}>
-						{weather.windSpeed}
-					</Text>
-				</Stack>
-				<Stack gap={0} pos={'absolute'} bottom={8}>
-					<Text mt={-4} mb={-4} fz={14} style={{ color: 'white' }}>
-						Precip:
-					</Text>
-					<Text mt={-8} mb={-8} p={0} fz={24} style={{ color: 'white' }}>
-						{weather.precipitation}%
-					</Text>
-					<Text mt={-4} mb={-4} fz={14} style={{ color: 'white' }}>
-						{weather.isDayTime ? 'High of:' : 'Low of:'}
-					</Text>
-					<Text mt={-8} mb={-8} p={0} fz={36} style={{ color: 'white' }}>
-						{weather.temperature}°F
-					</Text>
-				</Stack>
-			</Stack>
-		</Center>
-	);
-}
--- a/src/components/WeatherModal/SmallWeatherCard.tsx
+++ b/src/components/WeatherModal/SmallWeatherCard.tsx
@@ -1,69 +0,0 @@
-import { Icon } from '@iconify/react/dist/iconify.js';
-import { Box, Center, Group, Image, Overlay, Stack, Text } from '@mantine/core';
-
-export default function SmallWeatherCard({ weather }: any) {
-	return (
-		<Center display={'flex'}>
-			<Box pos={'relative'} style={{ zIndex: -1 }}>
-				<Image
-					w={'134px'}
-					h={'134px'}
-					radius={'lg'}
-					src={weather.icon === '' ? undefined : weather.icon}
-				/>
-				<Overlay
-					color='black'
-					gradient='linear-gradient(0deg, rgba(0, 0, 0, .85), rgba(0, 0, 0, 0.35))'
-					zIndex={0}
-					radius={'lg'}
-				/>
-			</Box>
-			<Stack h={'124px'} w={'124px'} gap={0} pos={'absolute'}>
-				<Text mb={-8} p={0} fz={12} style={{ color: 'white' }}>
-					{weather.highTemp}°F/{weather.lowTemp}°F
-				</Text>
-				<Stack gap={0} align='center' pos={'absolute'} right={0} top={0}>
-					{weather.precipitation !== 'N/A' && (
-						<Group gap={0}>
-							<Icon color={'white'} icon={'mdi:weather-pouring'} height={32} width={32} />
-							<Text style={{ color: 'white' }}>{weather.precipitation} mm</Text>
-						</Group>
-					)}
-					{weather.precipitation === 'N/A' && (
-						<Icon
-							icon={'mdi:white-balance-sunny'}
-							height={32}
-							width={32}
-							color={'white'}
-						/>
-					)}
-					<Center>
-						<Icon
-							icon={'mdi:navigation'}
-							color='white'
-							style={{
-								position: 'absolute',
-								transform: `rotate(${weather.windDirection}deg)`,
-							}}
-						/>
-						<Icon fontSize={32} icon={'mdi:circle-outline'} color='white' />
-					</Center>
-					<Text mt={-6} fz={12} style={{ color: 'white' }}>
-						{weather.windSpeed} mph
-					</Text>
-				</Stack>
-				<Stack gap={0} pos={'absolute'} bottom={8}>
-					<Text mt={-8} mb={-8} p={0} fz={36} style={{ color: 'white' }}>
-						{weather.temperature}°F
-					</Text>
-					<Text mt={-8} fz={12} style={{ color: 'white' }}>
-						Feels like: {weather.heatIndex}°F
-					</Text>
-					<Text mt={-6} fz={12} style={{ color: 'white' }}>
-						Humidity: {weather.humidity}%
-					</Text>
-				</Stack>
-			</Stack>
-		</Center>
-	);
-}
--- a/src/components/WeatherModal/WeatherGraphs.tsx
+++ b/src/components/WeatherModal/WeatherGraphs.tsx
@@ -0,0 +1,127 @@
+import { Stack, Text } from '@mantine/core';
+import { useCommonHooks } from 'hooks';
+import {
+	Area,
+	CartesianGrid,
+	ComposedChart,
+	Legend,
+	Line,
+	ResponsiveContainer,
+	Tooltip,
+	XAxis,
+	YAxis,
+} from 'recharts';
+
+export default function WeatherGraphs({ hourlyForecast }: any) {
+	const { theme } = useCommonHooks();
+
+	function CustomTooltip({ payload, active }: any) {
+		if (active) {
+			return (
+				<Stack
+					style={{
+						backgroundColor: 'var(--color-background)',
+						padding: '1rem',
+						borderRadius: '8px',
+					}}
+				>
+					{payload.map((item: any) => (
+						<Text
+							key={item.name}
+							size='sm'
+						>{`${item.name} - ${item.value}${item.unit}`}</Text>
+					))}
+				</Stack>
+			);
+		}
+
+		return null;
+	}
+
+	return (
+		<Stack
+			style={{
+				background: 'var(--color-search-background)',
+				padding: '.5rem',
+				borderRadius: '.5rem',
+			}}
+		>
+			<ResponsiveContainer width={'100%'} height={150}>
+				<ComposedChart data={hourlyForecast}>
+					<XAxis
+						type='category'
+						stroke={theme.primaryColor}
+						dataKey={(data: any) => {
+							return new Date(data.startTime).toLocaleTimeString('en-US', {
+								hour: 'numeric',
+								minute: 'numeric',
+							});
+						}}
+					/>
+					<YAxis stroke={theme.primaryColor} unit={'°F'} dataKey={'temperature'} />
+					<CartesianGrid stroke='#f5f5f522' />
+					<Tooltip content={<CustomTooltip />} />
+					<Line
+						unit={'°F'}
+						type='monotone'
+						name='Temperature'
+						dataKey='temperature'
+						stroke={theme.primaryColor}
+						dot={{ stroke: theme.primaryColor, strokeWidth: 1 }}
+					/>
+					<Line
+						unit={'°F'}
+						type='monotone'
+						name='Dew Point'
+						dataKey={(data: any) => {
+							return (data.dewpoint.value * 9) / 5 + 32;
+						}}
+						stroke={theme.accentColor}
+						dot={{ stroke: theme.primaryColor, strokeWidth: 1 }}
+					/>
+					<Legend style={{ background: 'var(--color-search-background)' }} />
+				</ComposedChart>
+			</ResponsiveContainer>
+			<ResponsiveContainer width={'100%'} height={150}>
+				<ComposedChart data={hourlyForecast}>
+					<XAxis
+						type='category'
+						stroke={theme.primaryColor}
+						dataKey={(data: any) => {
+							return new Date(data.startTime).toLocaleTimeString('en-US', {
+								hour: 'numeric',
+								minute: 'numeric',
+							});
+						}}
+					/>
+					<YAxis stroke={theme.primaryColor} unit={'%'} domain={[0, 100]} />
+					<CartesianGrid stroke='#f5f5f522' />
+					<Tooltip content={<CustomTooltip />} />
+					<Area
+						unit={'%'}
+						type='monotone'
+						name='Precipitation'
+						dataKey={(data: any) => {
+							return data.probabilityOfPrecipitation.value;
+						}}
+						stroke={theme.primaryColor}
+						fill={theme.accentColor}
+						dot={{ stroke: theme.primaryColor, strokeWidth: 1 }}
+					/>
+					<Area
+						unit={'%'}
+						type='monotone'
+						name='Humidity'
+						dataKey={(data: any) => {
+							return data.relativeHumidity.value;
+						}}
+						stroke={theme.accentColor}
+						fill={theme.accentColor}
+						dot={{ stroke: theme.primaryColor, strokeWidth: 1 }}
+					/>
+					<Legend style={{ background: 'var(--color-search-background)' }} />
+				</ComposedChart>
+			</ResponsiveContainer>
+		</Stack>
+	);
+}
--- a/src/components/WeatherModal/WeatherIcon.tsx
+++ b/src/components/WeatherModal/WeatherIcon.tsx
@@ -15,7 +15,7 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
 			case 'Clear':
 				return (
 					<Image
-						style={{ width: '100px', height: '100px' }}
+						style={{ width: '75px', height: '75px' }}
 						src={SunnyIcon}
 						alt='SunnyIcon'
 					/>
@@ -23,7 +23,7 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
 			case 'Cloudy':
 				return (
 					<Image
-						style={{ width: '100px', height: '100px' }}
+						style={{ width: '75px', height: '75px' }}
 						src={CloudyIcon}
 						alt='CloudyIcon'
 					/>
@@ -31,7 +31,7 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
 			case 'Mostly Cloudy':
 				return (
 					<Image
-						style={{ width: '100px', height: '100px' }}
+						style={{ width: '75px', height: '75px' }}
 						src={CloudyIcon}
 						alt='CloudyIcon'
 					/>
@@ -39,7 +39,7 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
 			case 'Rain':
 				return (
 					<Image
-						style={{ width: '100px', height: '100px' }}
+						style={{ width: '75px', height: '75px' }}
 						src={RainIcon}
 						alt='RainIcon'
 					/>
@@ -47,7 +47,7 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
 			case 'Showers':
 				return (
 					<Image
-						style={{ width: '100px', height: '100px' }}
+						style={{ width: '75px', height: '75px' }}
 						src={RainIcon}
 						alt='RainIcon'
 					/>
@@ -55,7 +55,7 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
 			case 'Drizzle':
 				return (
 					<Image
-						style={{ width: '100px', height: '100px' }}
+						style={{ width: '75px', height: '75px' }}
 						src={RainIcon}
 						alt='RainIcon'
 					/>
@@ -63,7 +63,7 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
 			case 'Snow':
 				return (
 					<Image
-						style={{ width: '100px', height: '100px' }}
+						style={{ width: '75px', height: '75px' }}
 						src={SnowIcon}
 						alt='SnowIcon'
 					/>
@@ -71,7 +71,7 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
 			case 'Thunderstorm':
 				return (
 					<Image
-						style={{ width: '100px', height: '100px' }}
+						style={{ width: '75px', height: '75px' }}
 						src={ThunderstormIcon}
 						alt='ThunderstormIcon'
 					/>
@@ -79,7 +79,7 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
 			case 'Mist':
 				return (
 					<Image
-						style={{ width: '100px', height: '100px' }}
+						style={{ width: '75px', height: '75px' }}
 						src={HazeIcon}
 						alt='HazeIcon'
 					/>
@@ -87,7 +87,7 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
 			case 'Haze':
 				return (
 					<Image
-						style={{ width: '100px', height: '100px' }}
+						style={{ width: '75px', height: '75px' }}
 						src={HazeIcon}
 						alt='HazeIcon'
 					/>
@@ -95,7 +95,7 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
 			case 'Dust':
 				return (
 					<Image
-						style={{ width: '100px', height: '100px' }}
+						style={{ width: '75px', height: '75px' }}
 						src={HazeIcon}
 						alt='HazeIcon'
 					/>
@@ -103,7 +103,15 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
 			case 'Fog':
 				return (
 					<Image
-						style={{ width: '100px', height: '100px' }}
+						style={{ width: '75px', height: '75px' }}
+						src={HazeIcon}
+						alt='HazeIcon'
+					/>
+				);
+			case 'Patchy Fog':
+				return (
+					<Image
+						style={{ width: '75px', height: '75px' }}
 						src={HazeIcon}
 						alt='HazeIcon'
 					/>
@@ -111,7 +119,7 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
 			case 'Smoke':
 				return (
 					<Image
-						style={{ width: '100px', height: '100px' }}
+						style={{ width: '75px', height: '75px' }}
 						src={HazeIcon}
 						alt='HazeIcon'
 					/>
@@ -119,7 +127,7 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
 			case 'Sand':
 				return (
 					<Image
-						style={{ width: '100px', height: '100px' }}
+						style={{ width: '75px', height: '75px' }}
 						src={HazeIcon}
 						alt='HazeIcon'
 					/>
@@ -127,7 +135,7 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
 			case 'Ash':
 				return (
 					<Image
-						style={{ width: '100px', height: '100px' }}
+						style={{ width: '75px', height: '75px' }}
 						src={HazeIcon}
 						alt='HazeIcon'
 					/>
@@ -135,7 +143,7 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
 			case 'Squall':
 				return (
 					<Image
-						style={{ width: '100px', height: '100px' }}
+						style={{ width: '75px', height: '75px' }}
 						src={HazeIcon}
 						alt='HazeIcon'
 					/>
@@ -143,7 +151,7 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
 			case 'Tornado':
 				return (
 					<Image
-						style={{ width: '100px', height: '100px' }}
+						style={{ width: '75px', height: '75px' }}
 						src={HazeIcon}
 						alt='HazeIcon'
 					/>
@@ -151,7 +159,7 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
 			case 'Freezing Rain':
 				return (
 					<Image
-						style={{ width: '100px', height: '100px' }}
+						style={{ width: '75px', height: '75px' }}
 						src={HazeIcon}
 						alt='HazeIcon'
 					/>
@@ -159,7 +167,7 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
 			case 'Shower Rain':
 				return (
 					<Image
-						style={{ width: '100px', height: '100px' }}
+						style={{ width: '75px', height: '75px' }}
 						src={HazeIcon}
 						alt='HazeIcon'
 					/>
@@ -167,7 +175,7 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
 			case 'Heavy Rain':
 				return (
 					<Image
-						style={{ width: '100px', height: '100px' }}
+						style={{ width: '75px', height: '75px' }}
 						src={HeavyRainIcon}
 						alt='HeavyRainIcon'
 					/>
@@ -175,7 +183,7 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
 			case 'Scattered Clouds':
 				return (
 					<Image
-						style={{ width: '100px', height: '100px' }}
+						style={{ width: '75px', height: '75px' }}
 						src={PartlyCloudyIcon}
 						alt='PartlyCloudyIcon'
 					/>
@@ -183,7 +191,7 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
 			case 'Broken Clouds':
 				return (
 					<Image
-						style={{ width: '100px', height: '100px' }}
+						style={{ width: '75px', height: '75px' }}
 						src={PartlyCloudyIcon}
 						alt='PartlyCloudyIcon'
 					/>
@@ -191,7 +199,7 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
 			case 'Overcast Clouds':
 				return (
 					<Image
-						style={{ width: '100px', height: '100px' }}
+						style={{ width: '75px', height: '75px' }}
 						src={PartlyCloudyIcon}
 						alt='PartlyCloudyIcon'
 					/>
@@ -199,7 +207,7 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
 			case 'Moderate Rain':
 				return (
 					<Image
-						style={{ width: '100px', height: '100px' }}
+						style={{ width: '75px', height: '75px' }}
 						src={PartlyCloudyIcon}
 						alt='PartlyCloudyIcon'
 					/>
@@ -207,7 +215,7 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
 			case 'Light Rain':
 				return (
 					<Image
-						style={{ width: '100px', height: '100px' }}
+						style={{ width: '75px', height: '75px' }}
 						src={PartlyCloudyIcon}
 						alt='PartlyCloudyIcon'
 					/>
@@ -215,7 +223,7 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
 			case 'Heavy Snow':
 				return (
 					<Image
-						style={{ width: '100px', height: '100px' }}
+						style={{ width: '75px', height: '75px' }}
 						src={SnowIcon}
 						alt='SnowIcon'
 					/>
@@ -223,7 +231,7 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
 			case 'Sleet':
 				return (
 					<Image
-						style={{ width: '100px', height: '100px' }}
+						style={{ width: '75px', height: '75px' }}
 						src={SleetIcon}
 						alt='SleetIcon'
 					/>
@@ -231,7 +239,7 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
 			case 'Partly Sunny':
 				return (
 					<Image
-						style={{ width: '100px', height: '100px' }}
+						style={{ width: '75px', height: '75px' }}
 						src={PartlyCloudyIcon}
 						alt='PartlyCloudyIcon'
 					/>
@@ -239,7 +247,7 @@ export default function WeatherIcon({ textDescription }: { textDescription: stri
 			default:
 				return (
 					<Image
-						style={{ width: '100px', height: '100px' }}
+						style={{ width: '75px', height: '75px' }}
 						src={SunnyIcon}
 						alt='SunnyIcon'
 					/>
--- a/src/components/WeatherModal/WeatherModal.tsx
+++ b/src/components/WeatherModal/WeatherModal.tsx
@@ -3,23 +3,13 @@ import { modalClasses } from 'styles';

 import { useCommonHooks, useWeatherAPI } from 'hooks';
 import { useEffect, useState } from 'react';
-import {
-	Area,
-	CartesianGrid,
-	ComposedChart,
-	Legend,
-	Line,
-	ResponsiveContainer,
-	Tooltip,
-	XAxis,
-	YAxis,
-} from 'recharts';
+
 import CurrentWeather from './CurrentWeather';
 import ExtendedForecast from './ExtendedForecast';
+import WeatherGraphs from './WeatherGraphs';

 export function WeatherModal({
 	current,
-	outlook,
 	extendedForecast,
 	closeWeatherModal,
 	weatherModalOpened,
@@ -40,30 +30,6 @@ export function WeatherModal({
 		y: currentLocation.y,
 	});
 	const [hourlyForecast, setHourlyForecast] = useState<any>([]);
-	const [sunset, setSunset] = useState(100);
-
-	function CustomTooltip({ payload, active, unit }: any) {
-		if (active) {
-			return (
-				<Stack
-					style={{
-						backgroundColor: 'var(--color-background)',
-						padding: '1rem',
-						borderRadius: '8px',
-					}}
-				>
-					{payload.map((item: any) => (
-						<Text
-							key={item.name}
-							size='sm'
-						>{`${item.name} - ${item.value}${item.unit}`}</Text>
-					))}
-				</Stack>
-			);
-		}
-
-		return null;
-	}

 	useEffect(() => {
 		if (hourly) {
@@ -71,18 +37,6 @@ export function WeatherModal({
 		}
 	}, [hourly]);

-	useEffect(() => {
-		if (hourlyForecast) {
-			hourlyForecast[0]?.isDaytime
-				? setSunset(
-						(hourlyForecast.findIndex((item: any) => item.isDaytime === false) / 12) *
-							100,
-					)
-				: setSunset(
-						(hourlyForecast.findIndex((item: any) => item.isDaytime === true) / 12) * 100,
-					);
-		}
-	}, [hourlyForecast]);
 	return (
 		<Modal.Root
 			fullScreen={isMobile}
@@ -126,94 +80,7 @@ export function WeatherModal({
 					<Center w={'100%'}>
 						<Stack w={'100%'}>
 							<CurrentWeather weather={current} />
-							<Stack
-								style={{
-									background: 'var(--color-search-background)',
-									padding: '.5rem',
-									borderRadius: '.5rem',
-								}}
-							>
-								<ResponsiveContainer width={'100%'} height={150}>
-									<ComposedChart data={hourlyForecast}>
-										<XAxis
-											type='category'
-											stroke={theme.primaryColor}
-											dataKey={(data: any) => {
-												return new Date(data.startTime).toLocaleTimeString('en-US', {
-													hour: 'numeric',
-													minute: 'numeric',
-												});
-											}}
-										/>
-										<YAxis
-											stroke={theme.primaryColor}
-											unit={'°F'}
-											dataKey={'temperature'}
-										/>
-										<CartesianGrid stroke='#f5f5f522' />
-										<Tooltip content={<CustomTooltip />} />
-										<Line
-											unit={'°F'}
-											type='monotone'
-											name='Temperature'
-											dataKey='temperature'
-											stroke={theme.primaryColor}
-											dot={{ stroke: theme.primaryColor, strokeWidth: 1 }}
-										/>
-										<Line
-											unit={'°F'}
-											type='monotone'
-											name='Dew Point'
-											dataKey={(data: any) => {
-												return (data.dewpoint.value * 9) / 5 + 32;
-											}}
-											stroke={theme.accentColor}
-											dot={{ stroke: theme.primaryColor, strokeWidth: 1 }}
-										/>
-										<Legend style={{ background: 'var(--color-search-background)' }} />
-									</ComposedChart>
-								</ResponsiveContainer>
-								<ResponsiveContainer width={'100%'} height={150}>
-									<ComposedChart data={hourlyForecast}>
-										<XAxis
-											type='category'
-											stroke={theme.primaryColor}
-											dataKey={(data: any) => {
-												return new Date(data.startTime).toLocaleTimeString('en-US', {
-													hour: 'numeric',
-													minute: 'numeric',
-												});
-											}}
-										/>
-										<YAxis stroke={theme.primaryColor} unit={'%'} domain={[0, 100]} />
-										<CartesianGrid stroke='#f5f5f522' />
-										<Tooltip content={<CustomTooltip />} />
-										<Area
-											unit={'%'}
-											type='monotone'
-											name='Precipitation'
-											dataKey={(data: any) => {
-												return data.probabilityOfPrecipitation.value;
-											}}
-											stroke={theme.primaryColor}
-											fill={theme.accentColor}
-											dot={{ stroke: theme.primaryColor, strokeWidth: 1 }}
-										/>
-										<Area
-											unit={'%'}
-											type='monotone'
-											name='Humidity'
-											dataKey={(data: any) => {
-												return data.relativeHumidity.value;
-											}}
-											stroke={theme.accentColor}
-											fill={theme.accentColor}
-											dot={{ stroke: theme.primaryColor, strokeWidth: 1 }}
-										/>
-										<Legend style={{ background: 'var(--color-search-background)' }} />
-									</ComposedChart>
-								</ResponsiveContainer>
-							</Stack>
+							<WeatherGraphs hourlyForecast={hourlyForecast} />
 							<ExtendedForecast forecast={extendedForecast} />
 						</Stack>
 					</Center>
--- a/src/hooks/useAPI.ts
+++ b/src/hooks/useAPI.ts
@@ -178,6 +178,25 @@ export function useWeatherAPI({
 	});
 }

+export function useSunStateAPI({ lat, lon }: { lat: number; lon: number }) {
+	const date = new Date();
+	const today = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
+	date.setDate(date.getDate() + 1);
+	const tomorrow = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
+	const url = `https://api.sunrisesunset.io/json?lat=${lat}&lng=${lon}&date_start=${today}&date_end=${tomorrow}`;
+	const callEndpoint = async () => {
+		const response = await fetch(url);
+		if (!response.ok) {
+			throw new Error(`${response.status} ${response.statusText}`);
+		}
+		return await response.json();
+	};
+	return useQuery({
+		queryKey: ['GET', url],
+		queryFn: () => callEndpoint(),
+	});
+}
+
 export function useOSMAPI({ address }: { address: string }) {
 	const url = `https://nominatim.openstreetmap.org/search?addressdetails=1&format=jsonv2&limit=1&q=${address?.replaceAll(' ', '+')}`;
 	const callEndpoint = async () => {
--- a/src/pages/homepage/components/Header/Header.tsx
+++ b/src/pages/homepage/components/Header/Header.tsx
@@ -29,8 +29,8 @@ function Header({

 	useEffect(() => {
 		setInterval(() => {
-			const nwDate = new Date();
-			setTime(nwDate);
+			const newDate = new Date();
+			setTime(newDate);
 		}, 1000);
 	}, []);

--- a/src/pages/homepage/components/SettingsButton.tsx
+++ b/src/pages/homepage/components/SettingsButton.tsx
@@ -86,9 +86,10 @@ function SettingsButton() {

 	return (
 		<>
-			{overlayOpened && <Overlay />}
+			{overlayOpened && <Overlay pos={'fixed'} />}
 			<Menu
 				classNames={menuClasses}
+				width={isMobile ? '98%' : '500px'}
 				withinPortal={false}
 				withArrow
 				shadow='md'
@@ -111,8 +112,7 @@ function SettingsButton() {
 									cursor: 'pointer',
 									position: 'absolute',
 									top: '.5rem',
-									right: isMobile ? undefined : '.5rem',
-									left: isMobile ? '.5rem' : undefined,
+									right: '.5rem',
 								}}
 							/>
 						</Tooltip>
@@ -142,15 +142,18 @@ function SettingsButton() {
 									placeholder='Pick a host...'
 									defaultValue={wolClientsData?.[0]?.hostname}
 									data={
-										wolClientsData?.map((wolClient: any) => {
-											return {
-												value: wolClient.hostname,
-												label: `${wolClient.hostname} (${wolClient.macAddress})`,
-												hostname: wolClient.hostname,
-												macAddress: wolClient.macAddress,
-											};
-										}) || []
+										wolClientsData
+											?.map((wolClient: any) => {
+												return {
+													value: wolClient.hostname,
+													label: `${wolClient.hostname} (${wolClient.macAddress})`,
+													hostname: wolClient.hostname,
+													macAddress: wolClient.macAddress,
+												};
+											})
+											.toSorted((a: any, b: any) => a.label.localeCompare(b.label)) || []
 									}
+									w='92%'
 									classNames={selectClasses}
 									className={selectClasses.default}
 									comboboxProps={{ withinPortal: false }}
@@ -225,10 +228,14 @@ function SettingsButton() {
 							classNames={stackClasses}
 						>
 							<Menu.Label>Filters</Menu.Label>
-							<Group>
+							<Group justify='space-between' px={'.5rem'}>
 								<MultiSelect
 									label='Apps'
-									data={categories ?? []}
+									data={
+										categories.toSorted((a: any, b: any) =>
+											a.label.localeCompare(b.label),
+										) ?? []
+									}
 									placeholder={
 										appFilter.length > 0
 											? appFilter.length === 1
@@ -245,7 +252,11 @@ function SettingsButton() {
 								/>
 								<MultiSelect
 									label='Bookmarks'
-									data={categories ?? []}
+									data={
+										categories.toSorted((a: any, b: any) =>
+											a.label.localeCompare(b.label),
+										) ?? []
+									}
 									placeholder={
 										bookmarkFilter.length > 0
 											? bookmarkFilter.length === 1
--- a/src/pages/settings/Settings.tsx
+++ b/src/pages/settings/Settings.tsx
@@ -47,23 +47,29 @@ export function Settings() {
 				className={tabClasses.settingsTabs}
 				classNames={tabClasses}
 			>
-				<Tabs.List>
-					<Tabs.Tab value='personalization'>
+				<Tabs.List style={{ justifyContent: 'space-between' }}>
+					<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='personalization'>
 						{isMobile ? <FiUser /> : 'Personal Info'}
 					</Tabs.Tab>
-					<Tabs.Tab value='messages'>{isMobile ? <FiMail /> : 'Messages'}</Tabs.Tab>
-					<Tabs.Tab value='applications'>
+					<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='messages'>
+						{isMobile ? <FiMail /> : 'Messages'}
+					</Tabs.Tab>
+					<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='applications'>
 						{isMobile ? <FiGlobe /> : 'Applications'}
 					</Tabs.Tab>
-					<Tabs.Tab value='bookmarks'>{isMobile ? <FiBookmark /> : 'Bookmarks'}</Tabs.Tab>
-					<Tabs.Tab value='bookmarksCategories'>
+					<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='bookmarks'>
+						{isMobile ? <FiBookmark /> : 'Bookmarks'}
+					</Tabs.Tab>
+					<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='bookmarksCategories'>
 						{isMobile ? <FiBook /> : 'Categories'}
 					</Tabs.Tab>
-					<Tabs.Tab value='themes'>{isMobile ? <FiEdit /> : 'Themes'}</Tabs.Tab>
-					<Tabs.Tab value='providers'>
+					<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='themes'>
+						{isMobile ? <FiEdit /> : 'Themes'}
+					</Tabs.Tab>
+					<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='providers'>
 						{isMobile ? <FiSearch /> : 'Search Providers'}
 					</Tabs.Tab>
-					<Tabs.Tab value='wolClients'>
+					<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='wolClients'>
 						{isMobile ? <FiMonitor /> : 'WoL Clients'}
 					</Tabs.Tab>
 				</Tabs.List>
--- a/src/pages/settings/components/ThemeModal.tsx
+++ b/src/pages/settings/components/ThemeModal.tsx
@@ -285,10 +285,18 @@ function ThemeModal({
 					</Group>
 					<Divider color='black' my='sm' />
 					<Group mt={'2rem'}>
-						<Button color={'green'} styles={{ label: { color: 'black' }}} onClick={handleSaveTheme}>
+						<Button
+							color={'green'}
+							styles={{ label: { color: 'black' } }}
+							onClick={handleSaveTheme}
+						>
 							Save
 						</Button>
-						<Button color={'red'} styles={{ label: { color: 'black' }}} onClick={handleClose}>
+						<Button
+							color={'red'}
+							styles={{ label: { color: 'black' } }}
+							onClick={handleClose}
+						>
 							Cancel
 						</Button>
 					</Group>
--- a/src/styles/Menu.module.css
+++ b/src/styles/Menu.module.css
@@ -1,6 +1,5 @@
 .dropdown {
    color: var(--color-text-pri);
-    width: 500px !important;
    border-color: var(--color-text-pri) !important;
 }
 .item {
--- a/src/styles/MultiSelect.module.css
+++ b/src/styles/MultiSelect.module.css
@@ -57,5 +57,5 @@

 .root {

-    width: 180px !important;
+    width: 45% !important;
 }
--- a/src/styles/Select.module.css
+++ b/src/styles/Select.module.css
@@ -44,8 +44,3 @@
 .dropdown {
    background-color: var(--color-background);
 }
-
-.root {
-
-    width: 180px;
-}