diff --git a/jsconfig.json b/jsconfig.json
index 51f08238..645a04b4 100644
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "module": "commonjs",
-    "target": "es6",
+    "target": "es6"
   },
-  "exclude": ["node_modules"],
+  "exclude": ["node_modules"]
 }
diff --git a/package.json b/package.json
index 27c45dca..ec198941 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
     "@muetab/react-color-gradient-picker": "0.1.2",
     "@muetab/react-sortable-hoc": "^2.0.1",
     "@mui/material": "5.15.7",
-    "@sentry/react": "^7.100.0",
+    "@sentry/react": "^7.100.1",
     "embla-carousel-autoplay": "8.0.0-rc22",
     "embla-carousel-react": "8.0.0-rc22",
     "fast-blurhash": "^1.1.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index dd40e1ad..245dfcf0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,9 +1,5 @@
 lockfileVersion: '6.0'
 
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false
-
 dependencies:
   '@eartharoid/i18n':
     specifier: 1.2.1
@@ -33,8 +29,8 @@ dependencies:
     specifier: 5.15.7
     version: 5.15.7(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react-dom@18.2.0)(react@18.2.0)
   '@sentry/react':
-    specifier: ^7.100.0
-    version: 7.100.0(react@18.2.0)
+    specifier: ^7.100.1
+    version: 7.100.1(react@18.2.0)
   embla-carousel-autoplay:
     specifier: 8.0.0-rc22
     version: 8.0.0-rc22(embla-carousel@8.0.0-rc22)
@@ -69,7 +65,7 @@ dependencies:
 devDependencies:
   '@commitlint/cli':
     specifier: ^18.6.0
-    version: 18.6.0(@types/node@20.11.7)(typescript@5.3.3)
+    version: 18.6.0(@types/node@20.11.16)(typescript@5.3.3)
   '@commitlint/config-conventional':
     specifier: ^18.6.0
     version: 18.6.0
@@ -105,13 +101,13 @@ devDependencies:
     version: 16.2.1(typescript@5.3.3)
   stylelint-config-standard-scss:
     specifier: ^13.0.0
-    version: 13.0.0(postcss@8.4.33)(stylelint@16.2.1)
+    version: 13.0.0(postcss@8.4.35)(stylelint@16.2.1)
   stylelint-scss:
     specifier: ^6.1.0
     version: 6.1.0(stylelint@16.2.1)
   vite:
     specifier: 5.0.12
-    version: 5.0.12(@types/node@20.11.7)(sass@1.70.0)
+    version: 5.0.12(@types/node@20.11.16)(sass@1.70.0)
   vite-plugin-progress:
     specifier: ^0.0.7
     version: 0.0.7(vite@5.0.12)
@@ -166,8 +162,8 @@ packages:
       - supports-color
     dev: true
 
-  /@babel/eslint-parser@7.23.9(@babel/core@7.23.9)(eslint@8.56.0):
-    resolution: {integrity: sha512-xPndlO7qxiJbn0ATvfXQBjCS7qApc9xmKHArgI/FTEFxXas5dnjC/VqM37lfZun9dclRYcn+YQAr6uDFy0bB2g==}
+  /@babel/eslint-parser@7.23.10(@babel/core@7.23.9)(eslint@8.56.0):
+    resolution: {integrity: sha512-3wSYDPZVnhseRnxRJH6ZVTNknBz76AEnyC+AYYhasjP3Yy23qz0ERR7Fcd2SHmYuSFJ2kY9gaaDd3vyqU09eSw==}
     engines: {node: ^10.13.0 || ^12.13.0 || >=14.0.0}
     peerDependencies:
       '@babel/core': ^7.11.0
@@ -210,13 +206,13 @@ packages:
     dependencies:
       '@babel/compat-data': 7.23.5
       '@babel/helper-validator-option': 7.23.5
-      browserslist: 4.22.2
+      browserslist: 4.22.3
       lru-cache: 5.1.1
       semver: 6.3.1
     dev: true
 
-  /@babel/helper-create-class-features-plugin@7.23.9(@babel/core@7.23.9):
-    resolution: {integrity: sha512-B2L9neXTIyPQoXDm+NtovPvG6VOLWnaXu3BIeVDWwdKFgG30oNa6CqVGiJPDWQwIAK49t9gnQI9c6K6RzabiKw==}
+  /@babel/helper-create-class-features-plugin@7.23.10(@babel/core@7.23.9):
+    resolution: {integrity: sha512-2XpP2XhkXzgxecPNEEK8Vz8Asj9aRxt08oKOqtiZoqV2UGZ5T+EkyP9sXQ9nwMxBIG34a7jmasVqoMop7VdPUw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
@@ -454,7 +450,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.23.9
-      '@babel/helper-create-class-features-plugin': 7.23.9(@babel/core@7.23.9)
+      '@babel/helper-create-class-features-plugin': 7.23.10(@babel/core@7.23.9)
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
@@ -465,7 +461,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.23.9
-      '@babel/helper-create-class-features-plugin': 7.23.9(@babel/core@7.23.9)
+      '@babel/helper-create-class-features-plugin': 7.23.10(@babel/core@7.23.9)
       '@babel/helper-plugin-utils': 7.22.5
       '@babel/plugin-syntax-decorators': 7.23.3(@babel/core@7.23.9)
     dev: true
@@ -515,7 +511,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.23.9
-      '@babel/helper-create-class-features-plugin': 7.23.9(@babel/core@7.23.9)
+      '@babel/helper-create-class-features-plugin': 7.23.10(@babel/core@7.23.9)
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
@@ -537,7 +533,7 @@ packages:
     dependencies:
       '@babel/core': 7.23.9
       '@babel/helper-annotate-as-pure': 7.22.5
-      '@babel/helper-create-class-features-plugin': 7.23.9(@babel/core@7.23.9)
+      '@babel/helper-create-class-features-plugin': 7.23.10(@babel/core@7.23.9)
       '@babel/helper-plugin-utils': 7.22.5
       '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.23.9)
     dev: true
@@ -813,7 +809,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.23.9
-      '@babel/helper-create-class-features-plugin': 7.23.9(@babel/core@7.23.9)
+      '@babel/helper-create-class-features-plugin': 7.23.10(@babel/core@7.23.9)
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
@@ -824,7 +820,7 @@ packages:
       '@babel/core': ^7.12.0
     dependencies:
       '@babel/core': 7.23.9
-      '@babel/helper-create-class-features-plugin': 7.23.9(@babel/core@7.23.9)
+      '@babel/helper-create-class-features-plugin': 7.23.10(@babel/core@7.23.9)
       '@babel/helper-plugin-utils': 7.22.5
       '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.23.9)
     dev: true
@@ -1152,7 +1148,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.23.9
-      '@babel/helper-create-class-features-plugin': 7.23.9(@babel/core@7.23.9)
+      '@babel/helper-create-class-features-plugin': 7.23.10(@babel/core@7.23.9)
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
@@ -1164,7 +1160,7 @@ packages:
     dependencies:
       '@babel/core': 7.23.9
       '@babel/helper-annotate-as-pure': 7.22.5
-      '@babel/helper-create-class-features-plugin': 7.23.9(@babel/core@7.23.9)
+      '@babel/helper-create-class-features-plugin': 7.23.10(@babel/core@7.23.9)
       '@babel/helper-plugin-utils': 7.22.5
       '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.23.9)
     dev: true
@@ -1321,7 +1317,7 @@ packages:
     dependencies:
       '@babel/core': 7.23.9
       '@babel/helper-annotate-as-pure': 7.22.5
-      '@babel/helper-create-class-features-plugin': 7.23.9(@babel/core@7.23.9)
+      '@babel/helper-create-class-features-plugin': 7.23.10(@babel/core@7.23.9)
       '@babel/helper-plugin-utils': 7.22.5
       '@babel/plugin-syntax-typescript': 7.23.3(@babel/core@7.23.9)
     dev: true
@@ -1545,14 +1541,14 @@ packages:
       '@babel/helper-validator-identifier': 7.22.20
       to-fast-properties: 2.0.0
 
-  /@commitlint/cli@18.6.0(@types/node@20.11.7)(typescript@5.3.3):
+  /@commitlint/cli@18.6.0(@types/node@20.11.16)(typescript@5.3.3):
     resolution: {integrity: sha512-FiH23cr9QG8VdfbmvJJZmdfHGVMCouOOAzoXZ3Cd7czGC52RbycwNt8YCI7SA69pAl+t30vh8LMaO/N+kcel6w==}
     engines: {node: '>=v18'}
     hasBin: true
     dependencies:
       '@commitlint/format': 18.6.0
       '@commitlint/lint': 18.6.0
-      '@commitlint/load': 18.6.0(@types/node@20.11.7)(typescript@5.3.3)
+      '@commitlint/load': 18.6.0(@types/node@20.11.16)(typescript@5.3.3)
       '@commitlint/read': 18.6.0
       '@commitlint/types': 18.6.0
       execa: 5.1.1
@@ -1623,7 +1619,7 @@ packages:
       '@commitlint/types': 18.6.0
     dev: true
 
-  /@commitlint/load@18.6.0(@types/node@20.11.7)(typescript@5.3.3):
+  /@commitlint/load@18.6.0(@types/node@20.11.16)(typescript@5.3.3):
     resolution: {integrity: sha512-RRssj7TmzT0bowoEKlgwg8uQ7ORXWkw7lYLsZZBMi9aInsJuGNLNWcMxJxRZbwxG3jkCidGUg85WmqJvRjsaDA==}
     engines: {node: '>=v18'}
     dependencies:
@@ -1633,7 +1629,7 @@ packages:
       '@commitlint/types': 18.6.0
       chalk: 4.1.2
       cosmiconfig: 8.3.6(typescript@5.3.3)
-      cosmiconfig-typescript-loader: 5.0.0(@types/node@20.11.7)(cosmiconfig@8.3.6)(typescript@5.3.3)
+      cosmiconfig-typescript-loader: 5.0.0(@types/node@20.11.16)(cosmiconfig@8.3.6)(typescript@5.3.3)
       lodash.isplainobject: 4.0.6
       lodash.merge: 4.6.2
       lodash.uniq: 4.5.0
@@ -2095,7 +2091,7 @@ packages:
       debug: 4.3.4
       espree: 9.6.1
       globals: 13.24.0
-      ignore: 5.3.0
+      ignore: 5.3.1
       import-fresh: 3.3.0
       js-yaml: 4.1.0
       minimatch: 3.1.2
@@ -2245,7 +2241,7 @@ packages:
       '@babel/runtime': 7.23.9
       '@floating-ui/react-dom': 2.0.8(react-dom@18.2.0)(react@18.2.0)
       '@mui/types': 7.2.13
-      '@mui/utils': 5.15.7(react@18.2.0)
+      '@mui/utils': 5.15.8(react@18.2.0)
       '@popperjs/core': 2.11.8
       clsx: 2.1.0
       prop-types: 15.8.1
@@ -2253,8 +2249,8 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /@mui/core-downloads-tracker@5.15.7:
-    resolution: {integrity: sha512-AuF+Wo2Mp/edaO6vJnWjg+gj4tzEz5ChMZnAQpc22DXpSvM8ddgGcZvM7D7F99pIBoSv8ub+Iz0viL+yuGVmhg==}
+  /@mui/core-downloads-tracker@5.15.8:
+    resolution: {integrity: sha512-W6R1dZJgbYfLmQKf7Es2WUw0pkDkEVUf2jA22DYu0JOa9M3pjvOqoC9HgOPGNNJTu6SCWLSWh3euv1Jn2NmeQA==}
     dev: false
 
   /@mui/material@5.15.7(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react-dom@18.2.0)(react@18.2.0):
@@ -2278,10 +2274,10 @@ packages:
       '@emotion/react': 11.11.3(react@18.2.0)
       '@emotion/styled': 11.11.0(@emotion/react@11.11.3)(react@18.2.0)
       '@mui/base': 5.0.0-beta.34(react-dom@18.2.0)(react@18.2.0)
-      '@mui/core-downloads-tracker': 5.15.7
-      '@mui/system': 5.15.7(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react@18.2.0)
+      '@mui/core-downloads-tracker': 5.15.8
+      '@mui/system': 5.15.8(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react@18.2.0)
       '@mui/types': 7.2.13
-      '@mui/utils': 5.15.7(react@18.2.0)
+      '@mui/utils': 5.15.8(react@18.2.0)
       '@types/react-transition-group': 4.4.10
       clsx: 2.1.0
       csstype: 3.1.3
@@ -2292,8 +2288,8 @@ packages:
       react-transition-group: 4.4.5(react-dom@18.2.0)(react@18.2.0)
     dev: false
 
-  /@mui/private-theming@5.15.7(react@18.2.0):
-    resolution: {integrity: sha512-bcEeeXm7GyQCQvN9dwo8htGv8/6tP05p0i02Z7GXm5EoDPlBcqTNGugsjNLoGq6B0SsdyanjJGw0Jw00o1yAOA==}
+  /@mui/private-theming@5.15.8(react@18.2.0):
+    resolution: {integrity: sha512-HMDPO416iMZPqs8nGUL3GJMDNpJtE1Uefw/Aw+zTKJHX5JnT+Bms41e2065BUT/zR5dYcKjFP4gQMwW5QX7nvA==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
       '@types/react': ^17.0.0 || ^18.0.0
@@ -2303,13 +2299,13 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.23.9
-      '@mui/utils': 5.15.7(react@18.2.0)
+      '@mui/utils': 5.15.8(react@18.2.0)
       prop-types: 15.8.1
       react: 18.2.0
     dev: false
 
-  /@mui/styled-engine@5.15.7(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react@18.2.0):
-    resolution: {integrity: sha512-ixSdslOjK1kzdGcxqj7O3d14By/LPQ7EWknsViQ8RaeT863EAQemS+zvUJDTcOpkfJh6q6gPnYMIb2TJCs9eWA==}
+  /@mui/styled-engine@5.15.8(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react@18.2.0):
+    resolution: {integrity: sha512-31ZKPGsS0OiSwuzi8RWoTiWRdUWXPRiOQkyG9bRYX/zvoYeBXEdbsLEgbryug5mVRsPpvwbH5q/i/t6MkjQ71g==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
       '@emotion/react': ^11.4.1
@@ -2330,8 +2326,8 @@ packages:
       react: 18.2.0
     dev: false
 
-  /@mui/system@5.15.7(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react@18.2.0):
-    resolution: {integrity: sha512-9alZ4/dLxsTwUOdqakgzxiL5YW6ntqj0CfzWImgWnBMTZhgGcPsbYpBLniNkkk7/jptma4/bykWXHwju/ls/pg==}
+  /@mui/system@5.15.8(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react@18.2.0):
+    resolution: {integrity: sha512-BUMJvlz1UqIqDPyrvc+MwjOUkWKskUPAOUuRh2KMAworiXuuUmtIivxSfdGll2ex6RHSylu4yc5dJZByOI8EcQ==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
       '@emotion/react': ^11.5.0
@@ -2349,10 +2345,10 @@ packages:
       '@babel/runtime': 7.23.9
       '@emotion/react': 11.11.3(react@18.2.0)
       '@emotion/styled': 11.11.0(@emotion/react@11.11.3)(react@18.2.0)
-      '@mui/private-theming': 5.15.7(react@18.2.0)
-      '@mui/styled-engine': 5.15.7(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react@18.2.0)
+      '@mui/private-theming': 5.15.8(react@18.2.0)
+      '@mui/styled-engine': 5.15.8(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(react@18.2.0)
       '@mui/types': 7.2.13
-      '@mui/utils': 5.15.7(react@18.2.0)
+      '@mui/utils': 5.15.8(react@18.2.0)
       clsx: 2.1.0
       csstype: 3.1.3
       prop-types: 15.8.1
@@ -2368,8 +2364,8 @@ packages:
         optional: true
     dev: false
 
-  /@mui/utils@5.15.7(react@18.2.0):
-    resolution: {integrity: sha512-8qhsxQRNV6aEOjjSk6YQIYJxkF5klhj8oG1FEEU4z6HV78TjNqRxMP08QGcdsibEbez+nihAaz6vu83b4XqbAg==}
+  /@mui/utils@5.15.8(react@18.2.0):
+    resolution: {integrity: sha512-Q6Z/xSxi1Z6xQ5Qj9p4ZTHudwfrrwFALtU6H1O222pXudg9Qm0zHdiwJQiHT9L6jMIN78ZujEfGHserMoHUrQw==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
       '@types/react': ^17.0.0 || ^18.0.0
@@ -2409,7 +2405,7 @@ packages:
     engines: {node: '>= 8'}
     dependencies:
       '@nodelib/fs.scandir': 2.1.5
-      fastq: 1.16.0
+      fastq: 1.17.1
     dev: true
 
   /@pkgjs/parseargs@0.11.0:
@@ -2531,93 +2527,93 @@ packages:
     resolution: {integrity: sha512-RbhOOTCNoCrbfkRyoXODZp75MlpiHMgbE5MEBZAnnnLyQNgrigEj4p0lzsMDyc1zVsJDLrivB58tgg3emX0eEA==}
     dev: true
 
-  /@sentry-internal/feedback@7.100.0:
-    resolution: {integrity: sha512-SMW2QhNKOuSjw8oPtvryDlJjiwrNyAKljbgtMk057os/fd8QMp38Yt1ImqLCM4B2rTQZ6REJ6hRGRTRcfqoG+w==}
+  /@sentry-internal/feedback@7.100.1:
+    resolution: {integrity: sha512-yqcRVnjf+qS+tC4NxOKLJOaSJ+csHmh/dHUzvCTkf5rLsplwXYRnny2r0tqGTQ4tuXMxwgSMKPYwicg81P+xuw==}
     engines: {node: '>=12'}
     dependencies:
-      '@sentry/core': 7.100.0
-      '@sentry/types': 7.100.0
-      '@sentry/utils': 7.100.0
+      '@sentry/core': 7.100.1
+      '@sentry/types': 7.100.1
+      '@sentry/utils': 7.100.1
     dev: false
 
-  /@sentry-internal/replay-canvas@7.100.0:
-    resolution: {integrity: sha512-DePinj5IgNiC4RZv0yX0DLccMZebfFdKl3zHwDeLBeZqtMz9VrPzchv57IWP+5MI1+iuOn+WOg4oTNBUG6hFRw==}
+  /@sentry-internal/replay-canvas@7.100.1:
+    resolution: {integrity: sha512-TnqxqJGhbFhhYRhTG2WLFer+lVieV7mNGeIxFBiw1L4kuj8KGl+C0sknssKyZSRVJFSahhHIosHJGRMkkD//7g==}
     engines: {node: '>=12'}
     dependencies:
-      '@sentry/core': 7.100.0
-      '@sentry/replay': 7.100.0
-      '@sentry/types': 7.100.0
-      '@sentry/utils': 7.100.0
+      '@sentry/core': 7.100.1
+      '@sentry/replay': 7.100.1
+      '@sentry/types': 7.100.1
+      '@sentry/utils': 7.100.1
     dev: false
 
-  /@sentry-internal/tracing@7.100.0:
-    resolution: {integrity: sha512-qf4W1STXky9WOQYoPSw2AmCBDK4FzvAyq5yeD2sLU7OCUEfbRUcN0lQljUvmWRKv/jTIAyeU5icDLJPZuR50nA==}
+  /@sentry-internal/tracing@7.100.1:
+    resolution: {integrity: sha512-+u9RRf5eL3StiyiRyAHZmdkAR7GTSGx4Mt4Lmi5NEtCcWlTGZ1QgW2r8ZbhouVmTiJkjhQgYCyej3cojtazeJg==}
     engines: {node: '>=8'}
     dependencies:
-      '@sentry/core': 7.100.0
-      '@sentry/types': 7.100.0
-      '@sentry/utils': 7.100.0
+      '@sentry/core': 7.100.1
+      '@sentry/types': 7.100.1
+      '@sentry/utils': 7.100.1
     dev: false
 
-  /@sentry/browser@7.100.0:
-    resolution: {integrity: sha512-XpM0jEVe6DJWXjMSOjtJxsSNR/XnJKrlcuyoI4Re3qLG+noEF5QLc0r3VJkySXPRFnmdW05sLswQ6a/n9Sijmg==}
+  /@sentry/browser@7.100.1:
+    resolution: {integrity: sha512-IxHQ08ixf0bmaWpe4yt1J4UUsOpg02fxax9z3tOQYXw5MSzz5pDXn8M8DFUVJB3wWuyXhHXTub9yD3VIP9fnoA==}
     engines: {node: '>=8'}
     dependencies:
-      '@sentry-internal/feedback': 7.100.0
-      '@sentry-internal/replay-canvas': 7.100.0
-      '@sentry-internal/tracing': 7.100.0
-      '@sentry/core': 7.100.0
-      '@sentry/replay': 7.100.0
-      '@sentry/types': 7.100.0
-      '@sentry/utils': 7.100.0
+      '@sentry-internal/feedback': 7.100.1
+      '@sentry-internal/replay-canvas': 7.100.1
+      '@sentry-internal/tracing': 7.100.1
+      '@sentry/core': 7.100.1
+      '@sentry/replay': 7.100.1
+      '@sentry/types': 7.100.1
+      '@sentry/utils': 7.100.1
     dev: false
 
-  /@sentry/core@7.100.0:
-    resolution: {integrity: sha512-eWRPuP0Zdj4a2F7SybqNjf13LGOVgGwvW6sojweQp9oxGAfCPp/EMDGBhlpYbMJeLbzmqzJ4ZFHIedaiEC+7kg==}
+  /@sentry/core@7.100.1:
+    resolution: {integrity: sha512-f+ItUge/o9AjlveQq0ZUbQauKlPH1FIJbC1TRaYLJ4KNfOdrsh8yZ29RmWv0cFJ/e+FGTr603gWpRPObF5rM8Q==}
     engines: {node: '>=8'}
     dependencies:
-      '@sentry/types': 7.100.0
-      '@sentry/utils': 7.100.0
+      '@sentry/types': 7.100.1
+      '@sentry/utils': 7.100.1
     dev: false
 
-  /@sentry/react@7.100.0(react@18.2.0):
-    resolution: {integrity: sha512-IveXfTHUx9/fk4VvIL3htfmU4rynYHl+7R44UExbKcLOmUffgi6FscmI1otdd3tQvTE0OH85vCP6+ZR6kQgHQw==}
+  /@sentry/react@7.100.1(react@18.2.0):
+    resolution: {integrity: sha512-EdrBtrXVLK2LSx4Rvz/nQP7HZUZQmr+t3GHV8436RAhF6vs5mntACVMBoQJRWiUvtZ1iRo3rIsIdah7DLiFPgQ==}
     engines: {node: '>=8'}
     peerDependencies:
       react: 15.x || 16.x || 17.x || 18.x
     dependencies:
-      '@sentry/browser': 7.100.0
-      '@sentry/core': 7.100.0
-      '@sentry/types': 7.100.0
-      '@sentry/utils': 7.100.0
+      '@sentry/browser': 7.100.1
+      '@sentry/core': 7.100.1
+      '@sentry/types': 7.100.1
+      '@sentry/utils': 7.100.1
       hoist-non-react-statics: 3.3.2
       react: 18.2.0
     dev: false
 
-  /@sentry/replay@7.100.0:
-    resolution: {integrity: sha512-6Yo56J+x+eedaMXri8pPlFxXOofnSXVdsUuFj+kJ7lC/qHrwIbgC5g1ONEK/WlYwpVH4gA0aNnCa5AOkMu+ZTg==}
+  /@sentry/replay@7.100.1:
+    resolution: {integrity: sha512-B1NFjzGEFaqejxBRdUyEzH8ChXc2kfiqlA/W/Lg0aoWIl2/7nuMk+l4ld9gW5F5bIAXDTVd5vYltb1lWEbpr7w==}
     engines: {node: '>=12'}
     dependencies:
-      '@sentry-internal/tracing': 7.100.0
-      '@sentry/core': 7.100.0
-      '@sentry/types': 7.100.0
-      '@sentry/utils': 7.100.0
+      '@sentry-internal/tracing': 7.100.1
+      '@sentry/core': 7.100.1
+      '@sentry/types': 7.100.1
+      '@sentry/utils': 7.100.1
     dev: false
 
-  /@sentry/types@7.100.0:
-    resolution: {integrity: sha512-c+RHwZwpKeBk7h8sUX4nQcelxBz8ViCojifnbEe3tcn8O15HOLvZqRKgLLOiff3MoErxiv4oxs0sPbEFRm/IvA==}
+  /@sentry/types@7.100.1:
+    resolution: {integrity: sha512-fLM+LedHuKzOd8IhXBqaQuym+AA519MGjeczBa5kGakes/BbAsUMwsNfjsKQedp7Kh44RgYF99jwoRPK2oDrXw==}
     engines: {node: '>=8'}
     dev: false
 
-  /@sentry/utils@7.100.0:
-    resolution: {integrity: sha512-LAhZMEGq3C125prZN/ShqeXpRfdfgJkl9RAKjfq8cmMFsF7nsF72dEHZgIwrZ0lgNmtaWAB83AwJcyN83RwOxQ==}
+  /@sentry/utils@7.100.1:
+    resolution: {integrity: sha512-Ve6dXr1o6xiBe3VCoJgiutmBKrugryI65EZAbYto5XI+t+PjiLLf9wXtEMF24ZrwImo4Lv3E9Uqza+fWkEbw6A==}
     engines: {node: '>=8'}
     dependencies:
-      '@sentry/types': 7.100.0
+      '@sentry/types': 7.100.1
     dev: false
 
-  /@swc/core-darwin-arm64@1.3.107:
-    resolution: {integrity: sha512-47tD/5vSXWxPd0j/ZllyQUg4bqalbQTsmqSw0J4dDdS82MWqCAwUErUrAZPRjBkjNQ6Kmrf5rpCWaGTtPw+ngw==}
+  /@swc/core-darwin-arm64@1.4.0:
+    resolution: {integrity: sha512-UTJ/Vz+s7Pagef6HmufWt6Rs0aUu+EJF4Pzuwvr7JQQ5b1DZeAAUeUtkUTFx/PvCbM8Xfw4XdKBUZfrIKCfW8A==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [darwin]
@@ -2625,8 +2621,8 @@ packages:
     dev: true
     optional: true
 
-  /@swc/core-darwin-x64@1.3.107:
-    resolution: {integrity: sha512-hwiLJ2ulNkBGAh1m1eTfeY1417OAYbRGcb/iGsJ+LuVLvKAhU/itzsl535CvcwAlt2LayeCFfcI8gdeOLeZa9A==}
+  /@swc/core-darwin-x64@1.4.0:
+    resolution: {integrity: sha512-f8v58u2GsGak8EtZFN9guXqE0Ep10Suny6xriaW2d8FGqESPyNrnBzli3aqkSeQk5gGqu2zJ7WiiKp3XoUOidA==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [darwin]
@@ -2634,8 +2630,8 @@ packages:
     dev: true
     optional: true
 
-  /@swc/core-linux-arm-gnueabihf@1.3.107:
-    resolution: {integrity: sha512-I2wzcC0KXqh0OwymCmYwNRgZ9nxX7DWnOOStJXV3pS0uB83TXAkmqd7wvMBuIl9qu4Hfomi9aDM7IlEEn9tumQ==}
+  /@swc/core-linux-arm-gnueabihf@1.4.0:
+    resolution: {integrity: sha512-q2KAkBzmPcTnRij/Y1fgHCKAGevUX/H4uUESrw1J5gmUg9Qip6onKV80lTumA1/aooGJ18LOsB31qdbwmZk9OA==}
     engines: {node: '>=10'}
     cpu: [arm]
     os: [linux]
@@ -2643,8 +2639,8 @@ packages:
     dev: true
     optional: true
 
-  /@swc/core-linux-arm64-gnu@1.3.107:
-    resolution: {integrity: sha512-HWgnn7JORYlOYnGsdunpSF8A+BCZKPLzLtEUA27/M/ZuANcMZabKL9Zurt7XQXq888uJFAt98Gy+59PU90aHKg==}
+  /@swc/core-linux-arm64-gnu@1.4.0:
+    resolution: {integrity: sha512-SknGu96W0mzHtLHWm+62fk5+Omp9fMPFO7AWyGFmz2tr8EgRRXtTSrBUnWhAbgcalnhen48GsvtMdxf1KNputg==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [linux]
@@ -2652,8 +2648,8 @@ packages:
     dev: true
     optional: true
 
-  /@swc/core-linux-arm64-musl@1.3.107:
-    resolution: {integrity: sha512-vfPF74cWfAm8hyhS8yvYI94ucMHIo8xIYU+oFOW9uvDlGQRgnUf/6DEVbLyt/3yfX5723Ln57U8uiMALbX5Pyw==}
+  /@swc/core-linux-arm64-musl@1.4.0:
+    resolution: {integrity: sha512-/k3TDvpBRMDNskHooNN1KqwUhcwkfBlIYxRTnJvsfT2C7My4pffR+4KXmt0IKynlTTbCdlU/4jgX4801FSuliw==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [linux]
@@ -2661,8 +2657,8 @@ packages:
     dev: true
     optional: true
 
-  /@swc/core-linux-x64-gnu@1.3.107:
-    resolution: {integrity: sha512-uBVNhIg0ip8rH9OnOsCARUFZ3Mq3tbPHxtmWk9uAa5u8jQwGWeBx5+nTHpDOVd3YxKb6+5xDEI/edeeLpha/9g==}
+  /@swc/core-linux-x64-gnu@1.4.0:
+    resolution: {integrity: sha512-GYsTMvNt5+WTVlwwQzOOWsPMw6P/F41u5PGHWmfev8Nd4QJ1h3rWPySKk4mV42IJwH9MgQCVSl3ygwNqwl6kFg==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [linux]
@@ -2670,8 +2666,8 @@ packages:
     dev: true
     optional: true
 
-  /@swc/core-linux-x64-musl@1.3.107:
-    resolution: {integrity: sha512-mvACkUvzSIB12q1H5JtabWATbk3AG+pQgXEN95AmEX2ZA5gbP9+B+mijsg7Sd/3tboHr7ZHLz/q3SHTvdFJrEw==}
+  /@swc/core-linux-x64-musl@1.4.0:
+    resolution: {integrity: sha512-jGVPdM/VwF7kK/uYRW5N6FwzKf/FnDjGIR3RPvQokjYJy7Auk+3Oj21C0Jev7sIT9RYnO/TrFEoEozKeD/z2Qw==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [linux]
@@ -2679,8 +2675,8 @@ packages:
     dev: true
     optional: true
 
-  /@swc/core-win32-arm64-msvc@1.3.107:
-    resolution: {integrity: sha512-J3P14Ngy/1qtapzbguEH41kY109t6DFxfbK4Ntz9dOWNuVY3o9/RTB841ctnJk0ZHEG+BjfCJjsD2n8H5HcaOA==}
+  /@swc/core-win32-arm64-msvc@1.4.0:
+    resolution: {integrity: sha512-biHYm1AronEKlt47O/H8sSOBM2BKXMmWT+ApvlxUw50m1RGNnVnE0bgY7tylFuuSiWyXsQPJbmUV708JqORXVg==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [win32]
@@ -2688,8 +2684,8 @@ packages:
     dev: true
     optional: true
 
-  /@swc/core-win32-ia32-msvc@1.3.107:
-    resolution: {integrity: sha512-ZBUtgyjTHlz8TPJh7kfwwwFma+ktr6OccB1oXC8fMSopD0AxVnQasgun3l3099wIsAB9eEsJDQ/3lDkOLs1gBA==}
+  /@swc/core-win32-ia32-msvc@1.4.0:
+    resolution: {integrity: sha512-TL5L2tFQb19kJwv6+elToGBj74QXCn9j+hZfwQatvZEJRA5rDK16eH6oAE751dGUArhnWlW3Vj65hViPvTuycw==}
     engines: {node: '>=10'}
     cpu: [ia32]
     os: [win32]
@@ -2697,8 +2693,8 @@ packages:
     dev: true
     optional: true
 
-  /@swc/core-win32-x64-msvc@1.3.107:
-    resolution: {integrity: sha512-Eyzo2XRqWOxqhE1gk9h7LWmUf4Bp4Xn2Ttb0ayAXFp6YSTxQIThXcT9kipXZqcpxcmDwoq8iWbbf2P8XL743EA==}
+  /@swc/core-win32-x64-msvc@1.4.0:
+    resolution: {integrity: sha512-e2xVezU7XZ2Stzn4i7TOQe2Kn84oYdG0M3A7XI7oTdcpsKCcKwgiMoroiAhqCv+iN20KNqhnWwJiUiTj/qN5AA==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [win32]
@@ -2706,8 +2702,8 @@ packages:
     dev: true
     optional: true
 
-  /@swc/core@1.3.107:
-    resolution: {integrity: sha512-zKhqDyFcTsyLIYK1iEmavljZnf4CCor5pF52UzLAz4B6Nu/4GLU+2LQVAf+oRHjusG39PTPjd2AlRT3f3QWfsQ==}
+  /@swc/core@1.4.0:
+    resolution: {integrity: sha512-wc5DMI5BJftnK0Fyx9SNJKkA0+BZSJQx8430yutWmsILkHMBD3Yd9GhlMaxasab9RhgKqZp7Ht30hUYO5ZDvQg==}
     engines: {node: '>=10'}
     requiresBuild: true
     peerDependencies:
@@ -2716,23 +2712,23 @@ packages:
       '@swc/helpers':
         optional: true
     dependencies:
-      '@swc/counter': 0.1.2
+      '@swc/counter': 0.1.3
       '@swc/types': 0.1.5
     optionalDependencies:
-      '@swc/core-darwin-arm64': 1.3.107
-      '@swc/core-darwin-x64': 1.3.107
-      '@swc/core-linux-arm-gnueabihf': 1.3.107
-      '@swc/core-linux-arm64-gnu': 1.3.107
-      '@swc/core-linux-arm64-musl': 1.3.107
-      '@swc/core-linux-x64-gnu': 1.3.107
-      '@swc/core-linux-x64-musl': 1.3.107
-      '@swc/core-win32-arm64-msvc': 1.3.107
-      '@swc/core-win32-ia32-msvc': 1.3.107
-      '@swc/core-win32-x64-msvc': 1.3.107
+      '@swc/core-darwin-arm64': 1.4.0
+      '@swc/core-darwin-x64': 1.4.0
+      '@swc/core-linux-arm-gnueabihf': 1.4.0
+      '@swc/core-linux-arm64-gnu': 1.4.0
+      '@swc/core-linux-arm64-musl': 1.4.0
+      '@swc/core-linux-x64-gnu': 1.4.0
+      '@swc/core-linux-x64-musl': 1.4.0
+      '@swc/core-win32-arm64-msvc': 1.4.0
+      '@swc/core-win32-ia32-msvc': 1.4.0
+      '@swc/core-win32-x64-msvc': 1.4.0
     dev: true
 
-  /@swc/counter@0.1.2:
-    resolution: {integrity: sha512-9F4ys4C74eSTEUNndnER3VJ15oru2NumfQxS8geE+f3eB5xvfxpWyqE5XlVnxb/R14uoXi6SLbBwwiDSkv+XEw==}
+  /@swc/counter@0.1.3:
+    resolution: {integrity: sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==}
     dev: true
 
   /@swc/types@0.1.5:
@@ -2769,8 +2765,8 @@ packages:
     resolution: {integrity: sha512-F0KIgDJfy2nA3zMLmWGKxcH2ZVEtCZXHHdOQs2gSaQ27+lNeEfGxzkIw90aXswATX7AZ33tahPbzy6KAfUreVw==}
     dev: true
 
-  /@types/node@20.11.7:
-    resolution: {integrity: sha512-GPmeN1C3XAyV5uybAf4cMLWT9fDWcmQhZVtMFu7OR32WjrqGG+Wnk2V1d0bmtUyE/Zy1QJ9BxyiTih9z8Oks8A==}
+  /@types/node@20.11.16:
+    resolution: {integrity: sha512-gKb0enTmRCzXSSUJDq6/sPcqrfCv2mkkG6Jt/clpn5eiCbKTY+SgZUxo+p8ZKMof5dCp9vHQUAB7wOUTod22wQ==}
     dependencies:
       undici-types: 5.26.5
     dev: true
@@ -2789,11 +2785,11 @@ packages:
   /@types/react-transition-group@4.4.10:
     resolution: {integrity: sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==}
     dependencies:
-      '@types/react': 18.2.48
+      '@types/react': 18.2.55
     dev: false
 
-  /@types/react@18.2.48:
-    resolution: {integrity: sha512-qboRCl6Ie70DQQG9hhNREz81jqC1cs9EVNcjQ1AU+jH6NFfSAhVVbrrY/+nSF+Bsk4AOwm9Qa61InvMCyV+H3w==}
+  /@types/react@18.2.55:
+    resolution: {integrity: sha512-Y2Tz5P4yz23brwm2d7jNon39qoAtMMmalOQv6+fEFt1mT+FcM3D841wDpoUvFXhaYenuROCy3FZYqdTjM7qVyA==}
     dependencies:
       '@types/prop-types': 15.7.11
       '@types/scheduler': 0.16.8
@@ -2827,9 +2823,9 @@ packages:
       debug: 4.3.4
       eslint: 8.56.0
       graphemer: 1.4.0
-      ignore: 5.3.0
+      ignore: 5.3.1
       natural-compare-lite: 1.4.0
-      semver: 7.5.4
+      semver: 7.6.0
       tsutils: 3.21.0(typescript@5.3.3)
       typescript: 5.3.3
     transitivePeerDependencies:
@@ -2916,7 +2912,7 @@ packages:
       debug: 4.3.4
       globby: 11.1.0
       is-glob: 4.0.3
-      semver: 7.5.4
+      semver: 7.6.0
       tsutils: 3.21.0(typescript@5.3.3)
       typescript: 5.3.3
     transitivePeerDependencies:
@@ -2937,7 +2933,7 @@ packages:
       '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.3.3)
       eslint: 8.56.0
       eslint-scope: 5.1.1
-      semver: 7.5.4
+      semver: 7.6.0
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -2960,8 +2956,8 @@ packages:
     peerDependencies:
       vite: ^4 || ^5
     dependencies:
-      '@swc/core': 1.3.107
-      vite: 5.0.12(@types/node@20.11.7)(sass@1.70.0)
+      '@swc/core': 1.4.0
+      vite: 5.0.12(@types/node@20.11.16)(sass@1.70.0)
     transitivePeerDependencies:
       - '@swc/helpers'
     dev: true
@@ -3061,11 +3057,12 @@ packages:
       dequal: 2.0.3
     dev: true
 
-  /array-buffer-byte-length@1.0.0:
-    resolution: {integrity: sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A==}
+  /array-buffer-byte-length@1.0.1:
+    resolution: {integrity: sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==}
+    engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.5
-      is-array-buffer: 3.0.2
+      call-bind: 1.0.6
+      is-array-buffer: 3.0.4
     dev: true
 
   /array-ify@1.0.0:
@@ -3076,10 +3073,10 @@ packages:
     resolution: {integrity: sha512-dlcsNBIiWhPkHdOEEKnehA+RNUWDc4UqFtnIXU4uuYDPtA4LDkr7qip2p0VvFAEXNDr0yWZ9PJyIRiGjRLQzwQ==}
     engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.5
+      call-bind: 1.0.6
       define-properties: 1.2.1
       es-abstract: 1.22.3
-      get-intrinsic: 1.2.2
+      get-intrinsic: 1.2.4
       is-string: 1.0.7
     dev: true
 
@@ -3088,22 +3085,33 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /array.prototype.findlastindex@1.2.3:
-    resolution: {integrity: sha512-LzLoiOMAxvy+Gd3BAq3B7VeIgPdo+Q8hthvKtXybMvRV0jrXfJM/t8mw7nNlpEcVlVUnCnM2KSX4XU5HmpodOA==}
+  /array.prototype.filter@1.0.3:
+    resolution: {integrity: sha512-VizNcj/RGJiUyQBgzwxzE5oHdeuXY5hSbbmKMlphj1cy1Vl7Pn2asCGbSrru6hSQjmCzqTBPVWAF/whmEOVHbw==}
     engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.5
+      call-bind: 1.0.6
       define-properties: 1.2.1
       es-abstract: 1.22.3
+      es-array-method-boxes-properly: 1.0.0
+      is-string: 1.0.7
+    dev: true
+
+  /array.prototype.findlastindex@1.2.4:
+    resolution: {integrity: sha512-hzvSHUshSpCflDR1QMUBLHGHP1VIEBegT4pix9H/Z92Xw3ySoy6c2qh7lJWTJnRJ8JCZ9bJNCgTyYaJGcJu6xQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.6
+      define-properties: 1.2.1
+      es-abstract: 1.22.3
+      es-errors: 1.3.0
       es-shim-unscopables: 1.0.2
-      get-intrinsic: 1.2.2
     dev: true
 
   /array.prototype.flat@1.3.2:
     resolution: {integrity: sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==}
     engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.5
+      call-bind: 1.0.6
       define-properties: 1.2.1
       es-abstract: 1.22.3
       es-shim-unscopables: 1.0.2
@@ -3113,32 +3121,33 @@ packages:
     resolution: {integrity: sha512-Ewyx0c9PmpcsByhSW4r+9zDU7sGjFc86qf/kKtuSCRdhfbk0SNLLkaT5qvcHnRGgc5NP/ly/y+qkXkqONX54CQ==}
     engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.5
+      call-bind: 1.0.6
       define-properties: 1.2.1
       es-abstract: 1.22.3
       es-shim-unscopables: 1.0.2
     dev: true
 
-  /array.prototype.tosorted@1.1.2:
-    resolution: {integrity: sha512-HuQCHOlk1Weat5jzStICBCd83NxiIMwqDg/dHEsoefabn/hJRj5pVdWcPUSpRrwhwxZOsQassMpgN/xRYFBMIg==}
+  /array.prototype.tosorted@1.1.3:
+    resolution: {integrity: sha512-/DdH4TiTmOKzyQbp/eadcCVexiCb36xJg7HshYOYJnNZFDj33GEv0P7GxsynpShhq4OLYJzbGcBDkLsDt7MnNg==}
     dependencies:
-      call-bind: 1.0.5
+      call-bind: 1.0.6
       define-properties: 1.2.1
       es-abstract: 1.22.3
+      es-errors: 1.3.0
       es-shim-unscopables: 1.0.2
-      get-intrinsic: 1.2.2
     dev: true
 
-  /arraybuffer.prototype.slice@1.0.2:
-    resolution: {integrity: sha512-yMBKppFur/fbHu9/6USUe03bZ4knMYiwFBcyiaXB8Go0qNehwX6inYPzK9U0NeQvGxKthcmHcaR8P5MStSRBAw==}
+  /arraybuffer.prototype.slice@1.0.3:
+    resolution: {integrity: sha512-bMxMKAjg13EBSVscxTaYA4mRc5t1UAXa2kXiGTNfZ079HIWXEkKmkgFrh/nJqamaLSrXO5H4WFFkPEaLJWbs3A==}
     engines: {node: '>= 0.4'}
     dependencies:
-      array-buffer-byte-length: 1.0.0
-      call-bind: 1.0.5
+      array-buffer-byte-length: 1.0.1
+      call-bind: 1.0.6
       define-properties: 1.2.1
       es-abstract: 1.22.3
-      get-intrinsic: 1.2.2
-      is-array-buffer: 3.0.2
+      es-errors: 1.3.0
+      get-intrinsic: 1.2.4
+      is-array-buffer: 3.0.4
       is-shared-array-buffer: 1.0.2
     dev: true
 
@@ -3162,8 +3171,8 @@ packages:
       has-symbols: 1.0.3
     dev: true
 
-  /available-typed-arrays@1.0.5:
-    resolution: {integrity: sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==}
+  /available-typed-arrays@1.0.6:
+    resolution: {integrity: sha512-j1QzY8iPNPG4o4xmO3ptzpRxTciqD3MgEHtifP/YnJpIo58Xu+ne4BejlbkuaLfXn/nz6HFiw29bLpj2PNMdGg==}
     engines: {node: '>= 0.4'}
     dev: true
 
@@ -3283,23 +3292,25 @@ packages:
       fill-range: 7.0.1
     dev: true
 
-  /browserslist@4.22.2:
-    resolution: {integrity: sha512-0UgcrvQmBDvZHFGdYUehrCNIazki7/lUP3kkoi/r3YB2amZbFM9J43ZRkJTXBUZK4gmx56+Sqk9+Vs9mwZx9+A==}
+  /browserslist@4.22.3:
+    resolution: {integrity: sha512-UAp55yfwNv0klWNapjs/ktHoguxuQNGnOzxYmfnXIS+8AsRDZkSDxg7R1AX3GKzn078SBI5dzwzj/Yx0Or0e3A==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
     dependencies:
-      caniuse-lite: 1.0.30001580
-      electron-to-chromium: 1.4.647
+      caniuse-lite: 1.0.30001585
+      electron-to-chromium: 1.4.661
       node-releases: 2.0.14
-      update-browserslist-db: 1.0.13(browserslist@4.22.2)
+      update-browserslist-db: 1.0.13(browserslist@4.22.3)
     dev: true
 
-  /call-bind@1.0.5:
-    resolution: {integrity: sha512-C3nQxfFZxFRVoJoGKKI8y3MOEo129NQ+FgQ08iye+Mk4zNZZGdjfs06bVTr+DBSlA66Q2VEcMki/cUCP4SercQ==}
+  /call-bind@1.0.6:
+    resolution: {integrity: sha512-Mj50FLHtlsoVfRfnHaZvyrooHcrlceNZdL/QBvJJVd9Ta55qCQK0gs4ss2oZDeV9zFCs6ewzYgVE5yfVmfFpVg==}
+    engines: {node: '>= 0.4'}
     dependencies:
+      es-errors: 1.3.0
       function-bind: 1.1.2
-      get-intrinsic: 1.2.2
-      set-function-length: 1.2.0
+      get-intrinsic: 1.2.4
+      set-function-length: 1.2.1
     dev: true
 
   /callsites@3.1.0:
@@ -3320,8 +3331,8 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
-  /caniuse-lite@1.0.30001580:
-    resolution: {integrity: sha512-mtj5ur2FFPZcCEpXFy8ADXbDACuNFXg6mxVDqp7tqooX6l3zwm+d8EPoeOSIFRDvHs8qu7/SLFOGniULkcH2iA==}
+  /caniuse-lite@1.0.30001585:
+    resolution: {integrity: sha512-yr2BWR1yLXQ8fMpdS/4ZZXpseBgE7o4g41x3a6AJOqZuOi+iE/WdJYAuZ6Y95i4Ohd2Y+9MzIWRR+uGABH4s3Q==}
     dev: true
 
   /chalk@2.4.2:
@@ -3340,8 +3351,8 @@ packages:
       supports-color: 7.2.0
     dev: true
 
-  /chokidar@3.5.3:
-    resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==}
+  /chokidar@3.6.0:
+    resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
     engines: {node: '>= 8.10.0'}
     dependencies:
       anymatch: 3.1.3
@@ -3443,10 +3454,10 @@ packages:
   /core-js-compat@3.35.1:
     resolution: {integrity: sha512-sftHa5qUJY3rs9Zht1WEnmkvXputCyDBczPnr7QDgL8n3qrF3CMXY4VPSYtOLLiOUJcah2WNXREd48iOl6mQIw==}
     dependencies:
-      browserslist: 4.22.2
+      browserslist: 4.22.3
     dev: true
 
-  /cosmiconfig-typescript-loader@5.0.0(@types/node@20.11.7)(cosmiconfig@8.3.6)(typescript@5.3.3):
+  /cosmiconfig-typescript-loader@5.0.0(@types/node@20.11.16)(cosmiconfig@8.3.6)(typescript@5.3.3):
     resolution: {integrity: sha512-+8cK7jRAReYkMwMiG+bxhcNKiHJDM6bR9FD/nGBXOWdMLuYawjF5cGrtLilJ+LGd3ZjCXnJjR5DkfWPoIVlqJA==}
     engines: {node: '>=v16'}
     peerDependencies:
@@ -3454,7 +3465,7 @@ packages:
       cosmiconfig: '>=8.2'
       typescript: '>=4'
     dependencies:
-      '@types/node': 20.11.7
+      '@types/node': 20.11.16
       cosmiconfig: 8.3.6(typescript@5.3.3)
       jiti: 1.21.0
       typescript: 5.3.3
@@ -3583,11 +3594,12 @@ packages:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
     dev: true
 
-  /define-data-property@1.1.1:
-    resolution: {integrity: sha512-E7uGkTzkk1d0ByLeSc6ZsFS79Axg+m1P/VsgYsxHgiuc3tFSj+MjMIwe90FC4lOAZzNBdY7kkO2P2wKdsQ1vgQ==}
+  /define-data-property@1.1.2:
+    resolution: {integrity: sha512-SRtsSqsDbgpJBbW3pABMCOt6rQyeM8s8RiyeSN8jYG8sYmt/kGJejbydttUsnDs1tadr19tvhT4ShwMyoqAm4g==}
     engines: {node: '>= 0.4'}
     dependencies:
-      get-intrinsic: 1.2.2
+      es-errors: 1.3.0
+      get-intrinsic: 1.2.4
       gopd: 1.0.1
       has-property-descriptors: 1.0.1
     dev: true
@@ -3596,7 +3608,7 @@ packages:
     resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
     engines: {node: '>= 0.4'}
     dependencies:
-      define-data-property: 1.1.1
+      define-data-property: 1.1.2
       has-property-descriptors: 1.0.1
       object-keys: 1.1.1
     dev: true
@@ -3645,8 +3657,8 @@ packages:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
     dev: true
 
-  /electron-to-chromium@1.4.647:
-    resolution: {integrity: sha512-Z/fTNGwc45WrYQhPaEcz5tAJuZZ8G7S/DBnhS6Kgp4BxnS40Z/HqlJ0hHg3Z79IGVzuVartIlTcjw/cQbPLgOw==}
+  /electron-to-chromium@1.4.661:
+    resolution: {integrity: sha512-AFg4wDHSOk5F+zA8aR+SVIOabu7m0e7BiJnigCvPXzIGy731XENw/lmNxTySpVFtkFEy+eyt4oHhh5FF3NjQNw==}
     dev: true
 
   /embla-carousel-autoplay@8.0.0-rc22(embla-carousel@8.0.0-rc22):
@@ -3701,62 +3713,71 @@ packages:
     resolution: {integrity: sha512-eiiY8HQeYfYH2Con2berK+To6GrK2RxbPawDkGq4UiCQQfZHb6wX9qQqkbpPqaxQFcl8d9QzZqo0tGE0VcrdwA==}
     engines: {node: '>= 0.4'}
     dependencies:
-      array-buffer-byte-length: 1.0.0
-      arraybuffer.prototype.slice: 1.0.2
-      available-typed-arrays: 1.0.5
-      call-bind: 1.0.5
+      array-buffer-byte-length: 1.0.1
+      arraybuffer.prototype.slice: 1.0.3
+      available-typed-arrays: 1.0.6
+      call-bind: 1.0.6
       es-set-tostringtag: 2.0.2
       es-to-primitive: 1.2.1
       function.prototype.name: 1.1.6
-      get-intrinsic: 1.2.2
-      get-symbol-description: 1.0.0
+      get-intrinsic: 1.2.4
+      get-symbol-description: 1.0.2
       globalthis: 1.0.3
       gopd: 1.0.1
       has-property-descriptors: 1.0.1
       has-proto: 1.0.1
       has-symbols: 1.0.3
       hasown: 2.0.0
-      internal-slot: 1.0.6
-      is-array-buffer: 3.0.2
+      internal-slot: 1.0.7
+      is-array-buffer: 3.0.4
       is-callable: 1.2.7
       is-negative-zero: 2.0.2
       is-regex: 1.1.4
       is-shared-array-buffer: 1.0.2
       is-string: 1.0.7
-      is-typed-array: 1.1.12
+      is-typed-array: 1.1.13
       is-weakref: 1.0.2
       object-inspect: 1.13.1
       object-keys: 1.1.1
       object.assign: 4.1.5
       regexp.prototype.flags: 1.5.1
       safe-array-concat: 1.1.0
-      safe-regex-test: 1.0.2
+      safe-regex-test: 1.0.3
       string.prototype.trim: 1.2.8
       string.prototype.trimend: 1.0.7
       string.prototype.trimstart: 1.0.7
-      typed-array-buffer: 1.0.0
+      typed-array-buffer: 1.0.1
       typed-array-byte-length: 1.0.0
       typed-array-byte-offset: 1.0.0
       typed-array-length: 1.0.4
       unbox-primitive: 1.0.2
-      which-typed-array: 1.1.13
+      which-typed-array: 1.1.14
+    dev: true
+
+  /es-array-method-boxes-properly@1.0.0:
+    resolution: {integrity: sha512-wd6JXUmyHmt8T5a2xreUwKcGPq6f1f+WwIJkijUqiGcJz1qqnZgP6XIK+QyIWU5lT7imeNxUll48bziG+TSYcA==}
+    dev: true
+
+  /es-errors@1.3.0:
+    resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
+    engines: {node: '>= 0.4'}
     dev: true
 
   /es-iterator-helpers@1.0.15:
     resolution: {integrity: sha512-GhoY8uYqd6iwUl2kgjTm4CZAf6oo5mHK7BPqx3rKgx893YSsy0LGHV6gfqqQvZt/8xM8xeOnfXBCfqclMKkJ5g==}
     dependencies:
       asynciterator.prototype: 1.0.0
-      call-bind: 1.0.5
+      call-bind: 1.0.6
       define-properties: 1.2.1
       es-abstract: 1.22.3
       es-set-tostringtag: 2.0.2
       function-bind: 1.1.2
-      get-intrinsic: 1.2.2
+      get-intrinsic: 1.2.4
       globalthis: 1.0.3
       has-property-descriptors: 1.0.1
       has-proto: 1.0.1
       has-symbols: 1.0.3
-      internal-slot: 1.0.6
+      internal-slot: 1.0.7
       iterator.prototype: 1.1.2
       safe-array-concat: 1.1.0
     dev: true
@@ -3765,8 +3786,8 @@ packages:
     resolution: {integrity: sha512-BuDyupZt65P9D2D2vA/zqcI3G5xRsklm5N3xCwuiy+/vKy8i0ifdsQP1sLgO4tZDSCaQUSnmC48khknGMV3D2Q==}
     engines: {node: '>= 0.4'}
     dependencies:
-      get-intrinsic: 1.2.2
-      has-tostringtag: 1.0.0
+      get-intrinsic: 1.2.4
+      has-tostringtag: 1.0.2
       hasown: 2.0.0
     dev: true
 
@@ -3816,8 +3837,8 @@ packages:
       '@esbuild/win32-x64': 0.19.12
     dev: true
 
-  /escalade@3.1.1:
-    resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
+  /escalade@3.1.2:
+    resolution: {integrity: sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==}
     engines: {node: '>=6'}
     dev: true
 
@@ -3849,7 +3870,7 @@ packages:
         optional: true
     dependencies:
       '@babel/core': 7.23.9
-      '@babel/eslint-parser': 7.23.9(@babel/core@7.23.9)(eslint@8.56.0)
+      '@babel/eslint-parser': 7.23.10(@babel/core@7.23.9)(eslint@8.56.0)
       '@rushstack/eslint-patch': 1.7.2
       '@typescript-eslint/eslint-plugin': 5.62.0(@typescript-eslint/parser@5.62.0)(eslint@8.56.0)(typescript@5.3.3)
       '@typescript-eslint/parser': 5.62.0(eslint@8.56.0)(typescript@5.3.3)
@@ -3939,7 +3960,7 @@ packages:
     dependencies:
       '@typescript-eslint/parser': 5.62.0(eslint@8.56.0)(typescript@5.3.3)
       array-includes: 3.1.7
-      array.prototype.findlastindex: 1.2.3
+      array.prototype.findlastindex: 1.2.4
       array.prototype.flat: 1.3.2
       array.prototype.flatmap: 1.3.2
       debug: 3.2.7
@@ -3952,7 +3973,7 @@ packages:
       is-glob: 4.0.3
       minimatch: 3.1.2
       object.fromentries: 2.0.7
-      object.groupby: 1.0.1
+      object.groupby: 1.0.2
       object.values: 1.1.7
       semver: 6.3.1
       tsconfig-paths: 3.15.0
@@ -4025,7 +4046,7 @@ packages:
     dependencies:
       array-includes: 3.1.7
       array.prototype.flatmap: 1.3.2
-      array.prototype.tosorted: 1.1.2
+      array.prototype.tosorted: 1.1.3
       doctrine: 2.1.0
       es-iterator-helpers: 1.0.15
       eslint: 8.56.0
@@ -4111,7 +4132,7 @@ packages:
       glob-parent: 6.0.2
       globals: 13.24.0
       graphemer: 1.4.0
-      ignore: 5.3.0
+      ignore: 5.3.1
       imurmurhash: 0.1.4
       is-glob: 4.0.3
       is-path-inside: 3.0.3
@@ -4217,8 +4238,8 @@ packages:
     engines: {node: '>= 4.9.1'}
     dev: true
 
-  /fastq@1.16.0:
-    resolution: {integrity: sha512-ifCoaXsDrsdkWTtiNJX5uzHDsrck5TzfKKDcuFFTIrrc/BS076qgEIfoIy1VeZqViznfKiysPYTh/QeHtnIsYA==}
+  /fastq@1.17.1:
+    resolution: {integrity: sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==}
     dependencies:
       reusify: 1.0.4
     dev: true
@@ -4319,7 +4340,7 @@ packages:
     resolution: {integrity: sha512-Z5kx79swU5P27WEayXM1tBi5Ze/lbIyiNgU3qyXUOf9b2rgXYyF9Dy9Cx+IQv/Lc8WCG6L82zwUPpSS9hGehIg==}
     engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.5
+      call-bind: 1.0.6
       define-properties: 1.2.1
       es-abstract: 1.22.3
       functions-have-names: 1.2.3
@@ -4339,9 +4360,11 @@ packages:
     engines: {node: 6.* || 8.* || >= 10.*}
     dev: true
 
-  /get-intrinsic@1.2.2:
-    resolution: {integrity: sha512-0gSo4ml/0j98Y3lngkFEot/zhiCeWsbYIlZ+uZOVgzLyLaUw7wxUL+nCTP0XJvJg1AXulJRI3UJi8GsbDuxdGA==}
+  /get-intrinsic@1.2.4:
+    resolution: {integrity: sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==}
+    engines: {node: '>= 0.4'}
     dependencies:
+      es-errors: 1.3.0
       function-bind: 1.1.2
       has-proto: 1.0.1
       has-symbols: 1.0.3
@@ -4353,12 +4376,13 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
-  /get-symbol-description@1.0.0:
-    resolution: {integrity: sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==}
+  /get-symbol-description@1.0.2:
+    resolution: {integrity: sha512-g0QYk1dZBxGwk+Ngc+ltRH2IBp2f7zBkBMBJZCDerh6EhlhSR6+9irMCuT/09zD6qkarHUSn529sK/yL4S27mg==}
     engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.5
-      get-intrinsic: 1.2.2
+      call-bind: 1.0.6
+      es-errors: 1.3.0
+      get-intrinsic: 1.2.4
     dev: true
 
   /get-user-locale@2.3.1:
@@ -4466,7 +4490,7 @@ packages:
       array-union: 2.1.0
       dir-glob: 3.0.1
       fast-glob: 3.3.2
-      ignore: 5.3.0
+      ignore: 5.3.1
       merge2: 1.4.1
       slash: 3.0.0
     dev: true
@@ -4478,7 +4502,7 @@ packages:
   /gopd@1.0.1:
     resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==}
     dependencies:
-      get-intrinsic: 1.2.2
+      get-intrinsic: 1.2.4
     dev: true
 
   /graphemer@1.4.0:
@@ -4506,7 +4530,7 @@ packages:
   /has-property-descriptors@1.0.1:
     resolution: {integrity: sha512-VsX8eaIewvas0xnvinAe9bw4WfIeODpGYikiWYLH+dma0Jw6KHYqWiWfhQlgOVK8D6PvjubK5Uc4P0iIhIcNVg==}
     dependencies:
-      get-intrinsic: 1.2.2
+      get-intrinsic: 1.2.4
     dev: true
 
   /has-proto@1.0.1:
@@ -4519,8 +4543,8 @@ packages:
     engines: {node: '>= 0.4'}
     dev: true
 
-  /has-tostringtag@1.0.0:
-    resolution: {integrity: sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==}
+  /has-tostringtag@1.0.2:
+    resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
     engines: {node: '>= 0.4'}
     dependencies:
       has-symbols: 1.0.3
@@ -4565,8 +4589,8 @@ packages:
     hasBin: true
     dev: true
 
-  /ignore@5.3.0:
-    resolution: {integrity: sha512-g7dmpshy+gD7mh88OC9NwSGTKoc3kyLAZQRU1mt53Aw/vnvfXnbC+F/7F7QoYVKbV+KNvJx8wArewKy1vXMtlg==}
+  /ignore@5.3.1:
+    resolution: {integrity: sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==}
     engines: {node: '>= 4'}
     dev: true
 
@@ -4610,13 +4634,13 @@ packages:
     resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
     dev: true
 
-  /internal-slot@1.0.6:
-    resolution: {integrity: sha512-Xj6dv+PsbtwyPpEflsejS+oIZxmMlV44zAhG479uYu89MsjcYOhCFnNyKrkJrihbsiasQyY0afoCl/9BLR65bg==}
+  /internal-slot@1.0.7:
+    resolution: {integrity: sha512-NGnrKwXzSms2qUUih/ILZ5JBqNTSa1+ZmP6flaIp6KmSElgE9qdndzS3cqjrDovwFdmwsGsLdeFgB6suw+1e9g==}
     engines: {node: '>= 0.4'}
     dependencies:
-      get-intrinsic: 1.2.2
+      es-errors: 1.3.0
       hasown: 2.0.0
-      side-channel: 1.0.4
+      side-channel: 1.0.5
     dev: true
 
   /invariant@2.2.4:
@@ -4625,12 +4649,12 @@ packages:
       loose-envify: 1.4.0
     dev: false
 
-  /is-array-buffer@3.0.2:
-    resolution: {integrity: sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w==}
+  /is-array-buffer@3.0.4:
+    resolution: {integrity: sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==}
+    engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.5
-      get-intrinsic: 1.2.2
-      is-typed-array: 1.1.12
+      call-bind: 1.0.6
+      get-intrinsic: 1.2.4
     dev: true
 
   /is-arrayish@0.2.1:
@@ -4640,7 +4664,7 @@ packages:
     resolution: {integrity: sha512-Y1JXKrfykRJGdlDwdKlLpLyMIiWqWvuSd17TvZk68PLAOGOoF4Xyav1z0Xhoi+gCYjZVeC5SI+hYFOfvXmGRCA==}
     engines: {node: '>= 0.4'}
     dependencies:
-      has-tostringtag: 1.0.0
+      has-tostringtag: 1.0.2
     dev: true
 
   /is-bigint@1.0.4:
@@ -4660,8 +4684,8 @@ packages:
     resolution: {integrity: sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==}
     engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.5
-      has-tostringtag: 1.0.0
+      call-bind: 1.0.6
+      has-tostringtag: 1.0.2
     dev: true
 
   /is-callable@1.2.7:
@@ -4678,7 +4702,7 @@ packages:
     resolution: {integrity: sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==}
     engines: {node: '>= 0.4'}
     dependencies:
-      has-tostringtag: 1.0.0
+      has-tostringtag: 1.0.2
     dev: true
 
   /is-extglob@2.1.1:
@@ -4689,7 +4713,7 @@ packages:
   /is-finalizationregistry@1.0.2:
     resolution: {integrity: sha512-0by5vtUJs8iFQb5TYUHHPudOR+qXYIMKtiUzvLIZITZUjknFmziyBJuLhVRc+Ds0dREFlskDNJKYIdIzu/9pfw==}
     dependencies:
-      call-bind: 1.0.5
+      call-bind: 1.0.6
     dev: true
 
   /is-fullwidth-code-point@3.0.0:
@@ -4701,7 +4725,7 @@ packages:
     resolution: {integrity: sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==}
     engines: {node: '>= 0.4'}
     dependencies:
-      has-tostringtag: 1.0.0
+      has-tostringtag: 1.0.2
     dev: true
 
   /is-glob@4.0.3:
@@ -4724,7 +4748,7 @@ packages:
     resolution: {integrity: sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==}
     engines: {node: '>= 0.4'}
     dependencies:
-      has-tostringtag: 1.0.0
+      has-tostringtag: 1.0.2
     dev: true
 
   /is-number@7.0.0:
@@ -4756,8 +4780,8 @@ packages:
     resolution: {integrity: sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==}
     engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.5
-      has-tostringtag: 1.0.0
+      call-bind: 1.0.6
+      has-tostringtag: 1.0.2
     dev: true
 
   /is-set@2.0.2:
@@ -4767,7 +4791,7 @@ packages:
   /is-shared-array-buffer@1.0.2:
     resolution: {integrity: sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==}
     dependencies:
-      call-bind: 1.0.5
+      call-bind: 1.0.6
     dev: true
 
   /is-stream@2.0.1:
@@ -4779,7 +4803,7 @@ packages:
     resolution: {integrity: sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==}
     engines: {node: '>= 0.4'}
     dependencies:
-      has-tostringtag: 1.0.0
+      has-tostringtag: 1.0.2
     dev: true
 
   /is-symbol@1.0.4:
@@ -4796,11 +4820,11 @@ packages:
       text-extensions: 2.4.0
     dev: true
 
-  /is-typed-array@1.1.12:
-    resolution: {integrity: sha512-Z14TF2JNG8Lss5/HMqt0//T9JeHXttXy5pH/DBU4vi98ozO2btxzq9MwYDZYnKwU8nRsz/+GVFVRDq3DkVuSPg==}
+  /is-typed-array@1.1.13:
+    resolution: {integrity: sha512-uZ25/bUAlUY5fR4OKT4rZQEBrzQWYV9ZJYGGsUmEJ6thodVJ1HX64ePQ6Z0qPWP+m+Uq6e9UugrE38jeYsDSMw==}
     engines: {node: '>= 0.4'}
     dependencies:
-      which-typed-array: 1.1.13
+      which-typed-array: 1.1.14
     dev: true
 
   /is-weakmap@2.0.1:
@@ -4810,14 +4834,14 @@ packages:
   /is-weakref@1.0.2:
     resolution: {integrity: sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==}
     dependencies:
-      call-bind: 1.0.5
+      call-bind: 1.0.6
     dev: true
 
   /is-weakset@2.0.2:
     resolution: {integrity: sha512-t2yVvttHkQktwnNNmBQ98AhENLdPUTDTE21uPqAQ0ARwQfGeQKRVS0NNurH7bTf7RrvcVn1OOge45CnBeHCSmg==}
     dependencies:
-      call-bind: 1.0.5
-      get-intrinsic: 1.2.2
+      call-bind: 1.0.6
+      get-intrinsic: 1.2.4
     dev: true
 
   /isarray@2.0.5:
@@ -4832,9 +4856,9 @@ packages:
     resolution: {integrity: sha512-DR33HMMr8EzwuRL8Y9D3u2BMj8+RqSE850jfGu59kS7tbmPLzGkZmVSfyCFSDxuZiEY6Rzt3T2NA/qU+NwVj1w==}
     dependencies:
       define-properties: 1.2.1
-      get-intrinsic: 1.2.2
+      get-intrinsic: 1.2.4
       has-symbols: 1.0.3
-      reflect.getprototypeof: 1.0.4
+      reflect.getprototypeof: 1.0.5
       set-function-name: 2.0.1
     dev: true
 
@@ -5074,8 +5098,8 @@ packages:
     engines: {node: '>=16.10'}
     dev: true
 
-  /meow@13.1.0:
-    resolution: {integrity: sha512-o5R/R3Tzxq0PJ3v3qcQJtSvSE9nKOLSAaDuuoMzDVuGTwHdccMWcYomh9Xolng2tjT6O/Y83d+0coVGof6tqmA==}
+  /meow@13.2.0:
+    resolution: {integrity: sha512-pxQJQzB6djGPXh08dacEloMFopsOqGVRKFPYvPOt9XDZ1HasbgDZA74CJGreSU4G3Ak7EFJGoiH2auq+yXISgA==}
     engines: {node: '>=18'}
     dev: true
 
@@ -5195,7 +5219,7 @@ packages:
     dependencies:
       hosted-git-info: 4.1.0
       is-core-module: 2.13.1
-      semver: 7.5.4
+      semver: 7.6.0
       validate-npm-package-license: 3.0.4
     dev: true
 
@@ -5228,7 +5252,7 @@ packages:
     resolution: {integrity: sha512-byy+U7gp+FVwmyzKPYhW2h5l3crpmGsxl7X2s8y43IgxvG4g3QZ6CffDtsNQy1WsmZpQbO+ybo0AlW7TY6DcBQ==}
     engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.5
+      call-bind: 1.0.6
       define-properties: 1.2.1
       has-symbols: 1.0.3
       object-keys: 1.1.1
@@ -5238,7 +5262,7 @@ packages:
     resolution: {integrity: sha512-jCBs/0plmPsOnrKAfFQXRG2NFjlhZgjjcBLSmTnEhU8U6vVTsVe8ANeQJCHTl3gSsI4J+0emOoCgoKlmQPMgmA==}
     engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.5
+      call-bind: 1.0.6
       define-properties: 1.2.1
       es-abstract: 1.22.3
     dev: true
@@ -5247,18 +5271,19 @@ packages:
     resolution: {integrity: sha512-UPbPHML6sL8PI/mOqPwsH4G6iyXcCGzLin8KvEPenOZN5lpCNBZZQ+V62vdjB1mQHrmqGQt5/OJzemUA+KJmEA==}
     engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.5
+      call-bind: 1.0.6
       define-properties: 1.2.1
       es-abstract: 1.22.3
     dev: true
 
-  /object.groupby@1.0.1:
-    resolution: {integrity: sha512-HqaQtqLnp/8Bn4GL16cj+CUYbnpe1bh0TtEaWvybszDG4tgxCJuRpV8VGuvNaI1fAnI4lUJzDG55MXcOH4JZcQ==}
+  /object.groupby@1.0.2:
+    resolution: {integrity: sha512-bzBq58S+x+uo0VjurFT0UktpKHOZmv4/xePiOA1nbB9pMqpGK7rUPNgf+1YC+7mE+0HzhTMqNUuCqvKhj6FnBw==}
     dependencies:
-      call-bind: 1.0.5
+      array.prototype.filter: 1.0.3
+      call-bind: 1.0.6
       define-properties: 1.2.1
       es-abstract: 1.22.3
-      get-intrinsic: 1.2.2
+      es-errors: 1.3.0
     dev: true
 
   /object.hasown@1.1.3:
@@ -5272,7 +5297,7 @@ packages:
     resolution: {integrity: sha512-aU6xnDFYT3x17e/f0IiiwlGPTy2jzMySGfUB4fq6z7CV8l85CWHDk5ErhyhpfDHhrOMwGFhSQkhMGHaIotA6Ng==}
     engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.5
+      call-bind: 1.0.6
       define-properties: 1.2.1
       es-abstract: 1.22.3
     dev: true
@@ -5397,22 +5422,22 @@ packages:
     resolution: {integrity: sha512-HvExULSwLqHLgUy1rl3ANIqCsvMS0WHss2UOsXhXnQaZ9VCc2oBvIpXrl00IUFT5ZDITME0o6oiXeiHr2SAIfw==}
     dev: true
 
-  /postcss-safe-parser@7.0.0(postcss@8.4.33):
+  /postcss-safe-parser@7.0.0(postcss@8.4.35):
     resolution: {integrity: sha512-ovehqRNVCpuFzbXoTb4qLtyzK3xn3t/CUBxOs8LsnQjQrShaB4lKiHoVqY8ANaC0hBMHq5QVWk77rwGklFUDrg==}
     engines: {node: '>=18.0'}
     peerDependencies:
       postcss: ^8.4.31
     dependencies:
-      postcss: 8.4.33
+      postcss: 8.4.35
     dev: true
 
-  /postcss-scss@4.0.9(postcss@8.4.33):
+  /postcss-scss@4.0.9(postcss@8.4.35):
     resolution: {integrity: sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==}
     engines: {node: '>=12.0'}
     peerDependencies:
       postcss: ^8.4.29
     dependencies:
-      postcss: 8.4.33
+      postcss: 8.4.35
     dev: true
 
   /postcss-selector-parser@6.0.15:
@@ -5427,8 +5452,8 @@ packages:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
     dev: true
 
-  /postcss@8.4.33:
-    resolution: {integrity: sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==}
+  /postcss@8.4.35:
+    resolution: {integrity: sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==}
     engines: {node: ^10 || ^12 || >=14}
     dependencies:
       nanoid: 3.3.7
@@ -5616,14 +5641,15 @@ packages:
       strip-indent: 3.0.0
     dev: true
 
-  /reflect.getprototypeof@1.0.4:
-    resolution: {integrity: sha512-ECkTw8TmJwW60lOTR+ZkODISW6RQ8+2CL3COqtiJKLd6MmB45hN51HprHFziKLGkAuTGQhBb91V8cy+KHlaCjw==}
+  /reflect.getprototypeof@1.0.5:
+    resolution: {integrity: sha512-62wgfC8dJWrmxv44CA36pLDnP6KKl3Vhxb7PL+8+qrrFMMoJij4vgiMP8zV4O8+CBMXY1mHxI5fITGHXFHVmQQ==}
     engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.5
+      call-bind: 1.0.6
       define-properties: 1.2.1
       es-abstract: 1.22.3
-      get-intrinsic: 1.2.2
+      es-errors: 1.3.0
+      get-intrinsic: 1.2.4
       globalthis: 1.0.3
       which-builtin-type: 1.1.3
     dev: true
@@ -5652,7 +5678,7 @@ packages:
     resolution: {integrity: sha512-sy6TXMN+hnP/wMy+ISxg3krXx7BAtWVO4UouuCN/ziM9UEne0euamVNafDfvC83bRNr95y0V5iijeDQFUNpvrg==}
     engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.5
+      call-bind: 1.0.6
       define-properties: 1.2.1
       set-function-name: 2.0.1
     dev: true
@@ -5772,8 +5798,8 @@ packages:
     resolution: {integrity: sha512-ZdQ0Jeb9Ofti4hbt5lX3T2JcAamT9hfzYU1MNB+z/jaEbB6wfFfPIR/zEORmZqobkCCJhSjodobH6WHNmJ97dg==}
     engines: {node: '>=0.4'}
     dependencies:
-      call-bind: 1.0.5
-      get-intrinsic: 1.2.2
+      call-bind: 1.0.6
+      get-intrinsic: 1.2.4
       has-symbols: 1.0.3
       isarray: 2.0.5
     dev: true
@@ -5782,12 +5808,12 @@ packages:
     resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
     dev: true
 
-  /safe-regex-test@1.0.2:
-    resolution: {integrity: sha512-83S9w6eFq12BBIJYvjMux6/dkirb8+4zJRA9cxNBVb7Wq5fJBW+Xze48WqR8pxua7bDuAaaAxtVVd4Idjp1dBQ==}
+  /safe-regex-test@1.0.3:
+    resolution: {integrity: sha512-CdASjNJPvRa7roO6Ra/gLYBTzYzzPyyBXxIMdGW3USQLyjWEls2RgW5UBTXaQVp+OrpeCK3bLem8smtmheoRuw==}
     engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.5
-      get-intrinsic: 1.2.2
+      call-bind: 1.0.6
+      es-errors: 1.3.0
       is-regex: 1.1.4
     dev: true
 
@@ -5796,7 +5822,7 @@ packages:
     engines: {node: '>=14.0.0'}
     hasBin: true
     dependencies:
-      chokidar: 3.5.3
+      chokidar: 3.6.0
       immutable: 4.3.5
       source-map-js: 1.0.2
     dev: true
@@ -5825,13 +5851,22 @@ packages:
       lru-cache: 6.0.0
     dev: true
 
-  /set-function-length@1.2.0:
-    resolution: {integrity: sha512-4DBHDoyHlM1IRPGYcoxexgh67y4ueR53FKV1yyxwFMY7aCqcN/38M1+SwZ/qJQ8iLv7+ck385ot4CcisOAPT9w==}
+  /semver@7.6.0:
+    resolution: {integrity: sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==}
+    engines: {node: '>=10'}
+    hasBin: true
+    dependencies:
+      lru-cache: 6.0.0
+    dev: true
+
+  /set-function-length@1.2.1:
+    resolution: {integrity: sha512-j4t6ccc+VsKwYHso+kElc5neZpjtq9EnRICFZtWyBsLojhmeF/ZBd/elqm22WJh/BziDe/SBiOeAt0m2mfLD0g==}
     engines: {node: '>= 0.4'}
     dependencies:
-      define-data-property: 1.1.1
+      define-data-property: 1.1.2
+      es-errors: 1.3.0
       function-bind: 1.1.2
-      get-intrinsic: 1.2.2
+      get-intrinsic: 1.2.4
       gopd: 1.0.1
       has-property-descriptors: 1.0.1
     dev: true
@@ -5840,7 +5875,7 @@ packages:
     resolution: {integrity: sha512-tMNCiqYVkXIZgc2Hnoy2IvC/f8ezc5koaRFkCjrpWzGpCd3qbZXPzVy9MAZzK1ch/X0jvSkojys3oqJN0qCmdA==}
     engines: {node: '>= 0.4'}
     dependencies:
-      define-data-property: 1.1.1
+      define-data-property: 1.1.2
       functions-have-names: 1.2.3
       has-property-descriptors: 1.0.1
     dev: true
@@ -5857,11 +5892,13 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /side-channel@1.0.4:
-    resolution: {integrity: sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==}
+  /side-channel@1.0.5:
+    resolution: {integrity: sha512-QcgiIWV4WV7qWExbN5llt6frQB/lBven9pqliLXfGPB+K9ZYXxDozp0wLkHS24kWCm+6YXH/f0HhnObZnZOBnQ==}
+    engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.5
-      get-intrinsic: 1.2.2
+      call-bind: 1.0.6
+      es-errors: 1.3.0
+      get-intrinsic: 1.2.4
       object-inspect: 1.13.1
     dev: true
 
@@ -5956,22 +5993,22 @@ packages:
   /string.prototype.matchall@4.0.10:
     resolution: {integrity: sha512-rGXbGmOEosIQi6Qva94HUjgPs9vKW+dkG7Y8Q5O2OYkWL6wFaTRZO8zM4mhP94uX55wgyrXzfS2aGtGzUL7EJQ==}
     dependencies:
-      call-bind: 1.0.5
+      call-bind: 1.0.6
       define-properties: 1.2.1
       es-abstract: 1.22.3
-      get-intrinsic: 1.2.2
+      get-intrinsic: 1.2.4
       has-symbols: 1.0.3
-      internal-slot: 1.0.6
+      internal-slot: 1.0.7
       regexp.prototype.flags: 1.5.1
       set-function-name: 2.0.1
-      side-channel: 1.0.4
+      side-channel: 1.0.5
     dev: true
 
   /string.prototype.trim@1.2.8:
     resolution: {integrity: sha512-lfjY4HcixfQXOfaqCvcBuOIapyaroTXhbkfJN3gcB1OtyupngWK4sEET9Knd0cXd28kTUqu/kHoV4HKSJdnjiQ==}
     engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.5
+      call-bind: 1.0.6
       define-properties: 1.2.1
       es-abstract: 1.22.3
     dev: true
@@ -5979,7 +6016,7 @@ packages:
   /string.prototype.trimend@1.0.7:
     resolution: {integrity: sha512-Ni79DqeB72ZFq1uH/L6zJ+DKZTkOtPIHovb3YZHQViE+HDouuU4mBrLOLDn5Dde3RF8qw5qVETEjhu9locMLvA==}
     dependencies:
-      call-bind: 1.0.5
+      call-bind: 1.0.6
       define-properties: 1.2.1
       es-abstract: 1.22.3
     dev: true
@@ -5987,7 +6024,7 @@ packages:
   /string.prototype.trimstart@1.0.7:
     resolution: {integrity: sha512-NGhtDFu3jCEm7B4Fy0DpLewdJQOZcQ0rGbwQ/+stjnrp2i+rlKeCvos9hOIeCmqwratM47OBxY7uFZzjxHXmrg==}
     dependencies:
-      call-bind: 1.0.5
+      call-bind: 1.0.6
       define-properties: 1.2.1
       es-abstract: 1.22.3
     dev: true
@@ -6034,7 +6071,7 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /stylelint-config-recommended-scss@14.0.0(postcss@8.4.33)(stylelint@16.2.1):
+  /stylelint-config-recommended-scss@14.0.0(postcss@8.4.35)(stylelint@16.2.1):
     resolution: {integrity: sha512-HDvpoOAQ1RpF+sPbDOT2Q2/YrBDEJDnUymmVmZ7mMCeNiFSdhRdyGEimBkz06wsN+HaFwUh249gDR+I9JR7Onw==}
     engines: {node: '>=18.12.0'}
     peerDependencies:
@@ -6044,8 +6081,8 @@ packages:
       postcss:
         optional: true
     dependencies:
-      postcss: 8.4.33
-      postcss-scss: 4.0.9(postcss@8.4.33)
+      postcss: 8.4.35
+      postcss-scss: 4.0.9(postcss@8.4.35)
       stylelint: 16.2.1(typescript@5.3.3)
       stylelint-config-recommended: 14.0.0(stylelint@16.2.1)
       stylelint-scss: 6.1.0(stylelint@16.2.1)
@@ -6060,7 +6097,7 @@ packages:
       stylelint: 16.2.1(typescript@5.3.3)
     dev: true
 
-  /stylelint-config-standard-scss@13.0.0(postcss@8.4.33)(stylelint@16.2.1):
+  /stylelint-config-standard-scss@13.0.0(postcss@8.4.35)(stylelint@16.2.1):
     resolution: {integrity: sha512-WaLvkP689qSYUpJQPCo30TFJSSc3VzvvoWnrgp+7PpVby5o8fRUY1cZcP0sePZfjrFl9T8caGhcKg0GO34VDiQ==}
     engines: {node: '>=18.12.0'}
     peerDependencies:
@@ -6070,9 +6107,9 @@ packages:
       postcss:
         optional: true
     dependencies:
-      postcss: 8.4.33
+      postcss: 8.4.35
       stylelint: 16.2.1(typescript@5.3.3)
-      stylelint-config-recommended-scss: 14.0.0(postcss@8.4.33)(stylelint@16.2.1)
+      stylelint-config-recommended-scss: 14.0.0(postcss@8.4.35)(stylelint@16.2.1)
       stylelint-config-standard: 36.0.0(stylelint@16.2.1)
     dev: true
 
@@ -6122,18 +6159,18 @@ packages:
       globby: 11.1.0
       globjoin: 0.1.4
       html-tags: 3.3.1
-      ignore: 5.3.0
+      ignore: 5.3.1
       imurmurhash: 0.1.4
       is-plain-object: 5.0.0
       known-css-properties: 0.29.0
       mathml-tag-names: 2.1.3
-      meow: 13.1.0
+      meow: 13.2.0
       micromatch: 4.0.5
       normalize-path: 3.0.0
       picocolors: 1.0.0
-      postcss: 8.4.33
+      postcss: 8.4.35
       postcss-resolve-nested-selector: 0.1.1
-      postcss-safe-parser: 7.0.0(postcss@8.4.33)
+      postcss-safe-parser: 7.0.0(postcss@8.4.35)
       postcss-selector-parser: 6.0.15
       postcss-value-parser: 4.2.0
       resolve-from: 5.0.0
@@ -6277,42 +6314,42 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /typed-array-buffer@1.0.0:
-    resolution: {integrity: sha512-Y8KTSIglk9OZEr8zywiIHG/kmQ7KWyjseXs1CbSo8vC42w7hg2HgYTxSWwP0+is7bWDc1H+Fo026CpHFwm8tkw==}
+  /typed-array-buffer@1.0.1:
+    resolution: {integrity: sha512-RSqu1UEuSlrBhHTWC8O9FnPjOduNs4M7rJ4pRKoEjtx1zUNOPN2sSXHLDX+Y2WPbHIxbvg4JFo2DNAEfPIKWoQ==}
     engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.5
-      get-intrinsic: 1.2.2
-      is-typed-array: 1.1.12
+      call-bind: 1.0.6
+      es-errors: 1.3.0
+      is-typed-array: 1.1.13
     dev: true
 
   /typed-array-byte-length@1.0.0:
     resolution: {integrity: sha512-Or/+kvLxNpeQ9DtSydonMxCx+9ZXOswtwJn17SNLvhptaXYDJvkFFP5zbfU/uLmvnBJlI4yrnXRxpdWH/M5tNA==}
     engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.5
+      call-bind: 1.0.6
       for-each: 0.3.3
       has-proto: 1.0.1
-      is-typed-array: 1.1.12
+      is-typed-array: 1.1.13
     dev: true
 
   /typed-array-byte-offset@1.0.0:
     resolution: {integrity: sha512-RD97prjEt9EL8YgAgpOkf3O4IF9lhJFr9g0htQkm0rchFp/Vx7LW5Q8fSXXub7BXAODyUQohRMyOc3faCPd0hg==}
     engines: {node: '>= 0.4'}
     dependencies:
-      available-typed-arrays: 1.0.5
-      call-bind: 1.0.5
+      available-typed-arrays: 1.0.6
+      call-bind: 1.0.6
       for-each: 0.3.3
       has-proto: 1.0.1
-      is-typed-array: 1.1.12
+      is-typed-array: 1.1.13
     dev: true
 
   /typed-array-length@1.0.4:
     resolution: {integrity: sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==}
     dependencies:
-      call-bind: 1.0.5
+      call-bind: 1.0.6
       for-each: 0.3.3
-      is-typed-array: 1.1.12
+      is-typed-array: 1.1.13
     dev: true
 
   /typescript@5.3.3:
@@ -6324,7 +6361,7 @@ packages:
   /unbox-primitive@1.0.2:
     resolution: {integrity: sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==}
     dependencies:
-      call-bind: 1.0.5
+      call-bind: 1.0.6
       has-bigints: 1.0.2
       has-symbols: 1.0.3
       which-boxed-primitive: 1.0.2
@@ -6357,14 +6394,14 @@ packages:
     engines: {node: '>=4'}
     dev: true
 
-  /update-browserslist-db@1.0.13(browserslist@4.22.2):
+  /update-browserslist-db@1.0.13(browserslist@4.22.3):
     resolution: {integrity: sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==}
     hasBin: true
     peerDependencies:
       browserslist: '>= 4.21.0'
     dependencies:
-      browserslist: 4.22.2
-      escalade: 3.1.1
+      browserslist: 4.22.3
+      escalade: 3.1.2
       picocolors: 1.0.0
     dev: true
 
@@ -6394,10 +6431,10 @@ packages:
       picocolors: 1.0.0
       progress: 2.0.3
       rd: 2.0.1
-      vite: 5.0.12(@types/node@20.11.7)(sass@1.70.0)
+      vite: 5.0.12(@types/node@20.11.16)(sass@1.70.0)
     dev: true
 
-  /vite@5.0.12(@types/node@20.11.7)(sass@1.70.0):
+  /vite@5.0.12(@types/node@20.11.16)(sass@1.70.0):
     resolution: {integrity: sha512-4hsnEkG3q0N4Tzf1+t6NdN9dg/L3BM+q8SWgbSPnJvrgH2kgdyzfVJwbR1ic69/4uMJJ/3dqDZZE5/WwqW8U1w==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
@@ -6425,9 +6462,9 @@ packages:
       terser:
         optional: true
     dependencies:
-      '@types/node': 20.11.7
+      '@types/node': 20.11.16
       esbuild: 0.19.12
-      postcss: 8.4.33
+      postcss: 8.4.35
       rollup: 4.9.6
       sass: 1.70.0
     optionalDependencies:
@@ -6455,7 +6492,7 @@ packages:
     engines: {node: '>= 0.4'}
     dependencies:
       function.prototype.name: 1.1.6
-      has-tostringtag: 1.0.0
+      has-tostringtag: 1.0.2
       is-async-function: 2.0.0
       is-date-object: 1.0.5
       is-finalizationregistry: 1.0.2
@@ -6465,7 +6502,7 @@ packages:
       isarray: 2.0.5
       which-boxed-primitive: 1.0.2
       which-collection: 1.0.1
-      which-typed-array: 1.1.13
+      which-typed-array: 1.1.14
     dev: true
 
   /which-collection@1.0.1:
@@ -6477,15 +6514,15 @@ packages:
       is-weakset: 2.0.2
     dev: true
 
-  /which-typed-array@1.1.13:
-    resolution: {integrity: sha512-P5Nra0qjSncduVPEAr7xhoF5guty49ArDTwzJ/yNuPIbZppyRxFQsRCWrocxIY+CnMVG+qfbU2FmDKyvSGClow==}
+  /which-typed-array@1.1.14:
+    resolution: {integrity: sha512-VnXFiIW8yNn9kIHN88xvZ4yOWchftKDsRJ8fEPacX/wl1lOvBrhsJ/OeJCXq7B0AaijRuqgzSKalJoPk+D8MPg==}
     engines: {node: '>= 0.4'}
     dependencies:
-      available-typed-arrays: 1.0.5
-      call-bind: 1.0.5
+      available-typed-arrays: 1.0.6
+      call-bind: 1.0.6
       for-each: 0.3.3
       gopd: 1.0.1
-      has-tostringtag: 1.0.0
+      has-tostringtag: 1.0.2
     dev: true
 
   /which@1.3.1:
@@ -6565,7 +6602,7 @@ packages:
     engines: {node: '>=12'}
     dependencies:
       cliui: 8.0.1
-      escalade: 3.1.1
+      escalade: 3.1.2
       get-caller-file: 2.0.5
       require-directory: 2.1.1
       string-width: 4.2.3
@@ -6577,3 +6614,7 @@ packages:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
     dev: true
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
diff --git a/src/components/modals/Modals.jsx b/src/components/modals/Modals.jsx
index 2a241011..0956cc29 100644
--- a/src/components/modals/Modals.jsx
+++ b/src/components/modals/Modals.jsx
@@ -10,8 +10,6 @@ import EventBus from 'modules/helpers/eventbus';
 
 import Welcome from './welcome/Welcome';
 
-import Apps from './apps/Apps';
-
 export default class Modals extends PureComponent {
   constructor() {
     super();
@@ -78,9 +76,6 @@ export default class Modals extends PureComponent {
   }
 
   render() {
-    const navZoom = localStorage.getItem('zoomNavbar');
-    const appsInfo = JSON.parse(localStorage.getItem('applinks'));
-
     return (
       <>
         {this.state.welcomeModal === false && (
@@ -108,27 +103,6 @@ export default class Modals extends PureComponent {
         >
           <Welcome modalClose={() => this.closeWelcome()} modalSkip={() => this.previewWelcome()} />
         </Modal>
-
-        <Modal
-          closeTimeoutMS={300}
-          onRequestClose={() => this.toggleModal('appsModal', false)}
-          isOpen={this.state.appsModal}
-          className="Modal appsmodal"
-          overlayClassName="Overlay"
-          shouldCloseOnOverlayClick={true}
-          ariaHideApp={false}
-          style={{
-            content: {
-              position: 'absolute',
-              right: '1rem',
-              top: `calc(1rem + ${55 + Math.ceil((navZoom / 20) * (navZoom * 0.01))}px)`,
-              overflow: 'visible',
-            },
-          }}
-        >
-          <Apps appsInfo={appsInfo} />
-        </Modal>
-
         {this.state.preview && <Preview setup={() => window.location.reload()} />}
       </>
     );
diff --git a/src/components/modals/apps/Apps.jsx b/src/components/modals/apps/Apps.jsx
deleted file mode 100644
index 5c7afabd..00000000
--- a/src/components/modals/apps/Apps.jsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import variables from 'modules/variables';
-import { MdLinkOff } from 'react-icons/md';
-
-import Tooltip from 'components/helpers/tooltip/Tooltip';
-
-import './scss/index.scss';
-
-const Apps = ({ appsInfo }) => {
-  return (
-    <div className="appsShortcutContainer">
-      {appsInfo.length > 0 ? (
-        appsInfo.map((info, i) => (
-          <Tooltip
-            title={info.name.split(' ')[0]}
-            subtitle={info.name.split(' ').slice(1).join(' ')}
-            key={i}
-          >
-            <a href={info.url} className="appsIcon">
-              <img
-                src={
-                  info.icon === ''
-                    ? `https://icon.horse/icon/ ${info.url.replace('https://', '').replace('http://', '')}`
-                    : info.icon
-                }
-                width="40px"
-                height="40px"
-                alt="Google"
-              />
-              <span>{info.name}</span>
-            </a>
-          </Tooltip>
-        ))
-      ) : (
-        <div className="noAppsContainer">
-          <div className="emptyNewMessage">
-            <MdLinkOff />
-            <span className="title">
-              {variables.language.getMessage(variables.languagecode, 'widgets.navbar.apps.no_apps')}
-            </span>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default Apps;
diff --git a/src/components/modals/main/marketplace/sections/Marketplace.jsx b/src/components/modals/main/marketplace/sections/Marketplace.jsx
index 27bbf515..cccf3762 100644
--- a/src/components/modals/main/marketplace/sections/Marketplace.jsx
+++ b/src/components/modals/main/marketplace/sections/Marketplace.jsx
@@ -114,7 +114,7 @@ class Marketplace extends PureComponent {
       ).json();
       this.setState({
         items: collection.data.items,
-        collectionTitle: collection.data.name,
+        collectionTitle: collection.data.display_name,
         collectionDescription: collection.data.description,
         collectionImg: collection.data.img,
         collection: true,
@@ -235,14 +235,6 @@ class Marketplace extends PureComponent {
     });
   }
 
-  reloadItems() {
-    this.setState({
-      done: false,
-    });
-
-    this.getItems();
-  }
-
   componentDidMount() {
     if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') {
       return;
@@ -344,7 +336,7 @@ class Marketplace extends PureComponent {
             <div
               className="collectionPage"
               style={{
-                backgroundImage: `linear-gradient(to bottom, transparent, black), url('${this.state.collectionImg}')`,
+                backgroundImage: `linear-gradient(to bottom, transparent, black), url('${variables.constants.DDG_IMAGE_PROXY + this.state.collectionImg}')`,
               }}
             >
               <div className="nice-tag">
@@ -386,9 +378,6 @@ class Marketplace extends PureComponent {
                     />
                     <MdSearch />
                   </form>
-                  {/*<span className="link marketplaceRefresh" onClick={() => this.reloadItems()}>
-                    <MdRefresh /> {variables.getMessage('widgets.navbar.tooltips.refresh')}
-              </span>*/}
                 </div>
               )}
               <Dropdown
@@ -412,7 +401,7 @@ class Marketplace extends PureComponent {
                     item.news
                       ? { backgroundColor: item.background_colour }
                       : {
-                          backgroundImage: `linear-gradient(to left, #000, transparent, #000), url('${item.img}')`,
+                          backgroundImage: `linear-gradient(to left, #000, transparent, #000), url('${variables.constants.DDG_IMAGE_PROXY + item.img}')`,
                         }
                   }
                 >
diff --git a/src/components/modals/main/scss/settings/react-color-picker-gradient-picker-custom-styles.scss b/src/components/modals/main/scss/settings/react-color-picker-gradient-picker-custom-styles.scss
index 97aa3cf0..f3c7d217 100644
--- a/src/components/modals/main/scss/settings/react-color-picker-gradient-picker-custom-styles.scss
+++ b/src/components/modals/main/scss/settings/react-color-picker-gradient-picker-custom-styles.scss
@@ -51,6 +51,7 @@ div.color-preview-area > div > div:nth-child(5) {
   justify-content: space-between;
   align-items: center;
   flex-flow: row-reverse;
+  gap: 20px;
 }
 
 .gradient-controls {
diff --git a/src/components/modals/main/settings/PreferencesWrapper.jsx b/src/components/modals/main/settings/PreferencesWrapper.jsx
index 14d97afd..4d9a26ab 100644
--- a/src/components/modals/main/settings/PreferencesWrapper.jsx
+++ b/src/components/modals/main/settings/PreferencesWrapper.jsx
@@ -16,7 +16,7 @@ const PreferencesWrapper = ({ children, ...props }) => {
   });
 
   return (
-    <div className={shown ? '' : 'inactiveSetting'}>
+    <div className={shown ? 'preferences' : 'preferencesInactive'}>
       {props.zoomSetting && (
         <SettingsItem
           title={variables.getMessage(
diff --git a/src/components/modals/main/settings/Section.jsx b/src/components/modals/main/settings/Section.jsx
new file mode 100644
index 00000000..186e9070
--- /dev/null
+++ b/src/components/modals/main/settings/Section.jsx
@@ -0,0 +1,18 @@
+import { MdOutlineKeyboardArrowRight } from 'react-icons/md';
+
+export default function Section({ title, subtitle, icon, onClick }) {
+  return (
+    <div className="moreSettings" onClick={onClick}>
+      <div className="left">
+        {icon}
+        <div className="content">
+          <span className="title">{title}</span>
+          <span className="subtitle">{subtitle}</span>
+        </div>
+      </div>
+      <div className="action">
+        <MdOutlineKeyboardArrowRight />
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/modals/main/settings/sections/Advanced.jsx b/src/components/modals/main/settings/sections/Advanced.jsx
index 79352b71..3b8d92ca 100644
--- a/src/components/modals/main/settings/sections/Advanced.jsx
+++ b/src/components/modals/main/settings/sections/Advanced.jsx
@@ -6,6 +6,8 @@ import {
   MdUpload as ImportIcon,
   MdDownload as ExportIcon,
   MdRestartAlt as ResetIcon,
+  MdOutlineKeyboardArrowRight,
+  MdDataUsage,
 } from 'react-icons/md';
 
 import { exportSettings, importSettings } from 'modules/helpers/settings/modals';
@@ -16,106 +18,153 @@ import Switch from '../Switch';
 import ResetModal from '../ResetModal';
 import Dropdown from '../Dropdown';
 import SettingsItem from '../SettingsItem';
+import Section from '../Section';
 
 import time_zones from 'components/widgets/time/timezones.json';
 
 export default function AdvancedSettings() {
   const [resetModal, setResetModal] = useState(false);
+  const [data, setData] = useState(false);
   const ADVANCED_SECTION = 'modals.main.settings.sections.advanced';
 
+  const Data = () => {
+    return (
+      <>
+        {localStorage.getItem('welcomePreview') !== 'true' && (
+          <div className="settingsRow">
+            <div className="content">
+              <span className="title">
+                {variables.getMessage('modals.main.settings.sections.advanced.data')}
+              </span>
+              <span className="subtitle">
+                {variables.getMessage('modals.main.settings.sections.advanced.data_subtitle')}
+              </span>
+            </div>
+            <div className="action activityButtons">
+              <button onClick={() => setResetModal(true)}>
+                {variables.getMessage('modals.main.settings.buttons.reset')}
+                <ResetIcon />
+              </button>
+              <button onClick={() => exportSettings()}>
+                {variables.getMessage('modals.main.settings.buttons.export')}
+                <ExportIcon />
+              </button>
+              <button onClick={() => document.getElementById('file-input').click()}>
+                {variables.getMessage('modals.main.settings.buttons.import')}
+                <ImportIcon />
+              </button>
+            </div>
+          </div>
+        )}
+      </>
+    );
+  };
+
+  let header;
+  if (data) {
+    header = (
+      <span className="mainTitle">
+        <span className="backTitle" onClick={() => setData(false)}>
+          {variables.getMessage(`${ADVANCED_SECTION}.title`)}
+        </span>
+        <MdOutlineKeyboardArrowRight />
+        {variables.getMessage(`${ADVANCED_SECTION}.data`)}
+      </span>
+    );
+  } else {
+    header = (
+      <span className="mainTitle"> {variables.getMessage(`${ADVANCED_SECTION}.title`)}</span>
+    );
+  }
+
   return (
     <>
-      <span className="mainTitle">{variables.getMessage(`${ADVANCED_SECTION}.title`)}</span>
-      <SettingsItem
-        title={variables.getMessage('modals.main.settings.sections.advanced.offline_mode')}
-        subtitle={variables.getMessage('modals.main.settings.sections.advanced.offline_subtitle')}
-      >
-        <Switch name="offlineMode" element=".other" />
-      </SettingsItem>
-      {localStorage.getItem('welcomePreview') !== 'true' && (
-        <div className="settingsRow">
-          <div className="content">
-            <span className="title">
-              {variables.getMessage('modals.main.settings.sections.advanced.data')}
-            </span>
-            <span className="subtitle">
-              {variables.getMessage('modals.main.settings.sections.advanced.data_subtitle')}
-            </span>
-          </div>
-          <div className="action activityButtons">
-            <button onClick={() => setResetModal(true)}>
-              {variables.getMessage('modals.main.settings.buttons.reset')}
-              <ResetIcon />
-            </button>
-            <button onClick={() => exportSettings()}>
-              {variables.getMessage('modals.main.settings.buttons.export')}
-              <ExportIcon />
-            </button>
-            <button onClick={() => document.getElementById('file-input').click()}>
-              {variables.getMessage('modals.main.settings.buttons.import')}
-              <ImportIcon />
-            </button>
-          </div>
-        </div>
+      {header}
+      {data ? (
+        <Data />
+      ) : (
+        <>
+          <Section
+            title={variables.getMessage(`${ADVANCED_SECTION}.data`)}
+            subtitle={variables.getMessage(
+              'modals.main.settings.sections.appearance.accessibility.description',
+            )}
+            onClick={() => setData(true)}
+            icon={<MdDataUsage />}
+          />
+          <SettingsItem
+            title={variables.getMessage('modals.main.settings.sections.advanced.offline_mode')}
+            subtitle={variables.getMessage(
+              'modals.main.settings.sections.advanced.offline_subtitle',
+            )}
+          >
+            <Switch name="offlineMode" element=".other" />
+          </SettingsItem>
+
+          <SettingsItem
+            title={variables.getMessage('modals.main.settings.sections.advanced.timezone.title')}
+            subtitle={variables.getMessage(
+              'modals.main.settings.sections.advanced.timezone.subtitle',
+            )}
+          >
+            <Dropdown name="timezone" category="timezone" manual={true}>
+              <MenuItem value="auto">
+                {variables.getMessage('modals.main.settings.sections.advanced.timezone.automatic')}
+              </MenuItem>
+              {time_zones.map((timezone) => (
+                <MenuItem value={timezone} key={timezone}>
+                  {timezone}
+                </MenuItem>
+              ))}
+            </Dropdown>
+          </SettingsItem>
+          <SettingsItem
+            title={variables.getMessage('modals.main.settings.sections.advanced.tab_name')}
+            subtitle={variables.getMessage(
+              'modals.main.settings.sections.advanced.tab_name_subtitle',
+            )}
+          >
+            <Text name="tabName" default={variables.getMessage('tabname')} category="other" />
+          </SettingsItem>
+          <FileUpload
+            id="file-input"
+            accept="application/json"
+            type="settings"
+            loadFunction={(e) => importSettings(e)}
+          />
+          <SettingsItem
+            title={variables.getMessage('modals.main.settings.sections.advanced.custom_css')}
+            subtitle={variables.getMessage(
+              'modals.main.settings.sections.advanced.custom_css_subtitle',
+            )}
+          >
+            <Text name="customcss" textarea={true} category="other" customcss={true} />
+          </SettingsItem>
+          <SettingsItem
+            title={variables.getMessage('modals.main.settings.sections.experimental.title')}
+            subtitle={variables.getMessage(
+              'modals.main.settings.sections.advanced.experimental_warning',
+            )}
+            final={true}
+          >
+            <Switch
+              name="experimental"
+              text={variables.getMessage('modals.main.settings.enabled')}
+              element=".other"
+            />
+          </SettingsItem>
+          <Modal
+            closeTimeoutMS={100}
+            onRequestClose={() => setResetModal(false)}
+            isOpen={resetModal}
+            className="Modal resetmodal mainModal"
+            overlayClassName="Overlay resetoverlay"
+            ariaHideApp={false}
+          >
+            <ResetModal modalClose={() => setResetModal(false)} />
+          </Modal>
+        </>
       )}
-      <SettingsItem
-        title={variables.getMessage('modals.main.settings.sections.advanced.timezone.title')}
-        subtitle={variables.getMessage('modals.main.settings.sections.advanced.timezone.subtitle')}
-      >
-        <Dropdown name="timezone" category="timezone" manual={true}>
-          <MenuItem value="auto">
-            {variables.getMessage('modals.main.settings.sections.advanced.timezone.automatic')}
-          </MenuItem>
-          {time_zones.map((timezone) => (
-            <MenuItem value={timezone} key={timezone}>
-              {timezone}
-            </MenuItem>
-          ))}
-        </Dropdown>
-      </SettingsItem>
-      <SettingsItem
-        title={variables.getMessage('modals.main.settings.sections.advanced.tab_name')}
-        subtitle={variables.getMessage('modals.main.settings.sections.advanced.tab_name_subtitle')}
-      >
-        <Text name="tabName" default={variables.getMessage('tabname')} category="other" />
-      </SettingsItem>
-      <FileUpload
-        id="file-input"
-        accept="application/json"
-        type="settings"
-        loadFunction={(e) => importSettings(e)}
-      />
-      <SettingsItem
-        title={variables.getMessage('modals.main.settings.sections.advanced.custom_css')}
-        subtitle={variables.getMessage(
-          'modals.main.settings.sections.advanced.custom_css_subtitle',
-        )}
-      >
-        <Text name="customcss" textarea={true} category="other" customcss={true} />
-      </SettingsItem>
-      <SettingsItem
-        title={variables.getMessage('modals.main.settings.sections.experimental.title')}
-        subtitle={variables.getMessage(
-          'modals.main.settings.sections.advanced.experimental_warning',
-        )}
-        final={true}
-      >
-        <Switch
-          name="experimental"
-          text={variables.getMessage('modals.main.settings.enabled')}
-          element=".other"
-        />
-      </SettingsItem>
-      <Modal
-        closeTimeoutMS={100}
-        onRequestClose={() => setResetModal(false)}
-        isOpen={resetModal}
-        className="Modal resetmodal mainModal"
-        overlayClassName="Overlay resetoverlay"
-        ariaHideApp={false}
-      >
-        <ResetModal modalClose={() => setResetModal(false)} />
-      </Modal>
     </>
   );
 }
diff --git a/src/components/modals/main/settings/sections/Appearance.jsx b/src/components/modals/main/settings/sections/Appearance.jsx
index 6c753d3e..23175de0 100644
--- a/src/components/modals/main/settings/sections/Appearance.jsx
+++ b/src/components/modals/main/settings/sections/Appearance.jsx
@@ -1,4 +1,4 @@
-import { memo } from 'react';
+import { memo, useState } from 'react';
 
 import variables from 'modules/variables';
 
@@ -8,125 +8,119 @@ import Radio from '../Radio';
 import Slider from '../Slider';
 import Text from '../Text';
 import SettingsItem from '../SettingsItem';
+import Section from '../Section';
+
+import { MdSource, MdOutlineKeyboardArrowRight, MdAccessibility } from 'react-icons/md';
 
 import { values } from 'modules/helpers/settings/modals';
+import Settings from '../../tabs/Settings';
 
 function AppearanceSettings() {
-  return (
-    <>
-      <span className="mainTitle">
-        {variables.getMessage('modals.main.settings.sections.appearance.title')}
-      </span>
-      <div className="settingsRow">
-        <div className="content">
-          <span className="title">
-            {variables.getMessage('modals.main.settings.sections.appearance.theme.title')}
-          </span>
-          <span className="subtitle">
-            {' '}
-            {variables.getMessage('modals.main.settings.sections.appearance.theme.description')}
-          </span>
-        </div>
-        <div className="action">
-          <Radio
-            name="theme"
-            options={[
-              {
-                name: variables.getMessage('modals.main.settings.sections.appearance.theme.auto'),
-                value: 'auto',
-              },
-              {
-                name: variables.getMessage('modals.main.settings.sections.appearance.theme.light'),
-                value: 'light',
-              },
-              {
-                name: variables.getMessage('modals.main.settings.sections.appearance.theme.dark'),
-                value: 'dark',
-              },
-            ]}
-            category="other"
-          />
-        </div>
-      </div>
-      <div className="settingsRow">
-        <div className="content">
-          <span className="title">
-            {variables.getMessage('modals.main.settings.sections.appearance.font.title')}
-          </span>
-          <span className="subtitle">
-            {variables.getMessage('modals.main.settings.sections.appearance.font.description')}
-          </span>
-        </div>
-        <div className="action">
-          <Checkbox
-            name="fontGoogle"
-            text={variables.getMessage('modals.main.settings.sections.appearance.font.google')}
-            category="other"
-          />
-          <Text
-            title={variables.getMessage('modals.main.settings.sections.appearance.font.custom')}
-            name="font"
-            upperCaseFirst={true}
-            category="other"
-          />
-          <Dropdown
-            label={variables.getMessage(
-              'modals.main.settings.sections.appearance.font.weight.title',
+  const [accessibility, setAccessibility] = useState(false);
+
+  const ThemeSelection = () => {
+    return (
+      <SettingsItem
+        title={variables.getMessage('modals.main.settings.sections.appearance.theme.title')}
+        subtitle={variables.getMessage(
+          'modals.main.settings.sections.appearance.theme.description',
+        )}
+      >
+        <Radio
+          name="theme"
+          options={[
+            {
+              name: variables.getMessage('modals.main.settings.sections.appearance.theme.auto'),
+              value: 'auto',
+            },
+            {
+              name: variables.getMessage('modals.main.settings.sections.appearance.theme.light'),
+              value: 'light',
+            },
+            {
+              name: variables.getMessage('modals.main.settings.sections.appearance.theme.dark'),
+              value: 'dark',
+            },
+          ]}
+          category="other"
+        />
+      </SettingsItem>
+    );
+  };
+
+  const FontOptions = () => {
+    return (
+      <SettingsItem
+        title={variables.getMessage('modals.main.settings.sections.appearance.font.title')}
+        subtitle={variables.getMessage('modals.main.settings.sections.appearance.font.description')}
+      >
+        <Checkbox
+          name="fontGoogle"
+          text={variables.getMessage('modals.main.settings.sections.appearance.font.google')}
+          category="other"
+        />
+        <Text
+          title={variables.getMessage('modals.main.settings.sections.appearance.font.custom')}
+          name="font"
+          upperCaseFirst={true}
+          category="other"
+        />
+        <Dropdown
+          label={variables.getMessage('modals.main.settings.sections.appearance.font.weight.title')}
+          name="fontweight"
+          category="other"
+        >
+          {/* names are taken from https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */}
+          <option value="100">
+            {variables.getMessage('modals.main.settings.sections.appearance.font.weight.thin')}
+          </option>
+          <option value="200">
+            {variables.getMessage(
+              'modals.main.settings.sections.appearance.font.weight.extra_light',
             )}
-            name="fontweight"
-            category="other"
-          >
-            {/* names are taken from https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */}
-            <option value="100">
-              {variables.getMessage('modals.main.settings.sections.appearance.font.weight.thin')}
-            </option>
-            <option value="200">
-              {variables.getMessage(
-                'modals.main.settings.sections.appearance.font.weight.extra_light',
-              )}
-            </option>
-            <option value="300">
-              {variables.getMessage('modals.main.settings.sections.appearance.font.weight.light')}
-            </option>
-            <option value="400">
-              {variables.getMessage('modals.main.settings.sections.appearance.font.weight.normal')}
-            </option>
-            <option value="500">
-              {variables.getMessage('modals.main.settings.sections.appearance.font.weight.medium')}
-            </option>
-            <option value="600">
-              {variables.getMessage(
-                'modals.main.settings.sections.appearance.font.weight.semi_bold',
-              )}
-            </option>
-            <option value="700">
-              {variables.getMessage('modals.main.settings.sections.appearance.font.weight.bold')}
-            </option>
-            <option value="800">
-              {variables.getMessage(
-                'modals.main.settings.sections.appearance.font.weight.extra_bold',
-              )}
-            </option>
-          </Dropdown>
-          <Dropdown
-            label={variables.getMessage(
-              'modals.main.settings.sections.appearance.font.style.title',
+          </option>
+          <option value="300">
+            {variables.getMessage('modals.main.settings.sections.appearance.font.weight.light')}
+          </option>
+          <option value="400">
+            {variables.getMessage('modals.main.settings.sections.appearance.font.weight.normal')}
+          </option>
+          <option value="500">
+            {variables.getMessage('modals.main.settings.sections.appearance.font.weight.medium')}
+          </option>
+          <option value="600">
+            {variables.getMessage('modals.main.settings.sections.appearance.font.weight.semi_bold')}
+          </option>
+          <option value="700">
+            {variables.getMessage('modals.main.settings.sections.appearance.font.weight.bold')}
+          </option>
+          <option value="800">
+            {variables.getMessage(
+              'modals.main.settings.sections.appearance.font.weight.extra_bold',
             )}
-            name="fontstyle"
-            category="other"
-          >
-            <option value="normal">
-              {variables.getMessage('modals.main.settings.sections.appearance.font.style.normal')}
-            </option>
-            <option value="italic">
-              {variables.getMessage('modals.main.settings.sections.appearance.font.style.italic')}
-            </option>
-            <option value="oblique">
-              {variables.getMessage('modals.main.settings.sections.appearance.font.style.oblique')}
-            </option>
-          </Dropdown>
-        </div>
-      </div>
+          </option>
+        </Dropdown>
+        <Dropdown
+          label={variables.getMessage('modals.main.settings.sections.appearance.font.style.title')}
+          name="fontstyle"
+          category="other"
+        >
+          <option value="normal">
+            {variables.getMessage('modals.main.settings.sections.appearance.font.style.normal')}
+          </option>
+          <option value="italic">
+            {variables.getMessage('modals.main.settings.sections.appearance.font.style.italic')}
+          </option>
+          <option value="oblique">
+            {variables.getMessage('modals.main.settings.sections.appearance.font.style.oblique')}
+          </option>
+        </Dropdown>
+      </SettingsItem>
+    );
+  };
+
+  const WidgetStyle = () => {
+    return (
       <SettingsItem
         title={variables.getMessage('modals.main.settings.sections.appearance.style.title')}
         subtitle={variables.getMessage(
@@ -149,7 +143,11 @@ function AppearanceSettings() {
           category="widgets"
         />
       </SettingsItem>
+    );
+  };
 
+  const AccessibilityOptions = () => {
+    return (
       <SettingsItem
         title={variables.getMessage('modals.main.settings.sections.appearance.accessibility.title')}
         subtitle={variables.getMessage(
@@ -207,6 +205,50 @@ function AppearanceSettings() {
           }
         />
       </SettingsItem>
+    );
+  };
+
+  let header;
+  if (accessibility) {
+    header = (
+      <span className="mainTitle">
+        <span className="backTitle" onClick={() => setAccessibility(false)}>
+          {variables.getMessage('modals.main.settings.sections.appearance.title')}
+        </span>
+        <MdOutlineKeyboardArrowRight />
+        {variables.getMessage('modals.main.settings.sections.appearance.accessibility.title')}
+      </span>
+    );
+  } else {
+    header = (
+      <span className="mainTitle">
+        {' '}
+        {variables.getMessage('modals.main.settings.sections.appearance.title')}
+      </span>
+    );
+  }
+  return (
+    <>
+      {header}
+      {accessibility ? (
+        <AccessibilityOptions />
+      ) : (
+        <>
+          <Section
+            title={variables.getMessage(
+              'modals.main.settings.sections.appearance.accessibility.title',
+            )}
+            subtitle={variables.getMessage(
+              'modals.main.settings.sections.appearance.accessibility.description',
+            )}
+            icon={<MdAccessibility />}
+            onClick={() => setAccessibility(true)}
+          />
+          <ThemeSelection />
+          <FontOptions />
+          <WidgetStyle />
+        </>
+      )}
     </>
   );
 }
diff --git a/src/components/modals/main/settings/sections/Date.jsx b/src/components/modals/main/settings/sections/Date.jsx
index 39dab531..ca72fb08 100644
--- a/src/components/modals/main/settings/sections/Date.jsx
+++ b/src/components/modals/main/settings/sections/Date.jsx
@@ -5,6 +5,7 @@ import Header from '../Header';
 import Checkbox from '../Checkbox';
 import Dropdown from '../Dropdown';
 import SettingsItem from '../SettingsItem';
+import PreferencesWrapper from '../PreferencesWrapper';
 
 export default function Date() {
   const [dateType, setDateType] = useState(localStorage.getItem('dateType') || 'long');
@@ -75,47 +76,49 @@ export default function Date() {
         zoomSetting="zoomDate"
         switch={true}
       />
-      <SettingsItem
-        title={variables.getMessage('modals.main.settings.sections.time.type')}
-        subtitle={variables.getMessage('modals.main.settings.sections.date.type.subtitle')}
-      >
-        <Dropdown
-          name="dateType"
-          onChange={(value) => {
-            setDateType(value);
-            localStorage.setItem('dateType', value);
-          }}
-          category="date"
+      <PreferencesWrapper setting="date" switch={true} zoomSetting="zoomDate">
+        <SettingsItem
+          title={variables.getMessage('modals.main.settings.sections.time.type')}
+          subtitle={variables.getMessage('modals.main.settings.sections.date.type.subtitle')}
         >
-          <option value="long">
-            {variables.getMessage('modals.main.settings.sections.date.type.long')}
-          </option>
-          <option value="short">
-            {variables.getMessage('modals.main.settings.sections.date.type.short')}
-          </option>
-        </Dropdown>
-      </SettingsItem>
-      <SettingsItem
-        title={
-          dateType === 'long'
-            ? variables.getMessage('modals.main.settings.sections.date.type.long')
-            : variables.getMessage('modals.main.settings.sections.date.type.short')
-        }
-        subtitle={variables.getMessage('modals.main.settings.sections.date.type_settings')}
-        final={true}
-      >
-        {dateType === 'long' ? longSettings : shortSettings}
-        <Checkbox
-          name="weeknumber"
-          text={variables.getMessage('modals.main.settings.sections.date.week_number')}
-          category="date"
-        />
-        <Checkbox
-          name="datezero"
-          text={variables.getMessage('modals.main.settings.sections.time.digital.zero')}
-          category="date"
-        />
-      </SettingsItem>
+          <Dropdown
+            name="dateType"
+            onChange={(value) => {
+              setDateType(value);
+              localStorage.setItem('dateType', value);
+            }}
+            category="date"
+          >
+            <option value="long">
+              {variables.getMessage('modals.main.settings.sections.date.type.long')}
+            </option>
+            <option value="short">
+              {variables.getMessage('modals.main.settings.sections.date.type.short')}
+            </option>
+          </Dropdown>
+        </SettingsItem>
+        <SettingsItem
+          title={
+            dateType === 'long'
+              ? variables.getMessage('modals.main.settings.sections.date.type.long')
+              : variables.getMessage('modals.main.settings.sections.date.type.short')
+          }
+          subtitle={variables.getMessage('modals.main.settings.sections.date.type_settings')}
+          final={true}
+        >
+          {dateType === 'long' ? longSettings : shortSettings}
+          <Checkbox
+            name="weeknumber"
+            text={variables.getMessage('modals.main.settings.sections.date.week_number')}
+            category="date"
+          />
+          <Checkbox
+            name="datezero"
+            text={variables.getMessage('modals.main.settings.sections.time.digital.zero')}
+            category="date"
+          />
+        </SettingsItem>
+      </PreferencesWrapper>
     </>
   );
 }
diff --git a/src/components/modals/main/settings/sections/Greeting.jsx b/src/components/modals/main/settings/sections/Greeting.jsx
index 9da277e3..e90ba2d9 100644
--- a/src/components/modals/main/settings/sections/Greeting.jsx
+++ b/src/components/modals/main/settings/sections/Greeting.jsx
@@ -1,89 +1,97 @@
 import variables from 'modules/variables';
-import { PureComponent } from 'react';
+import { useState } from 'react';
 
 import Header from '../Header';
 import Checkbox from '../Checkbox';
 import Switch from '../Switch';
 import Text from '../Text';
 import SettingsItem from '../SettingsItem';
+import PreferencesWrapper from '../PreferencesWrapper';
 
-export default class GreetingSettings extends PureComponent {
-  constructor() {
-    super();
-    this.state = {
-      birthday: new Date(localStorage.getItem('birthday')) || new Date(),
-    };
-  }
+const GreetingSettings = () => {
+  const [birthday, setBirthday] = useState(
+    new Date(localStorage.getItem('birthday')) || new Date(),
+  );
 
-  changeDate = (e) => {
-    localStorage.setItem('birthday', e.target.value || new Date());
-
-    this.setState({
-      birthday: e.target.value ? new Date(e.target.value) : new Date(),
-    });
+  const changeDate = (e) => {
+    const newDate = e.target.value ? new Date(e.target.value) : new Date();
+    localStorage.setItem('birthday', newDate);
+    setBirthday(newDate);
   };
 
-  render() {
-    const GREETING_SECTION = 'modals.main.settings.sections.greeting';
+  const GREETING_SECTION = 'modals.main.settings.sections.greeting';
 
+  const AdditionalOptions = () => {
     return (
-      <>
-        <Header
-          title={variables.getMessage(`${GREETING_SECTION}.title`)}
-          setting="greeting"
+      <SettingsItem
+        title={variables.getMessage('modals.main.settings.additional_settings')}
+        subtitle={variables.getMessage(`${GREETING_SECTION}.additional`)}
+      >
+        <Checkbox
+          name="events"
+          text={variables.getMessage(`${GREETING_SECTION}.events`)}
           category="greeting"
-          element=".greeting"
-          zoomSetting="zoomGreeting"
-          switch={true}
         />
-        <SettingsItem
-          title={variables.getMessage('modals.main.settings.additional_settings')}
-          subtitle={variables.getMessage(`${GREETING_SECTION}.additional`)}
-        >
-          <Checkbox
-            name="events"
-            text={variables.getMessage(`${GREETING_SECTION}.events`)}
-            category="greeting"
-          />
-          <Checkbox
-            name="defaultGreetingMessage"
-            text={variables.getMessage(`${GREETING_SECTION}.default`)}
-            category="greeting"
-          />
-          <Text
-            title={variables.getMessage(`${GREETING_SECTION}.name`)}
-            name="greetingName"
-            category="greeting"
-          />
-        </SettingsItem>
-        <SettingsItem
-          title={variables.getMessage(`${GREETING_SECTION}.birthday`)}
-          subtitle={variables.getMessage(
-            'modals.main.settings.sections.greeting.birthday_subtitle',
-          )}
-          final={true}
-        >
-          <Switch
-            name="birthdayenabled"
-            text={variables.getMessage('modals.main.settings.enabled')}
-            category="greeting"
-          />
-          <Checkbox
-            name="birthdayage"
-            text={variables.getMessage(`${GREETING_SECTION}.birthday_age`)}
-            category="greeting"
-          />
-          <p style={{ marginRight: 'auto' }}>
-            {variables.getMessage(`${GREETING_SECTION}.birthday_date`)}
-          </p>
-          <input
-            type="date"
-            onChange={this.changeDate}
-            value={this.state.birthday.toISOString().substring(0, 10)}
-            required
-          />
-        </SettingsItem>
-      </>
+        <Checkbox
+          name="defaultGreetingMessage"
+          text={variables.getMessage(`${GREETING_SECTION}.default`)}
+          category="greeting"
+        />
+        <Text
+          title={variables.getMessage(`${GREETING_SECTION}.name`)}
+          name="greetingName"
+          category="greeting"
+        />
+      </SettingsItem>
     );
-  }
-}
+  };
+
+  const BirthdayOptions = () => {
+    return (
+      <SettingsItem
+        title={variables.getMessage(`${GREETING_SECTION}.birthday`)}
+        subtitle={variables.getMessage('modals.main.settings.sections.greeting.birthday_subtitle')}
+        final={true}
+      >
+        <Switch
+          name="birthdayenabled"
+          text={variables.getMessage('modals.main.settings.enabled')}
+          category="greeting"
+        />
+        <Checkbox
+          name="birthdayage"
+          text={variables.getMessage(`${GREETING_SECTION}.birthday_age`)}
+          category="greeting"
+        />
+        <p style={{ marginRight: 'auto' }}>
+          {variables.getMessage(`${GREETING_SECTION}.birthday_date`)}
+        </p>
+        <input
+          type="date"
+          onChange={changeDate}
+          value={birthday.toISOString().substring(0, 10)}
+          required
+        />
+      </SettingsItem>
+    );
+  };
+
+  return (
+    <>
+      <Header
+        title={variables.getMessage(`${GREETING_SECTION}.title`)}
+        setting="greeting"
+        category="greeting"
+        element=".greeting"
+        zoomSetting="zoomGreeting"
+        switch={true}
+      />
+      <PreferencesWrapper setting="greeting" zoomSetting="zoomGreeting" switch={true}>
+        <AdditionalOptions />
+        {BirthdayOptions()}
+      </PreferencesWrapper>
+    </>
+  );
+};
+
+export default GreetingSettings;
diff --git a/src/components/modals/main/settings/sections/Message.jsx b/src/components/modals/main/settings/sections/Message.jsx
index 6a7ca086..cb53351b 100644
--- a/src/components/modals/main/settings/sections/Message.jsx
+++ b/src/components/modals/main/settings/sections/Message.jsx
@@ -8,6 +8,7 @@ import SettingsItem from '../SettingsItem';
 import Header from '../Header';
 
 import EventBus from 'modules/helpers/eventbus';
+import PreferencesWrapper from '../PreferencesWrapper';
 
 export default class Message extends PureComponent {
   constructor() {
@@ -70,64 +71,66 @@ export default class Message extends PureComponent {
           zoomSetting="zoomMessage"
           switch={true}
         />
-        <SettingsItem title={variables.getMessage(`${MESSAGE_SECTION}.messages`)} final={true}>
-          <button onClick={() => this.modifyMessage('add')}>
-            {variables.getMessage(`${MESSAGE_SECTION}.add`)} <MdAdd />
-          </button>
-        </SettingsItem>
-        <div className="messagesContainer">
-          {this.state.messages.map((_url, index) => (
-            <div className="messageMap" key={index}>
-              <div className="flexGrow">
-                <div className="icon">
-                  <MdOutlineTextsms />
+        <PreferencesWrapper setting="message" switch={true} zoomSetting="zoomMessage">
+          <SettingsItem title={variables.getMessage(`${MESSAGE_SECTION}.messages`)} final={true}>
+            <button onClick={() => this.modifyMessage('add')}>
+              {variables.getMessage(`${MESSAGE_SECTION}.add`)} <MdAdd />
+            </button>
+          </SettingsItem>
+          <div className="messagesContainer">
+            {this.state.messages.map((_url, index) => (
+              <div className="messageMap" key={index}>
+                <div className="flexGrow">
+                  <div className="icon">
+                    <MdOutlineTextsms />
+                  </div>
+                  <div className="messageText">
+                    <span className="subtitle">
+                      {variables.getMessage(`${MESSAGE_SECTION}.title`)}
+                    </span>
+                    <TextareaAutosize
+                      value={this.state.messages[index]}
+                      placeholder={variables.getMessage(
+                        'modals.main.settings.sections.message.content',
+                      )}
+                      onChange={(e) => this.message(e, true, index)}
+                      varient="outlined"
+                      style={{ padding: '0' }}
+                    />
+                  </div>
                 </div>
-                <div className="messageText">
-                  <span className="subtitle">
-                    {variables.getMessage(`${MESSAGE_SECTION}.title`)}
-                  </span>
-                  <TextareaAutosize
-                    value={this.state.messages[index]}
-                    placeholder={variables.getMessage(
-                      'modals.main.settings.sections.message.content',
-                    )}
-                    onChange={(e) => this.message(e, true, index)}
-                    varient="outlined"
-                    style={{ padding: '0' }}
-                  />
+                <div>
+                  <div className="messageAction">
+                    <button
+                      className="deleteButton"
+                      onClick={() => this.modifyMessage('remove', index)}
+                    >
+                      {variables.getMessage('modals.main.marketplace.product.buttons.remove')}
+                      <MdCancel />
+                    </button>
+                  </div>
                 </div>
               </div>
-              <div>
-                <div className="messageAction">
-                  <button
-                    className="deleteButton"
-                    onClick={() => this.modifyMessage('remove', index)}
-                  >
-                    {variables.getMessage('modals.main.marketplace.product.buttons.remove')}
-                    <MdCancel />
-                  </button>
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
-        {this.state.messages.length === 0 && (
-          <div className="photosEmpty">
-            <div className="emptyNewMessage">
-              <MdOutlineTextsms />
-              <span className="title">
-                {variables.getMessage(`${MESSAGE_SECTION}.no_messages`)}
-              </span>
-              <span className="subtitle">
-                {variables.getMessage(`${MESSAGE_SECTION}.add_some`)}
-              </span>
-              <button onClick={() => this.modifyMessage('add')}>
-                {variables.getMessage(`${MESSAGE_SECTION}.add`)}
-                <MdAdd />
-              </button>
-            </div>
+            ))}
           </div>
-        )}
+          {this.state.messages.length === 0 && (
+            <div className="photosEmpty">
+              <div className="emptyNewMessage">
+                <MdOutlineTextsms />
+                <span className="title">
+                  {variables.getMessage(`${MESSAGE_SECTION}.no_messages`)}
+                </span>
+                <span className="subtitle">
+                  {variables.getMessage(`${MESSAGE_SECTION}.add_some`)}
+                </span>
+                <button onClick={() => this.modifyMessage('add')}>
+                  {variables.getMessage(`${MESSAGE_SECTION}.add`)}
+                  <MdAdd />
+                </button>
+              </div>
+            </div>
+          )}
+        </PreferencesWrapper>
       </>
     );
   }
diff --git a/src/components/modals/main/settings/sections/Navbar.jsx b/src/components/modals/main/settings/sections/Navbar.jsx
index d7143ceb..6b6d8df6 100644
--- a/src/components/modals/main/settings/sections/Navbar.jsx
+++ b/src/components/modals/main/settings/sections/Navbar.jsx
@@ -12,7 +12,7 @@ import Dropdown from '../Dropdown';
 
 import SettingsItem from '../SettingsItem';
 import Header from '../Header';
-import { getTitleFromUrl, isValidUrl } from './utils/utils';
+import { getTitleFromUrl, isValidUrl } from 'modules/helpers/settings/modals';
 import QuickLink from './quicklinks/QuickLink';
 
 function Navbar() {
@@ -32,7 +32,7 @@ function Navbar() {
     const data = JSON.parse(localStorage.getItem('applinks'));
 
     if (!url.startsWith('http://') && !url.startsWith('https://')) {
-      url = 'http://' + url;
+      url = 'https://' + url;
     }
 
     if (url.length <= 0 || isValidUrl(url) === false) {
diff --git a/src/components/modals/main/settings/sections/QuickLinks.jsx b/src/components/modals/main/settings/sections/QuickLinks.jsx
index abf09006..28fdac78 100644
--- a/src/components/modals/main/settings/sections/QuickLinks.jsx
+++ b/src/components/modals/main/settings/sections/QuickLinks.jsx
@@ -11,7 +11,8 @@ import AddModal from './quicklinks/AddModal';
 
 import EventBus from 'modules/helpers/eventbus';
 import QuickLink from './quicklinks/QuickLink';
-import { getTitleFromUrl, isValidUrl } from './utils/utils';
+import { getTitleFromUrl, isValidUrl } from 'modules/helpers/settings/modals';
+import PreferencesWrapper from '../PreferencesWrapper';
 
 export default class QuickLinks extends PureComponent {
   constructor() {
@@ -136,67 +137,69 @@ export default class QuickLinks extends PureComponent {
           zoomSetting="zoomQuicklinks"
           switch={true}
         />
-        <SettingsItem
-          title={variables.getMessage('modals.main.settings.additional_settings')}
-          subtitle={variables.getMessage(`${QUICKLINKS_SECTION}.additional`)}
-        >
-          <Checkbox
-            name="quicklinksnewtab"
-            text={variables.getMessage(`${QUICKLINKS_SECTION}.open_new`)}
-            category="quicklinks"
-          />
-          <Checkbox
-            name="quicklinkstooltip"
-            text={variables.getMessage(`${QUICKLINKS_SECTION}.tooltip`)}
-            category="quicklinks"
-          />
-        </SettingsItem>
-        <SettingsItem
-          title={variables.getMessage(`${QUICKLINKS_SECTION}.styling`)}
-          subtitle={variables.getMessage(
-            'modals.main.settings.sections.quicklinks.styling_description',
-          )}
-        >
-          <Dropdown
-            label={variables.getMessage(`${QUICKLINKS_SECTION}.style`)}
-            name="quickLinksStyle"
-            category="quicklinks"
+        <PreferencesWrapper setting="quicklinksenabled" switch={true} zoomSetting="zoomQuicklinks">
+          <SettingsItem
+            title={variables.getMessage('modals.main.settings.additional_settings')}
+            subtitle={variables.getMessage(`${QUICKLINKS_SECTION}.additional`)}
           >
-            <option value="icon">
-              {variables.getMessage(`${QUICKLINKS_SECTION}.options.icon`)}
-            </option>
-            <option value="text">
-              {variables.getMessage(`${QUICKLINKS_SECTION}.options.text_only`)}
-            </option>
-            <option value="metro">
-              {variables.getMessage(`${QUICKLINKS_SECTION}.options.metro`)}
-            </option>
-          </Dropdown>
-        </SettingsItem>
+            <Checkbox
+              name="quicklinksnewtab"
+              text={variables.getMessage(`${QUICKLINKS_SECTION}.open_new`)}
+              category="quicklinks"
+            />
+            <Checkbox
+              name="quicklinkstooltip"
+              text={variables.getMessage(`${QUICKLINKS_SECTION}.tooltip`)}
+              category="quicklinks"
+            />
+          </SettingsItem>
+          <SettingsItem
+            title={variables.getMessage(`${QUICKLINKS_SECTION}.styling`)}
+            subtitle={variables.getMessage(
+              'modals.main.settings.sections.quicklinks.styling_description',
+            )}
+          >
+            <Dropdown
+              label={variables.getMessage(`${QUICKLINKS_SECTION}.style`)}
+              name="quickLinksStyle"
+              category="quicklinks"
+            >
+              <option value="icon">
+                {variables.getMessage(`${QUICKLINKS_SECTION}.options.icon`)}
+              </option>
+              <option value="text">
+                {variables.getMessage(`${QUICKLINKS_SECTION}.options.text_only`)}
+              </option>
+              <option value="metro">
+                {variables.getMessage(`${QUICKLINKS_SECTION}.options.metro`)}
+              </option>
+            </Dropdown>
+          </SettingsItem>
 
-        <SettingsItem title={variables.getMessage(`${QUICKLINKS_SECTION}.title`)} final={true}>
-          <button onClick={() => this.setState({ showAddModal: true })}>
-            {variables.getMessage(`${QUICKLINKS_SECTION}.add_link`)} <MdAddLink />
-          </button>
-        </SettingsItem>
+          <SettingsItem title={variables.getMessage(`${QUICKLINKS_SECTION}.title`)} final={true}>
+            <button onClick={() => this.setState({ showAddModal: true })}>
+              {variables.getMessage(`${QUICKLINKS_SECTION}.add_link`)} <MdAddLink />
+            </button>
+          </SettingsItem>
 
-        {this.state.items.length === 0 && (
-          <div className="photosEmpty">
-            <div className="emptyNewMessage">
-              <MdLinkOff />
-              <span className="title">
-                {variables.getMessage(`${QUICKLINKS_SECTION}.no_quicklinks`)}
-              </span>
-              <span className="subtitle">
-                {variables.getMessage('modals.main.settings.sections.message.add_some')}
-              </span>
-              <button onClick={() => this.setState({ showAddModal: true })}>
-                {variables.getMessage(`${QUICKLINKS_SECTION}.add_link`)}
-                <MdAddLink />
-              </button>
+          {this.state.items.length === 0 && (
+            <div className="photosEmpty">
+              <div className="emptyNewMessage">
+                <MdLinkOff />
+                <span className="title">
+                  {variables.getMessage(`${QUICKLINKS_SECTION}.no_quicklinks`)}
+                </span>
+                <span className="subtitle">
+                  {variables.getMessage('modals.main.settings.sections.message.add_some')}
+                </span>
+                <button onClick={() => this.setState({ showAddModal: true })}>
+                  {variables.getMessage(`${QUICKLINKS_SECTION}.add_link`)}
+                  <MdAddLink />
+                </button>
+              </div>
             </div>
-          </div>
-        )}
+          )}
+        </PreferencesWrapper>
 
         <div className="messagesContainer" ref={this.quicklinksContainer}>
           {this.state.items.map((item, i) => (
diff --git a/src/components/modals/main/settings/sections/Search.jsx b/src/components/modals/main/settings/sections/Search.jsx
index 31500298..5575885b 100644
--- a/src/components/modals/main/settings/sections/Search.jsx
+++ b/src/components/modals/main/settings/sections/Search.jsx
@@ -11,13 +11,13 @@ import SettingsItem from '../SettingsItem';
 import EventBus from 'modules/helpers/eventbus';
 
 import searchEngines from 'components/widgets/search/search_engines.json';
+import PreferencesWrapper from '../PreferencesWrapper';
 
 export default class SearchSettings extends PureComponent {
   constructor() {
     super();
     this.state = {
       customEnabled: false,
-      customDisplay: 'none',
       customValue: localStorage.getItem('customSearchEngine') || '',
     };
   }
@@ -34,7 +34,6 @@ export default class SearchSettings extends PureComponent {
   componentDidMount() {
     if (localStorage.getItem('searchEngine') === 'custom') {
       this.setState({
-        customDisplay: 'block',
         customEnabled: true,
       });
     } else {
@@ -53,12 +52,10 @@ export default class SearchSettings extends PureComponent {
   setSearchEngine(input) {
     if (input === 'custom') {
       this.setState({
-        customDisplay: 'block',
         customEnabled: true,
       });
     } else {
       this.setState({
-        customDisplay: 'none',
         customEnabled: false,
       });
       localStorage.setItem('searchEngine', input);
@@ -70,14 +67,8 @@ export default class SearchSettings extends PureComponent {
   render() {
     const SEARCH_SECTION = 'modals.main.settings.sections.search';
 
-    return (
-      <>
-        <Header
-          title={variables.getMessage(`${SEARCH_SECTION}.title`)}
-          setting="searchBar"
-          category="widgets"
-          switch={true}
-        />
+    const AdditionalOptions = () => {
+      return (
         <SettingsItem
           title={variables.getMessage('modals.main.settings.additional_settings')}
           subtitle={variables.getMessage(`${SEARCH_SECTION}.additional`)}
@@ -108,12 +99,17 @@ export default class SearchSettings extends PureComponent {
             category="search"
           />
         </SettingsItem>
+      );
+    };
+
+    const SearchEngineSelection = () => {
+      return (
         <SettingsItem
           title={variables.getMessage(`${SEARCH_SECTION}.search_engine`)}
           subtitle={variables.getMessage(
             'modals.main.settings.sections.search.search_engine_subtitle',
           )}
-          final={this.state.customDisplay === 'none' ? true : false}
+          final={!this.state.customEnabled}
         >
           <Dropdown
             name="searchEngine"
@@ -130,22 +126,37 @@ export default class SearchSettings extends PureComponent {
             </MenuItem>
           </Dropdown>
         </SettingsItem>
-        <div style={{ display: this.state.customDisplay }}>
-          <SettingsItem title={variables.getMessage(`${SEARCH_SECTION}.custom`)} final={true}>
-            <TextField
-              label={variables.getMessage(`${SEARCH_SECTION}.custom`)}
-              value={this.state.customValue}
-              onInput={(e) => this.setState({ customValue: e.target.value })}
-              varient="outlined"
-              InputLabelProps={{ shrink: true }}
-            />
-            <p style={{ marginTop: '0px' }}>
-              <span className="link" onClick={() => this.resetSearch()}>
-                {variables.getMessage('modals.main.settings.buttons.reset')}
-              </span>
-            </p>
-          </SettingsItem>
-        </div>
+      );
+    };
+
+    return (
+      <>
+        <Header
+          title={variables.getMessage(`${SEARCH_SECTION}.title`)}
+          setting="searchBar"
+          category="widgets"
+          switch={true}
+        />
+        <PreferencesWrapper setting="searchBar" category="widgets" switch={true}>
+          <AdditionalOptions />
+          <SearchEngineSelection />
+          {this.state.customEnabled && (
+            <SettingsItem title={variables.getMessage(`${SEARCH_SECTION}.custom`)} final={true}>
+              <TextField
+                label={variables.getMessage(`${SEARCH_SECTION}.custom`)}
+                value={this.state.customValue}
+                onInput={(e) => this.setState({ customValue: e.target.value })}
+                varient="outlined"
+                InputLabelProps={{ shrink: true }}
+              />
+              <p style={{ marginTop: '0px' }}>
+                <span className="link" onClick={() => this.resetSearch()}>
+                  {variables.getMessage('modals.main.settings.buttons.reset')}
+                </span>
+              </p>
+            </SettingsItem>
+          )}
+        </PreferencesWrapper>
       </>
     );
   }
diff --git a/src/components/modals/main/settings/sections/Time.jsx b/src/components/modals/main/settings/sections/Time.jsx
index 129c69b9..d0e0115c 100644
--- a/src/components/modals/main/settings/sections/Time.jsx
+++ b/src/components/modals/main/settings/sections/Time.jsx
@@ -1,208 +1,210 @@
 import variables from 'modules/variables';
-import { PureComponent } from 'react';
+import React, { useState } from 'react';
 
 import Header from '../Header';
 import Checkbox from '../Checkbox';
 import Dropdown from '../Dropdown';
 import Radio from '../Radio';
 import SettingsItem from '../SettingsItem';
+import PreferencesWrapper from '../PreferencesWrapper';
 
-export default class TimeSettings extends PureComponent {
-  constructor() {
-    super();
-    this.state = {
-      timeType: localStorage.getItem('timeType') || 'digital',
-      hourColour: localStorage.getItem('hourColour') || '#ffffff',
-      minuteColour: localStorage.getItem('minuteColour') || '#ffffff',
-    };
-  }
+import { MdRefresh } from 'react-icons/md';
 
-  updateColour(type, event) {
+const TimeSettings = () => {
+  const [timeType, setTimeType] = useState(localStorage.getItem('timeType') || 'digital');
+  const [hourColour, setHourColour] = useState(localStorage.getItem('hourColour') || '#ffffff');
+  const [minuteColour, setMinuteColour] = useState(
+    localStorage.getItem('minuteColour') || '#ffffff',
+  );
+
+  const updateColour = (type, event) => {
     const colour = event.target.value;
-    this.setState({ [type]: colour });
+    if (type === 'hourColour') {
+      setHourColour(colour);
+    } else if (type === 'minuteColour') {
+      setMinuteColour(colour);
+    }
     localStorage.setItem(type, colour);
+  };
+
+  let timeSettings = null;
+
+  const TIME_SECTION = 'modals.main.settings.sections.time';
+
+  const WidgetType = () => {
+    return (
+      <SettingsItem
+        title={variables.getMessage(`${TIME_SECTION}.type`)}
+        subtitle={variables.getMessage(`${TIME_SECTION}.type_subtitle`)}
+        final={timeType === 'percentageComplete'}
+      >
+        <Dropdown name="timeType" onChange={(value) => setTimeType(value)} category="clock">
+          <option value="digital">{variables.getMessage(`${TIME_SECTION}.digital.title`)}</option>
+          <option value="analogue">{variables.getMessage(`${TIME_SECTION}.analogue.title`)}</option>
+          <option value="percentageComplete">
+            {variables.getMessage(`${TIME_SECTION}.percentage_complete`)}
+          </option>
+          <option value="verticalClock">
+            {variables.getMessage(`${TIME_SECTION}.vertical_clock.title`)}
+          </option>
+        </Dropdown>
+      </SettingsItem>
+    );
+  };
+
+  const digitalSettings = (
+    <SettingsItem
+      title={variables.getMessage(`${TIME_SECTION}.digital.title`)}
+      subtitle={variables.getMessage(`${TIME_SECTION}.digital.subtitle`)}
+      final={true}
+    >
+      <Radio
+        name="timeformat"
+        options={[
+          {
+            name: variables.getMessage(`${TIME_SECTION}.digital.twentyfourhour`),
+            value: 'twentyfourhour',
+          },
+          {
+            name: variables.getMessage(`${TIME_SECTION}.digital.twelvehour`),
+            value: 'twelvehour',
+          },
+        ]}
+        smallTitle={true}
+        category="clock"
+      />
+      <Checkbox
+        name="seconds"
+        text={variables.getMessage(`${TIME_SECTION}.digital.seconds`)}
+        category="clock"
+      />
+      <Checkbox
+        name="zero"
+        text={variables.getMessage(`${TIME_SECTION}.digital.zero`)}
+        category="clock"
+      />
+    </SettingsItem>
+  );
+
+  const analogSettings = (
+    <SettingsItem
+      title={variables.getMessage(`${TIME_SECTION}.analogue.title`)}
+      subtitle={variables.getMessage(`${TIME_SECTION}.analogue.subtitle`)}
+      final={true}
+    >
+      <Checkbox
+        name="secondHand"
+        text={variables.getMessage(`${TIME_SECTION}.analogue.second_hand`)}
+        category="clock"
+      />
+      <Checkbox
+        name="minuteHand"
+        text={variables.getMessage(`${TIME_SECTION}.analogue.minute_hand`)}
+        category="clock"
+      />
+      <Checkbox
+        name="hourHand"
+        text={variables.getMessage(`${TIME_SECTION}.analogue.hour_hand`)}
+        category="clock"
+      />
+      <Checkbox
+        name="hourMarks"
+        text={variables.getMessage(`${TIME_SECTION}.analogue.hour_marks`)}
+        category="clock"
+      />
+      <Checkbox
+        name="minuteMarks"
+        text={variables.getMessage(`${TIME_SECTION}.analogue.minute_marks`)}
+        category="clock"
+      />
+      <Checkbox
+        name="roundClock"
+        text={variables.getMessage(`${TIME_SECTION}.analogue.round_clock`)}
+        category="clock"
+      />
+    </SettingsItem>
+  );
+
+  const verticalClock = (
+    <>
+      <SettingsItem
+        title={variables.getMessage(
+          'modals.main.settings.sections.time.vertical_clock.change_hour_colour',
+        )}
+      >
+        <div className="colourInput">
+          <input
+            type="color"
+            name="hourColour"
+            className="minuteColour"
+            onChange={(event) => updateColour('hourColour', event)}
+            value={hourColour}
+          ></input>
+          <label htmlFor={'hourColour'} className="customBackgroundHex">
+            {hourColour}
+          </label>
+        </div>
+        <span className="link" onClick={() => localStorage.setItem('hourColour', '#ffffff')}>
+          <MdRefresh />
+          {variables.getMessage('modals.main.settings.buttons.reset')}
+        </span>
+      </SettingsItem>
+      <SettingsItem
+        title={variables.getMessage(
+          'modals.main.settings.sections.time.vertical_clock.change_minute_colour',
+        )}
+      >
+        <div className="colourInput">
+          <input
+            type="color"
+            name="minuteColour"
+            className="minuteColour"
+            onChange={(event) => updateColour('minuteColour', event)}
+            value={minuteColour}
+          ></input>
+          <label htmlFor={'minuteColour'} className="customBackgroundHex">
+            {minuteColour}
+          </label>
+        </div>
+        <span className="link" onClick={() => localStorage.setItem('minuteColour', '#ffffff')}>
+          <MdRefresh />
+          {variables.getMessage('modals.main.settings.buttons.reset')}
+        </span>
+      </SettingsItem>
+      {digitalSettings}
+    </>
+  );
+
+  switch (timeType) {
+    case 'digital':
+      timeSettings = digitalSettings;
+      break;
+    case 'analogue':
+      timeSettings = analogSettings;
+      break;
+    case 'verticalClock':
+      timeSettings = verticalClock;
+      break;
+    default:
+      timeSettings = null;
   }
 
-  render() {
-    let timeSettings = null;
-
-    const TIME_SECTION = 'modals.main.settings.sections.time';
-
-    const WidgetType = () => {
-      return (
-        <SettingsItem
-          title={variables.getMessage(`${TIME_SECTION}.type`)}
-          subtitle={variables.getMessage(`${TIME_SECTION}.type_subtitle`)}
-          final={this.state.timeType === 'percentageComplete'}
-        >
-          <Dropdown
-            name="timeType"
-            onChange={(value) => this.setState({ timeType: value })}
-            category="clock"
-          >
-            <option value="digital">{variables.getMessage(`${TIME_SECTION}.digital.title`)}</option>
-            <option value="analogue">
-              {variables.getMessage(`${TIME_SECTION}.analogue.title`)}
-            </option>
-            <option value="percentageComplete">
-              {variables.getMessage(`${TIME_SECTION}.percentage_complete`)}
-            </option>
-            <option value="verticalClock">
-              {variables.getMessage(`${TIME_SECTION}.vertical_clock.title`)}
-            </option>
-          </Dropdown>
-        </SettingsItem>
-      );
-    };
-
-    const digitalSettings = (
-      <SettingsItem
-        title={variables.getMessage(`${TIME_SECTION}.digital.title`)}
-        subtitle={variables.getMessage(`${TIME_SECTION}.digital.subtitle`)}
-        final={true}
-      >
-        <Radio
-          name="timeformat"
-          options={[
-            {
-              name: variables.getMessage(`${TIME_SECTION}.digital.twentyfourhour`),
-              value: 'twentyfourhour',
-            },
-            {
-              name: variables.getMessage(`${TIME_SECTION}.digital.twelvehour`),
-              value: 'twelvehour',
-            },
-          ]}
-          smallTitle={true}
-          category="clock"
-        />
-        <Checkbox
-          name="seconds"
-          text={variables.getMessage(`${TIME_SECTION}.digital.seconds`)}
-          category="clock"
-        />
-        <Checkbox
-          name="zero"
-          text={variables.getMessage(`${TIME_SECTION}.digital.zero`)}
-          category="clock"
-        />
-      </SettingsItem>
-    );
-
-    const analogSettings = (
-      <SettingsItem
-        title={variables.getMessage(`${TIME_SECTION}.analogue.title`)}
-        subtitle={variables.getMessage(`${TIME_SECTION}.analogue.subtitle`)}
-        final={true}
-      >
-        <Checkbox
-          name="secondHand"
-          text={variables.getMessage(`${TIME_SECTION}.analogue.second_hand`)}
-          category="clock"
-        />
-        <Checkbox
-          name="minuteHand"
-          text={variables.getMessage(`${TIME_SECTION}.analogue.minute_hand`)}
-          category="clock"
-        />
-        <Checkbox
-          name="hourHand"
-          text={variables.getMessage(`${TIME_SECTION}.analogue.hour_hand`)}
-          category="clock"
-        />
-        <Checkbox
-          name="hourMarks"
-          text={variables.getMessage(`${TIME_SECTION}.analogue.hour_marks`)}
-          category="clock"
-        />
-        <Checkbox
-          name="minuteMarks"
-          text={variables.getMessage(`${TIME_SECTION}.analogue.minute_marks`)}
-          category="clock"
-        />
-        <Checkbox
-          name="roundClock"
-          text={variables.getMessage(`${TIME_SECTION}.analogue.round_clock`)}
-          category="clock"
-        />
-      </SettingsItem>
-    );
-
-    const verticalClock = (
-      <>
-        <SettingsItem
-          title={variables.getMessage(
-            'modals.main.settings.sections.time.vertical_clock.change_hour_colour',
-          )}
-        >
-          <div className="colourInput">
-            <input
-              type="color"
-              name="hourColour"
-              className="minuteColour"
-              onChange={(event) => this.updateColour('hourColour', event)}
-              value={this.state.hourColour}
-            ></input>
-            <label htmlFor={'hourColour'} className="customBackgroundHex">
-              {this.state.hourColour}
-            </label>
-          </div>
-          <span className="link" onClick={() => localStorage.setItem('hourColour', '#ffffff')}>
-            {variables.getMessage('modals.main.settings.buttons.reset')}
-          </span>
-        </SettingsItem>
-        <SettingsItem
-          title={variables.getMessage(
-            'modals.main.settings.sections.time.vertical_clock.change_minute_colour',
-          )}
-        >
-          <div className="colourInput">
-            <input
-              type="color"
-              name="minuteColour"
-              className="minuteColour"
-              onChange={(event) => this.updateColour('minuteColour', event)}
-              value={this.state.minuteColour}
-            ></input>
-            <label htmlFor={'minuteColour'} className="customBackgroundHex">
-              {this.state.minuteColour}
-            </label>
-          </div>
-          <span className="link" onClick={() => localStorage.setItem('minuteColour', '#ffffff')}>
-            {variables.getMessage('modals.main.settings.buttons.reset')}
-          </span>
-        </SettingsItem>
-        {digitalSettings}
-      </>
-    );
-
-    switch (this.state.timeType) {
-      case 'digital':
-        timeSettings = digitalSettings;
-        break;
-      case 'analogue':
-        timeSettings = analogSettings;
-        break;
-      case 'verticalClock':
-        timeSettings = verticalClock;
-        break;
-      default:
-        timeSettings = null;
-    }
-
-    return (
-      <>
-        <Header
-          title={variables.getMessage(`${TIME_SECTION}.title`)}
-          setting="time"
-          category="clock"
-          element=".clock-container"
-          zoomSetting="zoomClock"
-          switch={true}
-        />
+  return (
+    <>
+      <Header
+        title={variables.getMessage(`${TIME_SECTION}.title`)}
+        setting="time"
+        category="clock"
+        element=".clock-container"
+        zoomSetting="zoomClock"
+        switch={true}
+      />
+      <PreferencesWrapper setting="time" zoomSetting="zoomClock" switch={true}>
         <WidgetType />
         {timeSettings}
-      </>
-    );
-  }
-}
+      </PreferencesWrapper>
+    </>
+  );
+};
+
+export default TimeSettings;
diff --git a/src/components/modals/main/settings/sections/Weather.jsx b/src/components/modals/main/settings/sections/Weather.jsx
index ceb09e30..d875cbfa 100644
--- a/src/components/modals/main/settings/sections/Weather.jsx
+++ b/src/components/modals/main/settings/sections/Weather.jsx
@@ -11,7 +11,7 @@ import { TextField } from '@mui/material';
 import SettingsItem from '../SettingsItem';
 import PreferencesWrapper from '../PreferencesWrapper';
 
-export default class TimeSettings extends PureComponent {
+export default class WeatherSettings extends PureComponent {
   constructor() {
     super();
     this.state = {
diff --git a/src/components/modals/main/settings/sections/background/Background.jsx b/src/components/modals/main/settings/sections/background/Background.jsx
index e89d3ae1..1aea6ced 100644
--- a/src/components/modals/main/settings/sections/background/Background.jsx
+++ b/src/components/modals/main/settings/sections/background/Background.jsx
@@ -205,13 +205,15 @@ export default class BackgroundSettings extends PureComponent {
         </SettingsItem>
         {this.state.backgroundAPI === 'unsplash' && (
           <SettingsItem
-            title="Unsplash Collection(s)"
-            subtitle="Select the collection(s) you want to use for your background"
+            title={variables.getMessage('modals.main.settings.sections.background.unsplash.title')}
+            subtitle={variables.getMessage('modals.main.settings.sections.background.subtitle')}
             final={true}
           >
             <Text
-              title="Collection ID(s)"
-              subtitle="Enter the collection ID(s) you want to use for your background"
+              title={variables.getMessage('modals.main.settings.sections.background.id')}
+              subtitle={variables.getMessage(
+                'modals.main.settings.sections.background.id_subtitle',
+              )}
               placeholder="e.g. 123456, 654321"
               name="unsplashCollections"
               category="background"
diff --git a/src/components/modals/main/settings/sections/utils/utils.js b/src/components/modals/main/settings/sections/utils/utils.js
deleted file mode 100644
index 6efcfb86..00000000
--- a/src/components/modals/main/settings/sections/utils/utils.js
+++ /dev/null
@@ -1,28 +0,0 @@
-const getTitleFromUrl = async (url) => {
-  let title;
-  try {
-    let response = await fetch(url);
-    if (response.redirected) {
-      response = await fetch(response.url);
-    }
-    const html = await response.text();
-    const parser = new DOMParser();
-    const doc = parser.parseFromString(html, 'text/html');
-    title = doc.title;
-  } catch (e) {
-    title = url;
-  }
-
-  return title;
-};
-
-const isValidUrl = (url) => {
-  // regex: https://ihateregex.io/expr/url/
-  // eslint-disable-next-line no-useless-escape
-  const urlRegex =
-    /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()!@:%_.~#?&=]*)/;
-
-  return urlRegex.test(url);
-};
-
-export { getTitleFromUrl, isValidUrl };
diff --git a/src/components/widgets/navbar/Apps.jsx b/src/components/widgets/navbar/Apps.jsx
new file mode 100644
index 00000000..2a02dcf9
--- /dev/null
+++ b/src/components/widgets/navbar/Apps.jsx
@@ -0,0 +1,147 @@
+// TODO: make it work with pins or on click or smth
+import variables from 'modules/variables';
+import { PureComponent, memo, useState } from 'react';
+
+import { MdLinkOff, MdOutlineApps } from 'react-icons/md';
+import Tooltip from 'components/helpers/tooltip/Tooltip';
+import { shift, useFloating } from '@floating-ui/react-dom';
+import EventBus from 'modules/helpers/eventbus';
+
+class Apps extends PureComponent {
+  constructor() {
+    super();
+    this.state = {
+      apps: JSON.parse(localStorage.getItem('applinks')),
+      visibility: localStorage.getItem('appsPinned') === 'true' ? 'visible' : 'hidden',
+      marginLeft: localStorage.getItem('refresh') === 'false' ? '-200px' : '-130px',
+      showApps: localStorage.getItem('appsPinned') === 'true',
+    };
+  }
+
+  setZoom() {
+    this.setState({
+      zoomFontSize: Number(((localStorage.getItem('zoomNavbar') || 100) / 100) * 1.2) + 'rem',
+    });
+  }
+
+  componentDidMount() {
+    EventBus.on('refresh', (data) => {
+      if (data === 'navbar') {
+        this.forceUpdate();
+        try {
+          this.setZoom();
+        } catch (e) {}
+      }
+    });
+
+    this.setZoom();
+  }
+
+  componentWillUnmount() {
+    EventBus.off('refresh');
+  }
+
+  showApps() {
+    this.setState({
+      showApps: true,
+    });
+  }
+
+  hideApps() {
+    this.setState({
+      showApps: localStorage.getItem('AppsPinned') === 'true',
+    });
+  }
+
+  render() {
+    const appsInfo = this.state.apps;
+
+    return (
+      <div className="notes" onMouseLeave={() => this.hideApps()} onFocus={() => this.showApps()}>
+        <button
+          className="first"
+          onMouseEnter={() => this.showApps()}
+          onFocus={() => this.hideApps()}
+          onBlur={() => this.showApps()}
+          ref={this.props.appsRef}
+          style={{ fontSize: this.state.zoomFontSize }}
+        >
+          <MdOutlineApps className="topicons" />
+        </button>
+        {this.state.showApps && (
+          <span
+            className="notesContainer"
+            ref={this.props.floatRef}
+            style={{
+              position: this.props.position,
+              top: this.props.yPosition ?? '44px',
+              left: this.props.xPosition ?? '',
+            }}
+          >
+            {appsInfo.length > 0 ? (
+              <div className="appsShortcutContainer">
+                {appsInfo.map((info, i) => (
+                  <Tooltip
+                    title={info.name.split(' ')[0]}
+                    subtitle={info.name.split(' ').slice(1).join(' ')}
+                    key={i}
+                  >
+                    <a href={info.url} className="appsIcon">
+                      <img
+                        src={
+                          info.icon === ''
+                            ? `https://icon.horse/icon/ ${info.url.replace('https://', '').replace('http://', '')}`
+                            : info.icon
+                        }
+                        width="40px"
+                        height="40px"
+                        alt="Google"
+                      />
+                      <span>{info.name}</span>
+                    </a>
+                  </Tooltip>
+                ))}
+              </div>
+            ) : (
+              <div className="noAppsContainer">
+                <div className="emptyNewMessage">
+                  <MdLinkOff />
+                  <span className="title">
+                    {variables.language.getMessage(
+                      variables.languagecode,
+                      'widgets.navbar.apps.no_apps',
+                    )}
+                  </span>
+                </div>
+              </div>
+            )}
+          </span>
+        )}
+      </div>
+    );
+  }
+}
+
+function AppsWrapper() {
+  const [reference, setReference] = useState(null);
+
+  const { x, y, refs, strategy } = useFloating({
+    placement: 'bottom',
+    middleware: [shift()],
+    elements: {
+      reference,
+    },
+  });
+
+  return (
+    <Apps
+      appsRef={setReference}
+      floatRef={refs.setFloating}
+      position={strategy}
+      xPosition={x}
+      yPosition={y}
+    />
+  );
+}
+
+export default memo(AppsWrapper);
diff --git a/src/components/widgets/navbar/Navbar.jsx b/src/components/widgets/navbar/Navbar.jsx
index c0d6e0b8..c9ce3467 100644
--- a/src/components/widgets/navbar/Navbar.jsx
+++ b/src/components/widgets/navbar/Navbar.jsx
@@ -1,10 +1,11 @@
 import variables from 'modules/variables';
 import { PureComponent, createRef } from 'react';
 
-import { MdRefresh, MdSettings, MdOutlineApps } from 'react-icons/md';
+import { MdRefresh, MdSettings } from 'react-icons/md';
 
 import Notes from './Notes';
 import Todo from './Todo';
+import Apps from './Apps';
 import Maximise from '../background/Maximise';
 import Tooltip from 'components/helpers/tooltip/Tooltip';
 
@@ -109,6 +110,9 @@ class Navbar extends PureComponent {
           {localStorage.getItem('todoEnabled') === 'true' && (
             <Todo fontSize={this.state.zoomFontSize} />
           )}
+          {localStorage.getItem('appsEnabled') === 'true' && (
+            <Apps fontSize={this.state.zoomFontSize} />
+          )}
 
           {this.refreshEnabled !== 'false' && (
             <Tooltip
@@ -125,20 +129,6 @@ class Navbar extends PureComponent {
             </Tooltip>
           )}
 
-          {localStorage.getItem('appsEnabled') === 'true' && (
-            <>
-              <Tooltip title={variables.getMessage('widgets.navbar.apps.title')}>
-                <button
-                  style={{ fontSize: this.state.zoomFontSize }}
-                  onClick={() => this.props.openModal('appsModal')}
-                  id="appsShortcutBtn"
-                >
-                  <MdOutlineApps className="topicons" />
-                </button>
-              </Tooltip>
-            </>
-          )}
-
           <Tooltip
             title={variables.getMessage('modals.main.navbar.settings', {
               type: variables.getMessage(
diff --git a/src/components/modals/apps/scss/index.scss b/src/components/widgets/navbar/scss/_apps.scss
similarity index 98%
rename from src/components/modals/apps/scss/index.scss
rename to src/components/widgets/navbar/scss/_apps.scss
index 1208daf2..6bf0f5ed 100644
--- a/src/components/modals/apps/scss/index.scss
+++ b/src/components/widgets/navbar/scss/_apps.scss
@@ -20,6 +20,8 @@ $appsWidth: 21rem;
   }
 
   .noAppsContainer {
+    grid-column: 1/3;
+
     h3 {
       margin: 0;
       display: flex;
diff --git a/src/components/widgets/navbar/scss/index.scss b/src/components/widgets/navbar/scss/index.scss
index d37b7726..b266fdc2 100644
--- a/src/components/widgets/navbar/scss/index.scss
+++ b/src/components/widgets/navbar/scss/index.scss
@@ -1,5 +1,6 @@
 @import 'notes';
 @import 'todo';
+@import 'apps';
 @import 'scss/variables';
 
 .navbar {
diff --git a/src/components/widgets/weather/Weather.jsx b/src/components/widgets/weather/Weather.jsx
index f4353f8f..67774fb4 100644
--- a/src/components/widgets/weather/Weather.jsx
+++ b/src/components/widgets/weather/Weather.jsx
@@ -17,7 +17,7 @@ const convertTemperature = (temp, format) => {
   return Math.round(temp);
 };
 
-export default class Weather extends PureComponent {
+export default class WeatherSettings extends PureComponent {
   constructor() {
     super();
     this.state = {
diff --git a/src/modules/helpers/settings/modals.js b/src/modules/helpers/settings/modals.js
index 2cf70197..c2988b0c 100644
--- a/src/modules/helpers/settings/modals.js
+++ b/src/modules/helpers/settings/modals.js
@@ -121,3 +121,30 @@ export function values(type) {
 
   return marks[type] || [];
 }
+
+export async function getTitleFromUrl(url) {
+  let title;
+  try {
+    let response = await fetch(url);
+    if (response.redirected) {
+      response = await fetch(response.url);
+    }
+    const html = await response.text();
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(html, 'text/html');
+    title = doc.title;
+  } catch (e) {
+    title = url;
+  }
+
+  return title;
+}
+
+export function isValidUrl(url) {
+  // regex: https://ihateregex.io/expr/url/
+  // eslint-disable-next-line no-useless-escape
+  const urlRegex =
+    /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()!@:%_.~#?&=]*)/;
+
+  return urlRegex.test(url);
+}
diff --git a/src/scss/index.scss b/src/scss/index.scss
index c34fdc51..298edf18 100644
--- a/src/scss/index.scss
+++ b/src/scss/index.scss
@@ -129,7 +129,12 @@ body {
   }
 }
 
-.inactiveSetting {
+.preferences {
+  transition: 0.4s ease-in-out;
+}
+
+.preferencesInactive {
   opacity: 0.5;
   pointer-events: none;
+  transition: 0.4s ease-in-out;
 }
diff --git a/src/translations/bn.json b/src/translations/bn.json
index 61597e5e..075c1ad5 100644
--- a/src/translations/bn.json
+++ b/src/translations/bn.json
@@ -266,13 +266,13 @@
           "search": {
             "title": "Search",
             "additional": "Additional options for search widget display and functionality",
-            "search_engine": "Search engine",
+            "search_engine": "Search Engine",
             "search_engine_subtitle": "Choose search engine to use in the search bar",
-            "custom": "Custom search URL",
+            "custom": "Custom Search URL",
             "autocomplete": "Autocomplete",
             "autocomplete_provider": "Autocomplete Provider",
             "autocomplete_provider_subtitle": "Search engine to use for autocomplete dropdown results",
-            "voice_search": "Voice search",
+            "voice_search": "Voice Search",
             "dropdown": "Search dropdown",
             "focus": "Focus on tab open"
           },
@@ -354,7 +354,7 @@
             "navbar": {
               "title": "Navbar",
               "notes": "Notes",
-              "refresh": "Refresh button",
+              "refresh": "Refresh Button",
               "refresh_subtitle": "Choose what is refreshed when you click the refresh button",
               "hover": "Only display on hover",
               "additional": "Modify navbar style and which buttons you want to display",
@@ -396,8 +396,8 @@
                 "old": "Old",
                 "none": "None"
               },
-              "widget_zoom": "Widget zoom",
-              "toast_duration": "Toast duration",
+              "widget_zoom": "Widget Zoom",
+              "toast_duration": "Toast Duration",
               "milliseconds": "milliseconds"
             }
           },
diff --git a/src/translations/en_GB.json b/src/translations/en_GB.json
index 330684c7..735ab71a 100644
--- a/src/translations/en_GB.json
+++ b/src/translations/en_GB.json
@@ -226,6 +226,12 @@
               "random_colour": "Random colour",
               "random_gradient": "Random gradient"
             },
+            "unsplash": {
+              "title": "Unsplash Collection(s)",
+              "subtitle": "Select the collection(s) you want to use for your background",
+              "id": "Collection ID(s)",
+              "id_subtitle": "Enter a comma separated list of Unsplash IDs"
+            },
             "source": {
               "title": "Source",
               "subtitle": "Select where to get background images from",
@@ -270,14 +276,14 @@
           "search": {
             "title": "Search",
             "additional": "Additional options for search widget display and functionality",
-            "search_engine": "Search engine",
+            "search_engine": "Search Engine",
             "search_engine_subtitle": "Choose search engine to use in the search bar",
-            "custom": "Custom search URL",
+            "custom": "Custom Search URL",
             "autocomplete": "Autocomplete",
             "autocomplete_provider": "Autocomplete Provider",
             "autocomplete_provider_subtitle": "Search engine to use for autocomplete dropdown results",
             "voice_search": "Voice search",
-            "dropdown": "Search dropdown",
+            "dropdown": "Search Dropdown",
             "focus": "Focus on tab open"
           },
           "weather": {
@@ -328,7 +334,7 @@
               "text_only": "Text Only",
               "metro": "Metro"
             },
-            "styling": "Quick Links Styling",
+            "styling": "Styling",
             "styling_description": "Customise Quick Links appearance"
           },
           "message": {
@@ -358,7 +364,7 @@
             "navbar": {
               "title": "Navbar",
               "notes": "Notes",
-              "refresh": "Refresh button",
+              "refresh": "Refresh Button",
               "refresh_subtitle": "Choose what is refreshed when you click the refresh button",
               "hover": "Only display on hover",
               "additional": "Modify navbar style and which buttons you want to display",
@@ -401,8 +407,8 @@
                 "old": "Old",
                 "none": "None"
               },
-              "widget_zoom": "Widget zoom",
-              "toast_duration": "Toast duration",
+              "widget_zoom": "Widget Zoom",
+              "toast_duration": "Toast Duration",
               "milliseconds": "milliseconds"
             }
           },
diff --git a/src/translations/en_US.json b/src/translations/en_US.json
index 9d9080c6..fba9e9c8 100644
--- a/src/translations/en_US.json
+++ b/src/translations/en_US.json
@@ -270,14 +270,14 @@
           "search": {
             "title": "Search",
             "additional": "Additional options for search widget display and functionality",
-            "search_engine": "Search engine",
+            "search_engine": "Search Engine",
             "search_engine_subtitle": "Choose search engine to use in the search bar",
-            "custom": "Custom search URL",
+            "custom": "Custom Search URL",
             "autocomplete": "Autocomplete",
             "autocomplete_provider": "Autocomplete Provider",
             "autocomplete_provider_subtitle": "Search engine to use for autocomplete dropdown results",
-            "voice_search": "Voice search",
-            "dropdown": "Search dropdown",
+            "voice_search": "Voice Search",
+            "dropdown": "Search Dropdown",
             "focus": "Focus on tab open"
           },
           "weather": {
@@ -328,7 +328,7 @@
               "text_only": "Text Only",
               "metro": "Metro"
             },
-            "styling": "Quick Links Styling",
+            "styling": "Styling",
             "styling_description": "Customise Quick Links appearance"
           },
           "message": {
@@ -358,7 +358,7 @@
             "navbar": {
               "title": "Navbar",
               "notes": "Notes",
-              "refresh": "Refresh button",
+              "refresh": "Refresh Button",
               "refresh_subtitle": "Choose what is refreshed when you click the refresh button",
               "hover": "Only display on hover",
               "additional": "Modify navbar style and which buttons you want to display",
@@ -402,7 +402,7 @@
                 "none": "None"
               },
               "widget_zoom": "Widget zoom",
-              "toast_duration": "Toast duration",
+              "toast_duration": "Toast Duration",
               "milliseconds": "milliseconds"
             }
           },
diff --git a/src/translations/es_419.json b/src/translations/es_419.json
index 79937e03..7b76b984 100644
--- a/src/translations/es_419.json
+++ b/src/translations/es_419.json
@@ -266,7 +266,7 @@
           "search": {
             "title": "Búsqueda",
             "additional": "Additional options for search widget display and functionality",
-            "search_engine": "Motor de búsqueda",
+            "search_engine": "Motor de Búsqueda",
             "search_engine_subtitle": "Choose search engine to use in the search bar",
             "custom": "URL de búsqueda personalizada",
             "autocomplete": "Autocompletado",
@@ -324,7 +324,7 @@
               "text_only": "Text Only",
               "metro": "Metro"
             },
-            "styling": "Quick Links Styling",
+            "styling": "Styling",
             "styling_description": "Customise Quick Links appearance"
           },
           "message": {
diff --git a/src/translations/fr.json b/src/translations/fr.json
index 19c2731e..19318f3b 100644
--- a/src/translations/fr.json
+++ b/src/translations/fr.json
@@ -266,7 +266,7 @@
           "search": {
             "title": "Barre de Recherche",
             "additional": "Additional options for search widget display and functionality",
-            "search_engine": "Moteur de recherche",
+            "search_engine": "Moteur de Recherche",
             "search_engine_subtitle": "Choose search engine to use in the search bar",
             "custom": "URL de recherche personnalisée",
             "autocomplete": "Autocomplete",
@@ -324,7 +324,7 @@
               "text_only": "Text Only",
               "metro": "Metro"
             },
-            "styling": "Quick Links Styling",
+            "styling": "Styling",
             "styling_description": "Customise Quick Links appearance"
           },
           "message": {
@@ -354,7 +354,7 @@
             "navbar": {
               "title": "Navbar",
               "notes": "Notes",
-              "refresh": "Refresh button",
+              "refresh": "Refresh Button",
               "refresh_subtitle": "Choose what is refreshed when you click the refresh button",
               "hover": "Only display on hover",
               "additional": "Modify navbar style and which buttons you want to display",
diff --git a/src/translations/id_ID.json b/src/translations/id_ID.json
index 2309e0b1..42b7703c 100644
--- a/src/translations/id_ID.json
+++ b/src/translations/id_ID.json
@@ -268,7 +268,7 @@
             "additional": "Additional options for search widget display and functionality",
             "search_engine": "Mesin pencari",
             "search_engine_subtitle": "Choose search engine to use in the search bar",
-            "custom": "URL kustom",
+            "custom": "URL Kustom",
             "autocomplete": "Autocomplete",
             "autocomplete_provider": "Provider Autocomplete",
             "autocomplete_provider_subtitle": "Search engine to use for autocomplete dropdown results",
@@ -324,7 +324,7 @@
               "text_only": "Text Only",
               "metro": "Metro"
             },
-            "styling": "Quick Links Styling",
+            "styling": "Styling",
             "styling_description": "Customise Quick Links appearance"
           },
           "message": {
@@ -396,7 +396,7 @@
                 "old": "Old",
                 "none": "None"
               },
-              "widget_zoom": "Widget zoom",
+              "widget_zoom": "Widget Zoom",
               "toast_duration": "Durasi toast",
               "milliseconds": "milliseconds"
             }
diff --git a/src/translations/nl.json b/src/translations/nl.json
index 2c5479ee..9d2f3f7f 100644
--- a/src/translations/nl.json
+++ b/src/translations/nl.json
@@ -174,8 +174,8 @@
                 "title": "Widget text shadow"
               },
               "title": "Accessibility",
-              "toast_duration": "Toast duration",
-              "widget_zoom": "Widget zoom"
+              "toast_duration": "Toast Duration",
+              "widget_zoom": "Widget Zoom"
             },
             "font": {
               "custom": "Custom font",
@@ -205,7 +205,7 @@
               "apps_subtitle": "Maak een snelkoppeling van je andere vaak gebruikte websites.",
               "hover": "Only display on hover",
               "notes": "Notes",
-              "refresh": "Refresh button",
+              "refresh": "Refresh Button",
               "refresh_options": {
                 "none": "None",
                 "page": "Page"
diff --git a/src/translations/no.json b/src/translations/no.json
index 74be7cde..eee5a36f 100644
--- a/src/translations/no.json
+++ b/src/translations/no.json
@@ -268,7 +268,7 @@
             "additional": "Additional options for search widget display and functionality",
             "search_engine": "Søkemotor",
             "search_engine_subtitle": "Choose search engine to use in the search bar",
-            "custom": "Custom search URL",
+            "custom": "Custom Search",
             "autocomplete": "Autocomplete",
             "autocomplete_provider": "Autocomplete Provider",
             "autocomplete_provider_subtitle": "Search engine to use for autocomplete dropdown results",
@@ -324,7 +324,7 @@
               "text_only": "Text Only",
               "metro": "Metro"
             },
-            "styling": "Quick Links Styling",
+            "styling": "Styling",
             "styling_description": "Customise Quick Links appearance"
           },
           "message": {
@@ -354,7 +354,7 @@
             "navbar": {
               "title": "Navbar",
               "notes": "Notes",
-              "refresh": "Refresh button",
+              "refresh": "Refresh Button",
               "refresh_subtitle": "Choose what is refreshed when you click the refresh button",
               "hover": "Only display on hover",
               "additional": "Modify navbar style and which buttons you want to display",
@@ -396,8 +396,8 @@
                 "old": "Old",
                 "none": "None"
               },
-              "widget_zoom": "Widget zoom",
-              "toast_duration": "Toast duration",
+              "widget_zoom": "Widget Zoom",
+              "toast_duration": "Toast Duration",
               "milliseconds": "milliseconds"
             }
           },
diff --git a/src/translations/ru.json b/src/translations/ru.json
index 4c011f07..1156f71d 100644
--- a/src/translations/ru.json
+++ b/src/translations/ru.json
@@ -396,7 +396,7 @@
                 "old": "Old",
                 "none": "None"
               },
-              "widget_zoom": "Widget zoom",
+              "widget_zoom": "Widget Zoom",
               "toast_duration": "Продолжительность подсказки",
               "milliseconds": "миллисекунды"
             }
diff --git a/src/translations/zh_CN.json b/src/translations/zh_CN.json
index ff2b5f67..bcd1264e 100644
--- a/src/translations/zh_CN.json
+++ b/src/translations/zh_CN.json
@@ -324,7 +324,7 @@
               "text_only": "Text Only",
               "metro": "Metro"
             },
-            "styling": "Quick Links Styling",
+            "styling": "Styling",
             "styling_description": "Customise Quick Links appearance"
           },
           "message": {