diff --git a/.browserslistrc b/.browserslistrc
new file mode 100644
index 000000000..df2d47160
--- /dev/null
+++ b/.browserslistrc
@@ -0,0 +1,7 @@
+>0.2%
+not op_mini all
+Safari > 15
+Firefox >= 115
+Firefox ESR
+Android > 4
+not dead
diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 000000000..c5b9ea10e
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1 @@
+/build/webpack.prod.conf.js export-subst
diff --git a/.gitignore b/.gitignore
index 4df5ec838..0d5befd28 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,3 +8,4 @@ selenium-debug.log
 .idea/
 config/local.json
 static/emoji.json
+logs/
diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index 305155d84..de3beccca 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -1,23 +1,51 @@
 # This file is a template, and might need editing before it works on your project.
 # Official framework image. Look for the different tagged releases at:
 # https://hub.docker.com/r/library/node/tags/
-image: node:16
+image: node:18
 
 stages:
+  - check-changelog
   - lint
   - build
   - test
   - deploy
 
+# https://git.pleroma.social/help/ci/yaml/workflow.md#switch-between-branch-pipelines-and-merge-request-pipelines
+workflow:
+  rules:
+    - if: $CI_PIPELINE_SOURCE == "merge_request_event"
+    - if: $CI_COMMIT_BRANCH && $CI_OPEN_MERGE_REQUESTS
+      when: never
+    - if: $CI_COMMIT_BRANCH
+
+check-changelog:
+  stage: check-changelog
+  image: alpine
+  rules:
+    - if: $CI_MERGE_REQUEST_SOURCE_PROJECT_PATH == 'pleroma/pleroma-fe' && $CI_MERGE_REQUEST_SOURCE_BRANCH_NAME =~ /^renovate/
+      when: never
+    - if: $CI_MERGE_REQUEST_SOURCE_PROJECT_PATH == 'pleroma/pleroma-fe' && $CI_MERGE_REQUEST_SOURCE_BRANCH_NAME == 'weblate'
+      when: never
+    - if: $CI_MERGE_REQUEST_TARGET_BRANCH_NAME == "develop"
+  before_script: ''
+  after_script: ''
+  cache: {}
+  script:
+    - apk add git
+    - sh ./tools/check-changelog
+
 lint:
   stage: lint
   script:
     - yarn
-    - npm run lint
-    - npm run stylelint
+    - yarn lint
+    - yarn stylelint
 
 test:
   stage: test
+  tags:
+    - amd64
+    - himem
   variables:
     APT_CACHE_DIR: apt-cache
   script:
@@ -29,9 +57,12 @@ test:
 
 build:
   stage: build
+  tags:
+    - amd64
+    - himem
   script:
     - yarn
-    - npm run build
+    - yarn build
   artifacts:
     paths:
     - dist/
diff --git a/.node-version b/.node-version
index 5397c87fa..1fc51668f 100644
--- a/.node-version
+++ b/.node-version
@@ -1 +1 @@
-16.18.1
+18.20.6
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3fb729315..9844319e3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,105 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
+## 2.7.1
+Bugfix release. Added small optimizations to emoji picker that should make it a bit more responsive, however it needs rather large change to make it more performant which might come in a major release.
+
+### Fixed
+- Instance default theme not respected
+- Nested panel header having wrong sticky position if navbar height != panel header height
+- Toggled buttons having bad contrast (when using v2 theme)
+
+### Changed
+- Simplify the OAuth client_name to 'PleromaFE'
+- Small optimizations to emoji picker
+
+
+## 2.7.0
+
+### Known issues
+We got some reports related to emoji picker performance, this hopefully will be fixed in 2.7.1.
+
+### Notes
+This release overhauls how themes work, themes now need to be "compiled", which can cause some delay when loading for the first time and temporarily look "wrong" in some places (popups, menus, dialogs). Please do report any issues, especially if your theme looks wrong or breaks interface when loading. Also report issues if you're experiencing constant performance issues.
+
+To admins: remember that you can update PleromaFE to recent `master` or `develop` in admin dashboard in "Front-ends" tab, scroll down to find PleromaFE box and click "Reinstall `master`" or dropdown and then "Reinstall `develop`". Currently there is no mechanism to check if there is an update or not.
+
+### Changed
+- Overhauled the way themes work, migrating to new Pleroma Interface Style Sheets system aka "Themes 3".
+- Notifications are no longer sorted by "seen" status since interacting with them can change their read status and makes UI jumpy. Old behavior can be restored in settings.
+- Notifications are now shown through a ServiceWorker (since mobile chrome does not allow them otherwise), it's always enabled, even if previously we only enabled it for WebPush notifications only. If you don't like websites "running" while closed, check how to disable them in your browser. Old way to show notifications will be used as a fallback but might not have all the new features.
+- Reorganized Settings modal to move out visual stuff into Appearance tab
+
+### Added
+- Emoji pack management to the admin panel
+- Support `status` notification type (subscriptions/bell, fixes PleromaFE on newer PleromaBE versions)
+- Poll end notifications.
+- Added option to not mark all notifications when closing notifications drawer on mobile, this creates a new button to mark all as seen.
+- Option to always "show" notifications when using web push for better compatibility with some browsers (chrome, edge, safari)
+- Option to toggle what notification types appear in native notifications, by default less important ones (likes, repeats, etc) will no longer show up in native notifications.
+- Option to treat non-interactive notifications (likes, repeats et all) as seen for visual purposes (no read mark, ignored in counters, still can show in native notifications)
+- Ability to resize UI (and certain components) scale independent of browser/text scale
+- Ability to override certain aspects of UI style independent of theme used (UI roundness, fonts, underlay)
+- Theme selector with visual previews of the theme
+- Display loading and error indicator for conversation page
+- Option to only show scrobbles that are recent enough
+- Interacting (opening reply box etc) or simply clicking on non-interactive notifications now marks them as read. Clicking on native notifications for non-interactive ones also marks them as seen.
+- Support group actors
+- Focusing into a tab clears all current desktop notifications
+- Ability to change size of emoji
+- Ability to view APNG (Animated PNG) attachments.
+- Support showing extra notifications in the notifications column
+- Create a link to the URL of the scrobble when it's present
+- Allow hiding custom emojis in picker.
+- Ability to mute sensitive posts (ported from eintei).
+- Native notifications now also have "badge" property that matches instance's favicon (visible in Android Chromium at least)
+- Display public favorites on user profiles
+- Display quotes count on posts and add quotes list page
+- Show a dedicated registration notice page when further action is required after registering
+
+### Fixed
+- Synchronized requested notification types with backend, hopefully should fix missing notifications for polls and follow requests
+- Error that appeared on mobile Chromium (and derivatives) when native notifications are allowed
+- Being unable to set notification visibility for reports and follow requests
+- Native notifications appearing as many times as there are open tabs. Clicking on notification will focus last focused tab.
+- The expiry date indication won't be shown if the poll never expires
+- Profile mentions causing a 422 error on newer PleromaBE versions.
+- Color inputs are less ugly now
+- Unread notifications should now properly catch up between sessions (eventually) in polling mode
+- Video posters on Safari
+
+
+## 2.6.1
+### Fixed
+- fix admin dashboard not having any feedback on frontend installation
+- Fix frontend admin tab crashing when no primary frontend is set
+- Add aria attributes to react and extra buttons
+
+## 2.6.0
+### Added
+- add the initial i18n translation file for Taiwanese (Hokkien), and modify some related files.
+- Implemented a very basic instance administration screen
+- Implement quoting
+
+### Fixed
+- Keep aspect ratio of custom emoji reaction in notification
+- Fix openSettingsModalTab so that it correctly opens Settings modal instead of Admin modal
+- Add alt text to emoji picker buttons
+- Use export-subst gitattribute to allow tarball builds
+- fix reports now showing reason/content
+- Fix HTML attribute parsing, discard attributes not strating with a letter
+- Make MentionsLine aware of line breaking by non-br elements
+- Fix a bug where mentioning a user twice will not fill the mention into the textarea
+- Fix parsing non-ascii tags
+- Fix OAuth2 token lingering after revocation
+- fix regex issue in HTML parser/renderer
+- don't display quoted status twice
+- fix typo in code that prevented cards from showing at all
+- Fix react button not working if reaction accounts are not loaded
+- Fix react button misalignment on safari ios
+- Fix pinned statuses gone when reloading user timeline
+- Fix scrolling emoji selector in modal in safari ios
+
 ## 2.5.1
 ### Fixed
 - Checkboxes in settings can now work with screenreaders
diff --git a/build/build.js b/build/build.js
index 8242bc5f6..99ca49c06 100644
--- a/build/build.js
+++ b/build/build.js
@@ -9,7 +9,7 @@ var ora = require('ora')
 var webpack = require('webpack')
 var webpackConfig = require('./webpack.prod.conf')
 
-console.log(
+console.info(
   '  Tip:\n' +
   '  Built files are meant to be served over an HTTP server.\n' +
   '  Opening index.html over file:// won\'t work.\n'
diff --git a/build/check-versions.js b/build/check-versions.js
index e2b6cf74c..ed6256b3a 100644
--- a/build/check-versions.js
+++ b/build/check-versions.js
@@ -11,11 +11,6 @@ var versionRequirements = [
     name: 'node',
     currentVersion: semver.clean(process.version),
     versionRequirement: packageConfig.engines.node
-  },
-  {
-    name: 'npm',
-    currentVersion: exec('npm --version'),
-    versionRequirement: packageConfig.engines.npm
   }
 ]
 
@@ -32,14 +27,12 @@ module.exports = function () {
   }
 
   if (warnings.length) {
-    console.log('')
-    console.log(chalk.yellow('To use this template, you must update following to modules:'))
-    console.log()
+    console.warn(chalk.yellow('\nTo use this template, you must update following to modules:\n'))
     for (var i = 0; i < warnings.length; i++) {
       var warning = warnings[i]
-      console.log('  ' + warning)
+      console.warn('  ' + warning)
     }
-    console.log()
+    console.warn()
     process.exit(1)
   }
 }
diff --git a/build/dev-server.js b/build/dev-server.js
index e51ba9484..145072e70 100644
--- a/build/dev-server.js
+++ b/build/dev-server.js
@@ -72,10 +72,10 @@ app.use(staticPath, express.static('./static'))
 
 module.exports = app.listen(port, function (err) {
   if (err) {
-    console.log(err)
+    console.error(err)
     return
   }
   var uri = 'http://localhost:' + port
-  console.log('Listening at ' + uri + '\n')
+  console.info('Listening at ' + uri + '\n')
   // opn(uri)
 })
diff --git a/build/webpack.dev.conf.js b/build/webpack.dev.conf.js
index 97799f828..2369e0e87 100644
--- a/build/webpack.dev.conf.js
+++ b/build/webpack.dev.conf.js
@@ -23,7 +23,8 @@ module.exports = merge(baseWebpackConfig, {
       'COMMIT_HASH': JSON.stringify('DEV'),
       'DEV_OVERRIDES': JSON.stringify(config.dev.settings),
       '__VUE_OPTIONS_API__': true,
-      '__VUE_PROD_DEVTOOLS__': false
+      '__VUE_PROD_DEVTOOLS__': false,
+      '__VUE_PROD_HYDRATION_MISMATCH_DETAILS__': false
     }),
     // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
     new webpack.HotModuleReplacementPlugin(),
diff --git a/build/webpack.prod.conf.js b/build/webpack.prod.conf.js
index 7de937213..4282e4bd0 100644
--- a/build/webpack.prod.conf.js
+++ b/build/webpack.prod.conf.js
@@ -11,9 +11,16 @@ var env = process.env.NODE_ENV === 'testing'
     ? require('../config/test.env')
     : config.build.env
 
-let commitHash = require('child_process')
-    .execSync('git rev-parse --short HEAD')
-    .toString();
+let commitHash = (() => {
+  const subst = "$Format:%h$";
+  if(!subst.match(/Format:/)) {
+    return subst;
+  } else {
+    return require('child_process')
+      .execSync('git rev-parse --short HEAD')
+      .toString();
+  }
+})();
 
 var webpackConfig = merge(baseWebpackConfig, {
   mode: 'production',
@@ -43,7 +50,8 @@ var webpackConfig = merge(baseWebpackConfig, {
       'COMMIT_HASH': JSON.stringify(commitHash),
       'DEV_OVERRIDES': JSON.stringify(undefined),
       '__VUE_OPTIONS_API__': true,
-      '__VUE_PROD_DEVTOOLS__': false
+      '__VUE_PROD_DEVTOOLS__': false,
+      '__VUE_PROD_HYDRATION_MISMATCH_DETAILS__': false
     }),
     // extract css into its own file
     new MiniCssExtractPlugin({
diff --git a/changelog.d/backend-repo-url.skip b/changelog.d/backend-repo-url.skip
new file mode 100644
index 000000000..e69de29bb
diff --git a/changelog.d/batch2.skip b/changelog.d/batch2.skip
new file mode 100644
index 000000000..e69de29bb
diff --git a/changelog.d/better-shadow-control.fix b/changelog.d/better-shadow-control.fix
new file mode 100644
index 000000000..585ef6d26
--- /dev/null
+++ b/changelog.d/better-shadow-control.fix
@@ -0,0 +1 @@
+Updated shadow editor, hopefully fixed long-standing bugs, added ability to specify shadow's name.
diff --git a/changelog.d/bookmark-folders.add b/changelog.d/bookmark-folders.add
new file mode 100644
index 000000000..f22966602
--- /dev/null
+++ b/changelog.d/bookmark-folders.add
@@ -0,0 +1 @@
+Support bookmark folders
diff --git a/changelog.d/browsers-support.change b/changelog.d/browsers-support.change
new file mode 100644
index 000000000..a62e50240
--- /dev/null
+++ b/changelog.d/browsers-support.change
@@ -0,0 +1,9 @@
+Updated our build system to support browsers:
+  Safari >= 15
+  Firefox >= 115
+  Android > 4
+  no Opera Mini support
+  no IE support
+  no "dead" (unmaintained) browsers support
+
+This does not guarantee that browsers will or will not work.
diff --git a/changelog.d/checkbox.fix b/changelog.d/checkbox.fix
new file mode 100644
index 000000000..6a947ec8e
--- /dev/null
+++ b/changelog.d/checkbox.fix
@@ -0,0 +1 @@
+checkbox vertical alignment has been fixed
diff --git a/changelog.d/color-schemes.add b/changelog.d/color-schemes.add
new file mode 100644
index 000000000..5410730e1
--- /dev/null
+++ b/changelog.d/color-schemes.add
@@ -0,0 +1 @@
+Some new default color schemes
diff --git a/changelog.d/colorfuncs.fix b/changelog.d/colorfuncs.fix
new file mode 100644
index 000000000..18c49e2fc
--- /dev/null
+++ b/changelog.d/colorfuncs.fix
@@ -0,0 +1 @@
+Fix some of the color manipulation functions
diff --git a/changelog.d/custom.add b/changelog.d/custom.add
new file mode 100644
index 000000000..97848d7e4
--- /dev/null
+++ b/changelog.d/custom.add
@@ -0,0 +1 @@
+Added support for fetching /{resource}.custom.ext to allow adding instance-specific themes without altering sourcetree
diff --git a/changelog.d/customizable-actions.add b/changelog.d/customizable-actions.add
new file mode 100644
index 000000000..5ce6a5180
--- /dev/null
+++ b/changelog.d/customizable-actions.add
@@ -0,0 +1 @@
+Post actions can be customized
diff --git a/changelog.d/date-absolute.add b/changelog.d/date-absolute.add
new file mode 100644
index 000000000..d9365f464
--- /dev/null
+++ b/changelog.d/date-absolute.add
@@ -0,0 +1 @@
+Support displaying time in absolute format
diff --git a/changelog.d/denpmify-gitlab-ci.skip b/changelog.d/denpmify-gitlab-ci.skip
new file mode 100644
index 000000000..e69de29bb
diff --git a/changelog.d/deprecate-subscribe.change b/changelog.d/deprecate-subscribe.change
new file mode 100644
index 000000000..10fb34f46
--- /dev/null
+++ b/changelog.d/deprecate-subscribe.change
@@ -0,0 +1 @@
+Use /api/v1/accounts/:id/follow for account subscriptions instead of the deprecated routes
\ No newline at end of file
diff --git a/changelog.d/drafts-imp.skip b/changelog.d/drafts-imp.skip
new file mode 100644
index 000000000..e69de29bb
diff --git a/changelog.d/drafts.add b/changelog.d/drafts.add
new file mode 100644
index 000000000..1147016e3
--- /dev/null
+++ b/changelog.d/drafts.add
@@ -0,0 +1 @@
+Add draft management system
diff --git a/changelog.d/emoji-picker.add b/changelog.d/emoji-picker.add
new file mode 100644
index 000000000..d0ddb18eb
--- /dev/null
+++ b/changelog.d/emoji-picker.add
@@ -0,0 +1 @@
+fixed occasional overflows in emoji picker and made header scrollable
diff --git a/changelog.d/emoji-size.fix b/changelog.d/emoji-size.fix
new file mode 100644
index 000000000..a1189b833
--- /dev/null
+++ b/changelog.d/emoji-size.fix
@@ -0,0 +1 @@
+fix emoji inconsistencies in notifications, fix some emoji not scaling with interface
diff --git a/changelog.d/image-compression.add b/changelog.d/image-compression.add
new file mode 100644
index 000000000..d1f5a4fa4
--- /dev/null
+++ b/changelog.d/image-compression.add
@@ -0,0 +1 @@
+Added configurable image compression option in general settings, allowing users to control whether images are compressed before upload. 
\ No newline at end of file
diff --git a/changelog.d/misc-markup.fix b/changelog.d/misc-markup.fix
new file mode 100644
index 000000000..7af934a29
--- /dev/null
+++ b/changelog.d/misc-markup.fix
@@ -0,0 +1 @@
+Fix small markup inconsistencies
diff --git a/changelog.d/modals-mobile.change b/changelog.d/modals-mobile.change
new file mode 100644
index 000000000..e6a768c57
--- /dev/null
+++ b/changelog.d/modals-mobile.change
@@ -0,0 +1 @@
+modal layout for mobile has new layout to make it easy to use
diff --git a/changelog.d/modals.fix b/changelog.d/modals.fix
new file mode 100644
index 000000000..68278bfc0
--- /dev/null
+++ b/changelog.d/modals.fix
@@ -0,0 +1 @@
+fixed modals buttons overflow
diff --git a/changelog.d/multiple-status-mute-reasons.fix b/changelog.d/multiple-status-mute-reasons.fix
new file mode 100644
index 000000000..952ccea82
--- /dev/null
+++ b/changelog.d/multiple-status-mute-reasons.fix
@@ -0,0 +1 @@
+Fix whitespaces for multiple status mute reasons, display bot status reason
diff --git a/changelog.d/muted_user_en_translation.skip b/changelog.d/muted_user_en_translation.skip
new file mode 100644
index 000000000..1d39e49d1
--- /dev/null
+++ b/changelog.d/muted_user_en_translation.skip
@@ -0,0 +1 @@
+Added missing EN translation key for status.muted_user
diff --git a/changelog.d/mutes.change b/changelog.d/mutes.change
new file mode 100644
index 000000000..fa13609bb
--- /dev/null
+++ b/changelog.d/mutes.change
@@ -0,0 +1 @@
+better display of mute reason on posts
diff --git a/changelog.d/no-check-npm.skip b/changelog.d/no-check-npm.skip
new file mode 100644
index 000000000..e69de29bb
diff --git a/changelog.d/non-anonymous-polls.add b/changelog.d/non-anonymous-polls.add
new file mode 100644
index 000000000..9ff7f3adc
--- /dev/null
+++ b/changelog.d/non-anonymous-polls.add
@@ -0,0 +1 @@
+Inform users that Smithereen public polls are public
\ No newline at end of file
diff --git a/changelog.d/oauth-app-name.change b/changelog.d/oauth-app-name.change
new file mode 100644
index 000000000..15d6f87ee
--- /dev/null
+++ b/changelog.d/oauth-app-name.change
@@ -0,0 +1 @@
+Simplify the OAuth client_name to 'PleromaFE'
diff --git a/changelog.d/panel-stack.fix b/changelog.d/panel-stack.fix
new file mode 100644
index 000000000..518ff32fe
--- /dev/null
+++ b/changelog.d/panel-stack.fix
@@ -0,0 +1 @@
+proper sticky header for conversations on user page
diff --git a/changelog.d/piss-fix.skip b/changelog.d/piss-fix.skip
new file mode 100644
index 000000000..e69de29bb
diff --git a/changelog.d/piss-serialization.skip b/changelog.d/piss-serialization.skip
new file mode 100644
index 000000000..e69de29bb
diff --git a/changelog.d/quote-buttons.fix b/changelog.d/quote-buttons.fix
new file mode 100644
index 000000000..859e5d6c5
--- /dev/null
+++ b/changelog.d/quote-buttons.fix
@@ -0,0 +1 @@
+reply-or-quote buttons now take less space
diff --git a/changelog.d/roundup3.skip b/changelog.d/roundup3.skip
new file mode 100644
index 000000000..e69de29bb
diff --git a/changelog.d/show-bookmarks-on-mobile.fix b/changelog.d/show-bookmarks-on-mobile.fix
new file mode 100644
index 000000000..3b5db4834
--- /dev/null
+++ b/changelog.d/show-bookmarks-on-mobile.fix
@@ -0,0 +1 @@
+Bookmarks visible again on mobile
diff --git a/changelog.d/splashfix.skip b/changelog.d/splashfix.skip
new file mode 100644
index 000000000..e69de29bb
diff --git a/changelog.d/splashscreen.add b/changelog.d/splashscreen.add
new file mode 100644
index 000000000..f1f56551a
--- /dev/null
+++ b/changelog.d/splashscreen.add
@@ -0,0 +1 @@
+Splash screen + loading indicator to make process of identifying initialization issues and load performance
diff --git a/changelog.d/streaming-op-after-conn.change b/changelog.d/streaming-op-after-conn.change
new file mode 100644
index 000000000..73a79d843
--- /dev/null
+++ b/changelog.d/streaming-op-after-conn.change
@@ -0,0 +1 @@
+Authenticate and subscribe to streaming after connection
diff --git a/changelog.d/tabs.change b/changelog.d/tabs.change
new file mode 100644
index 000000000..e716ad427
--- /dev/null
+++ b/changelog.d/tabs.change
@@ -0,0 +1 @@
+Tabs now have indentation for better visibility of which tab is currently active
diff --git a/changelog.d/themes3.add b/changelog.d/themes3.add
new file mode 100644
index 000000000..040957ced
--- /dev/null
+++ b/changelog.d/themes3.add
@@ -0,0 +1 @@
+UI for making v3 themes and palettes, support for bundling v3 themes
diff --git a/changelog.d/upload-resizing.add b/changelog.d/upload-resizing.add
new file mode 100644
index 000000000..355a1d898
--- /dev/null
+++ b/changelog.d/upload-resizing.add
@@ -0,0 +1 @@
+Resize most kinds of images on upload.
diff --git a/changelog.d/user-link.add b/changelog.d/user-link.add
new file mode 100644
index 000000000..ca65aa5fa
--- /dev/null
+++ b/changelog.d/user-link.add
@@ -0,0 +1 @@
+Make UserLink wrappable
diff --git a/changelog.d/vue.change b/changelog.d/vue.change
new file mode 100644
index 000000000..a8fc21720
--- /dev/null
+++ b/changelog.d/vue.change
@@ -0,0 +1 @@
+Upgraded Vue to version 3.5
diff --git a/changelog.d/vuex-devtools.skip b/changelog.d/vuex-devtools.skip
new file mode 100644
index 000000000..e69de29bb
diff --git a/changelog.d/weird-absolute-time-format.fix b/changelog.d/weird-absolute-time-format.fix
new file mode 100644
index 000000000..727d58764
--- /dev/null
+++ b/changelog.d/weird-absolute-time-format.fix
@@ -0,0 +1 @@
+Show only month and day instead of weird "day, hour" format. While at it, fixed typo "defualt" in a comment.
\ No newline at end of file
diff --git a/config/index.js b/config/index.js
index 023d4c9bc..ff89274ad 100644
--- a/config/index.js
+++ b/config/index.js
@@ -8,10 +8,10 @@ try {
     // and that's how actual BE reports its url
     settings.target = settings.target.replace(/\/$/, '')
   }
-  console.log('Using local dev server settings (/config/local.json):')
-  console.log(JSON.stringify(settings, null, 2))
+  console.info('Using local dev server settings (/config/local.json):')
+  console.info(JSON.stringify(settings, null, 2))
 } catch (e) {
-  console.log('Local dev server settings not found (/config/local.json)')
+  console.info('Local dev server settings not found (/config/local.json)')
 }
 
 const target = settings.target || 'http://localhost:4000/'
diff --git a/index.html b/index.html
index a02939f7e..63f071aac 100644
--- a/index.html
+++ b/index.html
@@ -3,12 +3,163 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
+    <!-- putting styles here to avoid having to wait for styles to load up -->
+    <style id="splashscreen">
+     #splash {
+       --scale: 1;
+       width: 100vw;
+       height: 100vh;
+       display: grid;
+       grid-template-rows: auto;
+       grid-template-columns: auto;
+       align-content: center;
+       align-items: center;
+       justify-content: center;
+       justify-items: center;
+       flex-direction: column;
+       background: #0f161e;
+       font-family: sans-serif;
+       color: #b9b9ba;
+       position: absolute;
+       z-index: 9999;
+       font-size: calc(1vw + 1vh + 1vmin);
+     }
+
+     #splash-credit {
+       position: absolute;
+       font-size: 14px;
+       bottom: 16px;
+       right: 16px;
+     }
+
+     #splash-container {
+       align-items: center;
+     }
+
+     #mascot-container {
+       display: flex;
+       align-items: flex-end;
+       justify-content: center;
+       perspective: 60em;
+       perspective-origin: 0 -15em;
+       transform-style: preserve-3d;
+     }
+
+     #mascot {
+       width: calc(10em * var(--scale));
+       height: calc(10em * var(--scale));
+       object-fit: contain;
+       object-position: bottom;
+       transform: translateZ(-2em);
+     }
+
+     #throbber {
+       display: grid;
+       width: calc(5em * 0.5 * var(--scale));
+       height: calc(8em * 0.5 * var(--scale));
+       margin-left: 4.1em;
+       z-index: 2;
+       grid-template-rows: repeat(8, 1fr);
+       grid-template-columns: repeat(5, 1fr);
+       grid-template-areas: "P P . L L"
+                            "P P . L L"
+                            "P P . L L"
+                            "P P . L L"
+                            "P P . . ."
+                            "P P . . ."
+                            "P P . E E"
+                            "P P . E E";
+
+       --logoChunkSize: calc(2em * 0.5 * var(--scale))
+     }
+
+     .chunk {
+       background-color: #e2b188;
+       box-shadow: 0.01em 0.01em 0.1em 0 #e2b188;
+     }
+
+     #chunk-P {
+       grid-area: P;
+       border-top-left-radius:  calc(var(--logoChunkSize) / 2);
+     }
+
+     #chunk-L {
+       grid-area: L;
+       border-bottom-right-radius: calc(var(--logoChunkSize) / 2);
+     }
+
+     #chunk-E {
+       grid-area: E;
+       border-bottom-right-radius: calc(var(--logoChunkSize) / 2);
+     }
+
+     #status {
+       margin-top: 1em;
+       line-height: 2;
+       width: 100%;
+       text-align: center;
+     }
+
+     #statusError {
+       display: none;
+       margin-top: 1em;
+       font-size: calc(1vw + 1vh + 1vmin);
+       line-height: 2;
+       width: 100%;
+       text-align: center;
+     }
+
+     #statusStack {
+       display: none;
+       margin-top: 1em;
+       font-size: calc((1vw + 1vh + 1vmin) / 2.5);
+       width: calc(100vw - 5em);
+       padding: 1em;
+       text-overflow: ellipsis;
+       overflow-x: hidden;
+       text-align: left;
+       line-height: 2;
+     }
+
+     @media (prefers-reduced-motion) {
+       #throbber {
+         animation: none !important;
+       }
+     }
+    </style>
+    <style id="pleroma-eager-styles" type="text/css"></style>
+    <style id="pleroma-lazy-styles" type="text/css"></style>
     <!--server-generated-meta-->
-    <link rel="icon" type="image/png" href="/favicon.png">
   </head>
-  <body class="hidden">
+  <body style="margin: 0; padding: 0">
     <noscript>To use Pleroma, please enable JavaScript.</noscript>
-    <div id="app"></div>
+    <div id="splash">
+      <!-- we are hiding entire graphic so no point showing credit -->
+      <div aria-hidden="true" id="splash-credit">
+        Art by pipivovott
+      </div>
+      <div id="splash-container">
+        <div aria-hidden="true" id="mascot-container">
+          <div id="throbber">
+            <div class="chunk" id="chunk-P">
+            </div>
+            <div class="chunk" id="chunk-L">
+            </div>
+            <div class="chunk" id="chunk-E">
+            </div>
+          </div>
+          <img id="mascot" src="/static/pleromatan_apology.png">
+        </div>
+        <div id="status" class="css-ok">
+          <!-- (｡>﹏<) -->
+          <!-- it's a pseudographic, don't want screenreader read out nonsense -->
+          <span aria-hidden="true" class="initial-text">(｡&gt;﹏&lt;)</span>
+        </div>
+        <code id="statusError"></code>
+        <pre id="statusStack"></pre>
+      </div>
+    </div>
+    <div id="app" class="hidden"></div>
     <div id="modal"></div>
     <!-- built files will be auto injected -->
     <div id="popovers" />
diff --git a/package.json b/package.json
index 0cba43903..4f70f4fc1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "pleroma_fe",
-  "version": "2.5.0",
+  "version": "2.7.1",
   "description": "Pleroma frontend, the default frontend of Pleroma social network server",
   "author": "Pleroma contributors <https://git.pleroma.social/pleroma/pleroma-fe/-/blob/develop/CONTRIBUTORS.md>",
   "private": false,
@@ -10,110 +10,110 @@
     "unit": "karma start test/unit/karma.conf.js --single-run",
     "unit:watch": "karma start test/unit/karma.conf.js --single-run=false",
     "e2e": "node test/e2e/runner.js",
-    "test": "npm run unit && npm run e2e",
-    "stylelint": "npx stylelint '**/*.scss' '**/*.vue'",
+    "test": "yarn run unit && yarn run e2e",
+    "stylelint": "yarn exec stylelint '**/*.scss' '**/*.vue'",
     "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs",
     "lint-fix": "eslint --fix --ext .js,.vue src test/unit/specs test/e2e/specs"
   },
   "dependencies": {
-    "@babel/runtime": "7.21.0",
+    "@babel/runtime": "7.26.7",
     "@chenfengyuan/vue-qrcode": "2.0.0",
-    "@fortawesome/fontawesome-svg-core": "6.3.0",
-    "@fortawesome/free-regular-svg-icons": "6.3.0",
-    "@fortawesome/free-solid-svg-icons": "6.3.0",
-    "@fortawesome/vue-fontawesome": "3.0.3",
+    "@fortawesome/fontawesome-svg-core": "6.7.2",
+    "@fortawesome/free-regular-svg-icons": "6.7.2",
+    "@fortawesome/free-solid-svg-icons": "6.7.2",
+    "@fortawesome/vue-fontawesome": "3.0.8",
     "@kazvmoe-infra/pinch-zoom-element": "1.2.0",
     "@kazvmoe-infra/unicode-emoji-json": "0.4.0",
-    "@ruffle-rs/ruffle": "0.1.0-nightly.2022.7.12",
-    "@vuelidate/core": "2.0.0",
-    "@vuelidate/validators": "2.0.0",
+    "@ruffle-rs/ruffle": "0.1.0-nightly.2025.1.13",
+    "@vuelidate/core": "2.0.3",
+    "@vuelidate/validators": "2.0.4",
     "body-scroll-lock": "3.1.5",
     "chromatism": "3.0.0",
     "click-outside-vue3": "4.0.1",
-    "cropperjs": "1.5.12",
+    "cropperjs": "1.6.2",
     "escape-html": "1.0.3",
-    "js-cookie": "3.0.1",
+    "hash-sum": "^2.0.0",
+    "js-cookie": "3.0.5",
     "localforage": "1.10.0",
+    "pako": "^2.1.0",
     "parse-link-header": "2.0.0",
-    "phoenix": "1.6.2",
-    "pinia": "^2.0.33",
-    "punycode.js": "2.3.0",
-    "qrcode": "1.5.0",
+    "phoenix": "1.7.18",
+    "punycode.js": "2.3.1",
+    "qrcode": "1.5.4",
     "querystring-es3": "0.2.1",
-    "url": "0.11.0",
+    "url": "0.11.4",
     "utf8": "3.0.0",
-    "vue": "3.2.45",
-    "vue-i18n": "9.2.2",
-    "vue-router": "4.1.6",
-    "vue-template-compiler": "2.7.14",
+    "vue": "3.5.13",
+    "vue-i18n": "10",
+    "vue-router": "4.5.0",
     "vue-virtual-scroller": "^2.0.0-beta.7",
     "vuex": "4.1.0"
   },
   "devDependencies": {
-    "@babel/core": "7.21.0",
-    "@babel/eslint-parser": "7.19.1",
-    "@babel/plugin-transform-runtime": "7.21.0",
-    "@babel/preset-env": "7.20.2",
-    "@babel/register": "7.21.0",
+    "@babel/core": "7.26.7",
+    "@babel/eslint-parser": "7.26.5",
+    "@babel/plugin-transform-runtime": "7.25.9",
+    "@babel/preset-env": "7.26.7",
+    "@babel/register": "7.25.9",
     "@intlify/vue-i18n-loader": "5.0.1",
-    "@ungap/event-target": "0.2.3",
+    "@ungap/event-target": "0.2.4",
     "@vue/babel-helper-vue-jsx-merge-props": "1.4.0",
-    "@vue/babel-plugin-jsx": "1.1.1",
-    "@vue/compiler-sfc": "3.2.45",
-    "@vue/test-utils": "2.2.8",
-    "autoprefixer": "10.4.13",
-    "babel-loader": "9.1.2",
+    "@vue/babel-plugin-jsx": "1.2.5",
+    "@vue/compiler-sfc": "3.5.13",
+    "@vue/test-utils": "2.4.6",
+    "autoprefixer": "10.4.20",
+    "babel-loader": "9.2.1",
     "babel-plugin-lodash": "3.3.4",
-    "chai": "4.3.7",
+    "chai": "4.5.0",
     "chalk": "1.1.3",
     "chromedriver": "108.0.0",
     "connect-history-api-fallback": "2.0.0",
     "copy-webpack-plugin": "11.0.0",
-    "cross-spawn": "7.0.3",
-    "css-loader": "6.7.3",
+    "cross-spawn": "7.0.6",
+    "css-loader": "6.11.0",
     "css-minimizer-webpack-plugin": "4.2.2",
     "custom-event-polyfill": "1.0.7",
-    "eslint": "8.33.0",
-    "eslint-config-standard": "17.0.0",
+    "eslint": "8.57.1",
+    "eslint-config-standard": "17.1.0",
     "eslint-formatter-friendly": "7.0.0",
-    "eslint-plugin-import": "2.27.5",
-    "eslint-plugin-n": "15.6.1",
-    "eslint-plugin-promise": "6.1.1",
-    "eslint-plugin-vue": "9.9.0",
+    "eslint-plugin-import": "2.31.0",
+    "eslint-plugin-n": "15.7.0",
+    "eslint-plugin-promise": "6.6.0",
+    "eslint-plugin-vue": "9.32.0",
     "eslint-webpack-plugin": "3.2.0",
     "eventsource-polyfill": "0.9.6",
-    "express": "4.18.2",
-    "function-bind": "1.1.1",
-    "html-webpack-plugin": "5.5.0",
-    "http-proxy-middleware": "2.0.6",
+    "express": "4.21.2",
+    "function-bind": "1.1.2",
+    "html-webpack-plugin": "5.6.3",
+    "http-proxy-middleware": "2.0.7",
     "iso-639-1": "2.1.15",
     "json-loader": "0.5.7",
-    "karma": "6.4.1",
-    "karma-coverage": "2.2.0",
-    "karma-firefox-launcher": "2.1.2",
+    "karma": "6.4.4",
+    "karma-coverage": "2.2.1",
+    "karma-firefox-launcher": "2.1.3",
     "karma-mocha": "2.0.1",
     "karma-mocha-reporter": "2.2.5",
     "karma-sinon-chai": "2.0.2",
-    "karma-sourcemap-loader": "0.3.8",
+    "karma-sourcemap-loader": "0.4.0",
     "karma-spec-reporter": "0.0.36",
-    "karma-webpack": "5.0.0",
+    "karma-webpack": "5.0.1",
     "lodash": "4.17.21",
-    "mini-css-extract-plugin": "2.7.2",
-    "mocha": "10.2.0",
-    "nightwatch": "2.6.19",
+    "mini-css-extract-plugin": "2.9.2",
+    "mocha": "10.8.2",
+    "nightwatch": "2.6.25",
     "opn": "5.5.0",
     "ora": "0.4.1",
-    "postcss": "8.4.20",
+    "postcss": "8.5.1",
     "postcss-html": "^1.5.0",
     "postcss-loader": "7.0.2",
     "postcss-scss": "^4.0.6",
     "sass": "1.60.0",
-    "sass-loader": "13.2.0",
-    "selenium-server": "2.53.1",
-    "semver": "7.3.8",
+    "sass-loader": "13.3.3",
+    "selenium-server": "3.141.59",
+    "semver": "7.6.3",
     "serviceworker-webpack5-plugin": "2.0.0",
     "shelljs": "0.8.5",
-    "sinon": "15.0.1",
+    "sinon": "15.2.0",
     "sinon-chai": "3.7.0",
     "stylelint": "14.16.1",
     "stylelint-config-html": "^1.1.0",
@@ -130,7 +130,7 @@
     "webpack-merge": "0.20.0"
   },
   "engines": {
-    "node": ">= 16.0.0",
-    "npm": ">= 3.0.0"
-  }
+    "node": ">= 16.0.0"
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }
diff --git a/preview.style.js b/preview.style.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/App.js b/src/App.js
index f283b3f14..87bf8319f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -46,16 +46,36 @@ export default {
   data: () => ({
     mobileActivePanel: 'timeline'
   }),
+  watch: {
+    themeApplied (value) {
+      this.removeSplash()
+    },
+    layoutType (value) {
+      document.getElementById('modal').classList = ['-' + this.layoutType]
+    }
+  },
   created () {
     // Load the locale from the storage
     const val = this.$store.getters.mergedConfig.interfaceLanguage
     this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
     window.addEventListener('resize', this.updateMobileState)
+    document.getElementById('modal').classList = ['-' + this.layoutType]
+  },
+  mounted () {
+    if (this.$store.state.interface.themeApplied) {
+      this.removeSplash()
+    }
   },
   unmounted () {
     window.removeEventListener('resize', this.updateMobileState)
   },
   computed: {
+    themeApplied () {
+      return this.$store.state.interface.themeApplied
+    },
+    layoutModalClass () {
+      return '-' + this.layoutType
+    },
     classes () {
       return [
         {
@@ -132,6 +152,15 @@ export default {
     updateMobileState () {
       useInterfaceStore().setLayoutWidth(windowWidth())
       useInterfaceStore().setLayoutHeight(windowHeight())
+    },
+    removeSplash () {
+      document.querySelector('#status').textContent = this.$t('splash.fun_' + Math.ceil(Math.random() * 4))
+      const splashscreenRoot = document.querySelector('#splash')
+      splashscreenRoot.addEventListener('transitionend', () => {
+        splashscreenRoot.remove()
+      })
+      splashscreenRoot.classList.add('hidden')
+      document.querySelector('#app').classList.remove('hidden')
     }
   }
 }
diff --git a/src/App.scss b/src/App.scss
index 3f352e8d9..c0f2e3fec 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -1,10 +1,9 @@
 // stylelint-disable rscss/class-format
 /* stylelint-disable no-descending-specificity */
-@import "./variables";
 @import "./panel";
 
 :root {
-  --navbar-height: 3.5rem;
+  --status-margin: 0.75em;
   --post-line-height: 1.4;
   // Z-Index stuff
   --ZI_media_modal: 9000;
@@ -13,19 +12,25 @@
   --ZI_navbar_popovers: 7500;
   --ZI_navbar: 7000;
   --ZI_popovers: 6000;
+
+  // Fallback for when stuff is loading
+  --background: var(--bg);
 }
 
 html {
-  font-size: 14px;
+  font-size: var(--textSize, 14px);
+
+  --navbar-height: var(--navbarSize, 3.5rem);
+  --emoji-size: var(--emojiSize, 32px);
+  --panel-header-height: var(--panelHeaderSize, 3.2rem);
   // overflow-x: clip causes my browser's tab to crash with SIGILL lul
 }
 
 body {
   font-family: sans-serif;
-  font-family: var(--interfaceFont, sans-serif);
+  font-family: var(--font);
   margin: 0;
-  color: $fallback--text;
-  color: var(--text, $fallback--text);
+  color: var(--text);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   overscroll-behavior-y: none;
@@ -42,17 +47,35 @@ body {
 // have a cursor/pointer to operate them
 @media (any-pointer: fine) {
   * {
-    scrollbar-color: var(--btn) transparent;
+    scrollbar-color: var(--fg) transparent;
 
     &::-webkit-scrollbar {
       background: transparent;
     }
 
+    &::-webkit-scrollbar-corner {
+      background: transparent;
+    }
+
+    &::-webkit-resizer {
+      /* stylelint-disable-next-line declaration-no-important */
+      background-color: transparent !important;
+      background-image:
+        linear-gradient(
+          135deg,
+          transparent calc(50% - 1px),
+          var(--textFaint) 50%,
+          transparent calc(50% + 1px),
+          transparent calc(75% - 1px),
+          var(--textFaint) 75%,
+          transparent calc(75% + 1px),
+        );
+    }
+
     &::-webkit-scrollbar-button,
     &::-webkit-scrollbar-thumb {
-      background-color: var(--btn);
-      box-shadow: var(--buttonShadow);
-      border-radius: var(--btnRadius);
+      box-shadow: var(--shadow);
+      border-radius: var(--roundness);
     }
 
     // horizontal/vertical/increment/decrement are webkit-specific stuff
@@ -61,7 +84,7 @@ body {
     &::-webkit-scrollbar-button {
       --___bgPadding: 2px;
 
-      color: var(--btnText);
+      color: var(--text);
       background-repeat: no-repeat, no-repeat;
 
       &:horizontal {
@@ -69,15 +92,15 @@ body {
 
         &:increment {
           background-image:
-            linear-gradient(45deg, var(--btnText) 50%, transparent 51%),
-            linear-gradient(-45deg, transparent 50%, var(--btnText) 51%);
+            linear-gradient(45deg, var(--text) 50%, transparent 51%),
+            linear-gradient(-45deg, transparent 50%, var(--text) 51%);
           background-position: top var(--___bgPadding) left 50%, right 50% bottom var(--___bgPadding);
         }
 
         &:decrement {
           background-image:
-            linear-gradient(45deg, transparent 50%, var(--btnText) 51%),
-            linear-gradient(-45deg, var(--btnText) 50%, transparent 51%);
+            linear-gradient(45deg, transparent 50%, var(--text) calc(50% + 1px)),
+            linear-gradient(-45deg, var(--text) 50%, transparent 51%);
           background-position: bottom var(--___bgPadding) right 50%, left 50% top var(--___bgPadding);
         }
       }
@@ -87,15 +110,15 @@ body {
 
         &:increment {
           background-image:
-            linear-gradient(-45deg, transparent 50%, var(--btnText) 51%),
-            linear-gradient(45deg, transparent 50%, var(--btnText) 51%);
+            linear-gradient(-45deg, transparent 50%, var(--text) 51%),
+            linear-gradient(45deg, transparent 50%, var(--text) 51%);
           background-position: right var(--___bgPadding) top 50%, left var(--___bgPadding) top 50%;
         }
 
         &:decrement {
           background-image:
-            linear-gradient(-45deg, var(--btnText) 50%, transparent 51%),
-            linear-gradient(45deg, var(--btnText) 50%, transparent 51%);
+            linear-gradient(-45deg, var(--text) 50%, transparent 51%),
+            linear-gradient(45deg, var(--text) 50%, transparent 51%);
           background-position: left var(--___bgPadding) top 50%, right var(--___bgPadding) top 50%;
         }
       }
@@ -104,15 +127,14 @@ body {
   }
   // Body should have background to scrollbar otherwise it will use white (body color?)
   html {
-    scrollbar-color: var(--selectedMenu) var(--wallpaper);
+    scrollbar-color: var(--fg) var(--wallpaper);
     background: var(--wallpaper);
   }
 }
 
 a {
   text-decoration: none;
-  color: $fallback--link;
-  color: var(--link, $fallback--link);
+  color: var(--link);
 }
 
 h4 {
@@ -128,29 +150,15 @@ h4 {
 i[class*="icon-"],
 .svg-inline--fa,
 .iconLetter {
-  color: $fallback--icon;
-  color: var(--icon, $fallback--icon);
-}
-
-.button-unstyled:hover,
-a:hover {
-  > i[class*="icon-"],
-  > .svg-inline--fa,
-  > .iconLetter {
-    color: var(--text);
-  }
+  color: var(--icon);
 }
 
 nav {
   z-index: var(--ZI_navbar);
-  background-color: $fallback--fg;
-  background-color: var(--topBar, $fallback--fg);
-  color: $fallback--faint;
-  color: var(--faint, $fallback--faint);
-  box-shadow: 0 0 4px rgb(0 0 0 / 60%);
-  box-shadow: var(--topBarShadow);
+  box-shadow: var(--shadow);
   box-sizing: border-box;
   height: var(--navbar-height);
+  font-size: calc(var(--navbar-height) / 3.5);
   position: fixed;
 }
 
@@ -195,16 +203,14 @@ nav {
   grid-column: 1 / span 3;
   grid-row: 1 / 1;
   pointer-events: none;
-  background-color: rgb(0 0 0 / 15%);
-  background-color: var(--underlay, rgb(0 0 0 / 15%));
+  background-color: var(--underlay);
   z-index: -1000;
 }
 
 .app-layout {
   --miniColumn: 25rem;
   --maxiColumn: 45rem;
-  --columnGap: 1em;
-  --status-margin: 0.75em;
+  --columnGap: 1rem;
   --effectiveSidebarColumnWidth: minmax(var(--miniColumn), var(--sidebarColumnWidth, var(--miniColumn)));
   --effectiveNotifsColumnWidth: minmax(var(--miniColumn), var(--notifsColumnWidth, var(--miniColumn)));
   --effectiveContentColumnWidth: minmax(var(--miniColumn), var(--contentColumnWidth, var(--maxiColumn)));
@@ -366,106 +372,126 @@ nav {
 
 .button-default {
   user-select: none;
-  color: $fallback--text;
-  color: var(--btnText, $fallback--text);
-  background-color: $fallback--fg;
-  background-color: var(--btn, $fallback--fg);
+  color: var(--text);
   border: none;
-  border-radius: $fallback--btnRadius;
-  border-radius: var(--btnRadius, $fallback--btnRadius);
   cursor: pointer;
-  box-shadow: $fallback--buttonShadow;
-  box-shadow: var(--buttonShadow);
+  background-color: var(--background);
+  box-shadow: var(--shadow);
   font-size: 1em;
   font-family: sans-serif;
-  font-family: var(--interfaceFont, sans-serif);
-
-  &.-sublime {
-    background: transparent;
-  }
-
-  i[class*="icon-"],
-  .svg-inline--fa {
-    color: $fallback--text;
-    color: var(--btnText, $fallback--text);
-  }
+  font-family: var(--font);
 
   &::-moz-focus-inner {
     border: none;
   }
 
-  &:hover {
-    box-shadow: 0 0 4px rgb(255 255 255 / 30%);
-    box-shadow: var(--buttonHoverShadow);
-  }
-
-  &:active {
-    box-shadow:
-      0 0 4px 0 rgb(255 255 255 / 30%),
-      0 1px 0 0 rgb(0 0 0 / 20%) inset,
-      0 -1px 0 0 rgb(255 255 255 / 20%) inset;
-    box-shadow: var(--buttonPressedShadow);
-    color: $fallback--text;
-    color: var(--btnPressedText, $fallback--text);
-    background-color: $fallback--fg;
-    background-color: var(--btnPressed, $fallback--fg);
-
-    svg,
-    i {
-      color: $fallback--text;
-      color: var(--btnPressedText, $fallback--text);
-    }
-  }
-
   &:disabled {
     cursor: not-allowed;
-    color: $fallback--text;
-    color: var(--btnDisabledText, $fallback--text);
-    background-color: $fallback--fg;
-    background-color: var(--btnDisabled, $fallback--fg);
+  }
+}
 
-    svg,
-    i {
-      color: $fallback--text;
-      color: var(--btnDisabledText, $fallback--text);
-    }
+.menu-item {
+  line-height: var(--__line-height);
+  font-family: inherit;
+  font-weight: 400;
+  font-size: 100%;
+  cursor: pointer;
+
+  a,
+  button:not(.button-default) {
+    color: var(--text);
+    font-size: 100%;
   }
 
-  &.toggled {
-    color: $fallback--text;
-    color: var(--btnToggledText, $fallback--text);
-    background-color: $fallback--fg;
-    background-color: var(--btnToggled, $fallback--fg);
-    box-shadow:
-      0 0 4px 0 rgb(255 255 255 / 30%),
-      0 1px 0 0 rgb(0 0 0 / 20%) inset,
-      0 -1px 0 0 rgb(255 255 255 / 20%) inset;
-    box-shadow: var(--buttonPressedShadow);
+  &.disabled {
+    cursor: not-allowed;
+  }
+}
 
-    svg,
-    i {
-      color: $fallback--text;
-      color: var(--btnToggledText, $fallback--text);
-    }
+.list-item {
+  border-color: var(--border);
+  border-style: solid;
+  border-width: 0;
+  border-top-width: 1px;
+
+  &.-active,
+  &:hover {
+    border-top-width: 1px;
+    border-bottom-width: 1px;
   }
 
-  &.danger {
-    // TODO: add better color variable
-    color: $fallback--text;
-    color: var(--alertErrorPanelText, $fallback--text);
-    background-color: $fallback--alertError;
-    background-color: var(--alertError, $fallback--alertError);
+  &.-active + &,
+  &:hover + & {
+    border-top-width: 0;
+  }
+
+  &:hover + .menu-item-collapsible:not(.-expanded) + &,
+  &.-active + .menu-item-collapsible:not(.-expanded) + & {
+    border-top-width: 0;
+  }
+
+  &[aria-expanded="true"] {
+    border-bottom-width: 1px;
+  }
+
+  &:first-child {
+    border-top-right-radius: var(--roundness);
+    border-top-left-radius: var(--roundness);
+    border-top-width: 0;
+  }
+
+  &:last-child {
+    border-bottom-right-radius: var(--roundness);
+    border-bottom-left-radius: var(--roundness);
+    border-bottom-width: 0;
+  }
+}
+
+.menu-item,
+.list-item {
+  display: block;
+  box-sizing: border-box;
+  border: none;
+  outline: none;
+  text-align: initial;
+  color: inherit;
+  clear: both;
+  position: relative;
+  white-space: nowrap;
+  width: 100%;
+  padding: var(--__vertical-gap) var(--__horizontal-gap);
+  background: transparent;
+
+  --__line-height: 1.5em;
+  --__horizontal-gap: 0.75em;
+  --__vertical-gap: 0.5em;
+
+  &.-non-interactive {
+    cursor: auto;
+  }
+
+  a,
+  button:not(.button-default) {
+    text-align: initial;
+    padding: 0;
+    background: none;
+    border: none;
+    outline: none;
+    display: inline;
+    font-family: inherit;
+    line-height: unset;
   }
 }
 
 .button-unstyled {
-  background: none;
   border: none;
   outline: none;
   display: inline;
   text-align: initial;
   font-size: 100%;
   font-family: inherit;
+  box-shadow: var(--shadow);
+  background-color: transparent;
   padding: 0;
   line-height: unset;
   cursor: pointer;
@@ -473,28 +499,23 @@ nav {
   color: inherit;
 
   &.-link {
-    color: $fallback--link;
-    color: var(--link, $fallback--link);
-  }
-
-  &.-fullwidth {
-    width: 100%;
-  }
-
-  &.-hover-highlight {
-    &:hover svg {
-      color: $fallback--lightText;
-      color: var(--lightText, $fallback--lightText);
-    }
+    /* stylelint-disable-next-line declaration-no-important */
+    color: var(--link) !important;
   }
 }
 
 input,
-textarea,
+textarea {
+  border: none;
+  display: inline-block;
+  outline: none;
+}
+
 .input {
   &.unstyled {
     border-radius: 0;
-    background: none;
+    /* stylelint-disable-next-line declaration-no-important */
+    background: none !important;
     box-shadow: none;
     height: unset;
   }
@@ -502,19 +523,10 @@ textarea,
   --_padding: 0.5em;
 
   border: none;
-  border-radius: $fallback--inputRadius;
-  border-radius: var(--inputRadius, $fallback--inputRadius);
-  box-shadow:
-    0 1px 0 0 rgb(0 0 0 / 20%) inset,
-    0 -1px 0 0 rgb(255 255 255 / 20%) inset,
-    0 0 2px 0 rgb(0 0 0 / 100%) inset;
-  box-shadow: var(--inputShadow);
-  background-color: $fallback--fg;
-  background-color: var(--input, $fallback--fg);
-  color: $fallback--lightText;
-  color: var(--inputText, $fallback--lightText);
-  font-family: sans-serif;
-  font-family: var(--inputFont, sans-serif);
+  background-color: var(--background);
+  color: var(--text);
+  box-shadow: var(--shadow);
+  font-family: var(--font);
   font-size: 1em;
   margin: 0;
   box-sizing: border-box;
@@ -528,7 +540,6 @@ textarea,
   &[disabled="disabled"],
   &.disabled {
     cursor: not-allowed;
-    opacity: 0.5;
   }
 
   &[type="range"] {
@@ -543,9 +554,9 @@ textarea,
     display: none;
 
     &:checked + label::before {
-      box-shadow: 0 0 2px black inset, 0 0 0 4px $fallback--fg inset;
-      box-shadow: var(--inputShadow), 0 0 0 4px var(--fg, $fallback--fg) inset;
-      background-color: var(--accent, $fallback--link);
+      box-shadow: var(--shadow);
+      background-color: var(--background);
+      color: var(--text);
     }
 
     &:disabled {
@@ -559,16 +570,14 @@ textarea,
     + label::before {
       flex-shrink: 0;
       display: inline-block;
-      content: "";
+      content: "•";
       transition: box-shadow 200ms;
       width: 1.1em;
       height: 1.1em;
       border-radius: 100%; // Radio buttons should always be circle
-      box-shadow: 0 0 2px black inset;
-      box-shadow: var(--inputShadow);
+      background-color: var(--background);
+      box-shadow: var(--shadow);
       margin-right: 0.5em;
-      background-color: $fallback--fg;
-      background-color: var(--input, $fallback--fg);
       vertical-align: top;
       text-align: center;
       line-height: 1.1;
@@ -581,8 +590,9 @@ textarea,
 
   &[type="checkbox"] {
     &:checked + label::before {
-      color: $fallback--text;
-      color: var(--inputText, $fallback--text);
+      color: var(--text);
+      background-color: var(--background);
+      box-shadow: var(--shadow);
     }
 
     &:disabled {
@@ -600,13 +610,9 @@ textarea,
       transition: color 200ms;
       width: 1.1em;
       height: 1.1em;
-      border-radius: $fallback--checkboxRadius;
-      border-radius: var(--checkboxRadius, $fallback--checkboxRadius);
-      box-shadow: 0 0 2px black inset;
-      box-shadow: var(--inputShadow);
+      border-radius: var(--roundness);
+      box-shadow: var(--shadow);
       margin-right: 0.5em;
-      background-color: $fallback--fg;
-      background-color: var(--input, $fallback--fg);
       vertical-align: top;
       text-align: center;
       line-height: 1.1;
@@ -622,17 +628,26 @@ textarea,
   }
 }
 
+.input,
+.button-default {
+  --_roundness-left: var(--roundness);
+  --_roundness-right: var(--roundness);
+
+  border-top-left-radius: var(--_roundness-left);
+  border-bottom-left-radius: var(--_roundness-left);
+  border-top-right-radius: var(--_roundness-right);
+  border-bottom-right-radius: var(--_roundness-right);
+}
+
 // Textareas should have stock line-height + vertical padding instead of huge line-height
-textarea {
+textarea.input {
   padding: var(--_padding);
   line-height: var(--post-line-height);
 }
 
 option {
-  color: $fallback--text;
-  color: var(--text, $fallback--text);
-  background-color: $fallback--bg;
-  background-color: var(--bg, $fallback--bg);
+  color: var(--text);
+  background-color: var(--background);
 }
 
 .hide-number-spinner {
@@ -645,6 +660,20 @@ option {
   }
 }
 
+.cards-list {
+  list-style: none;
+  display: grid;
+  grid-auto-flow: row dense;
+  grid-template-columns: 1fr 1fr;
+
+  li {
+    border: 1px solid var(--border);
+    border-radius: var(--roundness);
+    padding: 0.5em;
+    margin: 0.25em;
+  }
+}
+
 .btn-block {
   display: block;
   width: 100%;
@@ -655,19 +684,23 @@ option {
   display: inline-flex;
   vertical-align: middle;
 
-  button {
+  > *,
+  > * .button-default {
+    --_roundness-left: 0;
+    --_roundness-right: 0;
+
     position: relative;
     flex: 1 1 auto;
+  }
 
-    &:not(:last-child) {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
+  > *:first-child,
+  > *:first-child .button-default {
+    --_roundness-left: var(--roundness);
+  }
 
-    &:not(:first-child) {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-    }
+  > *:last-child,
+  > *:last-child .button-default {
+    --_roundness-right: var(--roundness);
   }
 }
 
@@ -697,74 +730,64 @@ option {
   overflow: hidden;
   text-overflow: ellipsis;
 
-  &.badge-notification {
-    background-color: $fallback--cRed;
-    background-color: var(--badgeNotification, $fallback--cRed);
+  &.-dot,
+  &.-counter {
+    margin: 0;
+    position: absolute;
+  }
+
+  &.-dot {
+    min-height: 8px;
+    max-height: 8px;
+    min-width: 8px;
+    max-width: 8px;
+    padding: 0;
+    line-height: 0;
+    font-size: 0;
+    left: calc(50% - 4px);
+    top: calc(50% - 4px);
+    margin-left: 6px;
+    margin-top: -6px;
+  }
+
+  &.-counter {
+    border-radius: var(--roundness);
+    font-size: 0.75em;
+    line-height: 1;
+    text-align: right;
+    padding: 0.2em;
+    min-width: 0;
+    left: calc(50% - 0.5em);
+    top: calc(50% - 0.4em);
+    margin-left: 0.7em;
+    margin-top: -1em;
+  }
+
+  &.-neutral {
+    background-color: var(--badgeNeutral);
     color: white;
-    color: var(--badgeNotificationText, white);
+    color: var(--badgeNeutralText, white);
   }
 }
 
 .alert {
   margin: 0 0.35em;
   padding: 0 0.25em;
-  border-radius: $fallback--tooltipRadius;
-  border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
-
-  &.error {
-    background-color: $fallback--alertError;
-    background-color: var(--alertError, $fallback--alertError);
-    color: $fallback--text;
-    color: var(--alertErrorText, $fallback--text);
-
-    .panel-heading & {
-      color: $fallback--text;
-      color: var(--alertErrorPanelText, $fallback--text);
-    }
-  }
-
-  &.warning {
-    background-color: $fallback--alertWarning;
-    background-color: var(--alertWarning, $fallback--alertWarning);
-    color: $fallback--text;
-    color: var(--alertWarningText, $fallback--text);
-
-    .panel-heading & {
-      color: $fallback--text;
-      color: var(--alertWarningPanelText, $fallback--text);
-    }
-  }
-
-  &.success {
-    background-color: var(--alertSuccess, $fallback--alertWarning);
-    color: var(--alertSuccessText, $fallback--text);
-
-    .panel-heading & {
-      color: var(--alertSuccessPanelText, $fallback--text);
-    }
-  }
+  border-radius: var(--roundness);
+  border: 1px solid var(--border);
 }
 
 .faint {
-  color: $fallback--faint;
-  color: var(--faint, $fallback--faint);
-}
+  --text: var(--textFaint);
+  --link: var(--linkFaint);
 
-.faint-link {
-  color: $fallback--faint;
-  color: var(--faint, $fallback--faint);
-
-  &:hover {
-    text-decoration: underline;
-  }
+  color: var(--text);
 }
 
 .visibility-notice {
   padding: 0.5em;
-  border: 1px solid $fallback--faint;
-  border: 1px solid var(--faint, $fallback--faint);
-  border-radius: $fallback--inputRadius;
-  border-radius: var(--inputRadius, $fallback--inputRadius);
+  border: 1px solid var(--textFaint);
+  border-radius: var(--roundness);
 }
 
 .notice-dismissible {
@@ -785,6 +808,10 @@ option {
   &.iconLetter {
     font-size: 1.1em;
   }
+
+  &.svg-inline--fa {
+    vertical-align: -0.15em;
+  }
 }
 
 .fa-old-padding {
@@ -799,6 +826,11 @@ option {
   opacity: 0.25;
 }
 
+.timeago {
+  --link: var(--text);
+  --linkFaint: var(--textFaint);
+}
+
 .login-hint {
   text-align: center;
 
@@ -897,3 +929,174 @@ option {
   padding: 0;
   position: absolute;
 }
+
+*::selection {
+  color: var(--selectionText);
+  background-color: var(--selectionBackground);
+}
+
+#splash {
+  pointer-events: none;
+  transition: opacity 2s;
+  opacity: 1;
+
+  &.hidden {
+    opacity: 0;
+  }
+
+  #status {
+    &.css-ok {
+      &::before {
+        display: inline-block;
+        content: "CSS OK";
+      }
+    }
+
+    .initial-text {
+      display: none;
+    }
+  }
+
+  #throbber {
+    animation-duration: 3s;
+    animation-name: bounce;
+    animation-iteration-count: infinite;
+    animation-direction: normal;
+    transform-origin: bottom center;
+
+    &.dead {
+      animation-name: dead;
+      animation-duration: 2s;
+      animation-iteration-count: 1;
+      transform: rotateX(90deg) rotateY(0) rotateZ(-45deg);
+    }
+
+    @keyframes dead {
+      0% {
+        transform: rotateX(0) rotateY(0) rotateZ(0);
+      }
+
+      5% {
+        transform: rotateX(0) rotateY(0) rotateZ(1deg);
+      }
+
+      10% {
+        transform: rotateX(0) rotateY(0) rotateZ(-2deg);
+      }
+
+      15% {
+        transform: rotateX(0) rotateY(0) rotateZ(3deg);
+      }
+
+      20% {
+        transform: rotateX(0) rotateY(0) rotateZ(0);
+      }
+
+      25% {
+        transform: rotateX(0) rotateY(0) rotateZ(0);
+      }
+
+      30% {
+        transform: rotateX(10deg) rotateY(0) rotateZ(0);
+      }
+
+      35% {
+        transform: rotateX(-10deg) rotateY(0) rotateZ(0);
+      }
+
+      40% {
+        transform: rotateX(10deg) rotateY(0) rotateZ(0);
+      }
+
+      45% {
+        transform: rotateX(-10deg) rotateY(0) rotateZ(0);
+      }
+
+      50% {
+        transform: rotateX(10deg) rotateY(0) rotateZ(0);
+      }
+
+      100% {
+        transform: rotateX(90deg) rotateY(0) rotateZ(-45deg);
+        transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); /* easeInQuint */
+      }
+    }
+
+    @keyframes bounce {
+      0% {
+        scale: 1 1;
+        translate: 0 0;
+        animation-timing-function: ease-out;
+      }
+
+      10% {
+        scale: 1.2 0.8;
+        translate: 0 0;
+        transform: rotateZ(var(--defaultZ));
+        animation-timing-function: ease-out;
+      }
+
+      30% {
+        scale: 0.9 1.1;
+        translate: 0 -40%;
+        transform: rotateZ(var(--defaultZ));
+        animation-timing-function: ease-in;
+      }
+
+      40% {
+        scale: 1.1 0.9;
+        translate: 0 -50%;
+        transform: rotateZ(var(--defaultZ));
+        animation-timing-function: ease-in;
+      }
+
+      45% {
+        scale: 0.9 1.1;
+        translate: 0 -45%;
+        transform: rotateZ(var(--defaultZ));
+        animation-timing-function: ease-in;
+      }
+
+      50% {
+        scale: 1.05 0.95;
+        translate: 0 -40%;
+        animation-timing-function: ease-in;
+      }
+
+      55% {
+        scale: 0.985 1.025;
+        translate: 0 -35%;
+        transform: rotateZ(var(--defaultZ));
+        animation-timing-function: ease-in;
+      }
+
+      60% {
+        scale: 1.0125 0.9985;
+        translate: 0 -30%;
+        transform: rotateZ(var(--defaultZ));
+        animation-timing-function: ease-in;
+      }
+
+      80% {
+        scale: 1.0063 0.9938;
+        translate: 0 -10%;
+        transform: rotateZ(var(--defaultZ));
+        animation-timing-function: ease-in-ou;
+      }
+
+      90% {
+        scale: 1.2 0.8;
+        translate: 0 0;
+        transform: rotateZ(var(--defaultZ));
+        animation-timing-function: ease-out;
+      }
+
+      100% {
+        scale: 1 1;
+        translate: 0 0;
+        transform: rotateZ(var(--defaultZ));
+        animation-timing-function: ease-out;
+      }
+    }
+  }
+}
diff --git a/src/App.vue b/src/App.vue
index fe214ce71..762e18515 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,6 @@
 <template>
   <div
+    v-show="$store.state.interface.themeApplied"
     id="app-loaded"
     :style="bgStyle"
   >
@@ -69,7 +70,7 @@
     <PostStatusModal />
     <EditStatusModal v-if="editingAvailable" />
     <StatusHistoryModal v-if="editingAvailable" />
-    <SettingsModal />
+    <SettingsModal :class="layoutModalClass" />
     <UpdateNotification />
     <GlobalNoticeList />
   </div>
diff --git a/src/_variables.scss b/src/_variables.scss
deleted file mode 100644
index 751fc9a46..000000000
--- a/src/_variables.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-$main-color: #f58d2c;
-$main-background: white;
-$darkened-background: whitesmoke;
-
-$fallback--bg: #121a24;
-$fallback--fg: #182230;
-$fallback--faint: rgb(185 185 186 / 50%);
-$fallback--text: #b9b9ba;
-$fallback--link: #d8a070;
-$fallback--icon: #666;
-$fallback--lightBg: rgb(21 30 42);
-$fallback--lightText: #b9b9ba;
-$fallback--border: #222;
-$fallback--cRed: #f00;
-$fallback--cBlue: #0095ff;
-$fallback--cGreen: #0fa00f;
-$fallback--cOrange: orange;
-
-$fallback--alertError: rgb(211 16 20 / 50%);
-$fallback--alertWarning: rgb(111 111 20 / 50%);
-
-$fallback--panelRadius: 10px;
-$fallback--checkboxRadius: 2px;
-$fallback--btnRadius: 4px;
-$fallback--inputRadius: 4px;
-$fallback--tooltipRadius: 5px;
-$fallback--avatarRadius: 4px;
-$fallback--avatarAltRadius: 10px;
-$fallback--attachmentRadius: 10px;
-$fallback--chatMessageRadius: 10px;
-
-$fallback--buttonShadow: 0 0 2px 0 rgb(0 0 0 / 100%),
-  0 1px 0 0 rgb(255 255 255 / 20%) inset,
-  0 -1px 0 0 rgb(0 0 0 / 20%) inset;
-
-$status-margin: 0.75em;
diff --git a/src/assets/pleromatan_apology.png b/src/assets/pleromatan_apology.png
deleted file mode 100644
index 36ad7aeb8..000000000
Binary files a/src/assets/pleromatan_apology.png and /dev/null differ
diff --git a/src/assets/pleromatan_apology.png b/src/assets/pleromatan_apology.png
new file mode 120000
index 000000000..a7f6191f6
--- /dev/null
+++ b/src/assets/pleromatan_apology.png
@@ -0,0 +1 @@
+../../static/pleromatan_apology.png
\ No newline at end of file
diff --git a/src/assets/pleromatan_apology_fox.png b/src/assets/pleromatan_apology_fox.png
deleted file mode 100644
index 17f87694c..000000000
Binary files a/src/assets/pleromatan_apology_fox.png and /dev/null differ
diff --git a/src/assets/pleromatan_apology_fox.png b/src/assets/pleromatan_apology_fox.png
new file mode 120000
index 000000000..b3db4af3f
--- /dev/null
+++ b/src/assets/pleromatan_apology_fox.png
@@ -0,0 +1 @@
+../../static/pleromatan_apology_fox.png
\ No newline at end of file
diff --git a/src/boot/after_store.js b/src/boot/after_store.js
index 0f86aff5b..2c516f0f6 100644
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@@ -13,9 +13,9 @@ import VBodyScrollLock from 'src/directives/body_scroll_lock'
 import { windowWidth, windowHeight } from '../services/window_utils/window_utils'
 import { getOrCreateApp, getClientToken } from '../services/new_api/oauth.js'
 import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
-import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js'
-import { applyTheme, applyConfig } from '../services/style_setter/style_setter.js'
+import { applyConfig } from '../services/style_setter/style_setter.js'
 import FaviconService from '../services/favicon_service/favicon_service.js'
+import { initServiceWorker, updateFocus } from '../services/sw/sw.js'
 
 import { useI18nStore } from '../stores/i18n'
 import { useInterfaceStore } from '../stores/interface'
@@ -126,6 +126,9 @@ const setSettings = async ({ apiConfig, staticConfig, store }) => {
     store.dispatch('setInstanceOption', { name, value: config[name] })
   }
 
+  copyInstanceOption('theme')
+  copyInstanceOption('style')
+  copyInstanceOption('palette')
   copyInstanceOption('nsfwCensorImage')
   copyInstanceOption('background')
   copyInstanceOption('hidePostStats')
@@ -163,8 +166,6 @@ const setSettings = async ({ apiConfig, staticConfig, store }) => {
   copyInstanceOption('showFeaturesPanel')
   copyInstanceOption('hideSitename')
   copyInstanceOption('sidebarRight')
-
-  return store.dispatch('setTheme', config.theme)
 }
 
 const getTOS = async ({ store }) => {
@@ -177,8 +178,7 @@ const getTOS = async ({ store }) => {
       throw (res)
     }
   } catch (e) {
-    console.warn("Can't load TOS")
-    console.warn(e)
+    console.warn("Can't load TOS\n", e)
   }
 }
 
@@ -192,8 +192,7 @@ const getInstancePanel = async ({ store }) => {
       throw (res)
     }
   } catch (e) {
-    console.warn("Can't load instance panel")
-    console.warn(e)
+    console.warn("Can't load instance panel\n", e)
   }
 }
 
@@ -223,8 +222,7 @@ const getStickers = async ({ store }) => {
       throw (res)
     }
   } catch (e) {
-    console.warn("Can't load stickers")
-    console.warn(e)
+    console.warn("Can't load stickers\n", e)
   }
 }
 
@@ -246,7 +244,7 @@ const resolveStaffAccounts = ({ store, accounts }) => {
 
 const getNodeInfo = async ({ store }) => {
   try {
-    const res = await preloadFetch('/nodeinfo/2.0.json')
+    const res = await preloadFetch('/nodeinfo/2.1.json')
     if (res.ok) {
       const data = await res.json()
       const metadata = data.metadata
@@ -258,11 +256,14 @@ const getNodeInfo = async ({ store }) => {
       store.dispatch('setInstanceOption', { name: 'shoutAvailable', value: features.includes('chat') })
       store.dispatch('setInstanceOption', { name: 'pleromaChatMessagesAvailable', value: features.includes('pleroma_chat_messages') })
       store.dispatch('setInstanceOption', { name: 'pleromaCustomEmojiReactionsAvailable', value: features.includes('pleroma_custom_emoji_reactions') })
+      store.dispatch('setInstanceOption', { name: 'pleromaBookmarkFoldersAvailable', value: features.includes('pleroma:bookmark_folders') })
       store.dispatch('setInstanceOption', { name: 'gopherAvailable', value: features.includes('gopher') })
       store.dispatch('setInstanceOption', { name: 'pollsAvailable', value: features.includes('polls') })
       store.dispatch('setInstanceOption', { name: 'editingAvailable', value: features.includes('editing') })
       store.dispatch('setInstanceOption', { name: 'pollLimits', value: metadata.pollLimits })
       store.dispatch('setInstanceOption', { name: 'mailerEnabled', value: metadata.mailerEnabled })
+      store.dispatch('setInstanceOption', { name: 'quotingAvailable', value: features.includes('quote_posting') })
+      store.dispatch('setInstanceOption', { name: 'groupActorAvailable', value: features.includes('pleroma:group_actors') })
 
       const uploadLimits = metadata.uploadLimits
       store.dispatch('setInstanceOption', { name: 'uploadlimit', value: parseInt(uploadLimits.general) })
@@ -280,6 +281,7 @@ const getNodeInfo = async ({ store }) => {
 
       const software = data.software
       store.dispatch('setInstanceOption', { name: 'backendVersion', value: software.version })
+      store.dispatch('setInstanceOption', { name: 'backendRepository', value: software.repository })
       store.dispatch('setInstanceOption', { name: 'pleromaBackend', value: software.name === 'pleroma' })
 
       const priv = metadata.private
@@ -329,17 +331,10 @@ const setConfig = async ({ store }) => {
 }
 
 const checkOAuthToken = async ({ store }) => {
-  // eslint-disable-next-line no-async-promise-executor
-  return new Promise(async (resolve, reject) => {
-    if (store.getters.getUserToken()) {
-      try {
-        await store.dispatch('loginUser', store.getters.getUserToken())
-      } catch (e) {
-        console.error(e)
-      }
-    }
-    resolve()
-  })
+  if (store.getters.getUserToken()) {
+    return store.dispatch('loginUser', store.getters.getUserToken())
+  }
+  return Promise.resolve()
 }
 
 const afterStoreSetup = async ({ pinia, store, storageError, i18n }) => {
@@ -354,30 +349,23 @@ const afterStoreSetup = async ({ pinia, store, storageError, i18n }) => {
   useInterfaceStore().setLayoutHeight(windowHeight())
 
   FaviconService.initFaviconService()
+  initServiceWorker(store)
+
+  window.addEventListener('focus', () => updateFocus())
 
   const overrides = window.___pleromafe_dev_overrides || {}
   const server = (typeof overrides.target !== 'undefined') ? overrides.target : window.location.origin
   store.dispatch('setInstanceOption', { name: 'server', value: server })
 
   await setConfig({ store })
-
-  const { customTheme, customThemeSource } = store.state.config
-  const { theme } = store.state.instance
-  const customThemePresent = customThemeSource || customTheme
-
-  if (customThemePresent) {
-    if (customThemeSource && customThemeSource.themeEngineVersion === CURRENT_VERSION) {
-      applyTheme(customThemeSource)
-    } else {
-      applyTheme(customTheme)
-    }
-  } else if (theme) {
-    // do nothing, it will load asynchronously
-  } else {
-    console.error('Failed to load any theme!')
+  try {
+    await store.dispatch('applyTheme').catch((e) => { console.error('Error setting theme', e) })
+  } catch (e) {
+    window.splashError(e)
+    return Promise.reject(e)
   }
 
-  applyConfig(store.state.config)
+  applyConfig(store.state.config, i18n.global)
 
   // Now we can try getting the server settings and logging in
   // Most of these are preloaded into the index.html so blocking is minimized
@@ -386,7 +374,9 @@ const afterStoreSetup = async ({ pinia, store, storageError, i18n }) => {
     getInstancePanel({ store }),
     getNodeInfo({ store }),
     getInstanceConfig({ store })
-  ])
+  ]).catch(e => Promise.reject(e))
+
+  await store.dispatch('loadDrafts')
 
   // Start fetching things that don't need to block the UI
   store.dispatch('fetchMutes')
@@ -411,6 +401,13 @@ const afterStoreSetup = async ({ pinia, store, storageError, i18n }) => {
   app.use(store)
   app.use(i18n)
 
+  // Little thing to get out of invalid theme state
+  window.resetThemes = () => {
+    store.dispatch('resetThemeV3')
+    store.dispatch('resetThemeV3Palette')
+    store.dispatch('resetThemeV2')
+  }
+
   app.use(vClickOutside)
   app.use(VBodyScrollLock)
   app.use(VueVirtualScroller)
@@ -422,7 +419,6 @@ const afterStoreSetup = async ({ pinia, store, storageError, i18n }) => {
   app.config.unwrapInjectedRef = true
 
   app.mount('#app')
-
   return app
 }
 
diff --git a/src/boot/routes.js b/src/boot/routes.js
index 2dc900e7e..66d937c8e 100644
--- a/src/boot/routes.js
+++ b/src/boot/routes.js
@@ -25,6 +25,10 @@ import ListsTimeline from 'components/lists_timeline/lists_timeline.vue'
 import ListsEdit from 'components/lists_edit/lists_edit.vue'
 import NavPanel from 'src/components/nav_panel/nav_panel.vue'
 import AnnouncementsPage from 'components/announcements_page/announcements_page.vue'
+import QuotesTimeline from '../components/quotes_timeline/quotes_timeline.vue'
+import Drafts from 'components/drafts/drafts.vue'
+import BookmarkFolders from '../components/bookmark_folders/bookmark_folders.vue'
+import BookmarkFolderEdit from '../components/bookmark_folder_edit/bookmark_folder_edit.vue'
 
 export default (store) => {
   const validateAuthenticatedRoute = (to, from, next) => {
@@ -51,6 +55,7 @@ export default (store) => {
     { name: 'tag-timeline', path: '/tag/:tag', component: TagTimeline },
     { name: 'bookmarks', path: '/bookmarks', component: BookmarkTimeline },
     { name: 'conversation', path: '/notice/:id', component: ConversationPage, meta: { dontScroll: true } },
+    { name: 'quotes', path: '/notice/:id/quotes', component: QuotesTimeline },
     {
       name: 'remote-user-profile-acct',
       path: '/remote-users/:_(@)?:username([^/@]+)@:hostname([^/@]+)',
@@ -78,13 +83,18 @@ export default (store) => {
     { name: 'who-to-follow', path: '/who-to-follow', component: WhoToFollow, beforeEnter: validateAuthenticatedRoute },
     { name: 'about', path: '/about', component: About },
     { name: 'announcements', path: '/announcements', component: AnnouncementsPage },
+    { name: 'drafts', path: '/drafts', component: Drafts },
     { name: 'user-profile', path: '/users/:name', component: UserProfile },
     { name: 'legacy-user-profile', path: '/:name', component: UserProfile },
     { name: 'lists', path: '/lists', component: Lists },
     { name: 'lists-timeline', path: '/lists/:id', component: ListsTimeline },
     { name: 'lists-edit', path: '/lists/:id/edit', component: ListsEdit },
     { name: 'lists-new', path: '/lists/new', component: ListsEdit },
-    { name: 'edit-navigation', path: '/nav-edit', component: NavPanel, props: () => ({ forceExpand: true, forceEditMode: true }), beforeEnter: validateAuthenticatedRoute }
+    { name: 'edit-navigation', path: '/nav-edit', component: NavPanel, props: () => ({ forceExpand: true, forceEditMode: true }), beforeEnter: validateAuthenticatedRoute },
+    { name: 'bookmark-folders', path: '/bookmark_folders', component: BookmarkFolders },
+    { name: 'bookmark-folder-new', path: '/bookmarks/new-folder', component: BookmarkFolderEdit },
+    { name: 'bookmark-folder', path: '/bookmarks/:id', component: BookmarkTimeline },
+    { name: 'bookmark-folder-edit', path: '/bookmarks/:id/edit', component: BookmarkFolderEdit }
   ]
 
   if (store.state.instance.pleromaChatMessagesAvailable) {
diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
index ce19291a1..fd4837ee4 100644
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@@ -9,60 +9,80 @@
       <template #content>
         <div class="dropdown-menu">
           <template v-if="relationship.following">
-            <button
+            <div
               v-if="relationship.showing_reblogs"
-              class="btn button-default dropdown-item"
-              @click="hideRepeats"
+              class="menu-item dropdown-item"
             >
-              {{ $t('user_card.hide_repeats') }}
-            </button>
-            <button
+              <button
+                class="main-button"
+                @click="hideRepeats"
+              >
+                {{ $t('user_card.hide_repeats') }}
+              </button>
+            </div>
+            <div
               v-if="!relationship.showing_reblogs"
-              class="btn button-default dropdown-item"
-              @click="showRepeats"
+              class="menu-item dropdown-item"
             >
-              {{ $t('user_card.show_repeats') }}
-            </button>
+              <button
+                class="main-button"
+                @click="showRepeats"
+              >
+                {{ $t('user_card.show_repeats') }}
+              </button>
+            </div>
             <div
               role="separator"
               class="dropdown-divider"
             />
           </template>
           <UserListMenu :user="user" />
-          <button
+          <div
             v-if="relationship.followed_by"
-            class="btn button-default btn-block dropdown-item"
-            @click="removeUserFromFollowers"
+            class="menu-item dropdown-item"
           >
-            {{ $t('user_card.remove_follower') }}
-          </button>
-          <button
-            v-if="relationship.blocking"
-            class="btn button-default btn-block dropdown-item"
-            @click="unblockUser"
-          >
-            {{ $t('user_card.unblock') }}
-          </button>
-          <button
-            v-else
-            class="btn button-default btn-block dropdown-item"
-            @click="blockUser"
-          >
-            {{ $t('user_card.block') }}
-          </button>
-          <button
-            class="btn button-default btn-block dropdown-item"
-            @click="reportUser"
-          >
-            {{ $t('user_card.report') }}
-          </button>
-          <button
+            <button
+              class="main-button"
+              @click="removeUserFromFollowers"
+            >
+              {{ $t('user_card.remove_follower') }}
+            </button>
+          </div>
+          <div class="menu-item dropdown-item">
+            <button
+              v-if="relationship.blocking"
+              class="main-button"
+              @click="unblockUser"
+            >
+              {{ $t('user_card.unblock') }}
+            </button>
+            <button
+              v-else
+              class="main-button"
+              @click="blockUser"
+            >
+              {{ $t('user_card.block') }}
+            </button>
+          </div>
+          <div class="menu-item dropdown-item">
+            <button
+              class="main-button"
+              @click="reportUser"
+            >
+              {{ $t('user_card.report') }}
+            </button>
+          </div>
+          <div
             v-if="pleromaChatMessagesAvailable"
-            class="btn button-default btn-block dropdown-item"
-            @click="openChat"
+            class="menu-item dropdown-item"
           >
-            {{ $t('user_card.message') }}
-          </button>
+            <button
+              class="main-button"
+              @click="openChat"
+            >
+              {{ $t('user_card.message') }}
+            </button>
+          </div>
         </div>
       </template>
       <template #trigger>
@@ -86,6 +106,7 @@
         <i18n-t
           keypath="user_card.block_confirm"
           tag="span"
+          scope="global"
         >
           <template #user>
             <span
@@ -107,6 +128,7 @@
         <i18n-t
           keypath="user_card.remove_follower_confirm"
           tag="span"
+          scope="global"
         >
           <template #user>
             <span
@@ -122,19 +144,12 @@
 <script src="./account_actions.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .AccountActions {
   .ellipsis-button {
     width: 2.5em;
     margin: -0.5em 0;
     padding: 0.5em 0;
     text-align: center;
-
-    &:not(:hover) .icon {
-      color: $fallback--lightText;
-      color: var(--lightText, $fallback--lightText);
-    }
   }
 }
 </style>
diff --git a/src/components/alert.style.js b/src/components/alert.style.js
new file mode 100644
index 000000000..868514764
--- /dev/null
+++ b/src/components/alert.style.js
@@ -0,0 +1,57 @@
+export default {
+  name: 'Alert',
+  selector: '.alert',
+  validInnerComponents: [
+    'Text',
+    'Icon',
+    'Link',
+    'Border',
+    'ButtonUnstyled'
+  ],
+  variants: {
+    normal: '.neutral',
+    error: '.error',
+    warning: '.warning',
+    success: '.success'
+  },
+  editor: {
+    border: 1,
+    aspect: '3 / 1'
+  },
+  defaultRules: [
+    {
+      directives: {
+        background: '--text',
+        opacity: 0.5,
+        blur: '9px'
+      }
+    },
+    {
+      parent: {
+        component: 'Alert'
+      },
+      component: 'Border',
+      directives: {
+        textColor: '--parent'
+      }
+    },
+    {
+      variant: 'error',
+      directives: {
+        background: '--cRed'
+      }
+    },
+    {
+      variant: 'warning',
+      directives: {
+        background: '--cOrange'
+      }
+    },
+    {
+      variant: 'success',
+      directives: {
+        background: '--cGreen'
+      }
+    }
+  ]
+}
diff --git a/src/components/announcement/announcement.vue b/src/components/announcement/announcement.vue
index a1c5791e4..92880831f 100644
--- a/src/components/announcement/announcement.vue
+++ b/src/components/announcement/announcement.vue
@@ -99,16 +99,14 @@
 <script src="./announcement.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .announcement {
-  border-bottom: 1px solid var(--border, $fallback--border);
+  border-bottom: 1px solid var(--border);
   border-radius: 0;
-  padding: var(--status-margin, $status-margin);
+  padding: var(--status-margin);
 
   .heading,
   .body {
-    margin-bottom: var(--status-margin, $status-margin);
+    margin-bottom: var(--status-margin);
   }
 
   .footer {
diff --git a/src/components/announcement_editor/announcement_editor.vue b/src/components/announcement_editor/announcement_editor.vue
index 0f29f9f70..31473331f 100644
--- a/src/components/announcement_editor/announcement_editor.vue
+++ b/src/components/announcement_editor/announcement_editor.vue
@@ -3,7 +3,7 @@
     <textarea
       ref="textarea"
       v-model="announcement.content"
-      class="post-textarea"
+      class="input post-textarea"
       rows="1"
       cols="1"
       :placeholder="$t('announcements.post_placeholder')"
@@ -14,6 +14,7 @@
       <input
         id="announcement-start-time"
         v-model="announcement.startsAt"
+        class="input"
         :type="announcement.allDay ? 'date' : 'datetime-local'"
         :disabled="disabled"
       >
@@ -23,6 +24,7 @@
       <input
         id="announcement-end-time"
         v-model="announcement.endsAt"
+        class="input"
         :type="announcement.allDay ? 'date' : 'datetime-local'"
         :disabled="disabled"
       >
@@ -32,8 +34,9 @@
         id="announcement-all-day"
         v-model="announcement.allDay"
         :disabled="disabled"
-      />
-      <label for="announcement-all-day">{{ $t('announcements.all_day_prompt') }}</label>
+      >
+        {{ $t('announcements.all_day_prompt') }}
+      </Checkbox>
     </span>
   </div>
 </template>
diff --git a/src/components/announcements_page/announcements_page.vue b/src/components/announcements_page/announcements_page.vue
index 78d3ecee0..44e2cf46a 100644
--- a/src/components/announcements_page/announcements_page.vue
+++ b/src/components/announcements_page/announcements_page.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="panel panel-default announcements-page">
     <div class="panel-heading">
-      <span>
+      <h1 class="title">
         {{ $t('announcements.page_header') }}
-      </span>
+      </h1>
     </div>
     <div class="panel-body">
       <section
@@ -61,15 +61,13 @@
 <script src="./announcements_page.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .announcements-page {
   .post-form {
-    padding: var(--status-margin, $status-margin);
+    padding: var(--status-margin);
 
     .heading,
     .body {
-      margin-bottom: var(--status-margin, $status-margin);
+      margin-bottom: var(--status-margin);
     }
 
     .post-button {
diff --git a/src/components/attachment/attachment.scss b/src/components/attachment/attachment.scss
index 681bab291..13afbe641 100644
--- a/src/components/attachment/attachment.scss
+++ b/src/components/attachment/attachment.scss
@@ -1,5 +1,3 @@
-@import "../../variables";
-
 .Attachment {
   display: inline-flex;
   flex-direction: column;
@@ -9,10 +7,8 @@
   height: 100%;
   border-style: solid;
   border-width: 1px;
-  border-radius: $fallback--attachmentRadius;
-  border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
-  border-color: $fallback--border;
-  border-color: var(--border, $fallback--border);
+  border-radius: var(--roundness);
+  border-color: var(--border);
 
   .attachment-wrapper {
     flex: 1 1 auto;
@@ -84,6 +80,13 @@
     }
   }
 
+  .video-container {
+    border: none;
+    outline: none;
+    color: inherit;
+    background: transparent;
+  }
+
   .audio-container {
     display: flex;
     align-items: flex-end;
@@ -126,23 +129,12 @@
 
     .attachment-button {
       padding: 0;
-      border-radius: $fallback--tooltipRadius;
-      border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
+      border-radius: var(--roundness);
       text-align: center;
       width: 2em;
       height: 2em;
       margin-left: 0.5em;
       font-size: 1.25em;
-      // TODO: theming? hard to theme with unknown background image color
-      background: rgb(230 230 230 / 70%);
-
-      .svg-inline--fa {
-        color: rgb(0 0 0 / 60%);
-      }
-
-      &:hover .svg-inline--fa {
-        color: rgb(0 0 0 / 90%);
-      }
     }
   }
 
@@ -217,8 +209,7 @@
 
   &.-placeholder {
     display: inline-block;
-    color: $fallback--link;
-    color: var(--postLink, $fallback--link);
+    color: var(--link);
     overflow: hidden;
     white-space: nowrap;
     height: auto;
diff --git a/src/components/attachment/attachment.style.js b/src/components/attachment/attachment.style.js
new file mode 100644
index 000000000..fde8a50a6
--- /dev/null
+++ b/src/components/attachment/attachment.style.js
@@ -0,0 +1,25 @@
+export default {
+  name: 'Attachment',
+  selector: '.Attachment',
+  notEditable: true,
+  validInnerComponents: [
+    'Border',
+    'ButtonUnstyled',
+    'Input'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        roundness: 3
+      }
+    },
+    {
+      component: 'ButtonUnstyled',
+      parent: { component: 'Attachment' },
+      directives: {
+        background: '#FFFFFF',
+        opacity: 0.5
+      }
+    }
+  ]
+}
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index 79f628061..9abc26271 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -38,7 +38,7 @@
         v-if="edit"
         v-model="localDescription"
         type="text"
-        class="description-field"
+        class="input description-field"
         :placeholder="$t('post_status.media_description')"
         @keydown.enter.prevent=""
       >
@@ -175,7 +175,6 @@
         :is="videoTag"
         v-if="type === 'video' && !hidden"
         class="video-container"
-        :class="{ 'button-unstyled': 'isModal' }"
         :href="attachment.url"
         @click.stop.prevent="openModal"
       >
@@ -253,7 +252,7 @@
         v-if="edit"
         v-model="localDescription"
         type="text"
-        class="description-field"
+        class="input description-field"
         :placeholder="$t('post_status.media_description')"
         @keydown.enter.prevent=""
       >
diff --git a/src/components/autosuggest/autosuggest.vue b/src/components/autosuggest/autosuggest.vue
index 7b7102fd2..04f418013 100644
--- a/src/components/autosuggest/autosuggest.vue
+++ b/src/components/autosuggest/autosuggest.vue
@@ -1,3 +1,4 @@
+<!-- FIXME THIS NEEDS TO BE REFACTORED TO USE POPOVER -->
 <template>
   <div
     v-click-outside="onClickOutside"
@@ -6,12 +7,12 @@
     <input
       v-model="term"
       :placeholder="placeholder"
-      class="autosuggest-input"
+      class="input autosuggest-input"
       @click="onInputClick"
     >
     <div
       v-if="resultsVisible && filtered.length > 0"
-      class="autosuggest-results"
+      class="panel autosuggest-results"
     >
       <slot
         v-for="item in filtered"
@@ -24,8 +25,6 @@
 <script src="./autosuggest.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .autosuggest {
   position: relative;
 
@@ -40,18 +39,15 @@
     top: 100%;
     right: 0;
     max-height: 400px;
-    background-color: $fallback--bg;
-    background-color: var(--bg, $fallback--bg);
+    background-color: var(--bg);
     border-style: solid;
     border-width: 1px;
-    border-color: $fallback--border;
-    border-color: var(--border, $fallback--border);
-    border-radius: $fallback--inputRadius;
-    border-radius: var(--inputRadius, $fallback--inputRadius);
+    border-color: var(--border);
+    border-radius: var(--roundness);
     border-top-left-radius: 0;
     border-top-right-radius: 0;
     box-shadow: 1px 1px 4px rgb(0 0 0 / 60%);
-    box-shadow: var(--panelShadow);
+    box-shadow: var(--shadow);
     overflow-y: auto;
     z-index: 1;
   }
diff --git a/src/components/avatar_list/avatar_list.vue b/src/components/avatar_list/avatar_list.vue
index 2d00cb7b9..9252ba324 100644
--- a/src/components/avatar_list/avatar_list.vue
+++ b/src/components/avatar_list/avatar_list.vue
@@ -17,8 +17,6 @@
 <script src="./avatar_list.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .avatars {
   display: flex;
   margin: 0;
@@ -36,8 +34,7 @@
     }
 
     .avatar-small {
-      border-radius: $fallback--avatarAltRadius;
-      border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
+      border-radius: var(--roundness);
       height: 24px;
       width: 24px;
     }
diff --git a/src/components/badge.style.js b/src/components/badge.style.js
new file mode 100644
index 000000000..0697cac6c
--- /dev/null
+++ b/src/components/badge.style.js
@@ -0,0 +1,30 @@
+export default {
+  name: 'Badge',
+  selector: '.badge',
+  validInnerComponents: [
+    'Text',
+    'Icon'
+  ],
+  variants: {
+    notification: '.-notification'
+  },
+  defaultRules: [
+    {
+      component: 'Root',
+      directives: {
+        '--badgeNotification': 'color | --cRed'
+      }
+    },
+    {
+      directives: {
+        background: '--cGreen'
+      }
+    },
+    {
+      variant: 'notification',
+      directives: {
+        background: '--cRed'
+      }
+    }
+  ]
+}
diff --git a/src/components/basic_user_card/basic_user_card.vue b/src/components/basic_user_card/basic_user_card.vue
index 705e20f59..29a60cd1e 100644
--- a/src/components/basic_user_card/basic_user_card.vue
+++ b/src/components/basic_user_card/basic_user_card.vue
@@ -47,9 +47,8 @@
   display: flex;
   flex: 1 0;
   margin: 0;
-  padding: 0.6em 1em;
 
-  --emoji-size: 14px;
+  --emoji-size: 1em;
 
   &-collapsed-content {
     margin-left: 0.7em;
diff --git a/src/components/bookmark_folder_card/bookmark_folder_card.js b/src/components/bookmark_folder_card/bookmark_folder_card.js
new file mode 100644
index 000000000..bf274d9d7
--- /dev/null
+++ b/src/components/bookmark_folder_card/bookmark_folder_card.js
@@ -0,0 +1,22 @@
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faEllipsisH
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faEllipsisH
+)
+
+const BookmarkFolderCard = {
+  props: [
+    'folder',
+    'allBookmarks'
+  ],
+  computed: {
+    firstLetter () {
+      return this.folder ? this.folder.name[0] : null
+    }
+  }
+}
+
+export default BookmarkFolderCard
diff --git a/src/components/bookmark_folder_card/bookmark_folder_card.vue b/src/components/bookmark_folder_card/bookmark_folder_card.vue
new file mode 100644
index 000000000..9e8bef618
--- /dev/null
+++ b/src/components/bookmark_folder_card/bookmark_folder_card.vue
@@ -0,0 +1,111 @@
+<template>
+  <div
+    v-if="allBookmarks"
+    class="bookmark-folder-card"
+  >
+    <router-link
+      :to="{ name: 'bookmarks' }"
+      class="bookmark-folder-name"
+    >
+      <span class="icon">
+        <FAIcon
+          fixed-width
+          class="fa-scale-110 menu-icon"
+          icon="bookmark"
+        />
+      </span>{{ $t('nav.all_bookmarks') }}
+    </router-link>
+  </div>
+  <div
+    v-else
+    class="bookmark-folder-card"
+  >
+    <router-link
+      :to="{ name: 'bookmark-folder', params: { id: folder.id } }"
+      class="bookmark-folder-name"
+    >
+      <img
+        v-if="folder.emoji_url"
+        class="iconEmoji iconEmoji-image"
+        :src="folder.emoji_url"
+        :alt="folder.emoji"
+        :title="folder.emoji"
+      >
+      <span
+        v-else-if="folder.emoji"
+        class="iconEmoji"
+      >
+        <span>
+          {{ folder.emoji }}
+        </span>
+      </span>
+      <span
+        v-else-if="firstLetter"
+        class="icon iconLetter fa-scale-110"
+      >{{ firstLetter }}</span>{{ folder.name }}
+    </router-link>
+    <router-link
+      :to="{ name: 'bookmark-folder-edit', params: { id: folder.id } }"
+      class="button-folder-edit"
+    >
+      <FAIcon
+        class="fa-scale-110 fa-old-padding"
+        icon="ellipsis-h"
+      />
+    </router-link>
+  </div>
+</template>
+
+<script src="./bookmark_folder_card.js"></script>
+
+<style lang="scss">
+.bookmark-folder-card {
+  display: flex;
+  align-items: center;
+}
+
+a.bookmark-folder-name {
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+
+  .icon,
+  .iconLetter,
+  .iconEmoji {
+    display: inline-block;
+    height: 2.5rem;
+    width: 2.5rem;
+    margin-right: 0.5rem;
+  }
+
+  .icon,
+  .iconLetter {
+    font-size: 1.5rem;
+    line-height: 2.5rem;
+    text-align: center;
+  }
+
+  .iconEmoji {
+    text-align: center;
+    object-fit: contain;
+    vertical-align: middle;
+
+    > span {
+      font-size: 1.5rem;
+      line-height: 2.5rem;
+    }
+  }
+
+  img.iconEmoji {
+    padding: 0.25em;
+    box-sizing: border-box;
+  }
+}
+
+.bookmark-folder-name,
+.button-folder-edit {
+  margin: 0;
+  padding: 1em;
+  color: var(--link);
+}
+</style>
diff --git a/src/components/bookmark_folder_edit/bookmark_folder_edit.js b/src/components/bookmark_folder_edit/bookmark_folder_edit.js
new file mode 100644
index 000000000..95c015764
--- /dev/null
+++ b/src/components/bookmark_folder_edit/bookmark_folder_edit.js
@@ -0,0 +1,80 @@
+import EmojiPicker from '../emoji_picker/emoji_picker.vue'
+import apiService from '../../services/api/api.service'
+
+const BookmarkFolderEdit = {
+  data () {
+    return {
+      name: '',
+      nameDraft: '',
+      emoji: '',
+      emojiUrl: null,
+      emojiDraft: '',
+      emojiUrlDraft: null,
+      emojiPickerExpanded: false,
+      reallyDelete: false
+    }
+  },
+  components: {
+    EmojiPicker
+  },
+  created () {
+    if (!this.id) return
+    const credentials = this.$store.state.users.currentUser.credentials
+    apiService.fetchBookmarkFolders({ credentials })
+      .then((folders) => {
+        const folder = folders.find(folder => folder.id === this.id)
+        if (!folder) return
+
+        this.nameDraft = this.name = folder.name
+        this.emojiDraft = this.emoji = folder.emoji
+        this.emojiUrlDraft = this.emojiUrl = folder.emoji_url
+      })
+  },
+  computed: {
+    id () {
+      return this.$route.params.id
+    }
+  },
+  methods: {
+    selectEmoji (event) {
+      this.emojiDraft = event.insertion
+      this.emojiUrlDraft = event.insertionUrl
+    },
+    showEmojiPicker () {
+      if (!this.emojiPickerExpanded) {
+        this.$refs.picker.showPicker()
+      }
+    },
+    onShowPicker () {
+      this.emojiPickerExpanded = true
+    },
+    onClosePicker () {
+      this.emojiPickerExpanded = false
+    },
+    updateFolder () {
+      this.$store.dispatch('setBookmarkFolder', { folderId: this.id, name: this.nameDraft, emoji: this.emojiDraft })
+        .then(() => {
+          this.$router.push({ name: 'bookmark-folders' })
+        })
+    },
+    createFolder () {
+      this.$store.dispatch('createBookmarkFolder', { name: this.nameDraft, emoji: this.emojiDraft })
+        .then(() => {
+          this.$router.push({ name: 'bookmark-folders' })
+        })
+        .catch((e) => {
+          this.$store.dispatch('pushGlobalNotice', {
+            messageKey: 'bookmark_folders.error',
+            messageArgs: [e.message],
+            level: 'error'
+          })
+        })
+    },
+    deleteFolder () {
+      this.$store.dispatch('deleteBookmarkFolder', { folderId: this.id })
+      this.$router.push({ name: 'bookmark-folders' })
+    }
+  }
+}
+
+export default BookmarkFolderEdit
diff --git a/src/components/bookmark_folder_edit/bookmark_folder_edit.vue b/src/components/bookmark_folder_edit/bookmark_folder_edit.vue
new file mode 100644
index 000000000..4a5bff499
--- /dev/null
+++ b/src/components/bookmark_folder_edit/bookmark_folder_edit.vue
@@ -0,0 +1,200 @@
+<template>
+  <div class="panel-default panel BookmarkFolderEdit">
+    <div
+      ref="header"
+      class="panel-heading folder-edit-heading"
+    >
+      <button
+        class="button-unstyled go-back-button"
+        @click="$router.back"
+      >
+        <FAIcon
+          size="lg"
+          icon="chevron-left"
+        />
+      </button>
+      <h1 class="title">
+        <i18n-t
+          v-if="id"
+          keypath="bookmark_folders.editing_folder"
+          scope="global"
+        >
+          <template #folderName>
+            {{ name }}
+          </template>
+        </i18n-t>
+        <i18n-t
+          v-else
+          keypath="bookmark_folders.creating_folder"
+          scope="global"
+        />
+      </h1>
+    </div>
+    <div class="panel-body">
+      <div class="input-wrap">
+        <label for="folder-edit-title">{{ $t('bookmark_folders.emoji') }}</label>
+        <button
+          class="input input-emoji"
+          :title="$t('bookmark_folder.emoji_pick')"
+          @click="showEmojiPicker"
+        >
+          <img
+            v-if="emojiUrlDraft"
+            class="iconEmoji iconEmoji-image"
+            :src="emojiUrlDraft"
+            :alt="emojiDraft"
+            :title="emojiDraft"
+          >
+          <span
+            v-else-if="emojiDraft"
+            class="iconEmoji"
+          >
+            <span>
+              {{ emojiDraft }}
+            </span>
+          </span>
+        </button>
+        <EmojiPicker
+          ref="picker"
+          class="emoji-picker-panel"
+          @emoji="selectEmoji"
+          @show="onShowPicker"
+          @close="onClosePicker"
+        />
+      </div>
+      <div class="input-wrap">
+        <label for="folder-edit-title">{{ $t('bookmark_folders.name') }}</label>
+        <input
+          id="folder-edit-title"
+          ref="name"
+          v-model="nameDraft"
+          class="input"
+        >
+      </div>
+    </div>
+    <div class="panel-footer">
+      <span class="spacer" />
+      <button
+        v-if="!id"
+        class="btn button-default footer-button"
+        @click="createFolder"
+      >
+        {{ $t('bookmark_folders.create') }}
+      </button>
+      <button
+        v-else-if="!reallyDelete"
+        class="btn button-default footer-button"
+        @click="reallyDelete = true"
+      >
+        {{ $t('bookmark_folders.delete') }}
+      </button>
+      <template v-else>
+        {{ $t('bookmark_folders.really_delete') }}
+        <button
+          class="btn button-default footer-button"
+          @click="deleteFolder"
+        >
+          {{ $t('general.yes') }}
+        </button>
+        <button
+          class="btn button-default footer-button"
+          @click="reallyDelete = false"
+        >
+          {{ $t('general.no') }}
+        </button>
+      </template>
+      <div
+        v-if="id && !reallyDelete"
+      >
+        <button
+          class="btn button-default follow-button"
+          @click="updateFolder"
+        >
+          {{ $t('bookmark_folders.update_folder') }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script src="./bookmark_folder_edit.js"></script>
+
+<style lang="scss">
+.BookmarkFolderEdit {
+  --panel-body-padding: 0.5em;
+
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  .folder-edit-heading {
+    grid-template-columns: auto minmax(50%, 1fr);
+  }
+
+  .panel-body {
+    display: flex;
+    gap: 0.5em;
+  }
+
+  .emoji-picker-panel {
+    position: absolute;
+    z-index: 20;
+    margin-top: 2px;
+
+    &.hide {
+      display: none;
+    }
+  }
+
+  .input-emoji {
+    height: 2.5em;
+    width: 2.5em;
+    padding: 0;
+
+    .iconEmoji {
+      display: inline-block;
+      text-align: center;
+      object-fit: contain;
+      vertical-align: middle;
+      height: 2.5em;
+      width: 2.5em;
+
+      > span {
+        font-size: 1.5rem;
+        line-height: 2.5rem;
+      }
+    }
+
+    img.iconEmoji {
+      padding: 0.25em;
+      box-sizing: border-box;
+    }
+  }
+
+  .input-wrap {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5em;
+  }
+
+  .go-back-button {
+    text-align: center;
+    line-height: 1;
+    height: 100%;
+    align-self: start;
+    width: var(--__panel-heading-height-inner);
+  }
+
+  .btn {
+    margin: 0 0.5em;
+  }
+
+  .panel-footer {
+    grid-template-columns: minmax(10%, 1fr);
+
+    .footer-button {
+      min-width: 9em;
+    }
+  }
+}
+</style>
diff --git a/src/components/bookmark_folders/bookmark_folders.js b/src/components/bookmark_folders/bookmark_folders.js
new file mode 100644
index 000000000..9f1f1fed0
--- /dev/null
+++ b/src/components/bookmark_folders/bookmark_folders.js
@@ -0,0 +1,27 @@
+import BookmarkFolderCard from '../bookmark_folder_card/bookmark_folder_card.vue'
+
+const BookmarkFolders = {
+  data () {
+    return {
+      isNew: false
+    }
+  },
+  components: {
+    BookmarkFolderCard
+  },
+  computed: {
+    bookmarkFolders () {
+      return this.$store.state.bookmarkFolders.allFolders
+    }
+  },
+  methods: {
+    cancelNewFolder () {
+      this.isNew = false
+    },
+    newFolder () {
+      this.isNew = true
+    }
+  }
+}
+
+export default BookmarkFolders
diff --git a/src/components/bookmark_folders/bookmark_folders.vue b/src/components/bookmark_folders/bookmark_folders.vue
new file mode 100644
index 000000000..fdd461064
--- /dev/null
+++ b/src/components/bookmark_folders/bookmark_folders.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="Bookmark-folders panel panel-default">
+    <div class="panel-heading">
+      <h1 class="title">
+        {{ $t('nav.bookmark_folders') }}
+      </h1>
+      <router-link
+        :to="{ name: 'bookmark-folder-new' }"
+        class="button-default btn new-folder-button"
+      >
+        {{ $t("bookmark_folders.new") }}
+      </router-link>
+    </div>
+    <div class="panel-body">
+      <BookmarkFolderCard
+        :all-bookmarks="true"
+        class="list-item"
+      />
+      <BookmarkFolderCard
+        v-for="folder in bookmarkFolders.slice().reverse()"
+        :key="folder"
+        :folder="folder"
+        class="list-item"
+      />
+    </div>
+  </div>
+</template>
+
+<script src="./bookmark_folders.js"></script>
+
+<style lang="scss">
+.Bookmark-folders {
+  .new-folder-button {
+    padding: 0 0.5em;
+  }
+}
+</style>
diff --git a/src/components/bookmark_folders_menu/bookmark_folders_menu_content.js b/src/components/bookmark_folders_menu/bookmark_folders_menu_content.js
new file mode 100644
index 000000000..43db7df32
--- /dev/null
+++ b/src/components/bookmark_folders_menu/bookmark_folders_menu_content.js
@@ -0,0 +1,19 @@
+import { mapState } from 'vuex'
+import NavigationEntry from 'src/components/navigation/navigation_entry.vue'
+import { getBookmarkFolderEntries } from 'src/components/navigation/filter.js'
+
+export const BookmarkFoldersMenuContent = {
+  props: [
+    'showPin'
+  ],
+  components: {
+    NavigationEntry
+  },
+  computed: {
+    ...mapState({
+      folders: getBookmarkFolderEntries
+    })
+  }
+}
+
+export default BookmarkFoldersMenuContent
diff --git a/src/components/bookmark_folders_menu/bookmark_folders_menu_content.vue b/src/components/bookmark_folders_menu/bookmark_folders_menu_content.vue
new file mode 100644
index 000000000..197f79654
--- /dev/null
+++ b/src/components/bookmark_folders_menu/bookmark_folders_menu_content.vue
@@ -0,0 +1,21 @@
+<template>
+  <ul>
+    <NavigationEntry
+      :item="{
+        name: 'bookmarks',
+        routeObject: { name: 'bookmarks' },
+        label: 'nav.all_bookmarks',
+        icon: 'bookmark'
+      }"
+      :show-pin="showPin"
+    />
+    <NavigationEntry
+      v-for="item in folders"
+      :key="item.id"
+      :show-pin="showPin"
+      :item="item"
+    />
+  </ul>
+</template>
+
+<script src="./bookmark_folders_menu_content.js"></script>
diff --git a/src/components/bookmark_timeline/bookmark_timeline.js b/src/components/bookmark_timeline/bookmark_timeline.js
index 5ac43d90c..9571d630f 100644
--- a/src/components/bookmark_timeline/bookmark_timeline.js
+++ b/src/components/bookmark_timeline/bookmark_timeline.js
@@ -1,16 +1,31 @@
 import Timeline from '../timeline/timeline.vue'
 
 const Bookmarks = {
-  computed: {
-    timeline () {
-      return this.$store.state.statuses.timelines.bookmarks
-    }
+  created () {
+    this.$store.commit('clearTimeline', { timeline: 'bookmarks' })
+    this.$store.dispatch('startFetchingTimeline', { timeline: 'bookmarks', bookmarkFolderId: this.folderId || null })
   },
   components: {
     Timeline
   },
+  computed: {
+    folderId () {
+      return this.$route.params.id
+    },
+    timeline () {
+      return this.$store.state.statuses.timelines.bookmarks
+    }
+  },
+  watch: {
+    folderId () {
+      this.$store.commit('clearTimeline', { timeline: 'bookmarks' })
+      this.$store.dispatch('stopFetchingTimeline', 'bookmarks')
+      this.$store.dispatch('startFetchingTimeline', { timeline: 'bookmarks', bookmarkFolderId: this.folderId || null })
+    }
+  },
   unmounted () {
     this.$store.commit('clearTimeline', { timeline: 'bookmarks' })
+    this.$store.dispatch('stopFetchingTimeline', 'bookmarks')
   }
 }
 
diff --git a/src/components/bookmark_timeline/bookmark_timeline.vue b/src/components/bookmark_timeline/bookmark_timeline.vue
index 8da6884b8..cc86cf12e 100644
--- a/src/components/bookmark_timeline/bookmark_timeline.vue
+++ b/src/components/bookmark_timeline/bookmark_timeline.vue
@@ -3,6 +3,7 @@
     :title="$t('nav.bookmarks')"
     :timeline="timeline"
     :timeline-name="'bookmarks'"
+    :bookmark-folder-id="folderId"
   />
 </template>
 
diff --git a/src/components/border.style.js b/src/components/border.style.js
new file mode 100644
index 000000000..7f2c30163
--- /dev/null
+++ b/src/components/border.style.js
@@ -0,0 +1,13 @@
+export default {
+  name: 'Border',
+  selector: '/*border*/',
+  virtual: true,
+  defaultRules: [
+    {
+      directives: {
+        textColor: '$mod(--parent 10)',
+        textAuto: 'no-auto'
+      }
+    }
+  ]
+}
diff --git a/src/components/button.style.js b/src/components/button.style.js
new file mode 100644
index 000000000..410d2f7e0
--- /dev/null
+++ b/src/components/button.style.js
@@ -0,0 +1,129 @@
+export default {
+  name: 'Button', // Name of the component
+  selector: '.button-default', // CSS selector/prefix
+  // outOfTreeSelector: '' // out-of-tree selector is used when other components are laid over it but it's not part of the tree, see Underlay component
+  // States, system witll calculate ALL possible combinations of those and prepend "normal" to them + standalone "normal" state
+  states: {
+    // States are a bit expensive - the amount of combinations generated is about (1/6)n^3+n, so adding more state increased number of combination by an order of magnitude!
+    // All states inherit from "normal" state, there is no other inheirtance, i.e. hover+disabled only inherits from "normal", not from hover nor disabled.
+    // However, cascading still works, so resulting state will be result of merging of all relevant states/variants
+    // normal: '' // normal state is implicitly added, it is always included
+    toggled: '.toggled',
+    focused: ':focus-visible',
+    pressed: ':focus:active',
+    hover: ':hover:not(:disabled)',
+    disabled: ':disabled'
+  },
+  // Variants are mutually exclusive, each component implicitly has "normal" variant, and all other variants inherit from it.
+  variants: {
+    // Variants save on computation time since adding new variant just adds one more "set".
+    // normal: '', // you can override normal variant, it will be appenended to the main class
+    danger: '.danger'
+    // Overall the compuation difficulty is N*((1/6)M^3+M) where M is number of distinct states and N is number of variants.
+    // This (currently) is further multipled by number of places where component can exist.
+  },
+  editor: {
+    aspect: '2 / 1'
+  },
+  // This lists all other components that can possibly exist within one. Recursion is currently not supported (and probably won't be supported ever).
+  validInnerComponents: [
+    'Text',
+    'Icon'
+  ],
+  // Default rules, used as "default theme", essentially.
+  defaultRules: [
+    {
+      component: 'Root',
+      directives: {
+        '--buttonDefaultHoverGlow': 'shadow | 0 0 1 2 --text / 0.4',
+        '--buttonDefaultFocusGlow': 'shadow | 0 0 1 2 --link / 0.5',
+        '--buttonDefaultShadow': 'shadow | 0 0 2 #000000',
+        '--buttonDefaultBevel': 'shadow | $borderSide(#FFFFFF top 0.2 1), $borderSide(#000000 bottom 0.2 1)',
+        '--buttonPressedBevel': 'shadow | inset 0 0 4 #000000, $borderSide(#FFFFFF bottom 0.2 1), $borderSide(#000000 top 0.2 1)'
+      }
+    },
+    {
+      // component: 'Button', // no need to specify components every time unless you're specifying how other component should look
+      // like within it
+      directives: {
+        background: '--fg',
+        shadow: ['--buttonDefaultShadow', '--buttonDefaultBevel'],
+        roundness: 3
+      }
+    },
+    {
+      state: ['hover'],
+      directives: {
+        shadow: ['--buttonDefaultHoverGlow', '--buttonDefaultBevel']
+      }
+    },
+    {
+      state: ['focused'],
+      directives: {
+        shadow: ['--buttonDefaultFocusGlow', '--buttonDefaultBevel']
+      }
+    },
+    {
+      state: ['pressed'],
+      directives: {
+        shadow: ['--buttonDefaultShadow', '--buttonPressedBevel']
+      }
+    },
+    {
+      state: ['pressed', 'hover'],
+      directives: {
+        shadow: ['--buttonPressedBevel', '--buttonDefaultHoverGlow']
+      }
+    },
+    {
+      state: ['toggled'],
+      directives: {
+        background: '--accent,-24.2',
+        shadow: ['--buttonDefaultShadow', '--buttonPressedBevel']
+      }
+    },
+    {
+      state: ['toggled', 'hover'],
+      directives: {
+        background: '--accent,-24.2',
+        shadow: ['--buttonDefaultHoverGlow', '--buttonPressedBevel']
+      }
+    },
+    {
+      state: ['toggled', 'disabled'],
+      directives: {
+        background: '$blend(--accent 0.25 --parent)',
+        shadow: ['--buttonPressedBevel']
+      }
+    },
+    {
+      state: ['disabled'],
+      directives: {
+        background: '$blend(--accent 0.25 --parent)',
+        shadow: ['--buttonDefaultBevel']
+      }
+    },
+    {
+      component: 'Text',
+      parent: {
+        component: 'Button',
+        state: ['disabled']
+      },
+      directives: {
+        textOpacity: 0.25,
+        textOpacityMode: 'blend'
+      }
+    },
+    {
+      component: 'Icon',
+      parent: {
+        component: 'Button',
+        state: ['disabled']
+      },
+      directives: {
+        textOpacity: 0.25,
+        textOpacityMode: 'blend'
+      }
+    }
+  ]
+}
diff --git a/src/components/button_unstyled.style.js b/src/components/button_unstyled.style.js
new file mode 100644
index 000000000..4142f9a3c
--- /dev/null
+++ b/src/components/button_unstyled.style.js
@@ -0,0 +1,96 @@
+export default {
+  name: 'ButtonUnstyled',
+  selector: '.button-unstyled',
+  notEditable: true,
+  states: {
+    toggled: '.toggled',
+    disabled: ':disabled',
+    hover: ':hover:not(:disabled)',
+    focused: ':focus-within'
+  },
+  validInnerComponents: [
+    'Text',
+    'Link',
+    'Icon',
+    'Badge'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        shadow: []
+      }
+    },
+    {
+      component: 'Icon',
+      parent: {
+        component: 'ButtonUnstyled',
+        state: ['hover']
+      },
+      directives: {
+        textColor: '--parent--text'
+      }
+    },
+    {
+      component: 'Icon',
+      parent: {
+        component: 'ButtonUnstyled',
+        state: ['toggled']
+      },
+      directives: {
+        textColor: '--parent--text'
+      }
+    },
+    {
+      component: 'Icon',
+      parent: {
+        component: 'ButtonUnstyled',
+        state: ['toggled', 'hover']
+      },
+      directives: {
+        textColor: '--parent--text'
+      }
+    },
+    {
+      component: 'Icon',
+      parent: {
+        component: 'ButtonUnstyled',
+        state: ['toggled', 'focused']
+      },
+      directives: {
+        textColor: '--parent--text'
+      }
+    },
+    {
+      component: 'Icon',
+      parent: {
+        component: 'ButtonUnstyled',
+        state: ['toggled', 'focused', 'hover']
+      },
+      directives: {
+        textColor: '--parent--text'
+      }
+    },
+    {
+      component: 'Text',
+      parent: {
+        component: 'ButtonUnstyled',
+        state: ['disabled']
+      },
+      directives: {
+        textOpacity: 0.25,
+        textOpacityMode: 'blend'
+      }
+    },
+    {
+      component: 'Icon',
+      parent: {
+        component: 'ButtonUnstyled',
+        state: ['disabled']
+      },
+      directives: {
+        textOpacity: 0.25,
+        textOpacityMode: 'blend'
+      }
+    }
+  ]
+}
diff --git a/src/components/chat/chat.scss b/src/components/chat/chat.scss
index 43e7a5e44..8af710ae1 100644
--- a/src/components/chat/chat.scss
+++ b/src/components/chat/chat.scss
@@ -11,15 +11,15 @@
 
   .chat-view-body {
     box-sizing: border-box;
-    background-color: var(--chatBg, $fallback--bg);
     display: flex;
     flex-direction: column;
     width: 100%;
     overflow: visible;
     min-height: calc(100vh - var(--navbar-height));
     margin: 0;
-    border-radius: 10px 10px 0 0;
-    border-radius: var(--panelRadius, 10px) var(--panelRadius, 10px) 0 0;
+    border-radius: var(--roundness);
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
 
     &::after {
       border-radius: 0;
@@ -37,8 +37,6 @@
   .footer {
     position: sticky;
     bottom: 0;
-    background-color: $fallback--bg;
-    background-color: var(--bg, $fallback--bg);
     z-index: 1;
   }
 
@@ -61,8 +59,6 @@
     position: absolute;
     right: 1.3em;
     top: -3.2em;
-    background-color: $fallback--fg;
-    background-color: var(--btn, $fallback--fg);
     display: flex;
     justify-content: center;
     align-items: center;
@@ -79,12 +75,6 @@
       visibility: visible;
     }
 
-    i {
-      font-size: 1em;
-      color: $fallback--text;
-      color: var(--text, $fallback--text);
-    }
-
     .unread-message-count {
       font-size: 0.8em;
       left: 50%;
diff --git a/src/components/chat/chat.style.js b/src/components/chat/chat.style.js
new file mode 100644
index 000000000..9ae2b7d71
--- /dev/null
+++ b/src/components/chat/chat.style.js
@@ -0,0 +1,19 @@
+export default {
+  name: 'Chat',
+  selector: '.chat-message-list',
+  validInnerComponents: [
+    'Text',
+    'Link',
+    'Icon',
+    'Avatar',
+    'ChatMessage'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        background: '--bg',
+        blur: '5px'
+      }
+    }
+  ]
+}
diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue
index b1e5468c8..57158abad 100644
--- a/src/components/chat/chat.vue
+++ b/src/components/chat/chat.vue
@@ -26,7 +26,7 @@
           </div>
         </div>
         <div
-          class="message-list"
+          class="chat-message-list message-list"
           :style="{ height: scrollableContainerHeight }"
         >
           <template v-if="!errorLoadingChat">
@@ -61,7 +61,7 @@
               <FAIcon icon="chevron-down" />
               <div
                 v-if="newMessageCount"
-                class="badge badge-notification unread-chat-count unread-message-count"
+                class="badge -notification unread-chat-count unread-message-count"
               >
                 {{ newMessageCount }}
               </div>
@@ -76,6 +76,7 @@
             :disable-sensitivity-checkbox="true"
             :disable-submit="errorLoadingChat || !currentChat"
             :disable-preview="true"
+            :disable-draft="true"
             :optimistic-posting="true"
             :post-handler="sendMessage"
             :submit-on-enter="!mobileLayout"
@@ -95,6 +96,5 @@
 
 <script src="./chat.js"></script>
 <style lang="scss">
-@import "../../variables";
 @import "./chat";
 </style>
diff --git a/src/components/chat_list/chat_list.vue b/src/components/chat_list/chat_list.vue
index 27a475edf..24bbc9f4a 100644
--- a/src/components/chat_list/chat_list.vue
+++ b/src/components/chat_list/chat_list.vue
@@ -7,9 +7,9 @@
     class="chat-list panel panel-default"
   >
     <div class="panel-heading -sticky">
-      <span class="title">
+      <h1 class="title">
         {{ $t("chats.chats") }}
-      </span>
+      </h1>
       <button
         class="button-default"
         @click="newChat"
@@ -45,8 +45,6 @@
 <script src="./chat_list.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .chat-list {
   min-height: 25em;
   margin-bottom: 0;
@@ -57,8 +55,7 @@
   font-size: 1.2em;
   display: flex;
   justify-content: center;
-  color: $fallback--text;
-  color: var(--faint, $fallback--text);
+  color: var(--textFaint);
 }
 
 </style>
diff --git a/src/components/chat_list_item/chat_list_item.scss b/src/components/chat_list_item/chat_list_item.scss
index 3a84672bd..9711b41d6 100644
--- a/src/components/chat_list_item/chat_list_item.scss
+++ b/src/components/chat_list_item/chat_list_item.scss
@@ -1,8 +1,6 @@
 .chat-list-item {
   display: flex;
   flex-direction: row;
-  padding: 0.75em;
-  height: 5em;
   overflow: hidden;
   box-sizing: border-box;
   cursor: pointer;
@@ -11,11 +9,6 @@
     outline: none;
   }
 
-  &:hover {
-    background-color: var(--selectedPost, $fallback--lightBg);
-    box-shadow: 0 0 3px 1px rgb(0 0 0 / 10%);
-  }
-
   .chat-list-item-left {
     margin-right: 1em;
   }
@@ -29,7 +22,7 @@
 
   .heading {
     width: 100%;
-    display: inline-flex;
+    display: flex;
     justify-content: space-between;
     line-height: 1em;
   }
@@ -47,18 +40,17 @@
   }
 
   .chat-preview {
-    display: inline-flex;
+    display: flex;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
     margin: 0.35em 0;
-    color: $fallback--text;
-    color: var(--faint, $fallback--text);
+    color: var(--textFaint);
     width: 100%;
   }
 
   a {
-    color: var(--faintLink, $fallback--link);
+    color: var(--linkFaint);
     text-decoration: none;
     pointer-events: none;
   }
@@ -73,11 +65,6 @@
     }
   }
 
-  .Avatar {
-    border-radius: $fallback--avatarAltRadius;
-    border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
-  }
-
   .chat-preview-body {
     --emoji-size: 1.4em;
 
diff --git a/src/components/chat_list_item/chat_list_item.vue b/src/components/chat_list_item/chat_list_item.vue
index 69ad609bb..0f9d5c5fa 100644
--- a/src/components/chat_list_item/chat_list_item.vue
+++ b/src/components/chat_list_item/chat_list_item.vue
@@ -36,7 +36,7 @@
         />
         <div
           v-if="chat.unread > 0"
-          class="badge badge-notification unread-chat-count"
+          class="badge -notification unread-chat-count"
         >
           {{ chat.unread }}
         </div>
@@ -48,6 +48,5 @@
 <script src="./chat_list_item.js"></script>
 
 <style lang="scss">
-@import "../../variables";
 @import "./chat_list_item";
 </style>
diff --git a/src/components/chat_message/chat_message.scss b/src/components/chat_message/chat_message.scss
index fd5b7aa45..f7254ea35 100644
--- a/src/components/chat_message/chat_message.scss
+++ b/src/components/chat_message/chat_message.scss
@@ -1,5 +1,3 @@
-@import "../../variables";
-
 .chat-message-wrapper {
   &.hovered-message-chain {
     .animated.Avatar {
@@ -27,12 +25,6 @@
 
   .menu-icon {
     cursor: pointer;
-
-    &:hover,
-    .extra-button-popover.open & {
-      color: $fallback--text;
-      color: var(--text, $fallback--text);
-    }
   }
 
   .popover {
@@ -61,10 +53,12 @@
   }
 
   .status {
-    border-radius: $fallback--chatMessageRadius;
-    border-radius: var(--chatMessageRadius, $fallback--chatMessageRadius);
+    background-color: var(--background);
+    color: var(--text);
+    border-radius: var(--roundness);
     display: flex;
     padding: 0.75em;
+    border: 1px solid var(--border);
   }
 
   .created-at {
@@ -97,8 +91,7 @@
   .error {
     .status-content.media-body,
     .created-at {
-      color: $fallback--cRed;
-      color: var(--badgeNotification, $fallback--cRed);
+      color: var(--badgeNotification);
     }
   }
 
@@ -117,16 +110,6 @@
     align-content: end;
     justify-content: flex-end;
 
-    a {
-      color: var(--chatMessageOutgoingLink, $fallback--link);
-    }
-
-    .status {
-      color: var(--chatMessageOutgoingText, $fallback--text);
-      background-color: var(--chatMessageOutgoingBg, $fallback--lightBg);
-      border: 1px solid var(--chatMessageOutgoingBorder, --lightBg);
-    }
-
     .chat-message-inner {
       align-items: flex-end;
     }
@@ -137,22 +120,6 @@
   }
 
   .incoming {
-    a {
-      color: var(--chatMessageIncomingLink, $fallback--link);
-    }
-
-    .status {
-      color: var(--chatMessageIncomingText, $fallback--text);
-      background-color: var(--chatMessageIncomingBg, $fallback--bg);
-      border: 1px solid var(--chatMessageIncomingBorder, --border);
-    }
-
-    .created-at {
-      a {
-        color: var(--chatMessageIncomingText, $fallback--text);
-      }
-    }
-
     .chat-message-menu {
       left: 0.4rem;
     }
@@ -176,6 +143,5 @@
   margin: 1.4em 0;
   font-size: 0.9em;
   user-select: none;
-  color: $fallback--text;
-  color: var(--faintedText, $fallback--text);
+  color: var(--textFaint);
 }
diff --git a/src/components/chat_message/chat_message.style.js b/src/components/chat_message/chat_message.style.js
new file mode 100644
index 000000000..9b57ad371
--- /dev/null
+++ b/src/components/chat_message/chat_message.style.js
@@ -0,0 +1,30 @@
+export default {
+  name: 'ChatMessage',
+  selector: '.chat-message',
+  variants: {
+    outgoing: '.outgoing'
+  },
+  validInnerComponents: [
+    'Text',
+    'Icon',
+    'Border',
+    'Button',
+    'RichContent',
+    'Attachment',
+    'PollGraph'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        background: '--bg, 2',
+        backgroundNoCssColor: 'yes'
+      }
+    },
+    {
+      variant: 'outgoing',
+      directives: {
+        background: '--bg, 5'
+      }
+    }
+  ]
+}
diff --git a/src/components/chat_message/chat_message.vue b/src/components/chat_message/chat_message.vue
index 381574c32..0efdf7977 100644
--- a/src/components/chat_message/chat_message.vue
+++ b/src/components/chat_message/chat_message.vue
@@ -20,7 +20,6 @@
         >
           <UserAvatar
             :compact="true"
-            :better-shadow="betterShadow"
             :user="author"
           />
         </UserPopover>
@@ -52,12 +51,14 @@
               >
                 <template #content>
                   <div class="dropdown-menu">
-                    <button
-                      class="button-default dropdown-item dropdown-item-icon"
-                      @click="deleteMessage"
-                    >
-                      <FAIcon icon="times" /> {{ $t("chats.delete") }}
-                    </button>
+                    <div class="menu-item dropdown-item -icon">
+                      <button
+                        class="main-button"
+                        @click="deleteMessage"
+                      >
+                        <FAIcon icon="times" /> {{ $t("chats.delete") }}
+                      </button>
+                    </div>
                   </div>
                 </template>
                 <template #trigger>
diff --git a/src/components/chat_new/chat_new.scss b/src/components/chat_new/chat_new.scss
index b145ecf9a..b84e0beba 100644
--- a/src/components/chat_new/chat_new.scss
+++ b/src/components/chat_new/chat_new.scss
@@ -16,11 +16,6 @@
     padding-bottom: 0.7rem;
   }
 
-  .basic-user-card:hover {
-    cursor: pointer;
-    background-color: var(--selectedPost, $fallback--lightBg);
-  }
-
   .go-back-button {
     text-align: center;
     line-height: 1;
diff --git a/src/components/chat_new/chat_new.vue b/src/components/chat_new/chat_new.vue
index 52306c1da..673ba56b6 100644
--- a/src/components/chat_new/chat_new.vue
+++ b/src/components/chat_new/chat_new.vue
@@ -16,27 +16,29 @@
         />
       </button>
     </div>
-    <div class="input-wrap">
-      <div class="input-search">
-        <FAIcon
-          class="search-icon fa-scale-110 fa-old-padding"
-          icon="search"
-        />
+    <div class="panel-body">
+      <div class="input-wrap">
+        <div class="input-search">
+          <FAIcon
+            class="search-icon fa-scale-110 fa-old-padding"
+            icon="search"
+          />
+        </div>
+        <input
+          ref="search"
+          v-model="query"
+          class="input"
+          placeholder="Search people"
+          @input="onInput"
+        >
       </div>
-      <input
-        ref="search"
-        v-model="query"
-        placeholder="Search people"
-        @input="onInput"
-      >
-    </div>
-    <div class="member-list">
-      <div
-        v-for="user in availableUsers"
-        :key="user.id"
-        class="member"
-      >
-        <div @click.capture.prevent="goToChat(user)">
+      <div class="member-list">
+        <div
+          v-for="user in availableUsers"
+          :key="user.id"
+          class="list-item"
+          @click.capture.prevent="goToChat(user)"
+        >
           <BasicUserCard :user="user" />
         </div>
       </div>
@@ -46,6 +48,5 @@
 
 <script src="./chat_new.js"></script>
 <style lang="scss">
-@import "../../variables";
 @import "./chat_new";
 </style>
diff --git a/src/components/chat_title/chat_title.vue b/src/components/chat_title/chat_title.vue
index 93db4fa7f..0213b86fb 100644
--- a/src/components/chat_title/chat_title.vue
+++ b/src/components/chat_title/chat_title.vue
@@ -26,15 +26,13 @@
 <script src="./chat_title.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .chat-title {
   display: flex;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 
-  --emoji-size: 14px;
+  --emoji-size: 1em;
 
   .username {
     max-width: 100%;
@@ -54,8 +52,7 @@
     margin-right: 0.5em;
     height: 1.5em;
     width: 1.5em;
-    border-radius: $fallback--avatarAltRadius;
-    border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
+    border-radius: var(--roundness);
 
     &.animated::before {
       display: none;
diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue
index 42f89be9a..1e502f5a5 100644
--- a/src/components/checkbox/checkbox.vue
+++ b/src/components/checkbox/checkbox.vue
@@ -1,8 +1,15 @@
 <template>
   <label
     class="checkbox"
-    :class="{ disabled, indeterminate }"
+    :class="{ disabled, indeterminate, 'indeterminate-fix': indeterminateTransitionFix }"
   >
+    <span
+      v-if="!!$slots.before"
+      class="label -before"
+      :class="{ faint: disabled }"
+    >
+      <slot name="before" />
+    </span>
     <input
       type="checkbox"
       class="visible-for-screenreader-only"
@@ -12,12 +19,15 @@
       @change="$emit('update:modelValue', $event.target.checked)"
     >
     <i
-      class="checkbox-indicator"
+      class="input -checkbox checkbox-indicator"
       :aria-hidden="true"
+      :class="{ disabled }"
+      @transitionend.capture="onTransitionEnd"
     />
     <span
       v-if="!!$slots.default"
-      class="label"
+      class="label -after"
+      :class="{ faint: disabled }"
     >
       <slot />
     </span>
@@ -31,12 +41,28 @@ export default {
     'indeterminate',
     'disabled'
   ],
-  emits: ['update:modelValue']
+  emits: ['update:modelValue'],
+  data: (vm) => ({
+    indeterminateTransitionFix: vm.indeterminate
+  }),
+  watch: {
+    indeterminate (e) {
+      if (e) {
+        this.indeterminateTransitionFix = true
+      }
+    }
+  },
+  methods: {
+    onTransitionEnd (e) {
+      if (!this.indeterminate) {
+        this.indeterminateTransitionFix = false
+      }
+    }
+  }
 }
 </script>
 
 <style lang="scss">
-@import "../../variables";
 @import "../../mixins";
 
 .checkbox {
@@ -44,26 +70,34 @@ export default {
   display: inline-block;
   min-height: 1.2em;
 
-  &-indicator {
+  &-indicator,
+  & .label {
+    vertical-align: middle;
+  }
+
+  & > &-indicator {
+    /* Reset .input stuff */
+    padding: 0;
+    margin: 0;
     position: relative;
-    padding-left: 1.2em;
+    line-height: inherit;
+    display: inline-block;
+    width: 1.2em;
+    height: 1.2em;
+    box-shadow: none;
   }
 
   &-indicator::before {
     position: absolute;
-    right: 0;
-    top: 0;
+    inset: 0;
     display: block;
     content: "✓";
     transition: color 200ms;
     width: 1.1em;
     height: 1.1em;
-    border-radius: $fallback--checkboxRadius;
-    border-radius: var(--checkboxRadius, $fallback--checkboxRadius);
-    box-shadow: 0 0 2px black inset;
-    box-shadow: var(--inputShadow);
-    background-color: $fallback--fg;
-    background-color: var(--input, $fallback--fg);
+    border-radius: var(--roundness);
+    box-shadow: var(--shadow);
+    background-color: var(--background);
     vertical-align: top;
     text-align: center;
     line-height: 1.1em;
@@ -73,33 +107,37 @@ export default {
     box-sizing: border-box;
   }
 
-  &.disabled {
-    .checkbox-indicator::before,
-    .label {
-      opacity: 0.5;
-    }
-
-    .label {
-      color: $fallback--faint;
-      color: var(--faint, $fallback--faint);
+  .disabled {
+    .checkbox-indicator::before {
+      background-color: var(--background);
     }
   }
 
   input[type="checkbox"] {
     &:checked + .checkbox-indicator::before {
-      color: $fallback--text;
-      color: var(--inputText, $fallback--text);
+      color: var(--text);
     }
 
     &:indeterminate + .checkbox-indicator::before {
       content: "–";
-      color: $fallback--text;
-      color: var(--inputText, $fallback--text);
+      color: var(--text);
     }
   }
 
-  & > span {
-    margin-left: 0.5em;
+  &.indeterminate-fix {
+    input[type="checkbox"] + .checkbox-indicator::before {
+      content: "–";
+    }
+  }
+
+  & > .label {
+    &.-after {
+      margin-left: 0.5em;
+    }
+
+    &.-before {
+      margin-right: 0.5em;
+    }
   }
 }
 </style>
diff --git a/src/components/color_input/color_input.scss b/src/components/color_input/color_input.scss
index ca46199a5..3128381f5 100644
--- a/src/components/color_input/color_input.scss
+++ b/src/components/color_input/color_input.scss
@@ -1,19 +1,23 @@
-@import "../../variables";
-
 .color-input {
   display: inline-flex;
 
+  .label {
+    flex: 1 1 auto;
+  }
+
+  .opt {
+    margin-right: 0.5em;
+  }
+
   &-field.input {
     display: inline-flex;
     flex: 0 0 0;
     max-width: 9em;
     align-items: stretch;
-    padding: 0.2em 8px;
 
     input {
+      color: var(--text);
       background: none;
-      color: $fallback--lightText;
-      color: var(--inputText, $fallback--lightText);
       border: none;
       padding: 0;
       margin: 0;
@@ -23,21 +27,39 @@
         min-width: 3em;
         padding: 0;
       }
+    }
 
-      &.nativeColor {
-        flex: 0 0 2em;
-        min-width: 2em;
-        align-self: stretch;
-        min-height: 100%;
+    .nativeColor {
+      cursor: pointer;
+      flex: 0 0 auto;
+      padding: 0;
+
+      input {
+        appearance: none;
+        max-width: 0;
+        min-width: 0;
+        max-height: 0;
+        /* stylelint-disable-next-line declaration-no-important */
+        opacity: 0 !important;
       }
     }
 
     .computedIndicator,
+    .validIndicator,
+    .invalidIndicator,
     .transparentIndicator {
       flex: 0 0 2em;
+      margin: 0.2em 0.5em;
       min-width: 2em;
       align-self: stretch;
-      min-height: 100%;
+      min-height: 1.1em;
+      border-radius: var(--roundness);
+    }
+
+    .invalidIndicator {
+      background: transparent;
+      box-sizing: border-box;
+      border: 2px solid var(--cRed);
     }
 
     .transparentIndicator {
@@ -58,16 +80,26 @@
       &::after {
         top: 0;
         left: 0;
+        border-top-left-radius: var(--roundness);
       }
 
       &::before {
         bottom: 0;
         right: 0;
+        border-bottom-right-radius: var(--roundness);
+      }
+    }
+
+    &.disabled,
+    &:disabled {
+      .nativeColor input,
+      .computedIndicator,
+      .validIndicator,
+      .invalidIndicator,
+      .transparentIndicator {
+        /* stylelint-disable-next-line declaration-no-important */
+        opacity: 0.25 !important;
       }
     }
   }
-
-  .label {
-    flex: 1 1 auto;
-  }
 }
diff --git a/src/components/color_input/color_input.vue b/src/components/color_input/color_input.vue
index dfc084f96..418fb18c4 100644
--- a/src/components/color_input/color_input.vue
+++ b/src/components/color_input/color_input.vue
@@ -6,49 +6,77 @@
     <label
       :for="name"
       class="label"
+      :class="{ faint: !present || disabled }"
     >
       {{ label }}
     </label>
     <Checkbox
-      v-if="typeof fallback !== 'undefined' && showOptionalTickbox"
+      v-if="typeof fallback !== 'undefined' && showOptionalCheckbox && !hideOptionalCheckbox"
       :model-value="present"
       :disabled="disabled"
       class="opt"
-      @update:modelValue="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
+      @update:modelValue="updateValue(typeof modelValue === 'undefined' ? fallback : undefined)"
     />
-    <div class="input color-input-field">
+    <div
+      class="input color-input-field"
+      :class="{ disabled: !present || disabled }"
+    >
       <input
         :id="name + '-t'"
         class="textColor unstyled"
+        :class="{ disabled: !present || disabled }"
         type="text"
         :value="modelValue || fallback"
         :disabled="!present || disabled"
-        @input="$emit('update:modelValue', $event.target.value)"
-      >
-      <input
-        v-if="validColor"
-        :id="name"
-        class="nativeColor unstyled"
-        type="color"
-        :value="modelValue || fallback"
-        :disabled="!present || disabled"
-        @input="$emit('update:modelValue', $event.target.value)"
+        @input="updateValue($event.target.value)"
       >
       <div
-        v-if="transparentColor"
+        v-if="validColor"
+        class="validIndicator"
+        :style="{backgroundColor: modelValue || fallback}"
+      />
+      <div
+        v-else-if="transparentColor"
         class="transparentIndicator"
       />
       <div
-        v-if="computedColor"
+        v-else-if="computedColor"
         class="computedIndicator"
         :style="{backgroundColor: fallback}"
       />
+      <div
+        v-else
+        class="invalidIndicator"
+      />
+      <label class="nativeColor">
+        <FAIcon icon="eye-dropper" />
+        <input
+          :id="name"
+          class="unstyled"
+          type="color"
+          :value="modelValue || fallback"
+          :disabled="!present || disabled"
+          :class="{ disabled: !present || disabled }"
+          @input="updateValue($event.target.value)"
+        >
+      </label>
     </div>
   </div>
 </template>
 <script>
 import Checkbox from '../checkbox/checkbox.vue'
 import { hex2rgb } from '../../services/color_convert/color_convert.js'
+import { throttle } from 'lodash'
+
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faEyeDropper
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faEyeDropper
+)
+
 export default {
   components: {
     Checkbox
@@ -84,10 +112,16 @@ export default {
       default: false
     },
     // Show "optional" tickbox, for when value might become mandatory
-    showOptionalTickbox: {
+    showOptionalCheckbox: {
       required: false,
       type: Boolean,
       default: true
+    },
+    // Force "optional" tickbox to hide
+    hideOptionalCheckbox: {
+      required: false,
+      type: Boolean,
+      default: false
     }
   },
   emits: ['update:modelValue'],
@@ -102,18 +136,14 @@ export default {
       return this.modelValue === 'transparent'
     },
     computedColor () {
-      return this.modelValue && this.modelValue.startsWith('--')
+      return this.modelValue && (this.modelValue.startsWith('--') || this.modelValue.startsWith('$'))
     }
+  },
+  methods: {
+    updateValue: throttle(function (value) {
+      this.$emit('update:modelValue', value)
+    }, 100)
   }
 }
 </script>
 <style lang="scss" src="./color_input.scss"></style>
-
-<style lang="scss">
-.color-control {
-  input.text-input {
-    max-width: 7em;
-    flex: 1;
-  }
-}
-</style>
diff --git a/src/components/component_preview/component_preview.vue b/src/components/component_preview/component_preview.vue
new file mode 100644
index 000000000..6aee90a2d
--- /dev/null
+++ b/src/components/component_preview/component_preview.vue
@@ -0,0 +1,323 @@
+<template>
+  <div
+    class="ComponentPreview"
+    :class="{ '-shadow-controls': shadowControl }"
+  >
+    <!-- eslint-disable vue/no-v-html vue/no-v-text-v-html-on-component -->
+    <component
+      :is="'style'"
+      v-html="previewCss"
+    />
+    <!-- eslint-enable vue/no-v-html vue/no-v-text-v-html-on-component -->
+    <label
+      v-show="shadowControl"
+      role="heading"
+      class="header"
+      :class="{ faint: disabled }"
+    >
+      {{ $t('settings.style.shadows.offset') }}
+    </label>
+    <label
+      v-show="shadowControl && !hideControls"
+      class="x-shift-number"
+    >
+      {{ $t('settings.style.shadows.offset-x') }}
+      <input
+        :value="shadow?.x"
+        :disabled="disabled"
+        :class="{ disabled }"
+        class="input input-number"
+        type="number"
+        @input="e => updateProperty('x', e.target.value)"
+      >
+    </label>
+    <label
+      v-show="shadowControl && !hideControls"
+      class="y-shift-number"
+    >
+      {{ $t('settings.style.shadows.offset-y') }}
+      <input
+        :value="shadow?.y"
+        :disabled="disabled"
+        :class="{ disabled }"
+        class="input input-number"
+        type="number"
+        @input="e => updateProperty('y', e.target.value)"
+      >
+    </label>
+    <input
+      v-show="shadowControl && !hideControls"
+      :value="shadow?.x"
+      :disabled="disabled"
+      :class="{ disabled }"
+      class="input input-range x-shift-slider"
+      type="range"
+      max="20"
+      min="-20"
+      @input="e => updateProperty('x', e.target.value)"
+    >
+    <input
+      v-show="shadowControl && !hideControls"
+      :value="shadow?.y"
+      :disabled="disabled"
+      :class="{ disabled }"
+      class="input input-range y-shift-slider"
+      type="range"
+      max="20"
+      min="-20"
+      @input="e => updateProperty('y', e.target.value)"
+    >
+    <div
+      class="preview-window"
+      :class="{ '-light-grid': lightGrid }"
+    >
+      <div
+        class="preview-block"
+        :class="previewClass"
+        :style="style"
+      >
+        {{ $t('settings.style.themes3.editor.test_string') }}
+      </div>
+      <div
+        v-if="invalid"
+        class="invalid-container"
+      >
+        <div class="alert error invalid-label">
+          {{ $t('settings.style.themes3.editor.invalid') }}
+        </div>
+      </div>
+    </div>
+    <div class="assists">
+      <Checkbox
+        v-model="lightGrid"
+        name="lightGrid"
+        class="input-light-grid"
+      >
+        {{ $t('settings.style.shadows.light_grid') }}
+      </Checkbox>
+      <div class="style-control">
+        <label class="label">
+          {{ $t('settings.style.shadows.zoom') }}
+        </label>
+        <input
+          v-model="zoom"
+          class="input input-number y-shift-number"
+          type="number"
+        >
+      </div>
+      <ColorInput
+        v-if="!noColorControl"
+        v-model="colorOverride"
+        class="input-color-input"
+        fallback="#606060"
+        :label="$t('settings.style.shadows.color_override')"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import Checkbox from 'src/components/checkbox/checkbox.vue'
+import ColorInput from 'src/components/color_input/color_input.vue'
+
+export default {
+  components: {
+    Checkbox,
+    ColorInput
+  },
+  props: [
+    'shadow',
+    'shadowControl',
+    'previewClass',
+    'previewStyle',
+    'previewCss',
+    'disabled',
+    'invalid',
+    'noColorControl'
+  ],
+  emits: ['update:shadow'],
+  data () {
+    return {
+      colorOverride: undefined,
+      lightGrid: false,
+      zoom: 100
+    }
+  },
+  computed: {
+    style () {
+      const result = [
+        this.previewStyle,
+        `zoom: ${this.zoom / 100}`
+      ]
+      if (this.colorOverride) result.push(`--background: ${this.colorOverride}`)
+      return result
+    },
+    hideControls () {
+      return typeof this.shadow === 'string'
+    }
+  },
+  methods: {
+    updateProperty (axis, value) {
+      this.$emit('update:shadow', { axis, value: Number(value) })
+    }
+  }
+}
+</script>
+<style lang="scss">
+.ComponentPreview {
+  display: grid;
+  grid-template-columns: 1em 1fr 1fr 1em;
+  grid-template-rows: 2em 1fr 1fr 1fr 1em 2em max-content;
+  grid-template-areas:
+    "header     header     header     header "
+    "preview    preview    preview    y-slide"
+    "preview    preview    preview    y-slide"
+    "preview    preview    preview    y-slide"
+    "x-slide    x-slide    x-slide    .      "
+    "x-num      x-num      y-num      y-num  "
+    "assists    assists    assists    assists";
+  grid-gap: 0.5em;
+
+  &:not(.-shadow-controls) {
+    grid-template-areas:
+      "header     header     header     header "
+      "preview    preview    preview    y-slide"
+      "preview    preview    preview    y-slide"
+      "preview    preview    preview    y-slide"
+      "assists    assists    assists    assists";
+    grid-template-rows: 2em 1fr 1fr 1fr max-content;
+  }
+
+  .header {
+    grid-area: header;
+    justify-self: center;
+    align-self: baseline;
+    line-height: 2;
+  }
+
+  .invalid-container {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: grid;
+    align-items: center;
+    justify-items: center;
+    background-color: rgba(100 0 0 / 50%);
+
+    .alert {
+      padding: 0.5em 1em;
+    }
+  }
+
+  .assists {
+    grid-area: assists;
+    display: grid;
+    grid-auto-flow: rows;
+    grid-auto-rows: 2em;
+    grid-gap: 0.5em;
+  }
+
+  .input-light-grid {
+    justify-self: center;
+  }
+
+  .input-number {
+    min-width: 2em;
+  }
+
+  .x-shift-number {
+    grid-area: x-num;
+    justify-self: right;
+  }
+
+  .y-shift-number {
+    grid-area: y-num;
+    justify-self: left;
+  }
+
+  .x-shift-number,
+  .y-shift-number {
+    input {
+      max-width: 4em;
+    }
+  }
+
+  .x-shift-slider {
+    grid-area: x-slide;
+    height: auto;
+    align-self: start;
+    min-width: 10em;
+  }
+
+  .y-shift-slider {
+    grid-area: y-slide;
+    writing-mode: vertical-lr;
+    justify-self: left;
+    min-height: 10em;
+  }
+
+  .x-shift-slider,
+  .y-shift-slider {
+    padding: 0;
+  }
+
+  .preview-window {
+    --__grid-color1: rgb(102 102 102);
+    --__grid-color2: rgb(153 153 153);
+    --__grid-color1-disabled: rgba(102 102 102 / 20%);
+    --__grid-color2-disabled: rgba(153 153 153 / 20%);
+
+    &.-light-grid {
+      --__grid-color1: rgb(205 205 205);
+      --__grid-color2: rgb(255 255 255);
+      --__grid-color1-disabled: rgba(205 205 205 / 20%);
+      --__grid-color2-disabled: rgba(255 255 255 / 20%);
+    }
+
+    position: relative;
+    grid-area: preview;
+    aspect-ratio: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 10em;
+    min-height: 10em;
+    background-color: var(--__grid-color2);
+    background-image:
+      linear-gradient(45deg, var(--__grid-color1) 25%, transparent 25%),
+      linear-gradient(-45deg, var(--__grid-color1) 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, var(--__grid-color1) 75%),
+      linear-gradient(-45deg, transparent 75%, var(--__grid-color1) 75%);
+    background-size: 20px 20px;
+    background-position: 0 0, 0 10px, 10px -10px, -10px 0;
+    border-radius: var(--roundness);
+
+    &.disabled {
+      background-color: var(--__grid-color2-disabled);
+      background-image:
+        linear-gradient(45deg, var(--__grid-color1-disabled) 25%, transparent 25%),
+        linear-gradient(-45deg, var(--__grid-color1-disabled) 25%, transparent 25%),
+        linear-gradient(45deg, transparent 75%, var(--__grid-color1-disabled) 75%),
+        linear-gradient(-45deg, transparent 75%, var(--__grid-color1-disabled) 75%);
+    }
+
+    .preview-block {
+      background: var(--background, var(--bg));
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      min-width: 33%;
+      min-height: 33%;
+      max-width: 80%;
+      max-height: 80%;
+      border-width: 0;
+      border-style: solid;
+      border-color: var(--border);
+      border-radius: var(--roundness);
+      box-shadow: var(--shadow);
+    }
+  }
+}
+</style>
diff --git a/src/components/confirm_modal/mute_confirm.js b/src/components/confirm_modal/mute_confirm.js
new file mode 100644
index 000000000..1bef9f620
--- /dev/null
+++ b/src/components/confirm_modal/mute_confirm.js
@@ -0,0 +1,109 @@
+import { unitToSeconds } from 'src/services/date_utils/date_utils.js'
+import { mapGetters } from 'vuex'
+
+import ConfirmModal from './confirm_modal.vue'
+import Select from 'src/components/select/select.vue'
+
+export default {
+  props: ['type', 'user', 'status'],
+  emits: ['hide', 'show', 'muted'],
+  data: () => ({
+    showing: false,
+    muteExpiryAmount: 2,
+    muteExpiryUnit: 'hours'
+  }),
+  components: {
+    ConfirmModal,
+    Select
+  },
+  computed: {
+    muteExpiryValue () {
+      unitToSeconds(this.muteExpiryUnit, this.muteExpiryAmount)
+    },
+    muteExpiryUnits () {
+      return ['minutes', 'hours', 'days']
+    },
+    domain () {
+      return this.user.fqn.split('@')[1]
+    },
+    keypath () {
+      if (this.type === 'domain') {
+        return 'status.mute_domain_confirm'
+      } else if (this.type === 'conversation') {
+        return 'status.mute_conversation_confirm'
+      } else {
+        return 'user_card.mute_confirm'
+      }
+    },
+    userIsMuted () {
+      return this.$store.getters.relationship(this.user.id).muting
+    },
+    conversationIsMuted () {
+      return this.status.conversation_muted
+    },
+    domainIsMuted () {
+      return new Set(this.$store.state.users.currentUser.domainMutes).has(this.domain)
+    },
+    shouldConfirm () {
+      switch (this.type) {
+        case 'domain': {
+          return this.mergedConfig.modalOnMuteDomain
+        }
+        case 'conversation': {
+          return this.mergedConfig.modalOnMuteConversation
+        }
+        default: {
+          return this.mergedConfig.modalOnMute
+        }
+      }
+    },
+    ...mapGetters(['mergedConfig'])
+  },
+  methods: {
+    optionallyPrompt () {
+      if (this.shouldConfirm) {
+        this.show()
+      } else {
+        this.doMute()
+      }
+    },
+    show () {
+      this.showing = true
+      this.$emit('show')
+    },
+    hide () {
+      this.showing = false
+      this.$emit('hide')
+    },
+    doMute () {
+      switch (this.type) {
+        case 'domain': {
+          if (!this.domainIsMuted) {
+            this.$store.dispatch('muteDomain', { id: this.domain, expiresIn: this.muteExpiryValue })
+          } else {
+            this.$store.dispatch('unmuteDomain', { id: this.domain })
+          }
+          break
+        }
+        case 'conversation': {
+          if (!this.conversationIsMuted) {
+            this.$store.dispatch('muteConversation', { id: this.status.id, expiresIn: this.muteExpiryValue })
+          } else {
+            this.$store.dispatch('unmuteConversation', { id: this.status.id })
+          }
+          break
+        }
+        default: {
+          if (!this.userIsMuted) {
+            this.$store.dispatch('muteUser', { id: this.user.id, expiresIn: this.muteExpiryValue })
+          } else {
+            this.$store.dispatch('unmuteUser', { id: this.user.id })
+          }
+          break
+        }
+      }
+      this.$emit('muted')
+      this.hide()
+    }
+  }
+}
diff --git a/src/components/confirm_modal/mute_confirm.vue b/src/components/confirm_modal/mute_confirm.vue
new file mode 100644
index 000000000..bf7ab338f
--- /dev/null
+++ b/src/components/confirm_modal/mute_confirm.vue
@@ -0,0 +1,61 @@
+<template>
+  <confirm-modal
+    v-if="showing"
+    :title="$t('user_card.mute_confirm_title')"
+    :confirm-text="$t('user_card.mute_confirm_accept_button')"
+    :cancel-text="$t('user_card.mute_confirm_cancel_button')"
+    @accepted="doMute"
+    @cancelled="hide"
+  >
+    <i18n-t
+      :keypath="keypath"
+      tag="div"
+    >
+      <template #domain>
+        <span v-text="domain" />
+      </template>
+      <template #user>
+        <span v-text="user.screen_name_ui" />
+      </template>
+    </i18n-t>
+    <div
+      v-if="type !== 'domain'"
+      class="mute-expiry"
+    >
+      <p>
+        <label>
+          {{ $t('user_card.mute_duration_prompt') }}
+        </label>
+        <input
+          v-model="muteExpiryAmount"
+          type="number"
+          class="input expiry-amount hide-number-spinner"
+          :min="0"
+        >
+        {{ ' ' }}
+        <Select
+          v-model="muteExpiryUnit"
+          unstyled="true"
+          class="expiry-unit"
+        >
+          <option
+            v-for="unit in muteExpiryUnits"
+            :key="unit"
+            :value="unit"
+          >
+            {{ $t(`time.unit.${unit}_short`, ['']) }}
+          </option>
+        </Select>
+      </p>
+    </div>
+  </confirm-modal>
+</template>
+
+<script src="./mute_confirm.js" />
+
+<style lang="scss">
+.expiry-amount {
+  width: 4em;
+  text-align: right;
+}
+</style>
diff --git a/src/components/contrast_ratio/contrast_ratio.vue b/src/components/contrast_ratio/contrast_ratio.vue
index bbd6fd4a5..93799e4c2 100644
--- a/src/components/contrast_ratio/contrast_ratio.vue
+++ b/src/components/contrast_ratio/contrast_ratio.vue
@@ -3,39 +3,62 @@
     v-if="contrast"
     class="contrast-ratio"
   >
-    <span
-      :title="hint"
+    <span v-if="showRatio">
+      {{ contrast.text }}
+    </span>
+    <Tooltip
+      :text="hint"
       class="rating"
     >
       <span v-if="contrast.aaa">
-        <FAIcon icon="thumbs-up" />
+        <FAIcon
+          icon="thumbs-up"
+          :size="showRatio ? 'lg' : ''"
+        />
       </span>
       <span v-if="!contrast.aaa && contrast.aa">
-        <FAIcon icon="adjust" />
+        <FAIcon
+          icon="adjust"
+          :size="showRatio ? 'lg' : ''"
+        />
       </span>
       <span v-if="!contrast.aaa && !contrast.aa">
-        <FAIcon icon="exclamation-triangle" />
+        <FAIcon
+          icon="exclamation-triangle"
+          :size="showRatio ? 'lg' : ''"
+        />
       </span>
-    </span>
-    <span
+    </Tooltip>
+    <Tooltip
       v-if="contrast && large"
+      :text="hint_18pt"
       class="rating"
-      :title="hint_18pt"
     >
       <span v-if="contrast.laaa">
-        <FAIcon icon="thumbs-up" />
+        <FAIcon
+          icon="thumbs-up"
+          :size="showRatio ? 'large' : ''"
+        />
       </span>
       <span v-if="!contrast.laaa && contrast.laa">
-        <FAIcon icon="adjust" />
+        <FAIcon
+          icon="adjust"
+          :size="showRatio ? 'lg' : ''"
+        />
       </span>
       <span v-if="!contrast.laaa && !contrast.laa">
-        <FAIcon icon="exclamation-triangle" />
+        <FAIcon
+          icon="exclamation-triangle"
+          :size="showRatio ? 'lg' : ''"
+        />
       </span>
-    </span>
+    </Tooltip>
   </span>
 </template>
 
 <script>
+import Tooltip from 'src/components/tooltip/tooltip.vue'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faAdjust,
@@ -50,6 +73,9 @@ library.add(
 )
 
 export default {
+  components: {
+    Tooltip
+  },
   props: {
     large: {
       required: false,
@@ -62,6 +88,11 @@ export default {
       required: false,
       type: Object,
       default: () => ({})
+    },
+    showRatio: {
+      required: false,
+      type: Boolean,
+      default: false
     }
   },
   computed: {
@@ -87,8 +118,7 @@ export default {
 .contrast-ratio {
   display: flex;
   justify-content: flex-end;
-  margin-top: -4px;
-  margin-bottom: 5px;
+  align-items: baseline;
 
   .label {
     margin-right: 1em;
@@ -96,7 +126,6 @@ export default {
 
   .rating {
     display: inline-block;
-    text-align: center;
     margin-left: 0.5em;
   }
 }
diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index 85e6d8ad5..6f6f2cac2 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -56,7 +56,8 @@ const conversation = {
       expanded: false,
       threadDisplayStatusObject: {}, // id => 'showing' | 'hidden'
       statusContentPropertiesObject: {},
-      inlineDivePosition: null
+      inlineDivePosition: null,
+      loadStatusError: null
     }
   },
   props: [
@@ -349,6 +350,7 @@ const conversation = {
     },
     ...mapGetters(['mergedConfig']),
     ...mapState({
+      mobileLayout: state => state.interface.layoutType === 'mobile',
       mastoUserSocketStatus: state => state.api.mastoUserSocketStatus
     })
   },
@@ -392,11 +394,15 @@ const conversation = {
             this.setHighlight(this.originalStatusId)
           })
       } else {
+        this.loadStatusError = null
         this.$store.state.api.backendInteractor.fetchStatus({ id: this.statusId })
           .then((status) => {
             this.$store.dispatch('addNewStatuses', { statuses: [status] })
             this.fetchConversation()
           })
+          .catch((error) => {
+            this.loadStatusError = error
+          })
       }
     },
     getReplies (id) {
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 7577129e2..51c016323 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -9,7 +9,9 @@
       v-if="isExpanded"
       class="panel-heading conversation-heading -sticky"
     >
-      <span class="title"> {{ $t('timeline.conversation') }} </span>
+      <h1 class="title">
+        {{ $t('timeline.conversation') }}
+      </h1>
       <button
         v-if="collapsable"
         class="button-unstyled -link"
@@ -18,7 +20,7 @@
         {{ $t('timeline.collapse') }}
       </button>
       <QuickFilterSettings
-        v-if="!collapsable"
+        v-if="!collapsable && mobileLayout"
         :conversation="true"
         class="rightside-button"
       />
@@ -28,7 +30,27 @@
         class="rightside-button"
       />
     </div>
-    <div class="conversation-body panel-body">
+    <div
+      v-if="isPage && !status"
+      class="conversation-body"
+      :class="{ 'panel-body': isExpanded }"
+    >
+      <p v-if="!loadStatusError">
+        <FAIcon
+          spin
+          icon="circle-notch"
+        />
+        {{ $t('status.loading') }}
+      </p>
+      <p v-else>
+        {{ $t('status.load_error', { error: loadStatusError }) }}
+      </p>
+    </div>
+    <div
+      v-else
+      class="conversation-body"
+      :class="{ 'panel-body': isExpanded }"
+    >
       <div
         v-if="isTreeView"
         class="thread-body"
@@ -51,7 +73,7 @@
             </template>
             <template #text>
               <span>
-                {{ $tc('status.show_all_conversation', otherTopLevelCount, { numStatus: otherTopLevelCount }) }}
+                {{ $t('status.show_all_conversation', { numStatus: otherTopLevelCount }, otherTopLevelCount) }}
               </span>
             </template>
           </i18n-t>
@@ -124,7 +146,7 @@
                   </template>
                   <template #text>
                     <span>
-                      {{ $tc('status.ancestor_follow', getReplies(status.id).length - 1, { numReplies: getReplies(status.id).length - 1 }) }}
+                      {{ $t('status.ancestor_follow', { numReplies: getReplies(status.id, getReplies(status.id).length - 1).length - 1 }) }}
                     </span>
                   </template>
                 </i18n-t>
@@ -203,6 +225,7 @@
   </div>
   <div
     v-else
+    class="Conversation -hidden"
     :style="hiddenStyle"
   />
 </template>
@@ -210,14 +233,17 @@
 <script src="./conversation.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .Conversation {
   z-index: 1;
 
+  &.-hidden {
+    background: var(--__panel-background);
+    backdrop-filter: var(--__panel-backdrop-filter);
+  }
+
   .conversation-dive-to-top-level-box {
-    padding: var(--status-margin, $status-margin);
-    border-bottom: 1px solid var(--border, $fallback--border);
+    padding: var(--status-margin);
+    border-bottom: 1px solid var(--border);
     border-radius: 0;
 
     /* Make the button stretch along the whole row */
@@ -227,20 +253,22 @@
   }
 
   .thread-ancestors {
-    margin-left: var(--status-margin, $status-margin);
-    border-left: 2px solid var(--border, $fallback--border);
+    margin-left: var(--status-margin);
+    border-left: 2px solid var(--border);
   }
 
-  .thread-ancestor.-faded .StatusContent {
-    --link: var(--faintLink);
-    --text: var(--faint);
-
-    color: var(--text);
+  .thread-ancestor.-faded .RichContent {
+    /* stylelint-disable declaration-no-important */
+    --text: var(--textFaint) !important;
+    --link: var(--linkFaint) !important;
+    --funtextGreentext: var(--funtextGreentextFaint) !important;
+    --funtextCyantext: var(--funtextCyantextFaint) !important;
+    /* stylelint-enable declaration-no-important */
   }
 
   .thread-ancestor-dive-box {
-    padding-left: var(--status-margin, $status-margin);
-    border-bottom: 1px solid var(--border, $fallback--border);
+    padding-left: var(--status-margin);
+    border-bottom: 1px solid var(--border);
     border-radius: 0;
 
     /* Make the button stretch along the whole row */
@@ -253,16 +281,17 @@
   }
 
   .thread-ancestor-dive-box-inner {
-    padding: var(--status-margin, $status-margin);
+    padding: var(--status-margin);
   }
 
   .conversation-status {
-    border-bottom: 1px solid var(--border, $fallback--border);
+    border-bottom: 1px solid var(--border);
     border-radius: 0;
   }
 
   .thread-ancestor-has-other-replies .conversation-status,
-  &:last-child .conversation-status,
+  &:last-child:not(.-expanded) .conversation-status,
+  &.-expanded .conversation-status:last-child,
   .thread-ancestor:last-child .conversation-status,
   .thread-ancestor:last-child .thread-ancestor-dive-box,
   &.-expanded .thread-tree .conversation-status {
@@ -270,20 +299,36 @@
   }
 
   .thread-ancestors + .thread-tree > .conversation-status {
-    border-top: 1px solid var(--border, $fallback--border);
+    border-top: 1px solid var(--border);
   }
 
   /* expanded conversation in timeline */
   &.status-fadein.-expanded .thread-body {
-    border-left: 4px solid $fallback--cRed;
-    border-left-color: var(--cRed, $fallback--cRed);
-    border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
-    border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
-    border-bottom: 1px solid var(--border, $fallback--border);
+    border-left: 4px solid var(--cRed);
+    border-radius: var(--roundness);
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    border-bottom: 1px solid var(--border);
   }
 
   &.-expanded.status-fadein {
-    margin: calc(var(--status-margin, $status-margin) / 2);
+    --___margin: calc(var(--status-margin) / 2);
+
+    background: var(--background);
+    margin: var(--___margin);
+
+    &::before {
+      z-index: -1;
+      content: "";
+      display: block;
+      position: absolute;
+      top: calc(var(--___margin) * -1);
+      bottom: calc(var(--___margin) * -1);
+      left: calc(var(--___margin) * -1);
+      right: calc(var(--___margin) * -1);
+      background: var(--background);
+      backdrop-filter: var(--__panel-backdrop-filter);
+    }
   }
 }
 </style>
diff --git a/src/components/desktop_nav/desktop_nav.js b/src/components/desktop_nav/desktop_nav.js
index 69ac7b73f..f84c0cb57 100644
--- a/src/components/desktop_nav/desktop_nav.js
+++ b/src/components/desktop_nav/desktop_nav.js
@@ -108,7 +108,10 @@ export default {
       this.searchBarHidden = hidden
     },
     openSettingsModal () {
-      useInterfaceStore().openSettingsModal()
+      useInterfaceStore().openSettingsModal('user')
+    },
+    openAdminModal () {
+      useInterfaceStore().openSettingsModal('admin')
     }
   }
 }
diff --git a/src/components/desktop_nav/desktop_nav.scss b/src/components/desktop_nav/desktop_nav.scss
index c7e02936a..0c094ce28 100644
--- a/src/components/desktop_nav/desktop_nav.scss
+++ b/src/components/desktop_nav/desktop_nav.scss
@@ -1,5 +1,3 @@
-@import "../../variables";
-
 .DesktopNav {
   width: 100%;
   z-index: var(--ZI_navbar);
@@ -8,10 +6,6 @@
     color: var(--inputTopbarText, var(--inputText));
   }
 
-  a {
-    color: var(--topBarLink, $fallback--link);
-  }
-
   .inner-nav {
     display: grid;
     grid-template-rows: var(--navbar-height);
@@ -54,27 +48,7 @@
   .button-default {
     &,
     svg {
-      color: $fallback--text;
-      color: var(--btnTopBarText, $fallback--text);
-    }
-
-    &:active {
-      background-color: $fallback--fg;
-      background-color: var(--btnPressedTopBar, $fallback--fg);
-      color: $fallback--text;
-      color: var(--btnPressedTopBarText, $fallback--text);
-    }
-
-    &:disabled {
-      color: $fallback--text;
-      color: var(--btnDisabledTopBarText, $fallback--text);
-    }
-
-    &.toggled {
-      color: $fallback--text;
-      color: var(--btnToggledTopBarText, $fallback--text);
-      background-color: $fallback--fg;
-      background-color: var(--btnToggledTopBar, $fallback--fg);
+      color: var(--text);
     }
   }
 
@@ -94,8 +68,7 @@
       mask-repeat: no-repeat;
       mask-position: center;
       mask-size: contain;
-      background-color: $fallback--fg;
-      background-color: var(--topBarText, $fallback--fg);
+      background-color: var(--text);
       position: absolute;
       top: 0;
       bottom: 0;
@@ -114,11 +87,6 @@
     width: 2em;
     height: 100%;
     text-align: center;
-
-    .svg-inline--fa {
-      color: $fallback--link;
-      color: var(--topBarLink, $fallback--link);
-    }
   }
 
   .sitename {
diff --git a/src/components/desktop_nav/desktop_nav.vue b/src/components/desktop_nav/desktop_nav.vue
index dc8bbfd38..49382f8ee 100644
--- a/src/components/desktop_nav/desktop_nav.vue
+++ b/src/components/desktop_nav/desktop_nav.vue
@@ -48,20 +48,19 @@
             icon="cog"
           />
         </button>
-        <a
+        <button
           v-if="currentUser && currentUser.role === 'admin'"
-          href="/pleroma/admin/#/login-pleroma"
-          class="nav-icon"
+          class="button-unstyled nav-icon"
           target="_blank"
           :title="$t('nav.administration')"
-          @click.stop
+          @click.stop="openAdminModal"
         >
           <FAIcon
             fixed-width
             class="fa-scale-110 fa-old-padding"
             icon="tachometer-alt"
           />
-        </a>
+        </button>
         <span class="spacer" />
         <button
           v-if="currentUser"
diff --git a/src/components/dialog_modal/dialog_modal.js b/src/components/dialog_modal/dialog_modal.js
index f14e3fe9a..b39851fe7 100644
--- a/src/components/dialog_modal/dialog_modal.js
+++ b/src/components/dialog_modal/dialog_modal.js
@@ -8,6 +8,11 @@ const DialogModal = {
       default: () => {},
       type: Function
     }
+  },
+  computed: {
+    mobileCenter () {
+      return this.$store.getters.mergedConfig.modalMobileCenter
+    }
   }
 }
 
diff --git a/src/components/dialog_modal/dialog_modal.vue b/src/components/dialog_modal/dialog_modal.vue
index 341cf1054..1eb88efb5 100644
--- a/src/components/dialog_modal/dialog_modal.vue
+++ b/src/components/dialog_modal/dialog_modal.vue
@@ -1,6 +1,7 @@
 <template>
   <span
-    :class="{ 'dark-overlay': darkOverlay }"
+    class="dialog-container"
+    :class="{ 'dark-overlay': darkOverlay, '-center-mobile': mobileCenter }"
     @click.self.stop="onCancel()"
   >
     <div
@@ -8,11 +9,11 @@
       @click.stop=""
     >
       <div class="panel-heading dialog-modal-heading">
-        <div class="title">
+        <h1 class="title">
           <slot name="header" />
-        </div>
+        </h1>
       </div>
-      <div class="dialog-modal-content">
+      <div class="panel-body dialog-modal-content">
         <slot name="default" />
       </div>
       <div class="dialog-modal-footer user-interactions panel-footer">
@@ -25,8 +26,6 @@
 <script src="./dialog_modal.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 // TODO: unify with other modals.
 .dark-overlay {
   &::before {
@@ -43,19 +42,24 @@
   }
 }
 
-.dialog-modal.panel {
+.dialog-container {
+  display: grid;
+  position: fixed;
   top: 0;
-  left: 50%;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  justify-content: center;
+  align-items: center;
+  justify-items: center;
+}
+
+.dialog-modal.panel {
   max-height: 80vh;
   max-width: 90vw;
-  margin: 15vh auto;
-  position: fixed;
-  transform: translateX(-50%);
   z-index: 2001;
   cursor: default;
   display: block;
-  background-color: $fallback--bg;
-  background-color: var(--bg, $fallback--bg);
 
   .dialog-modal-heading {
     .title {
@@ -66,24 +70,57 @@
   .dialog-modal-content {
     margin: 0;
     padding: 1rem;
-    background-color: $fallback--bg;
-    background-color: var(--bg, $fallback--bg);
     white-space: normal;
+    text-align: center;
   }
 
   .dialog-modal-footer {
     margin: 0;
     padding: 0.5em;
-    background-color: $fallback--bg;
-    background-color: var(--bg, $fallback--bg);
-    border-top: 1px solid $fallback--border;
-    border-top: 1px solid var(--border, $fallback--border);
-    display: flex;
-    justify-content: flex-end;
+    border-top: 1px solid var(--border);
+    display: grid;
+    justify-content: end;
+    grid-gap: 0.5em;
+    grid-template-columns: min-content;
+    grid-auto-columns: min-content;
+    grid-auto-flow: column dense;
+    height: auto;
 
     button {
       width: auto;
-      margin-left: 0.5rem;
+      white-space: nowrap;
+      padding-left: 2em;
+      padding-right: 2em;
+    }
+  }
+}
+
+#modal.-mobile {
+  .dialog-container {
+    justify-content: stretch;
+    align-items: end;
+    justify-items: stretch;
+
+    &.-center-mobile {
+      align-items: center;
+    }
+  }
+
+  .dialog-modal.panel {
+    min-width: 100vw;
+  }
+
+  .dialog-modal-footer {
+    flex-direction: column;
+    justify-content: flex-end;
+    grid-template-columns: 1fr;
+    grid-auto-columns: none;
+    grid-auto-rows: auto;
+    grid-auto-flow: row dense;
+
+    button {
+      grid-column: 1;
+      height: 3em;
     }
   }
 }
diff --git a/src/components/draft/draft.js b/src/components/draft/draft.js
new file mode 100644
index 000000000..55ee11a15
--- /dev/null
+++ b/src/components/draft/draft.js
@@ -0,0 +1,104 @@
+import PostStatusForm from 'src/components/post_status_form/post_status_form.vue'
+import EditStatusForm from 'src/components/edit_status_form/edit_status_form.vue'
+import ConfirmModal from 'src/components/confirm_modal/confirm_modal.vue'
+import StatusContent from 'src/components/status_content/status_content.vue'
+import Gallery from 'src/components/gallery/gallery.vue'
+import { cloneDeep } from 'lodash'
+
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faPollH
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faPollH
+)
+
+const Draft = {
+  components: {
+    PostStatusForm,
+    EditStatusForm,
+    ConfirmModal,
+    StatusContent,
+    Gallery
+  },
+  props: {
+    draft: {
+      type: Object,
+      required: true
+    }
+  },
+  data () {
+    return {
+      referenceDraft: cloneDeep(this.draft),
+      editing: false,
+      showingConfirmDialog: false
+    }
+  },
+  computed: {
+    relAttrs () {
+      if (this.draft.type === 'edit') {
+        return { statusId: this.draft.refId }
+      } else if (this.draft.type === 'reply') {
+        return { replyTo: this.draft.refId }
+      } else {
+        return {}
+      }
+    },
+    safeToSave () {
+      return this.draft.status ||
+        this.draft.files?.length ||
+        this.draft.hasPoll
+    },
+    postStatusFormProps () {
+      return {
+        draftId: this.draft.id,
+        ...this.relAttrs
+      }
+    },
+    refStatus () {
+      return this.draft.refId ? this.$store.state.statuses.allStatusesObject[this.draft.refId] : undefined
+    },
+    localCollapseSubjectDefault () {
+      return this.$store.getters.mergedConfig.collapseMessageWithSubject
+    },
+    nsfwClickthrough () {
+      if (!this.draft.nsfw) {
+        return false
+      }
+      if (this.draft.summary && this.localCollapseSubjectDefault) {
+        return false
+      }
+      return true
+    }
+  },
+  watch: {
+    editing (newVal) {
+      if (newVal) return
+      if (this.safeToSave) {
+        this.$store.dispatch('addOrSaveDraft', { draft: this.draft })
+      } else {
+        this.$store.dispatch('addOrSaveDraft', { draft: this.referenceDraft })
+      }
+    }
+  },
+  methods: {
+    toggleEditing () {
+      this.editing = !this.editing
+    },
+    abandon () {
+      this.showingConfirmDialog = true
+    },
+    doAbandon () {
+      this.$store.dispatch('abandonDraft', { id: this.draft.id })
+        .then(() => {
+          this.hideConfirmDialog()
+        })
+    },
+    hideConfirmDialog () {
+      this.showingConfirmDialog = false
+    }
+  }
+}
+
+export default Draft
diff --git a/src/components/draft/draft.vue b/src/components/draft/draft.vue
new file mode 100644
index 000000000..7b0878112
--- /dev/null
+++ b/src/components/draft/draft.vue
@@ -0,0 +1,174 @@
+<template>
+  <article class="Draft">
+    <div
+      v-if="!editing"
+      class="status-content"
+    >
+      <div>
+        <i18n-t
+          v-if="draft.type === 'reply' || draft.type === 'edit'"
+          tag="span"
+          :keypath="draft.type === 'reply' ? 'drafts.replying' : 'drafts.editing'"
+        >
+          <template #statusLink>
+            <router-link
+              class="faint-link"
+              :to="{ name: 'conversation', params: { id: draft.refId } }"
+            >
+              {{ refStatus ? refStatus.external_url : $t('drafts.unavailable') }}
+            </router-link>
+          </template>
+        </i18n-t>
+        <StatusContent
+          v-if="draft.refId && refStatus"
+          class="status-content"
+          :status="refStatus"
+          :compact="true"
+        />
+      </div>
+      <div class="status-preview">
+        <span class="status_content">
+          <p v-if="draft.spoilerText">
+            <i>
+              {{ draft.spoilerText }}:
+            </i>
+          </p>
+          <p v-if="draft.status">{{ draft.status }}</p>
+          <p
+            v-else
+            class="faint"
+          >{{ $t('drafts.empty') }}</p>
+        </span>
+        <gallery
+          v-if="draft.files?.length !== 0"
+          class="attachments media-body"
+          :compact="true"
+          :nsfw="nsfwClickthrough"
+          :attachments="draft.files"
+          :limit="1"
+          size="small"
+          @play="$emit('mediaplay', attachment.id)"
+          @pause="$emit('mediapause', attachment.id)"
+        />
+        <div
+          v-if="draft.poll.options"
+          class="poll-indicator-container"
+          :title="$t('drafts.poll_tooltip')"
+        >
+          <div class="poll-indicator">
+            <FAIcon
+              icon="poll-h"
+              size="3x"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-if="editing">
+      <PostStatusForm
+        v-if="draft.type !== 'edit'"
+        :hide-draft="true"
+        v-bind="postStatusFormProps"
+      />
+      <EditStatusForm
+        v-else
+        :hide-draft="true"
+        :params="postStatusFormProps"
+      />
+    </div>
+    <teleport to="#modal">
+      <confirm-modal
+        v-if="showingConfirmDialog"
+        :title="$t('drafts.abandon_confirm_title')"
+        :confirm-text="$t('drafts.abandon_confirm_accept_button')"
+        :cancel-text="$t('drafts.abandon_confirm_cancel_button')"
+        @accepted="doAbandon"
+        @cancelled="hideConfirmDialog"
+      >
+        {{ $t('drafts.abandon_confirm') }}
+      </confirm-modal>
+    </teleport>
+    <div class="actions">
+      <button
+        class="btn button-default"
+        :aria-expanded="editing"
+        @click.prevent.stop="toggleEditing"
+      >
+        {{ editing ? $t('drafts.save') : $t('drafts.continue') }}
+      </button>
+      <button
+        class="btn button-default"
+        @click.prevent.stop="abandon"
+      >
+        {{ $t('drafts.abandon') }}
+      </button>
+    </div>
+  </article>
+</template>
+
+<script src="./draft.js"></script>
+
+<style lang="scss">
+.Draft {
+  position: relative;
+
+  .status-content {
+    padding: 0.5em;
+    margin: 0.5em 0;
+  }
+
+  .status-preview {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-auto-columns: 10em;
+    grid-auto-flow: column;
+    grid-gap: 0.5em;
+    align-items: start;
+    max-width: 100%;
+
+    p {
+      word-wrap: break-word;
+      white-space: normal;
+      overflow-x: hidden;
+    }
+
+    .poll-indicator-container {
+      border-radius: var(--roundness);
+      display: grid;
+      justify-items: center;
+      align-items: center;
+      align-self: start;
+      height: 0;
+      padding-bottom: 62.5%;
+      position: relative;
+    }
+
+    .poll-indicator {
+      box-sizing: border-box;
+      border: 1px solid var(--border);
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      display: grid;
+      justify-items: center;
+      align-items: center;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .actions {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+
+    .btn {
+      flex: 1;
+      margin-left: 1em;
+      margin-right: 1em;
+    }
+  }
+}
+</style>
diff --git a/src/components/draft_closer/draft_closer.js b/src/components/draft_closer/draft_closer.js
new file mode 100644
index 000000000..e50ea05ab
--- /dev/null
+++ b/src/components/draft_closer/draft_closer.js
@@ -0,0 +1,52 @@
+import DialogModal from 'src/components/dialog_modal/dialog_modal.vue'
+
+const DraftCloser = {
+  data () {
+    return {
+      showing: false
+    }
+  },
+  components: {
+    DialogModal
+  },
+  emits: [
+    'save',
+    'discard'
+  ],
+  computed: {
+    action () {
+      if (this.$store.getters.mergedConfig.autoSaveDraft) {
+        return 'save'
+      } else {
+        return this.$store.getters.mergedConfig.unsavedPostAction
+      }
+    },
+    shouldConfirm () {
+      return this.action === 'confirm'
+    }
+  },
+  methods: {
+    requestClose () {
+      if (this.shouldConfirm) {
+        this.showing = true
+      } else if (this.action === 'save') {
+        this.save()
+      } else {
+        this.discard()
+      }
+    },
+    save () {
+      this.$emit('save')
+      this.showing = false
+    },
+    discard () {
+      this.$emit('discard')
+      this.showing = false
+    },
+    cancel () {
+      this.showing = false
+    }
+  }
+}
+
+export default DraftCloser
diff --git a/src/components/draft_closer/draft_closer.vue b/src/components/draft_closer/draft_closer.vue
new file mode 100644
index 000000000..1afb1f44d
--- /dev/null
+++ b/src/components/draft_closer/draft_closer.vue
@@ -0,0 +1,43 @@
+<template>
+  <teleport to="#modal">
+    <dialog-modal
+      v-if="showing"
+      v-body-scroll-lock="true"
+      class="confirm-modal"
+      :on-cancel="cancel"
+    >
+      <template #header>
+        <span>
+          {{ $t('post_status.close_confirm_title') }}
+        </span>
+      </template>
+
+      {{ $t('post_status.close_confirm') }}
+
+      <template #footer>
+        <button
+          class="btn button-default"
+          @click.prevent="save"
+        >
+          {{ $t('post_status.close_confirm_save_button') }}
+        </button>
+
+        <button
+          class="btn button-default"
+          @click.prevent="discard"
+        >
+          {{ $t('post_status.close_confirm_discard_button') }}
+        </button>
+
+        <button
+          class="btn button-default"
+          @click.prevent="cancel"
+        >
+          {{ $t('post_status.close_confirm_continue_composing_button') }}
+        </button>
+      </template>
+    </dialog-modal>
+  </teleport>
+</template>
+
+<script src="./draft_closer.js"></script>
diff --git a/src/components/drafts/drafts.js b/src/components/drafts/drafts.js
new file mode 100644
index 000000000..201417f66
--- /dev/null
+++ b/src/components/drafts/drafts.js
@@ -0,0 +1,16 @@
+import Draft from 'src/components/draft/draft.vue'
+import List from 'src/components/list/list.vue'
+
+const Drafts = {
+  components: {
+    Draft,
+    List
+  },
+  computed: {
+    drafts () {
+      return this.$store.getters.draftsArray
+    }
+  }
+}
+
+export default Drafts
diff --git a/src/components/drafts/drafts.vue b/src/components/drafts/drafts.vue
new file mode 100644
index 000000000..9c9b3d584
--- /dev/null
+++ b/src/components/drafts/drafts.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="Drafts">
+    <div class="panel panel-default">
+      <div class="panel-heading">
+        <div class="title">
+          {{ $t('drafts.drafts') }}
+        </div>
+      </div>
+      <div class="panel-body">
+        <p v-if="drafts.length === 0">
+          {{ $t('drafts.no_drafts') }}
+        </p>
+        <List
+          v-else
+          :items="drafts"
+          :non-interactive="true"
+        >
+          <template #item="{ item: draft }">
+            <Draft
+              class="draft"
+              :draft="draft"
+            />
+          </template>
+        </List>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script src="./drafts.js"></script>
+
+<style lang="scss">
+.draft {
+  margin: 1em 0;
+}
+</style>
diff --git a/src/components/edit_status_form/edit_status_form.js b/src/components/edit_status_form/edit_status_form.js
new file mode 100644
index 000000000..323763370
--- /dev/null
+++ b/src/components/edit_status_form/edit_status_form.js
@@ -0,0 +1,44 @@
+import PostStatusForm from '../post_status_form/post_status_form.vue'
+import statusPosterService from '../../services/status_poster/status_poster.service.js'
+
+const EditStatusForm = {
+  components: {
+    PostStatusForm
+  },
+  props: {
+    params: {
+      type: Object,
+      required: true
+    }
+  },
+  methods: {
+    requestClose () {
+      this.$refs.postStatusForm.requestClose()
+    },
+    doEditStatus ({ status, spoilerText, sensitive, media, contentType, poll }) {
+      const params = {
+        store: this.$store,
+        statusId: this.params.statusId,
+        status,
+        spoilerText,
+        sensitive,
+        poll,
+        media,
+        contentType
+      }
+
+      return statusPosterService.editStatus(params)
+        .then((data) => {
+          return data
+        })
+        .catch((err) => {
+          console.error('Error editing status', err)
+          return {
+            error: err.message
+          }
+        })
+    }
+  }
+}
+
+export default EditStatusForm
diff --git a/src/components/edit_status_form/edit_status_form.vue b/src/components/edit_status_form/edit_status_form.vue
new file mode 100644
index 000000000..0a7ec760a
--- /dev/null
+++ b/src/components/edit_status_form/edit_status_form.vue
@@ -0,0 +1,11 @@
+<template>
+  <PostStatusForm
+    ref="postStatusForm"
+    v-bind="params"
+    :post-handler="doEditStatus"
+    :disable-polls="true"
+    :disable-visibility-selector="true"
+  />
+</template>
+
+<script src="./edit_status_form.js"></script>
diff --git a/src/components/edit_status_modal/edit_status_modal.js b/src/components/edit_status_modal/edit_status_modal.js
index c39211510..112928d64 100644
--- a/src/components/edit_status_modal/edit_status_modal.js
+++ b/src/components/edit_status_modal/edit_status_modal.js
@@ -1,12 +1,11 @@
-import PostStatusForm from '../post_status_form/post_status_form.vue'
+import EditStatusForm from '../edit_status_form/edit_status_form.vue'
 import Modal from '../modal/modal.vue'
-import statusPosterService from '../../services/status_poster/status_poster.service.js'
 import get from 'lodash/get'
 import { useEditStatusStore } from '../../stores/editStatus'
 
 const EditStatusModal = {
   components: {
-    PostStatusForm,
+    EditStatusForm,
     Modal
   },
   data () {
@@ -44,30 +43,10 @@ const EditStatusModal = {
     }
   },
   methods: {
-    doEditStatus ({ status, spoilerText, sensitive, media, contentType, poll }) {
-      const params = {
-        store: this.$store,
-        statusId: useEditStatusStore().params.statusId,
-        status,
-        spoilerText,
-        sensitive,
-        poll,
-        media,
-        contentType
-      }
-
-      return statusPosterService.editStatus(params)
-        .then((data) => {
-          return data
-        })
-        .catch((err) => {
-          console.error('Error editing status', err)
-          return {
-            error: err.message
-          }
-        })
-    },
     closeModal () {
+      this.$refs.editStatusForm.requestClose()
+    },
+    doCloseModal () {
       useEditStatusStore().closeEditStatusModal()
     }
   }
diff --git a/src/components/edit_status_modal/edit_status_modal.vue b/src/components/edit_status_modal/edit_status_modal.vue
index db62972d6..a53caf4ec 100644
--- a/src/components/edit_status_modal/edit_status_modal.vue
+++ b/src/components/edit_status_modal/edit_status_modal.vue
@@ -6,15 +6,17 @@
   >
     <div class="edit-form-modal-panel panel">
       <div class="panel-heading">
-        {{ $t('post_status.edit_status') }}
+        <h1 class="title">
+          {{ $t('post_status.edit_status') }}
+        </h1>
       </div>
-      <PostStatusForm
+      <EditStatusForm
+        ref="editStatusForm"
         class="panel-body"
-        v-bind="params"
-        :post-handler="doEditStatus"
-        :disable-polls="true"
-        :disable-visibility-selector="true"
-        @posted="closeModal"
+        :params="params"
+        @posted="doCloseModal"
+        @draft-done="doCloseModal"
+        @can-close="doCloseModal"
       />
     </div>
   </Modal>
diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js
index 68654f693..09d44b0bd 100644
--- a/src/components/emoji_input/emoji_input.js
+++ b/src/components/emoji_input/emoji_input.js
@@ -1,4 +1,5 @@
 import Completion from '../../services/completion/completion.js'
+import genRandomSeed from '../../services/random_seed/random_seed.service.js'
 import EmojiPicker from '../emoji_picker/emoji_picker.vue'
 import Popover from 'src/components/popover/popover.vue'
 import ScreenReaderNotice from 'src/components/screen_reader_notice/screen_reader_notice.vue'
@@ -110,7 +111,7 @@ const EmojiInput = {
   },
   data () {
     return {
-      randomSeed: `${Math.random()}`.replace('.', '-'),
+      randomSeed: genRandomSeed(),
       input: undefined,
       caretEl: undefined,
       highlighted: -1,
@@ -292,9 +293,12 @@ const EmojiInput = {
         }))
       this.highlighted = this.defaultCandidateIndex
       this.$refs.screenReaderNotice.announce(
-        this.$tc('tool_tip.autocomplete_available',
-          this.suggestions.length,
-          { number: this.suggestions.length }))
+        this.$t(
+          'tool_tip.autocomplete_available',
+          { number: this.suggestions.length },
+          this.suggestions.length
+        )
+      )
     }
   },
   methods: {
diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
index 7f9ecc998..9bd5c8f4e 100644
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     ref="root"
-    class="emoji-input"
+    class="input emoji-input"
     :class="{ 'with-picker': !hideEmojiButton }"
   >
     <slot
@@ -68,9 +68,9 @@
             v-for="(suggestion, index) in suggestions"
             :id="suggestionItemId(index)"
             :key="index"
-            class="autocomplete-item"
+            class="menu-item autocomplete-item"
             role="option"
-            :class="{ highlighted: index === highlighted }"
+            :class="{ '-active': index === highlighted }"
             :aria-label="autoCompleteItemLabel(suggestion)"
             :aria-selected="index === highlighted"
             @click.stop.prevent="onClick($event, suggestion)"
@@ -110,9 +110,8 @@
 <script src="./emoji_input.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
-.emoji-input {
+.input.emoji-input {
+  padding: 0;
   display: flex;
   flex-direction: column;
   position: relative;
@@ -127,8 +126,7 @@
     line-height: 24px;
 
     &:hover i {
-      color: $fallback--text;
-      color: var(--text, $fallback--text);
+      color: var(--text);
     }
   }
 
@@ -145,6 +143,12 @@
   input,
   textarea {
     flex: 1 0 auto;
+    color: inherit;
+    /* stylelint-disable-next-line declaration-no-important */
+    background: none !important;
+    box-shadow: none;
+    border: none;
+    outline: none;
   }
 
   &.with-picker input {
@@ -179,26 +183,28 @@
     position: absolute;
   }
 
-  &-item {
+  &-item.menu-item {
     display: flex;
-    cursor: pointer;
-    padding: 0.2em 0.4em;
-    border-bottom: 1px solid rgb(0 0 0 / 40%);
-    height: 32px;
+    padding-top: 0;
+    padding-bottom: 0;
 
     .image {
-      width: 32px;
-      height: 32px;
-      line-height: 32px;
+      width: calc(var(--__line-height) + var(--__vertical-gap) * 2);
+      height: calc(var(--__line-height) + var(--__vertical-gap) * 2);
+      line-height: var(--__line-height);
       text-align: center;
-      font-size: 32px;
-      margin-right: 4px;
+      margin-right: var(--__horizontal-gap);
 
       img {
-        width: 32px;
-        height: 32px;
+        width: calc(var(--__line-height) + var(--__vertical-gap) * 2);
+        height: calc(var(--__line-height) + var(--__vertical-gap) * 2);
         object-fit: contain;
       }
+
+      span {
+        font-size: var(--__line-height);
+        line-height: var(--__line-height);
+      }
     }
 
     .label {
@@ -216,17 +222,6 @@
         line-height: 9px;
       }
     }
-
-    &.highlighted {
-      background-color: $fallback--fg;
-      background-color: var(--selectedMenuPopover, $fallback--fg);
-      color: var(--selectedMenuPopoverText, $fallback--text);
-
-      --faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
-      --faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
-      --lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
-      --icon: var(--selectedMenuPopoverIcon, $fallback--icon);
-    }
   }
 }
 </style>
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 349b043df..48532d3e7 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -97,7 +97,7 @@ const EmojiPicker = {
     enableStickerPicker: {
       required: false,
       type: Boolean,
-      default: false
+      default: true
     },
     hideCustomEmoji: {
       required: false,
@@ -105,6 +105,11 @@ const EmojiPicker = {
       default: false
     }
   },
+  inject: {
+    popoversZLayer: {
+      default: ''
+    }
+  },
   data () {
     return {
       keyword: '',
@@ -113,11 +118,13 @@ const EmojiPicker = {
       groupsScrolledClass: 'scrolled-top',
       keepOpen: false,
       customEmojiTimeout: null,
+      hideCustomEmojiInPicker: false,
       // Lazy-load only after the first time `showing` becomes true.
       contentLoaded: false,
       groupRefs: {},
       emojiRefs: {},
       filteredEmojiGroups: [],
+      emojiSize: 0,
       width: 0
     }
   },
@@ -128,9 +135,42 @@ const EmojiPicker = {
     Popover
   },
   methods: {
+    groupScroll (e) {
+      e.currentTarget.scrollLeft += e.deltaY + e.deltaX
+    },
+    updateEmojiSize () {
+      const css = window.getComputedStyle(this.$refs.popover.$el)
+      const fontSize = css.getPropertyValue('font-size') || '14px'
+      const emojiSize = css.getPropertyValue('--emojiSize') || '2.2rem'
+
+      const fontSizeUnit = fontSize.replace(/[0-9,.]+/, '')
+      const fontSizeValue = Number(fontSize.replace(/[^0-9,.]+/, ''))
+
+      const emojiSizeUnit = emojiSize.replace(/[0-9,.]+/, '')
+      const emojiSizeValue = Number(emojiSize.replace(/[^0-9,.]+/, ''))
+
+      let fontSizeMultiplier
+      if (fontSizeUnit.endsWith('em')) {
+        fontSizeMultiplier = fontSizeValue
+      } else {
+        fontSizeMultiplier = fontSizeValue / 14
+      }
+
+      let emojiSizeReal
+      if (emojiSizeUnit.endsWith('em')) {
+        emojiSizeReal = emojiSizeValue * fontSizeMultiplier * 14
+      } else {
+        emojiSizeReal = emojiSizeValue
+      }
+
+      const fullEmojiSize = emojiSizeReal + (2 * 0.2 * fontSizeMultiplier * 14)
+      this.emojiSize = fullEmojiSize
+    },
     showPicker () {
       this.$refs.popover.showPopover()
-      this.onShowing()
+      this.$nextTick(() => {
+        this.onShowing()
+      })
     },
     hidePicker () {
       this.$refs.popover.hidePopover()
@@ -158,7 +198,7 @@ const EmojiPicker = {
       if (!this.keepOpen) {
         this.$refs.popover.hidePopover()
       }
-      this.$emit('emoji', { insertion: value, keepOpen: this.keepOpen })
+      this.$emit('emoji', { insertion: value, insertionUrl: emoji.imageUrl, keepOpen: this.keepOpen })
     },
     onScroll (startIndex, endIndex, visibleStartIndex, visibleEndIndex) {
       const target = this.$refs['emoji-groups'].$el
@@ -222,6 +262,7 @@ const EmojiPicker = {
     },
     onShowing () {
       const oldContentLoaded = this.contentLoaded
+      this.updateEmojiSize()
       this.recalculateItemPerRow()
       this.$nextTick(() => {
         this.$refs.search.focus()
@@ -264,16 +305,20 @@ const EmojiPicker = {
   },
   computed: {
     minItemSize () {
-      return this.emojiHeight
+      return this.emojiSize
+    },
+    // used to watch it
+    fontSize () {
+      this.$nextTick(() => {
+        this.updateEmojiSize()
+      })
+      return this.$store.getters.mergedConfig.fontSize
     },
     emojiHeight () {
-      return 32 + 4
-    },
-    emojiWidth () {
-      return 32 + 4
+      return this.emojiSize
     },
     itemPerRow () {
-      return this.width ? Math.floor(this.width / this.emojiWidth - 1) : 6
+      return this.width ? Math.floor(this.width / this.emojiSize) : 6
     },
     activeGroupView () {
       return this.showingStickers ? '' : this.activeGroup
@@ -285,7 +330,7 @@ const EmojiPicker = {
       return 0
     },
     allCustomGroups () {
-      if (this.hideCustomEmoji) {
+      if (this.hideCustomEmoji || this.hideCustomEmojiInPicker) {
         return {}
       }
       const emojis = this.$store.getters.groupedCustomEmojis
@@ -350,6 +395,9 @@ const EmojiPicker = {
 
         return emoji.displayText
       }
+    },
+    isInModal () {
+      return this.popoversZLayer === 'modals'
     }
   }
 }
diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index 5bcff33b0..0c9a66008 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -1,62 +1,56 @@
-@import "../../variables";
-
-$emoji-picker-header-height: 36px;
-$emoji-picker-header-picture-width: 32px;
-$emoji-picker-header-picture-height: 32px;
-$emoji-picker-emoji-size: 32px;
-
 .emoji-picker {
+  --__emoji-picker-header: 2.2em;
+
   width: 25em;
   max-width: calc(100vw - 20px); // popover gives 10px margin from window edge
   display: flex;
   flex-direction: column;
-  background-color: $fallback--bg;
-  background-color: var(--popover, $fallback--bg);
-  color: $fallback--link;
-  color: var(--popoverText, $fallback--link);
-
-  --faint: var(--popoverFaintText, $fallback--faint);
-  --faintLink: var(--popoverFaintLink, $fallback--faint);
-  --lightText: var(--popoverLightText, $fallback--lightText);
-  --icon: var(--popoverIcon, $fallback--icon);
 
   &-header-image {
     display: inline-flex;
     justify-content: center;
     align-items: center;
-    width: $emoji-picker-header-picture-width;
-    max-width: $emoji-picker-header-picture-width;
-    height: $emoji-picker-header-picture-height;
-    max-height: $emoji-picker-header-picture-height;
+    width: var(--__emoji-picker-header);
+    max-width: var(--__emoji-picker-header);
+    height: var(--__emoji-picker-header);
+    max-height: var(--__emoji-picker-header);
 
     .still-image {
-      max-width: 100%;
-      max-height: 100%;
-      height: 100%;
-      width: 100%;
+      width: var(--__emoji-picker-header);
+      max-width: var(--__emoji-picker-header);
+      height: var(--__emoji-picker-header);
+      max-height: var(--__emoji-picker-header);
       object-fit: contain;
+
+      --_still_image-label-scale: 0.5;
     }
   }
 
   .keep-open,
-  .too-many-emoji {
-    padding: 7px;
+  .too-many-emoji,
+  .hide-custom-emoji {
+    padding: 0.5em;
     line-height: normal;
   }
 
+  .hide-custom-emoji {
+    padding-top: 0;
+  }
+
   .too-many-emoji {
     display: flex;
     flex-direction: column;
   }
 
   .keep-open-label {
-    padding: 0 7px;
+    padding: 0 0.5em;
     display: flex;
   }
 
   .heading {
     display: flex;
-    padding: 10px 7px 5px;
+    flex-direction: column;
+    padding: 0.7em 0.5em 0;
   }
 
   .content {
@@ -71,14 +65,14 @@ $emoji-picker-emoji-size: 32px;
     display: flex;
     flex-flow: row nowrap;
     overflow-x: auto;
+    overflow-y: hidden;
   }
 
   .additional-tabs {
     display: flex;
     border-left: 1px solid;
-    border-left-color: $fallback--icon;
-    border-left-color: var(--icon, $fallback--icon);
-    padding-left: 7px;
+    border-left-color: var(--border);
+    padding-left: 0.5em;
     flex: 0 0 auto;
   }
 
@@ -87,30 +81,29 @@ $emoji-picker-emoji-size: 32px;
     flex-basis: auto;
     display: flex;
     align-content: center;
+    scrollbar-width: thin;
 
     &-item {
-      padding: 0 7px;
+      padding: 0 0.5em;
       cursor: pointer;
-      font-size: 1.85em;
-      width: $emoji-picker-header-picture-width;
-      max-width: $emoji-picker-header-picture-width;
-      height: $emoji-picker-header-picture-height;
-      max-height: $emoji-picker-header-picture-height;
+      width: var(--__emoji-picker-header);
+      max-width: var(--__emoji-picker-header);
+      height: var(--__emoji-picker-header);
+      max-height: var(--__emoji-picker-header);
       display: flex;
       align-items: center;
 
+      .svg-inline--fa {
+        font-size: 1.85em;
+      }
+
       &.disabled {
         opacity: 0.5;
         pointer-events: none;
       }
 
-      &.active {
-        border-bottom: 4px solid;
-
-        svg {
-          color: $fallback--lightText;
-          color: var(--lightText, $fallback--lightText);
-        }
+      &.toggled {
+        border-bottom: 0.2em solid;
       }
     }
   }
@@ -137,7 +130,7 @@ $emoji-picker-emoji-size: 32px;
 
   .emoji {
     &-search {
-      padding: 5px;
+      padding-bottom: 0.5em;
       flex: 0 0 auto;
 
       input {
@@ -151,6 +144,7 @@ $emoji-picker-emoji-size: 32px;
       flex: 1 1 1px;
       position: relative;
       overflow: auto;
+      scrollbar-gutter: stable both-edges;
       user-select: none;
       mask:
         linear-gradient(to top, white 0, transparent 100%) bottom no-repeat,
@@ -173,45 +167,60 @@ $emoji-picker-emoji-size: 32px;
       }
     }
 
-    &-group {
+    &-item {
+      width: var(--emoji-size);
+      height: var(--emoji-size);
+      box-sizing: border-box;
       display: flex;
+      line-height: var(--emoji-size);
       align-items: center;
-      flex-wrap: wrap;
-      padding-left: 5px;
-      justify-content: left;
+      justify-content: center;
+      margin: 0.2em;
+      cursor: pointer;
+
+      .emoji-picker-emoji.-custom {
+        object-fit: contain;
+        width: var(--emoji-size);
+        max-width: var(--emoji-size);
+        height: var(--emoji-size);
+        max-height: var(--emoji-size);
+
+        --_still_image-label-scale: 0.5;
+      }
+
+      .emoji-picker-emoji.-unicode {
+        font-size: calc(var(--emoji-size) * 0.8);
+        overflow: hidden;
+      }
+    }
+
+    &-group {
+      display: grid;
+      grid-template-columns: repeat(var(--__amount), 1fr);
+      align-items: center;
+      justify-items: center;
+      justify-content: center;
+      grid-template-rows: repeat(1, auto);
+
+      &.first-row {
+        grid-template-rows: repeat(2, auto);
+
+        .emoji-item {
+          grid-row: 2;
+        }
+      }
 
       &-title {
         font-size: 0.85em;
+        grid-column: span var(--__amount);
         width: 100%;
         margin: 0;
+        padding-left: 0.3em;
 
         &.disabled {
           display: none;
         }
       }
     }
-
-    &-item {
-      width: $emoji-picker-emoji-size;
-      height: $emoji-picker-emoji-size;
-      box-sizing: border-box;
-      display: flex;
-      line-height: $emoji-picker-emoji-size;
-      align-items: center;
-      justify-content: center;
-      margin: 4px;
-      cursor: pointer;
-
-      .emoji-picker-emoji.-custom {
-        object-fit: contain;
-        max-width: 100%;
-        max-height: 100%;
-      }
-
-      .emoji-picker-emoji.-unicode {
-        font-size: 24px;
-        overflow: hidden;
-      }
-    }
   }
 }
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index 6972164b0..2a2e260f1 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -3,25 +3,45 @@
     ref="popover"
     trigger="click"
     popover-class="emoji-picker popover-default"
-    :trigger-attrs="{ 'aria-hidden': true }"
+    :trigger-attrs="{ 'aria-hidden': true, tabindex: -1 }"
     @show="onPopoverShown"
     @close="onPopoverClosed"
   >
     <template #content>
-      <div class="heading">
+      <div
+        class="heading"
+      >
+        <div class="emoji-search">
+          <input
+            ref="search"
+            v-model="keyword"
+            type="text"
+            class="input form-control"
+            :placeholder="$t('emoji.search_emoji')"
+            @input="$event.target.composing = false"
+          >
+        </div>
+        <!--
+          Body scroll lock needs to be on every scrollable element on safari iOS.
+          Here we tell it to enable scrolling for this element.
+          See https://github.com/willmcpo/body-scroll-lock#vanilla-js
+        -->
         <span
           ref="header"
+          v-body-scroll-lock="isInModal"
           class="emoji-tabs"
+          @wheel.prevent="groupScroll"
         >
           <span
             v-for="group in filteredEmojiGroups"
             :ref="setGroupRef('group-header-' + group.id)"
             :key="group.id"
-            class="emoji-tabs-item"
+            class="button-unstyled emoji-tabs-item"
             :class="{
-              active: activeGroupView === group.id
+              toggled: activeGroupView === group.id
             }"
             :title="group.text"
+            role="button"
             @click.prevent="highlight(group.id)"
           >
             <span
@@ -45,8 +65,8 @@
           class="additional-tabs"
         >
           <span
-            class="stickers-tab-icon additional-tabs-item"
-            :class="{active: showingStickers}"
+            class="button-unstyled stickers-tab-icon additional-tabs-item"
+            :class="{toggled: showingStickers}"
             :title="$t('emoji.stickers')"
             @click.prevent="toggleStickers"
           >
@@ -65,21 +85,14 @@
           class="emoji-content"
           :class="{hidden: showingStickers}"
         >
-          <div class="emoji-search">
-            <input
-              ref="search"
-              v-model="keyword"
-              type="text"
-              class="form-control"
-              :placeholder="$t('emoji.search_emoji')"
-              @input="$event.target.composing = false"
-            >
-          </div>
+          <!-- Enables scrolling for this element on safari iOS. See comments for header. -->
           <DynamicScroller
             ref="emoji-groups"
+            v-body-scroll-lock="isInModal"
             class="emoji-groups"
             :class="groupsScrolledClass"
             :min-item-size="minItemSize"
+            :buffer="minItemSize"
             :items="emojiItems"
             :emit-update="true"
             @update="onScroll"
@@ -96,6 +109,8 @@
               >
                 <div
                   class="emoji-group"
+                  :class="{ ['first-row']: group.isFirstRow }"
+                  :style="{ '--__amount': itemPerRow }"
                 >
                   <h6
                     v-if="group.isFirstRow"
@@ -108,6 +123,7 @@
                     :key="group.id + emoji.displayText"
                     :title="maybeLocalizedEmojiName(emoji)"
                     class="emoji-item"
+                    role="button"
                     @click.stop.prevent="onEmoji(emoji)"
                   >
                     <span
@@ -118,6 +134,7 @@
                       v-else
                       class="emoji-picker-emoji -custom"
                       loading="lazy"
+                      :alt="maybeLocalizedEmojiName(emoji)"
                       :src="emoji.imageUrl"
                       :data-emoji-name="group.id + emoji.displayText"
                     />
@@ -131,6 +148,17 @@
               {{ $t('emoji.keep_open') }}
             </Checkbox>
           </div>
+          <div
+            v-if="!hideCustomEmoji"
+            class="hide-custom-emoji"
+          >
+            <Checkbox
+              v-model="hideCustomEmojiInPicker"
+              @change="onShowing"
+            >
+              {{ $t('emoji.hide_custom_emoji') }}
+            </Checkbox>
+          </div>
         </div>
         <div
           v-if="showingStickers"
diff --git a/src/components/emoji_reactions/emoji_reactions.js b/src/components/emoji_reactions/emoji_reactions.js
index bb11b840f..861fbe542 100644
--- a/src/components/emoji_reactions/emoji_reactions.js
+++ b/src/components/emoji_reactions/emoji_reactions.js
@@ -1,5 +1,18 @@
 import UserAvatar from '../user_avatar/user_avatar.vue'
 import UserListPopover from '../user_list_popover/user_list_popover.vue'
+import StillImage from 'src/components/still-image/still-image.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faPlus,
+  faMinus,
+  faCheck
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faPlus,
+  faMinus,
+  faCheck
+)
 
 const EMOJI_REACTION_COUNT_CUTOFF = 12
 
@@ -7,7 +20,8 @@ const EmojiReactions = {
   name: 'EmojiReactions',
   components: {
     UserAvatar,
-    UserListPopover
+    UserListPopover,
+    StillImage
   },
   props: ['status'],
   data: () => ({
@@ -33,6 +47,9 @@ const EmojiReactions = {
     },
     loggedIn () {
       return !!this.$store.state.users.currentUser
+    },
+    remoteInteractionLink () {
+      return this.$store.getters.remoteInteractionLink({ statusId: this.status.id })
     }
   },
   methods: {
@@ -42,10 +59,10 @@ const EmojiReactions = {
     reactedWith (emoji) {
       return this.status.emoji_reactions.find(r => r.name === emoji).me
     },
-    fetchEmojiReactionsByIfMissing () {
+    async fetchEmojiReactionsByIfMissing () {
       const hasNoAccounts = this.status.emoji_reactions.find(r => !r.accounts)
       if (hasNoAccounts) {
-        this.$store.dispatch('fetchEmojiReactionsBy', this.status.id)
+        return await this.$store.dispatch('fetchEmojiReactionsBy', this.status.id)
       }
     },
     reactWith (emoji) {
@@ -54,14 +71,29 @@ const EmojiReactions = {
     unreact (emoji) {
       this.$store.dispatch('unreactWithEmoji', { id: this.status.id, emoji })
     },
-    emojiOnClick (emoji, event) {
+    async emojiOnClick (emoji, event) {
       if (!this.loggedIn) return
 
+      await this.fetchEmojiReactionsByIfMissing()
       if (this.reactedWith(emoji)) {
         this.unreact(emoji)
       } else {
         this.reactWith(emoji)
       }
+    },
+    counterTriggerAttrs (reaction) {
+      return {
+        class: [
+          'btn',
+          'button-default',
+          'emoji-reaction-count-button',
+          {
+            '-picked-reaction': this.reactedWith(reaction.name),
+            toggled: this.reactedWith(reaction.name)
+          }
+        ],
+        'aria-label': this.$t('status.reaction_count_label', { num: reaction.count }, reaction.count)
+      }
     }
   }
 }
diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue
index eb46018e2..63adef5f9 100644
--- a/src/components/emoji_reactions/emoji_reactions.vue
+++ b/src/components/emoji_reactions/emoji_reactions.vue
@@ -1,34 +1,63 @@
 <template>
   <div class="EmojiReactions">
-    <UserListPopover
+    <span
       v-for="(reaction) in emojiReactions"
       :key="reaction.url || reaction.name"
-      :users="accountsForEmoji[reaction.name]"
+      class="emoji-reaction-container btn-group"
     >
-      <button
+      <component
+        :is="loggedIn ? 'button' : 'a'"
+        v-bind="!loggedIn ? { href: remoteInteractionLink } : {}"
+        role="button"
         class="emoji-reaction btn button-default"
-        :class="{ '-picked-reaction': reactedWith(reaction.name), 'not-clickable': !loggedIn }"
+        :class="{ '-picked-reaction': reactedWith(reaction.name), toggled: reactedWith(reaction.name) }"
+        :title="reaction.url ? reaction.name : undefined"
+        :aria-pressed="reactedWith(reaction.name)"
         @click="emojiOnClick(reaction.name, $event)"
-        @mouseenter="fetchEmojiReactionsByIfMissing()"
       >
         <span
           class="reaction-emoji"
         >
-          <img
+          <StillImage
             v-if="reaction.url"
             :src="reaction.url"
-            :title="reaction.name"
             class="reaction-emoji-content"
-            width="1em"
-          >
+          />
           <span
             v-else
             class="reaction-emoji reaction-emoji-content"
           >{{ reaction.name }}</span>
         </span>
-        <span>{{ reaction.count }}</span>
-      </button>
-    </UserListPopover>
+        <FALayers>
+          <FAIcon
+            v-if="reactedWith(reaction.name)"
+            class="active-marker"
+            transform="shrink-6 up-9"
+            icon="check"
+          />
+          <FAIcon
+            v-if="!reactedWith(reaction.name)"
+            class="focus-marker"
+            transform="shrink-6 up-9"
+            icon="plus"
+          />
+          <FAIcon
+            v-else
+            class="focus-marker"
+            transform="shrink-6 up-9"
+            icon="minus"
+          />
+        </FALayers>
+      </component>
+      <UserListPopover
+        :users="accountsForEmoji[reaction.name]"
+        class="emoji-reaction-popover"
+        :trigger-attrs="counterTriggerAttrs(reaction)"
+        @show="fetchEmojiReactionsByIfMissing()"
+      >
+        <span class="emoji-reaction-counts">{{ reaction.count }}</span>
+      </UserListPopover>
+    </span>
     <a
       v-if="tooManyReactions"
       class="emoji-reaction-expand faint"
@@ -42,23 +71,47 @@
 
 <script src="./emoji_reactions.js"></script>
 <style lang="scss">
-@import "../../variables";
+@import "../../mixins";
 
 .EmojiReactions {
   display: flex;
   margin-top: 0.25em;
   flex-wrap: wrap;
 
-  --emoji-size: calc(1.25em * var(--emojiReactionsScale, 1));
+  --emoji-size: calc(var(--emojiSize, 1.25em) * var(--emojiReactionsScale, 1));
+
+  .emoji-reaction-container {
+    display: flex;
+    align-items: stretch;
+    margin-top: 0.5em;
+    margin-right: 0.5em;
+
+    .emoji-reaction-popover {
+      padding: 0;
+
+      .emoji-reaction-count-button {
+        margin: 0;
+        height: 100%;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+        box-sizing: border-box;
+        min-width: 2em;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+  }
 
   .emoji-reaction {
-    padding: 0 0.5em;
-    margin-right: 0.5em;
-    margin-top: 0.5em;
+    padding-left: 0.5em;
     display: flex;
     align-items: center;
     justify-content: center;
     box-sizing: border-box;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    margin: 0;
 
     .reaction-emoji {
       width: var(--emoji-size);
@@ -68,36 +121,61 @@
       display: flex;
       justify-content: center;
       align-items: center;
+
+      --_still_image-label-scale: 0.3;
     }
 
     .reaction-emoji-content {
       max-width: 100%;
       max-height: 100%;
-      width: auto;
-      height: auto;
+      width: var(--emoji-size);
+      height: var(--emoji-size);
       line-height: inherit;
       overflow: hidden;
       font-size: calc(var(--emoji-size) * 0.8);
       margin: 0;
+
+      img {
+        object-fit: contain;
+      }
     }
 
     &:focus {
       outline: none;
     }
 
-    &.not-clickable {
-      cursor: default;
-
-      &:hover {
-        box-shadow: $fallback--buttonShadow;
-        box-shadow: var(--buttonShadow);
-      }
+    .svg-inline--fa {
+      color: var(--text);
     }
 
     &.-picked-reaction {
-      border: 1px solid var(--accent, $fallback--link);
-      margin-left: -1px; // offset the border, can't use inset shadows either
-      margin-right: calc(0.5em - 1px);
+      .svg-inline--fa {
+        color: var(--accent);
+      }
+    }
+
+    @include unfocused-style {
+      .focus-marker {
+        visibility: hidden;
+      }
+
+      .active-marker {
+        visibility: visible;
+      }
+    }
+
+    @include focused-style {
+      .svg-inline--fa {
+        color: var(--accent);
+      }
+
+      .focus-marker {
+        visibility: visible;
+      }
+
+      .active-marker {
+        visibility: hidden;
+      }
     }
   }
 
diff --git a/src/components/extra_buttons/extra_buttons.js b/src/components/extra_buttons/extra_buttons.js
deleted file mode 100644
index d2de7b3ab..000000000
--- a/src/components/extra_buttons/extra_buttons.js
+++ /dev/null
@@ -1,162 +0,0 @@
-import Popover from '../popover/popover.vue'
-import ConfirmModal from '../confirm_modal/confirm_modal.vue'
-import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faEllipsisH,
-  faBookmark,
-  faEyeSlash,
-  faThumbtack,
-  faShareAlt,
-  faExternalLinkAlt,
-  faHistory,
-  faPlus,
-  faTimes
-} from '@fortawesome/free-solid-svg-icons'
-import {
-  faBookmark as faBookmarkReg,
-  faFlag
-} from '@fortawesome/free-regular-svg-icons'
-import { useEditStatusStore } from '../../stores/editStatus'
-import { useStatusHistoryStore } from '../../stores/statusHistory'
-import { useReportsStore } from '../../stores/reports'
-
-library.add(
-  faEllipsisH,
-  faBookmark,
-  faBookmarkReg,
-  faEyeSlash,
-  faThumbtack,
-  faShareAlt,
-  faExternalLinkAlt,
-  faFlag,
-  faHistory,
-  faPlus,
-  faTimes
-)
-
-const ExtraButtons = {
-  props: ['status'],
-  components: {
-    Popover,
-    ConfirmModal
-  },
-  data () {
-    return {
-      expanded: false,
-      showingDeleteDialog: false
-    }
-  },
-  methods: {
-    onShow () {
-      this.expanded = true
-    },
-    onClose () {
-      this.expanded = false
-    },
-    deleteStatus () {
-      if (this.shouldConfirmDelete) {
-        this.showDeleteStatusConfirmDialog()
-      } else {
-        this.doDeleteStatus()
-      }
-    },
-    doDeleteStatus () {
-      this.$store.dispatch('deleteStatus', { id: this.status.id })
-      this.hideDeleteStatusConfirmDialog()
-    },
-    showDeleteStatusConfirmDialog () {
-      this.showingDeleteDialog = true
-    },
-    hideDeleteStatusConfirmDialog () {
-      this.showingDeleteDialog = false
-    },
-    pinStatus () {
-      this.$store.dispatch('pinStatus', this.status.id)
-        .then(() => this.$emit('onSuccess'))
-        .catch(err => this.$emit('onError', err.error.error))
-    },
-    unpinStatus () {
-      this.$store.dispatch('unpinStatus', this.status.id)
-        .then(() => this.$emit('onSuccess'))
-        .catch(err => this.$emit('onError', err.error.error))
-    },
-    muteConversation () {
-      this.$store.dispatch('muteConversation', this.status.id)
-        .then(() => this.$emit('onSuccess'))
-        .catch(err => this.$emit('onError', err.error.error))
-    },
-    unmuteConversation () {
-      this.$store.dispatch('unmuteConversation', this.status.id)
-        .then(() => this.$emit('onSuccess'))
-        .catch(err => this.$emit('onError', err.error.error))
-    },
-    copyLink () {
-      navigator.clipboard.writeText(this.statusLink)
-        .then(() => this.$emit('onSuccess'))
-        .catch(err => this.$emit('onError', err.error.error))
-    },
-    bookmarkStatus () {
-      this.$store.dispatch('bookmark', { id: this.status.id })
-        .then(() => this.$emit('onSuccess'))
-        .catch(err => this.$emit('onError', err.error.error))
-    },
-    unbookmarkStatus () {
-      this.$store.dispatch('unbookmark', { id: this.status.id })
-        .then(() => this.$emit('onSuccess'))
-        .catch(err => this.$emit('onError', err.error.error))
-    },
-    reportStatus () {
-      useReportsStore().openUserReportingModal({ userId: this.status.user.id, statusIds: [this.status.id] })
-    },
-    editStatus () {
-      this.$store.dispatch('fetchStatusSource', { id: this.status.id })
-        .then(data => useEditStatusStore().openEditStatusModal({
-          statusId: this.status.id,
-          subject: data.spoiler_text,
-          statusText: data.text,
-          statusIsSensitive: this.status.nsfw,
-          statusPoll: this.status.poll,
-          statusFiles: [...this.status.attachments],
-          visibility: this.status.visibility,
-          statusContentType: data.content_type
-        }))
-    },
-    showStatusHistory () {
-      const originalStatus = { ...this.status }
-      const stripFieldsList = ['attachments', 'created_at', 'emojis', 'text', 'raw_html', 'nsfw', 'poll', 'summary', 'summary_raw_html']
-      stripFieldsList.forEach(p => delete originalStatus[p])
-      useStatusHistoryStore().openStatusHistoryModal(originalStatus)
-    }
-  },
-  computed: {
-    currentUser () { return this.$store.state.users.currentUser },
-    canDelete () {
-      if (!this.currentUser) { return }
-      return this.currentUser.privileges.includes('messages_delete') || this.status.user.id === this.currentUser.id
-    },
-    ownStatus () {
-      return this.status.user.id === this.currentUser.id
-    },
-    canPin () {
-      return this.ownStatus && (this.status.visibility === 'public' || this.status.visibility === 'unlisted')
-    },
-    canMute () {
-      return !!this.currentUser
-    },
-    canBookmark () {
-      return !!this.currentUser
-    },
-    statusLink () {
-      return `${this.$store.state.instance.server}${this.$router.resolve({ name: 'conversation', params: { id: this.status.id } }).href}`
-    },
-    isEdited () {
-      return this.status.edited_at !== null
-    },
-    editingAvailable () { return this.$store.state.instance.editingAvailable },
-    shouldConfirmDelete () {
-      return this.$store.getters.mergedConfig.modalOnDelete
-    }
-  }
-}
-
-export default ExtraButtons
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
deleted file mode 100644
index c1c15c0fb..000000000
--- a/src/components/extra_buttons/extra_buttons.vue
+++ /dev/null
@@ -1,219 +0,0 @@
-<template>
-  <Popover
-    class="ExtraButtons"
-    trigger="click"
-    placement="top"
-    :offset="{ y: 5 }"
-    :bound-to="{ x: 'container' }"
-    remove-padding
-    @show="onShow"
-    @close="onClose"
-  >
-    <template #content="{close}">
-      <div class="dropdown-menu">
-        <button
-          v-if="canMute && !status.thread_muted"
-          class="button-default dropdown-item dropdown-item-icon"
-          @click.prevent="muteConversation"
-        >
-          <FAIcon
-            fixed-width
-            icon="eye-slash"
-          /><span>{{ $t("status.mute_conversation") }}</span>
-        </button>
-        <button
-          v-if="canMute && status.thread_muted"
-          class="button-default dropdown-item dropdown-item-icon"
-          @click.prevent="unmuteConversation"
-        >
-          <FAIcon
-            fixed-width
-            icon="eye-slash"
-          /><span>{{ $t("status.unmute_conversation") }}</span>
-        </button>
-        <button
-          v-if="!status.pinned && canPin"
-          class="button-default dropdown-item dropdown-item-icon"
-          @click.prevent="pinStatus"
-          @click="close"
-        >
-          <FAIcon
-            fixed-width
-            icon="thumbtack"
-          /><span>{{ $t("status.pin") }}</span>
-        </button>
-        <button
-          v-if="status.pinned && canPin"
-          class="button-default dropdown-item dropdown-item-icon"
-          @click.prevent="unpinStatus"
-          @click="close"
-        >
-          <FAIcon
-            fixed-width
-            icon="thumbtack"
-          /><span>{{ $t("status.unpin") }}</span>
-        </button>
-        <template v-if="canBookmark">
-          <button
-            v-if="!status.bookmarked"
-            class="button-default dropdown-item dropdown-item-icon"
-            @click.prevent="bookmarkStatus"
-            @click="close"
-          >
-            <FAIcon
-              fixed-width
-              :icon="['far', 'bookmark']"
-            /><span>{{ $t("status.bookmark") }}</span>
-          </button>
-          <button
-            v-if="status.bookmarked"
-            class="button-default dropdown-item dropdown-item-icon"
-            @click.prevent="unbookmarkStatus"
-            @click="close"
-          >
-            <FAIcon
-              fixed-width
-              icon="bookmark"
-            /><span>{{ $t("status.unbookmark") }}</span>
-          </button>
-        </template>
-        <button
-          v-if="ownStatus && editingAvailable"
-          class="button-default dropdown-item dropdown-item-icon"
-          @click.prevent="editStatus"
-          @click="close"
-        >
-          <FAIcon
-            fixed-width
-            icon="pen"
-          /><span>{{ $t("status.edit") }}</span>
-        </button>
-        <button
-          v-if="isEdited && editingAvailable"
-          class="button-default dropdown-item dropdown-item-icon"
-          @click.prevent="showStatusHistory"
-          @click="close"
-        >
-          <FAIcon
-            fixed-width
-            icon="history"
-          /><span>{{ $t("status.status_history") }}</span>
-        </button>
-        <button
-          v-if="canDelete"
-          class="button-default dropdown-item dropdown-item-icon"
-          @click.prevent="deleteStatus"
-          @click="close"
-        >
-          <FAIcon
-            fixed-width
-            icon="times"
-          /><span>{{ $t("status.delete") }}</span>
-        </button>
-        <button
-          class="button-default dropdown-item dropdown-item-icon"
-          @click.prevent="copyLink"
-          @click="close"
-        >
-          <FAIcon
-            fixed-width
-            icon="share-alt"
-          /><span>{{ $t("status.copy_link") }}</span>
-        </button>
-        <a
-          v-if="!status.is_local"
-          class="button-default dropdown-item dropdown-item-icon"
-          title="Source"
-          :href="status.external_url"
-          target="_blank"
-        >
-          <FAIcon
-            fixed-width
-            icon="external-link-alt"
-          /><span>{{ $t("status.external_source") }}</span>
-        </a>
-        <button
-          class="button-default dropdown-item dropdown-item-icon"
-          @click.prevent="reportStatus"
-          @click="close"
-        >
-          <FAIcon
-            fixed-width
-            :icon="['far', 'flag']"
-          /><span>{{ $t("user_card.report") }}</span>
-        </button>
-      </div>
-    </template>
-    <template #trigger>
-      <span class="button-unstyled popover-trigger">
-        <FALayers class="fa-old-padding-layer">
-          <FAIcon
-            class="fa-scale-110 "
-            icon="ellipsis-h"
-          />
-          <FAIcon
-            v-show="!expanded"
-            class="focus-marker"
-            transform="shrink-6 up-8 right-16"
-            icon="plus"
-          />
-          <FAIcon
-            v-show="expanded"
-            class="focus-marker"
-            transform="shrink-6 up-8 right-16"
-            icon="times"
-          />
-        </FALayers>
-      </span>
-      <teleport to="#modal">
-        <ConfirmModal
-          v-if="showingDeleteDialog"
-          :title="$t('status.delete_confirm_title')"
-          :cancel-text="$t('status.delete_confirm_cancel_button')"
-          :confirm-text="$t('status.delete_confirm_accept_button')"
-          @cancelled="hideDeleteStatusConfirmDialog"
-          @accepted="doDeleteStatus"
-        >
-          {{ $t('status.delete_confirm') }}
-        </ConfirmModal>
-      </teleport>
-    </template>
-  </Popover>
-</template>
-
-<script src="./extra_buttons.js"></script>
-
-<style lang="scss">
-@import "../../variables";
-@import "../../mixins";
-
-.ExtraButtons {
-  .popover-trigger {
-    position: static;
-    padding: 10px;
-    margin: -10px;
-
-    &:hover .svg-inline--fa {
-      color: $fallback--text;
-      color: var(--text, $fallback--text);
-    }
-  }
-
-  .popover-trigger-button {
-    /* override of popover internal stuff */
-    width: auto;
-
-    @include unfocused-style {
-      .focus-marker {
-        visibility: hidden;
-      }
-    }
-
-    @include focused-style {
-      .focus-marker {
-        visibility: visible;
-      }
-    }
-  }
-}
-</style>
diff --git a/src/components/extra_notifications/extra_notifications.js b/src/components/extra_notifications/extra_notifications.js
new file mode 100644
index 000000000..1bb0f8374
--- /dev/null
+++ b/src/components/extra_notifications/extra_notifications.js
@@ -0,0 +1,48 @@
+import { mapGetters } from 'vuex'
+
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faUserPlus,
+  faComments,
+  faBullhorn
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faUserPlus,
+  faComments,
+  faBullhorn
+)
+
+const ExtraNotifications = {
+  computed: {
+    shouldShowChats () {
+      return this.mergedConfig.showExtraNotifications && this.mergedConfig.showChatsInExtraNotifications && this.unreadChatCount
+    },
+    shouldShowAnnouncements () {
+      return this.mergedConfig.showExtraNotifications && this.mergedConfig.showAnnouncementsInExtraNotifications && this.unreadAnnouncementCount
+    },
+    shouldShowFollowRequests () {
+      return this.mergedConfig.showExtraNotifications && this.mergedConfig.showFollowRequestsInExtraNotifications && this.followRequestCount
+    },
+    hasAnythingToShow () {
+      return this.shouldShowChats || this.shouldShowAnnouncements || this.shouldShowFollowRequests
+    },
+    shouldShowCustomizationTip () {
+      return this.mergedConfig.showExtraNotificationsTip && this.hasAnythingToShow
+    },
+    currentUser () {
+      return this.$store.state.users.currentUser
+    },
+    ...mapGetters(['unreadChatCount', 'unreadAnnouncementCount', 'followRequestCount', 'mergedConfig'])
+  },
+  methods: {
+    openNotificationSettings () {
+      return this.$store.dispatch('openSettingsModalTab', 'notifications')
+    },
+    dismissConfigurationTip () {
+      return this.$store.dispatch('setOption', { name: 'showExtraNotificationsTip', value: false })
+    }
+  }
+}
+
+export default ExtraNotifications
diff --git a/src/components/extra_notifications/extra_notifications.vue b/src/components/extra_notifications/extra_notifications.vue
new file mode 100644
index 000000000..5728dc98f
--- /dev/null
+++ b/src/components/extra_notifications/extra_notifications.vue
@@ -0,0 +1,111 @@
+<template>
+  <div class="ExtraNotifications">
+    <div
+      v-if="shouldShowChats"
+      class="notification unseen"
+    >
+      <div class="notification-overlay" />
+      <router-link
+        class="button-unstyled -link extra-notification"
+        :to="{ name: 'chats', params: { username: currentUser.screen_name } }"
+      >
+        <FAIcon
+          fixed-width
+          class="fa-scale-110 icon"
+          icon="comments"
+        />
+        {{ $t('notifications.unread_chats', { num: unreadChatCount }, unreadChatCount) }}
+      </router-link>
+    </div>
+    <div
+      v-if="shouldShowAnnouncements"
+      class="notification unseen"
+    >
+      <div class="notification-overlay" />
+      <router-link
+        class="button-unstyled -link extra-notification"
+        :to="{ name: 'announcements' }"
+      >
+        <FAIcon
+          fixed-width
+          class="fa-scale-110 icon"
+          icon="bullhorn"
+        />
+        {{ $t('notifications.unread_announcements', { num: unreadAnnouncementCount }, unreadAnnouncementCount) }}
+      </router-link>
+    </div>
+    <div
+      v-if="shouldShowFollowRequests"
+      class="notification unseen"
+    >
+      <div class="notification-overlay" />
+      <router-link
+        class="button-unstyled -link extra-notification"
+        :to="{ name: 'friend-requests' }"
+      >
+        <FAIcon
+          fixed-width
+          class="fa-scale-110 icon"
+          icon="user-plus"
+        />
+        {{ $t('notifications.unread_follow_requests', { num: followRequestCount }, followRequestCount) }}
+      </router-link>
+    </div>
+    <i18n-t
+      v-if="shouldShowCustomizationTip"
+      tag="span"
+      class="notification tip extra-notification"
+      keypath="notifications.configuration_tip"
+      scope="global"
+    >
+      <template #theSettings>
+        <button
+          class="button-unstyled -link"
+          @click="openNotificationSettings"
+        >
+          {{ $t('notifications.configuration_tip_settings') }}
+        </button>
+      </template>
+      <template #dismiss>
+        <button
+          class="button-unstyled -link"
+          @click="dismissConfigurationTip"
+        >
+          {{ $t('notifications.configuration_tip_dismiss') }}
+        </button>
+      </template>
+    </i18n-t>
+  </div>
+</template>
+
+<script src="./extra_notifications.js" />
+
+<style lang="scss">
+.ExtraNotifications {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+
+  .notification {
+    width: 100%;
+    border-bottom: 1px solid;
+    border-color: var(--border);
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .extra-notification {
+    padding: 1em;
+  }
+
+  .icon {
+    margin-right: 0.5em;
+  }
+
+  .tip {
+    display: inline;
+  }
+}
+</style>
diff --git a/src/components/favorite_button/favorite_button.js b/src/components/favorite_button/favorite_button.js
deleted file mode 100644
index cf3378c90..000000000
--- a/src/components/favorite_button/favorite_button.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import { mapGetters } from 'vuex'
-import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faStar,
-  faPlus,
-  faMinus,
-  faCheck
-} from '@fortawesome/free-solid-svg-icons'
-import {
-  faStar as faStarRegular
-} from '@fortawesome/free-regular-svg-icons'
-
-library.add(
-  faStar,
-  faStarRegular,
-  faPlus,
-  faMinus,
-  faCheck
-)
-
-const FavoriteButton = {
-  props: ['status', 'loggedIn'],
-  data () {
-    return {
-      animated: false
-    }
-  },
-  methods: {
-    favorite () {
-      if (!this.status.favorited) {
-        this.$store.dispatch('favorite', { id: this.status.id })
-      } else {
-        this.$store.dispatch('unfavorite', { id: this.status.id })
-      }
-      this.animated = true
-      setTimeout(() => {
-        this.animated = false
-      }, 500)
-    }
-  },
-  computed: {
-    ...mapGetters(['mergedConfig']),
-    remoteInteractionLink () {
-      return this.$store.getters.remoteInteractionLink({ statusId: this.status.id })
-    }
-  }
-}
-
-export default FavoriteButton
diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue
deleted file mode 100644
index 8c883c13f..000000000
--- a/src/components/favorite_button/favorite_button.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-<template>
-  <div class="FavoriteButton">
-    <button
-      v-if="loggedIn"
-      class="button-unstyled interactive"
-      :class="status.favorited && '-favorited'"
-      :title="$t('tool_tip.favorite')"
-      @click.prevent="favorite()"
-    >
-      <FALayers class="fa-scale-110 fa-old-padding-layer">
-        <FAIcon
-          class="fa-scale-110"
-          :icon="[status.favorited ? 'fas' : 'far', 'star']"
-          :spin="animated"
-        />
-        <FAIcon
-          v-if="status.favorited"
-          class="active-marker"
-          transform="shrink-6 up-9 right-12"
-          icon="check"
-        />
-        <FAIcon
-          v-if="!status.favorited"
-          class="focus-marker"
-          transform="shrink-6 up-9 right-12"
-          icon="plus"
-        />
-        <FAIcon
-          v-else
-          class="focus-marker"
-          transform="shrink-6 up-9 right-12"
-          icon="minus"
-        />
-      </FALayers>
-    </button>
-    <a
-      v-else
-      class="button-unstyled interactive"
-      target="_blank"
-      role="button"
-      :title="$t('tool_tip.favorite')"
-      :href="remoteInteractionLink"
-    >
-      <FALayers class="fa-scale-110 fa-old-padding-layer">
-        <FAIcon
-          class="fa-scale-110"
-          :icon="['far', 'star']"
-        />
-        <FAIcon
-          class="focus-marker"
-          transform="shrink-6 up-9 right-12"
-          icon="plus"
-        />
-      </FALayers>
-    </a>
-    <span
-      v-if="!mergedConfig.hidePostStats && status.fave_num > 0"
-      class="action-counter"
-    >
-      {{ status.fave_num }}
-    </span>
-  </div>
-</template>
-
-<script src="./favorite_button.js"></script>
-
-<style lang="scss">
-@import "../../variables";
-@import "../../mixins";
-
-.FavoriteButton {
-  display: flex;
-
-  > :first-child {
-    padding: 10px;
-    margin: -10px -8px -10px -10px;
-  }
-
-  .action-counter {
-    pointer-events: none;
-    user-select: none;
-  }
-
-  .interactive {
-    .svg-inline--fa {
-      animation-duration: 0.6s;
-    }
-
-    &:hover .svg-inline--fa,
-    &.-favorited .svg-inline--fa {
-      color: $fallback--cOrange;
-      color: var(--cOrange, $fallback--cOrange);
-    }
-
-    @include unfocused-style {
-      .focus-marker {
-        visibility: hidden;
-      }
-
-      .active-marker {
-        visibility: visible;
-      }
-    }
-
-    @include focused-style {
-      .focus-marker {
-        visibility: visible;
-      }
-
-      .active-marker {
-        visibility: hidden;
-      }
-    }
-  }
-}
-</style>
diff --git a/src/components/features_panel/features_panel.vue b/src/components/features_panel/features_panel.vue
index 4cdf56d07..cde8d6e42 100644
--- a/src/components/features_panel/features_panel.vue
+++ b/src/components/features_panel/features_panel.vue
@@ -2,9 +2,9 @@
   <div class="features-panel">
     <div class="panel panel-default base01-background">
       <div class="panel-heading timeline-heading base02-background base04">
-        <div class="title">
+        <h1 class="title">
           {{ $t('features_panel.title') }}
-        </div>
+        </h1>
       </div>
       <div class="panel-body features-panel">
         <ul>
diff --git a/src/components/flash/flash.vue b/src/components/flash/flash.vue
index 9f58d314c..c9fc730be 100644
--- a/src/components/flash/flash.vue
+++ b/src/components/flash/flash.vue
@@ -42,8 +42,6 @@
 <script src="./flash.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .Flash {
   display: inline-block;
   width: 100%;
diff --git a/src/components/follow_button/follow_button.vue b/src/components/follow_button/follow_button.vue
index e421c15b3..3606b68be 100644
--- a/src/components/follow_button/follow_button.vue
+++ b/src/components/follow_button/follow_button.vue
@@ -17,6 +17,7 @@
         @cancelled="hideConfirmUnfollow"
       >
         <i18n-t
+          scope="global"
           keypath="user_card.unfollow_confirm"
           tag="span"
         >
diff --git a/src/components/follow_requests/follow_requests.vue b/src/components/follow_requests/follow_requests.vue
index 41f19db8f..b678364cc 100644
--- a/src/components/follow_requests/follow_requests.vue
+++ b/src/components/follow_requests/follow_requests.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="settings panel panel-default">
     <div class="panel-heading">
-      <div class="title">
+      <h1 class="title">
         {{ $t('nav.friend_requests') }}
-      </div>
+      </h1>
     </div>
     <div class="panel-body">
       <FollowRequestCard
diff --git a/src/components/font_control/font_control.js b/src/components/font_control/font_control.js
index 92ee3f306..d93949450 100644
--- a/src/components/font_control/font_control.js
+++ b/src/components/font_control/font_control.js
@@ -1,63 +1,59 @@
-import { set } from 'lodash'
 import Select from '../select/select.vue'
+import Checkbox from 'src/components/checkbox/checkbox.vue'
+import Popover from 'src/components/popover/popover.vue'
+
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faExclamationTriangle,
+  faKeyboard,
+  faFont
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faExclamationTriangle,
+  faKeyboard,
+  faFont
+)
 
 export default {
   components: {
-    Select
+    Select,
+    Checkbox,
+    Popover
   },
   props: [
     'name', 'label', 'modelValue', 'fallback', 'options', 'no-inherit'
   ],
+  mounted () {
+    this.$store.dispatch('queryLocalFonts')
+  },
   emits: ['update:modelValue'],
   data () {
     return {
-      lValue: this.modelValue,
+      manualEntry: false,
       availableOptions: [
         this.noInherit ? '' : 'inherit',
-        'custom',
-        ...(this.options || []),
         'serif',
+        'sans-serif',
         'monospace',
-        'sans-serif'
+        ...(this.options || [])
       ].filter(_ => _)
     }
   },
-  beforeUpdate () {
-    this.lValue = this.modelValue
+  methods: {
+    toggleManualEntry () {
+      this.manualEntry = !this.manualEntry
+    }
   },
   computed: {
     present () {
-      return typeof this.lValue !== 'undefined'
+      return typeof this.modelValue !== 'undefined'
     },
-    dValue () {
-      return this.lValue || this.fallback || {}
+    localFontsList () {
+      return this.$store.state.interface.localFonts
     },
-    family: {
-      get () {
-        return this.dValue.family
-      },
-      set (v) {
-        set(this.lValue, 'family', v)
-        this.$emit('update:modelValue', this.lValue)
-      }
-    },
-    isCustom () {
-      return this.preset === 'custom'
-    },
-    preset: {
-      get () {
-        if (this.family === 'serif' ||
-            this.family === 'sans-serif' ||
-            this.family === 'monospace' ||
-            this.family === 'inherit') {
-          return this.family
-        } else {
-          return 'custom'
-        }
-      },
-      set (v) {
-        this.family = v === 'custom' ? '' : v
-      }
+    localFontsSize () {
+      return this.$store.state.interface.localFonts?.length
     }
   }
 }
diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
index e2ba74d13..ecf217fb4 100644
--- a/src/components/font_control/font_control.vue
+++ b/src/components/font_control/font_control.vue
@@ -1,76 +1,157 @@
 <template>
-  <div
-    class="font-control style-control"
-    :class="{ custom: isCustom }"
-  >
+  <div class="font-control">
     <label
       :id="name + '-label'"
-      :for="preset === 'custom' ? name : name + '-font-switcher'"
+      :for="manualEntry ? name : name + '-font-switcher'"
       class="label"
     >
-      {{ label }}
+      {{ $t('settings.style.themes3.font.label', { label }) }}
     </label>
-    <input
+    {{ ' ' }}
+    <Checkbox
       v-if="typeof fallback !== 'undefined'"
       :id="name + '-o'"
-      :aria-labelledby="name + '-label'"
-      class="opt exlcude-disabled visible-for-screenreader-only"
-      type="checkbox"
-      :checked="present"
+      class="font-checkbox"
+      :model-value="present"
       @change="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
     >
-    <label
-      v-if="typeof fallback !== 'undefined'"
-      class="opt-l"
-      :for="name + '-o'"
-      :aria-hidden="true"
-    />
-    {{ ' ' }}
-    <Select
-      :id="name + '-font-switcher'"
-      v-model="preset"
-      :disabled="!present"
-      class="font-switcher"
+      {{ $t('settings.style.themes3.define') }}
+    </Checkbox>
+    <div
+      v-if="modelValue?.family"
+      class="font-input"
     >
-      <option
-        v-for="option in availableOptions"
-        :key="option"
-        :value="option"
+      <label
+        v-if="manualEntry"
+        :id="name + '-label'"
+        :for="manualEntry ? name : name + '-font-switcher'"
+        class="label"
       >
-        {{ option === 'custom' ? $t('settings.style.fonts.custom') : option }}
-      </option>
-    </Select>
-    <input
-      v-if="isCustom"
-      :id="name"
-      v-model="family"
-      class="custom-font"
-      type="text"
-    >
+        <i18n-t
+          keypath="settings.style.themes3.font.entry"
+          tag="span"
+          scope="global"
+        >
+          <template #fontFamily>
+            <code>font-family</code>
+          </template>
+        </i18n-t>
+      </label>
+      <label
+        v-else
+        :id="name + '-label'"
+        :for="manualEntry ? name : name + '-font-switcher'"
+        class="label"
+      >
+        {{ $t('settings.style.themes3.font.select') }}
+      </label>
+      {{ ' ' }}
+      <span
+        v-if="manualEntry"
+        class="btn-group"
+      >
+        <button
+          class="btn button-default"
+          :title="$t('settings.style.themes3.font.lookup_local_fonts')"
+          @click="toggleManualEntry"
+        >
+          <FAIcon
+            fixed-width
+            icon="font"
+          />
+        </button>
+        <input
+          :id="name"
+          :model-value="modelValue.family"
+          class="input custom-font"
+          type="text"
+          @update:modelValue="$emit('update:modelValue', { ...(modelValue || {}), family: $event.target.value })"
+        >
+      </span>
+      <span
+        v-else
+        class="btn-group"
+      >
+        <button
+          class="btn button-default"
+          :title="$t('settings.style.themes3.font.enter_manually')"
+          @click="toggleManualEntry"
+        >
+          <FAIcon
+            fixed-width
+            icon="keyboard"
+          />
+        </button>
+        <Select
+          :id="name + '-local-font-switcher'"
+          :model-value="modelValue?.family"
+          class="custom-font"
+          @update:modelValue="v => $emit('update:modelValue', { ...(modelValue || {}), family: v })"
+        >
+          <optgroup
+            :label="$t('settings.style.themes3.font.group-builtin')"
+          >
+            <option
+              v-for="option in availableOptions"
+              :key="option"
+              :value="option"
+              :style="{ fontFamily: option === 'inherit' ? null : option }"
+            >
+              {{ $t('settings.style.themes3.font.builtin.' + option) }}
+            </option>
+          </optgroup>
+          <optgroup
+            v-if="localFontsSize > 0"
+            :label="$t('settings.style.themes3.font.group-local')"
+          >
+            <option
+              v-for="option in localFontsList"
+              :key="option"
+              :value="option"
+              :style="{ fontFamily: option }"
+            >
+              {{ option }}
+            </option>
+          </optgroup>
+          <optgroup
+            v-else
+            :label="$t('settings.style.themes3.font.group-local')"
+          >
+            <option disabled>
+              {{ $t('settings.style.themes3.font.local-unavailable1') }}
+            </option>
+            <option disabled>
+              {{ $t('settings.style.themes3.font.local-unavailable2') }}
+            </option>
+          </optgroup>
+        </Select>
+      </span>
+    </div>
   </div>
 </template>
 
 <script src="./font_control.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .font-control {
-  input.custom-font {
-    min-width: 10em;
+  .custom-font {
+    min-width: 20em;
+    max-width: 20em;
   }
 
-  &.custom {
-    /* TODO Should make proper joiners... */
-    .font-switcher {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
+  .font-input {
+    margin-left: 2em;
+    margin-top: 0.5em;
+  }
 
-    .custom-font {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-    }
+  .font-checkbox {
+    margin-left: 1em;
   }
 }
+
+.invalid-tooltip {
+  margin: 0.5em 1em;
+  min-width: 10em;
+  text-align: center;
+}
 </style>
diff --git a/src/components/fun_text.style.js b/src/components/fun_text.style.js
new file mode 100644
index 000000000..2d3ac1549
--- /dev/null
+++ b/src/components/fun_text.style.js
@@ -0,0 +1,40 @@
+export default {
+  name: 'FunText',
+  selector: '/*fun-text*/',
+  virtual: true,
+  variants: {
+    greentext: '.greentext',
+    cyantext: '.cyantext'
+  },
+  states: {
+    faint: '.faint'
+  },
+  defaultRules: [
+    {
+      directives: {
+        textColor: '--text',
+        textAuto: 'preserve'
+      }
+    },
+    {
+      state: ['faint'],
+      directives: {
+        textOpacity: 0.5
+      }
+    },
+    {
+      variant: 'greentext',
+      directives: {
+        textColor: '--cGreen',
+        textAuto: 'preserve'
+      }
+    },
+    {
+      variant: 'cyantext',
+      directives: {
+        textColor: '--cBlue',
+        textAuto: 'preserve'
+      }
+    }
+  ]
+}
diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue
index 96b554e31..40048285c 100644
--- a/src/components/gallery/gallery.vue
+++ b/src/components/gallery/gallery.vue
@@ -87,8 +87,6 @@
 <script src='./gallery.js'></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .Gallery {
   .gallery-rows {
     display: flex;
diff --git a/src/components/global_notice_list/global_notice_list.vue b/src/components/global_notice_list/global_notice_list.vue
index 0e58476f1..140d0d54a 100644
--- a/src/components/global_notice_list/global_notice_list.vue
+++ b/src/components/global_notice_list/global_notice_list.vue
@@ -4,7 +4,7 @@
       v-for="(notice, index) in notices"
       :key="index"
       class="alert global-notice"
-      :class="{ ['global-' + notice.level]: true }"
+      :class="{ [notice.level]: true }"
     >
       <div class="notice-message">
         {{ $t(notice.messageKey, notice.messageArgs) }}
@@ -25,14 +25,12 @@
 <script src="./global_notice_list.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .global-notice-list {
   position: fixed;
   top: calc(var(--navbar-height) + 0.5em);
   width: 100%;
   pointer-events: none;
-  z-index: var(--ZI_navbar_popovers);
+  z-index: var(--ZI_modals_popovers);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -52,48 +50,8 @@
     }
   }
 
-  .global-error {
-    background-color: var(--alertPopupError, $fallback--cRed);
-    color: var(--alertPopupErrorText, $fallback--text);
-
-    .svg-inline--fa {
-      color: var(--alertPopupErrorText, $fallback--text);
-    }
-  }
-
-  .global-warning {
-    background-color: var(--alertPopupWarning, $fallback--cOrange);
-    color: var(--alertPopupWarningText, $fallback--text);
-
-    .svg-inline--fa {
-      color: var(--alertPopupWarningText, $fallback--text);
-    }
-  }
-
-  .global-success {
-    background-color: var(--alertPopupSuccess, $fallback--cGreen);
-    color: var(--alertPopupSuccessText, $fallback--text);
-
-    .svg-inline--fa {
-      color: var(--alertPopupSuccessText, $fallback--text);
-    }
-  }
-
-  .global-info {
-    background-color: var(--alertPopupNeutral, $fallback--fg);
-    color: var(--alertPopupNeutralText, $fallback--text);
-
-    .svg-inline--fa {
-      color: var(--alertPopupNeutralText, $fallback--text);
-    }
-  }
-
   .close-notice {
     padding-right: 0.2em;
-
-    .svg-inline--fa:hover {
-      opacity: 0.6;
-    }
   }
 }
 </style>
diff --git a/src/components/icon.style.js b/src/components/icon.style.js
new file mode 100644
index 000000000..4d30f389b
--- /dev/null
+++ b/src/components/icon.style.js
@@ -0,0 +1,14 @@
+export default {
+  name: 'Icon',
+  virtual: true,
+  selector: '.svg-inline--fa',
+  defaultRules: [
+    {
+      component: 'Icon',
+      directives: {
+        textColor: '$blend(--stack 0.5 --parent--text)',
+        textAuto: 'no-auto'
+      }
+    }
+  ]
+}
diff --git a/src/components/image_cropper/image_cropper.vue b/src/components/image_cropper/image_cropper.vue
index 8c48a3876..8647ed4d7 100644
--- a/src/components/image_cropper/image_cropper.vue
+++ b/src/components/image_cropper/image_cropper.vue
@@ -41,7 +41,7 @@
     <input
       ref="input"
       type="file"
-      class="image-cropper-img-input"
+      class="input image-cropper-img-input"
       :accept="mimes"
     >
   </div>
diff --git a/src/components/importer/importer.vue b/src/components/importer/importer.vue
index 2a63b31ac..12779b457 100644
--- a/src/components/importer/importer.vue
+++ b/src/components/importer/importer.vue
@@ -3,6 +3,7 @@
     <form>
       <input
         ref="input"
+        class="input"
         type="file"
         @change="change"
       >
diff --git a/src/components/input.style.js b/src/components/input.style.js
new file mode 100644
index 000000000..160b2f33d
--- /dev/null
+++ b/src/components/input.style.js
@@ -0,0 +1,94 @@
+export default {
+  name: 'Input',
+  selector: '.input',
+  states: {
+    hover: ':hover:not(.disabled)',
+    focused: ':focus-within',
+    disabled: '.disabled'
+  },
+  variants: {
+    checkbox: '.-checkbox',
+    radio: '.-radio'
+  },
+  validInnerComponents: [
+    'Text',
+    'Icon'
+  ],
+  defaultRules: [
+    {
+      component: 'Root',
+      directives: {
+        '--defaultInputBevel': 'shadow | $borderSide(#FFFFFF bottom 0.2), $borderSide(#000000 top 0.2), inset 0 0 2 #000000 / 0.15, 1 0 1 1 --text / 0.15, -1 0 1 1 --text / 0.15',
+        '--defaultInputHoverGlow': 'shadow | 0 0 4 --text / 0.5',
+        '--defaultInputFocusGlow': 'shadow | 0 0 4 4 --link / 0.5'
+      }
+    },
+    {
+      variant: 'checkbox',
+      directives: {
+        roundness: 1
+      }
+    },
+    {
+      directives: {
+        '--font': 'generic | inherit',
+        background: '--fg, -5',
+        roundness: 3,
+        shadow: [{
+          x: 0,
+          y: 0,
+          blur: 2,
+          spread: 0,
+          color: '#000000',
+          alpha: 1
+        }, '--defaultInputBevel']
+      }
+    },
+    {
+      state: ['hover'],
+      directives: {
+        shadow: ['--defaultInputHoverGlow', '--defaultInputBevel']
+      }
+    },
+    {
+      state: ['focused'],
+      directives: {
+        shadow: ['--defaultInputFocusGlow', '--defaultInputBevel']
+      }
+    },
+    {
+      state: ['focused', 'hover'],
+      directives: {
+        shadow: ['--defaultInputFocusGlow', '--defaultInputHoverGlow', '--defaultInputBevel']
+      }
+    },
+    {
+      state: ['disabled'],
+      directives: {
+        background: '--parent'
+      }
+    },
+    {
+      component: 'Text',
+      parent: {
+        component: 'Input',
+        state: ['disabled']
+      },
+      directives: {
+        textOpacity: 0.25,
+        textOpacityMode: 'blend'
+      }
+    },
+    {
+      component: 'Icon',
+      parent: {
+        component: 'Input',
+        state: ['disabled']
+      },
+      directives: {
+        textOpacity: 0.25,
+        textOpacityMode: 'blend'
+      }
+    }
+  ]
+}
diff --git a/src/components/interactions/interactions.js b/src/components/interactions/interactions.js
index 1ae1d01cb..fc441b908 100644
--- a/src/components/interactions/interactions.js
+++ b/src/components/interactions/interactions.js
@@ -3,6 +3,7 @@ import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
 
 const tabModeDict = {
   mentions: ['mention'],
+  statuses: ['status'],
   'likes+repeats': ['repeat', 'like'],
   follows: ['follow'],
   reactions: ['pleroma:emoji_reaction'],
diff --git a/src/components/interactions/interactions.vue b/src/components/interactions/interactions.vue
index b7291c02c..1e2efe402 100644
--- a/src/components/interactions/interactions.vue
+++ b/src/components/interactions/interactions.vue
@@ -1,18 +1,22 @@
 <template>
   <div class="panel panel-default">
     <div class="panel-heading">
-      <div class="title">
+      <h1 class="title">
         {{ $t("nav.interactions") }}
-      </div>
+      </h1>
     </div>
     <tab-switcher
       ref="tabSwitcher"
       :on-switch="onModeSwitch"
     >
       <span
-        key="mentions"
+        key="statuses"
         :label="$t('nav.mentions')"
       />
+      <span
+        key="statuses"
+        :label="$t('interactions.statuses')"
+      />
       <span
         key="likes+repeats"
         :label="$t('interactions.favs_repeats')"
@@ -39,6 +43,7 @@
     <Notifications
       ref="notifications"
       :no-heading="true"
+      :no-extra="true"
       :minimal-mode="true"
       :filter-mode="filterMode"
     />
diff --git a/src/components/interface_language_switcher/interface_language_switcher.vue b/src/components/interface_language_switcher/interface_language_switcher.vue
index a57e87617..e6a0c1617 100644
--- a/src/components/interface_language_switcher/interface_language_switcher.vue
+++ b/src/components/interface_language_switcher/interface_language_switcher.vue
@@ -9,7 +9,7 @@
         :key="index"
       >
         <label>
-          {{ index === 0 ? $t('settings.primary_language') : $tc('settings.fallback_language', index, { index }) }}
+          {{ index === 0 ? $t('settings.primary_language') : $t('settings.fallback_language', { index }, index) }}
           <Select
             class="language-select"
             :model-value="controlledLanguage[index]"
@@ -36,7 +36,9 @@
         <button
           class="button-default btn"
           @click="addLanguage"
-        >{{ $t('settings.add_language') }}</button>
+        >
+          {{ $t('settings.add_language') }}
+        </button>
       </li>
     </ul>
   </div>
@@ -102,8 +104,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import "../../variables";
-
 .interface-language-switcher {
   .language-select {
     margin-right: 1em;
diff --git a/src/components/link-preview/link-preview.vue b/src/components/link-preview/link-preview.vue
index 09f341ac4..8eb5a5010 100644
--- a/src/components/link-preview/link-preview.vue
+++ b/src/components/link-preview/link-preview.vue
@@ -33,8 +33,6 @@
 <script src="./link-preview.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .link-preview-card {
   display: flex;
   flex-direction: row;
@@ -51,8 +49,7 @@
       width: 100%;
       height: 100%;
       object-fit: cover;
-      border-radius: $fallback--attachmentRadius;
-      border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
+      border-radius: var(--roundness);
     }
   }
 
@@ -82,13 +79,10 @@
     margin: 2em 0;
   }
 
-  color: $fallback--text;
-  color: var(--text, $fallback--text);
+  color: var(--text);
   border-style: solid;
   border-width: 1px;
-  border-radius: $fallback--attachmentRadius;
-  border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
-  border-color: $fallback--border;
-  border-color: var(--border, $fallback--border);
+  border-radius: var(--roundness);
+  border-color: var(--border);
 }
 </style>
diff --git a/src/components/link.style.js b/src/components/link.style.js
new file mode 100644
index 000000000..d13cef338
--- /dev/null
+++ b/src/components/link.style.js
@@ -0,0 +1,24 @@
+export default {
+  name: 'Link',
+  selector: 'a',
+  virtual: true,
+  states: {
+    faint: '.faint'
+  },
+  defaultRules: [
+    {
+      component: 'Link',
+      directives: {
+        textColor: '--link'
+      }
+    },
+    {
+      component: 'Link',
+      state: ['faint'],
+      directives: {
+        textOpacity: 0.5,
+        textOpacityMode: 'fake'
+      }
+    }
+  ]
+}
diff --git a/src/components/list/list.vue b/src/components/list/list.vue
index f17766b47..c885bacd9 100644
--- a/src/components/list/list.vue
+++ b/src/components/list/list.vue
@@ -1,9 +1,14 @@
 <template>
-  <div class="list">
+  <div
+    class="list"
+    role="list"
+  >
     <div
       v-for="item in items"
       :key="getKey(item)"
       class="list-item"
+      :class="[getClass(item), nonInteractive ? '-non-interactive' : '']"
+      role="listitem"
     >
       <slot
         name="item"
@@ -29,24 +34,15 @@ export default {
     getKey: {
       type: Function,
       default: item => item.id
+    },
+    getClass: {
+      type: Function,
+      default: item => ''
+    },
+    nonInteractive: {
+      type: Boolean,
+      default: false
     }
   }
 }
 </script>
-
-<style lang="scss">
-@import "../../variables";
-
-.list {
-  &-item:not(:last-child) {
-    border-bottom: 1px solid;
-    border-bottom-color: $fallback--border;
-    border-bottom-color: var(--border, $fallback--border);
-  }
-
-  &-empty-content {
-    text-align: center;
-    padding: 10px;
-  }
-}
-</style>
diff --git a/src/components/list/list_item.style.js b/src/components/list/list_item.style.js
new file mode 100644
index 000000000..e82a0a830
--- /dev/null
+++ b/src/components/list/list_item.style.js
@@ -0,0 +1,48 @@
+export default {
+  name: 'ListItem',
+  selector: '.list-item',
+  states: {
+    active: '.-active',
+    hover: ':hover:not(.-non-interactive)'
+  },
+  validInnerComponents: [
+    'Text',
+    'Link',
+    'Icon',
+    'Border',
+    'Button',
+    'ButtonUnstyled',
+    'RichContent',
+    'Input',
+    'Avatar'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        background: '--bg',
+        opacity: 0
+      }
+    },
+    {
+      state: ['active'],
+      directives: {
+        background: '--inheritedBackground, 10',
+        opacity: 1
+      }
+    },
+    {
+      state: ['hover'],
+      directives: {
+        background: '--inheritedBackground, 10',
+        opacity: 1
+      }
+    },
+    {
+      state: ['hover', 'active'],
+      directives: {
+        background: '--inheritedBackground, 20',
+        opacity: 1
+      }
+    }
+  ]
+}
diff --git a/src/components/lists/lists.vue b/src/components/lists/lists.vue
index b8bab0a04..05df5b72f 100644
--- a/src/components/lists/lists.vue
+++ b/src/components/lists/lists.vue
@@ -2,7 +2,9 @@
   <div class="Lists panel panel-default">
     <div class="panel-heading">
       <div class="title">
-        {{ $t('lists.lists') }}
+        <h1 class="title">
+          {{ $t('lists.lists') }}
+        </h1>
       </div>
       <router-link
         :to="{ name: 'lists-new' }"
diff --git a/src/components/lists_card/lists_card.vue b/src/components/lists_card/lists_card.vue
index 925da3a58..a5dc6371e 100644
--- a/src/components/lists_card/lists_card.vue
+++ b/src/components/lists_card/lists_card.vue
@@ -21,8 +21,6 @@
 <script src="./lists_card.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .list-card {
   display: flex;
 }
@@ -35,18 +33,6 @@
 .button-list-edit {
   margin: 0;
   padding: 1em;
-  color: $fallback--link;
-  color: var(--link, $fallback--link);
-
-  &:hover {
-    background-color: $fallback--lightBg;
-    background-color: var(--selectedMenu, $fallback--lightBg);
-    color: $fallback--link;
-    color: var(--selectedMenuText, $fallback--link);
-
-    --faint: var(--selectedMenuFaintText, $fallback--faint);
-    --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
-    --lightText: var(--selectedMenuLightText, $fallback--lightText);
-  }
+  color: var(--link);
 }
 </style>
diff --git a/src/components/lists_edit/lists_edit.vue b/src/components/lists_edit/lists_edit.vue
index eec0f9786..51adbdbfe 100644
--- a/src/components/lists_edit/lists_edit.vue
+++ b/src/components/lists_edit/lists_edit.vue
@@ -17,6 +17,7 @@
         <i18n-t
           v-if="id"
           keypath="lists.editing_list"
+          scope="global"
         >
           <template #listTitle>
             {{ title }}
@@ -25,6 +26,7 @@
         <i18n-t
           v-else
           keypath="lists.creating_list"
+          scope="global"
         />
       </div>
     </div>
@@ -36,6 +38,7 @@
           id="list-edit-title"
           ref="title"
           v-model="titleDraft"
+          class="input"
         >
         <button
           v-if="id"
@@ -164,8 +167,6 @@
 <script src="./lists_edit.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .ListEdit {
   --panel-body-padding: 0.5em;
 
diff --git a/src/components/lists_user_search/lists_user_search.vue b/src/components/lists_user_search/lists_user_search.vue
index 6ca107e69..0f6ec125c 100644
--- a/src/components/lists_user_search/lists_user_search.vue
+++ b/src/components/lists_user_search/lists_user_search.vue
@@ -10,6 +10,7 @@
       <input
         ref="search"
         v-model="query"
+        class="input"
         :placeholder="$t('lists.search')"
         @input="onInput"
       >
@@ -27,8 +28,6 @@
 
 <script src="./lists_user_search.js"></script>
 <style lang="scss">
-@import "../../variables";
-
 .ListsUserSearch {
   .input-wrap {
     display: flex;
diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue
index 829e88add..25392742f 100644
--- a/src/components/login_form/login_form.vue
+++ b/src/components/login_form/login_form.vue
@@ -3,7 +3,9 @@
     <!-- Default panel contents -->
 
     <div class="panel-heading">
-      {{ $t('login.login') }}
+      <h1 class="title">
+        {{ $t('login.login') }}
+      </h1>
     </div>
 
     <div class="panel-body">
@@ -18,7 +20,7 @@
               id="username"
               v-model="user.username"
               :disabled="loggingIn"
-              class="form-control"
+              class="input form-control"
               :placeholder="$t('login.placeholder')"
             >
           </div>
@@ -29,7 +31,7 @@
               ref="passwordInput"
               v-model="user.password"
               :disabled="loggingIn"
-              class="form-control"
+              class="input form-control"
               type="password"
             >
           </div>
@@ -93,8 +95,6 @@
 <script src="./login_form.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .login-form {
   display: flex;
   flex-direction: column;
diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index eb28f8be1..39e4d8eb6 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -98,7 +98,7 @@
     <span
       class="counter"
     >
-      {{ $tc('media_modal.counter', currentIndex + 1, { current: currentIndex + 1, total: media.length }) }}
+      {{ $t('media_modal.counter', { current: currentIndex + 1, total: media.length }, currentIndex + 1) }}
     </span>
     <span
       v-if="loading"
diff --git a/src/components/media_upload/media_upload.js b/src/components/media_upload/media_upload.js
index cfd42d4cc..f0fd0155f 100644
--- a/src/components/media_upload/media_upload.js
+++ b/src/components/media_upload/media_upload.js
@@ -23,7 +23,91 @@ const mediaUpload = {
     }
   },
   methods: {
-    uploadFile (file) {
+    onClick () {
+      if (this.uploadReady) {
+        this.$refs.input.click()
+      }
+    },
+    async resizeImage (file) {
+      // Skip if not an image or if it's a GIF
+      if (!file.type.startsWith('image/') || file.type === 'image/gif') {
+        return file
+      }
+
+      // Skip if image compression is disabled
+      if (!this.$store.getters.mergedConfig.imageCompression) {
+        return file
+      }
+
+      // For PNGs, check if animated
+      if (file.type === 'image/png') {
+        const isAnimated = await this.isAnimatedPng(file)
+        if (isAnimated) {
+          return file
+        }
+      }
+
+      return new Promise((resolve) => {
+        const img = new Image()
+        img.onload = () => {
+          // Calculate new dimensions
+          let width = img.width
+          let height = img.height
+          const maxSize = 2048
+
+          if (width > maxSize || height > maxSize) {
+            if (width > height) {
+              height = Math.round((height * maxSize) / width)
+              width = maxSize
+            } else {
+              width = Math.round((width * maxSize) / height)
+              height = maxSize
+            }
+          }
+
+          // Create canvas and resize
+          const canvas = document.createElement('canvas')
+          canvas.width = width
+          canvas.height = height
+          const ctx = canvas.getContext('2d')
+          ctx.drawImage(img, 0, 0, width, height)
+
+          // Check WebP support by trying to create a WebP canvas
+          const testCanvas = document.createElement('canvas')
+          const supportsWebP = testCanvas.toDataURL('image/webp').startsWith('data:image/webp')
+
+          // Convert to WebP if supported, otherwise JPEG
+          const type = supportsWebP ? 'image/webp' : 'image/jpeg'
+          const extension = supportsWebP ? '.webp' : '.jpg'
+
+          // Remove the original extension and add new one
+          const newFileName = file.name.replace(/\.[^/.]+$/, '') + extension
+
+          canvas.toBlob((blob) => {
+            resolve(new File([blob], newFileName, {
+              type,
+              lastModified: Date.now()
+            }))
+          }, type, 0.85)
+        }
+        img.src = URL.createObjectURL(file)
+      })
+    },
+    async isAnimatedPng (file) {
+      const buffer = await file.arrayBuffer()
+      const view = new Uint8Array(buffer)
+      // Look for animated PNG chunks (acTL)
+      for (let i = 0; i < view.length - 8; i++) {
+        if (view[i] === 0x61 && // a
+            view[i + 1] === 0x63 && // c
+            view[i + 2] === 0x54 && // T
+            view[i + 3] === 0x4C) { // L
+          return true
+        }
+      }
+      return false
+    },
+    async uploadFile (file) {
       const self = this
       const store = this.$store
       if (file.size > store.state.instance.uploadlimit) {
@@ -32,8 +116,11 @@ const mediaUpload = {
         self.$emit('upload-failed', 'file_too_big', { filesize: filesize.num, filesizeunit: filesize.unit, allowedsize: allowedsize.num, allowedsizeunit: allowedsize.unit })
         return
       }
+
+      // Resize image if needed
+      const processedFile = await this.resizeImage(file)
       const formData = new FormData()
-      formData.append('file', file)
+      formData.append('file', processedFile)
 
       self.$emit('uploading')
       self.uploadCount++
@@ -69,10 +156,15 @@ const mediaUpload = {
       this.multiUpload(target.files)
     }
   },
-  props: [
-    'dropFiles',
-    'disabled'
-  ],
+  props: {
+    dropFiles: Object,
+    disabled: Boolean,
+    normalButton: Boolean,
+    acceptTypes: {
+      type: String,
+      default: '*/*'
+    }
+  },
   watch: {
     dropFiles: function (fileInfos) {
       if (!this.uploading) {
diff --git a/src/components/media_upload/media_upload.vue b/src/components/media_upload/media_upload.vue
index 2799495bb..047e34833 100644
--- a/src/components/media_upload/media_upload.vue
+++ b/src/components/media_upload/media_upload.vue
@@ -1,8 +1,9 @@
 <template>
-  <label
+  <button
     class="media-upload"
-    :class="{ disabled: disabled }"
+    :class="[normalButton ? 'button-default btn' : 'button-unstyled', { disabled }]"
     :title="$t('tool_tip.media_upload')"
+    @click="onClick"
   >
     <FAIcon
       v-if="uploading"
@@ -15,27 +16,33 @@
       class="new-icon"
       icon="upload"
     />
+    <template v-if="normalButton">
+      {{ ' ' }}
+      {{ uploading ? $t('general.loading') : $t('tool_tip.media_upload') }}
+    </template>
     <input
       v-if="uploadReady"
+      ref="input"
       class="hidden-input-file"
       :disabled="disabled"
       type="file"
       multiple="true"
+      :accept="acceptTypes"
       @change="change"
     >
-  </label>
+  </button>
 </template>
 
 <script src="./media_upload.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .media-upload {
-  cursor: pointer; // We use <label> for interactivity... i wonder if it's fine
-
   .hidden-input-file {
     display: none;
   }
 }
- </style>
+
+label.media-upload {
+  cursor: pointer; // We use <label> for interactivity... i wonder if it's fine
+}
+</style>
diff --git a/src/components/mention_link/mention_link.js b/src/components/mention_link/mention_link.js
index 6515bd116..4e1ec23d6 100644
--- a/src/components/mention_link/mention_link.js
+++ b/src/components/mention_link/mention_link.js
@@ -53,7 +53,9 @@ const MentionLink = {
       this.$router.push(link)
     },
     handleSelection () {
-      this.hasSelection = document.getSelection().containsNode(this.$refs.full, true)
+      if (this.$refs.full) {
+        this.hasSelection = document.getSelection().containsNode(this.$refs.full, true)
+      }
     }
   },
   mounted () {
diff --git a/src/components/mention_link/mention_link.scss b/src/components/mention_link/mention_link.scss
index 69e9fed15..42f572941 100644
--- a/src/components/mention_link/mention_link.scss
+++ b/src/components/mention_link/mention_link.scss
@@ -1,10 +1,7 @@
-@import "../../variables";
-
 .MentionLink {
   position: relative;
   white-space: normal;
   display: inline;
-  color: var(--link);
   word-break: normal;
 
   & .new,
@@ -14,7 +11,7 @@
   }
 
   .mention-avatar {
-    border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
+    border-radius: var(--roundness);
     width: 1.5em;
     height: 1.5em;
     vertical-align: middle;
@@ -61,8 +58,10 @@
     }
 
     &.-has-selection {
-      color: var(--alertNeutralText, $fallback--text);
-      background-color: var(--alertNeutral, $fallback--fg);
+      --color: var(--selectionText);
+      --link: var(--selectionText);
+
+      background-color: var(--selectionBackground);
     }
 
     .at {
@@ -102,7 +101,7 @@
   }
 
   .serverName.-faded {
-    color: var(--faintLink, $fallback--link);
+    color: var(--linkFaint);
   }
 }
 
diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue
index 869a32578..5db837a25 100644
--- a/src/components/mention_link/mention_link.vue
+++ b/src/components/mention_link/mention_link.vue
@@ -22,7 +22,7 @@
         :class="classnames"
       >
         <a
-          class="short button-unstyled"
+          class="short"
           :class="{ '-with-tooltip': shouldShowTooltip }"
           :href="url"
           @click.prevent="onClick"
diff --git a/src/components/mentions_line/mentions_line.vue b/src/components/mentions_line/mentions_line.vue
index 64c19bf18..daab64a30 100644
--- a/src/components/mentions_line/mentions_line.vue
+++ b/src/components/mentions_line/mentions_line.vue
@@ -22,13 +22,13 @@
       />
       </span><button
         v-if="!expanded"
-        class="button-unstyled showMoreLess"
+        class="button-unstyled -link showMoreLess"
         @click="toggleShowMore"
       >
         {{ $t('status.plus_more', { number: extraMentions.length }) }}
       </button><button
         v-if="expanded"
-        class="button-unstyled showMoreLess"
+        class="button-unstyled -link showMoreLess"
         @click="toggleShowMore"
       >
         {{ $t('general.show_less') }}
diff --git a/src/components/menu_item.style.js b/src/components/menu_item.style.js
new file mode 100644
index 000000000..d7fe0f7c7
--- /dev/null
+++ b/src/components/menu_item.style.js
@@ -0,0 +1,113 @@
+export default {
+  name: 'MenuItem',
+  selector: '.menu-item',
+  validInnerComponents: [
+    'Text',
+    'Icon',
+    'Input',
+    'Border',
+    'ButtonUnstyled',
+    'Badge',
+    'Avatar'
+  ],
+  states: {
+    hover: ':hover:not(.disabled)',
+    active: '.-active',
+    disabled: '.disabled'
+  },
+  defaultRules: [
+    {
+      directives: {
+        background: '--bg',
+        opacity: 0
+      }
+    },
+    {
+      state: ['hover'],
+      directives: {
+        background: '$mod(--bg 5)',
+        opacity: 1
+      }
+    },
+    {
+      state: ['active'],
+      directives: {
+        background: '$mod(--bg 10)',
+        opacity: 1
+      }
+    },
+    {
+      state: ['active', 'hover'],
+      directives: {
+        background: '$mod(--bg 15)',
+        opacity: 1
+      }
+    },
+    {
+      component: 'Text',
+      parent: {
+        component: 'MenuItem',
+        state: ['hover']
+      },
+      directives: {
+        textColor: '--link',
+        textAuto: 'no-preserve'
+      }
+    },
+    {
+      component: 'Text',
+      parent: {
+        component: 'MenuItem',
+        state: ['active']
+      },
+      directives: {
+        textColor: '--link',
+        textAuto: 'no-preserve'
+      }
+    },
+    {
+      component: 'Icon',
+      parent: {
+        component: 'MenuItem',
+        state: ['active']
+      },
+      directives: {
+        textColor: '--link',
+        textAuto: 'no-preserve'
+      }
+    },
+    {
+      component: 'Icon',
+      parent: {
+        component: 'MenuItem',
+        state: ['hover']
+      },
+      directives: {
+        textColor: '--link',
+        textAuto: 'no-preserve'
+      }
+    },
+    {
+      component: 'Text',
+      parent: {
+        component: 'MenuItem',
+        state: ['disabled']
+      },
+      directives: {
+        textOpacity: 0.25,
+        textOpacityMode: 'blend'
+      }
+    },
+    {
+      component: 'Icon',
+      parent: {
+        component: 'MenuItem',
+        state: ['disabled']
+      },
+      directives: {
+        textOpacity: 0.25,
+        textOpacityMode: 'blend'
+      }
+    }
+  ]
+}
diff --git a/src/components/mfa_form/recovery_form.vue b/src/components/mfa_form/recovery_form.vue
index 5988fa51b..f8c3e6a04 100644
--- a/src/components/mfa_form/recovery_form.vue
+++ b/src/components/mfa_form/recovery_form.vue
@@ -3,7 +3,9 @@
     <!-- Default panel contents -->
 
     <div class="panel-heading">
-      {{ $t('login.heading.recovery') }}
+      <h1 class="title">
+        {{ $t('login.heading.recovery') }}
+      </h1>
     </div>
 
     <div class="panel-body">
@@ -16,7 +18,7 @@
           <input
             id="code"
             v-model="code"
-            class="form-control"
+            class="input form-control"
           >
         </div>
 
diff --git a/src/components/mfa_form/totp_form.vue b/src/components/mfa_form/totp_form.vue
index 709eb9b81..26fc1e804 100644
--- a/src/components/mfa_form/totp_form.vue
+++ b/src/components/mfa_form/totp_form.vue
@@ -3,7 +3,9 @@
     <!-- Default panel contents -->
 
     <div class="panel-heading">
-      {{ $t('login.heading.totp') }}
+      <h1 class="title">
+        {{ $t('login.heading.totp') }}
+      </h1>
     </div>
 
     <div class="panel-body">
@@ -18,7 +20,7 @@
           <input
             id="code"
             v-model="code"
-            class="form-control"
+            class="input form-control"
           >
         </div>
 
diff --git a/src/components/mobile_drawer.style.js b/src/components/mobile_drawer.style.js
new file mode 100644
index 000000000..398bc186e
--- /dev/null
+++ b/src/components/mobile_drawer.style.js
@@ -0,0 +1,41 @@
+export default {
+  name: 'MobileDrawer',
+  selector: '.mobile-drawer',
+  validInnerComponents: [
+    'Text',
+    'Link',
+    'Icon',
+    'Border',
+    'Button',
+    'ButtonUnstyled',
+    'Input',
+    'PanelHeader',
+    'MenuItem',
+    'Notification',
+    'Alert',
+    'UserCard'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        background: '--bg',
+        backgroundNoCssColor: 'yes'
+      }
+    },
+    {
+      component: 'PanelHeader',
+      parent: { component: 'MobileDrawer' },
+      directives: {
+        background: '--fg',
+        shadow: [{
+          x: 0,
+          y: 0,
+          blur: 4,
+          spread: 0,
+          color: '#000000',
+          alpha: 0.6
+        }]
+      }
+    }
+  ]
+}
diff --git a/src/components/mobile_nav/mobile_nav.js b/src/components/mobile_nav/mobile_nav.js
index 1c47fdf01..3898a87da 100644
--- a/src/components/mobile_nav/mobile_nav.js
+++ b/src/components/mobile_nav/mobile_nav.js
@@ -1,7 +1,10 @@
 import SideDrawer from '../side_drawer/side_drawer.vue'
 import Notifications from '../notifications/notifications.vue'
 import ConfirmModal from '../confirm_modal/confirm_modal.vue'
-import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils'
+import {
+  unseenNotificationsFromStore,
+  countExtraNotifications
+} from '../../services/notification_utils/notification_utils'
 import GestureService from '../../services/gesture_service/gesture_service'
 import NavigationPins from 'src/components/navigation/navigation_pins.vue'
 import { mapGetters } from 'vuex'
@@ -12,7 +15,8 @@ import {
   faBell,
   faBars,
   faArrowUp,
-  faMinus
+  faMinus,
+  faCheckDouble
 } from '@fortawesome/free-solid-svg-icons'
 import { useAnnouncementsStore } from '../../stores/announcements'
 
@@ -21,7 +25,8 @@ library.add(
   faBell,
   faBars,
   faArrowUp,
-  faMinus
+  faMinus,
+  faCheckDouble
 )
 
 const MobileNav = {
@@ -52,8 +57,14 @@ const MobileNav = {
       return unseenNotificationsFromStore(this.$store)
     },
     unseenNotificationsCount () {
+      return this.unseenNotifications.length + countExtraNotifications(this.$store)
+    },
+    unseenCount () {
       return this.unseenNotifications.length
     },
+    unseenCountBadgeText () {
+      return `${this.unseenCount ? this.unseenCount : ''}`
+    },
     hideSitename () { return this.$store.state.instance.hideSitename },
     sitename () { return this.$store.state.instance.name },
     isChat () {
@@ -67,6 +78,9 @@ const MobileNav = {
     shouldConfirmLogout () {
       return this.$store.getters.mergedConfig.modalOnLogout
     },
+    closingDrawerMarksAsSeen () {
+      return this.$store.getters.mergedConfig.closingDrawerMarksAsSeen
+    },
     ...mapGetters(['unreadChatCount'])
   },
   methods: {
@@ -81,7 +95,7 @@ const MobileNav = {
         // make sure to mark notifs seen only when the notifs were open and not
         // from close-calls.
         this.notificationsOpen = false
-        if (markRead) {
+        if (markRead && this.closingDrawerMarksAsSeen) {
           this.markNotificationsAsSeen()
         }
       }
@@ -117,7 +131,6 @@ const MobileNav = {
       this.hideConfirmLogout()
     },
     markNotificationsAsSeen () {
-      // this.$refs.notifications.markAsSeen()
       this.$store.dispatch('markNotificationsAsSeen')
     },
     onScroll ({ target: { scrollTop, clientHeight, scrollHeight } }) {
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index c2746abee..d5539ad89 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -20,7 +20,7 @@
           />
           <div
             v-if="(unreadChatCount && !chatsPinned) || unreadAnnouncementCount"
-            class="alert-dot"
+            class="badge -dot -notification"
           />
         </button>
         <NavigationPins class="pins" />
@@ -37,20 +37,26 @@
           />
           <div
             v-if="unseenNotificationsCount"
-            class="alert-dot"
+            class="badge -dot -notification"
           />
         </button>
       </div>
     </nav>
     <aside
       v-if="currentUser"
-      class="mobile-notifications-drawer"
+      class="mobile-notifications-drawer mobile-drawer"
       :class="{ '-closed': !notificationsOpen }"
       @touchstart.stop="notificationsTouchStart"
       @touchmove.stop="notificationsTouchMove"
     >
-      <div class="mobile-notifications-header">
-        <span class="title">{{ $t('notifications.notifications') }}</span>
+      <div class="panel-heading mobile-notifications-header">
+        <h1 class="title">
+          {{ $t('notifications.notifications') }}
+          <span
+            v-if="unseenCountBadgeText"
+            class="badge -notification unseen-count"
+          >{{ unseenCountBadgeText }}</span>
+        </h1>
         <span class="spacer" />
         <button
           v-if="notificationsAtTop"
@@ -66,6 +72,17 @@
             />
           </FALayers>
         </button>
+        <button
+          v-if="!closingDrawerMarksAsSeen"
+          class="button-unstyled mobile-nav-button"
+          :title="$t('nav.mobile_notifications_mark_as_seen')"
+          @click.stop.prevent="markNotificationsAsSeen()"
+        >
+          <FAIcon
+            class="fa-scale-110 fa-old-padding"
+            icon="check-double"
+          />
+        </button>
         <button
           class="button-unstyled mobile-nav-button"
           :title="$t('nav.mobile_notifications_close')"
@@ -106,21 +123,19 @@
 <script src="./mobile_nav.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .MobileNav {
   z-index: var(--ZI_navbar);
 
   .mobile-nav {
     display: grid;
     line-height: var(--navbar-height);
-    grid-template-rows: 50px;
+    grid-template-rows: var(--navbar-height);
     grid-template-columns: 2fr auto;
     width: 100%;
     box-sizing: border-box;
 
     a {
-      color: var(--topBarLink, $fallback--link);
+      color: var(--link);
     }
   }
 
@@ -148,19 +163,6 @@
     display: flex;
   }
 
-  .alert-dot {
-    border-radius: 100%;
-    height: 8px;
-    width: 8px;
-    position: absolute;
-    left: calc(50% - 4px);
-    top: calc(50% - 4px);
-    margin-left: 6px;
-    margin-top: -6px;
-    background-color: $fallback--cRed;
-    background-color: var(--badgeNotification, $fallback--cRed);
-  }
-
   .mobile-notifications-drawer {
     width: 100%;
     height: 100vh;
@@ -168,13 +170,13 @@
     position: fixed;
     top: 0;
     left: 0;
-    box-shadow: 1px 1px 4px rgb(0 0 0 / 60%);
-    box-shadow: var(--panelShadow);
+    box-shadow: var(--shadow);
     transition-property: transform;
     transition-duration: 0.25s;
     transform: translateX(0);
     z-index: var(--ZI_navbar);
     -webkit-overflow-scrolling: touch;
+    background: var(--background);
 
     &.-closed {
       transform: translateX(100%);
@@ -188,14 +190,10 @@
     justify-content: space-between;
     z-index: calc(var(--ZI_navbar) + 100);
     width: 100%;
-    height: 50px;
-    line-height: 50px;
+    height: 3.5em;
+    line-height: 3.5em;
     position: absolute;
-    color: var(--topBarText);
-    background-color: $fallback--fg;
-    background-color: var(--topBar, $fallback--fg);
-    box-shadow: 0 0 4px rgb(0 0 0 / 60%);
-    box-shadow: var(--topBarShadow);
+    box-shadow: var(--shadow);
 
     .spacer {
       flex: 1;
@@ -204,6 +202,9 @@
     .title {
       font-size: 1.3em;
       margin-left: 0.6em;
+      white-space: nowrap;
+      overflow-x: hidden;
+      text-overflow: ellipsis;
     }
   }
 
@@ -216,15 +217,11 @@
   }
 
   .mobile-notifications {
-    margin-top: 50px;
+    margin-top: 3.5em;
     width: 100vw;
     height: calc(100vh - var(--navbar-height));
     overflow-x: hidden;
     overflow-y: scroll;
-    color: $fallback--text;
-    color: var(--text, $fallback--text);
-    background-color: $fallback--bg;
-    background-color: var(--bg, $fallback--bg);
 
     .notifications {
       padding: 0;
diff --git a/src/components/mobile_post_status_button/mobile_post_status_button.vue b/src/components/mobile_post_status_button/mobile_post_status_button.vue
index ef0f51fe3..ba77cb2d6 100644
--- a/src/components/mobile_post_status_button/mobile_post_status_button.vue
+++ b/src/components/mobile_post_status_button/mobile_post_status_button.vue
@@ -13,8 +13,6 @@
 <script src="./mobile_post_status_button.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .MobilePostButton {
   &.button-default {
     width: 5em;
@@ -25,8 +23,6 @@
     right: 1.5em;
     // TODO: this needs its own color, it has to stand out enough and link color
     // is not very optimal for this particular use.
-    background-color: $fallback--fg;
-    background-color: var(--btn, $fallback--fg);
     display: flex;
     justify-content: center;
     align-items: center;
@@ -42,8 +38,7 @@
 
   svg {
     font-size: 1.5em;
-    color: $fallback--text;
-    color: var(--text, $fallback--text);
+    color: var(--text);
   }
 }
 
diff --git a/src/components/modal/modals.style.js b/src/components/modal/modals.style.js
new file mode 100644
index 000000000..1cb4a34a7
--- /dev/null
+++ b/src/components/modal/modals.style.js
@@ -0,0 +1,10 @@
+export default {
+  name: 'Modals',
+  selector: ['.modal-view', '#modal', '.shout-panel'],
+  lazy: true,
+  notEditable: true,
+  validInnerComponents: [
+    'Panel'
+  ],
+  defaultRules: []
+}
diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue
index b708cdc8f..9c8894bff 100644
--- a/src/components/moderation_tools/moderation_tools.vue
+++ b/src/components/moderation_tools/moderation_tools.vue
@@ -10,119 +10,150 @@
     >
       <template #content>
         <div class="dropdown-menu">
-          <span v-if="canGrantRole">
-            <button
-              class="button-default dropdown-item"
-              @click="toggleRight(&quot;admin&quot;)"
-            >
-              {{ $t(!!user.rights.admin ? 'user_card.admin_menu.revoke_admin' : 'user_card.admin_menu.grant_admin') }}
-            </button>
-            <button
-              class="button-default dropdown-item"
-              @click="toggleRight(&quot;moderator&quot;)"
-            >
-              {{ $t(!!user.rights.moderator ? 'user_card.admin_menu.revoke_moderator' : 'user_card.admin_menu.grant_moderator') }}
-            </button>
+          <template v-if="canGrantRole">
+            <div class="menu-item dropdown-item -icon-space">
+              <button
+                class="main-button"
+                @click="toggleRight(&quot;admin&quot;)"
+              >
+                {{ $t(!!user.rights.admin ? 'user_card.admin_menu.revoke_admin' : 'user_card.admin_menu.grant_admin') }}
+              </button>
+            </div>
+            <div class="menu-item dropdown-item -icon-space">
+              <button
+                class="main-button"
+                @click="toggleRight(&quot;moderator&quot;)"
+              >
+                {{ $t(!!user.rights.moderator ? 'user_card.admin_menu.revoke_moderator' : 'user_card.admin_menu.grant_moderator') }}
+              </button>
+            </div>
             <div
               v-if="canChangeActivationState || canDeleteAccount"
               role="separator"
               class="dropdown-divider"
             />
-          </span>
-          <button
-            v-if="canChangeActivationState"
-            class="button-default dropdown-item"
-            @click="toggleActivationStatus()"
-          >
-            {{ $t(!!user.deactivated ? 'user_card.admin_menu.activate_account' : 'user_card.admin_menu.deactivate_account') }}
-          </button>
-          <button
-            v-if="canDeleteAccount"
-            class="button-default dropdown-item"
-            @click="deleteUserDialog(true)"
-          >
-            {{ $t('user_card.admin_menu.delete_account') }}
-          </button>
+          </template>
           <div
-            v-if="canUseTagPolicy"
-            role="separator"
-            class="dropdown-divider"
-          />
-          <span v-if="canUseTagPolicy">
+            v-if="canChangeActivationState"
+            class="menu-item dropdown-item -icon-space"
+          >
             <button
-              class="button-default dropdown-item"
-              @click="toggleTag(tags.FORCE_NSFW)"
+              class="main-button"
+              @click="toggleActivationStatus()"
             >
-              <span
-                class="menu-checkbox"
-                :class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_NSFW) }"
-              />
-              {{ $t('user_card.admin_menu.force_nsfw') }}
+              {{ $t(!!user.deactivated ? 'user_card.admin_menu.activate_account' : 'user_card.admin_menu.deactivate_account') }}
             </button>
+          </div>
+          <div
+            v-if="canDeleteAccount"
+            class="menu-item dropdown-item -icon-space"
+          >
             <button
-              class="button-default dropdown-item"
-              @click="toggleTag(tags.STRIP_MEDIA)"
+              class="main-button"
+              @click="deleteUserDialog(true)"
             >
-              <span
-                class="menu-checkbox"
-                :class="{ 'menu-checkbox-checked': hasTag(tags.STRIP_MEDIA) }"
-              />
-              {{ $t('user_card.admin_menu.strip_media') }}
+              {{ $t('user_card.admin_menu.delete_account') }}
             </button>
-            <button
-              class="button-default dropdown-item"
-              @click="toggleTag(tags.FORCE_UNLISTED)"
-            >
-              <span
-                class="menu-checkbox"
-                :class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_UNLISTED) }"
-              />
-              {{ $t('user_card.admin_menu.force_unlisted') }}
-            </button>
-            <button
-              class="button-default dropdown-item"
-              @click="toggleTag(tags.SANDBOX)"
-            >
-              <span
-                class="menu-checkbox"
-                :class="{ 'menu-checkbox-checked': hasTag(tags.SANDBOX) }"
-              />
-              {{ $t('user_card.admin_menu.sandbox') }}
-            </button>
-            <button
+          </div>
+          <template v-if="canUseTagPolicy">
+            <div
+              role="separator"
+              class="dropdown-divider"
+            />
+            <div class="menu-item dropdown-item -icon">
+              <button
+                class="main-button"
+                @click="toggleTag(tags.FORCE_NSFW)"
+              >
+                <span
+                  class="input menu-checkbox"
+                  :class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_NSFW) }"
+                />
+                {{ $t('user_card.admin_menu.force_nsfw') }}
+              </button>
+            </div>
+            <div class="menu-item dropdown-item -icon">
+              <button
+                class="main-button"
+                @click="toggleTag(tags.STRIP_MEDIA)"
+              >
+                <span
+                  class="input menu-checkbox"
+                  :class="{ 'menu-checkbox-checked': hasTag(tags.STRIP_MEDIA) }"
+                />
+                {{ $t('user_card.admin_menu.strip_media') }}
+              </button>
+            </div>
+            <div class="menu-item dropdown-item -icon">
+              <button
+                class="main-button"
+                @click="toggleTag(tags.FORCE_UNLISTED)"
+              >
+                <span
+                  class="input menu-checkbox"
+                  :class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_UNLISTED) }"
+                />
+                {{ $t('user_card.admin_menu.force_unlisted') }}
+              </button>
+            </div>
+            <div class="menu-item dropdown-item -icon">
+              <button
+                class="main-button"
+                @click="toggleTag(tags.SANDBOX)"
+              >
+                <span
+                  class="input menu-checkbox"
+                  :class="{ 'menu-checkbox-checked': hasTag(tags.SANDBOX) }"
+                />
+                {{ $t('user_card.admin_menu.sandbox') }}
+              </button>
+            </div>
+            <div
               v-if="user.is_local"
-              class="button-default dropdown-item"
-              @click="toggleTag(tags.DISABLE_REMOTE_SUBSCRIPTION)"
+              class="menu-item dropdown-item -icon"
             >
-              <span
-                class="menu-checkbox"
-                :class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_REMOTE_SUBSCRIPTION) }"
-              />
-              {{ $t('user_card.admin_menu.disable_remote_subscription') }}
-            </button>
-            <button
+              <button
+                class="main-button"
+                @click="toggleTag(tags.DISABLE_REMOTE_SUBSCRIPTION)"
+              >
+                <span
+                  class="input menu-checkbox"
+                  :class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_REMOTE_SUBSCRIPTION) }"
+                />
+                {{ $t('user_card.admin_menu.disable_remote_subscription') }}
+              </button>
+            </div>
+            <div
               v-if="user.is_local"
-              class="button-default dropdown-item"
-              @click="toggleTag(tags.DISABLE_ANY_SUBSCRIPTION)"
+              class="menu-item dropdown-item -icon"
             >
-              <span
-                class="menu-checkbox"
-                :class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_ANY_SUBSCRIPTION) }"
-              />
-              {{ $t('user_card.admin_menu.disable_any_subscription') }}
-            </button>
-            <button
+              <button
+                class="main-button"
+                @click="toggleTag(tags.DISABLE_ANY_SUBSCRIPTION)"
+              >
+                <span
+                  class="input menu-checkbox"
+                  :class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_ANY_SUBSCRIPTION) }"
+                />
+                {{ $t('user_card.admin_menu.disable_any_subscription') }}
+              </button>
+            </div>
+            <div
               v-if="user.is_local"
-              class="button-default dropdown-item"
-              @click="toggleTag(tags.QUARANTINE)"
+              class="menu-item dropdown-item -icon"
             >
-              <span
-                class="menu-checkbox"
-                :class="{ 'menu-checkbox-checked': hasTag(tags.QUARANTINE) }"
-              />
-              {{ $t('user_card.admin_menu.quarantine') }}
-            </button>
-          </span>
+              <button
+                class="main-button"
+                @click="toggleTag(tags.QUARANTINE)"
+              >
+                <span
+                  class="input menu-checkbox"
+                  :class="{ 'menu-checkbox-checked': hasTag(tags.QUARANTINE) }"
+                />
+                {{ $t('user_card.admin_menu.quarantine') }}
+              </button>
+            </div>
+          </template>
         </div>
       </template>
       <template #trigger>
@@ -166,8 +197,6 @@
 <script src="./moderation_tools.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .moderation-tools-popover {
   height: 100%;
 
diff --git a/src/components/mrf_transparency_panel/mrf_transparency_panel.vue b/src/components/mrf_transparency_panel/mrf_transparency_panel.vue
index 97af4787a..fcd25a36e 100644
--- a/src/components/mrf_transparency_panel/mrf_transparency_panel.vue
+++ b/src/components/mrf_transparency_panel/mrf_transparency_panel.vue
@@ -32,22 +32,24 @@
             <p>{{ $t("about.mrf.simple.accept_desc") }}</p>
 
             <table>
-              <tr>
-                <th>{{ $t("about.mrf.simple.instance") }}</th>
-                <th>{{ $t("about.mrf.simple.reason") }}</th>
-              </tr>
-              <tr
-                v-for="entry in acceptInstances"
-                :key="entry.instance + '_accept'"
-              >
-                <td>{{ entry.instance }}</td>
-                <td v-if="entry.reason === ''">
-                  {{ $t("about.mrf.simple.not_applicable") }}
-                </td>
-                <td v-else>
-                  {{ entry.reason }}
-                </td>
-              </tr>
+              <tbody>
+                <tr>
+                  <th>{{ $t("about.mrf.simple.instance") }}</th>
+                  <th>{{ $t("about.mrf.simple.reason") }}</th>
+                </tr>
+                <tr
+                  v-for="entry in acceptInstances"
+                  :key="entry.instance + '_accept'"
+                >
+                  <td>{{ entry.instance }}</td>
+                  <td v-if="entry.reason === ''">
+                    {{ $t("about.mrf.simple.not_applicable") }}
+                  </td>
+                  <td v-else>
+                    {{ entry.reason }}
+                  </td>
+                </tr>
+              </tbody>
             </table>
           </div>
 
@@ -57,22 +59,24 @@
             <p>{{ $t("about.mrf.simple.reject_desc") }}</p>
 
             <table>
-              <tr>
-                <th>{{ $t("about.mrf.simple.instance") }}</th>
-                <th>{{ $t("about.mrf.simple.reason") }}</th>
-              </tr>
-              <tr
-                v-for="entry in rejectInstances"
-                :key="entry.instance + '_reject'"
-              >
-                <td>{{ entry.instance }}</td>
-                <td v-if="entry.reason === ''">
-                  {{ $t("about.mrf.simple.not_applicable") }}
-                </td>
-                <td v-else>
-                  {{ entry.reason }}
-                </td>
-              </tr>
+              <tbody>
+                <tr>
+                  <th>{{ $t("about.mrf.simple.instance") }}</th>
+                  <th>{{ $t("about.mrf.simple.reason") }}</th>
+                </tr>
+                <tr
+                  v-for="entry in rejectInstances"
+                  :key="entry.instance + '_reject'"
+                >
+                  <td>{{ entry.instance }}</td>
+                  <td v-if="entry.reason === ''">
+                    {{ $t("about.mrf.simple.not_applicable") }}
+                  </td>
+                  <td v-else>
+                    {{ entry.reason }}
+                  </td>
+                </tr>
+              </tbody>
             </table>
           </div>
 
@@ -82,22 +86,24 @@
             <p>{{ $t("about.mrf.simple.quarantine_desc") }}</p>
 
             <table>
-              <tr>
-                <th>{{ $t("about.mrf.simple.instance") }}</th>
-                <th>{{ $t("about.mrf.simple.reason") }}</th>
-              </tr>
-              <tr
-                v-for="entry in quarantineInstances"
-                :key="entry.instance + '_quarantine'"
-              >
-                <td>{{ entry.instance }}</td>
-                <td v-if="entry.reason === ''">
-                  {{ $t("about.mrf.simple.not_applicable") }}
-                </td>
-                <td v-else>
-                  {{ entry.reason }}
-                </td>
-              </tr>
+              <tbody>
+                <tr>
+                  <th>{{ $t("about.mrf.simple.instance") }}</th>
+                  <th>{{ $t("about.mrf.simple.reason") }}</th>
+                </tr>
+                <tr
+                  v-for="entry in quarantineInstances"
+                  :key="entry.instance + '_quarantine'"
+                >
+                  <td>{{ entry.instance }}</td>
+                  <td v-if="entry.reason === ''">
+                    {{ $t("about.mrf.simple.not_applicable") }}
+                  </td>
+                  <td v-else>
+                    {{ entry.reason }}
+                  </td>
+                </tr>
+              </tbody>
             </table>
           </div>
 
@@ -107,22 +113,24 @@
             <p>{{ $t("about.mrf.simple.ftl_removal_desc") }}</p>
 
             <table>
-              <tr>
-                <th>{{ $t("about.mrf.simple.instance") }}</th>
-                <th>{{ $t("about.mrf.simple.reason") }}</th>
-              </tr>
-              <tr
-                v-for="entry in ftlRemovalInstances"
-                :key="entry.instance + '_ftl_removal'"
-              >
-                <td>{{ entry.instance }}</td>
-                <td v-if="entry.reason === ''">
-                  {{ $t("about.mrf.simple.not_applicable") }}
-                </td>
-                <td v-else>
-                  {{ entry.reason }}
-                </td>
-              </tr>
+              <tbody>
+                <tr>
+                  <th>{{ $t("about.mrf.simple.instance") }}</th>
+                  <th>{{ $t("about.mrf.simple.reason") }}</th>
+                </tr>
+                <tr
+                  v-for="entry in ftlRemovalInstances"
+                  :key="entry.instance + '_ftl_removal'"
+                >
+                  <td>{{ entry.instance }}</td>
+                  <td v-if="entry.reason === ''">
+                    {{ $t("about.mrf.simple.not_applicable") }}
+                  </td>
+                  <td v-else>
+                    {{ entry.reason }}
+                  </td>
+                </tr>
+              </tbody>
             </table>
           </div>
 
@@ -132,22 +140,24 @@
             <p>{{ $t("about.mrf.simple.media_nsfw_desc") }}</p>
 
             <table>
-              <tr>
-                <th>{{ $t("about.mrf.simple.instance") }}</th>
-                <th>{{ $t("about.mrf.simple.reason") }}</th>
-              </tr>
-              <tr
-                v-for="entry in mediaNsfwInstances"
-                :key="entry.instance + '_media_nsfw'"
-              >
-                <td>{{ entry.instance }}</td>
-                <td v-if="entry.reason === ''">
-                  {{ $t("about.mrf.simple.not_applicable") }}
-                </td>
-                <td v-else>
-                  {{ entry.reason }}
-                </td>
-              </tr>
+              <tbody>
+                <tr>
+                  <th>{{ $t("about.mrf.simple.instance") }}</th>
+                  <th>{{ $t("about.mrf.simple.reason") }}</th>
+                </tr>
+                <tr
+                  v-for="entry in mediaNsfwInstances"
+                  :key="entry.instance + '_media_nsfw'"
+                >
+                  <td>{{ entry.instance }}</td>
+                  <td v-if="entry.reason === ''">
+                    {{ $t("about.mrf.simple.not_applicable") }}
+                  </td>
+                  <td v-else>
+                    {{ entry.reason }}
+                  </td>
+                </tr>
+              </tbody>
             </table>
           </div>
 
@@ -157,22 +167,24 @@
             <p>{{ $t("about.mrf.simple.media_removal_desc") }}</p>
 
             <table>
-              <tr>
-                <th>{{ $t("about.mrf.simple.instance") }}</th>
-                <th>{{ $t("about.mrf.simple.reason") }}</th>
-              </tr>
-              <tr
-                v-for="entry in mediaRemovalInstances"
-                :key="entry.instance + '_media_removal'"
-              >
-                <td>{{ entry.instance }}</td>
-                <td v-if="entry.reason === ''">
-                  {{ $t("about.mrf.simple.not_applicable") }}
-                </td>
-                <td v-else>
-                  {{ entry.reason }}
-                </td>
-              </tr>
+              <tbody>
+                <tr>
+                  <th>{{ $t("about.mrf.simple.instance") }}</th>
+                  <th>{{ $t("about.mrf.simple.reason") }}</th>
+                </tr>
+                <tr
+                  v-for="entry in mediaRemovalInstances"
+                  :key="entry.instance + '_media_removal'"
+                >
+                  <td>{{ entry.instance }}</td>
+                  <td v-if="entry.reason === ''">
+                    {{ $t("about.mrf.simple.not_applicable") }}
+                  </td>
+                  <td v-else>
+                    {{ entry.reason }}
+                  </td>
+                </tr>
+              </tbody>
             </table>
           </div>
 
@@ -227,6 +239,5 @@
 <script src="./mrf_transparency_panel.js"></script>
 
 <style lang="scss">
-@import "../../variables";
 @import "./mrf_transparency_panel";
 </style>
diff --git a/src/components/nav_panel/nav_panel.js b/src/components/nav_panel/nav_panel.js
index 429fcbce9..ba5090b18 100644
--- a/src/components/nav_panel/nav_panel.js
+++ b/src/components/nav_panel/nav_panel.js
@@ -1,3 +1,4 @@
+import BookmarkFoldersMenuContent from 'src/components/bookmark_folders_menu/bookmark_folders_menu_content.vue'
 import ListsMenuContent from 'src/components/lists_menu/lists_menu_content.vue'
 import { mapState, mapGetters } from 'vuex'
 import { mapState as mapPiniaState } from 'pinia'
@@ -20,7 +21,8 @@ import {
   faInfoCircle,
   faStream,
   faList,
-  faBullhorn
+  faBullhorn,
+  faFilePen
 } from '@fortawesome/free-solid-svg-icons'
 import { useAnnouncementsStore } from '../../stores/announcements'
 
@@ -36,13 +38,15 @@ library.add(
   faInfoCircle,
   faStream,
   faList,
-  faBullhorn
+  faBullhorn,
+  faFilePen
 )
 const NavPanel = {
   props: ['forceExpand', 'forceEditMode'],
   created () {
   },
   components: {
+    BookmarkFoldersMenuContent,
     ListsMenuContent,
     NavigationEntry,
     NavigationPins,
@@ -53,6 +57,7 @@ const NavPanel = {
       editMode: false,
       showTimelines: false,
       showLists: false,
+      showBookmarkFolders: false,
       timelinesList: Object.entries(TIMELINES).map(([k, v]) => ({ ...v, name: k })),
       rootList: Object.entries(ROOT_ITEMS).map(([k, v]) => ({ ...v, name: k }))
     }
@@ -64,6 +69,9 @@ const NavPanel = {
     toggleLists () {
       this.showLists = !this.showLists
     },
+    toggleBookmarkFolders () {
+      this.showBookmarkFolders = !this.showBookmarkFolders
+    },
     toggleEditMode () {
       this.editMode = !this.editMode
     },
@@ -95,7 +103,8 @@ const NavPanel = {
       federating: state => state.instance.federating,
       pleromaChatMessagesAvailable: state => state.instance.pleromaChatMessagesAvailable,
       pinnedItems: state => new Set(state.serverSideStorage.prefsStorage.collections.pinnedNavItems),
-      collapsed: state => state.serverSideStorage.prefsStorage.simple.collapseNav
+      collapsed: state => state.serverSideStorage.prefsStorage.simple.collapseNav,
+      bookmarkFolders: state => state.instance.pleromaBookmarkFoldersAvailable
     }),
     timelinesItems () {
       return filterNavigation(
@@ -107,7 +116,8 @@ const NavPanel = {
           hasAnnouncements: this.supportsAnnouncements,
           isFederating: this.federating,
           isPrivate: this.privateMode,
-          currentUser: this.currentUser
+          currentUser: this.currentUser,
+          supportsBookmarkFolders: this.bookmarkFolders
         }
       )
     },
@@ -121,7 +131,8 @@ const NavPanel = {
           hasAnnouncements: this.supportsAnnouncements,
           isFederating: this.federating,
           isPrivate: this.privateMode,
-          currentUser: this.currentUser
+          currentUser: this.currentUser,
+          supportsBookmarkFolders: this.bookmarkFolders
         }
       )
     },
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index 1a826cc43..10903bcae 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -37,7 +37,8 @@
         </NavigationEntry>
         <div
           v-show="showTimelines"
-          class="timelines-background"
+          class="timelines-background menu-item-collapsible"
+          :class="{ '-expanded': showTimelines }"
         >
           <div class="timelines">
             <NavigationEntry
@@ -57,12 +58,11 @@
         >
           <router-link
             :title="$t('lists.manage_lists')"
-            class="extra-button"
+            class="button-unstyled extra-button"
             :to="{ name: 'lists' }"
             @click.stop
           >
             <FAIcon
-              class="extra-button"
               fixed-width
               icon="wrench"
             />
@@ -75,13 +75,48 @@
         </NavigationEntry>
         <div
           v-show="showLists"
-          class="timelines-background"
+          class="timelines-background menu-item-collapsible"
+          :class="{ '-expanded': showLists }"
         >
           <ListsMenuContent
             :show-pin="editMode || forceEditMode"
             class="timelines"
           />
         </div>
+        <NavigationEntry
+          v-if="currentUser && bookmarkFolders"
+          :show-pin="false"
+          :item="{ icon: 'bookmark', label: 'nav.bookmarks' }"
+          :aria-expanded="showBookmarkFolders ? 'true' : 'false'"
+          @click="toggleBookmarkFolders"
+        >
+          <router-link
+            :title="$t('bookmarks.manage_bookmark_folders')"
+            class="button-unstyled extra-button"
+            :to="{ name: 'bookmark-folders' }"
+            @click.stop
+          >
+            <FAIcon
+              fixed-width
+              icon="wrench"
+            />
+          </router-link>
+          <FAIcon
+            class="timelines-chevron"
+            fixed-width
+            :icon="showBookmarkFolders ? 'chevron-up' : 'chevron-down'"
+          />
+        </NavigationEntry>
+        <div
+          v-show="showBookmarkFolders"
+          class="timelines-background menu-item-collapsible"
+          :class="{ '-expanded': showBookmarkFolders }"
+        >
+          <BookmarkFoldersMenuContent
+            :show-pin="editMode || forceEditMode"
+            class="timelines"
+          />
+        </div>
         <NavigationEntry
           v-for="item in rootItems"
           :key="item.name"
@@ -91,7 +126,7 @@
         <NavigationEntry
           v-if="!forceEditMode && currentUser"
           :show-pin="false"
-          :item="{ label: editMode ? $t('nav.edit_finish') : $t('nav.edit_pinned'), icon: editMode ? 'check' : 'wrench' }"
+          :item="{ labelRaw: editMode ? $t('nav.edit_finish') : $t('nav.edit_pinned'), icon: editMode ? 'check' : 'wrench' }"
           @click="toggleEditMode"
         />
       </ul>
@@ -102,12 +137,10 @@
 <script src="./nav_panel.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .NavPanel {
   .panel {
     overflow: hidden;
-    box-shadow: var(--panelShadow);
+    box-shadow: var(--shadow);
   }
 
   ul {
@@ -116,56 +149,14 @@
     padding: 0;
   }
 
-  li {
-    position: relative;
-    border-bottom: 1px solid;
-    border-color: $fallback--border;
-    border-color: var(--border, $fallback--border);
-  }
-
-  > li {
-    &:first-child .menu-item {
-      border-top-right-radius: $fallback--panelRadius;
-      border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
-      border-top-left-radius: $fallback--panelRadius;
-      border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
-    }
-
-    &:last-child .menu-item {
-      border-bottom-right-radius: $fallback--panelRadius;
-      border-bottom-right-radius: var(--panelRadius, $fallback--panelRadius);
-      border-bottom-left-radius: $fallback--panelRadius;
-      border-bottom-left-radius: var(--panelRadius, $fallback--panelRadius);
-    }
-  }
-
-  li:last-child {
-    border: none;
-  }
-
   .navigation-chevron {
     margin-left: 0.8em;
     margin-right: 0.8em;
     font-size: 1.1em;
   }
 
-  .timelines-chevron {
-    margin-left: 0.8em;
-    font-size: 1.1em;
-  }
-
   .timelines-background {
     padding: 0 0 0 0.6em;
-    background-color: $fallback--lightBg;
-    background-color: var(--selectedMenu, $fallback--lightBg);
-    border-bottom: 1px solid;
-    border-color: $fallback--border;
-    border-color: var(--border, $fallback--border);
-  }
-
-  .timelines {
-    background-color: $fallback--bg;
-    background-color: var(--bg, $fallback--bg);
   }
 
   .nav-panel-heading {
diff --git a/src/components/navigation/filter.js b/src/components/navigation/filter.js
index 68f9f0d89..0974bc1e3 100644
--- a/src/components/navigation/filter.js
+++ b/src/components/navigation/filter.js
@@ -1,4 +1,4 @@
-export const filterNavigation = (list = [], { hasChats, hasAnnouncements, isFederating, isPrivate, currentUser }) => {
+export const filterNavigation = (list = [], { hasChats, hasAnnouncements, isFederating, isPrivate, currentUser, supportsBookmarkFolders }) => {
   return list.filter(({ criteria, anon, anonRoute }) => {
     const set = new Set(criteria || [])
     if (!isFederating && set.has('federating')) return false
@@ -7,6 +7,7 @@ export const filterNavigation = (list = [], { hasChats, hasAnnouncements, isFede
     if ((!currentUser || !currentUser.locked) && set.has('lockedUser')) return false
     if (!hasChats && set.has('chats')) return false
     if (!hasAnnouncements && set.has('announcements')) return false
+    if (supportsBookmarkFolders && set.has('!supportsBookmarkFolders')) return false
     return true
   })
 }
@@ -17,3 +18,12 @@ export const getListEntries = store => store.allLists.map(list => ({
   labelRaw: list.title,
   iconLetter: list.title[0]
 }))
+
+export const getBookmarkFolderEntries = state => state.bookmarkFolders.allFolders.map(folder => ({
+  name: 'bookmark-folder-' + folder.id,
+  routeObject: { name: 'bookmark-folder', params: { id: folder.id } },
+  labelRaw: folder.name,
+  iconEmoji: folder.emoji,
+  iconEmojiUrl: folder.emoji_url,
+  iconLetter: folder.name[0]
+}))
diff --git a/src/components/navigation/navigation.js b/src/components/navigation/navigation.js
index 7018a5d0c..a8e1fc966 100644
--- a/src/components/navigation/navigation.js
+++ b/src/components/navigation/navigation.js
@@ -1,11 +1,16 @@
+// routes that take :username property
 export const USERNAME_ROUTES = new Set([
-  'bookmarks',
   'dms',
   'interactions',
   'notifications',
   'chat',
-  'chats',
-  'user-profile'
+  'chats'
+])
+
+// routes that take :name property
+export const NAME_ROUTES = new Set([
+  'user-profile',
+  'legacy-user-profile'
 ])
 
 export const TIMELINES = {
@@ -32,7 +37,8 @@ export const TIMELINES = {
   bookmarks: {
     route: 'bookmarks',
     icon: 'bookmark',
-    label: 'nav.bookmarks'
+    label: 'nav.bookmarks',
+    criteria: ['!supportsBookmarkFolders']
   },
   favorites: {
     routeObject: { name: 'user-profile', query: { tab: 'favorites' } },
@@ -56,6 +62,7 @@ export const ROOT_ITEMS = {
     route: 'chats',
     icon: 'comments',
     label: 'nav.chats',
+    badgeStyle: 'notification',
     badgeGetter: 'unreadChatCount',
     criteria: ['chats']
   },
@@ -63,6 +70,7 @@ export const ROOT_ITEMS = {
     route: 'friend-requests',
     icon: 'user-plus',
     label: 'nav.friend_requests',
+    badgeStyle: 'notification',
     criteria: ['lockedUser'],
     badgeGetter: 'followRequestCount'
   },
@@ -77,8 +85,16 @@ export const ROOT_ITEMS = {
     icon: 'bullhorn',
     label: 'nav.announcements',
     store: 'announcements',
+    badgeStyle: 'notification',
     badgeGetter: 'unreadAnnouncementCount',
     criteria: ['announcements']
+  },
+  drafts: {
+    route: 'drafts',
+    icon: 'file-pen',
+    label: 'nav.drafts',
+    badgeStyle: 'neutral',
+    badgeGetter: 'draftCount'
   }
 }
 
@@ -94,7 +110,9 @@ export function routeTo (item, currentUser) {
   }
 
   if (USERNAME_ROUTES.has(route.name)) {
-    route.params = { username: currentUser.screen_name, name: currentUser.screen_name }
+    route.params = { username: currentUser.screen_name }
+  } else if (NAME_ROUTES.has(route.name)) {
+    route.params = { name: currentUser.screen_name }
   }
 
   return route
diff --git a/src/components/navigation/navigation_entry.vue b/src/components/navigation/navigation_entry.vue
index dd02e48b8..3ab0355b1 100644
--- a/src/components/navigation/navigation_entry.vue
+++ b/src/components/navigation/navigation_entry.vue
@@ -1,7 +1,6 @@
 <template>
   <OptionalRouterLink
     v-slot="{ isActive, href, navigate } = {}"
-    ass="ass"
     :to="routeTo"
   >
     <li
@@ -11,7 +10,7 @@
     >
       <component
         :is="routeTo ? 'a' : 'button'"
-        class="main-link button-unstyled"
+        class="main-link"
         :href="href"
         @click="navigate"
       >
@@ -23,11 +22,25 @@
             :icon="item.icon"
           />
         </span>
+        <img
+          v-if="item.iconEmojiUrl"
+          class="menu-icon iconEmoji iconEmoji-image"
+          :src="item.iconEmojiUrl"
+          :alt="item.iconEmoji"
+          :title="item.iconEmoji"
+        >
         <span
-          v-if="item.iconLetter"
-          class="icon iconLetter fa-scale-110 menu-icon"
-        >{{ item.iconLetter }}
+          v-else-if="item.iconEmoji"
+          class="menu-icon iconEmoji"
+        >
+          <span>
+            {{ item.iconEmoji }}
+          </span>
         </span>
+        <span
+          v-else-if="item.iconLetter"
+          class="icon iconLetter fa-scale-110 menu-icon"
+        >{{ item.iconLetter }}</span>
         <span class="label">
           {{ item.labelRaw || $t(item.label) }}
         </span>
@@ -35,7 +48,8 @@
       <slot />
       <div
         v-if="item.badgeGetter && getters[item.badgeGetter]"
-        class="badge badge-notification"
+        class="badge"
+        :class="[`-${item.badgeStyle}`]"
       >
         {{ getters[item.badgeGetter] }}
       </div>
@@ -69,73 +83,63 @@
 <script src="./navigation_entry.js"></script>
 
 <style lang="scss">
-@import "../../variables";
+.NavigationEntry.menu-item {
+  --__line-height: 2.5em;
+  --__horizontal-gap: 0.5em;
+  --__vertical-gap: 0.4em;
 
-.NavigationEntry {
-  display: flex;
-  box-sizing: border-box;
+  padding: var(--__vertical-gap) var(--__horizontal-gap);
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-auto-columns: var(--__line-height);
+  grid-auto-flow: column;
+  grid-gap: var(--__horizontal-gap);
   align-items: baseline;
-  height: 3.5em;
-  line-height: 3.5em;
-  padding: 0 1em;
-  width: 100%;
-  color: $fallback--link;
-  color: var(--link, $fallback--link);
 
-  .timelines-chevron {
-    margin-right: 0;
+  &[aria-expanded] {
+    padding-right: var(--__horizontal-gap);
   }
 
   .main-link {
-    flex: 1;
+    line-height: var(--__line-height);
+    box-sizing: border-box;
   }
 
   .menu-icon {
-    margin-right: 0.8em;
+    line-height: var(--__line-height);
+    padding: 0;
+    width: var(--__line-height);
+    margin-right: var(--__horizontal-gap);
   }
 
+  .timelines-chevron,
   .extra-button {
-    width: 3em;
+    line-height: var(--__line-height);
+    width: 100%;
+    padding: 0;
     text-align: center;
+  }
 
-    &:last-child {
-      margin-right: -0.8em;
+  .badge {
+    justify-self: center;
+  }
+
+  .iconEmoji {
+    display: inline-block;
+    text-align: center;
+    object-fit: contain;
+    vertical-align: middle;
+    height: var(--__line-height);
+    width: var(--__line-height);
+
+    > span {
+      font-size: 1.5rem;
     }
   }
 
-  &:hover {
-    background-color: $fallback--lightBg;
-    background-color: var(--selectedMenu, $fallback--lightBg);
-    color: $fallback--link;
-    color: var(--selectedMenuText, $fallback--link);
-
-    --faint: var(--selectedMenuFaintText, $fallback--faint);
-    --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
-    --lightText: var(--selectedMenuLightText, $fallback--lightText);
-
-    .menu-icon {
-      --icon: var(--text, $fallback--icon);
-    }
-  }
-
-  &.-active {
-    font-weight: bolder;
-    background-color: $fallback--lightBg;
-    background-color: var(--selectedMenu, $fallback--lightBg);
-    color: $fallback--text;
-    color: var(--selectedMenuText, $fallback--text);
-
-    --faint: var(--selectedMenuFaintText, $fallback--faint);
-    --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
-    --lightText: var(--selectedMenuLightText, $fallback--lightText);
-
-    .menu-icon {
-      --icon: var(--text, $fallback--icon);
-    }
-
-    &:hover {
-      text-decoration: underline;
-    }
+  img.iconEmoji {
+    padding: 0.25rem;
+    box-sizing: border-box;
   }
 }
 </style>
diff --git a/src/components/navigation/navigation_pins.js b/src/components/navigation/navigation_pins.js
index 5001a8c37..18e3fcd81 100644
--- a/src/components/navigation/navigation_pins.js
+++ b/src/components/navigation/navigation_pins.js
@@ -1,7 +1,9 @@
 import { mapState } from 'vuex'
 import { mapState as mapPiniaState } from 'pinia'
 import { TIMELINES, ROOT_ITEMS, routeTo } from 'src/components/navigation/navigation.js'
-import { getListEntries, filterNavigation } from 'src/components/navigation/filter.js'
+import { getBookmarkFolderEntries, getListEntries, filterNavigation } from 'src/components/navigation/filter.js'
+
+import StillImage from 'src/components/still-image/still-image.vue'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -36,6 +38,9 @@ const NavPanel = {
       return routeTo(item, this.currentUser)
     }
   },
+  components: {
+    StillImage
+  },
   computed: {
     getters () {
       return this.$store.getters
@@ -44,11 +49,13 @@ const NavPanel = {
       lists: getListEntries
     }),
     ...mapState({
+      bookmarks: getBookmarkFolderEntries,
       currentUser: state => state.users.currentUser,
       followRequestCount: state => state.api.followRequests.length,
       privateMode: state => state.instance.private,
       federating: state => state.instance.federating,
       pleromaChatMessagesAvailable: state => state.instance.pleromaChatMessagesAvailable,
+      supportsAnnouncements: state => state.announcements.supportsAnnouncements,
       pinnedItems: state => new Set(state.serverSideStorage.prefsStorage.collections.pinnedNavItems)
     }),
     pinnedList () {
@@ -60,6 +67,7 @@ const NavPanel = {
         ],
         {
           hasChats: this.pleromaChatMessagesAvailable,
+          hasAnnouncements: this.supportsAnnouncements,
           isFederating: this.federating,
           isPrivate: this.privateMode,
           currentUser: this.currentUser
@@ -72,6 +80,7 @@ const NavPanel = {
             .filter(([k]) => this.pinnedItems.has(k))
             .map(([k, v]) => ({ ...v, name: k })),
           ...this.lists.filter((k) => this.pinnedItems.has(k.name)),
+          ...this.bookmarks.filter((k) => this.pinnedItems.has(k.name)),
           ...Object
             .entries({ ...ROOT_ITEMS })
             .filter(([k]) => this.pinnedItems.has(k))
@@ -79,6 +88,7 @@ const NavPanel = {
         ],
         {
           hasChats: this.pleromaChatMessagesAvailable,
+          hasAnnouncements: this.supportsAnnouncements,
           isFederating: this.federating,
           isPrivate: this.privateMode,
           currentUser: this.currentUser
diff --git a/src/components/navigation/navigation_pins.vue b/src/components/navigation/navigation_pins.vue
index 4fbb4f95c..a9d11da87 100644
--- a/src/components/navigation/navigation_pins.vue
+++ b/src/components/navigation/navigation_pins.vue
@@ -3,7 +3,8 @@
     <router-link
       v-for="item in pinnedList"
       :key="item.name"
-      class="pinned-item"
+      class="button-unstyled pinned-item"
+      active-class="toggled"
       :to="getRouteTo(item)"
       :title="item.labelRaw || $t(item.label)"
     >
@@ -13,12 +14,18 @@
         :icon="item.icon"
       />
       <span
-        v-if="item.iconLetter"
+        v-if="item.iconLetter && !item.iconEmoji"
         class="iconLetter fa-scale-110 fa-old-padding"
       >{{ item.iconLetter }}</span>
+      <StillImage
+        v-if="item.iconEmoji"
+        class="bookmark-emoji"
+        :src="item.iconEmojiUrl"
+      />
       <div
         v-if="item.badgeGetter && getters[item.badgeGetter]"
-        class="alert-dot"
+        class="badge -dot"
+        :class="[`-${item.badgeStyle}`]"
       />
     </router-link>
   </span>
@@ -27,23 +34,18 @@
 <script src="./navigation_pins.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .NavigationPins {
   display: flex;
   flex-wrap: wrap;
   overflow: hidden;
   height: 100%;
 
-  .alert-dot {
-    border-radius: 100%;
-    height: 0.5em;
-    width: 0.5em;
-    position: absolute;
-    right: calc(50% - 0.75em);
-    top: calc(50% - 0.5em);
-    background-color: $fallback--cRed;
-    background-color: var(--badgeNotification, $fallback--cRed);
+  &.alert-dot-notification {
+    background-color: var(--badgeNotification);
+  }
+
+  &.alert-dot-neutral {
+    background-color: var(--badgeNeutral);
   }
 
   .pinned-item {
@@ -55,20 +57,21 @@
     box-sizing: border-box;
     height: 100%;
 
+    .bookmark-emoji {
+      height: 100%;
+      box-sizing: border-box;
+      padding: 0.5em;
+    }
+
+    & .bookmark-emoji,
     & .svg-inline--fa,
     & .iconLetter {
       margin: 0;
     }
 
-    &.router-link-active {
-      color: $fallback--text;
-      color: var(--panelText, $fallback--text);
+    &.toggled {
+      margin-bottom: -4px;
       border-bottom: 4px solid;
-
-      & .svg-inline--fa,
-      & .iconLetter {
-        color: inherit;
-      }
     }
   }
 }
diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
index d5b7fd266..043be1b1a 100644
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@@ -25,7 +25,6 @@ import {
   faExpandAlt,
   faCompressAlt
 } from '@fortawesome/free-solid-svg-icons'
-import { useInterfaceStore } from '../../stores/interface'
 
 library.add(
   faCheck,
@@ -44,13 +43,13 @@ const Notification = {
   data () {
     return {
       statusExpanded: false,
-      betterShadow: useInterfaceStore().browserSupport.cssFilter,
       unmuted: false,
       showingApproveConfirmDialog: false,
       showingDenyConfirmDialog: false
     }
   },
   props: ['notification'],
+  emits: ['interacted'],
   components: {
     StatusContent,
     UserAvatar,
@@ -73,6 +72,9 @@ const Notification = {
     getUser (notification) {
       return this.$store.state.users.usersObject[notification.from_profile.id]
     },
+    interacted () {
+      this.$emit('interacted')
+    },
     toggleMute () {
       this.unmuted = !this.unmuted
     },
@@ -96,6 +98,7 @@ const Notification = {
       }
     },
     doApprove () {
+      this.$emit('interacted')
       this.$store.state.api.backendInteractor.approveUser({ id: this.user.id })
       this.$store.dispatch('removeFollowRequest', this.user)
       this.$store.dispatch('markSingleNotificationAsSeen', { id: this.notification.id })
@@ -115,6 +118,7 @@ const Notification = {
       }
     },
     doDeny () {
+      this.$emit('interacted')
       this.$store.state.api.backendInteractor.denyUser({ id: this.user.id })
         .then(() => {
           this.$store.dispatch('dismissNotificationLocal', { id: this.notification.id })
diff --git a/src/components/notification/notification.scss b/src/components/notification/notification.scss
index 654aca3cd..d46b25bed 100644
--- a/src/components/notification/notification.scss
+++ b/src/components/notification/notification.scss
@@ -1,14 +1,16 @@
-@import "../../variables";
-
 // TODO Copypaste from Status, should unify it somehow
 .Notification {
   border-bottom: 1px solid;
-  border-color: $fallback--border;
-  border-color: var(--border, $fallback--border);
+  border-color: var(--border);
   word-wrap: break-word;
   word-break: break-word;
 
-  --emoji-size: 14px;
+  &.Status {
+    /* stylelint-disable-next-line declaration-no-important */
+    background-color: transparent !important;
+  }
+
+  --emoji-size: 1em;
 
   &:hover {
     --_still-image-img-visibility: visible;
@@ -24,6 +26,7 @@
     overflow: hidden;
     display: flex;
     flex-wrap: nowrap;
+    gap: 1ex;
 
     & .status-username,
     & .mute-thread,
@@ -71,28 +74,22 @@
   }
 
   &.-type--repeat .type-icon {
-    color: $fallback--cGreen;
-    color: var(--cGreen, $fallback--cGreen);
+    color: var(--cGreen);
   }
 
   &.-type--follow .type-icon {
-    color: $fallback--cBlue;
-    color: var(--cBlue, $fallback--cBlue);
+    color: var(--cBlue);
   }
 
   &.-type--follow-request .type-icon {
-    color: $fallback--cBlue;
-    color: var(--cBlue, $fallback--cBlue);
+    color: var(--cBlue);
   }
 
   &.-type--like .type-icon {
-    color: orange;
-    color: $fallback--cOrange;
-    color: var(--cOrange, $fallback--cOrange);
+    color: var(--cOrange);
   }
 
   &.-type--move .type-icon {
-    color: $fallback--cBlue;
-    color: var(--cBlue, $fallback--cBlue);
+    color: var(--cBlue);
   }
 }
diff --git a/src/components/notification/notification.style.js b/src/components/notification/notification.style.js
new file mode 100644
index 000000000..c6d317d1c
--- /dev/null
+++ b/src/components/notification/notification.style.js
@@ -0,0 +1,18 @@
+export default {
+  name: 'Notification',
+  selector: '.Notification',
+  validInnerComponents: [
+    'Text',
+    'Link',
+    'Icon',
+    'Border',
+    'Button',
+    'ButtonUnstyled',
+    'RichContent',
+    'Input',
+    'Avatar',
+    'Attachment',
+    'PollGraph'
+  ],
+  defaultRules: []
+}
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index 4d801c5e9..0930e0990 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -1,11 +1,12 @@
 <template>
   <article
-    v-if="notification.type === 'mention'"
+    v-if="notification.type === 'mention' || notification.type === 'status'"
   >
     <Status
       class="Notification"
       :compact="true"
       :statusoid="notification.status"
+      @interacted="interacted"
     />
   </article>
   <article v-else>
@@ -46,9 +47,7 @@
         >
           <UserAvatar
             class="post-avatar"
-            :bot="botIndicator"
             :compact="true"
-            :better-shadow="betterShadow"
             :user="notification.from_profile"
           />
         </UserPopover>
@@ -125,7 +124,8 @@
                     v-if="notification.emoji_url"
                     class="emoji-reaction-emoji emoji-reaction-emoji-image"
                     :src="notification.emoji_url"
-                    :name="notification.emoji"
+                    :alt="notification.emoji"
+                    :title="notification.emoji"
                   >
                   <span
                     v-else
@@ -153,7 +153,7 @@
             <router-link
               v-if="notification.status"
               :to="{ name: 'conversation', params: { id: notification.status.id } }"
-              class="timeago-link faint-link"
+              class="timeago-link faint"
             >
               <Timeago
                 :time="notification.created_at"
@@ -162,8 +162,8 @@
             </router-link>
             <button
               class="button-unstyled expand-icon"
-              :aria-expanded="statusExpanded"
               :title="$t('tool_tip.toggle_expand')"
+              :aria-expanded="statusExpanded"
               @click.prevent="toggleStatusExpanded"
             >
               <FAIcon
@@ -245,9 +245,8 @@
         />
         <template v-else>
           <StatusContent
-            :class="{ faint: !statusExpanded }"
             :compact="!statusExpanded"
-            :status="notification.action"
+            :status="notification.status"
           />
         </template>
       </div>
diff --git a/src/components/notifications/notification_filters.vue b/src/components/notifications/notification_filters.vue
index 1315b51ad..0b740ea0a 100644
--- a/src/components/notifications/notification_filters.vue
+++ b/src/components/notifications/notification_filters.vue
@@ -7,69 +7,94 @@
   >
     <template #content>
       <div class="dropdown-menu">
-        <button
-          class="button-default dropdown-item"
-          @click="toggleNotificationFilter('likes')"
-        >
-          <span
-            class="menu-checkbox"
-            :class="{ 'menu-checkbox-checked': filters.likes }"
-          />{{ $t('settings.notification_visibility_likes') }}
-        </button>
-        <button
-          class="button-default dropdown-item"
-          @click="toggleNotificationFilter('repeats')"
-        >
-          <span
-            class="menu-checkbox"
-            :class="{ 'menu-checkbox-checked': filters.repeats }"
-          />{{ $t('settings.notification_visibility_repeats') }}
-        </button>
-        <button
-          class="button-default dropdown-item"
-          @click="toggleNotificationFilter('follows')"
-        >
-          <span
-            class="menu-checkbox"
-            :class="{ 'menu-checkbox-checked': filters.follows }"
-          />{{ $t('settings.notification_visibility_follows') }}
-        </button>
-        <button
-          class="button-default dropdown-item"
-          @click="toggleNotificationFilter('mentions')"
-        >
-          <span
-            class="menu-checkbox"
-            :class="{ 'menu-checkbox-checked': filters.mentions }"
-          />{{ $t('settings.notification_visibility_mentions') }}
-        </button>
-        <button
-          class="button-default dropdown-item"
-          @click="toggleNotificationFilter('emojiReactions')"
-        >
-          <span
-            class="menu-checkbox"
-            :class="{ 'menu-checkbox-checked': filters.emojiReactions }"
-          />{{ $t('settings.notification_visibility_emoji_reactions') }}
-        </button>
-        <button
-          class="button-default dropdown-item"
-          @click="toggleNotificationFilter('moves')"
-        >
-          <span
-            class="menu-checkbox"
-            :class="{ 'menu-checkbox-checked': filters.moves }"
-          />{{ $t('settings.notification_visibility_moves') }}
-        </button>
-        <button
-          class="button-default dropdown-item"
-          @click="toggleNotificationFilter('polls')"
-        >
-          <span
-            class="menu-checkbox"
-            :class="{ 'menu-checkbox-checked': filters.polls }"
-          />{{ $t('settings.notification_visibility_polls') }}
-        </button>
+        <div class="menu-item dropdown-item -icon">
+          <button
+            class="main-button"
+            @click="toggleNotificationFilter('likes')"
+          >
+            <span
+              class="input menu-checkbox"
+              :class="{ 'menu-checkbox-checked': filters.likes }"
+            />{{ $t('settings.notification_visibility_likes') }}
+          </button>
+        </div>
+        <div class="menu-item dropdown-item -icon">
+          <button
+            class="main-button"
+            @click="toggleNotificationFilter('repeats')"
+          >
+            <span
+              class="input menu-checkbox"
+              :class="{ 'menu-checkbox-checked': filters.repeats }"
+            />{{ $t('settings.notification_visibility_repeats') }}
+          </button>
+        </div>
+        <div class="menu-item dropdown-item -icon">
+          <button
+            class="main-button"
+            @click="toggleNotificationFilter('follows')"
+          >
+            <span
+              class="input menu-checkbox"
+              :class="{ 'menu-checkbox-checked': filters.follows }"
+            />{{ $t('settings.notification_visibility_follows') }}
+          </button>
+        </div>
+        <div class="menu-item dropdown-item -icon">
+          <button
+            class="main-button"
+            @click="toggleNotificationFilter('mentions')"
+          >
+            <span
+              class="input menu-checkbox"
+              :class="{ 'menu-checkbox-checked': filters.mentions }"
+            />{{ $t('settings.notification_visibility_mentions') }}
+          </button>
+        </div>
+        <div class="menu-item dropdown-item -icon">
+          <button
+            class="main-button"
+            @click="toggleNotificationFilter('statuses')"
+          >
+            <span
+              class="input menu-checkbox"
+              :class="{ 'menu-checkbox-checked': filters.statuses }"
+            />{{ $t('settings.notification_visibility_statuses') }}
+          </button>
+        </div>
+        <div class="menu-item dropdown-item -icon">
+          <button
+            class="main-button"
+            @click="toggleNotificationFilter('emojiReactions')"
+          >
+            <span
+              class="input menu-checkbox"
+              :class="{ 'menu-checkbox-checked': filters.emojiReactions }"
+            />{{ $t('settings.notification_visibility_emoji_reactions') }}
+          </button>
+        </div>
+        <div class="menu-item dropdown-item -icon">
+          <button
+            class="main-button"
+            @click="toggleNotificationFilter('moves')"
+          >
+            <span
+              class="input menu-checkbox"
+              :class="{ 'menu-checkbox-checked': filters.moves }"
+            />{{ $t('settings.notification_visibility_moves') }}
+          </button>
+        </div>
+        <div class="menu-item dropdown-item -icon">
+          <button
+            class="main-button"
+            @click="toggleNotificationFilter('polls')"
+          >
+            <span
+              class="input menu-checkbox"
+              :class="{ 'menu-checkbox-checked': filters.polls }"
+            />{{ $t('settings.notification_visibility_polls') }}
+          </button>
+        </div>
       </div>
     </template>
     <template #trigger>
diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index 65f1238b9..a90d4c261 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -2,12 +2,15 @@ import { computed } from 'vue'
 import { mapGetters } from 'vuex'
 import { mapState } from 'pinia'
 import Notification from '../notification/notification.vue'
+import ExtraNotifications from '../extra_notifications/extra_notifications.vue'
 import NotificationFilters from './notification_filters.vue'
 import notificationsFetcher from '../../services/notifications_fetcher/notifications_fetcher.service.js'
 import {
   notificationsFromStore,
   filteredNotificationsFromStore,
-  unseenNotificationsFromStore
+  unseenNotificationsFromStore,
+  countExtraNotifications,
+  ACTIONABLE_NOTIFICATION_TYPES
 } from '../../services/notification_utils/notification_utils.js'
 import FaviconService from '../../services/favicon_service/favicon_service.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
@@ -26,14 +29,20 @@ const DEFAULT_SEEN_TO_DISPLAY_COUNT = 30
 const Notifications = {
   components: {
     Notification,
-    NotificationFilters
+    NotificationFilters,
+    ExtraNotifications
   },
   props: {
     // Disables panel styles, unread mark, potentially other notification-related actions
     // meant for "Interactions" timeline
     minimalMode: Boolean,
-    // Custom filter mode, an array of strings, possible values 'mention', 'repeat', 'like', 'follow', used to override global filter for use in "Interactions" timeline
+    // Custom filter mode, an array of strings, possible values 'mention', 'status', 'repeat', 'like', 'follow', used to override global filter for use in "Interactions" timeline
     filterMode: Array,
+    // Do not show extra notifications
+    noExtra: {
+      type: Boolean,
+      default: false
+    },
     // Disable teleporting (i.e. for /users/user/notifications)
     disableTeleport: Boolean
   },
@@ -60,22 +69,36 @@ const Notifications = {
       return notificationsFromStore(this.$store)
     },
     error () {
-      return this.$store.state.statuses.notifications.error
+      return this.$store.state.notifications.error
     },
     unseenNotifications () {
       return unseenNotificationsFromStore(this.$store)
     },
     filteredNotifications () {
-      return filteredNotificationsFromStore(this.$store, this.filterMode)
+      if (this.unseenAtTop) {
+        return [
+          ...filteredNotificationsFromStore(this.$store).filter(n => this.shouldShowUnseen(n)),
+          ...filteredNotificationsFromStore(this.$store).filter(n => !this.shouldShowUnseen(n))
+        ]
+      } else {
+        return filteredNotificationsFromStore(this.$store, this.filterMode)
+      }
+    },
+    unseenCountBadgeText () {
+      return `${this.unseenCount ? this.unseenCount : ''}${this.extraNotificationsCount ? '*' : ''}`
     },
     unseenCount () {
       return this.unseenNotifications.length
     },
+    ignoreInactionableSeen () { return this.$store.getters.mergedConfig.ignoreInactionableSeen },
+    extraNotificationsCount () {
+      return countExtraNotifications(this.$store)
+    },
     unseenCountTitle () {
-      return this.unseenCount + (this.unreadChatCount) + this.unreadAnnouncementCount
+      return this.unseenNotifications.length + (this.unreadChatCount) + this.unreadAnnouncementCount
     },
     loading () {
-      return this.$store.state.statuses.notifications.loading
+      return this.$store.state.notifications.loading
     },
     noHeading () {
       const { layoutType } = useInterfaceStore()
@@ -97,6 +120,10 @@ const Notifications = {
       return this.filteredNotifications.slice(0, this.unseenCount + this.seenToDisplayCount)
     },
     noSticky () { return this.$store.getters.mergedConfig.disableStickyHeaders },
+    unseenAtTop () { return this.$store.getters.mergedConfig.unseenAtTop },
+    showExtraNotifications () {
+      return !this.noExtra
+    },
     ...mapState(useAnnouncementsStore, ['unreadAnnouncementCount']),
     ...mapGetters(['unreadChatCount'])
   },
@@ -141,11 +168,28 @@ const Notifications = {
     scrollToTop () {
       const scrollable = this.scrollerRef
       scrollable.scrollTo({ top: this.$refs.root.offsetTop })
-      // this.$refs.root.scrollIntoView({ behavior: 'smooth', block: 'start' })
     },
     updateScrollPosition () {
       this.showScrollTop = this.$refs.root.offsetTop < this.scrollerRef.scrollTop
     },
+    shouldShowUnseen (notification) {
+      if (notification.seen) return false
+
+      const actionable = ACTIONABLE_NOTIFICATION_TYPES.has(notification.type)
+      return this.ignoreInactionableSeen ? actionable : true
+    },
+    /* "Interacted" really refers to "actionable" notifications that require user input,
+     * everything else (likes/repeats/reacts) cannot be acted and therefore we just clear
+     * the "seen" status upon any clicks on them
+     */
+    notificationClicked (notification) {
+      const { id } = notification
+      this.$store.dispatch('notificationClicked', { id })
+    },
+    notificationInteracted (notification) {
+      const { id } = notification
+      this.$store.dispatch('markSingleNotificationAsSeen', { id })
+    },
     markAsSeen () {
       this.$store.dispatch('markNotificationsAsSeen')
       this.seenToDisplayCount = DEFAULT_SEEN_TO_DISPLAY_COUNT
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 61f7317e2..cfc1f3d67 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -1,5 +1,3 @@
-@import "../../variables";
-
 .Notifications {
   &:not(.minimal) {
     // a bit of a hack to allow scrolling below notifications
@@ -7,8 +5,7 @@
   }
 
   .loadmore-error {
-    color: $fallback--text;
-    color: var(--text, $fallback--text);
+    color: var(--text);
   }
 
   .notification {
@@ -25,7 +22,7 @@
 
     &.unseen {
       .notification-overlay {
-        background-image: linear-gradient(135deg, var(--badgeNotification, $fallback--cRed) 4px, transparent 10px);
+        background-image: linear-gradient(135deg, var(--badgeNotification) 4px, transparent 10px);
       }
     }
   }
@@ -35,6 +32,11 @@
 .notification {
   box-sizing: border-box;
 
+  /* TODO cleanup this */
+  .Status {
+    flex: 1;
+  }
+
   &:hover .animated.Avatar {
     canvas {
       display: none;
@@ -60,24 +62,17 @@
       width: 32px;
       height: 32px;
     }
-
-    .faint {
-      --link: var(--faintLink);
-      --text: var(--faint);
-    }
   }
 
   .follow-request-accept {
     &:hover {
-      color: $fallback--text;
-      color: var(--text, $fallback--text);
+      color: var(--text);
     }
   }
 
   .follow-request-reject {
     &:hover {
-      color: $fallback--cRed;
-      color: var(--cRed, $fallback--cRed);
+      color: var(--cRed);
     }
   }
 
@@ -97,11 +92,6 @@
     }
   }
 
-  /* TODO cleanup this */
-  .Status {
-    flex: 1;
-  }
-
   time {
     white-space: nowrap;
   }
@@ -136,6 +126,7 @@
 
   .emoji-reaction-emoji-image {
     vertical-align: middle;
+    object-fit: contain;
   }
 
   .notification-details {
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 633efca6b..387c3a847 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -14,13 +14,13 @@
           v-if="!noHeading"
           class="notifications-heading panel-heading -sticky"
         >
-          <div class="title">
+          <h1 class="title">
             {{ $t('notifications.notifications') }}
             <span
-              v-if="unseenCount"
-              class="badge badge-notification unseen-count"
-            >{{ unseenCount }}</span>
-          </div>
+              v-if="unseenCountBadgeText"
+              class="badge -notification unseen-count"
+            >{{ unseenCountBadgeText }}</span>
+          </h1>
           <div
             v-if="showScrollTop"
             class="rightside-button"
@@ -54,15 +54,26 @@
           class="panel-body"
           role="feed"
         >
+          <div
+            v-if="showExtraNotifications"
+            role="listitem"
+            class="notification"
+          >
+            <extra-notifications />
+          </div>
           <div
             v-for="notification in notificationsToDisplay"
             :key="notification.id"
             role="listitem"
             class="notification"
-            :class="{unseen: !minimalMode && !notification.seen}"
+            :class="{unseen: !minimalMode && shouldShowUnseen(notification)}"
+            @click="e => notificationClicked(notification)"
           >
             <div class="notification-overlay" />
-            <notification :notification="notification" />
+            <notification
+              :notification="notification"
+              @interacted="e => notificationInteracted(notification)"
+            />
           </div>
         </div>
         <div class="panel-footer">
@@ -74,7 +85,7 @@
           </div>
           <button
             v-else-if="!loading"
-            class="button-unstyled -link -fullwidth"
+            class="button-unstyled -link text-center"
             @click.prevent="fetchOlderNotifications()"
           >
             <div class="new-status-notification text-center">
diff --git a/src/components/opacity_input/opacity_input.vue b/src/components/opacity_input/opacity_input.vue
index 15d08e04a..4dc5c810c 100644
--- a/src/components/opacity_input/opacity_input.vue
+++ b/src/components/opacity_input/opacity_input.vue
@@ -6,8 +6,9 @@
     <label
       :for="name"
       class="label"
+      :class="{ faint: !present || disabled }"
     >
-      {{ $t('settings.style.common.opacity') }}
+      {{ label }}
     </label>
     <Checkbox
       v-if="typeof fallback !== 'undefined'"
@@ -18,10 +19,11 @@
     />
     <input
       :id="name"
-      class="input-number"
+      class="input input-number"
       type="number"
       :value="modelValue || fallback"
       :disabled="!present || disabled"
+      :class="{ disabled: !present || disabled }"
       max="1"
       min="0"
       step=".05"
@@ -37,7 +39,7 @@ export default {
     Checkbox
   },
   props: [
-    'name', 'modelValue', 'fallback', 'disabled'
+    'name', 'label', 'modelValue', 'fallback', 'disabled'
   ],
   emits: ['update:modelValue'],
   computed: {
diff --git a/src/components/palette_editor/palette_editor.vue b/src/components/palette_editor/palette_editor.vue
new file mode 100644
index 000000000..f634e63f7
--- /dev/null
+++ b/src/components/palette_editor/palette_editor.vue
@@ -0,0 +1,195 @@
+<template>
+  <div
+    class="PaletteEditor"
+    :class="{ '-compact': compact, '-apply': apply }"
+  >
+    <ColorInput
+      v-for="key in paletteKeys"
+      :key="key"
+      :name="key"
+      :model-value="props.modelValue[key]"
+      :fallback="fallback(key)"
+      :label="$t('settings.style.themes3.palette.' + key)"
+      @update:modelValue="value => updatePalette(key, value)"
+    />
+    <button
+      class="btn button-default palette-import-button"
+      @click="importPalette"
+    >
+      <FAIcon icon="file-import" />
+      {{ $t('settings.style.themes3.palette.import') }}
+    </button>
+    <button
+      class="btn button-default palette-export-button"
+      @click="exportPalette"
+    >
+      <FAIcon icon="file-export" />
+      {{ $t('settings.style.themes3.palette.export') }}
+    </button>
+    <button
+      v-if="apply"
+      class="btn button-default palette-apply-button"
+      :disabled="disabled"
+      :class="{ disabled }"
+      @click="applyPalette"
+    >
+      {{ $t('settings.style.themes3.palette.apply') }}
+    </button>
+  </div>
+</template>
+
+<script setup>
+import ColorInput from 'src/components/color_input/color_input.vue'
+import {
+  newImporter,
+  newExporter
+} from 'src/services/export_import/export_import.js'
+
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faFileImport,
+  faFileExport
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faFileImport,
+  faFileExport
+)
+
+const paletteKeys = [
+  'bg',
+  'fg',
+  'text',
+  'link',
+  'accent',
+  'cRed',
+  'cBlue',
+  'cGreen',
+  'cOrange',
+  'wallpaper'
+]
+
+const props = defineProps(['modelValue', 'compact', 'apply', 'disabled'])
+const emit = defineEmits(['update:modelValue', 'applyPalette'])
+const getExportedObject = () => paletteKeys.reduce((acc, key) => {
+  const value = props.modelValue[key]
+  if (value == null) {
+    return acc
+  } else {
+    return { ...acc, [key]: props.modelValue[key] }
+  }
+}, {})
+
+const paletteExporter = newExporter({
+  filename: 'pleroma_palette',
+  extension: 'json',
+  getExportedObject
+})
+const paletteImporter = newImporter({
+  accept: '.json',
+  onImport (parsed, filename) {
+    emit('update:modelValue', parsed)
+  }
+})
+
+const exportPalette = () => {
+  paletteExporter.exportData()
+}
+
+const importPalette = () => {
+  paletteImporter.importData()
+}
+
+const applyPalette = (data) => {
+  emit('applyPalette', getExportedObject())
+}
+
+const fallback = (key) => {
+  if (key === 'accent') {
+    return props.modelValue.link
+  }
+  if (key === 'link') {
+    return props.modelValue.accent
+  }
+  if (key.startsWith('extra')) {
+    return '#FF00FF'
+  }
+  if (key.startsWith('wallpaper')) {
+    return '#008080'
+  }
+}
+
+const updatePalette = (paletteKey, value) => {
+  emit('update:modelValue', {
+    ...props.modelValue,
+    [paletteKey]: value
+  })
+}
+</script>
+
+<style lang="scss">
+.PaletteEditor {
+  display: grid;
+  justify-content: space-around;
+  grid-template-columns: repeat(4, 1fr);
+  grid-template-rows: repeat(5, 1fr) auto;
+  grid-gap: 0.5em;
+  align-items: baseline;
+
+  .palette-import-button {
+    grid-column: 1 / span 2;
+  }
+
+  .palette-export-button {
+    grid-column: 3 / span 2;
+  }
+
+  .palette-apply-button {
+    grid-column: 1 / span 2;
+  }
+
+  .color-input.style-control {
+    margin: 0;
+  }
+
+  &.-compact {
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(5, 1fr) auto;
+
+    .palette-import-button {
+      grid-column: 1;
+    }
+
+    .palette-export-button {
+      grid-column: 2;
+    }
+
+    &.-apply {
+      grid-template-rows: repeat(5, 1fr) auto auto;
+
+      .palette-apply-button {
+        grid-column: 1 / span 2;
+      }
+    }
+
+    .-mobile & {
+      grid-template-columns: 1fr;
+      grid-template-rows: repeat(10, 1fr) auto;
+
+      .palette-import-button {
+        grid-column: 1;
+      }
+
+      .palette-export-button {
+        grid-column: 1;
+      }
+
+      &.-apply {
+        .palette-apply-button {
+          grid-column: 1;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/panel.style.js b/src/components/panel.style.js
new file mode 100644
index 000000000..a017a52bc
--- /dev/null
+++ b/src/components/panel.style.js
@@ -0,0 +1,59 @@
+export default {
+  name: 'Panel',
+  selector: '.panel',
+  validInnerComponents: [
+    'Text',
+    'Link',
+    'Icon',
+    'Border',
+    'Button',
+    'ButtonUnstyled',
+    'Input',
+    'PanelHeader',
+    'MenuItem',
+    'Post',
+    'Notification',
+    'Alert',
+    'UserCard',
+    'Chat',
+    'Attachment',
+    'Tab',
+    'ListItem'
+  ],
+  validInnerComponentsLite: [
+    'Text',
+    'Link',
+    'Icon',
+    'Border',
+    'Button',
+    'Input',
+    'PanelHeader',
+    'Alert'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        backgroundNoCssColor: 'yes',
+        background: '--bg',
+        roundness: 3,
+        blur: '5px',
+        shadow: [{
+          x: 0,
+          y: 0,
+          blur: 3,
+          spread: 0,
+          color: '#000000',
+          alpha: 0.5
+        },
+        {
+          x: 0,
+          y: 4,
+          blur: 6,
+          spread: 3,
+          color: '#000000',
+          alpha: 0.3
+        }]
+      }
+    }
+  ]
+}
diff --git a/src/components/panel_header.style.js b/src/components/panel_header.style.js
new file mode 100644
index 000000000..226ff9e16
--- /dev/null
+++ b/src/components/panel_header.style.js
@@ -0,0 +1,40 @@
+export default {
+  name: 'PanelHeader',
+  selector: '.panel-heading',
+  validInnerComponents: [
+    'Text',
+    'Link',
+    'Icon',
+    'Button',
+    'ButtonUnstyled',
+    'Badge',
+    'Alert',
+    'Avatar'
+  ],
+  defaultRules: [
+    {
+      component: 'PanelHeader',
+      directives: {
+        backgroundNoCssColor: 'yes',
+        background: '--fg',
+        shadow: [{
+          x: 0,
+          y: 1,
+          blur: 3,
+          spread: 0,
+          color: '#000000',
+          alpha: 0.4
+        },
+        {
+          x: 0,
+          y: 1,
+          blur: 0,
+          spread: 0,
+          color: '#ffffff',
+          alpha: 0.2,
+          inset: true
+        }]
+      }
+    }
+  ]
+}
diff --git a/src/components/panel_loading/panel_loading.vue b/src/components/panel_loading/panel_loading.vue
index 17458e49a..7a8321220 100644
--- a/src/components/panel_loading/panel_loading.vue
+++ b/src/components/panel_loading/panel_loading.vue
@@ -23,22 +23,18 @@ export default {}
 </script>
 
 <style lang="scss">
-@import "src/variables";
-
 .panel-loading {
   display: flex;
   height: 100%;
   align-items: center;
   justify-content: center;
   font-size: 2em;
-  color: $fallback--text;
-  color: var(--text, $fallback--text);
+  color: var(--text);
 
   .loading-text svg {
     line-height: 0;
     vertical-align: middle;
-    color: $fallback--text;
-    color: var(--text, $fallback--text);
+    color: var(--text);
   }
 }
 </style>
diff --git a/src/components/password_reset/password_reset.vue b/src/components/password_reset/password_reset.vue
index d6e10250b..5392f487b 100644
--- a/src/components/password_reset/password_reset.vue
+++ b/src/components/password_reset/password_reset.vue
@@ -1,7 +1,9 @@
 <template>
   <div class="settings panel panel-default">
     <div class="panel-heading">
-      {{ $t('password_reset.password_reset') }}
+      <h1 class="title">
+        {{ $t('password_reset.password_reset') }}
+      </h1>
     </div>
     <div class="panel-body">
       <form
@@ -30,7 +32,7 @@
           <div v-else>
             <p
               v-if="passwordResetRequested"
-              class="password-reset-required error"
+              class="alert password-reset-required error"
             >
               {{ $t('password_reset.password_reset_required') }}
             </p>
@@ -43,7 +45,7 @@
                 v-model="user.email"
                 :disabled="isPending"
                 :placeholder="$t('password_reset.placeholder')"
-                class="form-control"
+                class="input form-control"
                 type="input"
               >
             </div>
@@ -77,8 +79,6 @@
 
 <script src="./password_reset.js"></script>
 <style lang="scss">
-@import "../../variables";
-
 .password-reset-form {
   display: flex;
   flex-direction: column;
@@ -117,11 +117,6 @@
     margin: 0.3em 0 1em;
   }
 
-  .password-reset-required {
-    background-color: var(--alertError, $fallback--alertError);
-    padding: 10px 0;
-  }
-
   .notice-dismissible {
     padding-right: 2rem;
   }
diff --git a/src/components/pinch_zoom/pinch_zoom.vue b/src/components/pinch_zoom/pinch_zoom.vue
index 18d697197..6b6a0fa5b 100644
--- a/src/components/pinch_zoom/pinch_zoom.vue
+++ b/src/components/pinch_zoom/pinch_zoom.vue
@@ -2,7 +2,6 @@
   <pinch-zoom
     class="pinch-zoom-parent"
     v-bind="$attrs"
-    v-on="$listeners"
   >
     <slot />
   </pinch-zoom>
diff --git a/src/components/poll/poll.js b/src/components/poll/poll.js
index 79f90e480..b543371b4 100644
--- a/src/components/poll/poll.js
+++ b/src/components/poll/poll.js
@@ -1,4 +1,5 @@
 import Timeago from 'components/timeago/timeago.vue'
+import genRandomSeed from '../../services/random_seed/random_seed.service.js'
 import RichContent from 'components/rich_content/rich_content.jsx'
 import { forEach, map } from 'lodash'
 import { usePollsStore } from '../../stores/polls'
@@ -14,7 +15,7 @@ export default {
     return {
       loading: false,
       choices: [],
-      randomSeed: `${Math.random()}`.replace('.', '-')
+      randomSeed: genRandomSeed()
     }
   },
   created () {
@@ -38,7 +39,7 @@ export default {
       return (this.poll && this.poll.options) || []
     },
     expiresAt () {
-      return (this.poll && this.poll.expires_at) || 0
+      return (this.poll && this.poll.expires_at) || null
     },
     expired () {
       return (this.poll && this.poll.expired) || false
diff --git a/src/components/poll/poll.vue b/src/components/poll/poll.vue
index b3a74c493..faaba9921 100644
--- a/src/components/poll/poll.vue
+++ b/src/components/poll/poll.vue
@@ -37,12 +37,14 @@
           :role="poll.multiple ? 'checkbox' : 'radio'"
           :aria-labelledby="`option-vote-${randomSeed}-${index}`"
           :aria-checked="choices[index]"
+          class="input unstyled"
           @click="activateOption(index)"
         >
+          <!-- TODO: USE CHECKBOX -->
           <input
             v-if="poll.multiple"
             type="checkbox"
-            class="poll-checkbox"
+            class="input -checkbox poll-checkbox"
             :disabled="loading"
             :value="index"
           >
@@ -51,6 +53,7 @@
             type="radio"
             :disabled="loading"
             :value="index"
+            class="input -radio"
           >
           <label class="option-vote">
             <RichContent
@@ -73,15 +76,25 @@
       >
         {{ $t('polls.vote') }}
       </button>
+      <span
+        v-if="poll.pleroma?.non_anonymous"
+        :title="$t('polls.non_anonymous_title')"
+      >
+        {{ $t('polls.non_anonymous') }}
+        &nbsp;·&nbsp;
+      </span>
       <div class="total">
         <template v-if="typeof poll.voters_count === 'number'">
-          {{ $tc("polls.people_voted_count", poll.voters_count, { count: poll.voters_count }) }}&nbsp;·&nbsp;
+          {{ $t("polls.people_voted_count", { count: poll.voters_count }, poll.voters_count) }}
         </template>
         <template v-else>
-          {{ $tc("polls.votes_count", poll.votes_count, { count: poll.votes_count }) }}&nbsp;·&nbsp;
+          {{ $t("polls.votes_count", { count: poll.votes_count }, poll.votes_count) }}
         </template>
+        <span v-if="expiresAt !== null">
+          &nbsp;·&nbsp;
+        </span>
       </div>
-      <span>
+      <span v-if="expiresAt !== null">
         <i18n-t
           scope="global"
           :keypath="expired ? 'polls.expired' : 'polls.expires_in'"
@@ -100,8 +113,6 @@
 <script src="./poll.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .poll {
   .votes {
     display: flex;
@@ -111,6 +122,10 @@
 
   .poll-option {
     margin: 0.75em 0.5em;
+
+    .input {
+      line-height: inherit;
+    }
   }
 
   .option-result {
@@ -118,8 +133,7 @@
     display: flex;
     flex-direction: row;
     position: relative;
-    color: $fallback--lightText;
-    color: var(--lightText, $fallback--lightText);
+    color: var(--textLight);
   }
 
   .option-result-label {
@@ -138,12 +152,7 @@
   .result-fill {
     height: 100%;
     position: absolute;
-    color: $fallback--text;
-    color: var(--pollText, $fallback--text);
-    background-color: $fallback--lightBg;
-    background-color: var(--poll, $fallback--lightBg);
-    border-radius: $fallback--panelRadius;
-    border-radius: var(--panelRadius, $fallback--panelRadius);
+    border-radius: var(--roundness);
     top: 0;
     left: 0;
     transition: width 0.5s;
diff --git a/src/components/poll/poll_form.js b/src/components/poll/poll_form.js
index a20701553..29ccbc4bf 100644
--- a/src/components/poll/poll_form.js
+++ b/src/components/poll/poll_form.js
@@ -1,5 +1,5 @@
 import * as DateUtils from 'src/services/date_utils/date_utils.js'
-import { uniq } from 'lodash'
+import { pollFallback } from 'src/services/poll/poll.service.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import Select from '../select/select.vue'
 import {
@@ -17,14 +17,33 @@ export default {
     Select
   },
   name: 'PollForm',
-  props: ['visible'],
-  data: () => ({
-    pollType: 'single',
-    options: ['', ''],
-    expiryAmount: 10,
-    expiryUnit: 'minutes'
-  }),
+  props: {
+    visible: {},
+    params: {
+      type: Object,
+      required: true
+    }
+  },
   computed: {
+    pollType: {
+      get () { return pollFallback(this.params, 'pollType') },
+      set (newVal) { this.params.pollType = newVal }
+    },
+    options () {
+      const hasOptions = !!this.params.options
+      if (!hasOptions) {
+        this.params.options = pollFallback(this.params, 'options')
+      }
+      return this.params.options
+    },
+    expiryAmount: {
+      get () { return pollFallback(this.params, 'expiryAmount') },
+      set (newVal) { this.params.expiryAmount = newVal }
+    },
+    expiryUnit: {
+      get () { return pollFallback(this.params, 'expiryUnit') },
+      set (newVal) { this.params.expiryUnit = newVal }
+    },
     pollLimits () {
       return this.$store.state.instance.pollLimits
     },
@@ -89,7 +108,6 @@ export default {
     deleteOption (index, event) {
       if (this.options.length > 2) {
         this.options.splice(index, 1)
-        this.updatePollToParent()
       }
     },
     convertExpiryToUnit (unit, amount) {
@@ -104,24 +122,6 @@ export default {
         Math.max(this.minExpirationInCurrentUnit, this.expiryAmount)
       this.expiryAmount =
         Math.min(this.maxExpirationInCurrentUnit, this.expiryAmount)
-      this.updatePollToParent()
-    },
-    updatePollToParent () {
-      const expiresIn = this.convertExpiryFromUnit(
-        this.expiryUnit,
-        this.expiryAmount
-      )
-
-      const options = uniq(this.options.filter(option => option !== ''))
-      if (options.length < 2) {
-        this.$emit('update-poll', { error: this.$t('polls.not_enough_options') })
-        return
-      }
-      this.$emit('update-poll', {
-        options,
-        multiple: this.pollType === 'multiple',
-        expiresIn
-      })
     }
   }
 }
diff --git a/src/components/poll/poll_form.vue b/src/components/poll/poll_form.vue
index 09d411ca3..e5ca9cefe 100644
--- a/src/components/poll/poll_form.vue
+++ b/src/components/poll/poll_form.vue
@@ -13,7 +13,7 @@
           :id="`poll-${index}`"
           v-model="options[index]"
           size="1"
-          class="poll-option-input"
+          class="input poll-option-input"
           type="text"
           :placeholder="$t('polls.option')"
           :maxlength="maxLength"
@@ -67,7 +67,7 @@
         <input
           v-model="expiryAmount"
           type="number"
-          class="expiry-amount hide-number-spinner"
+          class="input expiry-amount hide-number-spinner"
           :min="minExpirationInCurrentUnit"
           :max="maxExpirationInCurrentUnit"
           @change="expiryAmountChange"
@@ -84,7 +84,7 @@
             :key="unit"
             :value="unit"
           >
-            {{ $tc(`time.unit.${unit}_short`, expiryAmount, ['']) }}
+            {{ $t(`time.unit.${unit}_short`, [''], expiryAmount) }}
           </option>
         </Select>
       </div>
@@ -95,8 +95,6 @@
 <script src="./poll_form.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .poll-form {
   display: flex;
   flex-direction: column;
diff --git a/src/components/poll/poll_graph.style.js b/src/components/poll/poll_graph.style.js
new file mode 100644
index 000000000..247a266a2
--- /dev/null
+++ b/src/components/poll/poll_graph.style.js
@@ -0,0 +1,12 @@
+export default {
+  name: 'PollGraph',
+  selector: '.result-fill',
+  defaultRules: [
+    {
+      directives: {
+        background: '--accent',
+        opacity: 0.5
+      }
+    }
+  ]
+}
diff --git a/src/components/popover.style.js b/src/components/popover.style.js
new file mode 100644
index 000000000..0197271b9
--- /dev/null
+++ b/src/components/popover.style.js
@@ -0,0 +1,36 @@
+export default {
+  name: 'Popover',
+  selector: '.popover',
+  lazy: true,
+  variants: {
+    modal: '.modal'
+  },
+  validInnerComponents: [
+    'Text',
+    'Link',
+    'Icon',
+    'Border',
+    'Button',
+    'ButtonUnstyled',
+    'Input',
+    'MenuItem',
+    'Post',
+    'UserCard'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        background: '--bg',
+        blur: '10px',
+        shadow: [{
+          x: 2,
+          y: 2,
+          blur: 3,
+          spread: 0,
+          color: '#000000',
+          alpha: 0.5
+        }]
+      }
+    }
+  ]
+}
diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index d44b266bb..242068109 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -45,12 +45,19 @@ const Popover = {
     // Lets hover popover stay when clicking inside of it
     stayOnClick: Boolean,
 
+    // Use styled button (to avoid nested buttons)
+    normalButton: Boolean,
+
     triggerAttrs: {
       type: Object,
       default: {}
     }
   },
-  inject: ['popoversZLayer'], // override popover z layer
+  inject: { // override popover z layer
+    popoversZLayer: {
+      default: ''
+    }
+  },
   data () {
     return {
       // lockReEntry is a flag that is set when mouse cursor is leaving the popover's content
@@ -190,8 +197,8 @@ const Popover = {
         // Default to whatever user wished with placement prop
         let usingTop = this.placement !== 'bottom'
 
-        // Handle special cases, first force to displaying on top if there's not space on bottom,
-        // regardless of what placement value was. Then check if there's not space on top, and
+        // Handle special cases, first force to displaying on top if there's no space on bottom,
+        // regardless of what placement value was. Then check if there's no space on top, and
         // force to bottom, again regardless of what placement value was.
         const topBoundary = origin.y - anchorHeight * 0.5 + (this.removePadding ? topPadding : 0)
         const bottomBoundary = origin.y + anchorHeight * 0.5 - (this.removePadding ? bottomPadding : 0)
@@ -207,20 +214,20 @@ const Popover = {
         translateX = origin.x + horizOffset + xOffset
       } else {
         // Default to whatever user wished with placement prop
-        let usingRight = this.placement !== 'left'
+        let usingLeft = this.placement !== 'right'
 
-        // Handle special cases, first force to displaying on top if there's not space on bottom,
-        // regardless of what placement value was. Then check if there's not space on top, and
-        // force to bottom, again regardless of what placement value was.
-        const rightBoundary = origin.x - anchorWidth * 0.5 + (this.removePadding ? rightPadding : 0)
-        const leftBoundary = origin.x + anchorWidth * 0.5 - (this.removePadding ? leftPadding : 0)
-        if (leftBoundary + content.offsetWidth > xBounds.max) usingRight = true
-        if (rightBoundary - content.offsetWidth < xBounds.min) usingRight = false
+        // Handle special cases, first force to displaying on left if there's no space on right,
+        // regardless of what placement value was. Then check if there's no space on right, and
+        // force to left, again regardless of what placement value was.
+        const leftBoundary = origin.x - anchorWidth * 0.5 + (this.removePadding ? leftPadding : 0)
+        const rightBoundary = origin.x + anchorWidth * 0.5 - (this.removePadding ? rightPadding : 0)
+        if (rightBoundary + content.offsetWidth > xBounds.max) usingLeft = true
+        if (leftBoundary - content.offsetWidth < xBounds.min) usingLeft = false
 
         const xOffset = (this.offset && this.offset.x) || 0
-        translateX = usingRight
-          ? rightBoundary - xOffset - content.offsetWidth
-          : leftBoundary + xOffset
+        translateX = usingLeft
+          ? leftBoundary - xOffset - content.offsetWidth
+          : rightBoundary + xOffset
 
         const yOffset = (this.offset && this.offset.y) || 0
         translateY = origin.y + vertOffset + yOffset
@@ -268,6 +275,11 @@ const Popover = {
       this.scrollable.removeEventListener('scroll', this.onScroll)
       this.scrollable.removeEventListener('resize', this.onResize)
     },
+    resizePopover () {
+      setTimeout(() => {
+        this.updateStyles()
+      }, 1)
+    },
     onMouseenter (e) {
       if (this.trigger === 'hover') {
         this.lockReEntry = false
@@ -316,7 +328,12 @@ const Popover = {
       this.updateStyles()
     },
     onResize (e) {
-      this.updateStyles()
+      const content = this.$refs.content
+      if (!content) return
+      if (this.oldSize.width !== content.offsetWidth || this.oldSize.height !== content.offsetHeight) {
+        this.updateStyles()
+        this.oldSize = { width: content.offsetWidth, height: content.offsetHeight }
+      }
     },
     onChildPopoverState (childRef, state) {
       if (state) {
@@ -330,12 +347,7 @@ const Popover = {
     // Monitor changes to content size, update styles only when content sizes have changed,
     // that should be the only time we need to move the popover box if we don't care about scroll
     // or resize
-    const content = this.$refs.content
-    if (!content) return
-    if (this.oldSize.width !== content.offsetWidth || this.oldSize.height !== content.offsetHeight) {
-      this.updateStyles()
-      this.oldSize = { width: content.offsetWidth, height: content.offsetHeight }
-    }
+    this.onResize()
   },
   mounted () {
     this.teleport = true
diff --git a/src/components/popover/popover.scss b/src/components/popover/popover.scss
new file mode 100644
index 000000000..57a5250a7
--- /dev/null
+++ b/src/components/popover/popover.scss
@@ -0,0 +1,142 @@
+.popover-trigger-button {
+  display: inline-block;
+}
+
+.popover {
+  z-index: var(--ZI_popover_override, var(--ZI_popovers));
+  position: fixed;
+  min-width: 0;
+  max-width: calc(100vw - 20px);
+  box-shadow: var(--shadow);
+}
+
+.popover-default {
+  &::after {
+    content: "";
+    position: absolute;
+    top: -1px;
+    bottom: -1px;
+    left: -1px;
+    right: -1px;
+    z-index: -1px;
+    box-shadow: var(--shadow);
+    pointer-events: none;
+  }
+
+  border-radius: var(--roundness);
+  border-color: var(--border);
+  border-style: solid;
+  border-width: 1px;
+  background-color: var(--background);
+}
+
+.dropdown-menu {
+  display: block;
+  padding: 0;
+  font-size: 1em;
+  text-align: left;
+  list-style: none;
+  max-width: 100vw;
+  z-index: var(--ZI_popover_override, var(--ZI_popovers));
+  white-space: nowrap;
+  background-color: var(--background);
+
+  .dropdown-divider {
+    height: 0;
+    margin: 0.5rem 0;
+    overflow: hidden;
+    border-top: 1px solid var(--border);
+  }
+
+  .dropdown-item {
+    padding: 0;
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-auto-flow: column;
+    grid-auto-columns: auto;
+
+    .popover-wrapper {
+      box-sizing: border-box;
+      display: grid;
+      grid-template-columns: 1fr;
+    }
+
+    .extra-button {
+      border-left: 1px solid var(--icon);
+      padding-left: calc(var(--__horizontal-gap) - 1px);
+      border-right: var(--__horizontal-gap) solid transparent;
+      border-top: var(--__horizontal-gap) solid transparent;
+      border-bottom: var(--__horizontal-gap) solid transparent;
+    }
+
+    .main-button {
+      width: 100%;
+      padding: var(--__horizontal-gap) var(--__horizontal-gap);
+      grid-gap: var(--__horizontal-gap);
+      grid-template-columns: 1fr var(--__line-height);
+      grid-auto-flow: column;
+      grid-auto-columns: auto;
+
+      .menu-checkbox {
+        display: inline-block;
+        vertical-align: middle;
+        min-width: calc(var(--__line-height) + 1px);
+        max-width: calc(var(--__line-height) + 1px);
+        min-height: calc(var(--__line-height) + 1px);
+        max-height: calc(var(--__line-height) + 1px);
+        line-height: var(--__line-height);
+        text-align: center;
+        border-radius: 0;
+        box-shadow: var(--shadow);
+        margin-right: var(--__horizontal-gap);
+
+        &.menu-checkbox-checked::after {
+          font-size: 1.25em;
+          content: "✓";
+        }
+
+        &.-radio {
+          border-radius: 9999px;
+
+          &.menu-checkbox-checked::after {
+            font-size: 2em;
+            content: "•";
+          }
+        }
+      }
+    }
+
+    .main-button,
+    .extra-button {
+      display: grid;
+      box-sizing: border-box;
+      align-items: center;
+
+      &.disabled {
+        cursor: not-allowed;
+      }
+
+      &:not(.disabled) {
+        cursor: pointer;
+      }
+    }
+
+    &.-icon {
+      .main-button {
+        grid-template-columns: var(--__line-height) 1fr;
+      }
+    }
+
+    &.-icon-space {
+      .main-button {
+        padding-left: calc(var(--__line-height) + var(--__horizontal-gap) * 2);
+      }
+    }
+
+    &.-icon-double {
+      .main-button {
+        grid-template-columns: var(--__line-height) var(--__line-height) 1fr;
+      }
+    }
+  }
+}
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index fd0fd821c..f91abc3f0 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -1,11 +1,13 @@
 <template>
   <span
+    class="popover-wrapper"
     @mouseenter="onMouseenter"
     @mouseleave="onMouseleave"
   >
     <button
       ref="trigger"
-      class="button-unstyled popover-trigger-button"
+      class="popover-trigger-button"
+      :class="normalButton ? 'button-default btn' : 'button-unstyled'"
       type="button"
       v-bind="triggerAttrs"
       @click="onClick"
@@ -31,6 +33,7 @@
             name="content"
             class="popover-inner"
             :close="hidePopover"
+            :resize="resizePopover"
           />
         </div>
       </transition>
@@ -40,177 +43,4 @@
 
 <script src="./popover.js" />
 
-<style lang="scss">
-@import "../../variables";
-
-.popover-trigger-button {
-  display: inline-block;
-}
-
-.popover {
-  z-index: var(--ZI_popover_override, var(--ZI_popovers));
-  position: fixed;
-  min-width: 0;
-  max-width: calc(100vw - 20px);
-  box-shadow: 2px 2px 3px rgb(0 0 0 / 50%);
-  box-shadow: var(--popupShadow);
-}
-
-.popover-default {
-  &::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: 3;
-    box-shadow: 1px 1px 4px rgb(0 0 0 / 60%);
-    box-shadow: var(--panelShadow);
-    pointer-events: none;
-  }
-
-  border-radius: $fallback--btnRadius;
-  border-radius: var(--btnRadius, $fallback--btnRadius);
-  background-color: $fallback--bg;
-  background-color: var(--popover, $fallback--bg);
-  color: $fallback--text;
-  color: var(--popoverText, $fallback--text);
-
-  --faint: var(--popoverFaintText, $fallback--faint);
-  --faintLink: var(--popoverFaintLink, $fallback--faint);
-  --lightText: var(--popoverLightText, $fallback--lightText);
-  --postLink: var(--popoverPostLink, $fallback--link);
-  --postFaintLink: var(--popoverPostFaintLink, $fallback--link);
-  --icon: var(--popoverIcon, $fallback--icon);
-}
-
-.dropdown-menu {
-  display: block;
-  padding: 0.5rem 0;
-  font-size: 1em;
-  text-align: left;
-  list-style: none;
-  max-width: 100vw;
-  z-index: var(--ZI_popover_override, var(--ZI_popovers));
-  white-space: nowrap;
-
-  .dropdown-divider {
-    height: 0;
-    margin: 0.5rem 0;
-    overflow: hidden;
-    border-top: 1px solid $fallback--border;
-    border-top: 1px solid var(--border, $fallback--border);
-  }
-
-  .dropdown-item {
-    line-height: 21px;
-    overflow: hidden;
-    display: block;
-    padding: 0.5em 0.75em;
-    clear: both;
-    font-weight: 400;
-    text-align: inherit;
-    white-space: nowrap;
-    border: none;
-    border-radius: 0;
-    background-color: transparent;
-    box-shadow: none;
-    width: 100%;
-    height: 100%;
-    box-sizing: border-box;
-
-    --btnText: var(--popoverText, $fallback--text);
-
-    &-icon {
-      svg {
-        width: 22px;
-        margin-right: 0.75rem;
-        color: var(--menuPopoverIcon, $fallback--icon);
-      }
-    }
-
-    &.-has-submenu {
-      .chevron-icon {
-        margin-right: 0.25rem;
-        margin-left: 2rem;
-      }
-    }
-
-    &:active,
-    &:hover {
-      background-color: $fallback--lightBg;
-      background-color: var(--selectedMenuPopover, $fallback--lightBg);
-      box-shadow: none;
-
-      --btnText: var(--selectedMenuPopoverText, $fallback--link);
-      --faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
-      --faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
-      --lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
-      --icon: var(--selectedMenuPopoverIcon, $fallback--icon);
-
-      svg {
-        color: var(--selectedMenuPopoverIcon, $fallback--icon);
-
-        --icon: var(--selectedMenuPopoverIcon, $fallback--icon);
-      }
-    }
-
-    .menu-checkbox {
-      display: inline-block;
-      vertical-align: middle;
-      min-width: 22px;
-      max-width: 22px;
-      min-height: 22px;
-      max-height: 22px;
-      line-height: 22px;
-      text-align: center;
-      border-radius: 0;
-      background-color: $fallback--fg;
-      background-color: var(--input, $fallback--fg);
-      box-shadow: 0 0 2px black inset;
-      box-shadow: var(--inputShadow);
-      margin-right: 0.75em;
-
-      &.menu-checkbox-checked::after {
-        font-size: 1.25em;
-        content: "✓";
-      }
-
-      &.-radio {
-        border-radius: 9999px;
-
-        &.menu-checkbox-checked::after {
-          font-size: 2em;
-          content: "•";
-        }
-      }
-    }
-  }
-
-  .button-default.dropdown-item {
-    &,
-    i[class*="icon-"] {
-      color: $fallback--text;
-      color: var(--btnText, $fallback--text);
-    }
-
-    &:active {
-      background-color: $fallback--lightBg;
-      background-color: var(--selectedMenuPopover, $fallback--lightBg);
-      color: $fallback--link;
-      color: var(--selectedMenuPopoverText, $fallback--link);
-    }
-
-    &:disabled {
-      color: $fallback--text;
-      color: var(--btnDisabledText, $fallback--text);
-    }
-
-    &.toggled {
-      color: $fallback--text;
-      color: var(--btnToggledText, $fallback--text);
-    }
-  }
-}
-</style>
+<style src="./popover.scss" lang="scss"></style>
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 69eb21aff..c0fe31e9a 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -1,4 +1,5 @@
 import statusPoster from '../../services/status_poster/status_poster.service.js'
+import genRandomSeed from '../../services/random_seed/random_seed.service.js'
 import MediaUpload from '../media_upload/media_upload.vue'
 import ScopeSelector from '../scope_selector/scope_selector.vue'
 import EmojiInput from '../emoji_input/emoji_input.vue'
@@ -6,15 +7,18 @@ import PollForm from '../poll/poll_form.vue'
 import Attachment from '../attachment/attachment.vue'
 import Gallery from 'src/components/gallery/gallery.vue'
 import StatusContent from '../status_content/status_content.vue'
+import Popover from 'src/components/popover/popover.vue'
 import fileTypeService from '../../services/file_type/file_type.service.js'
 import { findOffset } from '../../services/offset_finder/offset_finder.service.js'
 import { propsToNative } from '../../services/attributes_helper/attributes_helper.service.js'
+import { pollFormToMasto } from 'src/services/poll/poll.service.js'
 import { reject, map, uniqBy, debounce } from 'lodash'
 import suggestor from '../emoji_input/suggestor.js'
 import { mapGetters } from 'vuex'
 import { mapState } from 'pinia'
 import Checkbox from '../checkbox/checkbox.vue'
 import Select from '../select/select.vue'
+import DraftCloser from 'src/components/draft_closer/draft_closer.vue'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -23,7 +27,10 @@ import {
   faUpload,
   faBan,
   faTimes,
-  faCircleNotch
+  faCircleNotch,
+  faChevronDown,
+  faChevronLeft,
+  faChevronRight
 } from '@fortawesome/free-solid-svg-icons'
 import { useInterfaceStore } from '../../stores/interface.js'
 
@@ -33,7 +40,10 @@ library.add(
   faUpload,
   faBan,
   faTimes,
-  faCircleNotch
+  faCircleNotch,
+  faChevronDown,
+  faChevronLeft,
+  faChevronRight
 )
 
 const buildMentionsString = ({ user, attentions = [] }, currentUser) => {
@@ -56,6 +66,18 @@ const pxStringToNumber = (str) => {
   return Number(str.substring(0, str.length - 2))
 }
 
+const typeAndRefId = ({ replyTo, profileMention, statusId }) => {
+  if (replyTo) {
+    return ['reply', replyTo]
+  } else if (profileMention) {
+    return ['mention', profileMention]
+  } else if (statusId) {
+    return ['edit', statusId]
+  } else {
+    return ['new', '']
+  }
+}
+
 const PostStatusForm = {
   props: [
     'statusId',
@@ -80,6 +102,9 @@ const PostStatusForm = {
     'disableSensitivityCheckbox',
     'disableSubmit',
     'disablePreview',
+    'disableDraft',
+    'hideDraft',
+    'closeable',
     'placeholder',
     'maxHeight',
     'postHandler',
@@ -88,13 +113,18 @@ const PostStatusForm = {
     'fileLimit',
     'submitOnEnter',
     'emojiPickerPlacement',
-    'optimisticPosting'
+    'optimisticPosting',
+    'profileMention',
+    'draftId'
   ],
   emits: [
     'posted',
+    'draft-done',
     'resize',
     'mediaplay',
-    'mediapause'
+    'mediapause',
+    'can-close',
+    'update'
   ],
   components: {
     MediaUpload,
@@ -105,7 +135,9 @@ const PostStatusForm = {
     Select,
     Attachment,
     StatusContent,
-    Gallery
+    Gallery,
+    DraftCloser,
+    Popover
   },
   mounted () {
     this.updateIdempotencyKey()
@@ -126,43 +158,58 @@ const PostStatusForm = {
 
     const { scopeCopy } = this.$store.getters.mergedConfig
 
-    if (this.replyTo) {
-      const currentUser = this.$store.state.users.currentUser
-      statusText = buildMentionsString({ user: this.repliedUser, attentions: this.attentions }, currentUser)
-    }
+    const [statusType, refId] = typeAndRefId({ replyTo: this.replyTo, profileMention: this.profileMention && this.repliedUser?.id, statusId: this.statusId })
 
-    const scope = ((this.copyMessageScope && scopeCopy) || this.copyMessageScope === 'direct')
-      ? this.copyMessageScope
-      : this.$store.state.users.currentUser.default_scope
+    // If we are starting a new post, do not associate it with old drafts
+    let statusParams = !this.disableDraft && (this.draftId || statusType !== 'new') ? this.getDraft(statusType, refId) : null
 
-    const { postContentType: contentType, sensitiveByDefault } = this.$store.getters.mergedConfig
+    if (!statusParams) {
+      if (statusType === 'reply' || statusType === 'mention') {
+        const currentUser = this.$store.state.users.currentUser
+        statusText = buildMentionsString({ user: this.repliedUser, attentions: this.attentions }, currentUser)
+      }
 
-    let statusParams = {
-      spoilerText: this.subject || '',
-      status: statusText,
-      nsfw: !!sensitiveByDefault,
-      files: [],
-      poll: {},
-      mediaDescriptions: {},
-      visibility: scope,
-      contentType
-    }
+      const scope = ((this.copyMessageScope && scopeCopy) || this.copyMessageScope === 'direct')
+        ? this.copyMessageScope
+        : this.$store.state.users.currentUser.default_scope
+
+      const { postContentType: contentType, sensitiveByDefault } = this.$store.getters.mergedConfig
 
-    if (this.statusId) {
-      const statusContentType = this.statusContentType || contentType
       statusParams = {
+        type: statusType,
+        refId,
         spoilerText: this.subject || '',
-        status: this.statusText || '',
-        nsfw: this.statusIsSensitive || !!sensitiveByDefault,
-        files: this.statusFiles || [],
-        poll: this.statusPoll || {},
-        mediaDescriptions: this.statusMediaDescriptions || {},
-        visibility: this.statusScope || scope,
-        contentType: statusContentType
+        status: statusText,
+        nsfw: !!sensitiveByDefault,
+        files: [],
+        poll: {},
+        hasPoll: false,
+        mediaDescriptions: {},
+        visibility: scope,
+        contentType,
+        quoting: false
+      }
+
+      if (statusType === 'edit') {
+        const statusContentType = this.statusContentType || contentType
+        statusParams = {
+          type: statusType,
+          refId,
+          spoilerText: this.subject || '',
+          status: this.statusText || '',
+          nsfw: this.statusIsSensitive || !!sensitiveByDefault,
+          files: this.statusFiles || [],
+          poll: this.statusPoll || {},
+          hasPoll: false,
+          mediaDescriptions: this.statusMediaDescriptions || {},
+          visibility: this.statusScope || scope,
+          contentType: statusContentType
+        }
       }
     }
 
     return {
+      randomSeed: genRandomSeed(),
       dropFiles: [],
       uploadingFiles: false,
       error: null,
@@ -170,13 +217,14 @@ const PostStatusForm = {
       highlighted: 0,
       newStatus: statusParams,
       caret: 0,
-      pollFormVisible: false,
       showDropIcon: 'hide',
       dropStopTimeout: null,
       preview: null,
       previewLoading: false,
       emojiInputShown: false,
-      idempotencyKey: ''
+      idempotencyKey: '',
+      saveInhibited: true,
+      saveable: false
     }
   },
   computed: {
@@ -189,6 +237,9 @@ const PostStatusForm = {
     showAllScopes () {
       return !this.mergedConfig.minimalScopesMode
     },
+    hideExtraActions () {
+      return this.disableDraft || this.hideDraft
+    },
     emojiUserSuggestor () {
       return suggestor({
         emoji: [
@@ -267,6 +318,56 @@ const PostStatusForm = {
     isEdit () {
       return typeof this.statusId !== 'undefined' && this.statusId.trim() !== ''
     },
+    quotable () {
+      if (!this.$store.state.instance.quotingAvailable) {
+        return false
+      }
+
+      if (!this.replyTo) {
+        return false
+      }
+
+      const repliedStatus = this.$store.state.statuses.allStatusesObject[this.replyTo]
+      if (!repliedStatus) {
+        return false
+      }
+
+      if (repliedStatus.visibility === 'public' ||
+          repliedStatus.visibility === 'unlisted' ||
+          repliedStatus.visibility === 'local') {
+        return true
+      } else if (repliedStatus.visibility === 'private') {
+        return repliedStatus.user.id === this.$store.state.users.currentUser.id
+      }
+
+      return false
+    },
+    debouncedMaybeAutoSaveDraft () {
+      return debounce(this.maybeAutoSaveDraft, 3000)
+    },
+    pollFormVisible () {
+      return this.newStatus.hasPoll
+    },
+    shouldAutoSaveDraft () {
+      return this.$store.getters.mergedConfig.autoSaveDraft
+    },
+    autoSaveState () {
+      if (this.saveable) {
+        return this.$t('post_status.auto_save_saving')
+      } else if (this.newStatus.id) {
+        return this.$t('post_status.auto_save_saved')
+      } else {
+        return this.$t('post_status.auto_save_nothing_new')
+      }
+    },
+    safeToSaveDraft () {
+      return (
+        this.newStatus.status ||
+        this.newStatus.spoilerText ||
+        this.newStatus.files?.length ||
+        this.newStatus.hasPoll
+      ) && this.saveable
+    },
     ...mapGetters(['mergedConfig']),
     ...mapState(useInterfaceStore, {
       mobileLayout: store => store.mobileLayout
@@ -278,15 +379,32 @@ const PostStatusForm = {
       handler () {
         this.statusChanged()
       }
+    },
+    saveable (val) {
+      // https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event#usage_notes
+      // MDN says we'd better add the beforeunload event listener only when needed, and remove it when it's no longer needed
+      if (val) {
+        this.addBeforeUnloadListener()
+      } else {
+        this.removeBeforeUnloadListener()
+      }
     }
   },
+  beforeUnmount () {
+    this.maybeAutoSaveDraft()
+    this.removeBeforeUnloadListener()
+  },
   methods: {
     statusChanged () {
       this.autoPreview()
       this.updateIdempotencyKey()
+      this.debouncedMaybeAutoSaveDraft()
+      this.saveable = true
+      this.saveInhibited = false
     },
     clearStatus () {
       const newStatus = this.newStatus
+      this.saveInhibited = true
       this.newStatus = {
         status: '',
         spoilerText: '',
@@ -294,9 +412,10 @@ const PostStatusForm = {
         visibility: newStatus.visibility,
         contentType: newStatus.contentType,
         poll: {},
-        mediaDescriptions: {}
+        hasPoll: false,
+        mediaDescriptions: {},
+        quoting: false
       }
-      this.pollFormVisible = false
       this.$refs.mediaUpload && this.$refs.mediaUpload.clearFile()
       this.clearPollForm()
       if (this.preserveFocus) {
@@ -309,6 +428,7 @@ const PostStatusForm = {
       el.style.height = undefined
       this.error = null
       if (this.preview) this.previewStatus()
+      this.saveable = false
     },
     async postStatus (event, newStatus, opts = {}) {
       if (this.posting && !this.optimisticPosting) { return }
@@ -326,7 +446,7 @@ const PostStatusForm = {
         return
       }
 
-      const poll = this.pollFormVisible ? this.newStatus.poll : {}
+      const poll = this.newStatus.hasPoll ? pollFormToMasto(this.newStatus.poll) : {}
       if (this.pollContentError) {
         this.error = this.pollContentError
         return
@@ -342,6 +462,8 @@ const PostStatusForm = {
         return
       }
 
+      const replyOrQuoteAttr = newStatus.quoting ? 'quoteId' : 'inReplyToStatusId'
+
       const postingOptions = {
         status: newStatus.status,
         spoilerText: newStatus.spoilerText || null,
@@ -349,7 +471,7 @@ const PostStatusForm = {
         sensitive: newStatus.nsfw,
         media: newStatus.files,
         store: this.$store,
-        inReplyToStatusId: this.replyTo,
+        [replyOrQuoteAttr]: this.replyTo,
         contentType: newStatus.contentType,
         poll,
         idempotencyKey: this.idempotencyKey
@@ -359,6 +481,7 @@ const PostStatusForm = {
 
       postHandler(postingOptions).then((data) => {
         if (!data.error) {
+          this.abandonDraft()
           this.clearStatus()
           this.$emit('posted', data)
         } else {
@@ -375,6 +498,7 @@ const PostStatusForm = {
       }
       const newStatus = this.newStatus
       this.previewLoading = true
+      const replyOrQuoteAttr = newStatus.quoting ? 'quoteId' : 'inReplyToStatusId'
       statusPoster.postStatus({
         status: newStatus.status,
         spoilerText: newStatus.spoilerText || null,
@@ -382,7 +506,7 @@ const PostStatusForm = {
         sensitive: newStatus.nsfw,
         media: [],
         store: this.$store,
-        inReplyToStatusId: this.replyTo,
+        [replyOrQuoteAttr]: this.replyTo,
         contentType: newStatus.contentType,
         poll: {},
         preview: true
@@ -602,7 +726,7 @@ const PostStatusForm = {
       this.newStatus.visibility = visibility
     },
     togglePollForm () {
-      this.pollFormVisible = !this.pollFormVisible
+      this.newStatus.hasPoll = !this.newStatus.hasPoll
     },
     setPoll (poll) {
       this.newStatus.poll = poll
@@ -635,6 +759,84 @@ const PostStatusForm = {
     },
     propsToNative (props) {
       return propsToNative(props)
+    },
+    saveDraft () {
+      if (!this.disableDraft &&
+          !this.saveInhibited) {
+        if (this.safeToSaveDraft) {
+          return this.$store.dispatch('addOrSaveDraft', { draft: this.newStatus })
+            .then(id => {
+              if (this.newStatus.id !== id) {
+                this.newStatus.id = id
+              }
+              this.saveable = false
+              if (!this.shouldAutoSaveDraft) {
+                this.clearStatus()
+                this.$emit('draft-done')
+              }
+            })
+        } else if (this.newStatus.id) {
+          // There is a draft, but there is nothing in it, clear it
+          return this.abandonDraft()
+            .then(() => {
+              this.saveable = false
+              if (!this.shouldAutoSaveDraft) {
+                this.clearStatus()
+                this.$emit('draft-done')
+              }
+            })
+        }
+      }
+      return Promise.resolve()
+    },
+    maybeAutoSaveDraft () {
+      if (this.shouldAutoSaveDraft) {
+        this.saveDraft(false)
+      }
+    },
+    abandonDraft () {
+      return this.$store.dispatch('abandonDraft', { id: this.newStatus.id })
+    },
+    getDraft (statusType, refId) {
+      const maybeDraft = this.$store.state.drafts.drafts[this.draftId]
+      if (this.draftId && maybeDraft) {
+        return maybeDraft
+      } else {
+        const existingDrafts = this.$store.getters.draftsByTypeAndRefId(statusType, refId)
+
+        if (existingDrafts.length) {
+          return existingDrafts[0]
+        }
+      }
+      // No draft available, fall back
+    },
+    requestClose () {
+      if (!this.saveable) {
+        this.$emit('can-close')
+      } else {
+        this.$refs.draftCloser.requestClose()
+      }
+    },
+    saveAndCloseDraft () {
+      this.saveDraft().then(() => {
+        this.$emit('can-close')
+      })
+    },
+    discardAndCloseDraft () {
+      this.abandonDraft().then(() => {
+        this.$emit('can-close')
+      })
+    },
+    addBeforeUnloadListener () {
+      this._beforeUnloadListener ||= () => {
+        this.saveDraft()
+      }
+      window.addEventListener('beforeunload', this._beforeUnloadListener)
+    },
+    removeBeforeUnloadListener () {
+      if (this._beforeUnloadListener) {
+        window.removeEventListener('beforeunload', this._beforeUnloadListener)
+      }
     }
   }
 }
diff --git a/src/components/post_status_form/post_status_form.scss b/src/components/post_status_form/post_status_form.scss
new file mode 100644
index 000000000..9e8de25d5
--- /dev/null
+++ b/src/components/post_status_form/post_status_form.scss
@@ -0,0 +1,258 @@
+.post-status-form {
+  position: relative;
+
+  .attachments {
+    margin-bottom: 0.5em;
+  }
+
+  .more-post-actions {
+    height: 100%;
+
+    .btn {
+      height: 100%;
+    }
+  }
+
+  .form-bottom {
+    display: flex;
+    justify-content: space-between;
+    padding: 0.5em;
+    height: 2.5em;
+
+    .post-button-group {
+      width: 10em;
+      display: flex;
+
+      .post-button {
+        flex: 1 0 auto;
+      }
+
+      .more-post-actions {
+        flex: 0 0 auto;
+      }
+    }
+
+    p {
+      margin: 0.35em;
+      padding: 0.35em;
+      display: flex;
+    }
+  }
+
+  .form-bottom-left {
+    display: flex;
+    flex: 1;
+    padding-right: 7px;
+    margin-right: 7px;
+    max-width: 10em;
+  }
+
+  .preview-heading {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .preview-toggle {
+    flex: 10 0 auto;
+    cursor: pointer;
+    user-select: none;
+    padding-left: 0.5em;
+
+    &:hover {
+      text-decoration: underline;
+    }
+
+    svg,
+    i {
+      margin-left: 0.2em;
+      font-size: 0.8em;
+      transform: rotate(90deg);
+    }
+  }
+
+  .preview-container {
+    margin-bottom: 1em;
+  }
+
+  .preview-error {
+    font-style: italic;
+    color: var(--textFaint);
+  }
+
+  .preview-status {
+    border: 1px solid var(--border);
+    border-radius: var(--roundness);
+    padding: 0.5em;
+    margin: 0;
+  }
+
+  .reply-or-quote-selector {
+    flex: 1 0 auto;
+    margin-bottom: 0.5em;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .text-format {
+    .only-format {
+      color: var(--textFaint);
+    }
+  }
+
+  .visibility-tray {
+    display: flex;
+    justify-content: space-between;
+    padding-top: 5px;
+    align-items: baseline;
+  }
+
+  .visibility-notice.edit-warning {
+    > :first-child {
+      margin-top: 0;
+    }
+
+    > :last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  // Order is not necessary but a good indicator
+  .media-upload-icon {
+    order: 1;
+    justify-content: left;
+  }
+
+  .emoji-icon {
+    order: 2;
+    justify-content: center;
+  }
+
+  .poll-icon {
+    order: 3;
+    justify-content: right;
+  }
+
+  .media-upload-icon,
+  .poll-icon,
+  .emoji-icon {
+    font-size: 1.85em;
+    line-height: 1.1;
+    flex: 1;
+    padding: 0 0.1em;
+    display: flex;
+    align-items: center;
+  }
+
+  .error {
+    text-align: center;
+  }
+
+  .media-upload-wrapper {
+    margin-right: 0.2em;
+    margin-bottom: 0.5em;
+    width: 18em;
+
+    img,
+    video {
+      object-fit: contain;
+      max-height: 10em;
+    }
+
+    .video {
+      max-height: 10em;
+    }
+
+    input {
+      flex: 1;
+      width: 100%;
+    }
+  }
+
+  .status-input-wrapper {
+    display: flex;
+    position: relative;
+    width: 100%;
+    flex-direction: column;
+  }
+
+  .btn[disabled] {
+    cursor: not-allowed;
+  }
+
+  form {
+    display: flex;
+    flex-direction: column;
+    margin: 0.6em;
+    position: relative;
+  }
+
+  .form-group {
+    display: flex;
+    flex-direction: column;
+    padding: 0.25em 0.5em 0.5em;
+    line-height: 1.85;
+  }
+
+  .input.form-post-body {
+    // TODO: make a resizable textarea component?
+    box-sizing: content-box; // needed for easier computation of dynamic size
+    overflow: hidden;
+    transition: min-height 200ms 100ms;
+    // stock padding + 1 line of text (for counter)
+    padding-bottom: calc(var(--_padding) + var(--post-line-height) * 1em);
+    // two lines of text
+    height: calc(var(--post-line-height) * 1em);
+    min-height: calc(var(--post-line-height) * 1em);
+    resize: none;
+    background: transparent;
+
+    &.scrollable-form {
+      overflow-y: auto;
+    }
+  }
+
+  .main-input {
+    position: relative;
+  }
+
+  .character-counter {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    padding: 0;
+    margin: 0 0.5em;
+
+    &.error {
+      color: var(--cRed);
+    }
+  }
+
+  @keyframes fade-in {
+    from { opacity: 0; }
+    to { opacity: 0.6; }
+  }
+
+  @keyframes fade-out {
+    from { opacity: 0.6; }
+    to { opacity: 0; }
+  }
+
+  .drop-indicator {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    font-size: 5em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0.6;
+    color: var(--text);
+    background-color: var(--bg);
+    border-radius: var(--roundness);
+    border: 2px dashed var(--text);
+  }
+
+  .auto-save-status {
+    align-self: center;
+  }
+}
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 86c1f9073..53f236536 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -103,6 +103,36 @@
               icon="circle-notch"
             />
           </div>
+          <div
+            v-if="quotable"
+            role="radiogroup"
+            class="btn-group reply-or-quote-selector"
+          >
+            <button
+              :id="`reply-or-quote-option-${randomSeed}-reply`"
+              class="btn button-default reply-or-quote-option"
+              :class="{ toggled: !newStatus.quoting }"
+              tabindex="0"
+              role="radio"
+              :aria-labelledby="`reply-or-quote-option-${randomSeed}-reply`"
+              :aria-checked="!newStatus.quoting"
+              @click="newStatus.quoting = false"
+            >
+              {{ $t('post_status.reply_option') }}
+            </button>
+            <button
+              :id="`reply-or-quote-option-${randomSeed}-quote`"
+              class="btn button-default reply-or-quote-option"
+              :class="{ toggled: newStatus.quoting }"
+              tabindex="0"
+              role="radio"
+              :aria-labelledby="`reply-or-quote-option-${randomSeed}-quote`"
+              :aria-checked="newStatus.quoting"
+              @click="newStatus.quoting = true"
+            >
+              {{ $t('post_status.quote_option') }}
+            </button>
+          </div>
         </div>
         <div
           v-if="showPreview"
@@ -131,7 +161,7 @@
           v-model="newStatus.spoilerText"
           enable-emoji-picker
           :suggest="emojiSuggestor"
-          class="form-control"
+          class="input form-control"
         >
           <template #default="inputProps">
             <input
@@ -141,7 +171,7 @@
               :disabled="posting && !optimisticPosting"
               v-bind="propsToNative(inputProps)"
               size="1"
-              class="form-post-subject"
+              class="input form-post-subject"
             >
           </template>
         </EmojiInput>
@@ -150,11 +180,11 @@
           v-model="newStatus.status"
           :suggest="emojiUserSuggestor"
           :placement="emojiPickerPlacement"
-          class="form-control main-input"
+          class="input form-control main-input"
+          enable-sticker-picker
           enable-emoji-picker
           hide-emoji-button
           :newline-on-ctrl-enter="submitOnEnter"
-          enable-sticker-picker
           @input="onEmojiInputInput"
           @sticker-uploaded="addMediaFile"
           @sticker-upload-failed="uploadFailed"
@@ -168,7 +198,7 @@
               rows="1"
               cols="1"
               :disabled="posting && !optimisticPosting"
-              class="form-post-body"
+              class="input form-post-body"
               :class="{ 'scrollable-form': !!maxHeight }"
               v-bind="propsToNative(inputProps)"
               @keydown.exact.enter="submitOnEnter && postStatus($event, newStatus)"
@@ -205,9 +235,8 @@
             class="text-format"
           >
             <Select
-              id="post-content-type"
               v-model="newStatus.contentType"
-              class="form-control"
+              class="input form-control"
               :attrs="{ 'aria-label': $t('post_status.content_type_selection') }"
             >
               <option
@@ -233,8 +262,14 @@
         v-if="pollsAvailable"
         ref="pollForm"
         :visible="pollFormVisible"
-        @update-poll="setPoll"
+        :params="newStatus.poll"
       />
+      <span
+        v-if="!disableDraft && shouldAutoSaveDraft"
+        class="auto-save-status"
+      >
+        {{ autoSaveState }}
+      </span>
       <div
         ref="bottom"
         class="form-bottom"
@@ -267,28 +302,58 @@
             <FAIcon icon="poll-h" />
           </button>
         </div>
-        <button
-          v-if="posting"
-          disabled
-          class="btn button-default"
-        >
-          {{ $t('post_status.posting') }}
-        </button>
-        <button
-          v-else-if="isOverLengthLimit"
-          disabled
-          class="btn button-default"
-        >
-          {{ $t('post_status.post') }}
-        </button>
-        <button
-          v-else
-          :disabled="uploadingFiles || disableSubmit"
-          class="btn button-default"
-          @click.stop.prevent="postStatus($event, newStatus)"
-        >
-          {{ $t('post_status.post') }}
-        </button>
+        <div class="btn-group post-button-group">
+          <button
+            class="btn button-default post-button"
+            :disabled="isOverLengthLimit || posting || uploadingFiles || disableSubmit"
+            @click.stop.prevent="postStatus($event, newStatus)"
+          >
+            <template v-if="posting">
+              {{ $t('post_status.posting') }}
+            </template>
+            <template v-else>
+              {{ $t('post_status.post') }}
+            </template>
+          </button>
+          <Popover
+            v-if="!hideExtraActions"
+            class="more-post-actions"
+            :normal-button="true"
+            trigger="click"
+            placement="bottom"
+            :offset="{ y: 5 }"
+          >
+            <template #trigger>
+              <FAIcon
+                class="fa-scale-110 fa-old-padding"
+                icon="chevron-down"
+              />
+            </template>
+            <template #content="{close}">
+              <div
+                class="dropdown-menu"
+                role="menu"
+              >
+                <button
+                  v-if="!hideDraft || !disableDraft"
+                  class="menu-item dropdown-item"
+                  role="menu"
+                  :disabled="!safeToSaveDraft && saveable"
+                  :class="{ disabled: !safeToSaveDraft }"
+                  @click.prevent="saveDraft"
+                  @click="close"
+                >
+                  <template v-if="closeable">
+                    {{ $t('post_status.save_to_drafts_and_close_button') }}
+                  </template>
+                  <template v-else>
+                    {{ $t('post_status.save_to_drafts_button') }}
+                  </template>
+                </button>
+              </div>
+            </template>
+          </Popover>
+        </div>
       </div>
       <div
         v-show="showDropIcon !== 'hide'"
@@ -339,274 +404,14 @@
         </Checkbox>
       </div>
     </form>
+    <DraftCloser
+      ref="draftCloser"
+      @save="saveAndCloseDraft"
+      @discard="discardAndCloseDraft"
+    />
   </div>
 </template>
 
 <script src="./post_status_form.js"></script>
 
-<style lang="scss">
-@import "../../variables";
-
-.post-status-form {
-  position: relative;
-
-  .attachments {
-    margin-bottom: 0.5em;
-  }
-
-  .form-bottom {
-    display: flex;
-    justify-content: space-between;
-    padding: 0.5em;
-    height: 2.5em;
-
-    button {
-      width: 10em;
-    }
-
-    p {
-      margin: 0.35em;
-      padding: 0.35em;
-      display: flex;
-    }
-  }
-
-  .form-bottom-left {
-    display: flex;
-    flex: 1;
-    padding-right: 7px;
-    margin-right: 7px;
-    max-width: 10em;
-  }
-
-  .preview-heading {
-    display: flex;
-    padding-left: 0.5em;
-  }
-
-  .preview-toggle {
-    flex: 1;
-    cursor: pointer;
-    user-select: none;
-
-    &:hover {
-      text-decoration: underline;
-    }
-
-    svg,
-    i {
-      margin-left: 0.2em;
-      font-size: 0.8em;
-      transform: rotate(90deg);
-    }
-  }
-
-  .preview-container {
-    margin-bottom: 1em;
-  }
-
-  .preview-error {
-    font-style: italic;
-    color: $fallback--faint;
-    color: var(--faint, $fallback--faint);
-  }
-
-  .preview-status {
-    border: 1px solid $fallback--border;
-    border: 1px solid var(--border, $fallback--border);
-    border-radius: $fallback--tooltipRadius;
-    border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
-    padding: 0.5em;
-    margin: 0;
-  }
-
-  .text-format {
-    .only-format {
-      color: $fallback--faint;
-      color: var(--faint, $fallback--faint);
-    }
-  }
-
-  .visibility-tray {
-    display: flex;
-    justify-content: space-between;
-    padding-top: 5px;
-    align-items: baseline;
-  }
-
-  .visibility-notice.edit-warning {
-    > :first-child {
-      margin-top: 0;
-    }
-
-    > :last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  // Order is not necessary but a good indicator
-  .media-upload-icon {
-    order: 1;
-    justify-content: left;
-  }
-
-  .emoji-icon {
-    order: 2;
-    justify-content: center;
-  }
-
-  .poll-icon {
-    order: 3;
-    justify-content: right;
-  }
-
-  .media-upload-icon,
-  .poll-icon,
-  .emoji-icon {
-    font-size: 1.85em;
-    line-height: 1.1;
-    flex: 1;
-    padding: 0 0.1em;
-    display: flex;
-    align-items: center;
-
-    &.selected,
-    &:hover {
-      // needs to be specific to override icon default color
-      svg,
-      i,
-      label {
-        color: $fallback--lightText;
-        color: var(--lightText, $fallback--lightText);
-      }
-    }
-
-    &.disabled {
-      svg,
-      i {
-        cursor: not-allowed;
-        color: $fallback--icon;
-        color: var(--btnDisabledText, $fallback--icon);
-
-        &:hover {
-          color: $fallback--icon;
-          color: var(--btnDisabledText, $fallback--icon);
-        }
-      }
-    }
-  }
-
-  .error {
-    text-align: center;
-  }
-
-  .media-upload-wrapper {
-    margin-right: 0.2em;
-    margin-bottom: 0.5em;
-    width: 18em;
-
-    img,
-    video {
-      object-fit: contain;
-      max-height: 10em;
-    }
-
-    .video {
-      max-height: 10em;
-    }
-
-    input {
-      flex: 1;
-      width: 100%;
-    }
-  }
-
-  .status-input-wrapper {
-    display: flex;
-    position: relative;
-    width: 100%;
-    flex-direction: column;
-  }
-
-  .btn[disabled] {
-    cursor: not-allowed;
-  }
-
-  form {
-    display: flex;
-    flex-direction: column;
-    margin: 0.6em;
-    position: relative;
-  }
-
-  .form-group {
-    display: flex;
-    flex-direction: column;
-    padding: 0.25em 0.5em 0.5em;
-    line-height: 1.85;
-  }
-
-  .form-post-body {
-    // TODO: make a resizable textarea component?
-    box-sizing: content-box; // needed for easier computation of dynamic size
-    overflow: hidden;
-    transition: min-height 200ms 100ms;
-    // stock padding + 1 line of text (for counter)
-    padding-bottom: calc(var(--_padding) + var(--post-line-height) * 1em);
-    // two lines of text
-    height: calc(var(--post-line-height) * 1em);
-    min-height: calc(var(--post-line-height) * 1em);
-    resize: none;
-
-    &.scrollable-form {
-      overflow-y: auto;
-    }
-  }
-
-  .main-input {
-    position: relative;
-  }
-
-  .character-counter {
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    padding: 0;
-    margin: 0 0.5em;
-
-    &.error {
-      color: $fallback--cRed;
-      color: var(--cRed, $fallback--cRed);
-    }
-  }
-
-  @keyframes fade-in {
-    from { opacity: 0; }
-    to { opacity: 0.6; }
-  }
-
-  @keyframes fade-out {
-    from { opacity: 0.6; }
-    to { opacity: 0; }
-  }
-
-  .drop-indicator {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    font-size: 5em;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    opacity: 0.6;
-    color: $fallback--text;
-    color: var(--text, $fallback--text);
-    background-color: $fallback--bg;
-    background-color: var(--bg, $fallback--bg);
-    border-radius: $fallback--tooltipRadius;
-    border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
-    border: 2px dashed $fallback--text;
-    border: 2px dashed var(--text, $fallback--text);
-  }
-}
-</style>
+<style src="./post_status_form.scss" lang="scss"></style>
diff --git a/src/components/post_status_modal/post_status_modal.js b/src/components/post_status_modal/post_status_modal.js
index fb7436ab7..712df2204 100644
--- a/src/components/post_status_modal/post_status_modal.js
+++ b/src/components/post_status_modal/post_status_modal.js
@@ -45,6 +45,10 @@ const PostStatusModal = {
   methods: {
     closeModal () {
       usePostStatusStore().closePostStatusModal()
+    },
+    resetAndClose () {
+      usePostStatusStore().resetPostStatusModal()
+      usePostStatusStore().closePostStatusModal()
     }
   }
 }
diff --git a/src/components/post_status_modal/post_status_modal.vue b/src/components/post_status_modal/post_status_modal.vue
index dbcd321eb..414dd5bd1 100644
--- a/src/components/post_status_modal/post_status_modal.vue
+++ b/src/components/post_status_modal/post_status_modal.vue
@@ -7,12 +7,16 @@
   >
     <div class="post-form-modal-panel panel">
       <div class="panel-heading">
-        {{ $t('post_status.new_status') }}
+        <h1 class="title">
+          {{ $t('post_status.new_status') }}
+        </h1>
       </div>
       <PostStatusForm
         class="panel-body"
         v-bind="params"
-        @posted="closeModal"
+        :closeable="true"
+        @posted="resetAndClose"
+        @draft-done="resetAndClose"
       />
     </div>
   </Modal>
diff --git a/src/components/quick_filter_settings/quick_filter_settings.js b/src/components/quick_filter_settings/quick_filter_settings.js
index 6986ee555..14e883360 100644
--- a/src/components/quick_filter_settings/quick_filter_settings.js
+++ b/src/components/quick_filter_settings/quick_filter_settings.js
@@ -1,5 +1,5 @@
 import Popover from '../popover/popover.vue'
-import { mapGetters } from 'vuex'
+import { mapGetters, mapState } from 'vuex'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faFilter, faFont, faWrench } from '@fortawesome/free-solid-svg-icons'
 import { useInterfaceStore } from '../../stores/interface'
@@ -12,7 +12,8 @@ library.add(
 
 const QuickFilterSettings = {
   props: {
-    conversation: Boolean
+    conversation: Boolean,
+    nested: Boolean
   },
   components: {
     Popover
@@ -28,6 +29,25 @@ const QuickFilterSettings = {
   },
   computed: {
     ...mapGetters(['mergedConfig']),
+    ...mapState({
+      mobileLayout: state => state.interface.layoutType === 'mobile'
+    }),
+    triggerAttrs () {
+      if (this.mobileLayout) {
+        return {}
+      } else {
+        return {
+          title: this.$t('timeline.quick_filter_settings')
+        }
+      }
+    },
+    mainClass () {
+      if (this.mobileLayout) {
+        return 'main-button'
+      } else {
+        return 'dropdown-item'
+      }
+    },
     loggedIn () {
       return !!this.$store.state.users.currentUser
     },
@@ -64,6 +84,13 @@ const QuickFilterSettings = {
         const value = !this.muteBotStatuses
         this.$store.dispatch('setOption', { name: 'muteBotStatuses', value })
       }
+    },
+    muteSensitiveStatuses: {
+      get () { return this.mergedConfig.muteSensitiveStatuses },
+      set () {
+        const value = !this.muteSensitiveStatuses
+        this.$store.dispatch('setOption', { name: 'muteSensitiveStatuses', value })
+      }
     }
   }
 }
diff --git a/src/components/quick_filter_settings/quick_filter_settings.vue b/src/components/quick_filter_settings/quick_filter_settings.vue
index b81215a1a..79820ff38 100644
--- a/src/components/quick_filter_settings/quick_filter_settings.vue
+++ b/src/components/quick_filter_settings/quick_filter_settings.vue
@@ -1,9 +1,10 @@
 <template>
   <Popover
-    trigger="click"
+    :trigger="nested ? 'hover' : 'click'"
     class="QuickFilterSettings"
     :bound-to="{ x: 'container' }"
-    :trigger-attrs="{ title: $t('timeline.quick_filter_settings') }"
+    :position="nested ? 'right' : 'top'"
+    :trigger-attrs="triggerAttrs"
   >
     <template #content>
       <div
@@ -14,98 +15,148 @@
           v-if="loggedIn"
           role="group"
         >
-          <button
+          <div class="menu-item dropdown-item -icon">
+            <button
+              v-if="!conversation"
+              class="main-button"
+              :aria-checked="replyVisibilityAll"
+              role="menuitemradio"
+              @click="replyVisibilityAll = true"
+            >
+              <span
+                class="input menu-checkbox -radio"
+                :class="{ 'menu-checkbox-checked': replyVisibilityAll }"
+                :aria-hidden="true"
+              />{{ $t('settings.reply_visibility_all') }}
+            </button>
+          </div>
+          <div
             v-if="!conversation"
-            class="button-default dropdown-item"
-            :aria-checked="replyVisibilityAll"
-            role="menuitemradio"
-            @click="replyVisibilityAll = true"
+            class="menu-item dropdown-item -icon"
           >
-            <span
-              class="menu-checkbox -radio"
-              :class="{ 'menu-checkbox-checked': replyVisibilityAll }"
-              :aria-hidden="true"
-            />{{ $t('settings.reply_visibility_all') }}
-          </button>
-          <button
+            <button
+              class="main-button"
+              :aria-checked="replyVisibilityFollowing"
+              role="menuitemradio"
+              @click="replyVisibilityFollowing = true"
+            >
+              <span
+                class="input menu-checkbox -radio"
+                :class="{ 'menu-checkbox-checked': replyVisibilityFollowing }"
+                :aria-hidden="true"
+              />{{ $t('settings.reply_visibility_following_short') }}
+            </button>
+          </div>
+          <div
             v-if="!conversation"
-            class="button-default dropdown-item"
-            :aria-checked="replyVisibilityFollowing"
-            role="menuitemradio"
-            @click="replyVisibilityFollowing = true"
+            class="menu-item dropdown-item -icon"
           >
-            <span
-              class="menu-checkbox -radio"
-              :class="{ 'menu-checkbox-checked': replyVisibilityFollowing }"
-              :aria-hidden="true"
-            />{{ $t('settings.reply_visibility_following_short') }}
-          </button>
-          <button
-            v-if="!conversation"
-            class="button-default dropdown-item"
-            :aria-checked="replyVisibilitySelf"
-            role="menuitemradio"
-            @click="replyVisibilitySelf = true"
-          >
-            <span
-              class="menu-checkbox -radio"
-              :class="{ 'menu-checkbox-checked': replyVisibilitySelf }"
-              :aria-hidden="true"
-            />{{ $t('settings.reply_visibility_self_short') }}
-          </button>
+            <button
+              class="main-button"
+              :aria-checked="replyVisibilitySelf"
+              role="menuitemradio"
+              @click="replyVisibilitySelf = true"
+            >
+              <span
+                class="input menu-checkbox -radio"
+                :class="{ 'menu-checkbox-checked': replyVisibilitySelf }"
+                :aria-hidden="true"
+              />{{ $t('settings.reply_visibility_self_short') }}
+            </button>
+          </div>
           <div
             v-if="!conversation"
             role="separator"
             class="dropdown-divider"
           />
         </div>
-        <button
-          class="button-default dropdown-item"
-          role="menuitemcheckbox"
-          :aria-checked="muteBotStatuses"
-          @click="muteBotStatuses = !muteBotStatuses"
-        >
-          <span
-            class="menu-checkbox"
-            :class="{ 'menu-checkbox-checked': muteBotStatuses }"
-            :aria-hidden="true"
-          />{{ $t('settings.mute_bot_posts') }}
-        </button>
-        <button
-          class="button-default dropdown-item"
-          role="menuitemcheckbox"
-          :aria-checked="hideMedia"
-          @click="hideMedia = !hideMedia"
-        >
-          <span
-            class="menu-checkbox"
-            :class="{ 'menu-checkbox-checked': hideMedia }"
-            :aria-hidden="true"
-          />{{ $t('settings.hide_media_previews') }}
-        </button>
-        <button
-          class="button-default dropdown-item"
-          role="menuitemcheckbox"
-          :aria-checked="hideMutedPosts"
-          @click="hideMutedPosts = !hideMutedPosts"
-        >
-          <span
-            class="menu-checkbox"
-            :class="{ 'menu-checkbox-checked': hideMutedPosts }"
-            :aria-hidden="true"
-          />{{ $t('settings.hide_all_muted_posts') }}
-        </button>
-        <button
-          class="button-default dropdown-item dropdown-item-icon"
-          role="menuitem"
-          @click="openTab('filtering')"
-        >
-          <FAIcon icon="font" />{{ $t('settings.word_filter_and_more') }}
-        </button>
+        <div class="menu-item dropdown-item -icon">
+          <button
+            class="main-button"
+            role="menuitemcheckbox"
+            :aria-checked="muteBotStatuses"
+            @click="muteBotStatuses = !muteBotStatuses"
+          >
+            <span
+              class="input menu-checkbox"
+              :class="{ 'menu-checkbox-checked': muteBotStatuses }"
+              :aria-hidden="true"
+            />{{ $t('settings.mute_bot_posts') }}
+          </button>
+        </div>
+        <div class="menu-item dropdown-item -icon">
+          <button
+            class="main-button"
+            role="menuitemcheckbox"
+            :aria-checked="muteSensitiveStatuses"
+            @click="muteSensitiveStatuses = !muteSensitiveStatuses"
+          >
+            <span
+              class="input menu-checkbox"
+              :class="{ 'menu-checkbox-checked': muteSensitiveStatuses }"
+              :aria-hidden="true"
+            />{{ $t('settings.mute_sensitive_posts') }}
+          </button>
+        </div>
+        <div class="menu-item dropdown-item -icon">
+          <button
+            class="main-button"
+            role="menuitemcheckbox"
+            :aria-checked="hideMedia"
+            @click="hideMedia = !hideMedia"
+          >
+            <span
+              class="input menu-checkbox"
+              :class="{ 'menu-checkbox-checked': hideMedia }"
+              :aria-hidden="true"
+            />{{ $t('settings.hide_media_previews') }}
+          </button>
+        </div>
+        <div class="menu-item dropdown-item -icon">
+          <button
+            class="main-button"
+            role="menuitemcheckbox"
+            :aria-checked="hideMutedPosts"
+            @click="hideMutedPosts = !hideMutedPosts"
+          >
+            <span
+              class="input menu-checkbox"
+              :class="{ 'menu-checkbox-checked': hideMutedPosts }"
+              :aria-hidden="true"
+            />{{ $t('settings.hide_all_muted_posts') }}
+          </button>
+        </div>
+        <div class="menu-item dropdown-item -icon">
+          <button
+            class="main-button"
+            role="menuitem"
+            @click="openTab('filtering')"
+          >
+            <FAIcon
+              fixed-width
+              icon="font"
+            />{{ $t('settings.word_filter_and_more') }}
+          </button>
+        </div>
       </div>
     </template>
     <template #trigger>
-      <FAIcon icon="filter" />
+      <div :class="mobileLayout ? 'main-button' : ''">
+        <FAIcon
+          icon="filter"
+          :fixed-width="nested"
+        />
+        <template v-if="nested">
+          {{ $t('timeline.filter_settings') }}
+        </template>
+        <FAIcon
+          v-if="nested"
+          class="chevron-icon"
+          size="lg"
+          icon="chevron-right"
+          fixed-width
+        />
+      </div>
     </template>
   </Popover>
 </template>
diff --git a/src/components/quick_view_settings/quick_view_settings.js b/src/components/quick_view_settings/quick_view_settings.js
index e1054dca0..89ed083c2 100644
--- a/src/components/quick_view_settings/quick_view_settings.js
+++ b/src/components/quick_view_settings/quick_view_settings.js
@@ -1,5 +1,6 @@
-import Popover from '../popover/popover.vue'
-import { mapGetters } from 'vuex'
+import Popover from 'src/components/popover/popover.vue'
+import QuickFilterSettings from 'src/components/quick_filter_settings/quick_filter_settings.vue'
+import { mapGetters, mapState } from 'vuex'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faList, faFolderTree, faBars, faWrench } from '@fortawesome/free-solid-svg-icons'
 import { useInterfaceStore } from '../../stores/interface'
@@ -16,7 +17,8 @@ const QuickViewSettings = {
     conversation: Boolean
   },
   components: {
-    Popover
+    Popover,
+    QuickFilterSettings
   },
   methods: {
     setConversationDisplay (visibility) {
@@ -28,6 +30,9 @@ const QuickViewSettings = {
   },
   computed: {
     ...mapGetters(['mergedConfig']),
+    ...mapState({
+      mobileLayout: state => state.interface.layoutType === 'mobile'
+    }),
     loggedIn () {
       return !!this.$store.state.users.currentUser
     },
@@ -53,7 +58,6 @@ const QuickViewSettings = {
       get () { return this.mergedConfig.mentionLinkShowAvatar },
       set () {
         const value = !this.showUserAvatars
-        console.log(value)
         this.$store.dispatch('setOption', { name: 'mentionLinkShowAvatar', value })
       }
     },
@@ -63,6 +67,13 @@ const QuickViewSettings = {
         const value = !this.muteBotStatuses
         this.$store.dispatch('setOption', { name: 'muteBotStatuses', value })
       }
+    },
+    muteSensitiveStatuses: {
+      get () { return this.mergedConfig.muteSensitiveStatuses },
+      set () {
+        const value = !this.muteSensitiveStatuses
+        this.$store.dispatch('setOption', { name: 'muteSensitiveStatuses', value })
+      }
     }
   }
 }
diff --git a/src/components/quick_view_settings/quick_view_settings.vue b/src/components/quick_view_settings/quick_view_settings.vue
index 9f5cdabc9..403ccd159 100644
--- a/src/components/quick_view_settings/quick_view_settings.vue
+++ b/src/components/quick_view_settings/quick_view_settings.vue
@@ -3,94 +3,125 @@
     trigger="click"
     class="QuickViewSettings"
     :bound-to="{ x: 'container' }"
-    :trigger-attrs="{ title: $t('timeline.quick_view_settings') }"
   >
     <template #content>
       <div
         class="dropdown-menu"
         role="menu"
       >
+        <div
+          v-if="mobileLayout"
+          class="menu-item dropdown-item -icon"
+        >
+          <QuickFilterSettings :nested="true" />
+        </div>
+        <div
+          v-if="mobileLayout"
+          role="separator"
+          class="dropdown-divider"
+        />
         <div role="group">
-          <button
-            class="button-default dropdown-item"
-            :aria-checked="conversationDisplay === 'tree'"
-            role="menuitemradio"
-            @click="conversationDisplay = 'tree'"
-          >
-            <span
-              class="menu-checkbox -radio"
-              :aria-hidden="true"
-              :class="{ 'menu-checkbox-checked': conversationDisplay === 'tree' }"
-            /><FAIcon
-              icon="folder-tree"
-              :aria-hidden="true"
-            /> {{ $t('settings.conversation_display_tree_quick') }}
-          </button>
-          <button
-            class="button-default dropdown-item"
-            :aria-checked="conversationDisplay === 'linear'"
-            role="menuitemradio"
-            @click="conversationDisplay = 'linear'"
-          >
-            <span
-              class="menu-checkbox -radio"
-              :class="{ 'menu-checkbox-checked': conversationDisplay === 'linear' }"
-              :aria-hidden="true"
-            /><FAIcon
-              icon="list"
-              :aria-hidden="true"
-            /> {{ $t('settings.conversation_display_linear_quick') }}
-          </button>
+          <div class="menu-item dropdown-item -icon-double">
+            <button
+              class="main-button"
+              :aria-checked="conversationDisplay === 'tree'"
+              role="menuitemradio"
+              @click="conversationDisplay = 'tree'"
+            >
+              <span
+                class="input menu-checkbox -radio"
+                :aria-hidden="true"
+                :class="{ 'menu-checkbox-checked': conversationDisplay === 'tree' }"
+              /><FAIcon
+                icon="folder-tree"
+                :aria-hidden="true"
+                fixed-width
+              /> {{ $t('settings.conversation_display_tree_quick') }}
+            </button>
+          </div>
+          <div class="menu-item dropdown-item -icon-double">
+            <button
+              class="main-button"
+              :aria-checked="conversationDisplay === 'linear'"
+              role="menuitemradio"
+              @click="conversationDisplay = 'linear'"
+            >
+              <span
+                class="input menu-checkbox -radio"
+                :class="{ 'menu-checkbox-checked': conversationDisplay === 'linear' }"
+                :aria-hidden="true"
+              /><FAIcon
+                icon="list"
+                :aria-hidden="true"
+                fixed-width
+              /> {{ $t('settings.conversation_display_linear_quick') }}
+            </button>
+          </div>
         </div>
         <div
           role="separator"
           class="dropdown-divider"
         />
-        <button
-          class="button-default dropdown-item"
-          role="menuitemcheckbox"
-          :aria-checked="showUserAvatars"
-          @click="showUserAvatars = !showUserAvatars"
-        >
-          <span
-            class="menu-checkbox"
-            :class="{ 'menu-checkbox-checked': showUserAvatars }"
-            :aria-hidden="true"
-          />{{ $t('settings.mention_link_show_avatar_quick') }}
-        </button>
-        <button
+        <div class="menu-item dropdown-item -icon">
+          <button
+            class="main-button"
+            role="menuitemcheckbox"
+            :aria-checked="showUserAvatars"
+            @click="showUserAvatars = !showUserAvatars"
+          >
+            <span
+              class="input menu-checkbox"
+              :class="{ 'menu-checkbox-checked': showUserAvatars }"
+              :aria-hidden="true"
+            />{{ $t('settings.mention_link_show_avatar_quick') }}
+          </button>
+        </div>
+        <div
           v-if="!conversation"
-          class="button-default dropdown-item"
-          role="menuitemcheckbox"
-          :aria-checked="autoUpdate"
-          @click="autoUpdate = !autoUpdate"
+          class="menu-item dropdown-item -icon"
         >
-          <span
-            class="menu-checkbox"
-            :class="{ 'menu-checkbox-checked': autoUpdate }"
-            :aria-hidden="true"
-          />{{ $t('settings.auto_update') }}
-        </button>
-        <button
+          <button
+            class="main-button"
+            role="menuitemcheckbox"
+            :aria-checked="autoUpdate"
+            @click="autoUpdate = !autoUpdate"
+          >
+            <span
+              class="input menu-checkbox"
+              :class="{ 'menu-checkbox-checked': autoUpdate }"
+              :aria-hidden="true"
+            />{{ $t('settings.auto_update') }}
+          </button>
+        </div>
+        <div
           v-if="!conversation"
-          class="button-default dropdown-item"
-          role="menuitemcheckbox"
-          :aria-checked="collapseWithSubjects"
-          @click="collapseWithSubjects = !collapseWithSubjects"
+          class="menu-item dropdown-item -icon"
         >
-          <span
-            class="menu-checkbox"
-            :class="{ 'menu-checkbox-checked': collapseWithSubjects }"
-            :aria-hidden="true"
-          />{{ $t('settings.collapse_subject') }}
-        </button>
-        <button
-          class="button-default dropdown-item dropdown-item-icon"
-          role="menuitem"
-          @click="openTab('general')"
-        >
-          <FAIcon icon="wrench" />{{ $t('settings.more_settings') }}
-        </button>
+          <button
+            class="main-button"
+            role="menuitemcheckbox"
+            :aria-checked="collapseWithSubjects"
+            @click="collapseWithSubjects = !collapseWithSubjects"
+          >
+            <span
+              class="input menu-checkbox"
+              :class="{ 'menu-checkbox-checked': collapseWithSubjects }"
+              :aria-hidden="true"
+            />{{ $t('settings.collapse_subject') }}
+          </button>
+        </div>
+        <div class="menu-item dropdown-item -icon">
+          <button
+            class="main-button"
+            role="menuitem"
+            @click="openTab('general')"
+          >
+            <FAIcon
+              icon="wrench"
+              fixed-width
+            />{{ $t('settings.more_settings') }}
+          </button>
+        </div>
       </div>
     </template>
     <template #trigger>
diff --git a/src/components/quotes_timeline/quotes_timeline.js b/src/components/quotes_timeline/quotes_timeline.js
new file mode 100644
index 000000000..a5f42da56
--- /dev/null
+++ b/src/components/quotes_timeline/quotes_timeline.js
@@ -0,0 +1,26 @@
+import Timeline from '../timeline/timeline.vue'
+
+const QuotesTimeline = {
+  created () {
+    this.$store.commit('clearTimeline', { timeline: 'quotes' })
+    this.$store.dispatch('startFetchingTimeline', { timeline: 'quotes', statusId: this.statusId })
+  },
+  components: {
+    Timeline
+  },
+  computed: {
+    statusId () { return this.$route.params.id },
+    timeline () { return this.$store.state.statuses.timelines.quotes }
+  },
+  watch: {
+    statusId () {
+      this.$store.commit('clearTimeline', { timeline: 'quotes' })
+      this.$store.dispatch('startFetchingTimeline', { timeline: 'quotes', statusId: this.statusId })
+    }
+  },
+  unmounted () {
+    this.$store.dispatch('stopFetchingTimeline', 'quotes')
+  }
+}
+
+export default QuotesTimeline
diff --git a/src/components/quotes_timeline/quotes_timeline.vue b/src/components/quotes_timeline/quotes_timeline.vue
new file mode 100644
index 000000000..835abd12e
--- /dev/null
+++ b/src/components/quotes_timeline/quotes_timeline.vue
@@ -0,0 +1,10 @@
+<template>
+  <Timeline
+    :title="$t('nav.quotes')"
+    :timeline="timeline"
+    :timeline-name="'quotes'"
+    :status-id="statusId"
+  />
+</template>
+
+<script src='./quotes_timeline.js'></script>
diff --git a/src/components/range_input/range_input.vue b/src/components/range_input/range_input.vue
index 1e7201053..2f8645c0b 100644
--- a/src/components/range_input/range_input.vue
+++ b/src/components/range_input/range_input.vue
@@ -14,7 +14,7 @@
       v-if="typeof fallback !== 'undefined'"
       :id="name + '-o'"
       :aria-labelledby="name + '-label'"
-      class="opt visible-for-screenreader-only"
+      class="input -checkbox opt visible-for-screenreader-only"
       type="checkbox"
       :checked="present"
       @change="$emit('update:modelValue', !present ? fallback : undefined)"
@@ -27,7 +27,7 @@
     />
     <input
       :id="name"
-      class="input-number"
+      class="input input-number"
       type="range"
       :value="modelValue || fallback"
       :disabled="!present || disabled"
@@ -38,7 +38,7 @@
     >
     <input
       :id="name + '-numeric'"
-      class="input-number"
+      class="input input-number"
       type="number"
       :aria-labelledby="name + '-label'"
       :value="modelValue || fallback"
diff --git a/src/components/react_button/react_button.js b/src/components/react_button/react_button.js
deleted file mode 100644
index 8eed4b604..000000000
--- a/src/components/react_button/react_button.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import Popover from '../popover/popover.vue'
-import EmojiPicker from '../emoji_picker/emoji_picker.vue'
-import { library } from '@fortawesome/fontawesome-svg-core'
-import { faPlus, faTimes } from '@fortawesome/free-solid-svg-icons'
-import { faSmileBeam } from '@fortawesome/free-regular-svg-icons'
-
-library.add(
-  faPlus,
-  faTimes,
-  faSmileBeam
-)
-
-const ReactButton = {
-  props: ['status'],
-  data () {
-    return {
-      filterWord: '',
-      expanded: false
-    }
-  },
-  components: {
-    Popover,
-    EmojiPicker
-  },
-  methods: {
-    addReaction (event) {
-      const emoji = event.insertion
-      const existingReaction = this.status.emoji_reactions.find(r => r.name === emoji)
-      if (existingReaction && existingReaction.me) {
-        this.$store.dispatch('unreactWithEmoji', { id: this.status.id, emoji })
-      } else {
-        this.$store.dispatch('reactWithEmoji', { id: this.status.id, emoji })
-      }
-    },
-    show () {
-      if (!this.expanded) {
-        this.$refs.picker.showPicker()
-      }
-    },
-    onShow () {
-      this.expanded = true
-    },
-    onClose () {
-      this.expanded = false
-    }
-  },
-  computed: {
-    hideCustomEmoji () {
-      return !this.$store.state.instance.pleromaChatMessagesAvailable
-    }
-  }
-}
-
-export default ReactButton
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
deleted file mode 100644
index 947536a1f..000000000
--- a/src/components/react_button/react_button.vue
+++ /dev/null
@@ -1,119 +0,0 @@
-<template>
-  <span class="ReactButton">
-    <EmojiPicker
-      ref="picker"
-      :enable-sticker-picker="enableStickerPicker"
-      :hide-custom-emoji="hideCustomEmoji"
-      class="emoji-picker-panel"
-      @emoji="addReaction"
-      @show="onShow"
-      @close="onClose"
-    />
-    <span
-      class="button-unstyled popover-trigger"
-      :title="$t('tool_tip.add_reaction')"
-      @click.stop.prevent="show"
-    >
-      <FALayers>
-        <FAIcon
-          class="fa-scale-110 fa-old-padding"
-          :icon="['far', 'smile-beam']"
-        />
-        <FAIcon
-          v-show="!expanded"
-          class="focus-marker"
-          transform="shrink-6 up-9 right-17"
-          icon="plus"
-        />
-        <FAIcon
-          v-show="expanded"
-          class="focus-marker"
-          transform="shrink-6 up-9 right-17"
-          icon="times"
-        />
-      </FALayers>
-    </span>
-  </span>
-</template>
-
-<script src="./react_button.js"></script>
-
-<style lang="scss">
-@import "../../variables";
-@import "../../mixins";
-
-.ReactButton {
-  .reaction-picker-filter {
-    padding: 0.5em;
-    display: flex;
-
-    input {
-      flex: 1;
-    }
-  }
-
-  .reaction-picker-divider {
-    height: 1px;
-    width: 100%;
-    margin: 0.5em;
-    background-color: var(--border, $fallback--border);
-  }
-
-  .reaction-picker {
-    width: 10em;
-    height: 9em;
-    font-size: 1.5em;
-    overflow-y: scroll;
-    display: flex;
-    flex-wrap: wrap;
-    padding: 0.5em;
-    text-align: center;
-    align-content: flex-start;
-    user-select: none;
-    mask:
-      linear-gradient(to top, white 0, transparent 100%) bottom no-repeat,
-      linear-gradient(to bottom, white 0, transparent 100%) top no-repeat,
-      linear-gradient(to top, white, white);
-    transition: mask-size 150ms;
-    mask-size: 100% 20px, 100% 20px, auto;
-
-    /* Autoprefixed seem to ignore this one, and also syntax is different */
-    mask-composite: xor;
-    mask-composite: exclude;
-
-    .emoji-button {
-      cursor: pointer;
-      flex-basis: 20%;
-      line-height: 1.5;
-      align-content: center;
-
-      &:hover {
-        transform: scale(1.25);
-      }
-    }
-  }
-
-  .popover-trigger {
-    padding: 10px;
-    margin: -10px;
-
-    &:hover .svg-inline--fa {
-      color: $fallback--text;
-      color: var(--text, $fallback--text);
-    }
-
-    @include unfocused-style {
-      .focus-marker {
-        visibility: hidden;
-      }
-    }
-
-    @include focused-style {
-      .focus-marker {
-        visibility: visible;
-      }
-    }
-  }
-}
-
-</style>
diff --git a/src/components/registration/registration.js b/src/components/registration/registration.js
index b88bdeecb..78d319804 100644
--- a/src/components/registration/registration.js
+++ b/src/components/registration/registration.js
@@ -83,6 +83,8 @@ const registration = {
       signedIn: (state) => !!state.users.currentUser,
       isPending: (state) => state.users.signUpPending,
       serverValidationErrors: (state) => state.users.signUpErrors,
+      signUpNotice: (state) => state.users.signUpNotice,
+      hasSignUpNotice: (state) => !!state.users.signUpNotice.message,
       termsOfService: (state) => state.instance.tos,
       accountActivationRequired: (state) => state.instance.accountActivationRequired,
       accountApprovalRequired: (state) => state.instance.accountApprovalRequired,
@@ -107,8 +109,12 @@ const registration = {
 
       if (!this.v$.$invalid) {
         try {
-          await this.signUp(this.user)
-          this.$router.push({ name: 'friends' })
+          const status = await this.signUp(this.user)
+          if (status === 'ok') {
+            this.$router.push({ name: 'friends' })
+          }
+          // If status is not 'ok' (i.e. it needs further actions to be done
+          // before you can login), display sign up notice, do not switch anywhere
         } catch (error) {
           console.warn('Registration failed: ', error)
           this.setCaptcha()
diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue
index 7438a5f4d..4bd7c728c 100644
--- a/src/components/registration/registration.vue
+++ b/src/components/registration/registration.vue
@@ -1,9 +1,14 @@
 <template>
   <div class="settings panel panel-default">
     <div class="panel-heading">
-      {{ $t('registration.registration') }}
+      <h1 class="title">
+        {{ $t('registration.registration') }}
+      </h1>
     </div>
-    <div class="panel-body">
+    <div
+      v-if="!hasSignUpNotice"
+      class="panel-body"
+    >
       <form
         class="registration-form"
         @submit.prevent="submit(user)"
@@ -22,7 +27,7 @@
                 id="sign-up-username"
                 v-model.trim="v$.user.username.$model"
                 :disabled="isPending"
-                class="form-control"
+                class="input form-control"
                 :aria-required="true"
                 :placeholder="$t('registration.username_placeholder')"
               >
@@ -50,7 +55,7 @@
                 id="sign-up-fullname"
                 v-model.trim="v$.user.fullname.$model"
                 :disabled="isPending"
-                class="form-control"
+                class="input form-control"
                 :aria-required="true"
                 :placeholder="$t('registration.fullname_placeholder')"
               >
@@ -78,7 +83,7 @@
                 id="email"
                 v-model="v$.user.email.$model"
                 :disabled="isPending"
-                class="form-control"
+                class="input form-control"
                 type="email"
                 :aria-required="accountActivationRequired"
               >
@@ -103,7 +108,7 @@
                 id="bio"
                 v-model="user.bio"
                 :disabled="isPending"
-                class="form-control"
+                class="input form-control"
                 :placeholder="bioPlaceholder"
               />
             </div>
@@ -120,7 +125,7 @@
                 id="sign-up-password"
                 v-model="user.password"
                 :disabled="isPending"
-                class="form-control"
+                class="input form-control"
                 type="password"
                 :aria-required="true"
               >
@@ -148,7 +153,7 @@
                 id="sign-up-password-confirmation"
                 v-model="user.confirm"
                 :disabled="isPending"
-                class="form-control"
+                class="input form-control"
                 type="password"
                 :aria-required="true"
               >
@@ -181,7 +186,7 @@
                 id="sign-up-birthday"
                 v-model="user.birthday"
                 :disabled="isPending"
-                class="form-control"
+                class="input form-control"
                 type="date"
                 :max="birthdayRequired ? birthdayMinAttr : undefined"
                 :aria-required="birthdayRequired"
@@ -196,7 +201,7 @@
                   <span>{{ $t('registration.validations.birthday_required') }}</span>
                 </li>
                 <li v-if="v$.user.birthday.maxValue.$invalid">
-                  <span>{{ $tc('registration.validations.birthday_min_age', { date: birthdayMinFormatted }) }}</span>
+                  <span>{{ $t('registration.validations.birthday_min_age', { date: birthdayMinFormatted }) }}</span>
                 </li>
               </ul>
             </div>
@@ -226,7 +231,7 @@
                 id="reason"
                 v-model="user.reason"
                 :disabled="isPending"
-                class="form-control"
+                class="input form-control"
                 :placeholder="reasonPlaceholder"
               />
             </div>
@@ -253,7 +258,7 @@
                   id="captcha-answer"
                   v-model="captcha.solution"
                   :disabled="isPending"
-                  class="form-control"
+                  class="input form-control"
                   type="text"
                   autocomplete="off"
                   autocorrect="off"
@@ -272,7 +277,7 @@
                 id="token"
                 v-model="token"
                 disabled="true"
-                class="form-control"
+                class="input form-control"
                 type="text"
               >
             </div>
@@ -307,14 +312,16 @@
         </div>
       </form>
     </div>
+    <div v-else>
+      <p class="registration-notice">
+        {{ signUpNotice.message }}
+      </p>
+    </div>
   </div>
 </template>
 
 <script src="./registration.js"></script>
 <style lang="scss">
-@import "../../variables";
-$validations-cRed: #f04124;
-
 .registration-form {
   display: flex;
   flex-direction: column;
@@ -361,8 +368,7 @@ $validations-cRed: #f04124;
   }
 
   .form-group--error .form--label {
-    color: $validations-cRed;
-    color: var(--cRed, $validations-cRed);
+    color: var(--cRed);
   }
 
   .form-error {
@@ -404,6 +410,10 @@ $validations-cRed: #f04124;
   }
 }
 
+.registration-notice {
+  margin: 0.6em;
+}
+
 @media all and (max-width: 800px) {
   .registration-form .container {
     flex-direction: column-reverse;
diff --git a/src/components/remote_user_resolver/remote_user_resolver.vue b/src/components/remote_user_resolver/remote_user_resolver.vue
index 07aac169f..cbd4d19c4 100644
--- a/src/components/remote_user_resolver/remote_user_resolver.vue
+++ b/src/components/remote_user_resolver/remote_user_resolver.vue
@@ -1,7 +1,9 @@
 <template>
   <div class="panel panel-default">
     <div class="panel-heading">
-      {{ $t('remote_user_resolver.remote_user_resolver') }}
+      <h1 class="title">
+        {{ $t('remote_user_resolver.remote_user_resolver') }}
+      </h1>
     </div>
     <div class="panel-body">
       <p>
diff --git a/src/components/remove_follower_button/remove_follower_button.vue b/src/components/remove_follower_button/remove_follower_button.vue
index 0012aebd1..3054770d9 100644
--- a/src/components/remove_follower_button/remove_follower_button.vue
+++ b/src/components/remove_follower_button/remove_follower_button.vue
@@ -17,6 +17,7 @@
         @cancelled="hideConfirmRemoveUserFromFollowers"
       >
         <i18n-t
+          scope="global"
           keypath="user_card.remove_follower_confirm"
           tag="span"
         >
diff --git a/src/components/reply_button/reply_button.js b/src/components/reply_button/reply_button.js
deleted file mode 100644
index 543d25ac2..000000000
--- a/src/components/reply_button/reply_button.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faReply,
-  faPlus,
-  faTimes
-} from '@fortawesome/free-solid-svg-icons'
-
-library.add(
-  faReply,
-  faPlus,
-  faTimes
-)
-
-const ReplyButton = {
-  name: 'ReplyButton',
-  props: ['status', 'replying'],
-  computed: {
-    loggedIn () {
-      return !!this.$store.state.users.currentUser
-    },
-    remoteInteractionLink () {
-      return this.$store.getters.remoteInteractionLink({ statusId: this.status.id })
-    }
-  }
-}
-
-export default ReplyButton
diff --git a/src/components/reply_button/reply_button.vue b/src/components/reply_button/reply_button.vue
deleted file mode 100644
index 60a40a086..000000000
--- a/src/components/reply_button/reply_button.vue
+++ /dev/null
@@ -1,98 +0,0 @@
-<template>
-  <div class="ReplyButton">
-    <button
-      v-if="loggedIn"
-      class="button-unstyled interactive"
-      :class="{'-active': replying}"
-      :title="$t('tool_tip.reply')"
-      @click.prevent="$emit('toggle')"
-    >
-      <FALayers class="fa-old-padding-layer">
-        <FAIcon
-          class="fa-scale-110"
-          icon="reply"
-        />
-        <FAIcon
-          v-if="!replying"
-          class="focus-marker"
-          transform="shrink-6 up-8 right-11"
-          icon="plus"
-        />
-        <FAIcon
-          v-else
-          class="focus-marker"
-          transform="shrink-6 up-8 right-11"
-          icon="times"
-        />
-      </FALayers>
-    </button>
-    <a
-      v-else
-      class="button-unstyled interactive"
-      target="_blank"
-      role="button"
-      :href="remoteInteractionLink"
-      :title="$t('tool_tip.reply')"
-    >
-      <FALayers class="fa-old-padding-layer">
-        <FAIcon
-          class="fa-scale-110"
-          icon="reply"
-        />
-        <FAIcon
-          v-if="!replying"
-          class="focus-marker"
-          transform="shrink-6 up-8 right-16"
-          icon="plus"
-        />
-      </FALayers>
-    </a>
-    <span
-      v-if="status.replies_count > 0"
-      class="action-counter"
-    >
-      {{ status.replies_count }}
-    </span>
-  </div>
-</template>
-
-<script src="./reply_button.js"></script>
-
-<style lang="scss">
-@import "../../variables";
-@import "../../mixins";
-
-.ReplyButton {
-  display: flex;
-
-  > :first-child {
-    padding: 10px;
-    margin: -10px -8px -10px -10px;
-  }
-
-  .action-counter {
-    pointer-events: none;
-    user-select: none;
-  }
-
-  .interactive {
-    &:hover .svg-inline--fa,
-    &.-active .svg-inline--fa {
-      color: $fallback--cBlue;
-      color: var(--cBlue, $fallback--cBlue);
-    }
-
-    @include unfocused-style {
-      .focus-marker {
-        visibility: hidden;
-      }
-    }
-
-    @include focused-style {
-      .focus-marker {
-        visibility: visible;
-      }
-    }
-  }
-}
-</style>
diff --git a/src/components/report/report.js b/src/components/report/report.js
index 4807e189a..285bcd6dc 100644
--- a/src/components/report/report.js
+++ b/src/components/report/report.js
@@ -2,6 +2,7 @@ import { useReportsStore } from '../../stores/reports'
 import Select from '../select/select.vue'
 import StatusContent from '../status_content/status_content.vue'
 import Timeago from '../timeago/timeago.vue'
+import RichContent from 'src/components/rich_content/rich_content.jsx'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 
 const Report = {
@@ -11,7 +12,8 @@ const Report = {
   components: {
     Select,
     StatusContent,
-    Timeago
+    Timeago,
+    RichContent
   },
   computed: {
     report () {
diff --git a/src/components/report/report.scss b/src/components/report/report.scss
index 9762400b1..4249b8505 100644
--- a/src/components/report/report.scss
+++ b/src/components/report/report.scss
@@ -1,5 +1,3 @@
-@import "../../variables";
-
 .Report {
   .report-content {
     margin: 0.5em 0 1em;
@@ -10,12 +8,8 @@
   }
 
   .reported-status {
-    border: 1px solid $fallback--faint;
-    border-color: var(--faint, $fallback--faint);
-    border-radius: $fallback--inputRadius;
-    border-radius: var(--inputRadius, $fallback--inputRadius);
-    color: $fallback--text;
-    color: var(--text, $fallback--text);
+    border: 1px solid var(--border);
+    border-radius: var(--roundness);
     display: block;
     padding: 0.5em;
     margin: 0.5em 0;
diff --git a/src/components/report/report.vue b/src/components/report/report.vue
index 1f19cc253..32aaaffdc 100644
--- a/src/components/report/report.vue
+++ b/src/components/report/report.vue
@@ -17,7 +17,7 @@
       <Select
         :id="report-state"
         v-model="state"
-        class="form-control"
+        class="input form-control"
       >
         <option
           v-for="state in ['open', 'closed', 'resolved']"
diff --git a/src/components/retweet_button/retweet_button.js b/src/components/retweet_button/retweet_button.js
deleted file mode 100644
index 198b6c14b..000000000
--- a/src/components/retweet_button/retweet_button.js
+++ /dev/null
@@ -1,68 +0,0 @@
-import ConfirmModal from '../confirm_modal/confirm_modal.vue'
-import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faRetweet,
-  faPlus,
-  faMinus,
-  faCheck
-} from '@fortawesome/free-solid-svg-icons'
-
-library.add(
-  faRetweet,
-  faPlus,
-  faMinus,
-  faCheck
-)
-
-const RetweetButton = {
-  props: ['status', 'loggedIn', 'visibility'],
-  components: {
-    ConfirmModal
-  },
-  data () {
-    return {
-      animated: false,
-      showingConfirmDialog: false
-    }
-  },
-  methods: {
-    retweet () {
-      if (!this.status.repeated && this.shouldConfirmRepeat) {
-        this.showConfirmDialog()
-      } else {
-        this.doRetweet()
-      }
-    },
-    doRetweet () {
-      if (!this.status.repeated) {
-        this.$store.dispatch('retweet', { id: this.status.id })
-      } else {
-        this.$store.dispatch('unretweet', { id: this.status.id })
-      }
-      this.animated = true
-      setTimeout(() => {
-        this.animated = false
-      }, 500)
-      this.hideConfirmDialog()
-    },
-    showConfirmDialog () {
-      this.showingConfirmDialog = true
-    },
-    hideConfirmDialog () {
-      this.showingConfirmDialog = false
-    }
-  },
-  computed: {
-    mergedConfig () {
-      return this.$store.getters.mergedConfig
-    },
-    remoteInteractionLink () {
-      return this.$store.getters.remoteInteractionLink({ statusId: this.status.id })
-    },
-    shouldConfirmRepeat () {
-      return this.mergedConfig.modalOnRepeat
-    }
-  }
-}
-
-export default RetweetButton
diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue
deleted file mode 100644
index e1b6b153e..000000000
--- a/src/components/retweet_button/retweet_button.vue
+++ /dev/null
@@ -1,135 +0,0 @@
-<template>
-  <div class="RetweetButton">
-    <button
-      v-if="visibility !== 'private' && visibility !== 'direct' && loggedIn"
-      class="button-unstyled interactive"
-      :class="status.repeated && '-repeated'"
-      :title="$t('tool_tip.repeat')"
-      @click.prevent="retweet()"
-    >
-      <FALayers class="fa-old-padding-layer">
-        <FAIcon
-          class="fa-scale-110"
-          icon="retweet"
-          :spin="animated"
-        />
-        <FAIcon
-          v-if="status.repeated"
-          class="active-marker"
-          transform="shrink-6 up-9 right-12"
-          icon="check"
-        />
-        <FAIcon
-          v-if="!status.repeated"
-          class="focus-marker"
-          transform="shrink-6 up-9 right-12"
-          icon="plus"
-        />
-        <FAIcon
-          v-else
-          class="focus-marker"
-          transform="shrink-6 up-9 right-12"
-          icon="minus"
-        />
-      </FALayers>
-    </button>
-    <span v-else-if="loggedIn">
-      <FAIcon
-        class="fa-scale-110 fa-old-padding"
-        icon="lock"
-        :title="$t('timeline.no_retweet_hint')"
-      />
-    </span>
-    <a
-      v-else
-      class="button-unstyled interactive"
-      target="_blank"
-      role="button"
-      :title="$t('tool_tip.repeat')"
-      :href="remoteInteractionLink"
-    >
-      <FALayers class="fa-old-padding-layer">
-        <FAIcon
-          class="fa-scale-110"
-          icon="retweet"
-        />
-        <FAIcon
-          class="focus-marker"
-          transform="shrink-6 up-9 right-12"
-          icon="plus"
-        />
-      </FALayers>
-    </a>
-    <span
-      v-if="!mergedConfig.hidePostStats && status.repeat_num > 0"
-      class="no-event"
-    >
-      {{ status.repeat_num }}
-    </span>
-    <teleport to="#modal">
-      <confirm-modal
-        v-if="showingConfirmDialog"
-        :title="$t('status.repeat_confirm_title')"
-        :confirm-text="$t('status.repeat_confirm_accept_button')"
-        :cancel-text="$t('status.repeat_confirm_cancel_button')"
-        @accepted="doRetweet"
-        @cancelled="hideConfirmDialog"
-      >
-        {{ $t('status.repeat_confirm') }}
-      </confirm-modal>
-    </teleport>
-  </div>
-</template>
-
-<script src="./retweet_button.js"></script>
-
-<style lang="scss">
-@import "../../variables";
-@import "../../mixins";
-
-.RetweetButton {
-  display: flex;
-
-  > :first-child {
-    padding: 10px;
-    margin: -10px -8px -10px -10px;
-  }
-
-  .action-counter {
-    pointer-events: none;
-    user-select: none;
-  }
-
-  .interactive {
-    .svg-inline--fa {
-      animation-duration: 0.6s;
-    }
-
-    &:hover .svg-inline--fa,
-    &.-repeated .svg-inline--fa {
-      color: $fallback--cGreen;
-      color: var(--cGreen, $fallback--cGreen);
-    }
-
-    @include unfocused-style {
-      .focus-marker {
-        visibility: hidden;
-      }
-
-      .active-marker {
-        visibility: visible;
-      }
-    }
-
-    @include focused-style {
-      .focus-marker {
-        visibility: visible;
-      }
-
-      .active-marker {
-        visibility: hidden;
-      }
-    }
-  }
-}
-</style>
diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx
index 7881e365c..99d7daca8 100644
--- a/src/components/rich_content/rich_content.jsx
+++ b/src/components/rich_content/rich_content.jsx
@@ -8,6 +8,27 @@ import HashtagLink from 'src/components/hashtag_link/hashtag_link.vue'
 
 import './rich_content.scss'
 
+const MAYBE_LINE_BREAKING_ELEMENTS = [
+  'blockquote',
+  'br',
+  'hr',
+  'ul',
+  'ol',
+  'li',
+  'p',
+  'table',
+  'tbody',
+  'td',
+  'th',
+  'thead',
+  'tr',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5'
+]
+
 /**
  * RichContent, The Über-powered component for rendering Post HTML.
  *
@@ -58,6 +79,12 @@ export default {
       required: false,
       type: Boolean,
       default: false
+    },
+    // Faint style (for notifs)
+    faint: {
+      required: false,
+      type: Boolean,
+      default: false
     }
   },
   // NEVER EVER TOUCH DATA INSIDE RENDER
@@ -149,7 +176,9 @@ export default {
       // Handle tag nodes
       if (Array.isArray(item)) {
         const [opener, children, closer] = item
-        const Tag = getTagName(opener)
+        let Tag = getTagName(opener)
+        if (Tag.toLowerCase() === 'script') Tag = 'js-exploit'
+        if (Tag.toLowerCase() === 'style') Tag = 'css-exploit'
         const fullAttrs = getAttrs(opener, () => true)
         const attrs = getAttrs(opener)
         const previouslyMentions = currentMentions !== null
@@ -164,25 +193,22 @@ export default {
               !(children && typeof children[0] === 'string' && children[0].match(/^\s/))
                 ? lastSpacing
                 : ''
-        switch (Tag) {
-          case 'br':
+        if (MAYBE_LINE_BREAKING_ELEMENTS.includes(Tag)) {
+          // all the elements that can cause a line change
+          currentMentions = null
+        } else if (Tag === 'img') { // replace images with StillImage
+          return ['', [mentionsLinePadding, renderImage(opener)], '']
+        } else if (Tag === 'a' && this.handleLinks) { // replace mentions with MentionLink
+          if (fullAttrs.class && fullAttrs.class.includes('mention')) {
+            // Handling mentions here
+            return renderMention(attrs, children)
+          } else {
             currentMentions = null
-            break
-          case 'img': // replace images with StillImage
-            return ['', [mentionsLinePadding, renderImage(opener)], '']
-          case 'a': // replace mentions with MentionLink
-            if (!this.handleLinks) break
-            if (fullAttrs.class && fullAttrs.class.includes('mention')) {
-              // Handling mentions here
-              return renderMention(attrs, children)
-            } else {
-              currentMentions = null
-              break
-            }
-          case 'span':
-            if (this.handleLinks && fullAttrs.class && fullAttrs.class.includes('h-card')) {
-              return ['', children.map(processItem), '']
-            }
+          }
+        } else if (Tag === 'span') {
+          if (this.handleLinks && fullAttrs.class && fullAttrs.class.includes('h-card')) {
+            return ['', children.map(processItem), '']
+          }
         }
 
         if (children !== undefined) {
@@ -257,7 +283,7 @@ export default {
     // DO NOT USE SLOTS they cause a re-render feedback loop here.
     // slots updated -> rerender -> emit -> update up the tree -> rerender -> ...
     // at least until vue3?
-    const result = <span class="RichContent">
+    const result = <span class={['RichContent', this.faint ? '-faint' : '']}>
       { pass2 }
     </span>
 
diff --git a/src/components/rich_content/rich_content.scss b/src/components/rich_content/rich_content.scss
index e5d353ac0..140be2f98 100644
--- a/src/components/rich_content/rich_content.scss
+++ b/src/components/rich_content/rich_content.scss
@@ -1,10 +1,23 @@
-@import "../../variables";
-
 .RichContent {
+  font-family: var(--font);
+
+  &.-faint {
+    /* stylelint-disable declaration-no-important */
+    --text: var(--textFaint) !important;
+    --link: var(--linkFaint) !important;
+    --funtextGreentext: var(--funtextGreentextFaint) !important;
+    --funtextCyantext: var(--funtextCyantextFaint) !important;
+    /* stylelint-enable declaration-no-important */
+
+    a {
+      color: var(--linkFaint);
+    }
+  }
+
   blockquote {
     margin: 0.2em 0 0.2em 0.2em;
     font-style: italic;
-    border-left: 0.2em solid var(--faint, $fallback--faint);
+    border-left: 0.2em solid var(--textFaint);
     padding-left: 1em;
   }
 
@@ -17,7 +30,7 @@
   kbd,
   var,
   pre {
-    font-family: var(--postCodeFont, monospace);
+    font-family: var(--monoFont);
   }
 
   p {
@@ -65,4 +78,17 @@
     vertical-align: middle;
     object-fit: contain;
   }
+
+  .greentext {
+    color: var(--funtextGreentext);
+  }
+
+  .cyantext {
+    color: var(--funtextCyantext);
+  }
+}
+
+a .RichContent {
+  /* stylelint-disable-next-line declaration-no-important */
+  color: var(--link) !important;
 }
diff --git a/src/components/rich_content/rich_content.style.js b/src/components/rich_content/rich_content.style.js
new file mode 100644
index 000000000..d9cd17aee
--- /dev/null
+++ b/src/components/rich_content/rich_content.style.js
@@ -0,0 +1,19 @@
+export default {
+  name: 'RichContent',
+  selector: '.RichContent',
+  notEditable: true,
+  validInnerComponents: [
+    'Text',
+    'FunText',
+    'Link'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        '--font': 'generic | inherit',
+        '--monoFont': 'generic | monospace',
+        textNoCssColor: 'yes'
+      }
+    }
+  ]
+}
diff --git a/src/components/root.style.js b/src/components/root.style.js
new file mode 100644
index 000000000..9ad614c78
--- /dev/null
+++ b/src/components/root.style.js
@@ -0,0 +1,55 @@
+export default {
+  name: 'Root',
+  selector: ':root',
+  notEditable: true,
+  validInnerComponents: [
+    // These are purely for --parent--text et such to work
+    'Text',
+    'Link',
+    'Border',
+
+    'Underlay',
+    'Modals',
+    'Popover',
+    'TopBar',
+    'Scrollbar',
+    'ScrollbarElement',
+    'MobileDrawer',
+    'Alert',
+    'Button' // mobile post button
+  ],
+  validInnerComponentsLite: [
+    'Underlay',
+    'Scrollbar',
+    'ScrollbarElement'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        // These are here just to establish order,
+        // themes should override those
+        '--bg': 'color | #121a24',
+        '--fg': 'color | #182230',
+        '--text': 'color | #b9b9ba',
+        '--link': 'color | #d8a070',
+        '--accent': 'color | #d8a070',
+        '--cRed': 'color | #FF0000',
+        '--cBlue': 'color | #0095ff',
+        '--cGreen': 'color | #0fa00f',
+        '--cOrange': 'color | #ffa500',
+
+        // Fonts
+        '--font': 'generic | sans-serif',
+        '--monoFont': 'generic | monospace',
+
+        // Fallback no-background-image color
+        // (also useful in some other places like scrollbars)
+        '--wallpaper': 'color | --bg, -2',
+
+        // Selection colors
+        '--selectionBackground': 'color | --accent',
+        '--selectionText': 'color | $textColor(--accent --text no-preserve)'
+      }
+    }
+  ]
+}
diff --git a/src/components/roundness_input/roundness_input.vue b/src/components/roundness_input/roundness_input.vue
new file mode 100644
index 000000000..022a184e6
--- /dev/null
+++ b/src/components/roundness_input/roundness_input.vue
@@ -0,0 +1,51 @@
+<template>
+  <div
+    class="roundness-control style-control"
+    :class="{ disabled: !present || disabled }"
+  >
+    <label
+      :for="name"
+      class="label"
+      :class="{ faint: !present || disabled }"
+    >
+      {{ label }}
+    </label>
+    <Checkbox
+      v-if="typeof fallback !== 'undefined'"
+      :model-value="present"
+      :disabled="disabled"
+      class="opt"
+      @update:modelValue="$emit('update:modelValue', !present ? fallback : undefined)"
+    />
+    <input
+      :id="name"
+      class="input input-number"
+      type="number"
+      :value="modelValue || fallback"
+      :disabled="!present || disabled"
+      :class="{ disabled: !present || disabled }"
+      max="999"
+      min="0"
+      step="1"
+      @input="$emit('update:modelValue', $event.target.value)"
+    >
+  </div>
+</template>
+
+<script>
+import Checkbox from '../checkbox/checkbox.vue'
+export default {
+  components: {
+    Checkbox
+  },
+  props: [
+    'name', 'label', 'modelValue', 'fallback', 'disabled'
+  ],
+  emits: ['update:modelValue'],
+  computed: {
+    present () {
+      return typeof this.modelValue !== 'undefined'
+    }
+  }
+}
+</script>
diff --git a/src/components/scope_selector/scope_selector.js b/src/components/scope_selector/scope_selector.js
index 74bf7284a..52cda368b 100644
--- a/src/components/scope_selector/scope_selector.js
+++ b/src/components/scope_selector/scope_selector.js
@@ -44,10 +44,10 @@ const ScopeSelector = {
     },
     css () {
       return {
-        public: { selected: this.currentScope === 'public' },
-        unlisted: { selected: this.currentScope === 'unlisted' },
-        private: { selected: this.currentScope === 'private' },
-        direct: { selected: this.currentScope === 'direct' }
+        public: { toggled: this.currentScope === 'public' },
+        unlisted: { toggled: this.currentScope === 'unlisted' },
+        private: { toggled: this.currentScope === 'private' },
+        direct: { toggled: this.currentScope === 'direct' }
       }
     }
   },
diff --git a/src/components/scope_selector/scope_selector.vue b/src/components/scope_selector/scope_selector.vue
index d6e7265b2..b90ae0205 100644
--- a/src/components/scope_selector/scope_selector.vue
+++ b/src/components/scope_selector/scope_selector.vue
@@ -64,8 +64,6 @@
 <script src="./scope_selector.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .ScopeSelector {
   .scope {
     display: inline-block;
@@ -73,11 +71,6 @@
     min-width: 1.3em;
     min-height: 1.3em;
     text-align: center;
-
-    &.selected svg {
-      color: $fallback--lightText;
-      color: var(--lightText, $fallback--lightText);
-    }
   }
 }
 </style>
diff --git a/src/components/screen_reader_notice/screen_reader_notice.js b/src/components/screen_reader_notice/screen_reader_notice.js
index 3b8eaf372..794b855ac 100644
--- a/src/components/screen_reader_notice/screen_reader_notice.js
+++ b/src/components/screen_reader_notice/screen_reader_notice.js
@@ -2,7 +2,7 @@ const ScreenReaderNotice = {
   props: {
     ariaLive: {
       type: String,
-      defualt: 'assertive'
+      default: 'assertive'
     }
   },
   data () {
diff --git a/src/components/scrollbar.style.js b/src/components/scrollbar.style.js
new file mode 100644
index 000000000..1168f67d8
--- /dev/null
+++ b/src/components/scrollbar.style.js
@@ -0,0 +1,12 @@
+export default {
+  name: 'Scrollbar',
+  selector: ['::-webkit-scrollbar-button', '::-webkit-scrollbar-thumb', '::-webkit-resizer'],
+  notEditable: true, // for now
+  defaultRules: [
+    {
+      directives: {
+        background: '--wallpaper'
+      }
+    }
+  ]
+}
diff --git a/src/components/scrollbar_element.style.js b/src/components/scrollbar_element.style.js
new file mode 100644
index 000000000..caa239aab
--- /dev/null
+++ b/src/components/scrollbar_element.style.js
@@ -0,0 +1,102 @@
+const border = (top, shadow) => ({
+  x: 0,
+  y: top ? 1 : -1,
+  blur: 0,
+  spread: 0,
+  color: shadow ? '#000000' : '#FFFFFF',
+  alpha: 0.2,
+  inset: true
+})
+
+const buttonInsetFakeBorders = [border(true, false), border(false, true)]
+const inputInsetFakeBorders = [border(true, true), border(false, false)]
+const buttonOuterShadow = {
+  x: 0,
+  y: 0,
+  blur: 2,
+  spread: 0,
+  color: '#000000',
+  alpha: 1
+}
+
+const hoverGlow = {
+  x: 0,
+  y: 0,
+  blur: 4,
+  spread: 0,
+  color: '--text',
+  alpha: 1
+}
+
+export default {
+  name: 'ScrollbarElement',
+  selector: '::-webkit-scrollbar-button',
+  notEditable: true, // for now
+  states: {
+    pressed: ':active',
+    hover: ':hover:not(:disabled)',
+    disabled: ':disabled'
+  },
+  validInnerComponents: [
+    'Text'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        background: '--fg',
+        shadow: [buttonOuterShadow, ...buttonInsetFakeBorders],
+        roundness: 3
+      }
+    },
+    {
+      state: ['hover'],
+      directives: {
+        shadow: [hoverGlow, ...buttonInsetFakeBorders]
+      }
+    },
+    {
+      state: ['pressed'],
+      directives: {
+        shadow: [buttonOuterShadow, ...inputInsetFakeBorders]
+      }
+    },
+    {
+      state: ['hover', 'pressed'],
+      directives: {
+        shadow: [hoverGlow, ...inputInsetFakeBorders]
+      }
+    },
+    {
+      state: ['toggled'],
+      directives: {
+        background: '--accent,-24.2',
+        shadow: [buttonOuterShadow, ...inputInsetFakeBorders]
+      }
+    },
+    {
+      state: ['toggled', 'hover'],
+      directives: {
+        background: '--accent,-24.2',
+        shadow: [hoverGlow, ...inputInsetFakeBorders]
+      }
+    },
+    {
+      state: ['disabled'],
+      directives: {
+        background: '$blend(--inheritedBackground 0.25 --parent)',
+        shadow: [...buttonInsetFakeBorders]
+      }
+    },
+    {
+      component: 'Text',
+      parent: {
+        component: 'Button',
+        state: ['disabled']
+      },
+      directives: {
+        textOpacity: 0.25,
+        textOpacityMode: 'blend'
+      }
+    }
+  ]
+}
diff --git a/src/components/search/search.vue b/src/components/search/search.vue
index 19b9c5779..00e700cfb 100644
--- a/src/components/search/search.vue
+++ b/src/components/search/search.vue
@@ -1,15 +1,15 @@
 <template>
-  <div class="panel panel-default">
+  <div class="Search panel panel-default">
     <div class="panel-heading">
-      <div class="title">
+      <h1 class="title">
         {{ $t('nav.search') }}
-      </div>
+      </h1>
     </div>
-    <div class="search-input-container">
+    <div class="panel-body search-input-container">
       <input
         ref="searchInput"
         v-model="searchTerm"
-        class="search-input"
+        class="input search-input"
         :placeholder="$t('nav.search')"
         @keyup.enter="newQuery(searchTerm)"
       >
@@ -23,7 +23,7 @@
     </div>
     <div
       v-if="loading && statusesOffset == 0"
-      class="text-center loading-icon"
+      class="panel-body text-center loading-icon"
     >
       <FAIcon
         icon="circle-notch"
@@ -67,7 +67,7 @@
         />
         <button
           v-if="!loading && loaded && lastStatusFetchCount > 0"
-          class="more-statuses-button button-unstyled -link -fullwidth"
+          class="more-statuses-button button-unstyled -link"
           @click.prevent="search(searchTerm, 'statuses')"
         >
           <div class="new-status-notification text-center">
@@ -148,11 +148,8 @@
 <script src="./search.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .search-result-heading {
-  color: $fallback--faint;
-  color: var(--faint, $fallback--faint);
+  color: var(--faint);
   padding: 0.75rem;
   text-align: center;
 }
@@ -171,17 +168,7 @@
 .search-result {
   box-sizing: border-box;
   border-bottom: 1px solid;
-  border-color: $fallback--border;
-  border-color: var(--border, $fallback--border);
-}
-
-.search-result-footer {
-  border-width: 1px 0 0;
-  border-style: solid;
-  border-color: var(--border, $fallback--border);
-  padding: 10px;
-  background-color: $fallback--fg;
-  background-color: var(--panel, $fallback--fg);
+  border-color: var(--border);
 }
 
 .search-input-container {
@@ -212,8 +199,7 @@
 
   .hashtag {
     flex: 1 1 auto;
-    color: $fallback--text;
-    color: var(--text, $fallback--text);
+    color: var(--text);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -226,14 +212,14 @@
     line-height: 2.25rem;
     font-weight: 500;
     text-align: center;
-    color: $fallback--text;
-    color: var(--text, $fallback--text);
+    color: var(--text);
   }
 }
 
 .more-statuses-button {
   height: 3.5em;
   line-height: 3.5em;
+  width: 100%;
 }
 
 </style>
diff --git a/src/components/search_bar/search_bar.vue b/src/components/search_bar/search_bar.vue
index 9da2b2724..d06b4e77d 100644
--- a/src/components/search_bar/search_bar.vue
+++ b/src/components/search_bar/search_bar.vue
@@ -22,7 +22,7 @@
         id="search-bar-input"
         ref="searchInput"
         v-model="searchTerm"
-        class="search-bar-input"
+        class="input search-bar-input"
         :placeholder="$t('nav.search')"
         type="text"
         @keyup.enter="find(searchTerm)"
@@ -60,8 +60,6 @@
 <script src="./search_bar.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .SearchBar {
   display: inline-flex;
   align-items: baseline;
@@ -86,8 +84,7 @@
   }
 
   .cancel-icon {
-    color: $fallback--text;
-    color: var(--btnTopBarText, $fallback--text);
+    color: var(--text);
   }
 }
 
diff --git a/src/components/select/select.vue b/src/components/select/select.vue
index 1797afc88..96be5312c 100644
--- a/src/components/select/select.vue
+++ b/src/components/select/select.vue
@@ -6,13 +6,14 @@
     <select
       :disabled="disabled"
       :value="modelValue"
-      v-bind="attrs"
+      v-bind="$attrs"
       @change="$emit('update:modelValue', $event.target.value)"
     >
       <slot />
     </select>
     {{ ' ' }}
     <FAIcon
+      v-if="!$attrs.size && !$attrs.multiple"
       class="select-down-icon"
       icon="chevron-down"
     />
@@ -22,8 +23,6 @@
 <script src="./select.js"> </script>
 
 <style lang="scss">
-@import "../../variables";
-
 /* TODO fix order of styles */
 label.Select {
   padding: 0;
@@ -32,17 +31,48 @@ label.Select {
     appearance: none;
     background: transparent;
     border: none;
-    color: $fallback--text;
-    color: var(--inputText, --text, $fallback--text);
+    color: var(--text);
     margin: 0;
     padding: 0 2em 0 0.2em;
-    font-family: sans-serif;
-    font-family: var(--inputFont, sans-serif);
+    font-family: var(--font);
     font-size: 1em;
     width: 100%;
     z-index: 1;
     height: 2em;
     line-height: 16px;
+
+    &[multiple],
+    &[size] {
+      height: 100%;
+      padding: 0.2em;
+
+      option {
+        background-color: transparent;
+
+        &:checked,
+        &.-active {
+          color: var(--selectionText);
+          background-color: var(--selectionBackground);
+        }
+      }
+    }
+  }
+
+  &.disabled,
+  &:disabled {
+    background-color: var(--background);
+    opacity: 1; /* override browser */
+    color: var(--faint);
+
+    select {
+      &[multiple],
+      &[size] {
+        option.-active {
+          color: var(--faint);
+          background: transparent;
+        }
+      }
+    }
   }
 
   .select-down-icon {
@@ -52,10 +82,9 @@ label.Select {
     right: 5px;
     height: 100%;
     width: 0.875em;
-    color: $fallback--text;
-    color: var(--inputText, $fallback--text);
+    font-family: var(--font);
     line-height: 2;
-    z-index: 0;
+    z-index: 1;
     pointer-events: none;
   }
 }
diff --git a/src/components/select/select_motion.vue b/src/components/select/select_motion.vue
new file mode 100644
index 000000000..45e278fc6
--- /dev/null
+++ b/src/components/select/select_motion.vue
@@ -0,0 +1,136 @@
+<template>
+  <div
+    class="SelectMotion btn-group"
+  >
+    <button
+      class="btn button-default"
+      :disabled="disabled"
+      @click="add"
+    >
+      <FAIcon
+        fixed-width
+        icon="plus"
+      />
+    </button>
+    <button
+      class="btn button-default"
+      :disabled="disabled || !moveUpValid"
+      :class="{ disabled: disabled || !moveUpValid }"
+      @click="moveUp"
+    >
+      <FAIcon
+        fixed-width
+        icon="chevron-up"
+      />
+    </button>
+    <button
+      class="btn button-default"
+      :disabled="disabled || !moveDnValid"
+      :class="{ disabled: disabled || !moveDnValid }"
+      @click="moveDn"
+    >
+      <FAIcon
+        fixed-width
+        icon="chevron-down"
+      />
+    </button>
+    <button
+      class="btn button-default"
+      :disabled="disabled || !present"
+      :class="{ disabled: disabled || !present }"
+      @click="del"
+    >
+      <FAIcon
+        fixed-width
+        icon="times"
+      />
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { computed, defineEmits, defineProps, nextTick } from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    type: Array,
+    required: true
+  },
+  selectedId: {
+    type: Number,
+    required: true
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  getAddValue: {
+    type: Function,
+    required: true
+  }
+})
+
+const emit = defineEmits(['update:modelValue', 'update:selectedId'])
+
+const moveUpValid = computed(() => {
+  return props.selectedId > 0
+})
+
+const present = computed(() => props.modelValue[props.selectedId] != null)
+
+const moveUp = async () => {
+  const newModel = [...props.modelValue]
+  const movable = newModel.splice(props.selectedId, 1)[0]
+  newModel.splice(props.selectedId - 1, 0, movable)
+
+  emit('update:modelValue', newModel)
+  await nextTick()
+  emit('update:selectedId', props.selectedId - 1)
+}
+
+const moveDnValid = computed(() => {
+  return props.selectedId < props.modelValue.length - 1
+})
+
+const moveDn = async () => {
+  const newModel = [...props.modelValue]
+  const movable = newModel.splice(props.selectedId.value, 1)[0]
+  newModel.splice(props.selectedId + 1, 0, movable)
+
+  emit('update:modelValue', newModel)
+  await nextTick()
+  emit('update:selectedId', props.selectedId + 1)
+}
+
+const add = async () => {
+  const newModel = [...props.modelValue, props.getAddValue()]
+
+  emit('update:modelValue', newModel)
+  await nextTick()
+  emit('update:selectedId', Math.max(newModel.length - 1, 0))
+}
+
+const del = async () => {
+  const newModel = [...props.modelValue]
+  newModel.splice(props.selectedId, 1)
+
+  emit('update:modelValue', newModel)
+  await nextTick()
+  emit('update:selectedId', newModel.length === 0 ? undefined : Math.max(props.selectedId - 1, 0))
+}
+</script>
+
+<style lang="scss">
+.SelectMotion {
+  flex: 0 0 auto;
+  display: grid;
+  grid-auto-columns: 1fr;
+  grid-auto-flow: column;
+  margin-top: 0.25em;
+
+  .button-default {
+    margin: 0;
+    padding: 0;
+  }
+}
+</style>
diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index 14910fc5d..3d3a5ff04 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@@ -23,16 +23,19 @@
     <List
       :items="items"
       :get-key="getKey"
+      :get-class="item => isSelected(item) ? '-active' : ''"
     >
       <template #item="{item}">
         <div
           class="selectable-list-item-inner"
           :class="{ 'selectable-list-item-selected-inner': isSelected(item) }"
+          @click.stop="toggle(!isSelected(item), item)"
         >
           <div class="selectable-list-checkbox-wrapper">
             <Checkbox
               :model-value="isSelected(item)"
               @update:model-value="checked => toggle(checked, item)"
+              @click.stop
             />
           </div>
           <slot
@@ -51,9 +54,11 @@
 <script src="./selectable_list.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .selectable-list {
+  --__line-height: 1.5em;
+  --__horizontal-gap: 0.75em;
+  --__vertical-gap: 0.5em;
+
   &-item-inner {
     display: flex;
     align-items: center;
@@ -63,24 +68,12 @@
     }
   }
 
-  &-item-selected-inner {
-    background-color: $fallback--lightBg;
-    background-color: var(--selectedMenu, $fallback--lightBg);
-    color: var(--selectedMenuText, $fallback--text);
-
-    --faint: var(--selectedMenuFaintText, $fallback--faint);
-    --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
-    --lightText: var(--selectedMenuLightText, $fallback--lightText);
-    --icon: var(--selectedMenuIcon, $fallback--icon);
-  }
-
   &-header {
     display: flex;
     align-items: center;
-    padding: 0.6em 0;
-    border-bottom: 2px solid;
-    border-bottom-color: $fallback--border;
-    border-bottom-color: var(--border, $fallback--border);
+    padding: var(--__vertical-gap) var(--__horizontal-gap);
+    border-bottom: 1px solid;
+    border-bottom-color: var(--border);
 
     &-actions {
       flex: 1;
@@ -88,7 +81,7 @@
   }
 
   &-checkbox-wrapper {
-    padding: 0 10px;
+    padding-right: var(--__horizontal-gap);
     flex: none;
   }
 }
diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.js b/src/components/settings_modal/admin_tabs/emoji_tab.js
new file mode 100644
index 000000000..58e1468f8
--- /dev/null
+++ b/src/components/settings_modal/admin_tabs/emoji_tab.js
@@ -0,0 +1,257 @@
+import { clone, assign } from 'lodash'
+import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
+import StringSetting from '../helpers/string_setting.vue'
+import Checkbox from 'components/checkbox/checkbox.vue'
+import StillImage from 'components/still-image/still-image.vue'
+import Select from 'components/select/select.vue'
+import Popover from 'components/popover/popover.vue'
+import ConfirmModal from 'components/confirm_modal/confirm_modal.vue'
+import ModifiedIndicator from '../helpers/modified_indicator.vue'
+import EmojiEditingPopover from '../helpers/emoji_editing_popover.vue'
+
+const EmojiTab = {
+  components: {
+    TabSwitcher,
+    StringSetting,
+    Checkbox,
+    StillImage,
+    Select,
+    Popover,
+    ConfirmModal,
+    ModifiedIndicator,
+    EmojiEditingPopover
+  },
+
+  data () {
+    return {
+      knownLocalPacks: { },
+      knownRemotePacks: { },
+      editedMetadata: { },
+      packName: '',
+      newPackName: '',
+      deleteModalVisible: false,
+      remotePackInstance: '',
+      remotePackDownloadAs: ''
+    }
+  },
+
+  provide () {
+    return { emojiAddr: this.emojiAddr }
+  },
+
+  computed: {
+    pack () {
+      return this.packName !== '' ? this.knownPacks[this.packName] : undefined
+    },
+    packMeta () {
+      if (this.editedMetadata[this.packName] === undefined) {
+        this.editedMetadata[this.packName] = clone(this.pack.pack)
+      }
+
+      return this.editedMetadata[this.packName]
+    },
+    knownPacks () {
+      // Copy the object itself but not the children, so they are still passed by reference and modified
+      const result = clone(this.knownLocalPacks)
+      for (const instName in this.knownRemotePacks) {
+        for (const instPack in this.knownRemotePacks[instName]) {
+          result[`${instPack}@${instName}`] = this.knownRemotePacks[instName][instPack]
+        }
+      }
+
+      return result
+    },
+    downloadWillReplaceLocal () {
+      return (this.remotePackDownloadAs.trim() === '' && this.pack.remote && this.pack.remote.baseName in this.knownLocalPacks) ||
+             (this.remotePackDownloadAs in this.knownLocalPacks)
+    }
+  },
+
+  methods: {
+    reloadEmoji () {
+      this.$store.state.api.backendInteractor.reloadEmoji()
+    },
+    importFromFS () {
+      this.$store.state.api.backendInteractor.importEmojiFromFS()
+    },
+    emojiAddr (name) {
+      if (this.pack.remote !== undefined) {
+        // Remote pack
+        return `${this.pack.remote.instance}/emoji/${encodeURIComponent(this.pack.remote.baseName)}/${name}`
+      } else {
+        return `${this.$store.state.instance.server}/emoji/${encodeURIComponent(this.packName)}/${name}`
+      }
+    },
+
+    createEmojiPack () {
+      this.$store.state.api.backendInteractor.createEmojiPack(
+        { name: this.newPackName }
+      ).then(resp => resp.json()).then(resp => {
+        if (resp === 'ok') {
+          return this.refreshPackList()
+        } else {
+          this.displayError(resp.error)
+          return Promise.reject(resp)
+        }
+      }).then(done => {
+        this.$refs.createPackPopover.hidePopover()
+
+        this.packName = this.newPackName
+        this.newPackName = ''
+      })
+    },
+    deleteEmojiPack () {
+      this.$store.state.api.backendInteractor.deleteEmojiPack(
+        { name: this.packName }
+      ).then(resp => resp.json()).then(resp => {
+        if (resp === 'ok') {
+          return this.refreshPackList()
+        } else {
+          this.displayError(resp.error)
+          return Promise.reject(resp)
+        }
+      }).then(done => {
+        delete this.editedMetadata[this.packName]
+
+        this.deleteModalVisible = false
+        this.packName = ''
+      })
+    },
+
+    metaEdited (prop) {
+      if (!this.pack) return
+
+      const def = this.pack.pack[prop] || ''
+      const edited = this.packMeta[prop] || ''
+      return edited !== def
+    },
+    savePackMetadata () {
+      this.$store.state.api.backendInteractor.saveEmojiPackMetadata({ name: this.packName, newData: this.packMeta }).then(
+        resp => resp.json()
+      ).then(resp => {
+        if (resp.error !== undefined) {
+          this.displayError(resp.error)
+          return
+        }
+
+        // Update actual pack data
+        this.pack.pack = resp
+        // Delete edited pack data, should auto-update itself
+        delete this.editedMetadata[this.packName]
+      })
+    },
+
+    updatePackFiles (newFiles) {
+      this.pack.files = newFiles
+      this.sortPackFiles(this.packName)
+    },
+
+    loadPacksPaginated (listFunction) {
+      const pageSize = 25
+      const allPacks = {}
+
+      return listFunction({ instance: this.remotePackInstance, page: 1, pageSize: 0 })
+        .then(data => data.json())
+        .then(data => {
+          if (data.error !== undefined) { return Promise.reject(data.error) }
+
+          let resultingPromise = Promise.resolve({})
+          for (let i = 0; i < Math.ceil(data.count / pageSize); i++) {
+            resultingPromise = resultingPromise.then(() => listFunction({ instance: this.remotePackInstance, page: i, pageSize })
+            ).then(data => data.json()).then(pageData => {
+              if (pageData.error !== undefined) { return Promise.reject(pageData.error) }
+
+              assign(allPacks, pageData.packs)
+            })
+          }
+
+          return resultingPromise
+        })
+        .then(finished => allPacks)
+        .catch(data => {
+          this.displayError(data)
+        })
+    },
+
+    refreshPackList () {
+      this.loadPacksPaginated(this.$store.state.api.backendInteractor.listEmojiPacks)
+        .then(allPacks => {
+          this.knownLocalPacks = allPacks
+          for (const name of Object.keys(this.knownLocalPacks)) {
+            this.sortPackFiles(name)
+          }
+        })
+    },
+    listRemotePacks () {
+      this.loadPacksPaginated(this.$store.state.api.backendInteractor.listRemoteEmojiPacks)
+        .then(allPacks => {
+          let inst = this.remotePackInstance
+          if (!inst.startsWith('http')) { inst = 'https://' + inst }
+          const instUrl = new URL(inst)
+          inst = instUrl.host
+
+          for (const packName in allPacks) {
+            allPacks[packName].remote = {
+              baseName: packName,
+              instance: instUrl.origin
+            }
+          }
+
+          this.knownRemotePacks[inst] = allPacks
+          for (const pack in this.knownRemotePacks[inst]) {
+            this.sortPackFiles(`${pack}@${inst}`)
+          }
+
+          this.$refs.remotePackPopover.hidePopover()
+        })
+        .catch(data => {
+          this.displayError(data)
+        })
+    },
+    downloadRemotePack () {
+      if (this.remotePackDownloadAs.trim() === '') {
+        this.remotePackDownloadAs = this.pack.remote.baseName
+      }
+
+      this.$store.state.api.backendInteractor.downloadRemoteEmojiPack({
+        instance: this.pack.remote.instance, packName: this.pack.remote.baseName, as: this.remotePackDownloadAs
+      })
+        .then(data => data.json())
+        .then(resp => {
+          if (resp === 'ok') {
+            this.$refs.dlPackPopover.hidePopover()
+
+            return this.refreshPackList()
+          } else {
+            this.displayError(resp.error)
+            return Promise.reject(resp)
+          }
+        }).then(done => {
+          this.packName = this.remotePackDownloadAs
+          this.remotePackDownloadAs = ''
+        })
+    },
+    displayError (msg) {
+      this.$store.dispatch('pushGlobalNotice', {
+        messageKey: 'admin_dash.emoji.error',
+        messageArgs: [msg],
+        level: 'error'
+      })
+    },
+    sortPackFiles (nameOfPack) {
+      // Sort by key
+      const sorted = Object.keys(this.knownPacks[nameOfPack].files).sort().reduce((acc, key) => {
+        if (key.length === 0) return acc
+        acc[key] = this.knownPacks[nameOfPack].files[key]
+        return acc
+      }, {})
+      this.knownPacks[nameOfPack].files = sorted
+    }
+  },
+
+  mounted () {
+    this.refreshPackList()
+  }
+}
+
+export default EmojiTab
diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.scss b/src/components/settings_modal/admin_tabs/emoji_tab.scss
new file mode 100644
index 000000000..3e77e0195
--- /dev/null
+++ b/src/components/settings_modal/admin_tabs/emoji_tab.scss
@@ -0,0 +1,59 @@
+.emoji-tab {
+  .btn-group .btn:not(:first-child) {
+    margin-left: 0.5em;
+  }
+
+  .pack-info-wrapper {
+    margin-top: 1em;
+  }
+
+  .emoji-info-input {
+    width: 100%;
+  }
+
+  .emoji-data-input {
+    width: 40%;
+    margin-left: 0.5em;
+    margin-right: 0.5em;
+  }
+
+  .emoji {
+    width: 32px;
+    height: 32px;
+  }
+
+  .emoji-unsaved {
+    box-shadow: 0 3px 5px var(--cBlue);
+  }
+
+  .emoji-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1em 1em;
+  }
+}
+
+.emoji-tab-popover-button:not(:first-child) {
+  margin-left: 0.5em;
+}
+
+.emoji-tab-popover-input {
+  margin-bottom: 0.5em;
+
+  label {
+    display: block;
+    margin-bottom: 0.5em;
+  }
+
+  input {
+    width: 20em;
+  }
+
+  .emoji-tab-popover-file {
+    padding-top: 3px;
+  }
+
+  .warning {
+    color: var(--cOrange);
+  }
+}
diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.vue b/src/components/settings_modal/admin_tabs/emoji_tab.vue
new file mode 100644
index 000000000..5742d2ce9
--- /dev/null
+++ b/src/components/settings_modal/admin_tabs/emoji_tab.vue
@@ -0,0 +1,358 @@
+<template>
+  <div
+    class="emoji-tab"
+    :label="$t('admin_dash.tabs.emoji')"
+  >
+    <div class="setting-item">
+      <h2>{{ $t('admin_dash.tabs.emoji') }}</h2>
+
+      <ul class="setting-list">
+        <h3>{{ $t('admin_dash.emoji.global_actions') }}</h3>
+
+        <li class="btn-group setting-item">
+          <button
+            class="button button-default btn"
+            type="button"
+            @click="reloadEmoji"
+          >
+            {{ $t('admin_dash.emoji.reload') }}
+          </button>
+          <button
+            class="button button-default btn"
+            type="button"
+            @click="importFromFS"
+          >
+            {{ $t('admin_dash.emoji.importFS') }}
+          </button>
+        </li>
+
+        <li class="btn-group setting-item">
+          <button
+            class="button button-default btn"
+            type="button"
+            @click="$refs.remotePackPopover.showPopover"
+          >
+            {{ $t('admin_dash.emoji.remote_packs') }}
+
+            <Popover
+              ref="remotePackPopover"
+              popover-class="emoji-tab-edit-popover popover-default"
+              trigger="click"
+              placement="bottom"
+              bound-to-selector=".emoji-tab"
+              :bound-to="{ x: 'container' }"
+              :offset="{ y: 5 }"
+            >
+              <template #content>
+                <div class="emoji-tab-popover-input">
+                  <h3>{{ $t('admin_dash.emoji.remote_pack_instance') }}</h3>
+                  <input
+                    v-model="remotePackInstance"
+                    class="input"
+                    :placeholder="$t('admin_dash.emoji.remote_pack_instance')"
+                  >
+                  <button
+                    class="button button-default btn emoji-tab-popover-button"
+                    type="button"
+                    @click="listRemotePacks"
+                  >
+                    {{ $t('admin_dash.emoji.do_list') }}
+                  </button>
+                </div>
+              </template>
+            </Popover>
+          </button>
+        </li>
+
+        <h3>{{ $t('admin_dash.emoji.emoji_packs') }}</h3>
+
+        <li>
+          <h4>{{ $t('admin_dash.emoji.edit_pack') }}</h4>
+
+          <Select
+            v-model="packName"
+            class="form-control"
+          >
+            <option
+              value=""
+              disabled
+              hidden
+            >
+              {{ $t('admin_dash.emoji.emoji_pack') }}
+            </option>
+            <option
+              v-for="(pack, listPackName) in knownPacks"
+              :key="listPackName"
+              :label="listPackName"
+            >
+              {{ listPackName }}
+            </option>
+          </Select>
+
+          <button
+            class="button button-default btn emoji-tab-popover-button"
+            type="button"
+            @click="$refs.createPackPopover.showPopover"
+          >
+            {{ $t('admin_dash.emoji.create_pack') }}
+          </button>
+          <Popover
+            ref="createPackPopover"
+            popover-class="emoji-tab-edit-popover popover-default"
+            trigger="click"
+            placement="bottom"
+            bound-to-selector=".emoji-tab"
+            :bound-to="{ x: 'container' }"
+            :offset="{ y: 5 }"
+          >
+            <template #content>
+              <div class="emoji-tab-popover-input">
+                <h3>{{ $t('admin_dash.emoji.new_pack_name') }}</h3>
+                <input
+                  v-model="newPackName"
+                  :placeholder="$t('admin_dash.emoji.new_pack_name')"
+                  class="input"
+                >
+                <button
+                  class="button button-default btn emoji-tab-popover-button"
+                  type="button"
+                  @click="createEmojiPack"
+                >
+                  {{ $t('admin_dash.emoji.create') }}
+                </button>
+              </div>
+            </template>
+          </Popover>
+        </li>
+      </ul>
+
+      <div v-if="pack">
+        <div class="pack-info-wrapper">
+          <ul class="setting-list">
+            <li>
+              <label>
+                {{ $t('admin_dash.emoji.description') }}
+                <ModifiedIndicator
+                  :changed="metaEdited('description')"
+                  message-key="admin_dash.emoji.metadata_changed"
+                />
+
+                <textarea
+                  v-model="packMeta.description"
+                  :disabled="pack.remote !== undefined"
+                  class="bio resize-height input"
+                />
+              </label>
+            </li>
+            <li>
+              <label>
+                {{ $t('admin_dash.emoji.homepage') }}
+                <ModifiedIndicator
+                  :changed="metaEdited('homepage')"
+                  message-key="admin_dash.emoji.metadata_changed"
+                />
+
+                <input
+                  v-model="packMeta.homepage"
+                  class="emoji-info-input input"
+                  :disabled="pack.remote !== undefined"
+                >
+              </label>
+            </li>
+            <li>
+              <label>
+                {{ $t('admin_dash.emoji.fallback_src') }}
+                <ModifiedIndicator
+                  :changed="metaEdited('fallback-src')"
+                  message-key="admin_dash.emoji.metadata_changed"
+                />
+
+                <input
+                  v-model="packMeta['fallback-src']"
+                  class="emoji-info-input input"
+                  :disabled="pack.remote !== undefined"
+                >
+              </label>
+            </li>
+            <li>
+              <label>
+                {{ $t('admin_dash.emoji.fallback_sha256') }}
+
+                <input
+                  v-model="packMeta['fallback-src-sha256']"
+                  :disabled="true"
+                  class="emoji-info-input input"
+                >
+              </label>
+            </li>
+            <li>
+              <Checkbox
+                v-model="packMeta['share-files']"
+                :disabled="pack.remote !== undefined"
+              >
+                {{ $t('admin_dash.emoji.share') }}
+              </Checkbox>
+
+              <ModifiedIndicator
+                :changed="metaEdited('share-files')"
+                message-key="admin_dash.emoji.metadata_changed"
+              />
+            </li>
+            <li class="btn-group">
+              <button
+                v-if="pack.remote === undefined"
+                class="button button-default btn"
+                type="button"
+                @click="savePackMetadata"
+              >
+                {{ $t('admin_dash.emoji.save_meta') }}
+              </button>
+              <button
+                v-if="pack.remote === undefined"
+                class="button button-default btn"
+                type="button"
+                @click="savePackMetadata"
+              >
+                {{ $t('admin_dash.emoji.revert_meta') }}
+              </button>
+
+              <button
+                v-if="pack.remote === undefined"
+                class="button button-default btn"
+                type="button"
+                @click="deleteModalVisible = true"
+              >
+                {{ $t('admin_dash.emoji.delete_pack') }}
+
+                <ConfirmModal
+                  v-if="deleteModalVisible"
+                  :title="$t('admin_dash.emoji.delete_title')"
+                  :cancel-text="$t('status.delete_confirm_cancel_button')"
+                  :confirm-text="$t('status.delete_confirm_accept_button')"
+                  @cancelled="deleteModalVisible = false"
+                  @accepted="deleteEmojiPack"
+                >
+                  {{ $t('admin_dash.emoji.delete_confirm', [packName]) }}
+                </ConfirmModal>
+              </button>
+
+              <button
+                v-if="pack.remote !== undefined"
+                class="button button-default btn"
+                type="button"
+                @click="$refs.dlPackPopover.showPopover"
+              >
+                {{ $t('admin_dash.emoji.download_pack') }}
+
+                <Popover
+                  ref="dlPackPopover"
+                  trigger="click"
+                  placement="bottom"
+                  bound-to-selector=".emoji-tab"
+                  popover-class="emoji-tab-edit-popover popover-default"
+                  :bound-to="{ x: 'container' }"
+                  :offset="{ y: 5 }"
+                >
+                  <template #content>
+                    <h3>{{ $t('admin_dash.emoji.downloading_pack', [packName]) }}</h3>
+                    <div>
+                      <div>
+                        <div class="emoji-tab-popover-input">
+                          <label>
+                            {{ $t('admin_dash.emoji.download_as_name') }}
+                            <input
+                              v-model="remotePackDownloadAs"
+                              class="emoji-data-input input"
+                              :placeholder="$t('admin_dash.emoji.download_as_name_full')"
+                            >
+                          </label>
+
+                          <div
+                            v-if="downloadWillReplaceLocal"
+                            class="warning"
+                          >
+                            <em>{{ $t('admin_dash.emoji.replace_warning') }}</em>
+                          </div>
+                        </div>
+
+                        <button
+                          class="button button-default btn"
+                          type="button"
+                          @click="downloadRemotePack"
+                        >
+                          {{ $t('admin_dash.emoji.download') }}
+                        </button>
+                      </div>
+                    </div>
+                  </template>
+                </Popover>
+              </button>
+            </li>
+          </ul>
+        </div>
+
+        <ul class="setting-list">
+          <h4>
+            {{ $t('admin_dash.emoji.files') }}
+
+            <ModifiedIndicator
+              v-if="pack"
+              :changed="$refs.emojiPopovers && $refs.emojiPopovers.some(p => p.isEdited)"
+              message-key="admin_dash.emoji.emoji_changed"
+            />
+          </h4>
+
+          <div
+            v-if="pack"
+            class="emoji-list"
+          >
+            <EmojiEditingPopover
+              v-if="pack.remote === undefined"
+              placement="bottom"
+              new-upload
+              :title="$t('admin_dash.emoji.adding_new')"
+              :pack-name="packName"
+              @updatePackFiles="updatePackFiles"
+              @displayError="displayError"
+            >
+              <template #trigger>
+                <FAIcon
+                  icon="plus"
+                  size="2x"
+                  :title="$t('admin_dash.emoji.add_file')"
+                />
+              </template>
+            </EmojiEditingPopover>
+
+            <EmojiEditingPopover
+              v-for="(file, shortcode) in pack.files"
+              ref="emojiPopovers"
+              :key="shortcode"
+              placement="top"
+              :title="$t('admin_dash.emoji.editing', [shortcode])"
+              :disabled="pack.remote !== undefined"
+              :shortcode="shortcode"
+              :file="file"
+              :pack-name="packName"
+              @updatePackFiles="updatePackFiles"
+              @displayError="displayError"
+            >
+              <template #trigger>
+                <StillImage
+                  class="emoji"
+                  :src="emojiAddr(file)"
+                  :title="`:${shortcode}:`"
+                  :alt="`:${shortcode}:`"
+                />
+              </template>
+            </EmojiEditingPopover>
+          </div>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script src="./emoji_tab.js"></script>
+
+<style lang="scss" src="./emoji_tab.scss"></style>
diff --git a/src/components/settings_modal/admin_tabs/frontends_tab.js b/src/components/settings_modal/admin_tabs/frontends_tab.js
new file mode 100644
index 000000000..f57310eec
--- /dev/null
+++ b/src/components/settings_modal/admin_tabs/frontends_tab.js
@@ -0,0 +1,113 @@
+import BooleanSetting from '../helpers/boolean_setting.vue'
+import ChoiceSetting from '../helpers/choice_setting.vue'
+import IntegerSetting from '../helpers/integer_setting.vue'
+import StringSetting from '../helpers/string_setting.vue'
+import GroupSetting from '../helpers/group_setting.vue'
+import Popover from 'src/components/popover/popover.vue'
+import PanelLoading from 'src/components/panel_loading/panel_loading.vue'
+
+import SharedComputedObject from '../helpers/shared_computed_object.js'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faGlobe
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faGlobe
+)
+
+const FrontendsTab = {
+  provide () {
+    return {
+      defaultDraftMode: true,
+      defaultSource: 'admin'
+    }
+  },
+  data () {
+    return {
+      working: false
+    }
+  },
+  components: {
+    BooleanSetting,
+    ChoiceSetting,
+    IntegerSetting,
+    StringSetting,
+    GroupSetting,
+    PanelLoading,
+    Popover
+  },
+  created () {
+    if (this.user.rights.admin) {
+      this.$store.dispatch('loadFrontendsStuff')
+    }
+  },
+  computed: {
+    frontends () {
+      return this.$store.state.adminSettings.frontends
+    },
+    ...SharedComputedObject()
+  },
+  methods: {
+    canInstall (frontend) {
+      const fe = this.frontends.find(f => f.name === frontend.name)
+      if (!fe) return false
+      return fe.refs.includes(frontend.ref)
+    },
+    getSuggestedRef (frontend) {
+      if (this.adminDraft) {
+        const defaultFe = this.adminDraft[':pleroma'][':frontends'][':primary']
+        if (defaultFe?.name === frontend.name && this.canInstall(defaultFe)) {
+          return defaultFe.ref
+        } else {
+          return frontend.refs[0]
+        }
+      } else {
+        return frontend.refs[0]
+      }
+    },
+    update (frontend, suggestRef) {
+      const ref = suggestRef || this.getSuggestedRef(frontend)
+      const { name } = frontend
+      const payload = { name, ref }
+
+      this.working = true
+      this.$store.state.api.backendInteractor.installFrontend({ payload })
+        .finally(() => {
+          this.working = false
+        })
+        .then(async (response) => {
+          this.$store.dispatch('loadFrontendsStuff')
+          if (response.error) {
+            const reason = await response.error.json()
+            this.$store.dispatch('pushGlobalNotice', {
+              level: 'error',
+              messageKey: 'admin_dash.frontend.failure_installing_frontend',
+              messageArgs: {
+                version: name + '/' + ref,
+                reason: reason.error
+              },
+              timeout: 5000
+            })
+          } else {
+            this.$store.dispatch('pushGlobalNotice', {
+              level: 'success',
+              messageKey: 'admin_dash.frontend.success_installing_frontend',
+              messageArgs: {
+                version: name + '/' + ref
+              },
+              timeout: 2000
+            })
+          }
+        })
+    },
+    setDefault (frontend, suggestRef) {
+      const ref = suggestRef || this.getSuggestedRef(frontend)
+      const { name } = frontend
+
+      this.$store.commit('updateAdminDraft', { path: [':pleroma', ':frontends', ':primary'], value: { name, ref } })
+    }
+  }
+}
+
+export default FrontendsTab
diff --git a/src/components/settings_modal/admin_tabs/frontends_tab.scss b/src/components/settings_modal/admin_tabs/frontends_tab.scss
new file mode 100644
index 000000000..420d20b35
--- /dev/null
+++ b/src/components/settings_modal/admin_tabs/frontends_tab.scss
@@ -0,0 +1,29 @@
+.frontends-tab {
+  .cards-list {
+    padding: 0;
+  }
+
+  .relative {
+    position: relative;
+  }
+
+  .overlay {
+    position: absolute;
+    background: var(--bg);
+    // fix buttons showing through
+    z-index: 2;
+    opacity: 0.9;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+
+  dd {
+    text-overflow: ellipsis;
+    word-wrap: nowrap;
+    white-space: nowrap;
+    overflow-x: hidden;
+    max-width: 10em;
+  }
+}
diff --git a/src/components/settings_modal/admin_tabs/frontends_tab.vue b/src/components/settings_modal/admin_tabs/frontends_tab.vue
new file mode 100644
index 000000000..954d9ef51
--- /dev/null
+++ b/src/components/settings_modal/admin_tabs/frontends_tab.vue
@@ -0,0 +1,229 @@
+<template>
+  <div
+    class="frontends-tab"
+    :label="$t('admin_dash.tabs.frontends')"
+  >
+    <div class="setting-item">
+      <h2>{{ $t('admin_dash.tabs.frontends') }}</h2>
+      <p>{{ $t('admin_dash.frontend.wip_notice') }}</p>
+      <ul
+        v-if="adminDraft"
+        class="setting-list"
+      >
+        <li>
+          <h3>{{ $t('admin_dash.frontend.default_frontend') }}</h3>
+          <p>{{ $t('admin_dash.frontend.default_frontend_tip') }}</p>
+          <ul class="setting-list">
+            <li>
+              <StringSetting path=":pleroma.:frontends.:primary.name" />
+            </li>
+            <li>
+              <StringSetting path=":pleroma.:frontends.:primary.ref" />
+            </li>
+            <li>
+              <GroupSetting path=":pleroma.:frontends.:primary" />
+            </li>
+          </ul>
+        </li>
+      </ul>
+      <div
+        v-else
+        class="setting-list"
+      >
+        {{ $t('admin_dash.frontend.default_frontend_unavail') }}
+      </div>
+
+      <div class="setting-list relative">
+        <PanelLoading
+          v-if="working"
+          class="overlay"
+        />
+        <h3>{{ $t('admin_dash.frontend.available_frontends') }}</h3>
+        <ul class="cards-list">
+          <li
+            v-for="frontend in frontends"
+            :key="frontend.name"
+          >
+            <strong>{{ frontend.name }}</strong>
+            {{ ' ' }}
+            <span v-if="adminDraft && adminDraft[':pleroma'][':frontends'][':primary']?.name === frontend.name">
+              <i18n-t
+                v-if="adminDraft && adminDraft[':pleroma'][':frontends'][':primary']?.ref === frontend.refs[0]"
+                scope="global"
+                keypath="admin_dash.frontend.is_default"
+              />
+              <i18n-t
+                v-else
+                keypath="admin_dash.frontend.is_default_custom"
+                scope="global"
+              >
+                <template #version>
+                  <code>{{ adminDraft && adminDraft[':pleroma'][':frontends'][':primary'].ref }}</code>
+                </template>
+              </i18n-t>
+            </span>
+            <dl>
+              <dt>{{ $t('admin_dash.frontend.repository') }}</dt>
+              <dd>
+                <a
+                  :href="frontend.git"
+                  target="_blank"
+                >{{ frontend.git }}</a>
+              </dd>
+              <template v-if="expertLevel">
+                <dt>{{ $t('admin_dash.frontend.versions') }}</dt>
+                <dd
+                  v-for="ref in frontend.refs"
+                  :key="ref"
+                >
+                  <code>{{ ref }}</code>
+                </dd>
+              </template>
+              <dt v-if="expertLevel">
+                {{ $t('admin_dash.frontend.build_url') }}
+              </dt>
+              <dd v-if="expertLevel">
+                <a
+                  :href="frontend.build_url"
+                  target="_blank"
+                >{{ frontend.build_url }}</a>
+              </dd>
+            </dl>
+            <div>
+              <span class="btn-group">
+                <button
+                  class="button button-default btn"
+                  type="button"
+                  @click="update(frontend)"
+                >
+                  {{
+                    frontend.installed
+                      ? $t('admin_dash.frontend.reinstall')
+                      : $t('admin_dash.frontend.install')
+                  }}
+                  <code>
+                    {{
+                      getSuggestedRef(frontend)
+                    }}
+                  </code>
+                </button>
+                <Popover
+                  v-if="frontend.refs.length > 1"
+                  trigger="click"
+                  class="button-dropdown"
+                  placement="bottom"
+                >
+                  <template #content="{close}">
+                    <div class="dropdown-menu">
+                      <div
+                        v-for="ref in frontend.refs"
+                        :key="ref"
+                        class="menu-item dropdown-item"
+                      >
+                        <button
+                          class="main-button"
+                          @click.prevent="update(frontend, ref)"
+                          @click="close"
+                        >
+                          <span>
+                            <i18n-t
+                              keypath="admin_dash.frontend.install_version"
+                              scope="global"
+                            >
+                              <template #version>
+                                <code>{{ ref }}</code>
+                              </template>
+                            </i18n-t>
+                          </span>
+                        </button>
+                      </div>
+                    </div>
+                  </template>
+                  <template #trigger>
+                    <button
+                      class="button button-default btn dropdown-button"
+                      type="button"
+                      :title="$t('admin_dash.frontend.more_install_options')"
+                    >
+                      <FAIcon icon="chevron-down" />
+                    </button>
+                  </template>
+                </Popover>
+              </span>
+              <span
+                v-if="frontend.installed && frontend.name !== 'admin-fe'"
+                class="btn-group"
+              >
+                <button
+                  class="button button-default btn"
+                  type="button"
+                  :disabled="
+                    !adminDraft || adminDraft[':pleroma'][':frontends'][':primary']?.name === frontend.name &&
+                      adminDraft[':pleroma'][':frontends'][':primary']?.ref === frontend.refs[0]
+                  "
+                  @click="setDefault(frontend)"
+                >
+                  {{
+                    $t('admin_dash.frontend.set_default')
+                  }}
+                  <code>
+                    {{
+                      getSuggestedRef(frontend)
+                    }}
+                  </code>
+                </button>
+                {{ ' ' }}
+                <Popover
+                  v-if="frontend.refs.length > 1"
+                  trigger="click"
+                  class="button-dropdown"
+                  placement="bottom"
+                >
+                  <template #content="{close}">
+                    <div class="dropdown-menu">
+                      <div
+                        v-for="ref in frontend.installedRefs || frontend.refs"
+                        :key="ref"
+                        class="menu-item dropdown-item"
+                      >
+                        <button
+                          class="main-button"
+                          @click.prevent="setDefault(frontend, ref)"
+                          @click="close"
+                        >
+                          <span>
+                            <i18n-t
+                              keypath="admin_dash.frontend.set_default_version"
+                              scope="global"
+                            >
+                              <template #version>
+                                <code>{{ ref }}</code>
+                              </template>
+                            </i18n-t>
+                          </span>
+                        </button>
+                      </div>
+                    </div>
+                  </template>
+                  <template #trigger>
+                    <button
+                      class="button button-default btn dropdown-button"
+                      type="button"
+                      :title="$t('admin_dash.frontend.more_default_options')"
+                    >
+                      <FAIcon icon="chevron-down" />
+                    </button>
+                  </template>
+                </Popover>
+              </span>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script src="./frontends_tab.js"></script>
+
+<style lang="scss" src="./frontends_tab.scss"></style>
diff --git a/src/components/settings_modal/admin_tabs/instance_tab.js b/src/components/settings_modal/admin_tabs/instance_tab.js
new file mode 100644
index 000000000..b07bafe8f
--- /dev/null
+++ b/src/components/settings_modal/admin_tabs/instance_tab.js
@@ -0,0 +1,38 @@
+import BooleanSetting from '../helpers/boolean_setting.vue'
+import ChoiceSetting from '../helpers/choice_setting.vue'
+import IntegerSetting from '../helpers/integer_setting.vue'
+import StringSetting from '../helpers/string_setting.vue'
+import GroupSetting from '../helpers/group_setting.vue'
+import AttachmentSetting from '../helpers/attachment_setting.vue'
+
+import SharedComputedObject from '../helpers/shared_computed_object.js'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faGlobe
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faGlobe
+)
+
+const InstanceTab = {
+  provide () {
+    return {
+      defaultDraftMode: true,
+      defaultSource: 'admin'
+    }
+  },
+  components: {
+    BooleanSetting,
+    ChoiceSetting,
+    IntegerSetting,
+    StringSetting,
+    AttachmentSetting,
+    GroupSetting
+  },
+  computed: {
+    ...SharedComputedObject()
+  }
+}
+
+export default InstanceTab
diff --git a/src/components/settings_modal/admin_tabs/instance_tab.vue b/src/components/settings_modal/admin_tabs/instance_tab.vue
new file mode 100644
index 000000000..32e8df259
--- /dev/null
+++ b/src/components/settings_modal/admin_tabs/instance_tab.vue
@@ -0,0 +1,206 @@
+<template>
+  <div :label="$t('admin_dash.tabs.instance')">
+    <div class="setting-item">
+      <h2>{{ $t('admin_dash.instance.instance') }}</h2>
+      <ul class="setting-list">
+        <li>
+          <StringSetting path=":pleroma.:instance.:name" />
+        </li>
+        <!-- See https://git.pleroma.social/pleroma/pleroma/-/merge_requests/3963 -->
+        <li v-if="adminDraft[':pleroma'][':instance'][':favicon'] !== undefined">
+          <AttachmentSetting
+            compact
+            path=":pleroma.:instance.:favicon"
+          />
+        </li>
+        <li>
+          <StringSetting path=":pleroma.:instance.:email" />
+        </li>
+        <li>
+          <StringSetting path=":pleroma.:instance.:description" />
+        </li>
+        <li>
+          <StringSetting path=":pleroma.:instance.:short_description" />
+        </li>
+        <li>
+          <AttachmentSetting
+            compact
+            path=":pleroma.:instance.:instance_thumbnail"
+          />
+        </li>
+        <li>
+          <AttachmentSetting path=":pleroma.:instance.:background_image" />
+        </li>
+      </ul>
+    </div>
+    <div class="setting-item">
+      <h2>{{ $t('admin_dash.instance.registrations') }}</h2>
+      <ul class="setting-list">
+        <li>
+          <BooleanSetting path=":pleroma.:instance.:registrations_open" />
+          <ul class="setting-list suboptions">
+            <li>
+              <BooleanSetting
+                path=":pleroma.:instance.:invites_enabled"
+                parent-path=":pleroma.:instance.:registrations_open"
+                parent-invert
+              />
+            </li>
+          </ul>
+        </li>
+        <li>
+          <BooleanSetting path=":pleroma.:instance.:birthday_required" />
+          <ul class="setting-list suboptions">
+            <li>
+              <IntegerSetting
+                path=":pleroma.:instance.:birthday_min_age"
+                parent-path=":pleroma.:instance.:birthday_required"
+              />
+            </li>
+          </ul>
+        </li>
+        <li>
+          <BooleanSetting path=":pleroma.:instance.:account_activation_required" />
+        </li>
+        <li>
+          <BooleanSetting path=":pleroma.:instance.:account_approval_required" />
+        </li>
+        <li>
+          <h3>{{ $t('admin_dash.instance.captcha_header') }}</h3>
+          <ul class="setting-list">
+            <li>
+              <BooleanSetting :path="[':pleroma', 'Pleroma.Captcha', ':enabled']" />
+              <ul class="setting-list suboptions">
+                <li>
+                  <ChoiceSetting
+                    :path="[':pleroma', 'Pleroma.Captcha', ':method']"
+                    :parent-path="[':pleroma', 'Pleroma.Captcha', ':enabled']"
+                    :option-label-map="{
+                      'Pleroma.Captcha.Native': $t('admin_dash.captcha.native'),
+                      'Pleroma.Captcha.Kocaptcha': $t('admin_dash.captcha.kocaptcha')
+                    }"
+                  />
+                  <IntegerSetting
+                    :path="[':pleroma', 'Pleroma.Captcha', ':seconds_valid']"
+                    :parent-path="[':pleroma', 'Pleroma.Captcha', ':enabled']"
+                  />
+                </li>
+                <li
+                  v-if="adminDraft[':pleroma']['Pleroma.Captcha'][':enabled'] && adminDraft[':pleroma']['Pleroma.Captcha'][':method'] === 'Pleroma.Captcha.Kocaptcha'"
+                >
+                  <h4>{{ $t('admin_dash.instance.kocaptcha') }}</h4>
+                  <ul class="setting-list">
+                    <li>
+                      <StringSetting :path="[':pleroma', 'Pleroma.Captcha.Kocaptcha', ':endpoint']" />
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </div>
+    <div class="setting-item">
+      <h2>{{ $t('admin_dash.instance.access') }}</h2>
+      <ul class="setting-list">
+        <li>
+          <BooleanSetting
+            override-backend-description
+            override-backend-description-label
+            path=":pleroma.:instance.:public"
+          />
+        </li>
+        <li>
+          <ChoiceSetting
+            override-backend-description
+            override-backend-description-label
+            path=":pleroma.:instance.:limit_to_local_content"
+          />
+        </li>
+        <li v-if="expertLevel">
+          <h3>{{ $t('admin_dash.instance.restrict.header') }}</h3>
+          <p>
+            {{ $t('admin_dash.instance.restrict.description') }}
+          </p>
+          <ul class="setting-list">
+            <li>
+              <h4>{{ $t('admin_dash.instance.restrict.timelines') }}</h4>
+              <ul class="setting-list">
+                <li>
+                  <BooleanSetting
+                    path=":pleroma.:restrict_unauthenticated.:timelines.:local"
+                    indeterminate-state=":if_instance_is_private"
+                    swap-description-and-label
+                    hide-description
+                  />
+                </li>
+                <li>
+                  <BooleanSetting
+                    path=":pleroma.:restrict_unauthenticated.:timelines.:federated"
+                    indeterminate-state=":if_instance_is_private"
+                    swap-description-and-label
+                    hide-description
+                  />
+                </li>
+                <li>
+                  <GroupSetting path=":pleroma.:restrict_unauthenticated.:timelines" />
+                </li>
+              </ul>
+            </li>
+            <li>
+              <h4>{{ $t('admin_dash.instance.restrict.profiles') }}</h4>
+              <ul class="setting-list">
+                <li>
+                  <BooleanSetting
+                    path=":pleroma.:restrict_unauthenticated.:profiles.:local"
+                    indeterminate-state=":if_instance_is_private"
+                    swap-description-and-label
+                    hide-description
+                  />
+                </li>
+                <li>
+                  <BooleanSetting
+                    path=":pleroma.:restrict_unauthenticated.:profiles.:remote"
+                    indeterminate-state=":if_instance_is_private"
+                    swap-description-and-label
+                    hide-description
+                  />
+                </li>
+                <li>
+                  <GroupSetting path=":pleroma.:restrict_unauthenticated.:profiles" />
+                </li>
+              </ul>
+            </li>
+            <li>
+              <h4>{{ $t('admin_dash.instance.restrict.activities') }}</h4>
+              <ul class="setting-list">
+                <li>
+                  <BooleanSetting
+                    path=":pleroma.:restrict_unauthenticated.:activities.:local"
+                    indeterminate-state=":if_instance_is_private"
+                    swap-description-and-label
+                    hide-description
+                  />
+                </li>
+                <li>
+                  <BooleanSetting
+                    path=":pleroma.:restrict_unauthenticated.:activities.:remote"
+                    indeterminate-state=":if_instance_is_private"
+                    swap-description-and-label
+                    hide-description
+                  />
+                </li>
+                <li>
+                  <GroupSetting path=":pleroma.:restrict_unauthenticated.:activities" />
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script src="./instance_tab.js"></script>
diff --git a/src/components/settings_modal/admin_tabs/limits_tab.js b/src/components/settings_modal/admin_tabs/limits_tab.js
new file mode 100644
index 000000000..acf7d3436
--- /dev/null
+++ b/src/components/settings_modal/admin_tabs/limits_tab.js
@@ -0,0 +1,28 @@
+import BooleanSetting from '../helpers/boolean_setting.vue'
+import ChoiceSetting from '../helpers/choice_setting.vue'
+import IntegerSetting from '../helpers/integer_setting.vue'
+import StringSetting from '../helpers/string_setting.vue'
+
+import SharedComputedObject from '../helpers/shared_computed_object.js'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faGlobe
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faGlobe
+)
+
+const LimitsTab = {
+  components: {
+    BooleanSetting,
+    ChoiceSetting,
+    IntegerSetting,
+    StringSetting
+  },
+  computed: {
+    ...SharedComputedObject()
+  }
+}
+
+export default LimitsTab
diff --git a/src/components/settings_modal/admin_tabs/limits_tab.vue b/src/components/settings_modal/admin_tabs/limits_tab.vue
new file mode 100644
index 000000000..ef4b9271d
--- /dev/null
+++ b/src/components/settings_modal/admin_tabs/limits_tab.vue
@@ -0,0 +1,136 @@
+<template>
+  <div :label="$t('admin_dash.tabs.limits')">
+    <div class="setting-item">
+      <h2>{{ $t('admin_dash.limits.arbitrary_limits') }}</h2>
+      <ul class="setting-list">
+        <li>
+          <h3>{{ $t('admin_dash.limits.posts') }}</h3>
+          <ul class="setting-list">
+            <li>
+              <IntegerSetting
+                source="admin"
+                path=":pleroma.:instance.:limit"
+                draft-mode
+              />
+            </li>
+            <li>
+              <IntegerSetting
+                source="admin"
+                path=":pleroma.:instance.:remote_limit"
+                expert="1"
+                draft-mode
+              />
+            </li>
+          </ul>
+        </li>
+        <li>
+          <h3>{{ $t('admin_dash.limits.uploads') }}</h3>
+          <ul class="setting-list">
+            <li>
+              <IntegerSetting
+                source="admin"
+                path=":pleroma.:instance.:description_limit"
+                draft-mode
+              />
+            </li>
+            <li>
+              <IntegerSetting
+                source="admin"
+                path=":pleroma.:instance.:upload_limit"
+                draft-mode
+              />
+            </li>
+            <li>
+              <IntegerSetting
+                source="admin"
+                path=":pleroma.:instance.:max_media_attachments"
+                draft-mode
+              />
+            </li>
+          </ul>
+        </li>
+        <li>
+          <h3>{{ $t('admin_dash.limits.users') }}</h3>
+          <ul class="setting-list">
+            <li>
+              <IntegerSetting
+                source="admin"
+                path=":pleroma.:instance.:max_pinned_statuses"
+                draft-mode
+              />
+            </li>
+            <li>
+              <IntegerSetting
+                source="admin"
+                path=":pleroma.:instance.:user_bio_length"
+                draft-mode
+              />
+            </li>
+            <li>
+              <IntegerSetting
+                source="admin"
+                path=":pleroma.:instance.:user_name_length"
+                draft-mode
+              />
+            </li>
+            <li>
+              <h4>{{ $t('admin_dash.limits.profile_fields') }}</h4>
+              <ul class="setting-list">
+                <li>
+                  <IntegerSetting
+                    source="admin"
+                    path=":pleroma.:instance.:max_account_fields"
+                    draft-mode
+                  />
+                </li>
+                <li>
+                  <IntegerSetting
+                    source="admin"
+                    path=":pleroma.:instance.:max_remote_account_fields"
+                    draft-mode
+                    expert="1"
+                  />
+                </li>
+                <li>
+                  <IntegerSetting
+                    source="admin"
+                    path=":pleroma.:instance.:account_field_name_length"
+                    draft-mode
+                  />
+                </li>
+                <li>
+                  <IntegerSetting
+                    source="admin"
+                    path=":pleroma.:instance.:account_field_value_length"
+                    draft-mode
+                  />
+                </li>
+              </ul>
+            </li>
+            <li>
+              <h4>{{ $t('admin_dash.limits.user_uploads') }}</h4>
+              <ul class="setting-list">
+                <li>
+                  <IntegerSetting
+                    source="admin"
+                    path=":pleroma.:instance.:avatar_upload_limit"
+                    draft-mode
+                  />
+                </li>
+                <li>
+                  <IntegerSetting
+                    source="admin"
+                    path=":pleroma.:instance.:banner_upload_limit"
+                    draft-mode
+                  />
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script src="./limits_tab.js"></script>
diff --git a/src/components/settings_modal/helpers/attachment_setting.js b/src/components/settings_modal/helpers/attachment_setting.js
new file mode 100644
index 000000000..c4c04b2b6
--- /dev/null
+++ b/src/components/settings_modal/helpers/attachment_setting.js
@@ -0,0 +1,44 @@
+import Setting from './setting.js'
+import { fileTypeExt } from 'src/services/file_type/file_type.service.js'
+import MediaUpload from 'src/components/media_upload/media_upload.vue'
+import Attachment from 'src/components/attachment/attachment.vue'
+
+export default {
+  ...Setting,
+  props: {
+    ...Setting.props,
+    compact: Boolean,
+    acceptTypes: {
+      type: String,
+      required: false,
+      default: 'image/*'
+    }
+  },
+  components: {
+    ...Setting.components,
+    MediaUpload,
+    Attachment
+  },
+  computed: {
+    ...Setting.computed,
+    attachment () {
+      const path = this.realDraftMode ? this.draft : this.state
+      // The "server" part is primarily for local dev, but could be useful for alt-domain or multiuser usage.
+      const url = path.includes('://') ? path : this.$store.state.instance.server + path
+      return {
+        mimetype: fileTypeExt(url),
+        url
+      }
+    }
+  },
+  methods: {
+    ...Setting.methods,
+    setMediaFile (fileInfo) {
+      if (this.realDraftMode) {
+        this.draft = fileInfo.url
+      } else {
+        this.configSink(this.path, fileInfo.url)
+      }
+    }
+  }
+}
diff --git a/src/components/settings_modal/helpers/attachment_setting.vue b/src/components/settings_modal/helpers/attachment_setting.vue
new file mode 100644
index 000000000..a61d56e8c
--- /dev/null
+++ b/src/components/settings_modal/helpers/attachment_setting.vue
@@ -0,0 +1,122 @@
+<template>
+  <span
+    v-if="matchesExpertLevel"
+    class="AttachmentSetting"
+    :class="{ '-compact': compact }"
+  >
+    <label
+      :for="path"
+      :class="{ 'faint': shouldBeDisabled }"
+    >
+      <template v-if="backendDescriptionLabel">
+        {{ backendDescriptionLabel + ' ' }}
+      </template>
+      <template v-else-if="source === 'admin'">
+        MISSING LABEL FOR {{ path }}
+      </template>
+      <slot v-else />
+
+    </label>
+    <p
+      v-if="backendDescriptionDescription"
+      class="setting-description"
+      :class="{ 'faint': shouldBeDisabled }"
+    >
+      {{ backendDescriptionDescription + ' ' }}
+    </p>
+    <div class="attachment-input">
+      <div class="controls control-field">
+        <label for="path">{{ $t('settings.url') }}</label>
+        <input
+          :id="path"
+          class="input string-input"
+          :disabled="shouldBeDisabled"
+          :value="realDraftMode ? draft : state"
+          @change="update"
+        >
+        {{ ' ' }}
+        <ModifiedIndicator
+          :changed="isChanged"
+          :onclick="reset"
+        />
+        <ProfileSettingIndicator :is-profile="isProfileSetting" />
+      </div>
+      <div v-if="!compact">{{ $t('settings.preview') }}</div>
+      <Attachment
+        class="attachment"
+        :compact="compact"
+        :attachment="attachment"
+        size="small"
+        hide-description
+      />
+      <div class="controls control-upload">
+        <MediaUpload
+          ref="mediaUpload"
+          class="media-upload-icon"
+          normal-button
+          :accept-types="acceptTypes"
+          @uploaded="setMediaFile"
+        />
+      </div>
+    </div>
+    <DraftButtons />
+  </span>
+</template>
+
+<script src="./attachment_setting.js"></script>
+
+<style lang="scss">
+.AttachmentSetting {
+  .attachment {
+    display: block;
+    width: 100%;
+    height: 15em;
+    margin-bottom: 0.5em;
+  }
+
+  .attachment-input {
+    margin-left: 1em;
+    display: flex;
+    flex-direction: column;
+    width: 20em;
+  }
+
+  &.-compact {
+    .attachment-input {
+      flex-direction: row;
+      align-items: flex-end;
+    }
+
+    .attachment {
+      flex: 0;
+      order: 0;
+      display: block;
+      min-width: 4em;
+      height: 4em;
+      align-self: center;
+      margin-bottom: 0;
+    }
+
+    .control-field {
+      order: 1;
+      min-width: 12em;
+      margin-left: 0.5em;
+    }
+
+    .control-upload {
+      order: 2;
+      min-width: 12em;
+      padding: 0 0.5em;
+    }
+  }
+
+  .controls {
+    margin-bottom: 0.5em;
+
+    input,
+    button {
+      width: 100%;
+    }
+  }
+}
+</style>
diff --git a/src/components/settings_modal/helpers/boolean_setting.js b/src/components/settings_modal/helpers/boolean_setting.js
index 2e6992cb9..199d3d0f0 100644
--- a/src/components/settings_modal/helpers/boolean_setting.js
+++ b/src/components/settings_modal/helpers/boolean_setting.js
@@ -1,56 +1,31 @@
-import { get, set } from 'lodash'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
-import ModifiedIndicator from './modified_indicator.vue'
-import ServerSideIndicator from './server_side_indicator.vue'
+import Setting from './setting.js'
+
 export default {
-  components: {
-    Checkbox,
-    ModifiedIndicator,
-    ServerSideIndicator
+  ...Setting,
+  props: {
+    ...Setting.props,
+    indeterminateState: [String, Object]
+  },
+  components: {
+    ...Setting.components,
+    Checkbox
   },
-  props: [
-    'path',
-    'disabled',
-    'expert'
-  ],
   computed: {
-    pathDefault () {
-      const [firstSegment, ...rest] = this.path.split('.')
-      return [firstSegment + 'DefaultValue', ...rest].join('.')
-    },
-    state () {
-      const value = get(this.$parent, this.path)
-      if (value === undefined) {
-        return this.defaultState
-      } else {
-        return value
-      }
-    },
-    defaultState () {
-      return get(this.$parent, this.pathDefault)
-    },
-    isServerSide () {
-      return this.path.startsWith('serverSide_')
-    },
-    isChanged () {
-      return !this.path.startsWith('serverSide_') && this.state !== this.defaultState
-    },
-    matchesExpertLevel () {
-      return (this.expert || 0) <= this.$parent.expertLevel
+    ...Setting.computed,
+    isIndeterminate () {
+      return this.visibleState === this.indeterminateState
     }
   },
   methods: {
-    update (e) {
-      const [firstSegment, ...rest] = this.path.split('.')
-      set(this.$parent, this.path, e)
-      // Updating nested properties does not trigger update on its parent.
-      // probably still not as reliable, but works for depth=1 at least
-      if (rest.length > 0) {
-        set(this.$parent, firstSegment, { ...get(this.$parent, firstSegment) })
+    ...Setting.methods,
+    getValue (e) {
+      // Basic tri-state toggle implementation
+      if (!!this.indeterminateState && !e && this.visibleState === true) {
+        // If we have indeterminate state, switching from true to false first goes through indeterminate
+        return this.indeterminateState
       }
-    },
-    reset () {
-      set(this.$parent, this.path, this.defaultState)
+      return e
     }
   }
 }
diff --git a/src/components/settings_modal/helpers/boolean_setting.vue b/src/components/settings_modal/helpers/boolean_setting.vue
index 411429669..5a9eab348 100644
--- a/src/components/settings_modal/helpers/boolean_setting.vue
+++ b/src/components/settings_modal/helpers/boolean_setting.vue
@@ -4,23 +4,37 @@
     class="BooleanSetting"
   >
     <Checkbox
-      :model-value="state"
-      :disabled="disabled"
+      :model-value="visibleState"
+      :disabled="shouldBeDisabled"
+      :indeterminate="isIndeterminate"
       @update:modelValue="update"
     >
       <span
-        v-if="!!$slots.default"
         class="label"
+        :class="{ 'faint': shouldBeDisabled }"
       >
-        <slot />
+        <template v-if="backendDescriptionLabel">
+          {{ backendDescriptionLabel }}
+        </template>
+        <template v-else-if="source === 'admin'">
+          MISSING LABEL FOR {{ path }}
+        </template>
+        <slot v-else />
       </span>
-      {{ ' ' }}
-      <ModifiedIndicator
-        :changed="isChanged"
-        :onclick="reset"
-      />
-      <ServerSideIndicator :server-side="isServerSide" />
     </Checkbox>
+    <ModifiedIndicator
+      :changed="isChanged"
+      :onclick="reset"
+    />
+    <ProfileSettingIndicator :is-profile="isProfileSetting" />
+    <DraftButtons />
+    <p
+      v-if="backendDescriptionDescription"
+      class="setting-description"
+      :class="{ 'faint': shouldBeDisabled }"
+    >
+      {{ backendDescriptionDescription + ' ' }}
+    </p>
   </label>
 </template>
 
diff --git a/src/components/settings_modal/helpers/choice_setting.js b/src/components/settings_modal/helpers/choice_setting.js
index 3da559fe2..bdeece760 100644
--- a/src/components/settings_modal/helpers/choice_setting.js
+++ b/src/components/settings_modal/helpers/choice_setting.js
@@ -1,51 +1,41 @@
-import { get, set } from 'lodash'
 import Select from 'src/components/select/select.vue'
-import ModifiedIndicator from './modified_indicator.vue'
-import ServerSideIndicator from './server_side_indicator.vue'
+import Setting from './setting.js'
+
 export default {
+  ...Setting,
   components: {
-    Select,
-    ModifiedIndicator,
-    ServerSideIndicator
+    ...Setting.components,
+    Select
+  },
+  props: {
+    ...Setting.props,
+    options: {
+      type: Array,
+      required: false
+    },
+    optionLabelMap: {
+      type: Object,
+      required: false,
+      default: {}
+    }
   },
-  props: [
-    'path',
-    'disabled',
-    'options',
-    'expert'
-  ],
   computed: {
-    pathDefault () {
-      const [firstSegment, ...rest] = this.path.split('.')
-      return [firstSegment + 'DefaultValue', ...rest].join('.')
-    },
-    state () {
-      const value = get(this.$parent, this.path)
-      if (value === undefined) {
-        return this.defaultState
-      } else {
-        return value
+    ...Setting.computed,
+    realOptions () {
+      if (this.realSource === 'admin') {
+        return this.backendDescriptionSuggestions.map(x => ({
+          key: x,
+          value: x,
+          label: this.optionLabelMap[x] || x
+        }))
       }
-    },
-    defaultState () {
-      return get(this.$parent, this.pathDefault)
-    },
-    isServerSide () {
-      return this.path.startsWith('serverSide_')
-    },
-    isChanged () {
-      return !this.path.startsWith('serverSide_') && this.state !== this.defaultState
-    },
-    matchesExpertLevel () {
-      return (this.expert || 0) <= this.$parent.expertLevel
+      return this.options
     }
   },
   methods: {
-    update (e) {
-      set(this.$parent, this.path, e)
-    },
-    reset () {
-      set(this.$parent, this.path, this.defaultState)
+    ...Setting.methods,
+    getValue (e) {
+      return e
     }
   }
 }
diff --git a/src/components/settings_modal/helpers/choice_setting.vue b/src/components/settings_modal/helpers/choice_setting.vue
index 8fdbb5d34..114e9b7dc 100644
--- a/src/components/settings_modal/helpers/choice_setting.vue
+++ b/src/components/settings_modal/helpers/choice_setting.vue
@@ -3,15 +3,20 @@
     v-if="matchesExpertLevel"
     class="ChoiceSetting"
   >
-    <slot />
+    <template v-if="backendDescriptionLabel">
+      {{ backendDescriptionLabel }}
+    </template>
+    <template v-else>
+      <slot />
+    </template>
     {{ ' ' }}
     <Select
-      :model-value="state"
+      :model-value="realDraftMode ? draft :state"
       :disabled="disabled"
       @update:modelValue="update"
     >
       <option
-        v-for="option in options"
+        v-for="option in realOptions"
         :key="option.key"
         :value="option.value"
       >
@@ -23,7 +28,14 @@
       :changed="isChanged"
       :onclick="reset"
     />
-    <ServerSideIndicator :server-side="isServerSide" />
+    <ProfileSettingIndicator :is-profile="isProfileSetting" />
+    <DraftButtons />
+    <p
+      v-if="backendDescriptionDescription"
+      class="setting-description"
+    >
+      {{ backendDescriptionDescription + ' ' }}
+    </p>
   </label>
 </template>
 
diff --git a/src/components/settings_modal/helpers/draft_buttons.vue b/src/components/settings_modal/helpers/draft_buttons.vue
new file mode 100644
index 000000000..46a70e866
--- /dev/null
+++ b/src/components/settings_modal/helpers/draft_buttons.vue
@@ -0,0 +1,88 @@
+<!-- this is a helper exclusive to Setting components -->
+<!-- TODO make it reusable -->
+<template>
+  <span
+    class="DraftButtons"
+  >
+    <Popover
+      v-if="$parent.isDirty"
+      trigger="hover"
+      normal-button
+      :trigger-attrs="{ 'aria-label': $t('settings.commit_value_tooltip') }"
+      @click="$parent.commitDraft"
+    >
+      <template #trigger>
+        {{ $t('settings.commit_value') }}
+      </template>
+      <template #content>
+        <div class="modified-tooltip">
+          {{ $t('settings.commit_value_tooltip') }}
+        </div>
+      </template>
+    </Popover>
+    <Popover
+      v-if="$parent.isDirty"
+      trigger="hover"
+      normal-button
+      :trigger-attrs="{ 'aria-label': $t('settings.reset_value_tooltip') }"
+      @click="$parent.reset"
+    >
+      <template #trigger>
+        {{ $t('settings.reset_value') }}
+      </template>
+      <template #content>
+        <div class="modified-tooltip">
+          {{ $t('settings.reset_value_tooltip') }}
+        </div>
+      </template>
+    </Popover>
+    <Popover
+      v-if="$parent.canHardReset"
+      trigger="hover"
+      normal-button
+      :trigger-attrs="{ 'aria-label': $t('settings.hard_reset_value_tooltip') }"
+      @click="$parent.hardReset"
+    >
+      <template #trigger>
+        {{ $t('settings.hard_reset_value') }}
+      </template>
+      <template #content>
+        <div class="modified-tooltip">
+          {{ $t('settings.hard_reset_value_tooltip') }}
+        </div>
+      </template>
+    </Popover>
+  </span>
+</template>
+
+<script>
+import Popover from 'src/components/popover/popover.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faWrench } from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faWrench
+)
+
+export default {
+  components: { Popover },
+  props: ['changed']
+}
+</script>
+
+<style lang="scss">
+.DraftButtons {
+  display: inline-block;
+  position: relative;
+
+  .button-default {
+    margin-left: 0.5em;
+  }
+}
+
+.draft-tooltip {
+  margin: 0.5em 1em;
+  min-width: 10em;
+  text-align: center;
+}
+</style>
diff --git a/src/components/settings_modal/helpers/emoji_editing_popover.vue b/src/components/settings_modal/helpers/emoji_editing_popover.vue
new file mode 100644
index 000000000..1cca45fbf
--- /dev/null
+++ b/src/components/settings_modal/helpers/emoji_editing_popover.vue
@@ -0,0 +1,236 @@
+<template>
+  <Popover
+    ref="emojiPopover"
+    trigger="click"
+    :placement="placement"
+    bound-to-selector=".emoji-list"
+    popover-class="emoji-tab-edit-popover popover-default"
+    :bound-to="{ x: 'container' }"
+    :offset="{ y: 5 }"
+    :disabled="disabled"
+    :class="{'emoji-unsaved': isEdited}"
+  >
+    <template #trigger>
+      <slot name="trigger" />
+    </template>
+    <template #content>
+      <h3>
+        {{ title }}
+      </h3>
+
+      <StillImage
+        v-if="emojiPreview"
+        class="emoji"
+        :src="emojiPreview"
+      />
+      <div
+        v-else
+        class="emoji"
+      />
+
+      <div
+        v-if="newUpload"
+        class="emoji-tab-popover-input"
+      >
+        <input
+          type="file"
+          accept="image/*"
+          class="emoji-tab-popover-file input"
+          @change="uploadFile = $event.target.files"
+        >
+      </div>
+      <div>
+        <div class="emoji-tab-popover-input">
+          <label>
+            {{ $t('admin_dash.emoji.shortcode') }}
+            <input
+              v-model="editedShortcode"
+              class="emoji-data-input input"
+              :placeholder="$t('admin_dash.emoji.new_shortcode')"
+            >
+          </label>
+        </div>
+
+        <div class="emoji-tab-popover-input">
+          <label>
+            {{ $t('admin_dash.emoji.filename') }}
+
+            <input
+              v-model="editedFile"
+              class="emoji-data-input input"
+              :placeholder="$t('admin_dash.emoji.new_filename')"
+            >
+          </label>
+        </div>
+
+        <button
+          class="button button-default btn"
+          type="button"
+          :disabled="newUpload ? uploadFile.length == 0 : !isEdited"
+          @click="newUpload ? uploadEmoji() : saveEditedEmoji()"
+        >
+          {{ $t('admin_dash.emoji.save') }}
+        </button>
+
+        <template v-if="!newUpload">
+          <button
+            class="button button-default btn emoji-tab-popover-button"
+            type="button"
+            @click="deleteModalVisible = true"
+          >
+            {{ $t('admin_dash.emoji.delete') }}
+          </button>
+          <button
+            class="button button-default btn emoji-tab-popover-button"
+            type="button"
+            @click="revertEmoji"
+          >
+            {{ $t('admin_dash.emoji.revert') }}
+          </button>
+          <ConfirmModal
+            v-if="deleteModalVisible"
+            :title="$t('admin_dash.emoji.delete_title')"
+            :cancel-text="$t('status.delete_confirm_cancel_button')"
+            :confirm-text="$t('status.delete_confirm_accept_button')"
+            @cancelled="deleteModalVisible = false"
+            @accepted="deleteEmoji"
+          >
+            {{ $t('admin_dash.emoji.delete_confirm', [shortcode]) }}
+          </ConfirmModal>
+        </template>
+      </div>
+    </template>
+  </Popover>
+</template>
+
+<script>
+import Popover from 'components/popover/popover.vue'
+import ConfirmModal from 'components/confirm_modal/confirm_modal.vue'
+import StillImage from 'components/still-image/still-image.vue'
+
+export default {
+  components: { Popover, ConfirmModal, StillImage },
+  inject: ['emojiAddr'],
+  props: {
+    placement: {
+      type: String,
+      required: true
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+
+    newUpload: Boolean,
+
+    title: {
+      type: String,
+      required: true
+    },
+    packName: {
+      type: String,
+      required: true
+    },
+    shortcode: {
+      type: String,
+      // Only exists when this is not a new upload
+      default: ''
+    },
+    file: {
+      type: String,
+      // Only exists when this is not a new upload
+      default: ''
+    }
+  },
+  emits: ['updatePackFiles', 'displayError'],
+  data () {
+    return {
+      uploadFile: [],
+      editedShortcode: this.shortcode,
+      editedFile: this.file,
+      deleteModalVisible: false
+    }
+  },
+  computed: {
+    emojiPreview () {
+      if (this.newUpload && this.uploadFile.length > 0) {
+        return URL.createObjectURL(this.uploadFile[0])
+      } else if (!this.newUpload) {
+        return this.emojiAddr(this.file)
+      }
+
+      return null
+    },
+    isEdited () {
+      return !this.newUpload && (this.editedShortcode !== this.shortcode || this.editedFile !== this.file)
+    }
+  },
+  methods: {
+    saveEditedEmoji () {
+      if (!this.isEdited) return
+
+      this.$store.state.api.backendInteractor.updateEmojiFile(
+        { packName: this.packName, shortcode: this.shortcode, newShortcode: this.editedShortcode, newFilename: this.editedFile, force: false }
+      ).then(resp => {
+        if (resp.error !== undefined) {
+          this.$emit('displayError', resp.error)
+          return Promise.reject(resp.error)
+        }
+
+        return resp.json()
+      }).then(resp => this.$emit('updatePackFiles', resp))
+    },
+    uploadEmoji () {
+      this.$store.state.api.backendInteractor.addNewEmojiFile({
+        packName: this.packName,
+        file: this.uploadFile[0],
+        shortcode: this.editedShortcode,
+        filename: this.editedFile
+      }).then(resp => resp.json()).then(resp => {
+        if (resp.error !== undefined) {
+          this.$emit('displayError', resp.error)
+          return
+        }
+
+        this.$emit('updatePackFiles', resp)
+        this.$refs.emojiPopover.hidePopover()
+
+        this.editedFile = ''
+        this.editedShortcode = ''
+        this.uploadFile = []
+      })
+    },
+    revertEmoji () {
+      this.editedFile = this.file
+      this.editedShortcode = this.shortcode
+    },
+    deleteEmoji () {
+      this.deleteModalVisible = false
+
+      this.$store.state.api.backendInteractor.deleteEmojiFile(
+        { packName: this.packName, shortcode: this.shortcode }
+      ).then(resp => resp.json()).then(resp => {
+        if (resp.error !== undefined) {
+          this.$emit('displayError', resp.error)
+          return
+        }
+
+        this.$emit('updatePackFiles', resp)
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+  .emoji-tab-edit-popover {
+    padding-left: 0.5em;
+    padding-right: 0.5em;
+    padding-bottom: 0.5em;
+
+    .emoji {
+      width: 32px;
+      height: 32px;
+    }
+  }
+</style>
diff --git a/src/components/settings_modal/helpers/group_setting.js b/src/components/settings_modal/helpers/group_setting.js
new file mode 100644
index 000000000..23a2a2025
--- /dev/null
+++ b/src/components/settings_modal/helpers/group_setting.js
@@ -0,0 +1,13 @@
+import { isEqual } from 'lodash'
+
+import Setting from './setting.js'
+
+export default {
+  ...Setting,
+  computed: {
+    ...Setting.computed,
+    isDirty () {
+      return !isEqual(this.state, this.draft)
+    }
+  }
+}
diff --git a/src/components/settings_modal/helpers/group_setting.vue b/src/components/settings_modal/helpers/group_setting.vue
new file mode 100644
index 000000000..a4df4bf35
--- /dev/null
+++ b/src/components/settings_modal/helpers/group_setting.vue
@@ -0,0 +1,15 @@
+<template>
+  <span
+    v-if="matchesExpertLevel"
+    class="GroupSetting"
+  >
+    <ModifiedIndicator
+      :changed="isChanged"
+      :onclick="reset"
+    />
+    <ProfileSettingIndicator :is-profile="isProfileSetting" />
+    <DraftButtons />
+  </span>
+</template>
+
+<script src="./group_setting.js"></script>
diff --git a/src/components/settings_modal/helpers/integer_setting.vue b/src/components/settings_modal/helpers/integer_setting.vue
index 43fa7e1a9..8206c0c45 100644
--- a/src/components/settings_modal/helpers/integer_setting.vue
+++ b/src/components/settings_modal/helpers/integer_setting.vue
@@ -1,7 +1,7 @@
 <template>
   <NumberSetting
     v-bind="$attrs"
-    truncate="1"
+    :truncate="1"
   >
     <slot />
   </NumberSetting>
diff --git a/src/components/settings_modal/helpers/modified_indicator.vue b/src/components/settings_modal/helpers/modified_indicator.vue
index 45db3fc2d..a747cebd2 100644
--- a/src/components/settings_modal/helpers/modified_indicator.vue
+++ b/src/components/settings_modal/helpers/modified_indicator.vue
@@ -15,7 +15,7 @@
       </template>
       <template #content>
         <div class="modified-tooltip">
-          {{ $t('settings.setting_changed') }}
+          {{ $t(messageKey) }}
         </div>
       </template>
     </Popover>
@@ -33,7 +33,13 @@ library.add(
 
 export default {
   components: { Popover },
-  props: ['changed']
+  props: {
+    changed: Boolean,
+    messageKey: {
+      type: String,
+      default: 'settings.setting_changed'
+    }
+  }
 }
 </script>
 
diff --git a/src/components/settings_modal/helpers/number_setting.js b/src/components/settings_modal/helpers/number_setting.js
index 73c399481..afbf5ed58 100644
--- a/src/components/settings_modal/helpers/number_setting.js
+++ b/src/components/settings_modal/helpers/number_setting.js
@@ -1,56 +1,39 @@
-import { get, set } from 'lodash'
-import ModifiedIndicator from './modified_indicator.vue'
+import Setting from './setting.js'
+
 export default {
-  components: {
-    ModifiedIndicator
-  },
+  ...Setting,
   props: {
-    path: String,
-    disabled: Boolean,
-    min: Number,
-    step: Number,
-    truncate: Number,
-    expert: [Number, String]
-  },
-  computed: {
-    pathDefault () {
-      const [firstSegment, ...rest] = this.path.split('.')
-      return [firstSegment + 'DefaultValue', ...rest].join('.')
+    ...Setting.props,
+    min: {
+      type: Number,
+      required: false,
+      default: 1
     },
-    parent () {
-      return this.$parent.$parent
+    max: {
+      type: Number,
+      required: false,
+      default: 1
     },
-    state () {
-      const value = get(this.parent, this.path)
-      if (value === undefined) {
-        return this.defaultState
-      } else {
-        return value
-      }
+    step: {
+      type: Number,
+      required: false,
+      default: 1
     },
-    defaultState () {
-      return get(this.parent, this.pathDefault)
-    },
-    isChanged () {
-      return this.state !== this.defaultState
-    },
-    matchesExpertLevel () {
-      return (this.expert || 0) <= this.parent.expertLevel
+    truncate: {
+      type: Number,
+      required: false,
+      default: 1
     }
   },
   methods: {
-    truncateValue (value) {
-      if (!this.truncate) {
-        return value
+    ...Setting.methods,
+    getValue (e) {
+      if (!this.truncate === 1) {
+        return parseInt(e.target.value)
+      } else if (this.truncate > 1) {
+        return Math.trunc(e.target.value / this.truncate) * this.truncate
       }
-
-      return Math.trunc(value / this.truncate) * this.truncate
-    },
-    update (e) {
-      set(this.parent, this.path, this.truncateValue(parseFloat(e.target.value)))
-    },
-    reset () {
-      set(this.parent, this.path, this.defaultState)
+      return parseFloat(e.target.value)
     }
   }
 }
diff --git a/src/components/settings_modal/helpers/number_setting.vue b/src/components/settings_modal/helpers/number_setting.vue
index 3eab51781..32dc6f83f 100644
--- a/src/components/settings_modal/helpers/number_setting.vue
+++ b/src/components/settings_modal/helpers/number_setting.vue
@@ -3,17 +3,27 @@
     v-if="matchesExpertLevel"
     class="NumberSetting"
   >
-    <label :for="path">
-      <slot />
+    <label
+      :for="path"
+      :class="{ 'faint': shouldBeDisabled }"
+    >
+      <template v-if="backendDescriptionLabel">
+        {{ backendDescriptionLabel + ' ' }}
+      </template>
+      <template v-else-if="source === 'admin'">
+        MISSING LABEL FOR {{ path }}
+      </template>
+      <slot v-else />
     </label>
+    {{ ' ' }}
     <input
       :id="path"
-      class="number-input"
+      class="input number-input"
       type="number"
       :step="step || 1"
-      :disabled="disabled"
+      :disabled="shouldBeDisabled"
       :min="min || 0"
-      :value="state"
+      :value="realDraftMode ? draft :state"
       @change="update"
     >
     {{ ' ' }}
@@ -21,6 +31,15 @@
       :changed="isChanged"
       :onclick="reset"
     />
+    <ProfileSettingIndicator :is-profile="isProfileSetting" />
+    <DraftButtons />
+    <p
+      v-if="backendDescriptionDescription"
+      class="setting-description"
+      :class="{ 'faint': shouldBeDisabled }"
+    >
+      {{ backendDescriptionDescription + ' ' }}
+    </p>
   </span>
 </template>
 
diff --git a/src/components/settings_modal/helpers/server_side_indicator.vue b/src/components/settings_modal/helpers/profile_setting_indicator.vue
similarity index 81%
rename from src/components/settings_modal/helpers/server_side_indicator.vue
rename to src/components/settings_modal/helpers/profile_setting_indicator.vue
index bf181959f..d160781b1 100644
--- a/src/components/settings_modal/helpers/server_side_indicator.vue
+++ b/src/components/settings_modal/helpers/profile_setting_indicator.vue
@@ -1,7 +1,7 @@
 <template>
   <span
-    v-if="serverSide"
-    class="ServerSideIndicator"
+    v-if="isProfile"
+    class="ProfileSettingIndicator"
   >
     <Popover
       trigger="hover"
@@ -14,7 +14,7 @@
         />
       </template>
       <template #content>
-        <div class="serverside-tooltip">
+        <div class="profilesetting-tooltip">
           {{ $t('settings.setting_server_side') }}
         </div>
       </template>
@@ -33,17 +33,17 @@ library.add(
 
 export default {
   components: { Popover },
-  props: ['serverSide']
+  props: ['isProfile']
 }
 </script>
 
 <style lang="scss">
-.ServerSideIndicator {
+.ProfileSettingIndicator {
   display: inline-block;
   position: relative;
 }
 
-.serverside-tooltip {
+.profilesetting-tooltip {
   margin: 0.5em 1em;
   min-width: 10em;
   text-align: center;
diff --git a/src/components/settings_modal/helpers/setting.js b/src/components/settings_modal/helpers/setting.js
new file mode 100644
index 000000000..2dc9653ea
--- /dev/null
+++ b/src/components/settings_modal/helpers/setting.js
@@ -0,0 +1,262 @@
+import ModifiedIndicator from './modified_indicator.vue'
+import ProfileSettingIndicator from './profile_setting_indicator.vue'
+import DraftButtons from './draft_buttons.vue'
+import { get, set, cloneDeep } from 'lodash'
+
+export default {
+  components: {
+    ModifiedIndicator,
+    DraftButtons,
+    ProfileSettingIndicator
+  },
+  props: {
+    modelValue: {
+      type: String,
+      default: null
+    },
+    path: {
+      type: [String, Array],
+      required: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    parentPath: {
+      type: [String, Array]
+    },
+    parentInvert: {
+      type: Boolean,
+      default: false
+    },
+    expert: {
+      type: [Number, String],
+      default: 0
+    },
+    source: {
+      type: String,
+      default: undefined
+    },
+    hideDescription: {
+      type: Boolean
+    },
+    swapDescriptionAndLabel: {
+      type: Boolean
+    },
+    overrideBackendDescription: {
+      type: Boolean
+    },
+    overrideBackendDescriptionLabel: {
+      type: Boolean
+    },
+    draftMode: {
+      type: Boolean,
+      default: undefined
+    },
+    timedApplyMode: {
+      type: Boolean,
+      default: false
+    }
+  },
+  inject: {
+    defaultSource: {
+      default: 'default'
+    },
+    defaultDraftMode: {
+      default: false
+    }
+  },
+  data () {
+    return {
+      localDraft: null
+    }
+  },
+  created () {
+    if (this.realDraftMode && (this.realSource !== 'admin' || this.path == null)) {
+      this.draft = this.state
+    }
+  },
+  computed: {
+    draft: {
+      // TODO allow passing shared draft object?
+      get () {
+        if (this.realSource === 'admin' || this.path == null) {
+          return get(this.$store.state.adminSettings.draft, this.canonPath)
+        } else {
+          return this.localDraft
+        }
+      },
+      set (value) {
+        if (this.realSource === 'admin' || this.path == null) {
+          this.$store.commit('updateAdminDraft', { path: this.canonPath, value })
+        } else {
+          this.localDraft = value
+        }
+      }
+    },
+    state () {
+      if (this.path == null) {
+        return this.modelValue
+      }
+      const value = get(this.configSource, this.canonPath)
+      if (value === undefined) {
+        return this.defaultState
+      } else {
+        return value
+      }
+    },
+    visibleState () {
+      return this.realDraftMode ? this.draft : this.state
+    },
+    realSource () {
+      return this.source || this.defaultSource
+    },
+    realDraftMode () {
+      return typeof this.draftMode === 'undefined' ? this.defaultDraftMode : this.draftMode
+    },
+    backendDescription () {
+      return get(this.$store.state.adminSettings.descriptions, this.path)
+    },
+    backendDescriptionLabel () {
+      if (this.realSource !== 'admin') return ''
+      if (!this.backendDescription || this.overrideBackendDescriptionLabel) {
+        return this.$t([
+          'admin_dash',
+          'temp_overrides',
+          ...this.canonPath.map(p => p.replace(/\./g, '_DOT_')),
+          'label'
+        ].join('.'))
+      } else {
+        return this.swapDescriptionAndLabel
+          ? this.backendDescription?.description
+          : this.backendDescription?.label
+      }
+    },
+    backendDescriptionDescription () {
+      if (this.realSource !== 'admin') return ''
+      if (this.hideDescription) return null
+      if (!this.backendDescription || this.overrideBackendDescription) {
+        return this.$t([
+          'admin_dash',
+          'temp_overrides',
+          ...this.canonPath.map(p => p.replace(/\./g, '_DOT_')),
+          'description'
+        ].join('.'))
+      } else {
+        return this.swapDescriptionAndLabel
+          ? this.backendDescription?.label
+          : this.backendDescription?.description
+      }
+    },
+    backendDescriptionSuggestions () {
+      return this.backendDescription?.suggestions
+    },
+    shouldBeDisabled () {
+      if (this.path == null) {
+        return this.disabled
+      }
+      const parentValue = this.parentPath !== undefined ? get(this.configSource, this.parentPath) : null
+      return this.disabled || (parentValue !== null ? (this.parentInvert ? parentValue : !parentValue) : false)
+    },
+    configSource () {
+      switch (this.realSource) {
+        case 'profile':
+          return this.$store.state.profileConfig
+        case 'admin':
+          return this.$store.state.adminSettings.config
+        default:
+          return this.$store.getters.mergedConfig
+      }
+    },
+    configSink () {
+      if (this.path == null) {
+        return (k, v) => this.$emit('update:modelValue', v)
+      }
+      switch (this.realSource) {
+        case 'profile':
+          return (k, v) => this.$store.dispatch('setProfileOption', { name: k, value: v })
+        case 'admin':
+          return (k, v) => this.$store.dispatch('pushAdminSetting', { path: k, value: v })
+        default:
+          if (this.timedApplyMode) {
+            return (k, v) => this.$store.dispatch('setOptionTemporarily', { name: k, value: v })
+          } else {
+            return (k, v) => this.$store.dispatch('setOption', { name: k, value: v })
+          }
+      }
+    },
+    defaultState () {
+      switch (this.realSource) {
+        case 'profile':
+          return {}
+        default:
+          return get(this.$store.getters.defaultConfig, this.path)
+      }
+    },
+    isProfileSetting () {
+      return this.realSource === 'profile'
+    },
+    isChanged () {
+      if (this.path == null) return false
+      switch (this.realSource) {
+        case 'profile':
+        case 'admin':
+          return false
+        default:
+          return this.state !== this.defaultState
+      }
+    },
+    canonPath () {
+      if (this.path == null) return null
+      return Array.isArray(this.path) ? this.path : this.path.split('.')
+    },
+    isDirty () {
+      if (this.path == null) return false
+      if (this.realSource === 'admin' && this.canonPath.length > 3) {
+        return false // should not show draft buttons for "grouped" values
+      } else {
+        return this.realDraftMode && this.draft !== this.state
+      }
+    },
+    canHardReset () {
+      return this.realSource === 'admin' && this.$store.state.adminSettings.modifiedPaths &&
+             this.$store.state.adminSettings.modifiedPaths.has(this.canonPath.join(' -> '))
+    },
+    matchesExpertLevel () {
+      return (this.expert || 0) <= this.$store.state.config.expertLevel > 0
+    }
+  },
+  methods: {
+    getValue (e) {
+      return e.target.value
+    },
+    update (e) {
+      if (this.realDraftMode) {
+        this.draft = this.getValue(e)
+      } else {
+        this.configSink(this.path, this.getValue(e))
+      }
+    },
+    commitDraft () {
+      if (this.realDraftMode) {
+        this.configSink(this.path, this.draft)
+      }
+    },
+    reset () {
+      if (this.realDraftMode) {
+        this.draft = cloneDeep(this.state)
+      } else {
+        set(this.$store.getters.mergedConfig, this.path, cloneDeep(this.defaultState))
+      }
+    },
+    hardReset () {
+      switch (this.realSource) {
+        case 'admin':
+          return this.$store.dispatch('resetAdminSetting', { path: this.path })
+            .then(() => { this.draft = this.state })
+        default:
+          console.warn('Hard reset not implemented yet!')
+      }
+    }
+  }
+}
diff --git a/src/components/settings_modal/helpers/shared_computed_object.js b/src/components/settings_modal/helpers/shared_computed_object.js
index 12431dcaf..bb3d36ac4 100644
--- a/src/components/settings_modal/helpers/shared_computed_object.js
+++ b/src/components/settings_modal/helpers/shared_computed_object.js
@@ -1,52 +1,18 @@
-import { defaultState as configDefaultState } from 'src/modules/config.js'
-import { defaultState as serverSideConfigDefaultState } from 'src/modules/serverSideConfig.js'
-
 const SharedComputedObject = () => ({
   user () {
     return this.$store.state.users.currentUser
   },
-  // Getting values for default properties
-  ...Object.keys(configDefaultState)
-    .map(key => [
-      key + 'DefaultValue',
-      function () {
-        return this.$store.getters.defaultConfig[key]
-      }
-    ])
-    .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}),
-  // Generating computed values for vuex properties
-  ...Object.keys(configDefaultState)
-    .map(key => [key, {
-      get () { return this.$store.getters.mergedConfig[key] },
-      set (value) {
-        this.$store.dispatch('setOption', { name: key, value })
-      }
-    }])
-    .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}),
-  ...Object.keys(serverSideConfigDefaultState)
-    .map(key => ['serverSide_' + key, {
-      get () { return this.$store.state.serverSideConfig[key] },
-      set (value) {
-        this.$store.dispatch('setServerSideOption', { name: key, value })
-      }
-    }])
-    .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}),
-  // Special cases (need to transform values or perform actions first)
-  useStreamingApi: {
-    get () { return this.$store.getters.mergedConfig.useStreamingApi },
-    set (value) {
-      const promise = value
-        ? this.$store.dispatch('enableMastoSockets')
-        : this.$store.dispatch('disableMastoSockets')
-
-      promise.then(() => {
-        this.$store.dispatch('setOption', { name: 'useStreamingApi', value })
-      }).catch((e) => {
-        console.error('Failed starting MastoAPI Streaming socket', e)
-        this.$store.dispatch('disableMastoSockets')
-        this.$store.dispatch('setOption', { name: 'useStreamingApi', value: false })
-      })
-    }
+  expertLevel () {
+    return this.$store.getters.mergedConfig.expertLevel > 0
+  },
+  mergedConfig () {
+    return this.$store.getters.mergedConfig
+  },
+  adminConfig () {
+    return this.$store.state.adminSettings.config
+  },
+  adminDraft () {
+    return this.$store.state.adminSettings.draft
   }
 })
 
diff --git a/src/components/settings_modal/helpers/size_setting.js b/src/components/settings_modal/helpers/size_setting.js
deleted file mode 100644
index 58697412d..000000000
--- a/src/components/settings_modal/helpers/size_setting.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import { get, set } from 'lodash'
-import ModifiedIndicator from './modified_indicator.vue'
-import Select from 'src/components/select/select.vue'
-
-export const allCssUnits = ['cm', 'mm', 'in', 'px', 'pt', 'pc', 'em', 'ex', 'ch', 'rem', 'vw', 'vh', 'vmin', 'vmax', '%']
-export const defaultHorizontalUnits = ['px', 'rem', 'vw']
-export const defaultVerticalUnits = ['px', 'rem', 'vh']
-
-export default {
-  components: {
-    ModifiedIndicator,
-    Select
-  },
-  props: {
-    path: String,
-    disabled: Boolean,
-    min: Number,
-    units: {
-      type: [String],
-      default: () => allCssUnits
-    },
-    expert: [Number, String]
-  },
-  computed: {
-    pathDefault () {
-      const [firstSegment, ...rest] = this.path.split('.')
-      return [firstSegment + 'DefaultValue', ...rest].join('.')
-    },
-    stateUnit () {
-      return (this.state || '').replace(/\d+/, '')
-    },
-    stateValue () {
-      return (this.state || '').replace(/\D+/, '')
-    },
-    state () {
-      const value = get(this.$parent, this.path)
-      if (value === undefined) {
-        return this.defaultState
-      } else {
-        return value
-      }
-    },
-    defaultState () {
-      return get(this.$parent, this.pathDefault)
-    },
-    isChanged () {
-      return this.state !== this.defaultState
-    },
-    matchesExpertLevel () {
-      return (this.expert || 0) <= this.$parent.expertLevel
-    }
-  },
-  methods: {
-    update (e) {
-      set(this.$parent, this.path, e)
-    },
-    reset () {
-      set(this.$parent, this.path, this.defaultState)
-    },
-    updateValue (e) {
-      set(this.$parent, this.path, parseInt(e.target.value) + this.stateUnit)
-    },
-    updateUnit (e) {
-      set(this.$parent, this.path, this.stateValue + e.target.value)
-    }
-  }
-}
diff --git a/src/components/settings_modal/helpers/size_setting.vue b/src/components/settings_modal/helpers/size_setting.vue
deleted file mode 100644
index 5a78f1004..000000000
--- a/src/components/settings_modal/helpers/size_setting.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<template>
-  <span
-    v-if="matchesExpertLevel"
-    class="SizeSetting"
-  >
-    <label
-      :for="path"
-      class="size-label"
-    >
-      <slot />
-    </label>
-    <input
-      :id="path"
-      class="number-input"
-      type="number"
-      step="1"
-      :disabled="disabled"
-      :min="min || 0"
-      :value="stateValue"
-      @change="updateValue"
-    >
-    <Select
-      :id="path"
-      :model-value="stateUnit"
-      :disabled="disabled"
-      class="css-unit-input"
-      @change="updateUnit"
-    >
-      <option
-        v-for="option in units"
-        :key="option"
-        :value="option"
-      >
-        {{ option }}
-      </option>
-    </Select>
-    {{ ' ' }}
-    <ModifiedIndicator
-      :changed="isChanged"
-      :onclick="reset"
-    />
-  </span>
-</template>
-
-<script src="./size_setting.js"></script>
-
-<style lang="scss">
-.css-unit-input,
-.css-unit-input select {
-  margin-left: 0.5em;
-  width: 4em;
-  max-width: 4em;
-  min-width: 4em;
-}
-</style>
diff --git a/src/components/settings_modal/helpers/string_setting.js b/src/components/settings_modal/helpers/string_setting.js
new file mode 100644
index 000000000..b368cfc8c
--- /dev/null
+++ b/src/components/settings_modal/helpers/string_setting.js
@@ -0,0 +1,5 @@
+import Setting from './setting.js'
+
+export default {
+  ...Setting
+}
diff --git a/src/components/settings_modal/helpers/string_setting.vue b/src/components/settings_modal/helpers/string_setting.vue
new file mode 100644
index 000000000..d0c70b150
--- /dev/null
+++ b/src/components/settings_modal/helpers/string_setting.vue
@@ -0,0 +1,44 @@
+<template>
+  <label
+    v-if="matchesExpertLevel"
+    class="StringSetting"
+  >
+    <label
+      :for="path"
+      class="setting-label"
+      :class="{ 'faint': shouldBeDisabled }"
+    >
+      <template v-if="backendDescriptionLabel">
+        {{ backendDescriptionLabel + ' ' }}
+      </template>
+      <template v-else-if="source === 'admin'">
+        MISSING LABEL FOR {{ path }}
+      </template>
+      <slot v-else />
+    </label>
+    {{ ' ' }}
+    <input
+      :id="path"
+      class="input string-input"
+      :disabled="shouldBeDisabled"
+      :value="realDraftMode ? draft : state"
+      @change="update"
+    >
+    {{ ' ' }}
+    <ModifiedIndicator
+      :changed="isChanged"
+      :onclick="reset"
+    />
+    <ProfileSettingIndicator :is-profile="isProfileSetting" />
+    <DraftButtons />
+    <p
+      v-if="backendDescriptionDescription"
+      class="setting-description"
+      :class="{ 'faint': shouldBeDisabled }"
+    >
+      {{ backendDescriptionDescription + ' ' }}
+    </p>
+  </label>
+</template>
+
+<script src="./string_setting.js"></script>
diff --git a/src/components/settings_modal/helpers/unit_setting.js b/src/components/settings_modal/helpers/unit_setting.js
new file mode 100644
index 000000000..daeddd813
--- /dev/null
+++ b/src/components/settings_modal/helpers/unit_setting.js
@@ -0,0 +1,64 @@
+import Select from 'src/components/select/select.vue'
+import Setting from './setting.js'
+
+export const allCssUnits = ['cm', 'mm', 'in', 'px', 'pt', 'pc', 'em', 'ex', 'ch', 'rem', 'vw', 'vh', 'vmin', 'vmax', '%']
+export const defaultHorizontalUnits = ['px', 'rem', 'vw']
+export const defaultVerticalUnits = ['px', 'rem', 'vh']
+
+export default {
+  ...Setting,
+  components: {
+    ...Setting.components,
+    Select
+  },
+  props: {
+    ...Setting.props,
+    min: Number,
+    units: {
+      type: Array,
+      default: () => allCssUnits
+    },
+    unitSet: {
+      type: String,
+      default: 'none'
+    },
+    step: {
+      type: Number,
+      default: 1
+    },
+    resetDefault: {
+      type: Object,
+      default: null
+    }
+  },
+  computed: {
+    ...Setting.computed,
+    stateUnit () {
+      return typeof this.state === 'string' ? this.state.replace(/[0-9,.]+/, '') : ''
+    },
+    stateValue () {
+      return typeof this.state === 'string' ? this.state.replace(/[^0-9,.]+/, '') : ''
+    }
+  },
+  methods: {
+    ...Setting.methods,
+    getUnitString (value) {
+      if (this.unitSet === 'none') return value
+      return this.$t(['settings', 'units', this.unitSet, value].join('.'))
+    },
+    updateValue (e) {
+      this.configSink(this.path, parseFloat(e.target.value) + this.stateUnit)
+    },
+    updateUnit (e) {
+      let value = this.stateValue
+      const newUnit = e.target.value
+      if (this.resetDefault) {
+        const replaceValue = this.resetDefault[newUnit]
+        if (replaceValue != null) {
+          value = replaceValue
+        }
+      }
+      this.configSink(this.path, value + newUnit)
+    }
+  }
+}
diff --git a/src/components/settings_modal/helpers/unit_setting.vue b/src/components/settings_modal/helpers/unit_setting.vue
new file mode 100644
index 000000000..0c0d6a689
--- /dev/null
+++ b/src/components/settings_modal/helpers/unit_setting.vue
@@ -0,0 +1,68 @@
+<template>
+  <span
+    v-if="matchesExpertLevel"
+    class="UnitSetting"
+  >
+    <label
+      :for="path"
+      class="size-label"
+    >
+      <slot />
+    </label>
+    {{ ' ' }}
+    <span class="no-break">
+      <input
+        :id="path"
+        class="input number-input"
+        type="number"
+        :step="step"
+        :disabled="disabled"
+        :min="min || 0"
+        :value="stateValue"
+        @change="updateValue"
+      >
+      <Select
+        :id="path"
+        :model-value="stateUnit"
+        :disabled="disabled"
+        class="unit-input unstyled"
+        @change="updateUnit"
+      >
+        <option
+          v-for="option in units"
+          :key="option"
+          :value="option"
+        >
+          {{ getUnitString(option) }}
+        </option>
+      </Select>
+    </span>
+    {{ ' ' }}
+    <ModifiedIndicator
+      :changed="isChanged"
+      :onclick="reset"
+    />
+  </span>
+</template>
+
+<script src="./unit_setting.js"></script>
+
+<style lang="scss">
+.UnitSetting {
+  .no-break {
+    display: inline-block;
+  }
+
+  .number-input {
+    max-width: 6.5em;
+    text-align: right;
+  }
+
+  .unit-input,
+  .unit-input select {
+    min-width: 4em;
+    width: auto;
+  }
+}
+
+</style>
diff --git a/src/components/settings_modal/settings_modal.js b/src/components/settings_modal/settings_modal.js
index 95edfeb72..57a2ba155 100644
--- a/src/components/settings_modal/settings_modal.js
+++ b/src/components/settings_modal/settings_modal.js
@@ -4,8 +4,9 @@ import AsyncComponentError from 'src/components/async_component_error/async_comp
 import getResettableAsyncComponent from 'src/services/resettable_async_component.js'
 import Popover from '../popover/popover.vue'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
+import ConfirmModal from 'src/components/confirm_modal/confirm_modal.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { cloneDeep } from 'lodash'
+import { cloneDeep, isEqual } from 'lodash'
 import {
   newImporter,
   newExporter
@@ -54,8 +55,17 @@ const SettingsModal = {
     Modal,
     Popover,
     Checkbox,
-    SettingsModalContent: getResettableAsyncComponent(
-      () => import('./settings_modal_content.vue'),
+    ConfirmModal,
+    SettingsModalUserContent: getResettableAsyncComponent(
+      () => import('./settings_modal_user_content.vue'),
+      {
+        loadingComponent: PanelLoading,
+        errorComponent: AsyncComponentError,
+        delay: 0
+      }
+    ),
+    SettingsModalAdminContent: getResettableAsyncComponent(
+      () => import('./settings_modal_admin_content.vue'),
       {
         loadingComponent: PanelLoading,
         errorComponent: AsyncComponentError,
@@ -148,6 +158,12 @@ const SettingsModal = {
         PLEROMAFE_SETTINGS_MINOR_VERSION
       ]
       return clone
+    },
+    resetAdminDraft () {
+      this.$store.commit('resetAdminDraft')
+    },
+    pushAdminDraft () {
+      this.$store.dispatch('pushAdminDraft')
     }
   },
   computed: {
@@ -157,8 +173,14 @@ const SettingsModal = {
     modalActivated () {
       return useInterfaceStore().settingsModalState !== 'hidden'
     },
-    modalOpenedOnce () {
-      return useInterfaceStore().settingsModalLoaded
+    modalMode () {
+      return useInterfaceStore().settingsModalMode
+    },
+    modalOpenedOnceUser () {
+      return useInterfaceStore().settingsModalLoadedUser
+    },
+    modalOpenedOnceAdmin () {
+      return useInterfaceStore().settingsModalLoadedAdmin
     },
     modalPeeked () {
       return useInterfaceStore().settingsModalState === 'minimized'
@@ -168,9 +190,14 @@ const SettingsModal = {
         return this.$store.state.config.expertLevel > 0
       },
       set (value) {
-        console.log(value)
         this.$store.dispatch('setOption', { name: 'expertLevel', value: value ? 1 : 0 })
       }
+    },
+    adminDraftAny () {
+      return !isEqual(
+        this.$store.state.adminSettings.config,
+        this.$store.state.adminSettings.draft
+      )
     }
   }
 }
diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss
index f58612299..bd0ed4524 100644
--- a/src/components/settings_modal/settings_modal.scss
+++ b/src/components/settings_modal/settings_modal.scss
@@ -1,13 +1,19 @@
-@import "src/variables";
-
 .settings-modal {
   overflow: hidden;
 
+  h4 {
+    margin-bottom: 0.5em;
+  }
+
   .setting-list,
   .option-list {
     list-style-type: none;
     padding-left: 2em;
 
+    .btn:not(.dropdown-button) {
+      padding: 0 2em;
+    }
+
     li {
       margin-bottom: 0.5em;
     }
@@ -15,6 +21,20 @@
     .suboptions {
       margin-top: 0.3em;
     }
+
+    &.two-column {
+      column-count: 2;
+
+      > li {
+        break-inside: avoid;
+      }
+    }
+  }
+
+  .setting-description {
+    margin-top: 0.2em;
+    margin-bottom: 2em;
+    font-size: 70%;
   }
 
   .settings-modal-panel {
@@ -37,14 +57,14 @@
 
       .btn {
         min-height: 2em;
-        min-width: 10em;
-        padding: 0 2em;
       }
     }
   }
 
   .settings-footer {
     display: flex;
+    flex-wrap: wrap;
+    line-height: 2;
 
     >* {
       margin-right: 0.5em;
@@ -56,6 +76,23 @@
     }
   }
 
+  &.-mobile {
+    .setting-list,
+    .option-list {
+      padding-left: 0.25em;
+
+      > li {
+        margin: 1em 0;
+        line-height: 1.5em;
+        vertical-align: center;
+      }
+
+      &.two-column {
+        column-count: 1;
+      }
+    }
+  }
+
   &.peek {
     .settings-modal-panel {
       /* Explanation:
diff --git a/src/components/settings_modal/settings_modal.vue b/src/components/settings_modal/settings_modal.vue
index 7b4573711..3a5c8ddab 100644
--- a/src/components/settings_modal/settings_modal.vue
+++ b/src/components/settings_modal/settings_modal.vue
@@ -7,14 +7,14 @@
   >
     <div class="settings-modal-panel panel">
       <div class="panel-heading">
-        <span class="title">
-          {{ $t('settings.settings') }}
-        </span>
+        <h1 class="title">
+          {{ modalMode === 'user' ? $t('settings.settings') : $t('admin_dash.window_title') }}
+        </h1>
         <transition name="fade">
           <div
             v-if="currentSaveStateNotice"
             class="alert"
-            :class="{ transparent: !currentSaveStateNotice.error, error: currentSaveStateNotice.error}"
+            :class="{ success: !currentSaveStateNotice.error, error: currentSaveStateNotice.error}"
             @click.prevent
           >
             {{ currentSaveStateNotice.error ? $t('settings.saving_err') : $t('settings.saving_ok') }}
@@ -42,10 +42,12 @@
         </button>
       </div>
       <div class="panel-body">
-        <SettingsModalContent v-if="modalOpenedOnce" />
+        <SettingsModalUserContent v-if="modalMode === 'user' && modalOpenedOnceUser" />
+        <SettingsModalAdminContent v-if="modalMode === 'admin' && modalOpenedOnceAdmin" />
       </div>
-      <div class="panel-footer settings-footer">
+      <div class="panel-footer settings-footer -flexible-height">
         <Popover
+          v-if="modalMode === 'user'"
           class="export"
           trigger="click"
           placement="top"
@@ -67,36 +69,42 @@
           </template>
           <template #content="{close}">
             <div class="dropdown-menu">
-              <button
-                class="button-default dropdown-item dropdown-item-icon"
-                @click.prevent="backup"
-                @click="close"
-              >
-                <FAIcon
-                  icon="file-download"
-                  fixed-width
-                /><span>{{ $t("settings.file_export_import.backup_settings") }}</span>
-              </button>
-              <button
-                class="button-default dropdown-item dropdown-item-icon"
-                @click.prevent="backupWithTheme"
-                @click="close"
-              >
-                <FAIcon
-                  icon="file-download"
-                  fixed-width
-                /><span>{{ $t("settings.file_export_import.backup_settings_theme") }}</span>
-              </button>
-              <button
-                class="button-default dropdown-item dropdown-item-icon"
-                @click.prevent="restore"
-                @click="close"
-              >
-                <FAIcon
-                  icon="file-upload"
-                  fixed-width
-                /><span>{{ $t("settings.file_export_import.restore_settings") }}</span>
-              </button>
+              <div class="menu-item dropdown-item -icon">
+                <button
+                  class="main-button"
+                  @click.prevent="backup"
+                  @click="close"
+                >
+                  <FAIcon
+                    icon="file-download"
+                    fixed-width
+                  /><span>{{ $t("settings.file_export_import.backup_settings") }}</span>
+                </button>
+              </div>
+              <div class="menu-item dropdown-item -icon">
+                <button
+                  class="main-button"
+                  @click.prevent="backupWithTheme"
+                  @click="close"
+                >
+                  <FAIcon
+                    icon="file-download"
+                    fixed-width
+                  /><span>{{ $t("settings.file_export_import.backup_settings_theme") }}</span>
+                </button>
+              </div>
+              <div class="menu-item dropdown-item -icon">
+                <button
+                  class="main-button"
+                  @click.prevent="restore"
+                  @click="close"
+                >
+                  <FAIcon
+                    icon="file-upload"
+                    fixed-width
+                  /><span>{{ $t("settings.file_export_import.restore_settings") }}</span>
+                </button>
+              </div>
             </div>
           </template>
         </Popover>
@@ -107,12 +115,59 @@
         >
           {{ $t("settings.expert_mode") }}
         </Checkbox>
+        <span v-if="modalMode === 'admin'">
+          <i18n-t
+            scope="global"
+            keypath="admin_dash.wip_notice"
+          >
+            <template #adminFeLink>
+              <a
+                href="/pleroma/admin/#/login-pleroma"
+                target="_blank"
+              >
+                {{ $t("admin_dash.old_ui_link") }}
+              </a>
+            </template>
+          </i18n-t>
+        </span>
         <span
           id="unscrolled-content"
           class="extra-content"
         />
+        <span
+          v-if="modalMode === 'admin'"
+          class="admin-buttons"
+        >
+          <button
+            class="button-default btn"
+            :disabled="!adminDraftAny"
+            @click="resetAdminDraft"
+          >
+            {{ $t("admin_dash.reset_all") }}
+          </button>
+          {{ ' ' }}
+          <button
+            class="button-default btn"
+            :disabled="!adminDraftAny"
+            @click="pushAdminDraft"
+          >
+            {{ $t("admin_dash.commit_all") }}
+          </button>
+        </span>
       </div>
     </div>
+    <teleport to="#modal">
+      <ConfirmModal
+        v-if="$store.state.interface.temporaryChangesTimeoutId"
+        :title="$t('settings.confirm_new_setting')"
+        :cancel-text="$t('settings.revert')"
+        :confirm-text="$t('settings.confirm')"
+        @cancelled="$store.state.interface.temporaryChangesRevert"
+        @accepted="$store.state.interface.temporaryChangesConfirm"
+      >
+        {{ $t('settings.confirm_new_question') }}
+      </ConfirmModal>
+    </teleport>
   </Modal>
 </template>
 
diff --git a/src/components/settings_modal/settings_modal_admin_content.js b/src/components/settings_modal/settings_modal_admin_content.js
new file mode 100644
index 000000000..ce835bf24
--- /dev/null
+++ b/src/components/settings_modal/settings_modal_admin_content.js
@@ -0,0 +1,95 @@
+import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
+
+import InstanceTab from './admin_tabs/instance_tab.vue'
+import LimitsTab from './admin_tabs/limits_tab.vue'
+import FrontendsTab from './admin_tabs/frontends_tab.vue'
+import EmojiTab from './admin_tabs/emoji_tab.vue'
+
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faWrench,
+  faHand,
+  faLaptopCode,
+  faPaintBrush,
+  faBell,
+  faDownload,
+  faEyeSlash,
+  faInfo
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faWrench,
+  faHand,
+  faLaptopCode,
+  faPaintBrush,
+  faBell,
+  faDownload,
+  faEyeSlash,
+  faInfo
+)
+
+const SettingsModalAdminContent = {
+  components: {
+    TabSwitcher,
+
+    InstanceTab,
+    LimitsTab,
+    FrontendsTab,
+    EmojiTab
+  },
+  computed: {
+    user () {
+      return this.$store.state.users.currentUser
+    },
+    isLoggedIn () {
+      return !!this.$store.state.users.currentUser
+    },
+    open () {
+      return this.$store.state.interface.settingsModalState !== 'hidden'
+    },
+    bodyLock () {
+      return this.$store.state.interface.settingsModalState === 'visible'
+    },
+    adminDbLoaded () {
+      return this.$store.state.adminSettings.loaded
+    },
+    adminDescriptionsLoaded () {
+      return this.$store.state.adminSettings.descriptions !== null
+    },
+    noDb () {
+      return this.$store.state.adminSettings.dbConfigEnabled === false
+    }
+  },
+  created () {
+    if (this.user.rights.admin) {
+      this.$store.dispatch('loadAdminStuff')
+    }
+  },
+  methods: {
+    onOpen () {
+      const targetTab = this.$store.state.interface.settingsModalTargetTab
+      // We're being told to open in specific tab
+      if (targetTab) {
+        const tabIndex = this.$refs.tabSwitcher.$slots.default().findIndex(elm => {
+          return elm.props && elm.props['data-tab-name'] === targetTab
+        })
+        if (tabIndex >= 0) {
+          this.$refs.tabSwitcher.setTab(tabIndex)
+        }
+      }
+      // Clear the state of target tab, so that next time settings is opened
+      // it doesn't force it.
+      this.$store.dispatch('clearSettingsModalTargetTab')
+    }
+  },
+  mounted () {
+    this.onOpen()
+  },
+  watch: {
+    open: function (value) {
+      if (value) this.onOpen()
+    }
+  }
+}
+
+export default SettingsModalAdminContent
diff --git a/src/components/settings_modal/settings_modal_content.scss b/src/components/settings_modal/settings_modal_admin_content.scss
similarity index 71%
rename from src/components/settings_modal/settings_modal_content.scss
rename to src/components/settings_modal/settings_modal_admin_content.scss
index 87df79821..c1a25cf1e 100644
--- a/src/components/settings_modal/settings_modal_content.scss
+++ b/src/components/settings_modal/settings_modal_admin_content.scss
@@ -1,10 +1,8 @@
-@import "src/variables";
-
 .settings_tab-switcher {
   height: 100%;
 
   .setting-item {
-    border-bottom: 2px solid var(--fg, $fallback--fg);
+    border-bottom: 2px solid var(--border);
     margin: 1em 1em 1.4em;
     padding-bottom: 1.4em;
 
@@ -19,10 +17,13 @@
     }
 
     .select-multiple {
+      margin-top: 0.5em;
       display: flex;
+      flex-direction: column;
 
       .option-list {
         margin: 0;
+        margin-top: 0.5em;
         padding-left: 0.5em;
       }
     }
@@ -33,10 +34,6 @@
       margin-bottom: 1em;
     }
 
-    select {
-      min-width: 10em;
-    }
-
     textarea {
       width: 100%;
       max-width: 100%;
@@ -45,12 +42,7 @@
 
     .unavailable,
     .unavailable svg {
-      color: var(--cRed, $fallback--cRed);
-      color: $fallback--cRed;
-    }
-
-    .number-input {
-      max-width: 6em;
+      color: var(--cRed);
     }
   }
 }
diff --git a/src/components/settings_modal/settings_modal_admin_content.vue b/src/components/settings_modal/settings_modal_admin_content.vue
new file mode 100644
index 000000000..39ef74f64
--- /dev/null
+++ b/src/components/settings_modal/settings_modal_admin_content.vue
@@ -0,0 +1,79 @@
+<template>
+  <tab-switcher
+    v-if="adminDescriptionsLoaded && (noDb || adminDbLoaded)"
+    ref="tabSwitcher"
+    class="settings_tab-switcher"
+    :side-tab-bar="true"
+    :scrollable-tabs="true"
+    :render-only-focused="true"
+    :body-scroll-lock="bodyLock"
+  >
+    <div
+      v-if="noDb"
+      :label="$t('admin_dash.tabs.nodb')"
+      icon="exclamation-triangle"
+      data-tab-name="nodb-notice"
+    >
+      <div :label="$t('admin_dash.tabs.nodb')">
+        <div class="setting-item">
+          <h2>{{ $t('admin_dash.nodb.heading') }}</h2>
+          <i18n-t
+            scope="global"
+            keypath="admin_dash.nodb.text"
+          >
+            <template #documentation>
+              <a
+                href="https://docs-develop.pleroma.social/backend/configuration/howto_database_config/"
+                target="_blank"
+              >
+                {{ $t("admin_dash.nodb.documentation") }}
+              </a>
+            </template>
+            <template #property>
+              <code>config :pleroma, configurable_from_database</code>
+            </template>
+            <template #value>
+              <code>true</code>
+            </template>
+          </i18n-t>
+          <p>{{ $t('admin_dash.nodb.text2') }}</p>
+        </div>
+      </div>
+    </div>
+    <div
+      v-if="adminDbLoaded"
+      :label="$t('admin_dash.tabs.instance')"
+      icon="wrench"
+      data-tab-name="general"
+    >
+      <InstanceTab />
+    </div>
+    <div
+      v-if="adminDbLoaded"
+      :label="$t('admin_dash.tabs.limits')"
+      icon="hand"
+      data-tab-name="limits"
+    >
+      <LimitsTab />
+    </div>
+    <div
+      :label="$t('admin_dash.tabs.frontends')"
+      icon="laptop-code"
+      data-tab-name="frontends"
+    >
+      <FrontendsTab />
+    </div>
+
+    <div
+      :label="$t('admin_dash.tabs.emoji')"
+      icon="face-smile-beam"
+      data-tab-name="emoji"
+    >
+      <EmojiTab />
+    </div>
+  </tab-switcher>
+</template>
+
+<script src="./settings_modal_admin_content.js"></script>
+
+<style src="./settings_modal_admin_content.scss" lang="scss"></style>
diff --git a/src/components/settings_modal/settings_modal_content.js b/src/components/settings_modal/settings_modal_user_content.js
similarity index 84%
rename from src/components/settings_modal/settings_modal_content.js
rename to src/components/settings_modal/settings_modal_user_content.js
index ca933f6a2..60fbd1cd9 100644
--- a/src/components/settings_modal/settings_modal_content.js
+++ b/src/components/settings_modal/settings_modal_user_content.js
@@ -7,8 +7,10 @@ import FilteringTab from './tabs/filtering_tab.vue'
 import SecurityTab from './tabs/security_tab/security_tab.vue'
 import ProfileTab from './tabs/profile_tab.vue'
 import GeneralTab from './tabs/general_tab.vue'
+import AppearanceTab from './tabs/appearance_tab.vue'
 import VersionTab from './tabs/version_tab.vue'
 import ThemeTab from './tabs/theme_tab/theme_tab.vue'
+import StyleTab from './tabs/style_tab/style_tab.vue'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -16,10 +18,12 @@ import {
   faUser,
   faFilter,
   faPaintBrush,
+  faPalette,
   faBell,
   faDownload,
   faEyeSlash,
-  faInfo
+  faInfo,
+  faWindowRestore
 } from '@fortawesome/free-solid-svg-icons'
 import { useInterfaceStore } from '../../stores/interface'
 
@@ -28,10 +32,12 @@ library.add(
   faUser,
   faFilter,
   faPaintBrush,
+  faPalette,
   faBell,
   faDownload,
   faEyeSlash,
-  faInfo
+  faInfo,
+  faWindowRestore
 )
 
 const SettingsModalContent = {
@@ -45,6 +51,8 @@ const SettingsModalContent = {
     SecurityTab,
     ProfileTab,
     GeneralTab,
+    AppearanceTab,
+    StyleTab,
     VersionTab,
     ThemeTab
   },
@@ -57,6 +65,12 @@ const SettingsModalContent = {
     },
     bodyLock () {
       return useInterfaceStore().settingsModalState === 'visible'
+    },
+    expertLevel () {
+      return this.$store.state.config.expertLevel
+    },
+    isMobileLayout () {
+      return this.$store.state.interface.layoutType === 'mobile'
     }
   },
   methods: {
diff --git a/src/components/settings_modal/settings_modal_user_content.scss b/src/components/settings_modal/settings_modal_user_content.scss
new file mode 100644
index 000000000..25e9bda3a
--- /dev/null
+++ b/src/components/settings_modal/settings_modal_user_content.scss
@@ -0,0 +1,62 @@
+.settings_tab-switcher {
+  height: 100%;
+
+  h1 {
+    margin-bottom: 0.5em;
+    margin-top: 0.5em;
+  }
+
+  h4 {
+    margin-bottom: 0;
+    margin-top: 0.25em;
+  }
+
+  h5 {
+    margin-bottom: 0;
+    margin-top: 0.25em;
+  }
+
+  .setting-item {
+    border-bottom: 2px solid var(--border);
+    margin: 1em 1em 1.4em;
+    padding-bottom: 1.4em;
+
+    > div,
+    > label {
+      margin-bottom: 0.5em;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    .select-multiple {
+      margin-top: 1em;
+      display: flex;
+      flex-direction: column;
+
+      .option-list {
+        margin: 0;
+        margin-top: 0.5em;
+        padding-left: 0.5em;
+      }
+    }
+
+    &:last-child {
+      border-bottom: none;
+      padding-bottom: 0;
+      margin-bottom: 1em;
+    }
+
+    textarea {
+      width: 100%;
+      max-width: 100%;
+      height: 100px;
+    }
+
+    .unavailable,
+    .unavailable svg {
+      color: var(--cRed);
+    }
+  }
+}
diff --git a/src/components/settings_modal/settings_modal_content.vue b/src/components/settings_modal/settings_modal_user_content.vue
similarity index 71%
rename from src/components/settings_modal/settings_modal_content.vue
rename to src/components/settings_modal/settings_modal_user_content.vue
index 0be76d22c..fea9a20fe 100644
--- a/src/components/settings_modal/settings_modal_content.vue
+++ b/src/components/settings_modal/settings_modal_user_content.vue
@@ -13,6 +13,32 @@
     >
       <GeneralTab />
     </div>
+    <div
+      :label="$t('settings.appearance')"
+      icon="window-restore"
+      data-tab-name="appearance"
+      :delay-render="true"
+    >
+      <AppearanceTab />
+    </div>
+    <div
+      v-if="expertLevel > 0 && !isMobileLayout"
+      :label="$t('settings.style.themes3.editor.title')"
+      icon="palette"
+      data-tab-name="style"
+      :delay-render="true"
+    >
+      <StyleTab />
+    </div>
+    <div
+      v-if="expertLevel > 0 && !isMobileLayout"
+      :label="$t('settings.theme_old')"
+      icon="paint-brush"
+      data-tab-name="theme"
+      :delay-render="true"
+    >
+      <ThemeTab />
+    </div>
     <div
       v-if="isLoggedIn"
       :label="$t('settings.profile_tab')"
@@ -21,6 +47,14 @@
     >
       <ProfileTab />
     </div>
+    <div
+      v-if="isLoggedIn"
+      :label="$t('settings.notifications')"
+      icon="bell"
+      data-tab-name="notifications"
+    >
+      <NotificationsTab />
+    </div>
     <div
       v-if="isLoggedIn"
       :label="$t('settings.security_tab')"
@@ -36,20 +70,14 @@
     >
       <FilteringTab />
     </div>
-    <div
-      :label="$t('settings.theme')"
-      icon="paint-brush"
-      data-tab-name="theme"
-    >
-      <ThemeTab />
-    </div>
     <div
       v-if="isLoggedIn"
-      :label="$t('settings.notifications')"
-      icon="bell"
-      data-tab-name="notifications"
+      :label="$t('settings.mutes_and_blocks')"
+      :fullHeight="true"
+      icon="eye-slash"
+      data-tab-name="mutesAndBlocks"
     >
-      <NotificationsTab />
+      <MutesAndBlocksTab />
     </div>
     <div
       v-if="isLoggedIn"
@@ -59,15 +87,6 @@
     >
       <DataImportExportTab />
     </div>
-    <div
-      v-if="isLoggedIn"
-      :label="$t('settings.mutes_and_blocks')"
-      :fullHeight="true"
-      icon="eye-slash"
-      data-tab-name="mutesAndBlocks"
-    >
-      <MutesAndBlocksTab />
-    </div>
     <div
       :label="$t('settings.version.title')"
       icon="info"
@@ -78,6 +97,6 @@
   </tab-switcher>
 </template>
 
-<script src="./settings_modal_content.js"></script>
+<script src="./settings_modal_user_content.js"></script>
 
-<style src="./settings_modal_content.scss" lang="scss"></style>
+<style src="./settings_modal_user_content.scss" lang="scss"></style>
diff --git a/src/components/settings_modal/tabs/appearance_tab.js b/src/components/settings_modal/tabs/appearance_tab.js
new file mode 100644
index 000000000..fe2001af5
--- /dev/null
+++ b/src/components/settings_modal/tabs/appearance_tab.js
@@ -0,0 +1,425 @@
+import BooleanSetting from '../helpers/boolean_setting.vue'
+import ChoiceSetting from '../helpers/choice_setting.vue'
+import IntegerSetting from '../helpers/integer_setting.vue'
+import FloatSetting from '../helpers/float_setting.vue'
+import UnitSetting, { defaultHorizontalUnits } from '../helpers/unit_setting.vue'
+import PaletteEditor from 'src/components/palette_editor/palette_editor.vue'
+
+import FontControl from 'src/components/font_control/font_control.vue'
+
+import { normalizeThemeData } from 'src/modules/interface'
+
+import { newImporter } from 'src/services/export_import/export_import.js'
+import { convertTheme2To3 } from 'src/services/theme_data/theme2_to_theme3.js'
+import { init } from 'src/services/theme_data/theme_data_3.service.js'
+import {
+  getCssRules,
+  getScopedVersion
+} from 'src/services/theme_data/css_utils.js'
+import { deserialize } from 'src/services/theme_data/iss_deserializer.js'
+
+import SharedComputedObject from '../helpers/shared_computed_object.js'
+import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faGlobe
+} from '@fortawesome/free-solid-svg-icons'
+
+import Preview from './theme_tab/theme_preview.vue'
+
+// helper for debugging
+// eslint-disable-next-line no-unused-vars
+const toValue = (x) => JSON.parse(JSON.stringify(x === undefined ? 'null' : x))
+
+library.add(
+  faGlobe
+)
+
+const AppearanceTab = {
+  data () {
+    return {
+      availableThemesV3: [],
+      availableThemesV2: [],
+      bundledPalettes: [],
+      compilationCache: {},
+      fileImporter: newImporter({
+        accept: '.json, .iss',
+        validator: this.importValidator,
+        onImport: this.onImport,
+        parser: this.importParser,
+        onImportFailure: this.onImportFailure
+      }),
+      palettesKeys: [
+        'bg',
+        'fg',
+        'link',
+        'text',
+        'cRed',
+        'cGreen',
+        'cBlue',
+        'cOrange'
+      ],
+      userPalette: {},
+      intersectionObserver: null,
+      thirdColumnModeOptions: ['none', 'notifications', 'postform'].map(mode => ({
+        key: mode,
+        value: mode,
+        label: this.$t(`settings.third_column_mode_${mode}`)
+      })),
+      forcedRoundnessOptions: ['disabled', 'sharp', 'nonsharp', 'round'].map((mode, i) => ({
+        key: mode,
+        value: i - 1,
+        label: this.$t(`settings.style.themes3.hacks.forced_roundness_mode_${mode}`)
+      })),
+      underlayOverrideModes: ['none', 'opaque', 'transparent'].map((mode, i) => ({
+        key: mode,
+        value: mode,
+        label: this.$t(`settings.style.themes3.hacks.underlay_override_mode_${mode}`)
+      }))
+    }
+  },
+  components: {
+    BooleanSetting,
+    ChoiceSetting,
+    IntegerSetting,
+    FloatSetting,
+    UnitSetting,
+    ProfileSettingIndicator,
+    FontControl,
+    Preview,
+    PaletteEditor
+  },
+  mounted () {
+    this.$store.dispatch('getThemeData')
+
+    const updateIndex = (resource) => {
+      const capitalizedResource = resource[0].toUpperCase() + resource.slice(1)
+      const currentIndex = this.$store.state.instance[`${resource}sIndex`]
+
+      let promise
+      if (currentIndex) {
+        promise = Promise.resolve(currentIndex)
+      } else {
+        promise = this.$store.dispatch(`fetch${capitalizedResource}sIndex`)
+      }
+
+      return promise.then(index => {
+        return Object
+          .entries(index)
+          .map(([k, func]) => [k, func()])
+      })
+    }
+
+    updateIndex('style').then(styles => {
+      styles.forEach(([key, stylePromise]) => stylePromise.then(data => {
+        const meta = data.find(x => x.component === '@meta')
+        this.availableThemesV3.push({ key, data, name: meta.directives.name, version: 'v3' })
+      }))
+    })
+
+    updateIndex('theme').then(themes => {
+      themes.forEach(([key, themePromise]) => themePromise.then(data => {
+        if (!data) {
+          console.warn(`Theme with key ${key} is empty or malformed`)
+        } else if (Array.isArray(data)) {
+          console.warn(`Theme with key ${key} is a v1 theme and should be moved to static/palettes/index.json`)
+        } else if (!data.source && !data.theme) {
+          console.warn(`Theme with key ${key} is malformed`)
+        } else {
+          this.availableThemesV2.push({ key, data, name: data.name, version: 'v2' })
+        }
+      }))
+    })
+
+    this.userPalette = this.$store.state.interface.paletteDataUsed || {}
+
+    updateIndex('palette').then(bundledPalettes => {
+      bundledPalettes.forEach(([key, palettePromise]) => palettePromise.then(v => {
+        let palette
+        if (Array.isArray(v)) {
+          const [
+            name,
+            bg,
+            fg,
+            text,
+            link,
+            cRed = '#FF0000',
+            cGreen = '#00FF00',
+            cBlue = '#0000FF',
+            cOrange = '#E3FF00'
+          ] = v
+          palette = { key, name, bg, fg, text, link, cRed, cBlue, cGreen, cOrange }
+        } else {
+          palette = { key, ...v }
+        }
+        if (!palette.key.startsWith('style.')) {
+          this.bundledPalettes.push(palette)
+        }
+      }))
+    })
+
+    if (window.IntersectionObserver) {
+      this.intersectionObserver = new IntersectionObserver((entries, observer) => {
+        entries.forEach(({ target, isIntersecting }) => {
+          if (!isIntersecting) return
+          const theme = this.availableStyles.find(x => x.key === target.dataset.themeKey)
+          this.$nextTick(() => {
+            if (theme) theme.ready = true
+          })
+          observer.unobserve(target)
+        })
+      }, {
+        root: this.$refs.themeList
+      })
+    }
+  },
+  updated () {
+    this.$nextTick(() => {
+      this.$refs.themeList.querySelectorAll('.theme-preview').forEach(node => {
+        this.intersectionObserver.observe(node)
+      })
+    })
+  },
+  watch: {
+    paletteDataUsed () {
+      this.userPalette = this.paletteDataUsed || {}
+    }
+  },
+  computed: {
+    switchInProgress () {
+      return this.$store.state.interface.themeChangeInProgress
+    },
+    paletteDataUsed () {
+      return this.$store.state.interface.paletteDataUsed
+    },
+    availableStyles () {
+      return [
+        ...this.availableThemesV3,
+        ...this.availableThemesV2
+      ]
+    },
+    availablePalettes () {
+      return [
+        ...this.bundledPalettes,
+        ...this.stylePalettes
+      ]
+    },
+    stylePalettes () {
+      const ruleset = this.$store.state.interface.styleDataUsed || []
+      if (!ruleset && ruleset.length === 0) return
+      const meta = ruleset.find(x => x.component === '@meta')
+      const result = ruleset.filter(x => x.component.startsWith('@palette'))
+        .map(x => {
+          const { variant, directives } = x
+          const {
+            bg,
+            fg,
+            text,
+            link,
+            accent,
+            cRed,
+            cBlue,
+            cGreen,
+            cOrange,
+            wallpaper
+          } = directives
+
+          const result = {
+            name: `${meta.directives.name || this.$t('settings.style.themes3.palette.imported')}: ${variant}`,
+            key: `style.${variant.toLowerCase().replace(/ /g, '_')}`,
+            bg,
+            fg,
+            text,
+            link,
+            accent,
+            cRed,
+            cBlue,
+            cGreen,
+            cOrange,
+            wallpaper
+          }
+          return Object.fromEntries(Object.entries(result).filter(([k, v]) => v))
+        })
+      return result
+    },
+    noIntersectionObserver () {
+      return !window.IntersectionObserver
+    },
+    horizontalUnits () {
+      return defaultHorizontalUnits
+    },
+    fontsOverride () {
+      return this.$store.getters.mergedConfig.fontsOverride
+    },
+    columns () {
+      const mode = this.$store.getters.mergedConfig.thirdColumnMode
+
+      const notif = mode === 'none' ? [] : ['notifs']
+
+      if (this.$store.getters.mergedConfig.sidebarRight || mode === 'postform') {
+        return [...notif, 'content', 'sidebar']
+      } else {
+        return ['sidebar', 'content', ...notif]
+      }
+    },
+    instanceWallpaperUsed () {
+      return this.$store.state.instance.background &&
+        !this.$store.state.users.currentUser.background_image
+    },
+    language: {
+      get: function () { return this.$store.getters.mergedConfig.interfaceLanguage },
+      set: function (val) {
+        this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
+      }
+    },
+    customThemeVersion () {
+      const { themeVersion } = this.$store.state.interface
+      return themeVersion
+    },
+    isCustomThemeUsed () {
+      const { customTheme, customThemeSource } = this.mergedConfig
+      return customTheme != null || customThemeSource != null
+    },
+    isCustomStyleUsed (name) {
+      const { styleCustomData } = this.mergedConfig
+      return styleCustomData != null
+    },
+    ...SharedComputedObject()
+  },
+  methods: {
+    updateFont (key, value) {
+      this.$store.dispatch('setOption', {
+        name: 'theme3hacks',
+        value: {
+          ...this.mergedConfig.theme3hacks,
+          fonts: {
+            ...this.mergedConfig.theme3hacks.fonts,
+            [key]: value
+          }
+        }
+      })
+    },
+    importFile () {
+      this.fileImporter.importData()
+    },
+    importParser (file, filename) {
+      if (filename.endsWith('.json')) {
+        return JSON.parse(file)
+      } else if (filename.endsWith('.iss')) {
+        return deserialize(file)
+      }
+    },
+    onImport (parsed, filename) {
+      if (filename.endsWith('.json')) {
+        this.$store.dispatch('setThemeCustom', parsed.source || parsed.theme)
+      } else if (filename.endsWith('.iss')) {
+        this.$store.dispatch('setStyleCustom', parsed)
+      }
+    },
+    onImportFailure (result) {
+      console.error('Failure importing theme:', result)
+      this.$store.dispatch('pushGlobalNotice', { messageKey: 'settings.invalid_theme_imported', level: 'error' })
+    },
+    importValidator (parsed, filename) {
+      if (filename.endsWith('.json')) {
+        const version = parsed._pleroma_theme_version
+        return version >= 1 || version <= 2
+      } else if (filename.endsWith('.iss')) {
+        if (!Array.isArray(parsed)) return false
+        if (parsed.length < 1) return false
+        if (parsed.find(x => x.component === '@meta') == null) return false
+        return true
+      }
+    },
+    isThemeActive (key) {
+      return key === (this.mergedConfig.theme || this.$store.state.instance.theme)
+    },
+    isStyleActive (key) {
+      return key === (this.mergedConfig.style || this.$store.state.instance.style)
+    },
+    isPaletteActive (key) {
+      return key === (this.mergedConfig.palette || this.$store.state.instance.palette)
+    },
+    setStyle (name) {
+      this.$store.dispatch('setStyle', name)
+    },
+    setTheme (name) {
+      this.$store.dispatch('setTheme', name)
+    },
+    setPalette (name, data) {
+      this.$store.dispatch('setPalette', name)
+      this.userPalette = data
+    },
+    setPaletteCustom (data) {
+      this.$store.dispatch('setPaletteCustom', data)
+      this.userPalette = data
+    },
+    resetTheming (name) {
+      this.$store.dispatch('setStyle', 'stock')
+    },
+    previewTheme (key, version, input) {
+      let theme3
+      if (this.compilationCache[key]) {
+        theme3 = this.compilationCache[key]
+      } else if (input) {
+        if (version === 'v2') {
+          const style = normalizeThemeData(input)
+          const theme2 = convertTheme2To3(style)
+          theme3 = init({
+            inputRuleset: theme2,
+            ultimateBackgroundColor: '#000000',
+            liteMode: true,
+            debug: true,
+            onlyNormalState: true
+          })
+        } else if (version === 'v3') {
+          const palette = input.find(x => x.component === '@palette')
+          let paletteRule
+          if (palette) {
+            const { directives } = palette
+            directives.link = directives.link || directives.accent
+            directives.accent = directives.accent || directives.link
+            paletteRule = {
+              component: 'Root',
+              directives: Object.fromEntries(
+                Object
+                  .entries(directives)
+                  .filter(([k, v]) => k && k !== 'name')
+                  .map(([k, v]) => ['--' + k, 'color | ' + v])
+              )
+            }
+          } else {
+            paletteRule = null
+          }
+
+          theme3 = init({
+            inputRuleset: [...input, paletteRule].filter(x => x),
+            ultimateBackgroundColor: '#000000',
+            liteMode: true,
+            debug: true,
+            onlyNormalState: true
+          })
+        }
+      } else {
+        theme3 = init({
+          inputRuleset: [],
+          ultimateBackgroundColor: '#000000',
+          liteMode: true,
+          debug: true,
+          onlyNormalState: true
+        })
+      }
+
+      if (!this.compilationCache[key]) {
+        this.compilationCache[key] = theme3
+      }
+
+      return getScopedVersion(
+        getCssRules(theme3.eager),
+        '#theme-preview-' + key
+      ).join('\n')
+    }
+  }
+}
+
+export default AppearanceTab
diff --git a/src/components/settings_modal/tabs/appearance_tab.scss b/src/components/settings_modal/tabs/appearance_tab.scss
new file mode 100644
index 000000000..eff5438a7
--- /dev/null
+++ b/src/components/settings_modal/tabs/appearance_tab.scss
@@ -0,0 +1,144 @@
+.appearance-tab {
+  .palette,
+  .theme-notice {
+    padding: 0.5em;
+    margin: 1em;
+  }
+
+  .setting-item {
+    padding-bottom: 0;
+
+    &.heading {
+      display: grid;
+      align-items: baseline;
+      grid-template-columns: 1fr auto auto auto;
+      grid-gap: 0.5em;
+
+      h2 {
+        flex: 1 0 auto;
+      }
+    }
+  }
+
+  h4 {
+    margin: 0.5em 0;
+  }
+
+  .palettes-container {
+    height: 15em;
+    overflow-y: auto;
+    overflow-x: hidden;
+    scrollbar-gutter: stable;
+    border-radius: var(--roundness);
+    border: 1px solid var(--border);
+    margin: -0.5em;
+  }
+
+  .palettes {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 0.5em;
+    padding: 0.5em;
+    width: 100%;
+
+    h4 {
+      margin: 0;
+      grid-column: 1 / span 2;
+    }
+  }
+
+  .palette-entry {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 0.5em;
+    height: max-content;
+
+    .palette-label {
+      height: auto;
+
+      label {
+        text-align: center;
+      }
+    }
+
+    .palette-square {
+      flex: 0 0 auto;
+      display: inline-block;
+      min-width: 1em;
+      min-height: 1em;
+    }
+  }
+
+  .column-settings {
+    display: flex;
+    justify-content: space-evenly;
+    flex-wrap: wrap;
+  }
+
+  .column-settings .size-label {
+    display: block;
+    margin-bottom: 0.5em;
+    margin-top: 0.5em;
+  }
+
+  .modal-view.-mobile & {
+    .palettes {
+      grid-template-columns: 1fr;
+    }
+
+    .palette-entry {
+      grid-column: 1;
+      justify-content: center;
+    }
+
+    .palette-label {
+      line-height: 1.5em;
+      margin-top: 0.5em;
+    }
+  }
+
+  .palette-preview {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-template-rows: 1em 1em;
+    margin: 0.5em 0;
+  }
+
+  .theme-list {
+    list-style: none;
+    display: flex;
+    flex-wrap: wrap;
+    margin: -0.5em 0;
+    height: 25em;
+    overflow-x: hidden;
+    overflow-y: auto;
+    scrollbar-gutter: stable;
+    border-radius: var(--roundness);
+    border: 1px solid var(--border);
+    padding: 0;
+    margin-bottom: 1em;
+
+    .theme-preview {
+      font-size: 1rem; // fix for firefox
+      width: 19rem;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin: 0.5em;
+
+      &.placeholder {
+        opacity: 0.2;
+      }
+
+      .theme-preview-container {
+        pointer-events: none;
+        zoom: 0.5;
+        border: none;
+        border-radius: var(--roundness);
+        text-align: left;
+      }
+    }
+  }
+}
diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue
new file mode 100644
index 000000000..20174da0c
--- /dev/null
+++ b/src/components/settings_modal/tabs/appearance_tab.vue
@@ -0,0 +1,395 @@
+<template>
+  <div
+    class="appearance-tab"
+    :label="$t('settings.general')"
+  >
+    <div class="setting-item">
+      <h2>{{ $t('settings.theme') }}</h2>
+      <ul
+        ref="themeList"
+        class="theme-list"
+      >
+        <button
+          class="button-default theme-preview"
+          data-theme-key="stock"
+          :class="{ toggled: isStyleActive('stock'), disabled: switchInProgress }"
+          :disabled="switchInProgress"
+          @click="resetTheming"
+        >
+          <!-- eslint-disable vue/no-v-text-v-html-on-component -->
+          <!-- eslint-disable vue/no-v-html -->
+          <component
+            :is="'style'"
+            v-html="previewTheme('stock', 'v3')"
+          />
+          <!-- eslint-enable vue/no-v-html -->
+          <!-- eslint-enable vue/no-v-text-v-html-on-component -->
+          <preview id="theme-preview-stock" />
+          <h4 class="theme-name">
+            {{ $t('settings.style.stock_theme_used') }}
+            <span class="alert neutral version">v3</span>
+          </h4>
+        </button>
+        <button
+          v-if="isCustomThemeUsed"
+          disabled
+          class="button-default theme-preview toggled"
+        >
+          <preview />
+          <h4 class="theme-name">
+            {{ $t('settings.style.custom_theme_used') }}
+            <span class="alert neutral version">v2</span>
+          </h4>
+        </button>
+        <button
+          v-if="isCustomStyleUsed"
+          disabled
+          class="button-default theme-preview toggled"
+        >
+          <preview />
+          <h4 class="theme-name">
+            {{ $t('settings.style.custom_style_used') }}
+            <span class="alert neutral version">v3</span>
+          </h4>
+        </button>
+        <button
+          v-for="style in availableStyles"
+          :key="style.key"
+          :data-theme-key="style.key"
+          class="button-default theme-preview"
+          :class="{ toggled: isThemeActive(style.key), disabled: switchInProgress }"
+          :disabled="switchInProgress"
+          @click="style.version === 'v2' ? setTheme(style.key) : setStyle(style.key)"
+        >
+          <!-- eslint-disable vue/no-v-text-v-html-on-component -->
+          <!-- eslint-disable vue/no-v-html -->
+          <div v-if="style.ready || noIntersectionObserver">
+            <component
+              :is="'style'"
+              v-html="previewTheme(style.key, style.version, style.data)"
+            />
+          </div>
+          <!-- eslint-enable vue/no-v-html -->
+          <!-- eslint-enable vue/no-v-text-v-html-on-component -->
+          <preview :id="'theme-preview-' + style.key" />
+          <h4 class="theme-name">
+            {{ style.name }}
+            <span class="alert neutral version">{{ style.version }}</span>
+          </h4>
+        </button>
+      </ul>
+      <div class="import-file-container">
+        <button
+          class="btn button-default"
+          :class="{ disabled: switchInProgress }"
+          :disabled="switchInProgress"
+          @click="importFile"
+        >
+          <FAIcon icon="folder-open" />
+          {{ $t('settings.style.themes3.editor.load_style') }}
+        </button>
+      </div>
+      <div class="setting-item">
+        <h2>{{ $t('settings.style.themes3.palette.label') }}</h2>
+        <div
+          v-if="customThemeVersion === 'v3'"
+          class="palettes-container"
+        >
+          <h4 v-if="stylePalettes?.length > 0">
+            {{ $t('settings.style.themes3.palette.style') }}
+          </h4>
+          <div class="palettes">
+            <button
+              v-for="p in stylePalettes || []"
+              :key="p.name"
+              class="btn button-default palette-entry"
+              :class="{ toggled: isPaletteActive(p.key), disabled: switchInProgress }"
+              :disabled="switchInProgress"
+              @click="() => setPalette(p.key, p)"
+            >
+              <div class="palette-label">
+                <label>
+                  {{ p.name ?? $t('settings.style.themes3.palette.user') }}
+                </label>
+              </div>
+              <div class="palette-preview">
+                <span
+                  v-for="c in palettesKeys"
+                  :key="c"
+                  class="palette-square"
+                  :style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }"
+                />
+              </div>
+            </button>
+            <h4>{{ $t('settings.style.themes3.palette.bundled') }}</h4>
+            <button
+              v-for="p in bundledPalettes"
+              :key="p.name"
+              class="btn button-default palette-entry"
+              :class="{ toggled: isPaletteActive(p.key), disabled: switchInProgress }"
+              :disabled="switchInProgress"
+              @click="() => setPalette(p.key, p)"
+            >
+              <div class="palette-label">
+                <label>
+                  {{ p.name }}
+                </label>
+              </div>
+              <div class="palette-preview">
+                <span
+                  v-for="c in palettesKeys"
+                  :key="c"
+                  class="palette-square"
+                  :style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }"
+                />
+              </div>
+            </button>
+          </div>
+        </div>
+        <div>
+          <template v-if="customThemeVersion === 'v3'">
+            <h4 v-if="expertLevel > 0">
+              {{ $t('settings.style.themes3.palette.user') }}
+            </h4>
+            <PaletteEditor
+              v-if="expertLevel > 0"
+              v-model="userPalette"
+              class="userPalette"
+              :compact="true"
+              :apply="true"
+              :disabled="switchInProgress"
+              @applyPalette="data => setPaletteCustom(data)"
+            />
+          </template>
+          <template v-else-if="customThemeVersion === 'v2'">
+            <div class="alert neutral theme-notice unsupported-theme-v2">
+              {{ $t('settings.style.themes3.palette.v2_unsupported') }}
+            </div>
+          </template>
+        </div>
+      </div>
+    </div>
+    <div class="setting-item">
+      <h2>{{ $t('settings.scale_and_layout') }}</h2>
+      <div class="alert neutral theme-notice">
+        {{ $t("settings.style.appearance_tab_note") }}
+      </div>
+      <ul class="setting-list">
+        <li>
+          <UnitSetting
+            path="textSize"
+            :step="0.1"
+            :units="['px', 'rem']"
+            :reset-default="{ 'px': 14, 'rem': 1 }"
+            timed-apply-mode
+          >
+            {{ $t('settings.text_size') }}
+          </UnitSetting>
+          <div>
+            <small>
+              <i18n-t
+                scope="global"
+                keypath="settings.text_size_tip"
+                tag="span"
+              >
+                <code>px</code>
+                <code>rem</code>
+              </i18n-t>
+              <br>
+              <i18n-t
+                scope="global"
+                keypath="settings.text_size_tip2"
+                tag="span"
+              >
+                <code>14px</code>
+              </i18n-t>
+            </small>
+          </div>
+        </li>
+        <li>
+          <UnitSetting
+            path="emojiSize"
+            :step="0.1"
+            :units="['px', 'rem']"
+            :reset-default="{ 'px': 32, 'rem': 2.2 }"
+          >
+            {{ $t('settings.emoji_size') }}
+          </UnitSetting>
+          <ul
+            class="setting-list suboptions"
+          >
+            <li>
+              <FloatSetting
+                v-if="user"
+                path="emojiReactionsScale"
+                expert="1"
+              >
+                {{ $t('settings.emoji_reactions_scale') }}
+              </FloatSetting>
+            </li>
+          </ul>
+        </li>
+        <li>
+          <UnitSetting
+            path="navbarSize"
+            :step="0.1"
+            :units="['px', 'rem']"
+            :reset-default="{ 'px': 55, 'rem': 3.5 }"
+          >
+            {{ $t('settings.navbar_size') }}
+          </UnitSetting>
+        </li>
+        <h3>{{ $t('settings.style.interface_font_user_override') }}</h3>
+        <li>
+          <FontControl
+            :model-value="mergedConfig.theme3hacks.fonts.interface"
+            name="ui"
+            :label="$t('settings.style.fonts.components.interface')"
+            :fallback="{ family: 'sans-serif' }"
+            no-inherit="1"
+            @update:modelValue="v => updateFont('interface', v)"
+          />
+        </li>
+        <li>
+          <FontControl
+            v-if="expertLevel > 0"
+            :model-value="mergedConfig.theme3hacks.fonts.input"
+            name="input"
+            :fallback="{ family: 'inherit' }"
+            :label="$t('settings.style.fonts.components.input')"
+            @update:modelValue="v => updateFont('input', v)"
+          />
+        </li>
+        <li>
+          <FontControl
+            v-if="expertLevel > 0"
+            :model-value="mergedConfig.theme3hacks.fonts.post"
+            name="post"
+            :fallback="{ family: 'inherit' }"
+            :label="$t('settings.style.fonts.components.post')"
+            @update:modelValue="v => updateFont('post', v)"
+          />
+        </li>
+        <li>
+          <FontControl
+            v-if="expertLevel > 0"
+            :model-value="mergedConfig.theme3hacks.fonts.monospace"
+            name="postCode"
+            :fallback="{ family: 'monospace' }"
+            :label="$t('settings.style.fonts.components.monospace')"
+            @update:modelValue="v => updateFont('monospace', v)"
+          />
+        </li>
+        <h3>{{ $t('settings.columns') }}</h3>
+        <li>
+          <UnitSetting
+            path="panelHeaderSize"
+            :step="0.1"
+            :units="['px', 'rem']"
+            :reset-default="{ 'px': 52, 'rem': 3.2 }"
+            timed-apply-mode
+          >
+            {{ $t('settings.panel_header_size') }}
+          </UnitSetting>
+        </li>
+        <li>
+          <BooleanSetting path="sidebarRight">
+            {{ $t('settings.right_sidebar') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting path="navbarColumnStretch">
+            {{ $t('settings.navbar_column_stretch') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <ChoiceSetting
+            v-if="user"
+            id="thirdColumnMode"
+            path="thirdColumnMode"
+            :options="thirdColumnModeOptions"
+          >
+            {{ $t('settings.third_column_mode') }}
+          </ChoiceSetting>
+        </li>
+        <li v-if="expertLevel > 0">
+          {{ $t('settings.column_sizes') }}
+          <div class="column-settings">
+            <UnitSetting
+              v-for="column in columns"
+              :key="column"
+              :path="column + 'ColumnWidth'"
+              :units="horizontalUnits"
+              expert="1"
+            >
+              {{ $t('settings.column_sizes_' + column) }}
+            </UnitSetting>
+          </div>
+        </li>
+        <li>
+          <BooleanSetting path="disableStickyHeaders">
+            {{ $t('settings.disable_sticky_headers') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting path="showScrollbars">
+            {{ $t('settings.show_scrollbars') }}
+          </BooleanSetting>
+        </li>
+      </ul>
+    </div>
+    <div class="setting-item">
+      <h2>{{ $t('settings.visual_tweaks') }}</h2>
+      <ul class="setting-list">
+        <li>
+          <BooleanSetting path="modalMobileCenter">
+            {{ $t('settings.mobile_center_dialog') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <ChoiceSetting
+            id="forcedRoundness"
+            path="forcedRoundness"
+            :options="forcedRoundnessOptions"
+          >
+            {{ $t('settings.style.themes3.hacks.force_interface_roundness') }}
+          </ChoiceSetting>
+        </li>
+        <li>
+          <ChoiceSetting
+            id="underlayOverride"
+            path="theme3hacks.underlay"
+            :options="underlayOverrideModes"
+          >
+            {{ $t('settings.style.themes3.hacks.underlay_overrides') }}
+          </ChoiceSetting>
+        </li>
+        <li v-if="instanceWallpaperUsed">
+          <BooleanSetting path="hideInstanceWallpaper">
+            {{ $t('settings.hide_wallpaper') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting
+            path="forceThemeRecompilation"
+            :expert="1"
+          >
+            {{ $t('settings.force_theme_recompilation_debug') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting
+            path="themeDebug"
+            :expert="1"
+          >
+            {{ $t('settings.theme_debug') }}
+          </BooleanSetting>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script src="./appearance_tab.js"></script>
+
+<style lang="scss" src="./appearance_tab.scss"></style>
diff --git a/src/components/settings_modal/tabs/data_import_export_tab.vue b/src/components/settings_modal/tabs/data_import_export_tab.vue
index 48356c9b5..eb3c86425 100644
--- a/src/components/settings_modal/tabs/data_import_export_tab.vue
+++ b/src/components/settings_modal/tabs/data_import_export_tab.vue
@@ -80,7 +80,7 @@
               <span
                 v-else-if="backup.state === 'running'"
               >
-                {{ $tc('settings.backup_running', backup.processed_number, { number: backup.processed_number }) }}
+                {{ $t('settings.backup_running', { number: backup.processed_number }, backup.processed_number) }}
               </span>
               <span
                 v-else-if="backup.state === 'failed'"
diff --git a/src/components/settings_modal/tabs/filtering_tab.js b/src/components/settings_modal/tabs/filtering_tab.js
index 7c37f0bcb..fbace15df 100644
--- a/src/components/settings_modal/tabs/filtering_tab.js
+++ b/src/components/settings_modal/tabs/filtering_tab.js
@@ -1,6 +1,7 @@
 import { filter, trim, debounce } from 'lodash'
 import BooleanSetting from '../helpers/boolean_setting.vue'
 import ChoiceSetting from '../helpers/choice_setting.vue'
+import UnitSetting from '../helpers/unit_setting.vue'
 import IntegerSetting from '../helpers/integer_setting.vue'
 
 import SharedComputedObject from '../helpers/shared_computed_object.js'
@@ -19,6 +20,7 @@ const FilteringTab = {
   components: {
     BooleanSetting,
     ChoiceSetting,
+    UnitSetting,
     IntegerSetting
   },
   computed: {
diff --git a/src/components/settings_modal/tabs/filtering_tab.vue b/src/components/settings_modal/tabs/filtering_tab.vue
index 97046ff0c..32325d423 100644
--- a/src/components/settings_modal/tabs/filtering_tab.vue
+++ b/src/components/settings_modal/tabs/filtering_tab.vue
@@ -7,13 +7,11 @@
           <BooleanSetting path="hideFilteredStatuses">
             {{ $t('settings.hide_filtered_statuses') }}
           </BooleanSetting>
-          <ul
-            class="setting-list suboptions"
-            :class="[{disabled: !streaming}]"
-          >
+          <ul class="setting-list suboptions">
             <li>
               <BooleanSetting
-                :disabled="hideFilteredStatuses"
+                parent-path="hideFilteredStatuses"
+                :parent-invert="true"
                 path="hideWordFilteredPosts"
               >
                 {{ $t('settings.hide_wordfiltered_statuses') }}
@@ -22,7 +20,8 @@
             <li>
               <BooleanSetting
                 v-if="user"
-                :disabled="hideFilteredStatuses"
+                parent-path="hideFilteredStatuses"
+                :parent-invert="true"
                 path="hideMutedThreads"
               >
                 {{ $t('settings.hide_muted_threads') }}
@@ -31,7 +30,8 @@
             <li>
               <BooleanSetting
                 v-if="user"
-                :disabled="hideFilteredStatuses"
+                parent-path="hideFilteredStatuses"
+                :parent-invert="true"
                 path="hideMutedPosts"
               >
                 {{ $t('settings.hide_muted_posts') }}
@@ -44,6 +44,11 @@
             {{ $t('settings.mute_bot_posts') }}
           </BooleanSetting>
         </li>
+        <li>
+          <BooleanSetting path="muteSensitiveStatuses">
+            {{ $t('settings.mute_sensitive_posts') }}
+          </BooleanSetting>
+        </li>
         <li>
           <BooleanSetting path="hidePostStats">
             {{ $t('settings.hide_post_stats') }}
@@ -51,7 +56,7 @@
         </li>
         <li>
           <BooleanSetting path="hideBotIndication">
-            {{ $t('settings.hide_bot_indication') }}
+            {{ $t('settings.hide_actor_type_indication') }}
           </BooleanSetting>
         </li>
         <ChoiceSetting
@@ -67,7 +72,7 @@
           <textarea
             id="muteWords"
             v-model="muteWordsString"
-            class="resize-height"
+            class="input resize-height"
           />
           <div>{{ $t('settings.filtering_explanation') }}</div>
         </li>
@@ -91,6 +96,22 @@
             {{ $t('settings.hide_attachments_in_convo') }}
           </BooleanSetting>
         </li>
+        <li>
+          <BooleanSetting path="hideScrobbles">
+            {{ $t('settings.hide_scrobbles') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <UnitSetting
+            key="hideScrobblesAfter"
+            path="hideScrobblesAfter"
+            :units="['m', 'h', 'd']"
+            unit-set="time"
+            expert="1"
+          >
+            {{ $t('settings.hide_scrobbles_after') }}
+          </UnitSetting>
+        </li>
       </ul>
     </div>
     <div
diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
index be97710f2..517f54eb1 100644
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -3,11 +3,11 @@ import ChoiceSetting from '../helpers/choice_setting.vue'
 import ScopeSelector from 'src/components/scope_selector/scope_selector.vue'
 import IntegerSetting from '../helpers/integer_setting.vue'
 import FloatSetting from '../helpers/float_setting.vue'
-import SizeSetting, { defaultHorizontalUnits } from '../helpers/size_setting.vue'
+import UnitSetting from '../helpers/unit_setting.vue'
 import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
 
 import SharedComputedObject from '../helpers/shared_computed_object.js'
-import ServerSideIndicator from '../helpers/server_side_indicator.vue'
+import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faGlobe
@@ -30,6 +30,11 @@ const GeneralTab = {
         value: mode,
         label: this.$t(`settings.conversation_display_${mode}`)
       })),
+      absoluteTime12hOptions: ['24h', '12h'].map(mode => ({
+        key: mode,
+        value: mode,
+        label: this.$t(`settings.absolute_time_format_12h_${mode}`)
+      })),
       conversationOtherRepliesButtonOptions: ['below', 'inside'].map(mode => ({
         key: mode,
         value: mode,
@@ -40,16 +45,16 @@ const GeneralTab = {
         value: mode,
         label: this.$t(`settings.mention_link_display_${mode}`)
       })),
-      thirdColumnModeOptions: ['none', 'notifications', 'postform'].map(mode => ({
-        key: mode,
-        value: mode,
-        label: this.$t(`settings.third_column_mode_${mode}`)
-      })),
       userPopoverAvatarActionOptions: ['close', 'zoom', 'open'].map(mode => ({
         key: mode,
         value: mode,
         label: this.$t(`settings.user_popover_avatar_action_${mode}`)
       })),
+      unsavedPostActionOptions: ['save', 'discard', 'confirm'].map(mode => ({
+        key: mode,
+        value: mode,
+        label: this.$t(`settings.unsaved_post_action_${mode}`)
+      })),
       loopSilentAvailable:
       // Firefox
       Object.getOwnPropertyDescriptor(HTMLVideoElement.prototype, 'mozHasAudio') ||
@@ -64,15 +69,12 @@ const GeneralTab = {
     ChoiceSetting,
     IntegerSetting,
     FloatSetting,
-    SizeSetting,
+    UnitSetting,
     InterfaceLanguageSwitcher,
     ScopeSelector,
-    ServerSideIndicator
+    ProfileSettingIndicator
   },
   computed: {
-    horizontalUnits () {
-      return defaultHorizontalUnits
-    },
     postFormats () {
       return this.$store.state.instance.postFormats || []
     },
@@ -83,34 +85,19 @@ const GeneralTab = {
         label: this.$t(`post_status.content_type["${format}"]`)
       }))
     },
-    columns () {
-      const mode = this.$store.getters.mergedConfig.thirdColumnMode
-
-      const notif = mode === 'none' ? [] : ['notifs']
-
-      if (this.$store.getters.mergedConfig.sidebarRight || mode === 'postform') {
-        return [...notif, 'content', 'sidebar']
-      } else {
-        return ['sidebar', 'content', ...notif]
-      }
-    },
-    instanceSpecificPanelPresent () { return this.$store.state.instance.showInstanceSpecificPanel },
-    instanceWallpaperUsed () {
-      return this.$store.state.instance.background &&
-        !this.$store.state.users.currentUser.background_image
-    },
-    instanceShoutboxPresent () { return this.$store.state.instance.shoutAvailable },
     language: {
       get: function () { return this.$store.getters.mergedConfig.interfaceLanguage },
       set: function (val) {
         this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
       }
     },
+    instanceShoutboxPresent () { return this.$store.state.instance.shoutAvailable },
+    instanceSpecificPanelPresent () { return this.$store.state.instance.showInstanceSpecificPanel },
     ...SharedComputedObject()
   },
   methods: {
     changeDefaultScope (value) {
-      this.$store.dispatch('setServerSideOption', { name: 'defaultScope', value })
+      this.$store.dispatch('setProfileOption', { name: 'defaultScope', value })
     }
   }
 }
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 21e2d855a..6d01f208e 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -15,11 +15,6 @@
             {{ $t('settings.hide_isp') }}
           </BooleanSetting>
         </li>
-        <li v-if="instanceWallpaperUsed">
-          <BooleanSetting path="hideInstanceWallpaper">
-            {{ $t('settings.hide_wallpaper') }}
-          </BooleanSetting>
-        </li>
         <li>
           <BooleanSetting path="stopGifs">
             {{ $t('settings.stop_gifs') }}
@@ -29,14 +24,11 @@
           <BooleanSetting path="streaming">
             {{ $t('settings.streaming') }}
           </BooleanSetting>
-          <ul
-            class="setting-list suboptions"
-            :class="[{disabled: !streaming}]"
-          >
+          <ul class="setting-list suboptions">
             <li>
               <BooleanSetting
                 path="pauseOnUnfocused"
-                :disabled="!streaming"
+                parent-path="streaming"
               >
                 {{ $t('settings.pause_on_unfocused') }}
               </BooleanSetting>
@@ -101,53 +93,6 @@
             {{ $t('settings.hide_shoutbox') }}
           </BooleanSetting>
         </li>
-        <li>
-          <h3>{{ $t('settings.columns') }}</h3>
-        </li>
-        <li>
-          <BooleanSetting path="disableStickyHeaders">
-            {{ $t('settings.disable_sticky_headers') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <BooleanSetting path="showScrollbars">
-            {{ $t('settings.show_scrollbars') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <BooleanSetting path="sidebarRight">
-            {{ $t('settings.right_sidebar') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <BooleanSetting path="navbarColumnStretch">
-            {{ $t('settings.navbar_column_stretch') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <ChoiceSetting
-            v-if="user"
-            id="thirdColumnMode"
-            path="thirdColumnMode"
-            :options="thirdColumnModeOptions"
-          >
-            {{ $t('settings.third_column_mode') }}
-          </ChoiceSetting>
-        </li>
-        <li v-if="expertLevel > 0">
-          {{ $t('settings.column_sizes') }}
-          <div class="column-settings">
-            <SizeSetting
-              v-for="column in columns"
-              :key="column"
-              :path="column + 'ColumnWidth'"
-              :units="horizontalUnits"
-              expert="1"
-            >
-              {{ $t('settings.column_sizes_' + column) }}
-            </SizeSetting>
-          </div>
-        </li>
         <li class="select-multiple">
           <span class="label">{{ $t('settings.confirm_dialogs') }}</span>
           <ul class="option-list">
@@ -171,6 +116,16 @@
                 {{ $t('settings.confirm_dialogs_mute') }}
               </BooleanSetting>
             </li>
+            <li>
+              <BooleanSetting path="modalOnMuteConversation">
+                {{ $t('settings.confirm_dialogs_mute_conversation') }}
+              </BooleanSetting>
+            </li>
+            <li>
+              <BooleanSetting path="modalOnMuteDomain">
+                {{ $t('settings.confirm_dialogs_mute_domain') }}
+              </BooleanSetting>
+            </li>
             <li>
               <BooleanSetting path="modalOnDelete">
                 {{ $t('settings.confirm_dialogs_delete') }}
@@ -213,7 +168,7 @@
           </ChoiceSetting>
         </li>
         <ul
-          v-if="conversationDisplay !== 'linear'"
+          v-if="mergedConfig.conversationDisplay !== 'linear'"
           class="setting-list suboptions"
         >
           <li>
@@ -265,22 +220,55 @@
         <li>
           <BooleanSetting
             v-if="user"
-            path="serverSide_stripRichContent"
+            source="profile"
+            path="stripRichContent"
             expert="1"
           >
             {{ $t('settings.no_rich_text_description') }}
           </BooleanSetting>
         </li>
         <li>
-          <FloatSetting
-            v-if="user"
-            path="emojiReactionsScale"
+          <BooleanSetting
+            path="useAbsoluteTimeFormat"
             expert="1"
           >
-            {{ $t('settings.emoji_reactions_scale') }}
-          </FloatSetting>
+            {{ $t('settings.absolute_time_format') }}
+          </BooleanSetting>
         </li>
+        <ul
+          v-if="mergedConfig.useAbsoluteTimeFormat"
+          class="setting-list suboptions"
+        >
+          <li>
+            <UnitSetting
+              path="absoluteTimeFormatMinAge"
+              unit-set="time"
+              :units="['s', 'm', 'h', 'd']"
+              :min="0"
+            >
+              {{ $t('settings.absolute_time_format_min_age') }}
+            </UnitSetting>
+          </li>
+          <li>
+            <ChoiceSetting
+              id="absoluteTime12h"
+              path="absoluteTime12h"
+              :options="absoluteTime12hOptions"
+              :expert="1"
+            >
+              {{ $t('settings.absolute_time_format_12h') }}
+            </ChoiceSetting>
+          </li>
+        </ul>
         <h3>{{ $t('settings.attachments') }}</h3>
+        <li>
+          <BooleanSetting
+            path="imageCompression"
+            expert="1"
+          >
+            {{ $t('settings.image_compression') }}
+          </BooleanSetting>
+        </li>
         <li>
           <BooleanSetting
             path="useContainFit"
@@ -299,7 +287,7 @@
             <BooleanSetting
               path="preloadImage"
               expert="1"
-              :disabled="!hideNsfw"
+              parent-path="hideNsfw"
             >
               {{ $t('settings.preload_images') }}
             </BooleanSetting>
@@ -308,7 +296,7 @@
             <BooleanSetting
               path="useOneClickNsfw"
               expert="1"
-              :disabled="!hideNsfw"
+              parent-path="hideNsfw"
             >
               {{ $t('settings.use_one_click_nsfw') }}
             </BooleanSetting>
@@ -321,15 +309,13 @@
           >
             {{ $t('settings.loop_video') }}
           </BooleanSetting>
-          <ul
-            class="setting-list suboptions"
-            :class="[{disabled: !streaming}]"
-          >
+          <ul class="setting-list suboptions">
             <li>
               <BooleanSetting
                 path="loopVideoSilentOnly"
                 expert="1"
-                :disabled="!loopVideo || !loopSilentAvailable"
+                parent-path="loopVideo"
+                :disabled="!loopSilentAvailable"
               >
                 {{ $t('settings.loop_video_silent_only') }}
               </BooleanSetting>
@@ -427,18 +413,18 @@
       <ul class="setting-list">
         <li>
           <label for="default-vis">
-            {{ $t('settings.default_vis') }} <ServerSideIndicator :server-side="true" />
+            {{ $t('settings.default_vis') }} <ProfileSettingIndicator :is-profile="true" />
             <ScopeSelector
               class="scope-selector"
               :show-all="true"
-              :user-default="serverSide_defaultScope"
-              :initial-scope="serverSide_defaultScope"
+              :user-default="$store.state.profileConfig.defaultScope"
+              :initial-scope="$store.state.profileConfig.defaultScope"
               :on-scope-change="changeDefaultScope"
             />
           </label>
         </li>
         <li>
-          <!-- <BooleanSetting path="serverSide_defaultNSFW"> -->
+          <!-- <BooleanSetting source="profile" path="defaultNSFW"> -->
           <BooleanSetting path="sensitiveByDefault">
             {{ $t('settings.sensitive_by_default') }}
           </BooleanSetting>
@@ -486,22 +472,6 @@
             {{ $t('settings.minimal_scopes_mode') }}
           </BooleanSetting>
         </li>
-        <li>
-          <BooleanSetting
-            path="alwaysShowNewPostButton"
-            expert="1"
-          >
-            {{ $t('settings.always_show_post_button') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <BooleanSetting
-            path="autohideFloatingPostButton"
-            expert="1"
-          >
-            {{ $t('settings.autohide_floating_post_button') }}
-          </BooleanSetting>
-        </li>
         <li>
           <BooleanSetting
             path="padEmoji"
@@ -518,23 +488,25 @@
             {{ $t('settings.autocomplete_select_first') }}
           </BooleanSetting>
         </li>
+        <li>
+          <BooleanSetting
+            path="autoSaveDraft"
+          >
+            {{ $t('settings.auto_save_draft') }}
+          </BooleanSetting>
+        </li>
+        <li v-if="!mergedConfig.autoSaveDraft">
+          <ChoiceSetting
+            id="unsavedPostAction"
+            path="unsavedPostAction"
+            :options="unsavedPostActionOptions"
+          >
+            {{ $t('settings.unsaved_post_action') }}
+          </ChoiceSetting>
+        </li>
       </ul>
     </div>
   </div>
 </template>
 
 <script src="./general_tab.js"></script>
-
-<style lang="scss">
-.column-settings {
-  display: flex;
-  justify-content: space-evenly;
-  flex-wrap: wrap;
-}
-
-.column-settings .size-label {
-  display: block;
-  margin-bottom: 0.5em;
-  margin-top: 0.5em;
-}
-</style>
diff --git a/src/components/settings_modal/tabs/mutes_and_blocks_tab.js b/src/components/settings_modal/tabs/mutes_and_blocks_tab.js
index 6cfeea35a..51974f9fa 100644
--- a/src/components/settings_modal/tabs/mutes_and_blocks_tab.js
+++ b/src/components/settings_modal/tabs/mutes_and_blocks_tab.js
@@ -9,17 +9,20 @@ import DomainMuteCard from 'src/components/domain_mute_card/domain_mute_card.vue
 import SelectableList from 'src/components/selectable_list/selectable_list.vue'
 import ProgressButton from 'src/components/progress_button/progress_button.vue'
 import withSubscription from 'src/components/../hocs/with_subscription/with_subscription'
+import withLoadMore from 'src/components/../hocs/with_load_more/with_load_more'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 
-const BlockList = withSubscription({
+const BlockList = withLoadMore({
   fetch: (props, $store) => $store.dispatch('fetchBlocks'),
   select: (props, $store) => get($store.state.users.currentUser, 'blockIds', []),
+  destroy: () => {},
   childPropName: 'items'
 })(SelectableList)
 
-const MuteList = withSubscription({
+const MuteList = withLoadMore({
   fetch: (props, $store) => $store.dispatch('fetchMutes'),
   select: (props, $store) => get($store.state.users.currentUser, 'muteIds', []),
+  destroy: () => {},
   childPropName: 'items'
 })(SelectableList)
 
diff --git a/src/components/settings_modal/tabs/notifications_tab.js b/src/components/settings_modal/tabs/notifications_tab.js
index 3c6ab87fe..c53b5889d 100644
--- a/src/components/settings_modal/tabs/notifications_tab.js
+++ b/src/components/settings_modal/tabs/notifications_tab.js
@@ -16,6 +16,10 @@ const NotificationsTab = {
     user () {
       return this.$store.state.users.currentUser
     },
+    canReceiveReports () {
+      if (!this.user) { return false }
+      return this.user.privileges.includes('reports_manage_reports')
+    },
     ...SharedComputedObject()
   },
   methods: {
diff --git a/src/components/settings_modal/tabs/notifications_tab.vue b/src/components/settings_modal/tabs/notifications_tab.vue
index dd3806ed1..10228888c 100644
--- a/src/components/settings_modal/tabs/notifications_tab.vue
+++ b/src/components/settings_modal/tabs/notifications_tab.vue
@@ -1,49 +1,239 @@
 <template>
   <div :label="$t('settings.notifications')">
+    <div class="setting-item">
+      <h2>{{ $t('settings.notification_setting_annoyance') }}</h2>
+      <ul class="setting-list">
+        <li>
+          <BooleanSetting path="closingDrawerMarksAsSeen">
+            {{ $t('settings.notification_setting_drawer_marks_as_seen') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting path="ignoreInactionableSeen">
+            {{ $t('settings.notification_setting_ignore_inactionable_seen') }}
+          </BooleanSetting>
+          <div>
+            <small>
+              {{ $t('settings.notification_setting_ignore_inactionable_seen_tip') }}
+            </small>
+          </div>
+        </li>
+        <li>
+          <BooleanSetting
+            path="unseenAtTop"
+            expert="1"
+          >
+            {{ $t('settings.notification_setting_unseen_at_top') }}
+          </BooleanSetting>
+        </li>
+      </ul>
+    </div>
     <div class="setting-item">
       <h2>{{ $t('settings.notification_setting_filters') }}</h2>
       <ul class="setting-list">
         <li>
-          <BooleanSetting path="serverSide_blockNotificationsFromStrangers">
+          <BooleanSetting
+            source="profile"
+            path="blockNotificationsFromStrangers"
+          >
             {{ $t('settings.notification_setting_block_from_strangers') }}
           </BooleanSetting>
         </li>
-        <li class="select-multiple">
-          <span class="label">{{ $t('settings.notification_visibility') }}</span>
-          <ul class="option-list">
+        <li>
+          <h3> {{ $t('settings.notification_visibility') }}</h3>
+          <p v-if="expertLevel > 0">
+            {{ $t('settings.notification_setting_filters_chrome_push') }}
+          </p>
+          <ul class="setting-list two-column">
             <li>
-              <BooleanSetting path="notificationVisibility.likes">
-                {{ $t('settings.notification_visibility_likes') }}
+              <h4> {{ $t('settings.notification_visibility_mentions') }}</h4>
+              <ul class="setting-list">
+                <li>
+                  <BooleanSetting path="notificationVisibility.mentions">
+                    {{ $t('settings.notification_visibility_in_column') }}
+                  </BooleanSetting>
+                </li>
+                <li>
+                  <BooleanSetting path="notificationNative.mentions">
+                    {{ $t('settings.notification_visibility_native_notifications') }}
+                  </BooleanSetting>
+                </li>
+              </ul>
+            </li>
+            <li>
+              <h4> {{ $t('settings.notification_visibility_statuses') }}</h4>
+              <ul class="setting-list">
+                <li>
+                  <BooleanSetting path="notificationVisibility.statuses">
+                    {{ $t('settings.notification_visibility_in_column') }}
+                  </BooleanSetting>
+                </li>
+                <li>
+                  <BooleanSetting path="notificationNative.statuses">
+                    {{ $t('settings.notification_visibility_native_notifications') }}
+                  </BooleanSetting>
+                </li>
+              </ul>
+            </li>
+            <li>
+              <h4> {{ $t('settings.notification_visibility_likes') }}</h4>
+              <ul class="setting-list">
+                <li>
+                  <BooleanSetting path="notificationVisibility.likes">
+                    {{ $t('settings.notification_visibility_in_column') }}
+                  </BooleanSetting>
+                </li>
+                <li>
+                  <BooleanSetting path="notificationNative.likes">
+                    {{ $t('settings.notification_visibility_native_notifications') }}
+                  </BooleanSetting>
+                </li>
+              </ul>
+            </li>
+            <li>
+              <h4> {{ $t('settings.notification_visibility_repeats') }}</h4>
+              <ul class="setting-list">
+                <li>
+                  <BooleanSetting path="notificationVisibility.repeats">
+                    {{ $t('settings.notification_visibility_in_column') }}
+                  </BooleanSetting>
+                </li>
+                <li>
+                  <BooleanSetting path="notificationNative.repeats">
+                    {{ $t('settings.notification_visibility_native_notifications') }}
+                  </BooleanSetting>
+                </li>
+              </ul>
+            </li>
+            <li>
+              <h4> {{ $t('settings.notification_visibility_emoji_reactions') }}</h4>
+              <ul class="setting-list">
+                <li>
+                  <BooleanSetting path="notificationVisibility.emojiReactions">
+                    {{ $t('settings.notification_visibility_in_column') }}
+                  </BooleanSetting>
+                </li>
+                <li>
+                  <BooleanSetting path="notificationNative.emojiReactions">
+                    {{ $t('settings.notification_visibility_native_notifications') }}
+                  </BooleanSetting>
+                </li>
+              </ul>
+            </li>
+            <li>
+              <h4> {{ $t('settings.notification_visibility_follows') }}</h4>
+              <ul class="setting-list">
+                <li>
+                  <BooleanSetting path="notificationVisibility.follows">
+                    {{ $t('settings.notification_visibility_in_column') }}
+                  </BooleanSetting>
+                </li>
+                <li>
+                  <BooleanSetting path="notificationNative.follows">
+                    {{ $t('settings.notification_visibility_native_notifications') }}
+                  </BooleanSetting>
+                </li>
+              </ul>
+            </li>
+            <li>
+              <h4> {{ $t('settings.notification_visibility_follow_requests') }}</h4>
+              <ul class="setting-list">
+                <li>
+                  <BooleanSetting path="notificationVisibility.followRequest">
+                    {{ $t('settings.notification_visibility_in_column') }}
+                  </BooleanSetting>
+                </li>
+                <li>
+                  <BooleanSetting path="notificationNative.followRequest">
+                    {{ $t('settings.notification_visibility_native_notifications') }}
+                  </BooleanSetting>
+                </li>
+              </ul>
+            </li>
+            <li>
+              <h4> {{ $t('settings.notification_visibility_moves') }}</h4>
+              <ul class="setting-list">
+                <li>
+                  <BooleanSetting path="notificationVisibility.moves">
+                    {{ $t('settings.notification_visibility_in_column') }}
+                  </BooleanSetting>
+                </li>
+                <li>
+                  <BooleanSetting path="notificationNative.moves">
+                    {{ $t('settings.notification_visibility_native_notifications') }}
+                  </BooleanSetting>
+                </li>
+              </ul>
+            </li>
+            <li>
+              <h4> {{ $t('settings.notification_visibility_polls') }}</h4>
+              <ul class="setting-list">
+                <li>
+                  <BooleanSetting path="notificationVisibility.polls">
+                    {{ $t('settings.notification_visibility_in_column') }}
+                  </BooleanSetting>
+                </li>
+                <li>
+                  <BooleanSetting path="notificationNative.polls">
+                    {{ $t('settings.notification_visibility_native_notifications') }}
+                  </BooleanSetting>
+                </li>
+              </ul>
+            </li>
+            <li v-if="canReceiveReports">
+              <h4> {{ $t('settings.notification_visibility_reports') }}</h4>
+              <ul class="setting-list">
+                <li>
+                  <BooleanSetting path="notificationVisibility.reports">
+                    {{ $t('settings.notification_visibility_in_column') }}
+                  </BooleanSetting>
+                </li>
+                <li>
+                  <BooleanSetting path="notificationNative.reports">
+                    {{ $t('settings.notification_visibility_native_notifications') }}
+                  </BooleanSetting>
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </li>
+        <li>
+          <BooleanSetting path="showExtraNotifications">
+            {{ $t('settings.notification_show_extra') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <ul class="setting-list suboptions">
+            <li>
+              <BooleanSetting
+                path="showChatsInExtraNotifications"
+                :disabled="!mergedConfig.showExtraNotifications"
+              >
+                {{ $t('settings.notification_extra_chats') }}
               </BooleanSetting>
             </li>
             <li>
-              <BooleanSetting path="notificationVisibility.repeats">
-                {{ $t('settings.notification_visibility_repeats') }}
+              <BooleanSetting
+                path="showAnnouncementsInExtraNotifications"
+                :disabled="!mergedConfig.showExtraNotifications"
+              >
+                {{ $t('settings.notification_extra_announcements') }}
               </BooleanSetting>
             </li>
             <li>
-              <BooleanSetting path="notificationVisibility.follows">
-                {{ $t('settings.notification_visibility_follows') }}
+              <BooleanSetting
+                path="showFollowRequestsInExtraNotifications"
+                :disabled="!mergedConfig.showExtraNotifications"
+              >
+                {{ $t('settings.notification_extra_follow_requests') }}
               </BooleanSetting>
             </li>
             <li>
-              <BooleanSetting path="notificationVisibility.mentions">
-                {{ $t('settings.notification_visibility_mentions') }}
-              </BooleanSetting>
-            </li>
-            <li>
-              <BooleanSetting path="notificationVisibility.moves">
-                {{ $t('settings.notification_visibility_moves') }}
-              </BooleanSetting>
-            </li>
-            <li>
-              <BooleanSetting path="notificationVisibility.emojiReactions">
-                {{ $t('settings.notification_visibility_emoji_reactions') }}
-              </BooleanSetting>
-            </li>
-            <li>
-              <BooleanSetting path="notificationVisibility.polls">
-                {{ $t('settings.notification_visibility_polls') }}
+              <BooleanSetting
+                path="showExtraNotificationsTip"
+                :disabled="!mergedConfig.showExtraNotifications"
+              >
+                {{ $t('settings.notification_extra_tip') }}
               </BooleanSetting>
             </li>
           </ul>
@@ -64,10 +254,26 @@
           >
             {{ $t('settings.enable_web_push_notifications') }}
           </BooleanSetting>
+          <ul class="setting-list suboptions">
+            <li>
+              <BooleanSetting
+                path="webPushAlwaysShowNotifications"
+                :disabled="!mergedConfig.webPushNotifications"
+              >
+                {{ $t('settings.enable_web_push_always_show') }}
+              </BooleanSetting>
+              <div :class="{ faint: !mergedConfig.webPushNotifications }">
+                <small>
+                  {{ $t('settings.enable_web_push_always_show_tip') }}
+                </small>
+              </div>
+            </li>
+          </ul>
         </li>
         <li>
           <BooleanSetting
-            path="serverSide_webPushHideContents"
+            source="profile"
+            path="webPushHideContents"
             expert="1"
           >
             {{ $t('settings.notification_setting_hide_notification_contents') }}
diff --git a/src/components/settings_modal/tabs/profile_tab.js b/src/components/settings_modal/tabs/profile_tab.js
index 35b78d71f..877783fc1 100644
--- a/src/components/settings_modal/tabs/profile_tab.js
+++ b/src/components/settings_modal/tabs/profile_tab.js
@@ -9,6 +9,7 @@ import suggestor from 'src/components/emoji_input/suggestor.js'
 import Autosuggest from 'src/components/autosuggest/autosuggest.vue'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
+import Select from 'src/components/select/select.vue'
 import BooleanSetting from '../helpers/boolean_setting.vue'
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import localeService from 'src/services/locale/locale.service.js'
@@ -40,6 +41,7 @@ const ProfileTab = {
       showRole: this.$store.state.users.currentUser.show_role,
       role: this.$store.state.users.currentUser.role,
       bot: this.$store.state.users.currentUser.bot,
+      actorType: this.$store.state.users.currentUser.actor_type,
       pickAvatarBtnVisible: true,
       bannerUploading: false,
       backgroundUploading: false,
@@ -58,7 +60,8 @@ const ProfileTab = {
     ProgressButton,
     Checkbox,
     BooleanSetting,
-    InterfaceLanguageSwitcher
+    InterfaceLanguageSwitcher,
+    Select
   },
   computed: {
     user () {
@@ -117,6 +120,12 @@ const ProfileTab = {
     bannerImgSrc () {
       const src = this.$store.state.users.currentUser.cover_photo
       return (!src) ? this.defaultBanner : src
+    },
+    groupActorAvailable () {
+      return this.$store.state.instance.groupActorAvailable
+    },
+    availableActorTypes () {
+      return this.groupActorAvailable ? ['Person', 'Service', 'Group'] : ['Person', 'Service']
     }
   },
   methods: {
@@ -128,7 +137,7 @@ const ProfileTab = {
         /* eslint-disable camelcase */
         display_name: this.newName,
         fields_attributes: this.newFields.filter(el => el != null),
-        bot: this.bot,
+        actor_type: this.actorType,
         show_role: this.showRole,
         birthday: this.newBirthday || '',
         show_birthday: this.showBirthday
diff --git a/src/components/settings_modal/tabs/profile_tab.scss b/src/components/settings_modal/tabs/profile_tab.scss
index ee253ffe3..7eda943b7 100644
--- a/src/components/settings_modal/tabs/profile_tab.scss
+++ b/src/components/settings_modal/tabs/profile_tab.scss
@@ -1,5 +1,3 @@
-@import "../../../variables";
-
 .profile-tab {
   .bio {
     margin: 0;
@@ -43,16 +41,14 @@
     display: block;
     width: 100%;
     height: 100%;
-    border-radius: $fallback--avatarRadius;
-    border-radius: var(--avatarRadius, $fallback--avatarRadius);
+    border-radius: var(--roundness);
   }
 
   .reset-button {
     position: absolute;
     top: 0.2em;
     right: 0.2em;
-    border-radius: $fallback--tooltipRadius;
-    border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
+    border-radius: var(--roundness);
     background-color: rgb(0 0 0 / 60%);
     opacity: 0.7;
     width: 1.5em;
diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue
index 6a5b478a1..034034a12 100644
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@@ -12,7 +12,7 @@
           <input
             id="username"
             v-model="newName"
-            class="name-changer"
+            class="input name-changer"
             v-bind="propsToNative(inputProps)"
           >
         </template>
@@ -26,7 +26,7 @@
         <template #default="inputProps">
           <textarea
             v-model="newBio"
-            class="bio resize-height"
+            class="input bio resize-height"
             v-bind="propsToNative(inputProps)"
           />
         </template>
@@ -47,7 +47,7 @@
           id="birthday"
           v-model="newBirthday"
           type="date"
-          class="birthday-input"
+          class="input birthday-input"
         >
         <Checkbox v-model="showBirthday">
           {{ $t('settings.birthday.show_birthday') }}
@@ -71,6 +71,7 @@
                 v-model="newFields[i].name"
                 :placeholder="$t('settings.profile_fields.name')"
                 v-bind="propsToNative(inputProps)"
+                class="input"
               >
             </template>
           </EmojiInput>
@@ -85,6 +86,7 @@
                 v-model="newFields[i].value"
                 :placeholder="$t('settings.profile_fields.value')"
                 v-bind="propsToNative(inputProps)"
+                class="input"
               >
             </template>
           </EmojiInput>
@@ -109,10 +111,24 @@
         </button>
       </div>
       <p>
-        <Checkbox v-model="bot">
-          {{ $t('settings.bot') }}
-        </Checkbox>
+        <label>
+          {{ $t('settings.actor_type') }}
+          <Select v-model="actorType">
+            <option
+              v-for="option in availableActorTypes"
+              :key="option"
+              :value="option"
+            >
+              {{ $t('settings.actor_type_' + option) }}
+            </option>
+          </Select>
+        </label>
       </p>
+      <div v-if="groupActorAvailable">
+        <small>
+          {{ $t('settings.actor_type_description') }}
+        </small>
+      </div>
       <p>
         <interface-language-switcher
           :prompt-text="$t('settings.email_language')"
@@ -191,6 +207,7 @@
       <div>
         <input
           type="file"
+          class="input"
           @change="uploadFile('banner', $event)"
         >
       </div>
@@ -233,6 +250,7 @@
       <div>
         <input
           type="file"
+          class="input"
           @change="uploadFile('background', $event)"
         >
       </div>
@@ -254,37 +272,50 @@
       <h2>{{ $t('settings.account_privacy') }}</h2>
       <ul class="setting-list">
         <li>
-          <BooleanSetting path="serverSide_locked">
+          <BooleanSetting
+            source="profile"
+            path="locked"
+          >
             {{ $t('settings.lock_account_description') }}
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting path="serverSide_discoverable">
+          <BooleanSetting
+            source="profile"
+            path="discoverable"
+          >
             {{ $t('settings.discoverable') }}
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting path="serverSide_allowFollowingMove">
+          <BooleanSetting
+            source="profile"
+            path="allowFollowingMove"
+          >
             {{ $t('settings.allow_following_move') }}
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting path="serverSide_hideFavorites">
+          <BooleanSetting
+            source="profile"
+            path="hideFavorites"
+          >
             {{ $t('settings.hide_favorites_description') }}
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting path="serverSide_hideFollowers">
+          <BooleanSetting
+            source="profile"
+            path="hideFollowers"
+          >
             {{ $t('settings.hide_followers_description') }}
           </BooleanSetting>
-          <ul
-            class="setting-list suboptions"
-            :class="[{disabled: !serverSide_hideFollowers}]"
-          >
+          <ul class="setting-list suboptions">
             <li>
               <BooleanSetting
-                path="serverSide_hideFollowersCount"
-                :disabled="!serverSide_hideFollowers"
+                source="profile"
+                path="hideFollowersCount"
+                parent-path="hideFollowers"
               >
                 {{ $t('settings.hide_followers_count_description') }}
               </BooleanSetting>
@@ -292,17 +323,18 @@
           </ul>
         </li>
         <li>
-          <BooleanSetting path="serverSide_hideFollows">
+          <BooleanSetting
+            source="profile"
+            path="hideFollows"
+          >
             {{ $t('settings.hide_follows_description') }}
           </BooleanSetting>
-          <ul
-            class="setting-list suboptions"
-            :class="[{disabled: !serverSide_hideFollows}]"
-          >
+          <ul class="setting-list suboptions">
             <li>
               <BooleanSetting
-                path="serverSide_hideFollowsCount"
-                :disabled="!serverSide_hideFollows"
+                source="profile"
+                path="hideFollowsCount"
+                parent-path="hideFollows"
               >
                 {{ $t('settings.hide_follows_count_description') }}
               </BooleanSetting>
diff --git a/src/components/settings_modal/tabs/security_tab/mfa.vue b/src/components/settings_modal/tabs/security_tab/mfa.vue
index ee5b6b13c..9421b16ee 100644
--- a/src/components/settings_modal/tabs/security_tab/mfa.vue
+++ b/src/components/settings_modal/tabs/security_tab/mfa.vue
@@ -99,12 +99,14 @@
                 <input
                   v-model="otpConfirmToken"
                   type="text"
+                  class="input"
                 >
 
                 <p>{{ $t('settings.enter_current_password_to_confirm') }}:</p>
                 <input
                   v-model="currentPassword"
                   type="password"
+                  class="input"
                 >
                 <div class="confirm-otp-actions">
                   <button
@@ -137,8 +139,6 @@
 
 <script src="./mfa.js"></script>
 <style lang="scss">
-@import "../../../../variables";
-
 .mfa-settings {
   .mfa-heading,
   .method-item {
@@ -149,8 +149,7 @@
   }
 
   .warning {
-    color: $fallback--cOrange;
-    color: var(--cOrange, $fallback--cOrange);
+    color: var(--cOrange);
   }
 
   .setup-otp {
diff --git a/src/components/settings_modal/tabs/security_tab/mfa_backup_codes.vue b/src/components/settings_modal/tabs/security_tab/mfa_backup_codes.vue
index 923161b2a..32a8a759c 100644
--- a/src/components/settings_modal/tabs/security_tab/mfa_backup_codes.vue
+++ b/src/components/settings_modal/tabs/security_tab/mfa_backup_codes.vue
@@ -21,16 +21,13 @@
 </template>
 <script src="./mfa_backup_codes.js"></script>
 <style lang="scss">
-@import "../../../../variables";
-
 .mfa-backup-codes {
   .warning {
-    color: $fallback--cOrange;
-    color: var(--cOrange, $fallback--cOrange);
+    color: var(--cOrange);
   }
 
   .backup-codes {
-    font-family: var(--postCodeFont, monospace);
+    font-family: var(--monoFont);
   }
 }
 </style>
diff --git a/src/components/settings_modal/tabs/security_tab/mfa_totp.vue b/src/components/settings_modal/tabs/security_tab/mfa_totp.vue
index 8e767bd02..99b668189 100644
--- a/src/components/settings_modal/tabs/security_tab/mfa_totp.vue
+++ b/src/components/settings_modal/tabs/security_tab/mfa_totp.vue
@@ -30,6 +30,7 @@
       <input
         v-model="currentPassword"
         type="password"
+        class="input"
       >
     </confirm>
     <div
diff --git a/src/components/settings_modal/tabs/security_tab/security_tab.vue b/src/components/settings_modal/tabs/security_tab/security_tab.vue
index 6e03bef46..4431550ae 100644
--- a/src/components/settings_modal/tabs/security_tab/security_tab.vue
+++ b/src/components/settings_modal/tabs/security_tab/security_tab.vue
@@ -8,6 +8,7 @@
           v-model="newEmail"
           type="email"
           autocomplete="email"
+          class="input"
         >
       </div>
       <div>
@@ -16,6 +17,7 @@
           v-model="changeEmailPassword"
           type="password"
           autocomplete="current-password"
+          class="input"
         >
       </div>
       <button
@@ -40,6 +42,7 @@
         <input
           v-model="changePasswordInputs[0]"
           type="password"
+          class="input"
         >
       </div>
       <div>
@@ -47,6 +50,7 @@
         <input
           v-model="changePasswordInputs[1]"
           type="password"
+          class="input"
         >
       </div>
       <div>
@@ -54,6 +58,7 @@
         <input
           v-model="changePasswordInputs[2]"
           type="password"
+          class="input"
         >
       </div>
       <button
@@ -143,8 +148,9 @@
         />
       </div>
       <div>
-        <i18n
-          path="settings.new_alias_target"
+        <i18n-t
+          scope="global"
+          keypath="settings.new_alias_target"
           tag="p"
         >
           <code
@@ -152,9 +158,10 @@
           >
             foo@example.org
           </code>
-        </i18n>
+        </i18n-t>
         <input
           v-model="addAliasTarget"
+          class="input"
         >
       </div>
       <button
@@ -175,18 +182,20 @@
       <h2>{{ $t('settings.move_account') }}</h2>
       <p>{{ $t('settings.move_account_notes') }}</p>
       <div>
-        <i18n
-          path="settings.move_account_target"
+        <i18n-t
+          keypath="settings.move_account_target"
           tag="p"
+          scope="global"
         >
-          <code
-            place="example"
-          >
-            foo@example.org
-          </code>
-        </i18n>
+          <template #example>
+            <code>
+              foo@example.org
+            </code>
+          </template>
+        </i18n-t>
         <input
           v-model="moveAccountTarget"
+          class="input"
         >
       </div>
       <div>
@@ -195,6 +204,7 @@
           v-model="moveAccountPassword"
           type="password"
           autocomplete="current-password"
+          class="input"
         >
       </div>
       <button
@@ -222,6 +232,7 @@
         <input
           v-model="deleteAccountConfirmPasswordInput"
           type="password"
+          class="input"
         >
         <button
           class="btn button-default"
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.js b/src/components/settings_modal/tabs/style_tab/style_tab.js
new file mode 100644
index 000000000..b51ce5307
--- /dev/null
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.js
@@ -0,0 +1,835 @@
+import { ref, reactive, computed, watch, watchEffect, provide, getCurrentInstance } from 'vue'
+import { useStore } from 'vuex'
+import { get, set, unset, throttle } from 'lodash'
+
+import Select from 'src/components/select/select.vue'
+import SelectMotion from 'src/components/select/select_motion.vue'
+import Checkbox from 'src/components/checkbox/checkbox.vue'
+import ComponentPreview from 'src/components/component_preview/component_preview.vue'
+import StringSetting from '../../helpers/string_setting.vue'
+import ShadowControl from 'src/components/shadow_control/shadow_control.vue'
+import ColorInput from 'src/components/color_input/color_input.vue'
+import PaletteEditor from 'src/components/palette_editor/palette_editor.vue'
+import OpacityInput from 'src/components/opacity_input/opacity_input.vue'
+import RoundnessInput from 'src/components/roundness_input/roundness_input.vue'
+import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
+import Tooltip from 'src/components/tooltip/tooltip.vue'
+import ContrastRatio from 'src/components/contrast_ratio/contrast_ratio.vue'
+import Preview from '../theme_tab/theme_preview.vue'
+
+import VirtualDirectivesTab from './virtual_directives_tab.vue'
+
+import { init, findColor } from 'src/services/theme_data/theme_data_3.service.js'
+import {
+  getCssRules,
+  getScopedVersion
+} from 'src/services/theme_data/css_utils.js'
+import { serialize } from 'src/services/theme_data/iss_serializer.js'
+import { deserializeShadow, deserialize } from 'src/services/theme_data/iss_deserializer.js'
+import {
+  rgb2hex,
+  hex2rgb,
+  getContrastRatio
+} from 'src/services/color_convert/color_convert.js'
+import {
+  newImporter,
+  newExporter
+} from 'src/services/export_import/export_import.js'
+
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faFloppyDisk,
+  faFolderOpen,
+  faFile,
+  faArrowsRotate,
+  faCheck
+} from '@fortawesome/free-solid-svg-icons'
+
+// helper for debugging
+// eslint-disable-next-line no-unused-vars
+const toValue = (x) => JSON.parse(JSON.stringify(x === undefined ? 'null' : x))
+
+// helper to make states comparable
+const normalizeStates = (states) => ['normal', ...(states?.filter(x => x !== 'normal') || [])].join(':')
+
+library.add(
+  faFile,
+  faFloppyDisk,
+  faFolderOpen,
+  faArrowsRotate,
+  faCheck
+)
+
+export default {
+  components: {
+    Select,
+    SelectMotion,
+    Checkbox,
+    Tooltip,
+    StringSetting,
+    ComponentPreview,
+    TabSwitcher,
+    ShadowControl,
+    ColorInput,
+    PaletteEditor,
+    OpacityInput,
+    RoundnessInput,
+    ContrastRatio,
+    Preview,
+    VirtualDirectivesTab
+  },
+  setup (props, context) {
+    const exports = {}
+    const store = useStore()
+    // All rules that are made by editor
+    const allEditedRules = ref(store.state.interface.styleDataUsed || {})
+    const styleDataUsed = computed(() => store.state.interface.styleDataUsed)
+
+    watch([styleDataUsed], (value) => {
+      onImport(store.state.interface.styleDataUsed)
+    }, { once: true })
+
+    exports.isActive = computed(() => {
+      const tabSwitcher = getCurrentInstance().parent.ctx
+      return tabSwitcher ? tabSwitcher.isActive('style') : false
+    })
+
+    // ## Meta stuff
+    exports.name = ref('')
+    exports.author = ref('')
+    exports.license = ref('')
+    exports.website = ref('')
+
+    const metaOut = computed(() => {
+      return [
+        '@meta {',
+        `  name: ${exports.name.value};`,
+        `  author: ${exports.author.value};`,
+        `  license: ${exports.license.value};`,
+        `  website: ${exports.website.value};`,
+        '}'
+      ].join('\n')
+    })
+
+    const metaRule = computed(() => ({
+      component: '@meta',
+      directives: {
+        name: exports.name.value,
+        author: exports.author.value,
+        license: exports.license.value,
+        website: exports.website.value
+      }
+    }))
+
+    // ## Palette stuff
+    const palettes = reactive([
+      {
+        name: 'default',
+        bg: '#121a24',
+        fg: '#182230',
+        text: '#b9b9ba',
+        link: '#d8a070',
+        accent: '#d8a070',
+        cRed: '#FF0000',
+        cBlue: '#0095ff',
+        cGreen: '#0fa00f',
+        cOrange: '#ffa500'
+      },
+      {
+        name: 'light',
+        bg: '#f2f6f9',
+        fg: '#d6dfed',
+        text: '#304055',
+        underlay: '#5d6086',
+        accent: '#f55b1b',
+        cBlue: '#0095ff',
+        cRed: '#d31014',
+        cGreen: '#0fa00f',
+        cOrange: '#ffa500',
+        border: '#d8e6f9'
+      }
+    ])
+    exports.palettes = palettes
+
+    // This is kinda dumb but you cannot "replace" reactive() object
+    // and so v-model simply fails when you try to chage (increase only?)
+    // length of the array. Since linter complains about mutating modelValue
+    // inside SelectMotion, the next best thing is to just wipe existing array
+    // and replace it with new one.
+
+    const onPalettesUpdate = (e) => {
+      palettes.splice(0, palettes.length)
+      palettes.push(...e)
+    }
+    exports.onPalettesUpdate = onPalettesUpdate
+
+    const selectedPaletteId = ref(0)
+    const selectedPalette = computed({
+      get () {
+        return palettes[selectedPaletteId.value]
+      },
+      set (newPalette) {
+        palettes[selectedPaletteId.value] = newPalette
+      }
+    })
+    exports.selectedPaletteId = selectedPaletteId
+    exports.selectedPalette = selectedPalette
+    provide('selectedPalette', selectedPalette)
+
+    watch([selectedPalette], () => updateOverallPreview())
+
+    exports.getNewPalette = () => ({
+      name: 'new palette',
+      bg: '#121a24',
+      fg: '#182230',
+      text: '#b9b9ba',
+      link: '#d8a070',
+      accent: '#d8a070',
+      cRed: '#FF0000',
+      cBlue: '#0095ff',
+      cGreen: '#0fa00f',
+      cOrange: '#ffa500'
+    })
+
+    // Raw format
+    const palettesRule = computed(() => {
+      return palettes.map(palette => {
+        const { name, ...rest } = palette
+        return {
+          component: '@palette',
+          variant: name,
+          directives: Object
+            .entries(rest)
+            .filter(([k, v]) => v && k)
+            .reduce((acc, [k, v]) => ({ ...acc, [k]: v }), {})
+        }
+      })
+    })
+
+    // Text format
+    const palettesOut = computed(() => {
+      return palettes.map(({ name, ...palette }) => {
+        const entries = Object
+          .entries(palette)
+          .filter(([k, v]) => v && k)
+          .map(([slot, data]) => `  ${slot}: ${data};`)
+          .join('\n')
+
+        return `@palette.${name} {\n${entries}\n}`
+      }).join('\n\n')
+    })
+
+    // ## Components stuff
+    // Getting existing components
+    const componentsContext = require.context('src', true, /\.style.js(on)?$/)
+    const componentKeysAll = componentsContext.keys()
+    const componentsMap = new Map(
+      componentKeysAll
+        .map(
+          key => [key, componentsContext(key).default]
+        ).filter(([key, component]) => !component.virtual && !component.notEditable)
+    )
+    exports.componentsMap = componentsMap
+    const componentKeys = [...componentsMap.keys()]
+    exports.componentKeys = componentKeys
+
+    // Component list and selection
+    const selectedComponentKey = ref(componentsMap.keys().next().value)
+    exports.selectedComponentKey = selectedComponentKey
+
+    const selectedComponent = computed(() => componentsMap.get(selectedComponentKey.value))
+    const selectedComponentName = computed(() => selectedComponent.value.name)
+
+    // Selection basis
+    exports.selectedComponentVariants = computed(() => {
+      return Object.keys({ normal: null, ...(selectedComponent.value.variants || {}) })
+    })
+    exports.selectedComponentStates = computed(() => {
+      const all = Object.keys({ normal: null, ...(selectedComponent.value.states || {}) })
+      return all.filter(x => x !== 'normal')
+    })
+
+    // selection
+    const selectedVariant = ref('normal')
+    exports.selectedVariant = selectedVariant
+    const selectedState = reactive(new Set())
+    exports.selectedState = selectedState
+    exports.updateSelectedStates = (state, v) => {
+      if (v) {
+        selectedState.add(state)
+      } else {
+        selectedState.delete(state)
+      }
+    }
+
+    // Reset variant and state on component change
+    const updateSelectedComponent = () => {
+      selectedVariant.value = 'normal'
+      selectedState.clear()
+    }
+
+    watch(
+      selectedComponentName,
+      updateSelectedComponent
+    )
+
+    // ### Rules stuff aka meat and potatoes
+    // The native structure of separate rules and the child -> parent
+    // relation isn't very convenient for editor, we replace the array
+    // and child -> parent structure with map and parent -> child structure
+    const rulesToEditorFriendly = (rules, root = {}) => rules.reduce((acc, rule) => {
+      const { parent: rParent, component: rComponent } = rule
+      const parent = rParent ?? rule
+      const hasChildren = !!rParent
+      const child = hasChildren ? rule : null
+
+      const {
+        component: pComponent,
+        variant: pVariant = 'normal',
+        state: pState = [] // no relation to Intel CPUs whatsoever
+      } = parent
+
+      const pPath = `${hasChildren ? pComponent : rComponent}.${pVariant}.${normalizeStates(pState)}`
+
+      let output = get(acc, pPath)
+      if (!output) {
+        set(acc, pPath, {})
+        output = get(acc, pPath)
+      }
+
+      if (hasChildren) {
+        output._children = output._children ?? {}
+        const {
+          component: cComponent,
+          variant: cVariant = 'normal',
+          state: cState = [],
+          directives
+        } = child
+
+        const cPath = `${cComponent}.${cVariant}.${normalizeStates(cState)}`
+        set(output._children, cPath, { directives })
+      } else {
+        output.directives = parent.directives
+      }
+      return acc
+    }, root)
+
+    const editorFriendlyFallbackStructure = computed(() => {
+      const root = {}
+
+      componentKeys.forEach((componentKey) => {
+        const componentValue = componentsMap.get(componentKey)
+        const { defaultRules, name } = componentValue
+        rulesToEditorFriendly(
+          defaultRules.map((rule) => ({ ...rule, component: name })),
+          root
+        )
+      })
+
+      return root
+    })
+
+    // Checking whether component can support some "directives" which
+    // are actually virtual subcomponents, i.e. Text, Link etc
+    exports.componentHas = (subComponent) => {
+      return !!selectedComponent.value.validInnerComponents?.find(x => x === subComponent)
+    }
+
+    // Path for lodash's get and set
+    const getPath = (component, directive) => {
+      const pathSuffix = component ? `._children.${component}.normal.normal` : ''
+      const path = `${selectedComponentName.value}.${selectedVariant.value}.${normalizeStates([...selectedState])}${pathSuffix}.directives.${directive}`
+      return path
+    }
+
+    // Templates for directives
+    const isElementPresent = (component, directive, defaultValue = '') => computed({
+      get () {
+        return get(allEditedRules.value, getPath(component, directive)) != null
+      },
+      set (value) {
+        if (value) {
+          const fallback = get(
+            editorFriendlyFallbackStructure.value,
+            getPath(component, directive)
+          )
+          set(allEditedRules.value, getPath(component, directive), fallback ?? defaultValue)
+        } else {
+          unset(allEditedRules.value, getPath(component, directive))
+        }
+        exports.updateOverallPreview()
+      }
+    })
+
+    const getEditedElement = (component, directive, postProcess = x => x) => computed({
+      get () {
+        let usedRule
+        const fallback = editorFriendlyFallbackStructure.value
+        const real = allEditedRules.value
+        const path = getPath(component, directive)
+
+        usedRule = get(real, path) // get real
+        if (!usedRule) {
+          usedRule = get(fallback, path)
+        }
+
+        return postProcess(usedRule)
+      },
+      set (value) {
+        if (value) {
+          set(allEditedRules.value, getPath(component, directive), value)
+        } else {
+          unset(allEditedRules.value, getPath(component, directive))
+        }
+        exports.updateOverallPreview()
+      }
+    })
+
+    // All the editable stuff for the component
+    exports.editedBackgroundColor = getEditedElement(null, 'background')
+    exports.isBackgroundColorPresent = isElementPresent(null, 'background', '#FFFFFF')
+    exports.editedOpacity = getEditedElement(null, 'opacity')
+    exports.isOpacityPresent = isElementPresent(null, 'opacity', 1)
+    exports.editedRoundness = getEditedElement(null, 'roundness')
+    exports.isRoundnessPresent = isElementPresent(null, 'roundness', '0')
+    exports.editedTextColor = getEditedElement('Text', 'textColor')
+    exports.isTextColorPresent = isElementPresent('Text', 'textColor', '#000000')
+    exports.editedTextAuto = getEditedElement('Text', 'textAuto')
+    exports.isTextAutoPresent = isElementPresent('Text', 'textAuto', '#000000')
+    exports.editedLinkColor = getEditedElement('Link', 'textColor')
+    exports.isLinkColorPresent = isElementPresent('Link', 'textColor', '#000080')
+    exports.editedIconColor = getEditedElement('Icon', 'textColor')
+    exports.isIconColorPresent = isElementPresent('Icon', 'textColor', '#909090')
+    exports.editedBorderColor = getEditedElement('Border', 'textColor')
+    exports.isBorderColorPresent = isElementPresent('Border', 'textColor', '#909090')
+
+    const getContrast = (bg, text) => {
+      try {
+        const bgRgb = hex2rgb(bg)
+        const textRgb = hex2rgb(text)
+
+        const ratio = getContrastRatio(bgRgb, textRgb)
+        return {
+          // TODO this ideally should be part of <ContractRatio />
+          ratio,
+          text: ratio.toPrecision(3) + ':1',
+          // AA level, AAA level
+          aa: ratio >= 4.5,
+          aaa: ratio >= 7,
+          // same but for 18pt+ texts
+          laa: ratio >= 3,
+          laaa: ratio >= 4.5
+        }
+      } catch (e) {
+        console.warn('Failure computing contrast', e)
+        return { error: e }
+      }
+    }
+
+    const normalizeShadows = (shadows) => {
+      return shadows?.map(shadow => {
+        if (typeof shadow === 'object') {
+          return shadow
+        }
+        if (typeof shadow === 'string') {
+          try {
+            return deserializeShadow(shadow)
+          } catch (e) {
+            console.warn(e)
+            return shadow
+          }
+        }
+        return null
+      })
+    }
+    provide('normalizeShadows', normalizeShadows)
+
+    // Shadow is partially edited outside the ShadowControl
+    // for better space utilization
+    const editedShadow = getEditedElement(null, 'shadow', normalizeShadows)
+    exports.editedShadow = editedShadow
+    const editedSubShadowId = ref(null)
+    exports.editedSubShadowId = editedSubShadowId
+    const editedSubShadow = computed(() => {
+      if (editedShadow.value == null || editedSubShadowId.value == null) return null
+      return editedShadow.value[editedSubShadowId.value]
+    })
+    exports.editedSubShadow = editedSubShadow
+    exports.isShadowPresent = isElementPresent(null, 'shadow', [])
+    exports.onSubShadow = (id) => {
+      if (id != null) {
+        editedSubShadowId.value = id
+      } else {
+        editedSubShadow.value = null
+      }
+    }
+    exports.updateSubShadow = (axis, value) => {
+      if (!editedSubShadow.value || editedSubShadowId.value == null) return
+      const newEditedShadow = [...editedShadow.value]
+
+      newEditedShadow[editedSubShadowId.value] = {
+        ...newEditedShadow[editedSubShadowId.value],
+        [axis]: value
+      }
+
+      editedShadow.value = newEditedShadow
+    }
+    exports.isShadowTabOpen = ref(false)
+    exports.onTabSwitch = (tab) => {
+      exports.isShadowTabOpen.value = tab === 'shadow'
+    }
+
+    // component preview
+    exports.editorHintStyle = computed(() => {
+      const editorHint = selectedComponent.value.editor
+      const styles = []
+      if (editorHint && Object.keys(editorHint).length > 0) {
+        if (editorHint.aspect != null) {
+          styles.push(`aspect-ratio: ${editorHint.aspect} !important;`)
+        }
+        if (editorHint.border != null) {
+          styles.push(`border-width: ${editorHint.border}px !important;`)
+        }
+      }
+      return styles.join('; ')
+    })
+
+    const editorFriendlyToOriginal = computed(() => {
+      const resultRules = []
+
+      const convert = (component, data = {}, parent) => {
+        const variants = Object.entries(data || {})
+
+        variants.forEach(([variant, variantData]) => {
+          const states = Object.entries(variantData)
+
+          states.forEach(([jointState, stateData]) => {
+            const state = jointState.split(/:/g)
+            const result = {
+              component,
+              variant,
+              state,
+              directives: stateData.directives || {}
+            }
+
+            if (parent) {
+              result.parent = {
+                component: parent
+              }
+            }
+
+            resultRules.push(result)
+
+            // Currently we only support single depth for simplicity's sake
+            if (!parent) {
+              Object.entries(stateData._children || {}).forEach(([cName, child]) => convert(cName, child, component))
+            }
+          })
+        })
+      }
+
+      [...componentsMap.values()].forEach(({ name }) => {
+        convert(name, allEditedRules.value[name])
+      })
+
+      return resultRules
+    })
+
+    const allCustomVirtualDirectives = [...componentsMap.values()]
+      .map(c => {
+        return c
+          .defaultRules
+          .filter(c => c.component === 'Root')
+          .map(x => Object.entries(x.directives))
+          .flat()
+      })
+      .filter(x => x)
+      .flat()
+      .map(([name, value]) => {
+        const [valType, valVal] = value.split('|')
+        return {
+          name: name.substring(2),
+          valType: valType?.trim(),
+          value: valVal?.trim()
+        }
+      })
+
+    const virtualDirectives = ref(allCustomVirtualDirectives)
+    exports.virtualDirectives = virtualDirectives
+    exports.updateVirtualDirectives = (value) => {
+      virtualDirectives.value = value
+    }
+
+    // Raw format
+    const virtualDirectivesRule = computed(() => ({
+      component: 'Root',
+      directives: Object.fromEntries(
+        virtualDirectives.value.map(vd => [`--${vd.name}`, `${vd.valType} | ${vd.value}`])
+      )
+    }))
+
+    // Text format
+    const virtualDirectivesOut = computed(() => {
+      return [
+        'Root {',
+        ...virtualDirectives.value
+          .filter(vd => vd.name && vd.valType && vd.value)
+          .map(vd => `  --${vd.name}: ${vd.valType} | ${vd.value};`),
+        '}'
+      ].join('\n')
+    })
+
+    exports.computeColor = (color) => {
+      let computedColor
+      try {
+        computedColor = findColor(color, { dynamicVars: dynamicVars.value, staticVars: staticVars.value })
+        if (computedColor) {
+          return rgb2hex(computedColor)
+        }
+      } catch (e) {
+        console.warn(e)
+      }
+      return null
+    }
+    provide('computeColor', exports.computeColor)
+
+    exports.contrast = computed(() => {
+      return getContrast(
+        exports.computeColor(previewColors.value.background),
+        exports.computeColor(previewColors.value.text)
+      )
+    })
+
+    // ## Export and Import
+    const styleExporter = newExporter({
+      filename: () => exports.name.value ?? 'pleroma_theme',
+      mime: 'text/plain',
+      extension: 'iss',
+      getExportedObject: () => exportStyleData.value
+    })
+
+    const onImport = parsed => {
+      const editorComponents = parsed.filter(x => x.component.startsWith('@'))
+      const rootComponent = parsed.find(x => x.component === 'Root')
+      const rules = parsed.filter(x => !x.component.startsWith('@') && x.component !== 'Root')
+      const metaIn = editorComponents.find(x => x.component === '@meta').directives
+      const palettesIn = editorComponents.filter(x => x.component === '@palette')
+
+      exports.name.value = metaIn.name
+      exports.license.value = metaIn.license
+      exports.author.value = metaIn.author
+      exports.website.value = metaIn.website
+
+      const newVirtualDirectives = Object
+        .entries(rootComponent.directives)
+        .map(([name, value]) => {
+          const [valType, valVal] = value.split('|').map(x => x.trim())
+          return { name: name.substring(2), valType, value: valVal }
+        })
+      virtualDirectives.value = newVirtualDirectives
+
+      onPalettesUpdate(palettesIn.map(x => ({ name: x.variant, ...x.directives })))
+
+      allEditedRules.value = rulesToEditorFriendly(rules)
+
+      exports.updateOverallPreview()
+    }
+
+    const styleImporter = newImporter({
+      accept: '.iss',
+      parser (string) { return deserialize(string) },
+      onImportFailure (result) {
+        console.error('Failure importing style:', result)
+        this.$store.dispatch('pushGlobalNotice', { messageKey: 'settings.invalid_theme_imported', level: 'error' })
+      },
+      onImport
+    })
+
+    // Raw format
+    const exportRules = computed(() => [
+      metaRule.value,
+      ...palettesRule.value,
+      virtualDirectivesRule.value,
+      ...editorFriendlyToOriginal.value
+    ])
+
+    // Text format
+    const exportStyleData = computed(() => {
+      return [
+        metaOut.value,
+        palettesOut.value,
+        virtualDirectivesOut.value,
+        serialize(editorFriendlyToOriginal.value)
+      ].join('\n\n')
+    })
+
+    exports.clearStyle = () => {
+      onImport(store.state.interface.styleDataUsed)
+    }
+
+    exports.exportStyle = () => {
+      styleExporter.exportData()
+    }
+
+    exports.importStyle = () => {
+      styleImporter.importData()
+    }
+
+    exports.applyStyle = () => {
+      store.dispatch('setStyleCustom', exportRules.value)
+    }
+
+    const overallPreviewRules = ref([])
+    exports.overallPreviewRules = overallPreviewRules
+
+    const overallPreviewCssRules = ref([])
+    watchEffect(throttle(() => {
+      try {
+        overallPreviewCssRules.value = getScopedVersion(
+          getCssRules(overallPreviewRules.value),
+          '#edited-style-preview'
+        ).join('\n')
+      } catch (e) {
+        console.error(e)
+      }
+    }, 500))
+
+    exports.overallPreviewCssRules = overallPreviewCssRules
+
+    const updateOverallPreview = throttle(() => {
+      try {
+        overallPreviewRules.value = init({
+          inputRuleset: [
+            ...exportRules.value,
+            {
+              component: 'Root',
+              directives: Object.fromEntries(
+                Object
+                  .entries(selectedPalette.value)
+                  .filter(([k, v]) => k && v && k !== 'name')
+                  .map(([k, v]) => [`--${k}`, `color | ${v}`])
+              )
+            }
+          ],
+          ultimateBackgroundColor: '#000000',
+          debug: true
+        }).eager
+      } catch (e) {
+        console.error('Could not compile preview theme', e)
+        return null
+      }
+    }, 5000)
+    //
+    // Apart from "hover" we can't really show how component looks like in
+    // certain states, so we have to fake them.
+    const simulatePseudoSelectors = (css, prefix) => css
+      .replace(prefix, '.component-preview .preview-block')
+      .replace(':active', '.preview-active')
+      .replace(':hover', '.preview-hover')
+      .replace(':active', '.preview-active')
+      .replace(':focus', '.preview-focus')
+      .replace(':focus-within', '.preview-focus-within')
+      .replace(':disabled', '.preview-disabled')
+
+    const previewRules = computed(() => {
+      const filtered = overallPreviewRules.value.filter(r => {
+        const componentMatch = r.component === selectedComponentName.value
+        const parentComponentMatch = r.parent?.component === selectedComponentName.value
+        if (!componentMatch && !parentComponentMatch) return false
+        const rule = parentComponentMatch ? r.parent : r
+        if (rule.component !== selectedComponentName.value) return false
+        if (rule.variant !== selectedVariant.value) return false
+        const ruleState = new Set(rule.state.filter(x => x !== 'normal'))
+        const differenceA = [...ruleState].filter(x => !selectedState.has(x))
+        const differenceB = [...selectedState].filter(x => !ruleState.has(x))
+        return (differenceA.length + differenceB.length) === 0
+      })
+      const sorted = [...filtered]
+        .filter(x => x.component === selectedComponentName.value)
+        .sort((a, b) => {
+          const aSelectorLength = a.selector.split(/ /g).length
+          const bSelectorLength = b.selector.split(/ /g).length
+          return aSelectorLength - bSelectorLength
+        })
+
+      const prefix = sorted[0].selector
+
+      return filtered.filter(x => x.selector.startsWith(prefix))
+    })
+
+    exports.previewClass = computed(() => {
+      const selectors = []
+      if (!!selectedComponent.value.variants?.normal || selectedVariant.value !== 'normal') {
+        selectors.push(selectedComponent.value.variants[selectedVariant.value])
+      }
+      if (selectedState.size > 0) {
+        selectedState.forEach(state => {
+          const original = selectedComponent.value.states[state]
+          selectors.push(simulatePseudoSelectors(original))
+        })
+      }
+      return selectors.map(x => x.substring(1)).join('')
+    })
+
+    exports.previewCss = computed(() => {
+      try {
+        const prefix = previewRules.value[0].selector
+        const scoped = getCssRules(previewRules.value).map(x => simulatePseudoSelectors(x, prefix))
+        return scoped.join('\n')
+      } catch (e) {
+        console.error('Invalid ruleset', e)
+        return null
+      }
+    })
+
+    const dynamicVars = computed(() => {
+      return previewRules.value[0].dynamicVars
+    })
+
+    const staticVars = computed(() => {
+      const rootComponent = overallPreviewRules.value.find(r => {
+        return r.component === 'Root'
+      })
+      const rootDirectivesEntries = Object.entries(rootComponent.directives)
+      const directives = {}
+      rootDirectivesEntries
+        .filter(([k, v]) => k.startsWith('--') && v.startsWith('color | '))
+        .map(([k, v]) => [k.substring(2), v.substring('color | '.length)])
+        .forEach(([k, v]) => {
+          directives[k] = findColor(v, { dynamicVars: {}, staticVars: directives })
+        })
+      return directives
+    })
+    provide('staticVars', staticVars)
+    exports.staticVars = staticVars
+
+    const previewColors = computed(() => {
+      const stacked = dynamicVars.value.stacked
+      const background = typeof stacked === 'string' ? stacked : rgb2hex(stacked)
+      return {
+        text: previewRules.value.find(r => r.component === 'Text')?.virtualDirectives['--text'],
+        link: previewRules.value.find(r => r.component === 'Link')?.virtualDirectives['--link'],
+        border: previewRules.value.find(r => r.component === 'Border')?.virtualDirectives['--border'],
+        icon: previewRules.value.find(r => r.component === 'Icon')?.virtualDirectives['--icon'],
+        background
+      }
+    })
+    exports.previewColors = previewColors
+    exports.updateOverallPreview = updateOverallPreview
+
+    updateOverallPreview()
+
+    watch(
+      [
+        allEditedRules.value,
+        palettes,
+        selectedPalette,
+        selectedState,
+        selectedVariant
+      ],
+      updateOverallPreview
+    )
+
+    return exports
+  }
+}
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.scss b/src/components/settings_modal/tabs/style_tab/style_tab.scss
new file mode 100644
index 000000000..a9c35c085
--- /dev/null
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.scss
@@ -0,0 +1,264 @@
+.StyleTab {
+  .style-control {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    margin-bottom: 0.5em;
+
+    .label {
+      margin-right: 0.5em;
+      flex: 1 1 0;
+      line-height: 2;
+      min-height: 2em;
+    }
+
+    &.suboption {
+      margin-left: 1em;
+    }
+
+    .color-input {
+      flex: 0 0 0;
+    }
+
+    input,
+    select {
+      min-width: 3em;
+      margin: 0;
+      flex: 0;
+
+      &[type="number"] {
+        min-width: 9em;
+
+        &.-small {
+          min-width: 5em;
+        }
+      }
+
+      &[type="range"] {
+        flex: 1;
+        min-width: 9em;
+        align-self: center;
+        margin: 0 0.25em;
+      }
+
+      &[type="checkbox"] + i {
+        height: 1.1em;
+        align-self: center;
+      }
+    }
+  }
+
+  .meta-preview {
+    display: grid;
+    grid-template:
+      "meta meta preview preview"
+      "meta meta preview preview"
+      "meta meta preview preview"
+      "meta meta preview preview";
+    grid-gap: 0.5em;
+    grid-template-columns: min-content min-content 6fr max-content;
+
+    ul.setting-list {
+      padding: 0;
+      margin: 0;
+      display: grid;
+      grid-template-rows: subgrid;
+      grid-area: meta;
+
+      > li {
+        margin: 0;
+      }
+
+      .meta-field {
+        margin: 0;
+
+        .setting-label {
+          display: inline-block;
+          margin-bottom: 0.5em;
+        }
+      }
+    }
+
+    #edited-style-preview {
+      grid-area: preview;
+    }
+  }
+
+  .setting-item {
+    padding-bottom: 0;
+
+    .btn {
+      padding: 0 0.5em;
+    }
+
+    &:not(:first-child) {
+      margin-top: 0.5em;
+    }
+
+    &:not(:last-child) {
+      margin-bottom: 0.5em;
+    }
+  }
+
+  .list-editor {
+    display: grid;
+    grid-template-areas:
+      "label    editor"
+      "selector editor"
+      "movement editor";
+    grid-template-columns: 10em 1fr;
+    grid-template-rows: auto 1fr auto;
+    grid-gap: 0.5em;
+
+    .list-edit-area {
+      grid-area: editor;
+    }
+
+    .list-select {
+      grid-area: selector;
+      margin: 0;
+
+      &-label {
+        font-weight: bold;
+        grid-area: label;
+        margin: 0;
+        align-self: baseline;
+      }
+
+      &-movement {
+        grid-area: movement;
+        margin: 0;
+      }
+    }
+  }
+
+  .palette-editor {
+    width: min-content;
+
+    .list-edit-area {
+      display: grid;
+      align-self: baseline;
+      grid-template-rows: subgrid;
+      grid-template-columns: 1fr;
+    }
+
+    .palette-editor-single {
+      grid-row: 2 / span 2;
+    }
+  }
+
+  .variables-editor {
+    .variable-selector {
+      display: grid;
+      grid-template-columns: auto 1fr auto 10em;
+      grid-template-rows: subgrid;
+      align-items: baseline;
+      grid-gap: 0 0.5em;
+    }
+
+    .list-edit-area {
+      display: grid;
+      grid-template-rows: subgrid;
+    }
+
+    .shadow-control {
+      grid-row: 2 / span 2;
+    }
+  }
+
+  .component-editor {
+    display: grid;
+    grid-template-columns: 6fr 3fr 4fr;
+    grid-template-rows: auto auto 1fr;
+    grid-gap: 0.5em;
+    grid-template-areas:
+      "component component variant"
+      "state     state     state"
+      "preview   settings  settings";
+
+    .component-selector {
+      grid-area: component;
+      align-self: center;
+    }
+
+    .component-selector,
+    .state-selector,
+    .variant-selector {
+      display: grid;
+      grid-template-columns: 1fr minmax(1fr, 10em);
+      grid-template-rows: auto;
+      grid-auto-flow: column;
+      grid-gap: 0.5em;
+      align-items: baseline;
+
+      > label:not(.Select) {
+        font-weight: bold;
+        justify-self: right;
+      }
+    }
+
+    .state-selector {
+      grid-area: state;
+      grid-template-columns: minmax(min-content, 7em) 1fr;
+    }
+
+    .variant-selector {
+      grid-area: variant;
+    }
+
+    .state-selector-list {
+      display: grid;
+      list-style: none;
+      grid-auto-flow: dense;
+      grid-template-columns: repeat(5, minmax(min-content, 1fr));
+      grid-auto-rows: 1fr;
+      grid-gap: 0.5em;
+      padding: 0;
+      margin: 0;
+    }
+
+    .preview-container {
+      --border: none;
+      --shadow: none;
+      --roundness: none;
+
+      grid-area: preview;
+    }
+
+    .component-settings {
+      grid-area: settings;
+    }
+
+    .editor-tab {
+      display: grid;
+      grid-template-columns: 1fr 2em;
+      grid-column-gap: 0.5em;
+      align-items: center;
+      grid-auto-rows: min-content;
+      grid-auto-flow: dense;
+      border-left: 1px solid var(--border);
+      border-right: 1px solid var(--border);
+      border-bottom: 1px solid var(--border);
+      padding: 0.5em;
+    }
+
+    .shadow-tab {
+      grid-template-columns: 1fr;
+      justify-items: center;
+    }
+  }
+}
+
+.extra-content {
+  .style-actions-container {
+    width: 100%;
+    display: flex;
+    justify-content: end;
+
+    .style-actions {
+      display: grid;
+      grid-template-columns: repeat(4, minmax(7em, 1fr));
+      grid-gap: 0.25em;
+    }
+  }
+}
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.vue b/src/components/settings_modal/tabs/style_tab/style_tab.vue
new file mode 100644
index 000000000..3cdb41830
--- /dev/null
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.vue
@@ -0,0 +1,402 @@
+<script src="./style_tab.js">
+</script>
+
+<template>
+  <div class="StyleTab">
+    <div class="setting-item heading">
+      <h2> {{ $t('settings.style.themes3.editor.title') }} </h2>
+      <div class="meta-preview">
+        <!-- eslint-disable vue/no-v-text-v-html-on-component -->
+        <!-- eslint-disable vue/no-v-html -->
+        <component
+          :is="'style'"
+          v-html="overallPreviewCssRules"
+        />
+        <!-- eslint-enable vue/no-v-html -->
+        <!-- eslint-enable vue/no-v-text-v-html-on-component -->
+        <Preview id="edited-style-preview" />
+        <teleport
+          v-if="isActive"
+          to="#unscrolled-content"
+        >
+          <div class="style-actions-container">
+            <div class="style-actions">
+              <button
+                class="btn button-default button-new"
+                @click="clearStyle"
+              >
+                <FAIcon icon="arrows-rotate" />
+                {{ $t('settings.style.themes3.editor.reset_style') }}
+              </button>
+              <button
+                class="btn button-default button-load"
+                @click="importStyle"
+              >
+                <FAIcon icon="folder-open" />
+                {{ $t('settings.style.themes3.editor.load_style') }}
+              </button>
+              <button
+                class="btn button-default button-save"
+                @click="exportStyle"
+              >
+                <FAIcon icon="floppy-disk" />
+                {{ $t('settings.style.themes3.editor.save_style') }}
+              </button>
+              <button
+                class="btn button-default button-apply"
+                @click="applyStyle"
+              >
+                <FAIcon icon="check" />
+                {{ $t('settings.style.themes3.editor.apply_preview') }}
+              </button>
+            </div>
+          </div>
+        </teleport>
+        <ul class="setting-list style-metadata">
+          <li>
+            <StringSetting
+              v-model="name"
+              class="meta-field"
+            >
+              {{ $t('settings.style.themes3.editor.style_name') }}
+            </StringSetting>
+          </li>
+          <li>
+            <StringSetting
+              v-model="author"
+              class="meta-field"
+            >
+              {{ $t('settings.style.themes3.editor.style_author') }}
+            </StringSetting>
+          </li>
+          <li>
+            <StringSetting
+              v-model="license"
+              class="meta-field"
+            >
+              {{ $t('settings.style.themes3.editor.style_license') }}
+            </StringSetting>
+          </li>
+          <li>
+            <StringSetting
+              v-model="website"
+              class="meta-field"
+            >
+              {{ $t('settings.style.themes3.editor.style_website') }}
+            </StringSetting>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <tab-switcher>
+      <div
+        key="component"
+        class="setting-item component-editor"
+        :label="$t('settings.style.themes3.editor.component_tab')"
+      >
+        <div class="component-selector">
+          <label for="component-selector">
+            {{ $t('settings.style.themes3.editor.component_selector') }}
+            {{ ' ' }}
+          </label>
+          <Select
+            id="component-selector"
+            v-model="selectedComponentKey"
+          >
+            <option
+              v-for="key in componentKeys"
+              :key="'component-' + key"
+              :value="key"
+            >
+              {{ componentsMap.get(key).name }}
+            </option>
+          </Select>
+        </div>
+        <div
+          v-if="selectedComponentVariants.length > 1"
+          class="variant-selector"
+        >
+          <label for="variant-selector">
+            {{ $t('settings.style.themes3.editor.variant_selector') }}
+          </label>
+          <Select
+            v-model="selectedVariant"
+          >
+            <option
+              v-for="variant in selectedComponentVariants"
+              :key="'component-variant-' + variant"
+              :value="variant"
+            >
+              {{ variant }}
+            </option>
+          </Select>
+        </div>
+        <div
+          v-if="selectedComponentStates.length > 0"
+          class="state-selector"
+        >
+          <label>
+            {{ $t('settings.style.themes3.editor.states_selector') }}
+          </label>
+          <ul
+            class="state-selector-list"
+          >
+            <li
+              v-for="state in selectedComponentStates"
+              :key="'component-state-' + state"
+            >
+              <Checkbox
+                :value="selectedState.has(state)"
+                @update:modelValue="(v) => updateSelectedStates(state, v)"
+              >
+                {{ state }}
+              </Checkbox>
+            </li>
+          </ul>
+        </div>
+        <div class="preview-container">
+          <!-- eslint-disable vue/no-v-html vue/no-v-text-v-html-on-component -->
+          <component
+            :is="'style'"
+            v-html="previewCss"
+          />
+          <!-- eslint-enable vue/no-v-html vue/no-v-text-v-html-on-component -->
+          <ComponentPreview
+            class="component-preview"
+            :show-text="componentHas('Text')"
+            :shadow-control="isShadowTabOpen"
+            :preview-class="previewClass"
+            :preview-style="editorHintStyle"
+            :preview-css="previewCss"
+            :disabled="!editedSubShadow && typeof editedShadow !== 'string'"
+            :shadow="editedSubShadow"
+            :no-color-control="true"
+            @update:shadow="({ axis, value }) => updateSubShadow(axis, value)"
+          />
+        </div>
+        <tab-switcher
+          ref="tabSwitcher"
+          class="component-settings"
+          :on-switch="onTabSwitch"
+        >
+          <div
+            key="main"
+            class="editor-tab"
+            :label="$t('settings.style.themes3.editor.main_tab')"
+          >
+            <ColorInput
+              v-model="editedBackgroundColor"
+              name="component-background-color"
+              :fallback="computeColor(editedBackgroundColor) ?? previewColors.background"
+              :disabled="!isBackgroundColorPresent"
+              :label="$t('settings.style.themes3.editor.background')"
+              :hide-optional-checkbox="true"
+            />
+            <Tooltip :text="$t('settings.style.themes3.editor.include_in_rule')">
+              <Checkbox v-model="isBackgroundColorPresent" />
+            </Tooltip>
+            <ColorInput
+              v-if="componentHas('Text')"
+              v-model="editedTextColor"
+              name="component-text-color"
+              :fallback="computeColor(editedTextColor) ?? previewColors.text"
+              :label="$t('settings.style.themes3.editor.text_color')"
+              :disabled="!isTextColorPresent"
+              :hide-optional-checkbox="true"
+            />
+            <Tooltip
+              v-if="componentHas('Text')"
+              :text="$t('settings.style.themes3.editor.include_in_rule')"
+            >
+              <Checkbox v-model="isTextColorPresent" />
+            </Tooltip>
+            <div
+              v-if="componentHas('Text')"
+              class="style-control suboption"
+            >
+              <label
+                for="textAuto"
+                class="label"
+                :class="{ faint: !isTextAutoPresent }"
+              >
+                {{ $t('settings.style.themes3.editor.text_auto.label') }}
+              </label>
+              <Select
+                id="textAuto"
+                v-model="editedTextAuto"
+                :disabled="!isTextAutoPresent"
+              >
+                <option value="no-preserve">
+                  {{ $t('settings.style.themes3.editor.text_auto.no-preserve') }}
+                </option>
+                <option value="no-auto">
+                  {{ $t('settings.style.themes3.editor.text_auto.no-auto') }}
+                </option>
+                <option value="preserve">
+                  {{ $t('settings.style.themes3.editor.text_auto.preserve') }}
+                </option>
+              </Select>
+            </div>
+            <Tooltip
+              v-if="componentHas('Text')"
+              :text="$t('settings.style.themes3.editor.include_in_rule')"
+            >
+              <Checkbox v-model="isTextAutoPresent" />
+            </Tooltip>
+            <div
+              v-if="componentHas('Text')"
+              class="style-control suboption"
+            >
+              <label class="label">
+                {{ $t('settings.style.themes3.editor.contrast') }}
+              </label>
+              <ContrastRatio
+                :show-ratio="true"
+                :contrast="contrast"
+              />
+            </div>
+            <div v-if="componentHas('Text')" />
+            <ColorInput
+              v-if="componentHas('Link')"
+              v-model="editedLinkColor"
+              name="component-link-color"
+              :fallback="computeColor(editedLinkColor) ?? previewColors.link"
+              :label="$t('settings.style.themes3.editor.link_color')"
+              :disabled="!isLinkColorPresent"
+              :hide-optional-checkbox="true"
+            />
+            <Tooltip
+              v-if="componentHas('Link')"
+              :text="$t('settings.style.themes3.editor.include_in_rule')"
+            >
+              <Checkbox v-model="isLinkColorPresent" />
+            </Tooltip>
+            <ColorInput
+              v-if="componentHas('Icon')"
+              v-model="editedIconColor"
+              name="component-icon-color"
+              :fallback="computeColor(editedIconColor) ?? previewColors.icon"
+              :label="$t('settings.style.themes3.editor.icon_color')"
+              :disabled="!isIconColorPresent"
+              :hide-optional-checkbox="true"
+            />
+            <Tooltip
+              v-if="componentHas('Icon')"
+              :text="$t('settings.style.themes3.editor.include_in_rule')"
+            >
+              <Checkbox v-model="isIconColorPresent" />
+            </Tooltip>
+            <ColorInput
+              v-if="componentHas('Border')"
+              v-model="editedBorderColor"
+              name="component-border-color"
+              :fallback="computeColor(editedBorderColor) ?? previewColors.border"
+              :label="$t('settings.style.themes3.editor.border_color')"
+              :disabled="!isBorderColorPresent"
+              :hide-optional-checkbox="true"
+            />
+            <Tooltip
+              v-if="componentHas('Border')"
+              :text="$t('settings.style.themes3.editor.include_in_rule')"
+            >
+              <Checkbox v-model="isBorderColorPresent" />
+            </Tooltip>
+            <OpacityInput
+              v-model="editedOpacity"
+              name="component-opacity"
+              :disabled="!isOpacityPresent"
+              :label="$t('settings.style.themes3.editor.opacity')"
+            />
+            <Tooltip :text="$t('settings.style.themes3.editor.include_in_rule')">
+              <Checkbox v-model="isOpacityPresent" />
+            </Tooltip>
+            <RoundnessInput
+              v-model="editedRoundness"
+              name="component-roundness"
+              :disabled="!isRoundnessPresent"
+              :label="$t('settings.style.themes3.editor.roundness')"
+            />
+            <Tooltip :text="$t('settings.style.themes3.editor.include_in_rule')">
+              <Checkbox v-model="isRoundnessPresent" />
+            </Tooltip>
+          </div>
+          <div
+            key="shadow"
+            class="editor-tab shadow-tab"
+            :label="$t('settings.style.themes3.editor.shadows_tab')"
+          >
+            <Checkbox
+              v-model="isShadowPresent"
+              class="style-control"
+            >
+              {{ $t('settings.style.themes3.editor.include_in_rule') }}
+            </checkbox>
+            <ShadowControl
+              v-model="editedShadow"
+              :disabled="!isShadowPresent"
+              :no-preview="true"
+              :compact="true"
+              :static-vars="staticVars"
+              @subShadowSelected="onSubShadow"
+            />
+          </div>
+        </tab-switcher>
+      </div>
+      <div
+        key="palette"
+        :label="$t('settings.style.themes3.editor.palette_tab')"
+        class="setting-item list-editor palette-editor"
+      >
+        <label
+          class="list-select-label"
+          for="palette-selector"
+        >
+          {{ $t('settings.style.themes3.palette.label') }}
+          {{ ' ' }}
+        </label>
+        <Select
+          id="palette-selector"
+          v-model="selectedPaletteId"
+          class="list-select"
+          size="4"
+        >
+          <option
+            v-for="(p, index) in palettes"
+            :key="p.name"
+            :value="index"
+          >
+            {{ p.name }}
+          </option>
+        </Select>
+        <SelectMotion
+          class="list-select-movement"
+          :model-value="palettes"
+          :selected-id="selectedPaletteId"
+          :get-add-value="getNewPalette"
+          @update:modelValue="onPalettesUpdate"
+          @update:selectedId="e => selectedPaletteId = e"
+        />
+        <div class="list-edit-area">
+          <StringSetting
+            v-model="selectedPalette.name"
+            class="palette-name-input"
+          >
+            {{ $t('settings.style.themes3.palette.name_label') }}
+          </StringSetting>
+          <PaletteEditor
+            v-model="selectedPalette"
+            class="palette-editor-single"
+          />
+        </div>
+      </div>
+      <VirtualDirectivesTab
+        key="variables"
+        :label="$t('settings.style.themes3.editor.variables_tab')"
+        :model-value="virtualDirectives"
+        @update:modelValue="updateVirtualDirectives"
+      />
+    </tab-switcher>
+  </div>
+</template>
+
+<style src="./style_tab.scss" lang="scss"></style>
diff --git a/src/components/settings_modal/tabs/style_tab/virtual_directives_tab.js b/src/components/settings_modal/tabs/style_tab/virtual_directives_tab.js
new file mode 100644
index 000000000..d98dea615
--- /dev/null
+++ b/src/components/settings_modal/tabs/style_tab/virtual_directives_tab.js
@@ -0,0 +1,132 @@
+import { ref, computed, watch, inject } from 'vue'
+
+import Select from 'src/components/select/select.vue'
+import SelectMotion from 'src/components/select/select_motion.vue'
+import ShadowControl from 'src/components/shadow_control/shadow_control.vue'
+import ColorInput from 'src/components/color_input/color_input.vue'
+
+import { serializeShadow } from 'src/services/theme_data/iss_serializer.js'
+
+// helper for debugging
+// eslint-disable-next-line no-unused-vars
+const toValue = (x) => JSON.parse(JSON.stringify(x === undefined ? 'null' : x))
+
+export default {
+  components: {
+    Select,
+    SelectMotion,
+    ShadowControl,
+    ColorInput
+  },
+  props: ['modelValue'],
+  emits: ['update:modelValue'],
+  setup (props, context) {
+    const exports = {}
+    const emit = context.emit
+
+    exports.emit = emit
+    exports.computeColor = inject('computeColor')
+    exports.staticVars = inject('staticVars')
+
+    const selectedVirtualDirectiveId = ref(0)
+    exports.selectedVirtualDirectiveId = selectedVirtualDirectiveId
+
+    const selectedVirtualDirective = computed({
+      get () {
+        return props.modelValue[selectedVirtualDirectiveId.value]
+      },
+      set (value) {
+        const newVD = [...props.modelValue]
+        newVD[selectedVirtualDirectiveId.value] = value
+
+        emit('update:modelValue', newVD)
+      }
+    })
+    exports.selectedVirtualDirective = selectedVirtualDirective
+
+    exports.selectedVirtualDirectiveValType = computed({
+      get () {
+        return props.modelValue[selectedVirtualDirectiveId.value].valType
+      },
+      set (value) {
+        const newValType = value
+        let newValue
+        switch (value) {
+          case 'shadow':
+            newValue = '0 0 0 #000000 / 1'
+            break
+          case 'color':
+            newValue = '#000000'
+            break
+          default:
+            newValue = 'none'
+        }
+        const newName = props.modelValue[selectedVirtualDirectiveId.value].name
+        props.modelValue[selectedVirtualDirectiveId.value] = {
+          name: newName,
+          value: newValue,
+          valType: newValType
+        }
+      }
+    })
+
+    const draftVirtualDirectiveValid = ref(true)
+    const draftVirtualDirective = ref({})
+    exports.draftVirtualDirective = draftVirtualDirective
+    const normalizeShadows = inject('normalizeShadows')
+
+    watch(
+      selectedVirtualDirective,
+      (directive) => {
+        switch (directive.valType) {
+          case 'shadow': {
+            if (Array.isArray(directive.value)) {
+              draftVirtualDirective.value = normalizeShadows(directive.value)
+            } else {
+              const splitShadow = directive.value.split(/,/g).map(x => x.trim())
+              draftVirtualDirective.value = normalizeShadows(splitShadow)
+            }
+            break
+          }
+          case 'color':
+            draftVirtualDirective.value = directive.value
+            break
+          default:
+            draftVirtualDirective.value = directive.value
+            break
+        }
+      },
+      { immediate: true }
+    )
+
+    watch(
+      draftVirtualDirective,
+      (directive) => {
+        try {
+          switch (selectedVirtualDirective.value.valType) {
+            case 'shadow': {
+              props.modelValue[selectedVirtualDirectiveId.value].value =
+                directive.map(x => serializeShadow(x)).join(', ')
+              break
+            }
+            default:
+              props.modelValue[selectedVirtualDirectiveId.value].value = directive
+          }
+          draftVirtualDirectiveValid.value = true
+        } catch (e) {
+          console.error('Invalid virtual directive value', e)
+          draftVirtualDirectiveValid.value = false
+        }
+      },
+      { immediate: true }
+    )
+
+    exports.getNewVirtualDirective = () => ({
+      name: 'newDirective',
+      valType: 'generic',
+      value: 'foobar'
+    })
+
+    return exports
+  }
+}
diff --git a/src/components/settings_modal/tabs/style_tab/virtual_directives_tab.vue b/src/components/settings_modal/tabs/style_tab/virtual_directives_tab.vue
new file mode 100644
index 000000000..158f0a70c
--- /dev/null
+++ b/src/components/settings_modal/tabs/style_tab/virtual_directives_tab.vue
@@ -0,0 +1,84 @@
+<script src="./virtual_directives_tab.js"></script>
+
+<template>
+  <div class="setting-item list-editor variables-editor">
+    <label
+      class="list-select-label"
+      for="variables-selector"
+    >
+      {{ $t('settings.style.themes3.editor.variables.label') }}
+      {{ ' ' }}
+    </label>
+    <Select
+      id="variables-selector"
+      v-model="selectedVirtualDirectiveId"
+      class="list-select"
+      size="20"
+    >
+      <option
+        v-for="(p, index) in modelValue"
+        :key="p.name"
+        :value="index"
+      >
+        {{ p.name }}
+      </option>
+    </Select>
+    <SelectMotion
+      class="list-select-movement"
+      :model-value="modelValue"
+      :selected-id="selectedVirtualDirectiveId"
+      :get-add-value="getNewVirtualDirective"
+      @update:modelValue="e => emit('update:modelValue', e)"
+      @update:selectedId="e => selectedVirtualDirectiveId = e"
+    />
+    <div class="list-edit-area">
+      <div class="variable-selector">
+        <label
+          class="variable-name-label"
+          for="variables-selector"
+        >
+          {{ $t('settings.style.themes3.editor.variables.name_label') }}
+          {{ ' ' }}
+        </label>
+        <input
+          v-model="selectedVirtualDirective.name"
+          class="input"
+        >
+        <label
+          class="variable-type-label"
+          for="variables-selector"
+        >
+          {{ $t('settings.style.themes3.editor.variables.type_label') }}
+          {{ ' ' }}
+        </label>
+        <Select
+          v-model="selectedVirtualDirectiveValType"
+        >
+          <option value="shadow">
+            {{ $t('settings.style.themes3.editor.variables.type_shadow') }}
+          </option>
+          <option value="color">
+            {{ $t('settings.style.themes3.editor.variables.type_color') }}
+          </option>
+          <option value="generic">
+            {{ $t('settings.style.themes3.editor.variables.type_generic') }}
+          </option>
+        </Select>
+      </div>
+      <ShadowControl
+        v-if="selectedVirtualDirectiveValType === 'shadow'"
+        v-model="draftVirtualDirective"
+        :static-vars="staticVars"
+        :compact="true"
+      />
+      <ColorInput
+        v-if="selectedVirtualDirectiveValType === 'color'"
+        v-model="draftVirtualDirective"
+        name="virtual-directive-color"
+        :fallback="computeColor(draftVirtualDirective)"
+        :label="$t('settings.style.themes3.editor.variables.virtual_color')"
+        :hide-optional-checkbox="true"
+      />
+    </div>
+  </div>
+</template>
diff --git a/src/components/settings_modal/tabs/theme_tab/preview.vue b/src/components/settings_modal/tabs/theme_tab/theme_preview.vue
similarity index 58%
rename from src/components/settings_modal/tabs/theme_tab/preview.vue
rename to src/components/settings_modal/tabs/theme_tab/theme_preview.vue
index d755279a6..4446c18b9 100644
--- a/src/components/settings_modal/tabs/theme_tab/preview.vue
+++ b/src/components/settings_modal/tabs/theme_tab/theme_preview.vue
@@ -1,14 +1,14 @@
 <template>
-  <div class="preview-container">
+  <div class="theme-preview-container">
     <div class="underlay underlay-preview" />
     <div class="panel dummy">
       <div class="panel-heading">
-        <div class="title">
+        <h1 class="title">
           {{ $t('settings.style.preview.header') }}
-          <span class="badge badge-notification">
+          <span class="badge -notification">
             99
           </span>
-        </div>
+        </h1>
         <span class="faint">
           {{ $t('settings.style.preview.header_faint') }}
         </span>
@@ -81,7 +81,7 @@
               class="faint"
               scope="global"
             >
-              <a style="color: var(--faintLink);">
+              <a style="color: var(--linkFaint);">
                 {{ $t('settings.style.preview.faint_link') }}
               </a>
             </i18n-t>
@@ -95,17 +95,13 @@
         <input
           :value="$t('settings.style.preview.input')"
           type="text"
+          class="input"
         >
 
         <div class="actions">
-          <span class="checkbox">
-            <input
-              id="preview_checkbox"
-              checked="very yes"
-              type="checkbox"
-            >
-            <label for="preview_checkbox">{{ $t('settings.style.preview.checkbox') }}</label>
-          </span>
+          <Checkbox>
+            {{ $t('settings.style.preview.checkbox') }}
+          </Checkbox>
           <button class="btn button-default">
             {{ $t('settings.style.preview.button') }}
           </button>
@@ -116,6 +112,7 @@
 </template>
 
 <script>
+import Checkbox from 'src/components/checkbox/checkbox.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faTimes,
@@ -131,19 +128,123 @@ library.add(
   faReply
 )
 
-export default {}
+export default {
+  components: {
+    Checkbox
+  }
+}
 </script>
 
 <style lang="scss">
-.preview-container {
+.theme-preview-container {
   position: relative;
-}
+  border-top: 1px dashed;
+  border-bottom: 1px dashed;
+  border-color: var(--border);
+  margin: 1em 0;
+  padding: 1em;
+  background-color: var(--wallpaper);
+  background-image: var(--body-background-image);
+  background-size: cover;
+  background-position: 50% 50%;
 
-.underlay-preview {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 10px;
-  right: 10px;
+  .theme-preview-content {
+    padding: 20px;
+  }
+
+  .dummy {
+    .post {
+      font-family: var(--postFont);
+      display: flex;
+
+      .content {
+        flex: 1;
+
+        h4 {
+          margin-bottom: 0.25em;
+        }
+
+        .icons {
+          margin-top: 0.5em;
+          display: flex;
+
+          i {
+            margin-right: 1em;
+          }
+        }
+      }
+    }
+
+    .after-post {
+      margin-top: 1em;
+      display: flex;
+      align-items: center;
+    }
+
+    .avatar,
+    .avatar-alt {
+      background:
+        linear-gradient(
+          135deg,
+          #b8e1fc 0%,
+          #a9d2f3 10%,
+          #90bae4 25%,
+          #90bcea 37%,
+          #90bff0 50%,
+          #6ba8e5 51%,
+          #a2daf5 83%,
+          #bdf3fd 100%
+        );
+      color: black;
+      font-family: sans-serif;
+      text-align: center;
+      margin-right: 1em;
+    }
+
+    .avatar-alt {
+      flex: 0 auto;
+      margin-left: 28px;
+      font-size: 12px;
+      min-width: 20px;
+      min-height: 20px;
+      line-height: 20px;
+    }
+
+    .avatar {
+      flex: 0 auto;
+      width: 48px;
+      height: 48px;
+      font-size: 14px;
+      line-height: 48px;
+    }
+
+    .actions {
+      display: flex;
+      align-items: baseline;
+
+      .checkbox {
+        margin-right: 1em;
+        flex: 1;
+      }
+    }
+
+    .separator {
+      margin: 1em;
+      border-bottom: 1px solid;
+      border-color: var(--border);
+    }
+
+    .btn {
+      min-width: 3em;
+    }
+  }
+
+  .underlay-preview {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 10px;
+    right: 10px;
+  }
 }
-</style>
+ </style>
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.js b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
index 47f6417cb..6684c41f6 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.js
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
@@ -1,19 +1,9 @@
 import {
   rgb2hex,
   hex2rgb,
-  getContrastRatioLayers
+  getContrastRatioLayers,
+  relativeLuminance
 } from 'src/services/color_convert/color_convert.js'
-import {
-  DEFAULT_SHADOWS,
-  generateColors,
-  generateShadows,
-  generateRadii,
-  generateFonts,
-  composePreset,
-  getThemes,
-  shadows2to3,
-  colors2to3
-} from 'src/services/style_setter/style_setter.js'
 import {
   newImporter,
   newExporter
@@ -25,8 +15,23 @@ import {
   CURRENT_VERSION,
   OPACITIES,
   getLayers,
-  getOpacitySlot
+  getOpacitySlot,
+  DEFAULT_SHADOWS,
+  generateColors,
+  generateShadows,
+  generateRadii,
+  generateFonts,
+  shadows2to3,
+  colors2to3
 } from 'src/services/theme_data/theme_data.service.js'
+
+import { convertTheme2To3 } from 'src/services/theme_data/theme2_to_theme3.js'
+import { init } from 'src/services/theme_data/theme_data_3.service.js'
+import {
+  getCssRules,
+  getScopedVersion
+} from 'src/services/theme_data/css_utils.js'
+
 import ColorInput from 'src/components/color_input/color_input.vue'
 import RangeInput from 'src/components/range_input/range_input.vue'
 import OpacityInput from 'src/components/opacity_input/opacity_input.vue'
@@ -37,7 +42,7 @@ import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import Select from 'src/components/select/select.vue'
 
-import Preview from './preview.vue'
+import Preview from './theme_preview.vue'
 import { useInterfaceStore } from '../../../../stores/interface'
 
 // List of color values used in v1
@@ -63,6 +68,7 @@ const colorConvert = (color) => {
 export default {
   data () {
     return {
+      themeV3Preview: [],
       themeImporter: newImporter({
         validator: this.importValidator,
         onImport: this.onImport,
@@ -79,10 +85,7 @@ export default {
       tempImportFile: undefined,
       engineVersion: 0,
 
-      previewShadows: {},
-      previewColors: {},
-      previewRadii: {},
-      previewFonts: {},
+      previewTheme: {},
 
       shadowsInvalid: true,
       colorsInvalid: true,
@@ -118,31 +121,24 @@ export default {
     }
   },
   created () {
-    const self = this
+    const currentIndex = this.$store.state.instance.themesIndex
 
-    getThemes()
-      .then((promises) => {
-        return Promise.all(
-          Object.entries(promises)
-            .map(([k, v]) => v.then(res => [k, res]))
-        )
-      })
-      .then(themes => themes.reduce((acc, [k, v]) => {
-        if (v) {
-          return {
-            ...acc,
-            [k]: v
-          }
-        } else {
-          return acc
-        }
-      }, {}))
-      .then((themesComplete) => {
-        self.availableStyles = themesComplete
-      })
+    let promise
+    if (currentIndex) {
+      promise = Promise.resolve(currentIndex)
+    } else {
+      promise = this.$store.dispatch('fetchThemesIndex')
+    }
+
+    promise.then(themesIndex => {
+      Object
+        .values(themesIndex)
+        .forEach(themeFunc => {
+          themeFunc().then(themeData => themeData && this.availableStyles.push(themeData))
+        })
+    })
   },
   mounted () {
-    this.loadThemeFromLocalStorage()
     if (typeof this.shadowSelected === 'undefined') {
       this.shadowSelected = this.shadowsAvailable[0]
     }
@@ -233,13 +229,6 @@ export default {
         chatMessage: this.chatMessageRadiusLocal
       }
     },
-    preview () {
-      return composePreset(this.previewColors, this.previewRadii, this.previewShadows, this.previewFonts)
-    },
-    previewTheme () {
-      if (!this.preview.theme.colors) return { colors: {}, opacity: {}, radii: {}, shadows: {}, fonts: {} }
-      return this.preview.theme
-    },
     // This needs optimization maybe
     previewContrast () {
       try {
@@ -307,13 +296,8 @@ export default {
         return {}
       }
     },
-    previewRules () {
-      if (!this.preview.rules) return ''
-      return [
-        ...Object.values(this.preview.rules),
-        'color: var(--text)',
-        'font-family: var(--interfaceFont, sans-serif)'
-      ].join(';')
+    themeDataUsed () {
+      return this.$store.state.interface.themeDataUsed
     },
     shadowsAvailable () {
       return Object.keys(DEFAULT_SHADOWS).sort()
@@ -324,7 +308,18 @@ export default {
       },
       set (val) {
         if (val) {
-          this.shadowsLocal[this.shadowSelected] = this.currentShadowFallback.map(_ => Object.assign({}, _))
+          this.shadowsLocal[this.shadowSelected] = (this.currentShadowFallback || [])
+            .map(s => ({
+              name: null,
+              x: 0,
+              y: 0,
+              blur: 0,
+              spread: 0,
+              inset: false,
+              color: '#000000',
+              alpha: 1,
+              ...s
+            }))
         } else {
           delete this.shadowsLocal[this.shadowSelected]
         }
@@ -411,9 +406,6 @@ export default {
       forceUseSource = false
     ) {
       this.dismissWarning()
-      if (!source && !theme) {
-        throw new Error('Can\'t load theme: empty')
-      }
       const version = (origin === 'localStorage' && !theme.colors)
         ? 'l1'
         : fileVersion
@@ -489,22 +481,11 @@ export default {
       this.dismissWarning()
     },
     loadThemeFromLocalStorage (confirmLoadSource = false, forceSnapshot = false) {
-      const {
-        customTheme: theme,
-        customThemeSource: source
-      } = this.$store.getters.mergedConfig
-      if (!theme && !source) {
-        // Anon user or never touched themes
-        this.loadTheme(
-          this.$store.state.instance.themeData,
-          'defaults',
-          confirmLoadSource
-        )
-      } else {
+      const theme = this.themeDataUsed?.source
+      if (theme) {
         this.loadTheme(
           {
-            theme,
-            source: forceSnapshot ? theme : source
+            theme
           },
           'localStorage',
           confirmLoadSource
@@ -512,16 +493,15 @@ export default {
       }
     },
     setCustomTheme () {
-      this.$store.dispatch('setOption', {
-        name: 'customTheme',
-        value: {
+      this.$store.dispatch('setThemeV2', {
+        customTheme: {
+          ignore: true,
+          themeFileVersion: this.selectedVersion,
           themeEngineVersion: CURRENT_VERSION,
           ...this.previewTheme
-        }
-      })
-      this.$store.dispatch('setOption', {
-        name: 'customThemeSource',
-        value: {
+        },
+        customThemeSource: {
+          themeFileVersion: this.selectedVersion,
           themeEngineVersion: CURRENT_VERSION,
           shadows: this.shadowsLocal,
           fonts: this.fontsLocal,
@@ -531,16 +511,24 @@ export default {
         }
       })
     },
-    updatePreviewColorsAndShadows () {
-      this.previewColors = generateColors({
+    updatePreviewColors () {
+      const result = generateColors({
         opacity: this.currentOpacity,
         colors: this.currentColors
       })
-      this.previewShadows = generateShadows(
-        { shadows: this.shadowsLocal, opacity: this.previewTheme.opacity, themeEngineVersion: this.engineVersion },
-        this.previewColors.theme.colors,
-        this.previewColors.mod
-      )
+      this.previewTheme.colors = result.theme.colors
+      this.previewTheme.opacity = result.theme.opacity
+    },
+    updatePreviewShadows () {
+      this.previewTheme.shadows = generateShadows(
+        {
+          shadows: this.shadowsLocal,
+          opacity: this.previewTheme.opacity,
+          themeEngineVersion: this.engineVersion
+        },
+        this.previewTheme.colors,
+        relativeLuminance(this.previewTheme.colors.bg) < 0.5 ? 1 : -1
+      ).theme.shadows
     },
     importTheme () { this.themeImporter.importData() },
     exportTheme () { this.themeExporter.exportData() },
@@ -609,7 +597,7 @@ export default {
     normalizeLocalState (theme, version = 0, source, forceSource = false) {
       let input
       if (typeof source !== 'undefined') {
-        if (forceSource || source.themeEngineVersion === CURRENT_VERSION) {
+        if (forceSource || source?.themeEngineVersion === CURRENT_VERSION) {
           input = source
           version = source.themeEngineVersion
         } else {
@@ -691,6 +679,8 @@ export default {
         } else {
           this.shadowsLocal = shadows
         }
+        this.updatePreviewColors()
+        this.updatePreviewShadows()
         this.shadowSelected = this.shadowsAvailable[0]
       }
 
@@ -698,12 +688,28 @@ export default {
         this.clearFonts()
         this.fontsLocal = fonts
       }
+    },
+    updateTheme3Preview () {
+      const theme2 = convertTheme2To3(this.previewTheme)
+      const theme3 = init({
+        inputRuleset: theme2,
+        ultimateBackgroundColor: '#000000',
+        liteMode: true
+      })
+
+      this.themeV3Preview = getScopedVersion(
+        getCssRules(theme3.eager),
+        '#theme-preview'
+      ).join('\n')
     }
   },
   watch: {
+    themeDataUsed () {
+      this.loadThemeFromLocalStorage()
+    },
     currentRadii () {
       try {
-        this.previewRadii = generateRadii({ radii: this.currentRadii })
+        this.previewTheme.radii = generateRadii({ radii: this.currentRadii }).theme.radii
         this.radiiInvalid = false
       } catch (e) {
         this.radiiInvalid = true
@@ -712,9 +718,8 @@ export default {
     },
     shadowsLocal: {
       handler () {
-        if (Object.getOwnPropertyNames(this.previewColors).length === 1) return
         try {
-          this.updatePreviewColorsAndShadows()
+          this.updatePreviewShadows()
           this.shadowsInvalid = false
         } catch (e) {
           this.shadowsInvalid = true
@@ -726,7 +731,7 @@ export default {
     fontsLocal: {
       handler () {
         try {
-          this.previewFonts = generateFonts({ fonts: this.fontsLocal })
+          this.previewTheme.fonts = generateFonts({ fonts: this.fontsLocal }).theme.fonts
           this.fontsInvalid = false
         } catch (e) {
           this.fontsInvalid = true
@@ -737,18 +742,16 @@ export default {
     },
     currentColors () {
       try {
-        this.updatePreviewColorsAndShadows()
+        this.updatePreviewColors()
         this.colorsInvalid = false
-        this.shadowsInvalid = false
       } catch (e) {
         this.colorsInvalid = true
-        this.shadowsInvalid = true
         console.warn(e)
       }
     },
     currentOpacity () {
       try {
-        this.updatePreviewColorsAndShadows()
+        this.updatePreviewColors()
       } catch (e) {
         console.warn(e)
       }
@@ -756,7 +759,6 @@ export default {
     selected () {
       this.selectedTheme = Object.entries(this.availableStyles).find(([k, s]) => {
         if (Array.isArray(s)) {
-          console.log(s[0] === this.selected, this.selected)
           return s[0] === this.selected
         } else {
           return s.name === this.selected
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
index 9935c2e76..c2e33e75e 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
@@ -1,6 +1,9 @@
-@import "src/variables";
-
 .theme-tab {
+  .deprecation-warning {
+    padding: 0.5em;
+    margin: 2em;
+  }
+
   padding-bottom: 2em;
 
   .preset-switcher {
@@ -12,13 +15,19 @@
     margin-right: 0.25em;
   }
 
+  .btn-group .btn {
+    margin: 0;
+  }
+
   .style-control {
     display: flex;
     align-items: baseline;
     margin-bottom: 5px;
 
     .label {
+      margin-right: 1em;
       flex: 1;
+      line-height: 2;
     }
 
     .opt {
@@ -36,20 +45,23 @@
       flex: 0;
 
       &[type="number"] {
-        min-width: 5em;
+        min-width: 9em;
+
+        &.-small {
+          min-width: 5em;
+        }
       }
 
       &[type="range"] {
         flex: 1;
-        min-width: 3em;
-        align-self: flex-start;
+        min-width: 9em;
+        align-self: center;
+        margin: 0 0.5em;
       }
-    }
 
-    &.disabled {
-      input,
-      select {
-        opacity: 0.5;
+      &[type="checkbox"] + i {
+        height: 1.1em;
+        align-self: center;
       }
     }
   }
@@ -159,111 +171,6 @@
     }
   }
 
-  .preview-container {
-    border-top: 1px dashed;
-    border-bottom: 1px dashed;
-    border-color: $fallback--border;
-    border-color: var(--border, $fallback--border);
-    margin: 1em 0;
-    padding: 1em;
-    background-color: var(--wallpaper);
-    background-image: var(--body-background-image);
-    background-size: cover;
-    background-position: 50% 50%;
-
-    .dummy {
-      .post {
-        font-family: var(--postFont);
-        display: flex;
-
-        .content {
-          flex: 1;
-
-          h4 {
-            margin-bottom: 0.25em;
-          }
-
-          .icons {
-            margin-top: 0.5em;
-            display: flex;
-
-            i {
-              margin-right: 1em;
-            }
-          }
-        }
-      }
-
-      .after-post {
-        margin-top: 1em;
-        display: flex;
-        align-items: center;
-      }
-
-      .avatar,
-      .avatar-alt {
-        background:
-          linear-gradient(
-            135deg,
-            #b8e1fc 0%,
-            #a9d2f3 10%,
-            #90bae4 25%,
-            #90bcea 37%,
-            #90bff0 50%,
-            #6ba8e5 51%,
-            #a2daf5 83%,
-            #bdf3fd 100%
-          );
-        color: black;
-        font-family: sans-serif;
-        text-align: center;
-        margin-right: 1em;
-      }
-
-      .avatar-alt {
-        flex: 0 auto;
-        margin-left: 28px;
-        font-size: 12px;
-        min-width: 20px;
-        min-height: 20px;
-        line-height: 20px;
-        border-radius: $fallback--avatarAltRadius;
-        border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
-      }
-
-      .avatar {
-        flex: 0 auto;
-        width: 48px;
-        height: 48px;
-        font-size: 14px;
-        line-height: 48px;
-      }
-
-      .actions {
-        display: flex;
-        align-items: baseline;
-
-        .checkbox {
-          display: inline-flex;
-          align-items: baseline;
-          margin-right: 1em;
-          flex: 1;
-        }
-      }
-
-      .separator {
-        margin: 1em;
-        border-bottom: 1px solid;
-        border-color: $fallback--border;
-        border-color: var(--border, $fallback--border);
-      }
-
-      .btn {
-        min-width: 3em;
-      }
-    }
-  }
-
   .radius-item {
     flex-basis: auto;
   }
@@ -296,7 +203,7 @@
     border: 0;
     box-shadow: none;
     background: transparent;
-    color: var(--faint, $fallback--faint);
+    color: var(--textFaint);
     align-self: stretch;
   }
 
@@ -316,10 +223,6 @@
     max-width: 50em;
   }
 
-  .theme-preview-content {
-    padding: 20px;
-  }
-
   .theme-warning {
     display: flex;
     align-items: baseline;
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
index ff2fece9c..886d97764 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
@@ -1,5 +1,8 @@
 <template>
   <div class="theme-tab">
+    <div class="alert warning deprecation-warning">
+      {{ $t("settings.style.themes2_outdated") }}
+    </div>
     <div class="presets-container">
       <div class="save-load">
         <div
@@ -120,7 +123,22 @@
       </div>
     </div>
 
-    <preview :style="previewRules" />
+    <!-- eslint-disable vue/no-v-html vue/no-v-text-v-html-on-component -->
+    <component
+      :is="'style'"
+      v-html="themeV3Preview"
+    />
+    <!-- eslint-enable vue/no-v-html vue/no-v-text-v-html-on-component -->
+    <preview id="theme-preview" />
+
+    <div>
+      <button
+        class="btn button-default"
+        @click="updateTheme3Preview"
+      >
+        {{ $t("settings.style.update_preview") }}
+      </button>
+    </div>
 
     <keep-alive>
       <tab-switcher key="style-tweak">
@@ -156,7 +174,7 @@
             <OpacityInput
               v-model="bgOpacityLocal"
               name="bgOpacity"
-              :fallback="previewTheme.opacity.bg"
+              :fallback="previewTheme.opacity?.bg"
             />
             <ColorInput
               v-model="textColorLocal"
@@ -167,16 +185,16 @@
             <ColorInput
               v-model="accentColorLocal"
               name="accentColor"
-              :fallback="previewTheme.colors.link"
+              :fallback="previewTheme.colors?.link"
               :label="$t('settings.accent')"
-              :show-optional-tickbox="typeof linkColorLocal !== 'undefined'"
+              :show-optional-checkbox="typeof linkColorLocal !== 'undefined'"
             />
             <ColorInput
               v-model="linkColorLocal"
               name="linkColor"
-              :fallback="previewTheme.colors.accent"
+              :fallback="previewTheme.colors?.accent"
               :label="$t('settings.links')"
-              :show-optional-tickbox="typeof accentColorLocal !== 'undefined'"
+              :show-optional-checkbox="typeof accentColorLocal !== 'undefined'"
             />
             <ContrastRatio :contrast="previewContrast.bgLink" />
           </div>
@@ -190,13 +208,13 @@
               v-model="fgTextColorLocal"
               name="fgTextColor"
               :label="$t('settings.text')"
-              :fallback="previewTheme.colors.fgText"
+              :fallback="previewTheme.colors?.fgText"
             />
             <ColorInput
               v-model="fgLinkColorLocal"
               name="fgLinkColor"
               :label="$t('settings.links')"
-              :fallback="previewTheme.colors.fgLink"
+              :fallback="previewTheme.colors?.fgLink"
             />
             <p>{{ $t('settings.style.common_colors.foreground_hint') }}</p>
           </div>
@@ -256,14 +274,14 @@
             <ColorInput
               v-model="postLinkColorLocal"
               name="postLinkColor"
-              :fallback="previewTheme.colors.accent"
+              :fallback="previewTheme.colors?.accent"
               :label="$t('settings.links')"
             />
             <ContrastRatio :contrast="previewContrast.postLink" />
             <ColorInput
               v-model="postGreentextColorLocal"
               name="postGreentextColor"
-              :fallback="previewTheme.colors.cGreen"
+              :fallback="previewTheme.colors?.cGreen"
               :label="$t('settings.greentext')"
             />
             <ContrastRatio :contrast="previewContrast.postGreentext" />
@@ -272,13 +290,13 @@
               v-model="alertErrorColorLocal"
               name="alertError"
               :label="$t('settings.style.advanced_colors.alert_error')"
-              :fallback="previewTheme.colors.alertError"
+              :fallback="previewTheme.colors?.alertError"
             />
             <ColorInput
               v-model="alertErrorTextColorLocal"
               name="alertErrorText"
               :label="$t('settings.text')"
-              :fallback="previewTheme.colors.alertErrorText"
+              :fallback="previewTheme.colors?.alertErrorText"
             />
             <ContrastRatio
               :contrast="previewContrast.alertErrorText"
@@ -288,13 +306,13 @@
               v-model="alertWarningColorLocal"
               name="alertWarning"
               :label="$t('settings.style.advanced_colors.alert_warning')"
-              :fallback="previewTheme.colors.alertWarning"
+              :fallback="previewTheme.colors?.alertWarning"
             />
             <ColorInput
               v-model="alertWarningTextColorLocal"
               name="alertWarningText"
               :label="$t('settings.text')"
-              :fallback="previewTheme.colors.alertWarningText"
+              :fallback="previewTheme.colors?.alertWarningText"
             />
             <ContrastRatio
               :contrast="previewContrast.alertWarningText"
@@ -304,13 +322,13 @@
               v-model="alertNeutralColorLocal"
               name="alertNeutral"
               :label="$t('settings.style.advanced_colors.alert_neutral')"
-              :fallback="previewTheme.colors.alertNeutral"
+              :fallback="previewTheme.colors?.alertNeutral"
             />
             <ColorInput
               v-model="alertNeutralTextColorLocal"
               name="alertNeutralText"
               :label="$t('settings.text')"
-              :fallback="previewTheme.colors.alertNeutralText"
+              :fallback="previewTheme.colors?.alertNeutralText"
             />
             <ContrastRatio
               :contrast="previewContrast.alertNeutralText"
@@ -319,7 +337,7 @@
             <OpacityInput
               v-model="alertOpacityLocal"
               name="alertOpacity"
-              :fallback="previewTheme.opacity.alert"
+              :fallback="previewTheme.opacity?.alert"
             />
           </div>
           <div class="color-item">
@@ -328,13 +346,13 @@
               v-model="badgeNotificationColorLocal"
               name="badgeNotification"
               :label="$t('settings.style.advanced_colors.badge_notification')"
-              :fallback="previewTheme.colors.badgeNotification"
+              :fallback="previewTheme.colors?.badgeNotification"
             />
             <ColorInput
               v-model="badgeNotificationTextColorLocal"
               name="badgeNotificationText"
               :label="$t('settings.text')"
-              :fallback="previewTheme.colors.badgeNotificationText"
+              :fallback="previewTheme.colors?.badgeNotificationText"
             />
             <ContrastRatio
               :contrast="previewContrast.badgeNotificationText"
@@ -346,19 +364,19 @@
             <ColorInput
               v-model="panelColorLocal"
               name="panelColor"
-              :fallback="previewTheme.colors.panel"
+              :fallback="previewTheme.colors?.panel"
               :label="$t('settings.background')"
             />
             <OpacityInput
               v-model="panelOpacityLocal"
               name="panelOpacity"
-              :fallback="previewTheme.opacity.panel"
+              :fallback="previewTheme.opacity?.panel"
               :disabled="panelColorLocal === 'transparent'"
             />
             <ColorInput
               v-model="panelTextColorLocal"
               name="panelTextColor"
-              :fallback="previewTheme.colors.panelText"
+              :fallback="previewTheme.colors?.panelText"
               :label="$t('settings.text')"
             />
             <ContrastRatio
@@ -368,7 +386,7 @@
             <ColorInput
               v-model="panelLinkColorLocal"
               name="panelLinkColor"
-              :fallback="previewTheme.colors.panelLink"
+              :fallback="previewTheme.colors?.panelLink"
               :label="$t('settings.links')"
             />
             <ContrastRatio
@@ -381,20 +399,20 @@
             <ColorInput
               v-model="topBarColorLocal"
               name="topBarColor"
-              :fallback="previewTheme.colors.topBar"
+              :fallback="previewTheme.colors?.topBar"
               :label="$t('settings.background')"
             />
             <ColorInput
               v-model="topBarTextColorLocal"
               name="topBarTextColor"
-              :fallback="previewTheme.colors.topBarText"
+              :fallback="previewTheme.colors?.topBarText"
               :label="$t('settings.text')"
             />
             <ContrastRatio :contrast="previewContrast.topBarText" />
             <ColorInput
               v-model="topBarLinkColorLocal"
               name="topBarLinkColor"
-              :fallback="previewTheme.colors.topBarLink"
+              :fallback="previewTheme.colors?.topBarLink"
               :label="$t('settings.links')"
             />
             <ContrastRatio :contrast="previewContrast.topBarLink" />
@@ -404,19 +422,19 @@
             <ColorInput
               v-model="inputColorLocal"
               name="inputColor"
-              :fallback="previewTheme.colors.input"
+              :fallback="previewTheme.colors?.input"
               :label="$t('settings.background')"
             />
             <OpacityInput
               v-model="inputOpacityLocal"
               name="inputOpacity"
-              :fallback="previewTheme.opacity.input"
+              :fallback="previewTheme.opacity?.input"
               :disabled="inputColorLocal === 'transparent'"
             />
             <ColorInput
               v-model="inputTextColorLocal"
               name="inputTextColor"
-              :fallback="previewTheme.colors.inputText"
+              :fallback="previewTheme.colors?.inputText"
               :label="$t('settings.text')"
             />
             <ContrastRatio :contrast="previewContrast.inputText" />
@@ -426,33 +444,33 @@
             <ColorInput
               v-model="btnColorLocal"
               name="btnColor"
-              :fallback="previewTheme.colors.btn"
+              :fallback="previewTheme.colors?.btn"
               :label="$t('settings.background')"
             />
             <OpacityInput
               v-model="btnOpacityLocal"
               name="btnOpacity"
-              :fallback="previewTheme.opacity.btn"
+              :fallback="previewTheme.opacity?.btn"
               :disabled="btnColorLocal === 'transparent'"
             />
             <ColorInput
               v-model="btnTextColorLocal"
               name="btnTextColor"
-              :fallback="previewTheme.colors.btnText"
+              :fallback="previewTheme.colors?.btnText"
               :label="$t('settings.text')"
             />
             <ContrastRatio :contrast="previewContrast.btnText" />
             <ColorInput
               v-model="btnPanelTextColorLocal"
               name="btnPanelTextColor"
-              :fallback="previewTheme.colors.btnPanelText"
+              :fallback="previewTheme.colors?.btnPanelText"
               :label="$t('settings.style.advanced_colors.panel_header')"
             />
             <ContrastRatio :contrast="previewContrast.btnPanelText" />
             <ColorInput
               v-model="btnTopBarTextColorLocal"
               name="btnTopBarTextColor"
-              :fallback="previewTheme.colors.btnTopBarText"
+              :fallback="previewTheme.colors?.btnTopBarText"
               :label="$t('settings.style.advanced_colors.top_bar')"
             />
             <ContrastRatio :contrast="previewContrast.btnTopBarText" />
@@ -460,27 +478,27 @@
             <ColorInput
               v-model="btnPressedColorLocal"
               name="btnPressedColor"
-              :fallback="previewTheme.colors.btnPressed"
+              :fallback="previewTheme.colors?.btnPressed"
               :label="$t('settings.background')"
             />
             <ColorInput
               v-model="btnPressedTextColorLocal"
               name="btnPressedTextColor"
-              :fallback="previewTheme.colors.btnPressedText"
+              :fallback="previewTheme.colors?.btnPressedText"
               :label="$t('settings.text')"
             />
             <ContrastRatio :contrast="previewContrast.btnPressedText" />
             <ColorInput
               v-model="btnPressedPanelTextColorLocal"
               name="btnPressedPanelTextColor"
-              :fallback="previewTheme.colors.btnPressedPanelText"
+              :fallback="previewTheme.colors?.btnPressedPanelText"
               :label="$t('settings.style.advanced_colors.panel_header')"
             />
             <ContrastRatio :contrast="previewContrast.btnPressedPanelText" />
             <ColorInput
               v-model="btnPressedTopBarTextColorLocal"
               name="btnPressedTopBarTextColor"
-              :fallback="previewTheme.colors.btnPressedTopBarText"
+              :fallback="previewTheme.colors?.btnPressedTopBarText"
               :label="$t('settings.style.advanced_colors.top_bar')"
             />
             <ContrastRatio :contrast="previewContrast.btnPressedTopBarText" />
@@ -488,52 +506,52 @@
             <ColorInput
               v-model="btnDisabledColorLocal"
               name="btnDisabledColor"
-              :fallback="previewTheme.colors.btnDisabled"
+              :fallback="previewTheme.colors?.btnDisabled"
               :label="$t('settings.background')"
             />
             <ColorInput
               v-model="btnDisabledTextColorLocal"
               name="btnDisabledTextColor"
-              :fallback="previewTheme.colors.btnDisabledText"
+              :fallback="previewTheme.colors?.btnDisabledText"
               :label="$t('settings.text')"
             />
             <ColorInput
               v-model="btnDisabledPanelTextColorLocal"
               name="btnDisabledPanelTextColor"
-              :fallback="previewTheme.colors.btnDisabledPanelText"
+              :fallback="previewTheme.colors?.btnDisabledPanelText"
               :label="$t('settings.style.advanced_colors.panel_header')"
             />
             <ColorInput
               v-model="btnDisabledTopBarTextColorLocal"
               name="btnDisabledTopBarTextColor"
-              :fallback="previewTheme.colors.btnDisabledTopBarText"
+              :fallback="previewTheme.colors?.btnDisabledTopBarText"
               :label="$t('settings.style.advanced_colors.top_bar')"
             />
             <h5>{{ $t('settings.style.advanced_colors.toggled') }}</h5>
             <ColorInput
               v-model="btnToggledColorLocal"
               name="btnToggledColor"
-              :fallback="previewTheme.colors.btnToggled"
+              :fallback="previewTheme.colors?.btnToggled"
               :label="$t('settings.background')"
             />
             <ColorInput
               v-model="btnToggledTextColorLocal"
               name="btnToggledTextColor"
-              :fallback="previewTheme.colors.btnToggledText"
+              :fallback="previewTheme.colors?.btnToggledText"
               :label="$t('settings.text')"
             />
             <ContrastRatio :contrast="previewContrast.btnToggledText" />
             <ColorInput
               v-model="btnToggledPanelTextColorLocal"
               name="btnToggledPanelTextColor"
-              :fallback="previewTheme.colors.btnToggledPanelText"
+              :fallback="previewTheme.colors?.btnToggledPanelText"
               :label="$t('settings.style.advanced_colors.panel_header')"
             />
             <ContrastRatio :contrast="previewContrast.btnToggledPanelText" />
             <ColorInput
               v-model="btnToggledTopBarTextColorLocal"
               name="btnToggledTopBarTextColor"
-              :fallback="previewTheme.colors.btnToggledTopBarText"
+              :fallback="previewTheme.colors?.btnToggledTopBarText"
               :label="$t('settings.style.advanced_colors.top_bar')"
             />
             <ContrastRatio :contrast="previewContrast.btnToggledTopBarText" />
@@ -543,20 +561,20 @@
             <ColorInput
               v-model="tabColorLocal"
               name="tabColor"
-              :fallback="previewTheme.colors.tab"
+              :fallback="previewTheme.colors?.tab"
               :label="$t('settings.background')"
             />
             <ColorInput
               v-model="tabTextColorLocal"
               name="tabTextColor"
-              :fallback="previewTheme.colors.tabText"
+              :fallback="previewTheme.colors?.tabText"
               :label="$t('settings.text')"
             />
             <ContrastRatio :contrast="previewContrast.tabText" />
             <ColorInput
               v-model="tabActiveTextColorLocal"
               name="tabActiveTextColor"
-              :fallback="previewTheme.colors.tabActiveText"
+              :fallback="previewTheme.colors?.tabActiveText"
               :label="$t('settings.text')"
             />
             <ContrastRatio :contrast="previewContrast.tabActiveText" />
@@ -566,13 +584,13 @@
             <ColorInput
               v-model="borderColorLocal"
               name="borderColor"
-              :fallback="previewTheme.colors.border"
+              :fallback="previewTheme.colors?.border"
               :label="$t('settings.style.common.color')"
             />
             <OpacityInput
               v-model="borderOpacityLocal"
               name="borderOpacity"
-              :fallback="previewTheme.opacity.border"
+              :fallback="previewTheme.opacity?.border"
               :disabled="borderColorLocal === 'transparent'"
             />
           </div>
@@ -581,25 +599,25 @@
             <ColorInput
               v-model="faintColorLocal"
               name="faintColor"
-              :fallback="previewTheme.colors.faint"
+              :fallback="previewTheme.colors?.faint"
               :label="$t('settings.text')"
             />
             <ColorInput
               v-model="faintLinkColorLocal"
               name="faintLinkColor"
-              :fallback="previewTheme.colors.faintLink"
+              :fallback="previewTheme.colors?.faintLink"
               :label="$t('settings.links')"
             />
             <ColorInput
               v-model="panelFaintColorLocal"
               name="panelFaintColor"
-              :fallback="previewTheme.colors.panelFaint"
+              :fallback="previewTheme.colors?.panelFaint"
               :label="$t('settings.style.advanced_colors.panel_header')"
             />
             <OpacityInput
               v-model="faintOpacityLocal"
               name="faintOpacity"
-              :fallback="previewTheme.opacity.faint"
+              :fallback="previewTheme.opacity?.faint"
             />
           </div>
           <div class="color-item">
@@ -608,12 +626,12 @@
               v-model="underlayColorLocal"
               name="underlay"
               :label="$t('settings.style.advanced_colors.underlay')"
-              :fallback="previewTheme.colors.underlay"
+              :fallback="previewTheme.colors?.underlay"
             />
             <OpacityInput
               v-model="underlayOpacityLocal"
               name="underlayOpacity"
-              :fallback="previewTheme.opacity.underlay"
+              :fallback="previewTheme.opacity?.underlay"
               :disabled="underlayOpacityLocal === 'transparent'"
             />
           </div>
@@ -623,7 +641,7 @@
               v-model="wallpaperColorLocal"
               name="wallpaper"
               :label="$t('settings.style.advanced_colors.wallpaper')"
-              :fallback="previewTheme.colors.wallpaper"
+              :fallback="previewTheme.colors?.wallpaper"
             />
           </div>
           <div class="color-item">
@@ -632,13 +650,13 @@
               v-model="pollColorLocal"
               name="poll"
               :label="$t('settings.background')"
-              :fallback="previewTheme.colors.poll"
+              :fallback="previewTheme.colors?.poll"
             />
             <ColorInput
               v-model="pollTextColorLocal"
               name="pollText"
               :label="$t('settings.text')"
-              :fallback="previewTheme.colors.pollText"
+              :fallback="previewTheme.colors?.pollText"
             />
           </div>
           <div class="color-item">
@@ -647,7 +665,7 @@
               v-model="iconColorLocal"
               name="icon"
               :label="$t('settings.style.advanced_colors.icons')"
-              :fallback="previewTheme.colors.icon"
+              :fallback="previewTheme.colors?.icon"
             />
           </div>
           <div class="color-item">
@@ -656,20 +674,20 @@
               v-model="highlightColorLocal"
               name="highlight"
               :label="$t('settings.background')"
-              :fallback="previewTheme.colors.highlight"
+              :fallback="previewTheme.colors?.highlight"
             />
             <ColorInput
               v-model="highlightTextColorLocal"
               name="highlightText"
               :label="$t('settings.text')"
-              :fallback="previewTheme.colors.highlightText"
+              :fallback="previewTheme.colors?.highlightText"
             />
             <ContrastRatio :contrast="previewContrast.highlightText" />
             <ColorInput
               v-model="highlightLinkColorLocal"
               name="highlightLink"
               :label="$t('settings.links')"
-              :fallback="previewTheme.colors.highlightLink"
+              :fallback="previewTheme.colors?.highlightLink"
             />
             <ContrastRatio :contrast="previewContrast.highlightLink" />
           </div>
@@ -679,26 +697,26 @@
               v-model="popoverColorLocal"
               name="popover"
               :label="$t('settings.background')"
-              :fallback="previewTheme.colors.popover"
+              :fallback="previewTheme.colors?.popover"
             />
             <OpacityInput
               v-model="popoverOpacityLocal"
               name="popoverOpacity"
-              :fallback="previewTheme.opacity.popover"
+              :fallback="previewTheme.opacity?.popover"
               :disabled="popoverOpacityLocal === 'transparent'"
             />
             <ColorInput
               v-model="popoverTextColorLocal"
               name="popoverText"
               :label="$t('settings.text')"
-              :fallback="previewTheme.colors.popoverText"
+              :fallback="previewTheme.colors?.popoverText"
             />
             <ContrastRatio :contrast="previewContrast.popoverText" />
             <ColorInput
               v-model="popoverLinkColorLocal"
               name="popoverLink"
               :label="$t('settings.links')"
-              :fallback="previewTheme.colors.popoverLink"
+              :fallback="previewTheme.colors?.popoverLink"
             />
             <ContrastRatio :contrast="previewContrast.popoverLink" />
           </div>
@@ -708,20 +726,20 @@
               v-model="selectedPostColorLocal"
               name="selectedPost"
               :label="$t('settings.background')"
-              :fallback="previewTheme.colors.selectedPost"
+              :fallback="previewTheme.colors?.selectedPost"
             />
             <ColorInput
               v-model="selectedPostTextColorLocal"
               name="selectedPostText"
               :label="$t('settings.text')"
-              :fallback="previewTheme.colors.selectedPostText"
+              :fallback="previewTheme.colors?.selectedPostText"
             />
             <ContrastRatio :contrast="previewContrast.selectedPostText" />
             <ColorInput
               v-model="selectedPostLinkColorLocal"
               name="selectedPostLink"
               :label="$t('settings.links')"
-              :fallback="previewTheme.colors.selectedPostLink"
+              :fallback="previewTheme.colors?.selectedPostLink"
             />
             <ContrastRatio :contrast="previewContrast.selectedPostLink" />
           </div>
@@ -731,20 +749,20 @@
               v-model="selectedMenuColorLocal"
               name="selectedMenu"
               :label="$t('settings.background')"
-              :fallback="previewTheme.colors.selectedMenu"
+              :fallback="previewTheme.colors?.selectedMenu"
             />
             <ColorInput
               v-model="selectedMenuTextColorLocal"
               name="selectedMenuText"
               :label="$t('settings.text')"
-              :fallback="previewTheme.colors.selectedMenuText"
+              :fallback="previewTheme.colors?.selectedMenuText"
             />
             <ContrastRatio :contrast="previewContrast.selectedMenuText" />
             <ColorInput
               v-model="selectedMenuLinkColorLocal"
               name="selectedMenuLink"
               :label="$t('settings.links')"
-              :fallback="previewTheme.colors.selectedMenuLink"
+              :fallback="previewTheme.colors?.selectedMenuLink"
             />
             <ContrastRatio :contrast="previewContrast.selectedMenuLink" />
           </div>
@@ -753,57 +771,57 @@
             <ColorInput
               v-model="chatBgColorLocal"
               name="chatBgColor"
-              :fallback="previewTheme.colors.bg"
+              :fallback="previewTheme.colors?.bg"
               :label="$t('settings.background')"
             />
             <h5>{{ $t('settings.style.advanced_colors.chat.incoming') }}</h5>
             <ColorInput
               v-model="chatMessageIncomingBgColorLocal"
               name="chatMessageIncomingBgColor"
-              :fallback="previewTheme.colors.bg"
+              :fallback="previewTheme.colors?.bg"
               :label="$t('settings.background')"
             />
             <ColorInput
               v-model="chatMessageIncomingTextColorLocal"
               name="chatMessageIncomingTextColor"
-              :fallback="previewTheme.colors.text"
+              :fallback="previewTheme.colors?.text"
               :label="$t('settings.text')"
             />
             <ColorInput
               v-model="chatMessageIncomingLinkColorLocal"
               name="chatMessageIncomingLinkColor"
-              :fallback="previewTheme.colors.link"
+              :fallback="previewTheme.colors?.link"
               :label="$t('settings.links')"
             />
             <ColorInput
               v-model="chatMessageIncomingBorderColorLocal"
               name="chatMessageIncomingBorderLinkColor"
-              :fallback="previewTheme.colors.fg"
+              :fallback="previewTheme.colors?.fg"
               :label="$t('settings.style.advanced_colors.chat.border')"
             />
             <h5>{{ $t('settings.style.advanced_colors.chat.outgoing') }}</h5>
             <ColorInput
               v-model="chatMessageOutgoingBgColorLocal"
               name="chatMessageOutgoingBgColor"
-              :fallback="previewTheme.colors.bg"
+              :fallback="previewTheme.colors?.bg"
               :label="$t('settings.background')"
             />
             <ColorInput
               v-model="chatMessageOutgoingTextColorLocal"
               name="chatMessageOutgoingTextColor"
-              :fallback="previewTheme.colors.text"
+              :fallback="previewTheme.colors?.text"
               :label="$t('settings.text')"
             />
             <ColorInput
               v-model="chatMessageOutgoingLinkColorLocal"
               name="chatMessageOutgoingLinkColor"
-              :fallback="previewTheme.colors.link"
+              :fallback="previewTheme.colors?.link"
               :label="$t('settings.links')"
             />
             <ColorInput
               v-model="chatMessageOutgoingBorderColorLocal"
               name="chatMessageOutgoingBorderLinkColor"
-              :fallback="previewTheme.colors.bg"
+              :fallback="previewTheme.colors?.bg"
               :label="$t('settings.style.advanced_colors.chat.border')"
             />
           </div>
@@ -826,7 +844,7 @@
             v-model="btnRadiusLocal"
             name="btnRadius"
             :label="$t('settings.btnRadius')"
-            :fallback="previewTheme.radii.btn"
+            :fallback="previewTheme.radii?.btn"
             max="16"
             hard-min="0"
           />
@@ -834,7 +852,7 @@
             v-model="inputRadiusLocal"
             name="inputRadius"
             :label="$t('settings.inputRadius')"
-            :fallback="previewTheme.radii.input"
+            :fallback="previewTheme.radii?.input"
             max="9"
             hard-min="0"
           />
@@ -842,7 +860,7 @@
             v-model="checkboxRadiusLocal"
             name="checkboxRadius"
             :label="$t('settings.checkboxRadius')"
-            :fallback="previewTheme.radii.checkbox"
+            :fallback="previewTheme.radii?.checkbox"
             max="16"
             hard-min="0"
           />
@@ -850,7 +868,7 @@
             v-model="panelRadiusLocal"
             name="panelRadius"
             :label="$t('settings.panelRadius')"
-            :fallback="previewTheme.radii.panel"
+            :fallback="previewTheme.radii?.panel"
             max="50"
             hard-min="0"
           />
@@ -858,7 +876,7 @@
             v-model="avatarRadiusLocal"
             name="avatarRadius"
             :label="$t('settings.avatarRadius')"
-            :fallback="previewTheme.radii.avatar"
+            :fallback="previewTheme.radii?.avatar"
             max="28"
             hard-min="0"
           />
@@ -866,7 +884,7 @@
             v-model="avatarAltRadiusLocal"
             name="avatarAltRadius"
             :label="$t('settings.avatarAltRadius')"
-            :fallback="previewTheme.radii.avatarAlt"
+            :fallback="previewTheme.radii?.avatarAlt"
             max="28"
             hard-min="0"
           />
@@ -874,7 +892,7 @@
             v-model="attachmentRadiusLocal"
             name="attachmentRadius"
             :label="$t('settings.attachmentRadius')"
-            :fallback="previewTheme.radii.attachment"
+            :fallback="previewTheme.radii?.attachment"
             max="50"
             hard-min="0"
           />
@@ -882,7 +900,7 @@
             v-model="tooltipRadiusLocal"
             name="tooltipRadius"
             :label="$t('settings.tooltipRadius')"
-            :fallback="previewTheme.radii.tooltip"
+            :fallback="previewTheme.radii?.tooltip"
             max="50"
             hard-min="0"
           />
@@ -890,7 +908,7 @@
             v-model="chatMessageRadiusLocal"
             name="chatMessageRadius"
             :label="$t('settings.chatMessageRadius')"
-            :fallback="previewTheme.radii.chatMessage || 2"
+            :fallback="previewTheme.radii?.chatMessage || 2"
             max="50"
             hard-min="0"
           />
@@ -919,24 +937,14 @@
               </Select>
             </div>
             <div class="override">
-              <label
-                for="override"
-                class="label"
-              >
-                {{ $t('settings.style.shadows.override') }}
-              </label>
-              {{ ' ' }}
-              <input
+              <Checkbox
                 id="override"
                 v-model="currentShadowOverriden"
                 name="override"
                 class="input-override"
-                type="checkbox"
               >
-              <label
-                class="checkbox-label"
-                for="override"
-              />
+                {{ $t('settings.style.shadows.override') }}
+              </Checkbox>
             </div>
             <button
               class="btn button-default"
@@ -947,38 +955,12 @@
           </div>
           <ShadowControl
             v-model="currentShadow"
-            :ready="!!currentShadowFallback"
+            :separate-inset="shadowSelected === 'avatar' || shadowSelected === 'avatarStatus'"
             :fallback="currentShadowFallback"
+            :static-vars="previewTheme.colors"
+            :compact="true"
           />
-          <div v-if="shadowSelected === 'avatar' || shadowSelected === 'avatarStatus'">
-            <i18n-t
-              scope="global"
-              keypath="settings.style.shadows.filter_hint.always_drop_shadow"
-              tag="p"
-            >
-              <code>filter: drop-shadow()</code>
-            </i18n-t>
-            <p>{{ $t('settings.style.shadows.filter_hint.avatar_inset') }}</p>
-            <i18n-t
-              scope="global"
-              keypath="settings.style.shadows.filter_hint.drop_shadow_syntax"
-              tag="p"
-            >
-              <code>drop-shadow</code>
-              <code>spread-radius</code>
-              <code>inset</code>
-            </i18n-t>
-            <i18n-t
-              scope="global"
-              keypath="settings.style.shadows.filter_hint.inset_classic"
-              tag="p"
-            >
-              <code>box-shadow</code>
-            </i18n-t>
-            <p>{{ $t('settings.style.shadows.filter_hint.spread_zero') }}</p>
-          </div>
         </div>
-
         <div
           :label="$t('settings.style.fonts._tab_label')"
           class="fonts-container"
@@ -996,26 +978,26 @@
             v-model="fontsLocal.interface"
             name="ui"
             :label="$t('settings.style.fonts.components.interface')"
-            :fallback="previewTheme.fonts.interface"
+            :fallback="previewTheme.fonts?.interface"
             no-inherit="1"
           />
           <FontControl
             v-model="fontsLocal.input"
             name="input"
             :label="$t('settings.style.fonts.components.input')"
-            :fallback="previewTheme.fonts.input"
+            :fallback="previewTheme.fonts?.input"
           />
           <FontControl
             v-model="fontsLocal.post"
             name="post"
             :label="$t('settings.style.fonts.components.post')"
-            :fallback="previewTheme.fonts.post"
+            :fallback="previewTheme.fonts?.post"
           />
           <FontControl
             v-model="fontsLocal.postCode"
             name="postCode"
             :label="$t('settings.style.fonts.components.postCode')"
-            :fallback="previewTheme.fonts.postCode"
+            :fallback="previewTheme.fonts?.postCode"
           />
         </div>
       </tab-switcher>
diff --git a/src/components/settings_modal/tabs/version_tab.js b/src/components/settings_modal/tabs/version_tab.js
index 616bdadf5..20a671735 100644
--- a/src/components/settings_modal/tabs/version_tab.js
+++ b/src/components/settings_modal/tabs/version_tab.js
@@ -1,22 +1,17 @@
-import { extractCommit } from 'src/services/version/version.service'
-
 const pleromaFeCommitUrl = 'https://git.pleroma.social/pleroma/pleroma-fe/commit/'
-const pleromaBeCommitUrl = 'https://git.pleroma.social/pleroma/pleroma/commit/'
 
 const VersionTab = {
   data () {
     const instance = this.$store.state.instance
     return {
       backendVersion: instance.backendVersion,
+      backendRepository: instance.backendRepository,
       frontendVersion: instance.frontendVersion
     }
   },
   computed: {
     frontendVersionLink () {
       return pleromaFeCommitUrl + this.frontendVersion
-    },
-    backendVersionLink () {
-      return pleromaBeCommitUrl + extractCommit(this.backendVersion)
     }
   }
 }
diff --git a/src/components/settings_modal/tabs/version_tab.vue b/src/components/settings_modal/tabs/version_tab.vue
index 0330d49f8..917a618e6 100644
--- a/src/components/settings_modal/tabs/version_tab.vue
+++ b/src/components/settings_modal/tabs/version_tab.vue
@@ -7,7 +7,7 @@
           <ul class="option-list">
             <li>
               <a
-                :href="backendVersionLink"
+                :href="backendRepository"
                 target="_blank"
               >{{ backendVersion }}</a>
             </li>
diff --git a/src/components/shadow_control/shadow_control.js b/src/components/shadow_control/shadow_control.js
index a1d1012b2..489351b69 100644
--- a/src/components/shadow_control/shadow_control.js
+++ b/src/components/shadow_control/shadow_control.js
@@ -1,9 +1,17 @@
-import ColorInput from '../color_input/color_input.vue'
-import OpacityInput from '../opacity_input/opacity_input.vue'
-import Select from '../select/select.vue'
-import { getCssShadow } from '../../services/style_setter/style_setter.js'
-import { hex2rgb } from '../../services/color_convert/color_convert.js'
+import ColorInput from 'src/components/color_input/color_input.vue'
+import OpacityInput from 'src/components/opacity_input/opacity_input.vue'
+import Select from 'src/components/select/select.vue'
+import SelectMotion from 'src/components/select/select_motion.vue'
+import Checkbox from 'src/components/checkbox/checkbox.vue'
+import Popover from 'src/components/popover/popover.vue'
+import ComponentPreview from 'src/components/component_preview/component_preview.vue'
+import { rgb2hex } from 'src/services/color_convert/color_convert.js'
+import { serializeShadow } from 'src/services/theme_data/iss_serializer.js'
+import { deserializeShadow } from 'src/services/theme_data/iss_deserializer.js'
+import { getCssShadow, getCssShadowFilter } from 'src/services/theme_data/css_utils.js'
+import { findShadow, findColor } from 'src/services/theme_data/theme_data_3.service.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
+import { throttle, flattenDeep } from 'lodash'
 import {
   faTimes,
   faChevronDown,
@@ -18,105 +26,155 @@ library.add(
   faPlus
 )
 
-const toModel = (object = {}) => ({
-  x: 0,
-  y: 0,
-  blur: 0,
-  spread: 0,
-  inset: false,
-  color: '#000000',
-  alpha: 1,
-  ...object
-})
+const toModel = (input) => {
+  if (typeof input === 'object') {
+    return {
+      x: 0,
+      y: 0,
+      blur: 0,
+      spread: 0,
+      inset: false,
+      color: '#000000',
+      alpha: 1,
+      ...input
+    }
+  } else if (typeof input === 'string') {
+    return input
+  }
+}
 
 export default {
-  // 'modelValue' and 'Fallback' can be undefined, but if they are
-  // initially vue won't detect it when they become something else
-  // therefore i'm using "ready" which should be passed as true when
-  // data becomes available
   props: [
-    'modelValue', 'fallback', 'ready'
+    'modelValue',
+    'fallback',
+    'separateInset',
+    'noPreview',
+    'disabled',
+    'staticVars',
+    'compact'
   ],
-  emits: ['update:modelValue'],
+  emits: ['update:modelValue', 'subShadowSelected'],
   data () {
     return {
       selectedId: 0,
-      // TODO there are some bugs regarding display of array (it's not getting updated when deleting for some reason)
-      cValue: (this.modelValue || this.fallback || []).map(toModel)
+      invalid: false
     }
   },
   components: {
     ColorInput,
     OpacityInput,
-    Select
-  },
-  methods: {
-    add () {
-      this.cValue.push(toModel(this.selected))
-      this.selectedId = this.cValue.length - 1
-    },
-    del () {
-      this.cValue.splice(this.selectedId, 1)
-      this.selectedId = this.cValue.length === 0 ? undefined : Math.max(this.selectedId - 1, 0)
-    },
-    moveUp () {
-      const movable = this.cValue.splice(this.selectedId, 1)[0]
-      this.cValue.splice(this.selectedId - 1, 0, movable)
-      this.selectedId -= 1
-    },
-    moveDn () {
-      const movable = this.cValue.splice(this.selectedId, 1)[0]
-      this.cValue.splice(this.selectedId + 1, 0, movable)
-      this.selectedId += 1
-    }
-  },
-  beforeUpdate () {
-    this.cValue = this.modelValue || this.fallback
+    Select,
+    SelectMotion,
+    Checkbox,
+    Popover,
+    ComponentPreview
   },
   computed: {
-    anyShadows () {
-      return this.cValue.length > 0
-    },
-    anyShadowsFallback () {
-      return this.fallback.length > 0
-    },
-    selected () {
-      if (this.ready && this.anyShadows) {
-        return this.cValue[this.selectedId]
-      } else {
-        return toModel({})
+    cValue: {
+      get () {
+        return (this.modelValue ?? this.fallback ?? []).map(toModel)
+      },
+      set (newVal) {
+        this.$emit('update:modelValue', newVal)
       }
     },
-    currentFallback () {
-      if (this.ready && this.anyShadowsFallback) {
-        return this.fallback[this.selectedId]
-      } else {
-        return toModel({})
+    selectedType: {
+      get () {
+        return typeof this.selected
+      },
+      set (newType) {
+        this.selected = toModel(newType === 'object' ? {} : '')
       }
     },
-    moveUpValid () {
-      return this.ready && this.selectedId > 0
-    },
-    moveDnValid () {
-      return this.ready && this.selectedId < this.cValue.length - 1
+    selected: {
+      get () {
+        const selected = this.cValue[this.selectedId]
+        if (selected && typeof selected === 'object') {
+          return { ...selected }
+        } else if (typeof selected === 'string') {
+          return selected
+        }
+        return null
+      },
+      set (value) {
+        this.cValue[this.selectedId] = toModel(value)
+        this.$emit('update:modelValue', this.cValue)
+      }
     },
     present () {
-      return this.ready &&
-        typeof this.cValue[this.selectedId] !== 'undefined' &&
-        !this.usingFallback
+      return this.selected != null && this.modelValue != null
     },
-    usingFallback () {
-      return typeof this.modelValue === 'undefined'
+    shadowsAreNull () {
+      return this.modelValue == null
     },
-    rgb () {
-      return hex2rgb(this.selected.color)
+    currentFallback () {
+      return this.fallback?.[this.selectedId]
+    },
+    getColorFallback () {
+      if (this.staticVars && this.selected?.color) {
+        try {
+          const computedColor = findColor(this.selected.color, { dynamicVars: {}, staticVars: this.staticVars }, true)
+          if (computedColor) return rgb2hex(computedColor)
+          return null
+        } catch (e) {
+          console.warn(e)
+          return null
+        }
+      } else {
+        return this.currentFallback?.color
+      }
     },
     style () {
-      return this.ready
-        ? {
-            boxShadow: getCssShadow(this.fallback)
+      try {
+        let result
+        const serialized = this.cValue.map(x => serializeShadow(x)).join(',')
+        serialized.split(/,/).map(deserializeShadow) // validate
+        const expandedShadow = flattenDeep(findShadow(this.cValue, { dynamicVars: {}, staticVars: this.staticVars }))
+        const fixedShadows = expandedShadow.map(x => ({ ...x, color: rgb2hex(x.color) }))
+
+        if (this.separateInset) {
+          result = {
+            filter: getCssShadowFilter(fixedShadows),
+            boxShadow: getCssShadow(fixedShadows, true)
           }
-        : {}
+        } else {
+          result = {
+            boxShadow: getCssShadow(fixedShadows)
+          }
+        }
+        this.invalid = false
+        return result
+      } catch (e) {
+        console.error('Invalid shadow', e)
+        this.invalid = true
+      }
     }
+  },
+  watch: {
+    selected (value) {
+      this.$emit('subShadowSelected', this.selectedId)
+    }
+  },
+  methods: {
+    getNewSubshadow () {
+      return toModel(this.selected)
+    },
+    onSelectChange (id) {
+      this.selectedId = id
+    },
+    getSubshadowLabel (shadow, index) {
+      if (typeof shadow === 'object') {
+        return shadow?.name ?? this.$t('settings.style.shadows.shadow_id', { value: index })
+      } else if (typeof shadow === 'string') {
+        return shadow || this.$t('settings.style.shadows.empty_expression')
+      }
+    },
+    updateProperty: throttle(function (prop, value) {
+      this.cValue[this.selectedId][prop] = value
+      if (prop === 'inset' && value === false && this.separateInset) {
+        this.cValue[this.selectedId].spread = 0
+      }
+      this.$emit('update:modelValue', this.cValue)
+    }, 100)
   }
 }
diff --git a/src/components/shadow_control/shadow_control.scss b/src/components/shadow_control/shadow_control.scss
new file mode 100644
index 000000000..7e998cdf7
--- /dev/null
+++ b/src/components/shadow_control/shadow_control.scss
@@ -0,0 +1,122 @@
+.ShadowControl {
+  display: grid;
+  grid-template-columns: 10em 1fr 1fr;
+  grid-template-rows: 1fr;
+  grid-template-areas: "selector preview tweak";
+  grid-gap: 0.5em;
+  justify-content: stretch;
+
+  &.-compact {
+    grid-template-columns: 10em 1fr;
+    grid-template-rows: auto auto;
+    grid-template-areas:
+      "selector preview"
+      "tweak tweak";
+
+    &.-no-preview {
+      grid-template-columns: 1fr;
+      grid-template-rows: 10em 1fr;
+      grid-template-areas:
+        "selector"
+        "tweak";
+    }
+  }
+
+  .shadow-switcher {
+    grid-area: selector;
+    order: 1;
+    flex: 1 0 6em;
+    min-width: 6em;
+    margin-right: 0.125em;
+    display: flex;
+    flex-direction: column;
+
+    .shadow-list {
+      flex: 1 0 auto;
+    }
+  }
+
+  .shadow-tweak {
+    grid-area: tweak;
+    order: 3;
+    flex: 2 0 10em;
+    min-width: 10em;
+    margin-left: 0.125em;
+    margin-right: 0.125em;
+    display: grid;
+    grid-template-rows: auto 1fr;
+    grid-gap: 0.25em;
+
+    /* hack */
+    .input-boolean {
+      flex: 1;
+      display: flex;
+
+      .label {
+        flex: 1;
+      }
+    }
+
+    .input-string {
+      flex: 1 0 5em;
+    }
+
+    .shadow-expression {
+      width: 100%;
+      height: 100%;
+    }
+
+    .id-control {
+      align-items: stretch;
+
+      .shadow-switcher,
+      .btn {
+        min-width: 1px;
+        margin-right: 5px;
+      }
+
+      .btn {
+        padding: 0 0.4em;
+        margin: 0 0.1em;
+      }
+    }
+  }
+
+  &.-no-preview {
+    grid-template-columns: 10em 1fr;
+    grid-template-rows: 1fr;
+    grid-template-areas: "selector tweak";
+
+    .shadow-tweak {
+      order: 0;
+      flex: 2 0 8em;
+      max-width: 100%;
+    }
+
+    .input-range {
+      min-width: 5em;
+    }
+  }
+
+  .inset-alert {
+    padding: 0.25em 0.5em;
+  }
+
+  &.disabled {
+    .inset-alert {
+      opacity: 0.2;
+    }
+  }
+
+  .shadow-preview {
+    grid-area: preview;
+    min-width: 25em;
+    margin-left: 0.125em;
+    align-self: start;
+    justify-self: center;
+  }
+}
+
+.inset-tooltip {
+  max-width: 30em;
+}
diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
index 1f3c26aa7..d5fb80dc4 100644
--- a/src/components/shadow_control/shadow_control.vue
+++ b/src/components/shadow_control/shadow_control.vue
@@ -1,334 +1,238 @@
 <template>
   <div
-    class="shadow-control"
-    :class="{ disabled: !present }"
+    class="ShadowControl label shadow-control"
+    :class="{ disabled: disabled || !present, '-no-preview': noPreview, '-compact': compact }"
   >
-    <div class="shadow-preview-container">
-      <div
-        :disabled="!present"
-        class="y-shift-control"
+    <ComponentPreview
+      v-if="!noPreview"
+      :invalid="invalid"
+      class="shadow-preview"
+      :shadow-control="true"
+      :shadow="selected"
+      :preview-style="style"
+      :disabled="disabled || !present"
+      @update:shadow="({ axis, value }) => updateProperty(axis, value)"
+    />
+    <div class="shadow-switcher">
+      <Select
+        id="shadow-list"
+        v-model="selectedId"
+        class="shadow-list"
+        size="4"
+        :disabled="disabled || shadowsAreNull"
       >
-        <input
-          v-model="selected.y"
-          :disabled="!present"
-          class="input-number"
-          type="number"
+        <option
+          v-for="(shadow, index) in cValue"
+          :key="index"
+          :value="index"
+          :class="{ '-active': index === Number(selectedId) }"
         >
-        <div class="wrap">
-          <input
-            v-model="selected.y"
-            :disabled="!present"
-            class="input-range"
-            type="range"
-            max="20"
-            min="-20"
-          >
-        </div>
-      </div>
-      <div class="preview-window">
-        <div
-          class="preview-block"
-          :style="style"
-        />
-      </div>
-      <div
-        :disabled="!present"
-        class="x-shift-control"
-      >
-        <input
-          v-model="selected.x"
-          :disabled="!present"
-          class="input-number"
-          type="number"
-        >
-        <div class="wrap">
-          <input
-            v-model="selected.x"
-            :disabled="!present"
-            class="input-range"
-            type="range"
-            max="20"
-            min="-20"
-          >
-        </div>
-      </div>
+          {{ getSubshadowLabel(shadow, index) }}
+        </option>
+      </Select>
+      <SelectMotion
+        v-model="cValue"
+        :selected-id="selectedId"
+        :get-add-value="getNewSubshadow"
+        :disabled="disabled"
+        @update:selectedId="onSelectChange"
+      />
     </div>
-
     <div class="shadow-tweak">
-      <div
-        :disabled="usingFallback"
-        class="id-control style-control"
+      <Select
+        v-model="selectedType"
+        :disabled="disabled || !present"
       >
-        <Select
-          id="shadow-switcher"
-          v-model="selectedId"
-          class="shadow-switcher"
-          :disabled="!ready || usingFallback"
-        >
-          <option
-            v-for="(shadow, index) in cValue"
-            :key="index"
-            :value="index"
-          >
-            {{ $t('settings.style.shadows.shadow_id', { value: index }) }}
-          </option>
-        </Select>
-        <button
-          class="btn button-default"
-          :disabled="!ready || !present"
-          @click="del"
-        >
-          <FAIcon
-            fixed-width
-            icon="times"
-          />
-        </button>
-        <button
-          class="btn button-default"
-          :disabled="!moveUpValid"
-          @click="moveUp"
-        >
-          <FAIcon
-            fixed-width
-            icon="chevron-up"
-          />
-        </button>
-        <button
-          class="btn button-default"
-          :disabled="!moveDnValid"
-          @click="moveDn"
-        >
-          <FAIcon
-            fixed-width
-            icon="chevron-down"
-          />
-        </button>
-        <button
-          class="btn button-default"
-          :disabled="usingFallback"
-          @click="add"
-        >
-          <FAIcon
-            fixed-width
-            icon="plus"
-          />
-        </button>
-      </div>
-      <div
-        :disabled="!present"
-        class="inset-control style-control"
-      >
-        <label
-          for="inset"
-          class="label"
-        >
-          {{ $t('settings.style.shadows.inset') }}
-        </label>
-        <input
-          id="inset"
-          v-model="selected.inset"
-          :disabled="!present"
-          name="inset"
-          class="input-inset visible-for-screenreader-only"
-          type="checkbox"
-        >
-        <label
-          class="checkbox-label"
-          for="inset"
-          :aria-hidden="true"
+        <option value="object">
+          {{ $t('settings.style.shadows.raw') }}
+        </option>
+        <option value="string">
+          {{ $t('settings.style.shadows.expression') }}
+        </option>
+      </Select>
+      <template v-if="selectedType === 'string'">
+        <textarea
+          v-model="selected"
+          class="input shadow-expression"
+          :disabled="disabled || shadowsAreNull"
+          :class="{disabled: disabled || shadowsAreNull}"
         />
-      </div>
-      <div
-        :disabled="!present"
-        class="blur-control style-control"
-      >
-        <label
-          for="spread"
-          class="label"
+      </template>
+      <template v-else-if="selectedType === 'object'">
+        <div
+          :class="{ disabled: disabled || !present }"
+          class="name-control style-control"
         >
-          {{ $t('settings.style.shadows.blur') }}
-        </label>
-        <input
-          id="blur"
-          v-model="selected.blur"
-          :disabled="!present"
-          name="blur"
-          class="input-range"
-          type="range"
-          max="20"
-          min="0"
+          <label
+            for="name"
+            class="label"
+            :class="{ faint: disabled || !present }"
+          >
+            {{ $t('settings.style.shadows.name') }}
+          </label>
+          <input
+            id="name"
+            :value="selected?.name"
+            :disabled="disabled || !present"
+            :class="{ disabled: disabled || !present }"
+            name="name"
+            class="input input-string"
+            @input="e => updateProperty('name', e.target.value)"
+          >
+        </div>
+        <div
+          :disabled="disabled || !present"
+          class="inset-control style-control"
         >
-        <input
-          v-model="selected.blur"
-          :disabled="!present"
-          class="input-number"
-          type="number"
-          min="0"
+          <Checkbox
+            id="inset"
+            :value="selected?.inset"
+            :disabled="disabled || !present"
+            name="inset"
+            class="input-inset input-boolean"
+            @input="e => updateProperty('inset', e.target.checked)"
+          >
+            <template #before>
+              {{ $t('settings.style.shadows.inset') }}
+            </template>
+          </Checkbox>
+        </div>
+        <div
+          :disabled="disabled || !present"
+          :class="{ disabled: disabled || !present }"
+          class="blur-control style-control"
         >
-      </div>
-      <div
-        :disabled="!present"
-        class="spread-control style-control"
-      >
-        <label
-          for="spread"
-          class="label"
+          <label
+            for="blur"
+            class="label"
+            :class="{ faint: disabled || !present }"
+          >
+            {{ $t('settings.style.shadows.blur') }}
+          </label>
+          <input
+            id="blur"
+            :value="selected?.blur"
+            :disabled="disabled || !present"
+            :class="{ disabled: disabled || !present }"
+            name="blur"
+            class="input input-range"
+            type="range"
+            max="20"
+            min="0"
+            @input="e => updateProperty('blur', e.target.value)"
+          >
+          <input
+            :value="selected?.blur"
+            class="input input-number -small"
+            :disabled="disabled || !present"
+            :class="{ disabled: disabled || !present }"
+            type="number"
+            min="0"
+            @input="e => updateProperty('blur', e.target.value)"
+          >
+        </div>
+        <div
+          class="spread-control style-control"
+          :class="{ disabled: disabled || !present || (separateInset && !selected?.inset) }"
         >
-          {{ $t('settings.style.shadows.spread') }}
-        </label>
-        <input
-          id="spread"
-          v-model="selected.spread"
-          :disabled="!present"
-          name="spread"
-          class="input-range"
-          type="range"
-          max="20"
-          min="-20"
+          <label
+            for="spread"
+            class="label"
+            :class="{ faint: disabled || !present || (separateInset && !selected?.inset) }"
+          >
+            {{ $t('settings.style.shadows.spread') }}
+          </label>
+          <input
+            id="spread"
+            :value="selected?.spread"
+            :class="{ disabled: disabled || !present || (separateInset && !selected?.inset) }"
+            :disabled="disabled || !present || (separateInset && !selected?.inset)"
+            name="spread"
+            class="input input-range"
+            type="range"
+            max="20"
+            min="-20"
+            @input="e => updateProperty('spread', e.target.value)"
+          >
+          <input
+            :value="selected?.spread"
+            class="input input-number -small"
+            :class="{ disabled: disabled || !present || (separateInset && !selected?.inset) }"
+            :disabled="disabled || !present || (separateInset && !selected?.inset)"
+            type="number"
+            @input="e => updateProperty('spread', e.target.value)"
+          >
+        </div>
+        <ColorInput
+          :model-value="selected?.color"
+          :disabled="disabled || !present"
+          :label="$t('settings.style.common.color')"
+          :fallback="getColorFallback"
+          :show-optional-checkbox="false"
+          name="shadow"
+          @update:modelValue="e => updateProperty('color', e)"
+        />
+        <OpacityInput
+          :model-value="selected?.alpha"
+          :disabled="disabled || !present"
+          @update:modelValue="e => updateProperty('alpha', e)"
+        />
+        <i18n-t
+          scope="global"
+          keypath="settings.style.shadows.hintV3"
+          :class="{ faint: disabled || !present }"
+          tag="p"
         >
-        <input
-          v-model="selected.spread"
-          :disabled="!present"
-          class="input-number"
-          type="number"
+          <code>--variable,mod</code>
+        </i18n-t>
+        <Popover
+          v-if="separateInset"
+          trigger="hover"
         >
-      </div>
-      <ColorInput
-        v-model="selected.color"
-        :disabled="!present"
-        :label="$t('settings.style.common.color')"
-        :fallback="currentFallback.color"
-        :show-optional-tickbox="false"
-        name="shadow"
-      />
-      <OpacityInput
-        v-model="selected.alpha"
-        :disabled="!present"
-      />
-      <i18n-t
-        scope="global"
-        keypath="settings.style.shadows.hintV3"
-        tag="p"
-      >
-        <code>--variable,mod</code>
-      </i18n-t>
+          <template #trigger>
+            <div
+              class="inset-alert alert warning"
+            >
+              <FAIcon icon="exclamation-triangle" />
+              &nbsp;
+              {{ $t('settings.style.shadows.filter_hint.avatar_inset_short') }}
+            </div>
+          </template>
+          <template #content>
+            <div class="inset-tooltip tooltip">
+              <i18n-t
+                scope="global"
+                keypath="settings.style.shadows.filter_hint.always_drop_shadow"
+                tag="p"
+              >
+                <code>filter: drop-shadow()</code>
+              </i18n-t>
+              <p>{{ $t('settings.style.shadows.filter_hint.avatar_inset') }}</p>
+              <i18n-t
+                scope="global"
+                keypath="settings.style.shadows.filter_hint.drop_shadow_syntax"
+                tag="p"
+              >
+                <code>drop-shadow</code>
+                <code>spread-radius</code>
+                <code>inset</code>
+              </i18n-t>
+              <i18n-t
+                scope="global"
+                keypath="settings.style.shadows.filter_hint.inset_classic"
+                tag="p"
+              >
+                <code>box-shadow</code>
+              </i18n-t>
+              <p>{{ $t('settings.style.shadows.filter_hint.spread_zero') }}</p>
+            </div>
+          </template>
+        </Popover>
+      </template>
     </div>
   </div>
 </template>
 
 <script src="./shadow_control.js"></script>
 
-<style lang="scss">
-@import "../../variables";
-
-.shadow-control {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  margin-bottom: 1em;
-
-  .shadow-preview-container,
-  .shadow-tweak {
-    margin: 5px 6px 0 0;
-  }
-
-  .shadow-preview-container {
-    flex: 0;
-    display: flex;
-    flex-wrap: wrap;
-
-    $side: 15em;
-
-    input[type="number"] {
-      width: 5em;
-      min-width: 2em;
-    }
-
-    .x-shift-control,
-    .y-shift-control {
-      display: flex;
-      flex: 0;
-
-      &[disabled="disabled"] * {
-        opacity: 0.5;
-      }
-    }
-
-    .x-shift-control {
-      align-items: flex-start;
-    }
-
-    .x-shift-control .wrap,
-    input[type="range"] {
-      margin: 0;
-      width: $side;
-      height: 2em;
-    }
-
-    .y-shift-control {
-      flex-direction: column;
-      align-items: flex-end;
-
-      .wrap {
-        width: 2em;
-        height: $side;
-      }
-
-      input[type="range"] {
-        transform-origin: 1em 1em;
-        transform: rotate(90deg);
-      }
-    }
-
-    .preview-window {
-      flex: 1;
-      background-color: #999;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background-image:
-        linear-gradient(45deg, #666 25%, transparent 25%),
-        linear-gradient(-45deg, #666 25%, transparent 25%),
-        linear-gradient(45deg, transparent 75%, #666 75%),
-        linear-gradient(-45deg, transparent 75%, #666 75%);
-      background-size: 20px 20px;
-      background-position: 0 0, 0 10px, 10px -10px, -10px 0;
-      border-radius: $fallback--inputRadius;
-      border-radius: var(--inputRadius, $fallback--inputRadius);
-
-      .preview-block {
-        width: 33%;
-        height: 33%;
-        background-color: $fallback--bg;
-        background-color: var(--bg, $fallback--bg);
-        border-radius: $fallback--panelRadius;
-        border-radius: var(--panelRadius, $fallback--panelRadius);
-      }
-    }
-  }
-
-  .shadow-tweak {
-    flex: 1;
-    min-width: 280px;
-
-    .id-control {
-      align-items: stretch;
-
-      .shadow-switcher {
-        flex: 1;
-      }
-
-      .shadow-switcher,
-      .btn {
-        min-width: 1px;
-        margin-right: 5px;
-      }
-
-      .btn {
-        padding: 0 0.4em;
-        margin: 0 0.1em;
-      }
-    }
-  }
-}
-</style>
+<style src="./shadow_control.scss" lang="scss"></style>
diff --git a/src/components/shout_panel/shout_panel.vue b/src/components/shout_panel/shout_panel.vue
index a70134699..67927df88 100644
--- a/src/components/shout_panel/shout_panel.vue
+++ b/src/components/shout_panel/shout_panel.vue
@@ -5,20 +5,20 @@
   >
     <div class="panel panel-default">
       <div
-        class="panel-heading timeline-heading"
+        class="panel-heading"
         :class="{ 'shout-heading': floating }"
         @click.stop.prevent="togglePanel"
       >
-        <div class="title">
+        <h1 class="title">
           {{ $t('shoutbox.title') }}
           <FAIcon
             v-if="floating"
             icon="times"
             class="close-icon"
           />
-        </div>
+        </h1>
       </div>
-      <div class="shout-window">
+      <div class="panel-body shout-window">
         <div
           v-for="message in messages"
           :key="message.id"
@@ -41,10 +41,10 @@
           </div>
         </div>
       </div>
-      <div class="shout-input">
+      <div class="panel-body shout-input">
         <textarea
           v-model="currentMessage"
-          class="shout-input-textarea"
+          class="shout-input-textarea input"
           rows="1"
           @keyup.enter="submit(currentMessage)"
         />
@@ -75,8 +75,6 @@
 <script src="./shout_panel.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .floating-shout {
   position: fixed;
   bottom: 0.5em;
@@ -97,8 +95,7 @@
     cursor: pointer;
 
     .icon {
-      color: $fallback--text;
-      color: var(--panelText, $fallback--text);
+      color: var(--text);
       margin-right: 0.5em;
     }
 
@@ -128,8 +125,7 @@
     img {
       height: 24px;
       width: 24px;
-      border-radius: $fallback--avatarRadius;
-      border-radius: var(--avatarRadius, $fallback--avatarRadius);
+      border-radius: var(--roundness);
       margin-right: 0.5em;
       margin-top: 0.25em;
     }
diff --git a/src/components/side_drawer/side_drawer.js b/src/components/side_drawer/side_drawer.js
index 875c809de..31899df7e 100644
--- a/src/components/side_drawer/side_drawer.js
+++ b/src/components/side_drawer/side_drawer.js
@@ -18,7 +18,8 @@ import {
   faCog,
   faInfoCircle,
   faCompass,
-  faList
+  faList,
+  faFilePen
 } from '@fortawesome/free-solid-svg-icons'
 import { useShoutStore } from '../../stores/shout'
 import { useInterfaceStore } from '../../stores/interface'
@@ -37,7 +38,8 @@ library.add(
   faCog,
   faInfoCircle,
   faCompass,
-  faList
+  faList,
+  faFilePen
 )
 
 const SideDrawer = {
@@ -105,7 +107,7 @@ const SideDrawer = {
     ...mapState({
       pleromaChatMessagesAvailable: state => state.instance.pleromaChatMessagesAvailable
     }),
-    ...mapGetters(['unreadChatCount'])
+    ...mapGetters(['unreadChatCount', 'draftCount'])
   },
   methods: {
     toggleDrawer () {
@@ -122,7 +124,10 @@ const SideDrawer = {
       GestureService.updateSwipe(e, this.closeGesture)
     },
     openSettingsModal () {
-      useInterfaceStore().openSettingsModal()
+      useInterfaceStore().openSettingsModal('user')
+    },
+    openAdminModal () {
+      useInterfaceStore().openSettingsModal('admin')
     }
   }
 }
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 994ac953d..7dd6ff28f 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="side-drawer-container"
+    class="side-drawer-container mobile-drawer"
     :class="{ 'side-drawer-container-closed': closed, 'side-drawer-container-open': !closed }"
   >
     <div
@@ -35,7 +35,10 @@
           v-if="!currentUser"
           @click="toggleDrawer"
         >
-          <router-link :to="{ name: 'login' }">
+          <router-link
+            :to="{ name: 'login' }"
+            class="menu-item"
+          >
             <FAIcon
               fixed-width
               class="fa-scale-110 fa-old-padding"
@@ -47,7 +50,10 @@
           v-if="currentUser || !privateMode"
           @click="toggleDrawer"
         >
-          <router-link :to="timelinesRoute">
+          <router-link
+            :to="timelinesRoute"
+            class="menu-item"
+          >
             <FAIcon
               fixed-width
               class="fa-scale-110 fa-old-padding"
@@ -59,7 +65,10 @@
           v-if="currentUser"
           @click="toggleDrawer"
         >
-          <router-link :to="{ name: 'lists' }">
+          <router-link
+            :to="{ name: 'lists' }"
+            class="menu-item"
+          >
             <FAIcon
               fixed-width
               class="fa-scale-110 fa-old-padding"
@@ -67,6 +76,21 @@
             /> {{ $t("nav.lists") }}
           </router-link>
         </li>
+        <li
+          v-if="currentUser"
+          @click="toggleDrawer"
+        >
+          <router-link
+            :to="{ name: 'bookmarks' }"
+            class="menu-item"
+          >
+            <FAIcon
+              fixed-width
+              class="fa-scale-110 fa-old-padding"
+              icon="bookmark"
+            /> {{ $t("nav.bookmarks") }}
+          </router-link>
+        </li>
         <li
           v-if="currentUser && pleromaChatMessagesAvailable"
           @click="toggleDrawer"
@@ -74,6 +98,7 @@
           <router-link
             :to="{ name: 'chats', params: { username: currentUser.screen_name } }"
             style="position: relative;"
+            class="menu-item"
           >
             <FAIcon
               fixed-width
@@ -82,7 +107,7 @@
             /> {{ $t("nav.chats") }}
             <span
               v-if="unreadChatCount"
-              class="badge badge-notification"
+              class="badge -notification"
             >
               {{ unreadChatCount }}
             </span>
@@ -91,7 +116,10 @@
       </ul>
       <ul v-if="currentUser">
         <li @click="toggleDrawer">
-          <router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }">
+          <router-link
+            :to="{ name: 'interactions', params: { username: currentUser.screen_name } }"
+            class="menu-item"
+          >
             <FAIcon
               fixed-width
               class="fa-scale-110 fa-old-padding"
@@ -103,7 +131,10 @@
           v-if="currentUser.locked"
           @click="toggleDrawer"
         >
-          <router-link to="/friend-requests">
+          <router-link
+            to="/friend-requests"
+            class="menu-item"
+          >
             <FAIcon
               fixed-width
               class="fa-scale-110 fa-old-padding"
@@ -111,7 +142,7 @@
             /> {{ $t("nav.friend_requests") }}
             <span
               v-if="followRequestCount > 0"
-              class="badge badge-notification"
+              class="badge -notification"
             >
               {{ followRequestCount }}
             </span>
@@ -121,7 +152,10 @@
           v-if="shout"
           @click="toggleDrawer"
         >
-          <router-link :to="{ name: 'shout-panel' }">
+          <router-link
+            :to="{ name: 'shout-panel' }"
+            class="menu-item"
+          >
             <FAIcon
               fixed-width
               class="fa-scale-110 fa-old-padding"
@@ -135,7 +169,10 @@
           v-if="currentUser || !privateMode"
           @click="toggleDrawer"
         >
-          <router-link :to="{ name: 'search' }">
+          <router-link
+            :to="{ name: 'search' }"
+            class="menu-item"
+          >
             <FAIcon
               fixed-width
               class="fa-scale-110 fa-old-padding"
@@ -147,7 +184,10 @@
           v-if="currentUser && suggestionsEnabled"
           @click="toggleDrawer"
         >
-          <router-link :to="{ name: 'who-to-follow' }">
+          <router-link
+            :to="{ name: 'who-to-follow' }"
+            class="menu-item"
+          >
             <FAIcon
               fixed-width
               class="fa-scale-110 fa-old-padding"
@@ -157,7 +197,7 @@
         </li>
         <li @click="toggleDrawer">
           <button
-            class="button-unstyled -link -fullwidth"
+            class="menu-item"
             @click="openSettingsModal"
           >
             <FAIcon
@@ -168,7 +208,10 @@
           </button>
         </li>
         <li @click="toggleDrawer">
-          <router-link :to="{ name: 'about'}">
+          <router-link
+            :to="{ name: 'about'}"
+            class="menu-item"
+          >
             <FAIcon
               fixed-width
               class="fa-scale-110 fa-old-padding"
@@ -180,16 +223,16 @@
           v-if="currentUser && currentUser.role === 'admin'"
           @click="toggleDrawer"
         >
-          <a
-            href="/pleroma/admin/#/login-pleroma"
-            target="_blank"
+          <button
+            class="menu-item"
+            @click.stop="openAdminModal"
           >
             <FAIcon
               fixed-width
               class="fa-scale-110 fa-old-padding"
               icon="tachometer-alt"
             /> {{ $t("nav.administration") }}
-          </a>
+          </button>
         </li>
         <li
           v-if="currentUser && supportsAnnouncements"
@@ -197,6 +240,7 @@
         >
           <router-link
             :to="{ name: 'announcements' }"
+            class="menu-item"
           >
             <FAIcon
               fixed-width
@@ -205,7 +249,7 @@
             /> {{ $t("nav.announcements") }}
             <span
               v-if="unreadAnnouncementCount"
-              class="badge badge-notification"
+              class="badge -notification"
             >
               {{ unreadAnnouncementCount }}
             </span>
@@ -215,7 +259,31 @@
           v-if="currentUser"
           @click="toggleDrawer"
         >
-          <router-link :to="{ name: 'edit-navigation' }">
+          <router-link
+            :to="{ name: 'drafts' }"
+            class="menu-item"
+          >
+            <FAIcon
+              fixed-width
+              class="fa-scale-110 fa-old-padding"
+              icon="file-pen"
+            /> {{ $t('nav.drafts') }}
+            <span
+              v-if="draftCount"
+              class="badge -neutral"
+            >
+              {{ draftCount }}
+            </span>
+          </router-link>
+        </li>
+        <li
+          v-if="currentUser"
+          @click="toggleDrawer"
+        >
+          <router-link
+            :to="{ name: 'edit-navigation' }"
+            class="menu-item"
+          >
             <FAIcon
               fixed-width
               class="fa-scale-110 fa-old-padding"
@@ -228,7 +296,7 @@
           @click="toggleDrawer"
         >
           <button
-            class="button-unstyled -link -fullwidth"
+            class="menu-item"
             @click="doLogout"
           >
             <FAIcon
@@ -251,8 +319,6 @@
 <script src="./side_drawer.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .side-drawer-container {
   position: fixed;
   z-index: var(--ZI_navbar);
@@ -305,17 +371,8 @@
   width: 80%;
   max-width: 20em;
   flex: 0 0 80%;
-  box-shadow: 1px 1px 4px rgb(0 0 0 / 60%);
-  box-shadow: var(--panelShadow);
-  background-color: $fallback--bg;
-  background-color: var(--popover, $fallback--bg);
-  color: $fallback--link;
-  color: var(--popoverText, $fallback--link);
-
-  --faint: var(--popoverFaintText, $fallback--faint);
-  --faintLink: var(--popoverFaintLink, $fallback--faint);
-  --lightText: var(--popoverLightText, $fallback--lightText);
-  --icon: var(--popoverIcon, $fallback--icon);
+  box-shadow: var(--shadow);
+  background-color: var(--background);
 
   .badge {
     margin-left: 10px;
@@ -362,8 +419,7 @@
   margin: 0;
   padding: 0;
   border-bottom: 1px solid;
-  border-color: $fallback--border;
-  border-color: var(--border, $fallback--border);
+  border-color: var(--border);
 }
 
 .side-drawer ul:last-child {
@@ -380,18 +436,6 @@
     height: 3em;
     line-height: 3em;
     padding: 0 0.7em;
-
-    &:hover {
-      background-color: $fallback--lightBg;
-      background-color: var(--selectedMenuPopover, $fallback--lightBg);
-      color: $fallback--text;
-      color: var(--selectedMenuPopoverText, $fallback--text);
-
-      --faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
-      --faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
-      --lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
-      --icon: var(--selectedMenuPopoverIcon, $fallback--icon);
-    }
   }
 }
 </style>
diff --git a/src/components/status/post.style.js b/src/components/status/post.style.js
new file mode 100644
index 000000000..d0038424e
--- /dev/null
+++ b/src/components/status/post.style.js
@@ -0,0 +1,42 @@
+export default {
+  name: 'Post',
+  selector: '.Status',
+  states: {
+    selected: '.-focused'
+  },
+  validInnerComponents: [
+    'Text',
+    'Link',
+    'Icon',
+    'Border',
+    'Button',
+    'ButtonUnstyled',
+    'RichContent',
+    'Input',
+    'Avatar',
+    'Attachment',
+    'PollGraph'
+  ],
+  validInnerComponentsLite: [
+    'Text',
+    'Link',
+    'Icon',
+    'Border',
+    'ButtonUnstyled',
+    'RichContent',
+    'Avatar'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        background: '--bg'
+      }
+    },
+    {
+      state: ['selected'],
+      directives: {
+        background: '--inheritedBackground, 10'
+      }
+    }
+  ]
+}
diff --git a/src/components/status/status.js b/src/components/status/status.js
index bb86e8c9a..4f8ba31e4 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -1,8 +1,3 @@
-import ReplyButton from '../reply_button/reply_button.vue'
-import FavoriteButton from '../favorite_button/favorite_button.vue'
-import ReactButton from '../react_button/react_button.vue'
-import RetweetButton from '../retweet_button/retweet_button.vue'
-import ExtraButtons from '../extra_buttons/extra_buttons.vue'
 import PostStatusForm from '../post_status_form/post_status_form.vue'
 import UserAvatar from '../user_avatar/user_avatar.vue'
 import AvatarList from '../avatar_list/avatar_list.vue'
@@ -16,11 +11,11 @@ import EmojiReactions from '../emoji_reactions/emoji_reactions.vue'
 import UserLink from '../user_link/user_link.vue'
 import MentionsLine from 'src/components/mentions_line/mentions_line.vue'
 import MentionLink from 'src/components/mention_link/mention_link.vue'
+import StatusActionButtons from 'src/components/status_action_buttons/status_action_buttons.vue'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
 import { muteWordHits } from '../../services/status_parser/status_parser.js'
 import { unescape, uniqBy } from 'lodash'
-import { useInterfaceStore } from '../../stores/interface'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -40,7 +35,8 @@ import {
   faThumbtack,
   faChevronUp,
   faChevronDown,
-  faAngleDoubleRight
+  faAngleDoubleRight,
+  faPlay
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
@@ -60,7 +56,8 @@ library.add(
   faThumbtack,
   faChevronUp,
   faChevronDown,
-  faAngleDoubleRight
+  faAngleDoubleRight,
+  faPlay
 )
 
 const camelCase = name => name.charAt(0).toUpperCase() + name.slice(1)
@@ -101,11 +98,6 @@ const controlledOrUncontrolledSet = (obj, name, val) => {
 const Status = {
   name: 'Status',
   components: {
-    ReplyButton,
-    FavoriteButton,
-    ReactButton,
-    RetweetButton,
-    ExtraButtons,
     PostStatusForm,
     UserAvatar,
     AvatarList,
@@ -118,7 +110,8 @@ const Status = {
     MentionLink,
     MentionsLine,
     UserPopover,
-    UserLink
+    UserLink,
+    StatusActionButtons
   },
   props: [
     'statusoid',
@@ -134,6 +127,7 @@ const Status = {
     'showPinned',
     'inProfile',
     'profileUserId',
+    'inQuote',
 
     'simpleTree',
     'controlledThreadDisplayStatus',
@@ -152,6 +146,7 @@ const Status = {
     'controlledSetMediaPlaying',
     'dive'
   ],
+  emits: ['interacted'],
   data () {
     return {
       uncontrolledReplying: false,
@@ -160,7 +155,8 @@ const Status = {
       uncontrolledMediaPlaying: [],
       suspendable: true,
       error: null,
-      headTailLinks: null
+      headTailLinks: null,
+      displayQuote: !this.inQuote
     }
   },
   computed: {
@@ -228,17 +224,14 @@ const Status = {
     muteWordHits () {
       return muteWordHits(this.status, this.muteWords)
     },
-    rtBotStatus () {
-      return this.statusoid.user.bot
-    },
     botStatus () {
-      return this.status.user.bot
+      return this.status.user.actor_type === 'Service'
     },
-    botIndicator () {
-      return this.botStatus && !this.hideBotIndication
+    showActorTypeIndicator () {
+      return !this.hideBotIndication
     },
-    rtBotIndicator () {
-      return this.rtBotStatus && !this.hideBotIndication
+    sensitiveStatus () {
+      return this.status.nsfw
     },
     mentionsLine () {
       if (!this.headTailLinks) return []
@@ -259,16 +252,50 @@ const Status = {
     hasMentionsLine () {
       return this.mentionsLine.length > 0
     },
+    muteReasons () {
+      return [
+        this.userIsMuted ? 'user' : null,
+        this.status.thread_muted ? 'thread' : null,
+        (this.muteWordHits.length > 0) ? 'wordfilter' : null,
+        (this.muteBotStatuses && this.botStatus) ? 'bot' : null,
+        (this.muteSensitiveStatuses && this.sensitiveStatus) ? 'nsfw' : null
+      ].filter(_ => _)
+    },
+    muteLocalized () {
+      if (this.muteReasons.length === 0) return null
+      const mainReason = () => {
+        switch (this.muteReasons[0]) {
+          case 'user': return this.$t('status.muted_user')
+          case 'thread': return this.$t('status.thread_muted')
+          case 'wordfilter':
+            return this.$t(
+              'status.muted_words',
+              {
+                word: this.muteWordHits[0],
+                numWordsMore: this.muteWordHits.length - 1
+              },
+              this.muteWordHits.length
+            )
+          case 'bot': return this.$t('status.bot_muted')
+          case 'nsfw': return this.$t('status.sensitive_muted')
+        }
+      }
+      if (this.muteReasons.length > 1) {
+        return this.$t(
+          'status.multi_reason_mute',
+          {
+            main: mainReason(),
+            numReasonsMore: this.muteReasons.length - 1
+          },
+          this.muteReasons.length - 1
+        )
+      } else {
+        return mainReason()
+      }
+    },
     muted () {
       if (this.statusoid.user.id === this.currentUser.id) return false
-      const reasonsToMute = this.userIsMuted ||
-        // Thread is muted
-        status.thread_muted ||
-        // Wordfiltered
-        this.muteWordHits.length > 0 ||
-        // bot status
-        (this.muteBotStatuses && this.botStatus && !this.compact)
-      return !this.unmuted && !this.shouldNotMute && reasonsToMute
+      return !this.unmuted && !this.shouldNotMute && this.muteReasons.length > 0
     },
     userIsMuted () {
       if (this.statusoid.user.id === this.currentUser.id) return false
@@ -276,9 +303,9 @@ const Status = {
       const { reblog } = status
       const relationship = this.$store.getters.relationship(status.user.id)
       const relationshipReblog = reblog && this.$store.getters.relationship(reblog.user.id)
-      return status.muted ||
+      return (status.muted && !status.thread_muted) ||
         // Reprööt of a muted post according to BE
-        (reblog && reblog.muted) ||
+        (reblog && reblog.muted && !reblog.thread_muted) ||
         // Muted user
         relationship.muting ||
         // Muted user of a reprööt
@@ -370,18 +397,21 @@ const Status = {
     hidePostStats () {
       return this.mergedConfig.hidePostStats
     },
+    shouldDisplayFavsAndRepeats () {
+      return !this.hidePostStats && this.isFocused && (this.combinedFavsAndRepeatsUsers.length > 0 || this.statusFromGlobalRepository.quotes_count)
+    },
     muteBotStatuses () {
       return this.mergedConfig.muteBotStatuses
     },
+    muteSensitiveStatuses () {
+      return this.mergedConfig.muteSensitiveStatuses
+    },
     hideBotIndication () {
       return this.mergedConfig.hideBotIndication
     },
     currentUser () {
       return this.$store.state.users.currentUser
     },
-    betterShadow () {
-      return useInterfaceStore().browserSupport.cssFilter
-    },
     mergedConfig () {
       return this.$store.getters.mergedConfig
     },
@@ -402,6 +432,44 @@ const Status = {
     },
     editingAvailable () {
       return this.$store.state.instance.editingAvailable
+    },
+    hasVisibleQuote () {
+      return this.status.quote_url && this.status.quote_visible
+    },
+    hasInvisibleQuote () {
+      return this.status.quote_url && !this.status.quote_visible
+    },
+    quotedStatus () {
+      return this.status.quote_id ? this.$store.state.statuses.allStatusesObject[this.status.quote_id] : undefined
+    },
+    shouldDisplayQuote () {
+      return this.quotedStatus && this.displayQuote
+    },
+    scrobblePresent () {
+      if (this.mergedConfig.hideScrobbles) return false
+      if (!this.status.user.latestScrobble) return false
+      const value = this.mergedConfig.hideScrobblesAfter.match(/\d+/gs)[0]
+      const unit = this.mergedConfig.hideScrobblesAfter.match(/\D+/gs)[0]
+      let multiplier = 60 * 1000 // minutes is smallest unit
+      switch (unit) {
+        case 'm':
+          break
+        case 'h':
+          multiplier *= 60 // hour
+          break
+        case 'd':
+          multiplier *= 60 // hour
+          multiplier *= 24 // day
+          break
+      }
+      const maxAge = Number(value) * multiplier
+      const createdAt = Date.parse(this.status.user.latestScrobble.created_at)
+      const age = Date.now() - createdAt
+      if (age > maxAge) return false
+      return this.status.user.latestScrobble.artist
+    },
+    scrobble () {
+      return this.status.user.latestScrobble
     }
   },
   methods: {
@@ -421,9 +489,18 @@ const Status = {
       this.error = error
     },
     clearError () {
+      this.$emit('interacted')
       this.error = undefined
     },
     toggleReplying () {
+      this.$emit('interacted')
+      if (this.replying) {
+        this.$refs.postStatusForm.requestClose()
+      } else {
+        this.doToggleReplying()
+      }
+    },
+    doToggleReplying () {
       controlledOrUncontrolledToggle(this, 'replying')
     },
     gotoOriginal (id) {
@@ -470,6 +547,18 @@ const Status = {
           window.scrollBy(0, rect.bottom - window.innerHeight + 50)
         }
       }
+    },
+    toggleDisplayQuote () {
+      if (this.shouldDisplayQuote) {
+        this.displayQuote = false
+      } else if (!this.quotedStatus) {
+        this.$store.dispatch('fetchStatus', this.status.quote_id)
+          .then(() => {
+            this.displayQuote = true
+          })
+      } else {
+        this.displayQuote = true
+      }
     }
   },
   watch: {
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index 448128675..ffa4f532c 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -1,5 +1,3 @@
-@import "../../variables";
-
 .Status {
   min-width: 0;
   white-space: normal;
@@ -12,24 +10,8 @@
     --_still-image-label-visibility: hidden;
   }
 
-  &.-focused {
-    background-color: $fallback--lightBg;
-    background-color: var(--selectedPost, $fallback--lightBg);
-    color: $fallback--text;
-    color: var(--selectedPostText, $fallback--text);
-
-    --lightText: var(--selectedPostLightText, $fallback--light);
-    --faint: var(--selectedPostFaintText, $fallback--faint);
-    --faintLink: var(--selectedPostFaintLink, $fallback--faint);
-    --postLink: var(--selectedPostPostLink, $fallback--faint);
-    --postFaintLink: var(--selectedPostFaintPostLink, $fallback--faint);
-    --icon: var(--selectedPostIcon, $fallback--icon);
-  }
-
   .gravestone {
-    padding: var(--status-margin, $status-margin);
-    color: $fallback--faint;
-    color: var(--faint, $fallback--faint);
+    padding: var(--status-margin);
     display: flex;
 
     .deleted-text {
@@ -40,7 +22,7 @@
 
   .status-container {
     display: flex;
-    padding: var(--status-margin, $status-margin);
+    padding: var(--status-margin);
 
     > * {
       min-width: 0;
@@ -52,7 +34,7 @@
   }
 
   .pin {
-    padding: var(--status-margin, $status-margin) var(--status-margin, $status-margin) 0;
+    padding: var(--status-margin) var(--status-margin) 0;
     display: flex;
     align-items: center;
     justify-content: flex-end;
@@ -68,7 +50,7 @@
   }
 
   .left-side {
-    margin-right: var(--status-margin, $status-margin);
+    margin-right: var(--status-margin);
   }
 
   .right-side {
@@ -77,7 +59,7 @@
   }
 
   .usercard {
-    margin-bottom: var(--status-margin, $status-margin);
+    margin-bottom: var(--status-margin);
   }
 
   .status-username {
@@ -90,7 +72,7 @@
     text-overflow: ellipsis;
 
     --_still_image-label-scale: 0.25;
-    --emoji-size: 14px;
+    --emoji-size: 1em;
   }
 
   .status-favicon {
@@ -135,11 +117,6 @@
     .button-unstyled {
       padding: 5px;
       margin: -5px;
-
-      &:hover svg {
-        color: $fallback--lightText;
-        color: var(--lightText, $fallback--lightText);
-      }
     }
 
     .svg-inline--fa {
@@ -243,16 +220,15 @@
   }
 
   .repeat-info {
-    padding: 0.4em var(--status-margin, $status-margin);
+    padding: 0.4em var(--status-margin);
 
     .repeat-icon {
-      color: $fallback--cGreen;
-      color: var(--cGreen, $fallback--cGreen);
+      color: var(--cGreen);
     }
   }
 
   .repeater-avatar {
-    border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
+    border-radius: var(--roundness);
     margin-left: 28px;
     width: 20px;
     height: 20px;
@@ -288,13 +264,11 @@
   .status-actions {
     position: relative;
     width: 100%;
-    display: flex;
-    margin-top: var(--status-margin, $status-margin);
-
-    > * {
-      max-width: 4em;
-      flex: 1;
-    }
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-auto-columns: 1fr;
+    grid-auto-flow: column;
+    margin-top: var(--status-margin);
   }
 
   .muted {
@@ -305,17 +279,13 @@
     overflow: hidden;
     display: flex;
     flex-wrap: nowrap;
+    gap: 1ex;
 
     & .status-username,
-    & .mute-thread,
-    & .mute-words {
+    & .mute-reason {
       word-wrap: normal;
       word-break: normal;
       white-space: nowrap;
-    }
-
-    & .status-username,
-    & .mute-words {
       text-overflow: ellipsis;
       overflow: hidden;
     }
@@ -325,19 +295,7 @@
       flex: 0 1 auto;
       margin-right: 0.2em;
       font-size: smaller;
-    }
-
-    .mute-thread {
-      flex: 0 0 auto;
-    }
-
-    .mute-words {
-      flex: 1 0 5em;
-      margin-left: 0.2em;
-
-      &::before {
-        content: " ";
-      }
+      display: flex;
     }
 
     .unmute {
@@ -357,7 +315,7 @@
   }
 
   .favs-repeated-users {
-    margin-top: var(--status-margin, $status-margin);
+    margin-top: var(--status-margin);
   }
 
   .stats {
@@ -368,10 +326,10 @@
 
   .avatar-row {
     flex: 1;
-    overflow: hidden;
     position: relative;
     display: flex;
     align-items: center;
+    overflow: hidden;
 
     &::before {
       content: "";
@@ -379,16 +337,16 @@
       height: 100%;
       width: 1px;
       left: 0;
-      background-color: var(--faint, $fallback--faint);
+      background-color: var(--textFaint);
     }
   }
 
   .stat-count {
-    margin-right: var(--status-margin, $status-margin);
+    margin-right: var(--status-margin);
     user-select: none;
 
     .stat-title {
-      color: var(--faint, $fallback--faint);
+      color: var(--textFaint);
       font-size: 0.85em;
       text-transform: uppercase;
       position: relative;
@@ -398,6 +356,7 @@
       font-weight: bolder;
       font-size: 1.1em;
       line-height: 1em;
+      color: var(--text);
     }
 
     &:hover .stat-title {
@@ -422,4 +381,22 @@
       }
     }
   }
+
+  .quoted-status {
+    margin-top: 0.5em;
+    border: 1px solid var(--border);
+    border-radius: var(--roundness);
+
+    &.-unavailable-prompt {
+      padding: 0.5em;
+    }
+  }
+
+  .display-quoted-status-button {
+    margin: 0.5em;
+
+    &-icon {
+      color: inherit;
+    }
+  }
 }
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 35b153627..c4dd52bf6 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -30,23 +30,8 @@
             :at="false"
           />
         </small>
-        <small
-          v-if="showReasonMutedThread"
-          class="mute-thread"
-        >
-          {{ $t('status.thread_muted') }}
-        </small>
-        <small
-          v-if="showReasonMutedThread && muteWordHits.length > 0"
-          class="mute-thread"
-        >
-          {{ $t('status.thread_muted_and_words') }}
-        </small>
-        <small
-          class="mute-words"
-          :title="muteWordHits.join(', ')"
-        >
-          {{ muteWordHits.join(', ') }}
+        <small class="mute-reason">
+          {{ muteLocalized }}
         </small>
         <button
           class="unmute button-unstyled"
@@ -79,8 +64,7 @@
         <UserAvatar
           v-if="retweet"
           class="left-side repeater-avatar"
-          :bot="rtBotIndicator"
-          :better-shadow="betterShadow"
+          :show-actor-type-indicator="showActorTypeIndicator"
           :user="statusoid.user"
         />
         <div class="right-side faint">
@@ -133,9 +117,8 @@
             >
               <UserAvatar
                 class="post-avatar"
-                :bot="botIndicator"
+                :show-actor-type-indicator="showActorTypeIndicator"
                 :compact="compact"
-                :better-shadow="betterShadow"
                 :user="status.user"
               />
             </UserPopover>
@@ -180,7 +163,7 @@
 
               <span class="heading-right">
                 <router-link
-                  class="timeago faint-link"
+                  class="timeago faint"
                   :to="{ name: 'conversation', params: { id: status.id } }"
                 >
                   <Timeago
@@ -249,6 +232,47 @@
                 </button>
               </span>
             </div>
+            <div
+              v-if="scrobblePresent"
+              class="status-rich-presence"
+            >
+              <a
+                v-if="scrobble.externalLink"
+                :href="scrobble.externalLink"
+                target="_blank"
+              >
+                {{ scrobble.artist }} — {{ scrobble.title }}
+                <FAIcon
+                  class="fa-scale-110 fa-old-padding"
+                  icon="play"
+                />
+                <span class="status-rich-presence-time">
+                  <Timeago
+                    template-key="time.in_past"
+                    :time="scrobble.created_at"
+                    :auto-update="60"
+                  />
+                </span>
+              </a>
+              <span v-if="!scrobble.externalLink">
+                <FAIcon
+                  class="fa-scale-110 fa-old-padding"
+                  icon="music"
+                />
+                {{ scrobble.artist }} — {{ scrobble.title }}
+                <FAIcon
+                  class="fa-scale-110 fa-old-padding"
+                  icon="play"
+                />
+                <span class="status-rich-presence-time">
+                  <Timeago
+                    template-key="time.in_past"
+                    :time="scrobble.created_at"
+                    :auto-update="60"
+                  />
+                </span>
+              </span>
+            </div>
             <div
               v-if="isReply || hasMentionsLine"
               class="heading-reply-row"
@@ -257,44 +281,61 @@
                 v-if="isReply"
                 class="glued-label reply-glued-label"
               >
-                <StatusPopover
-                  v-if="!isPreview"
-                  :status-id="status.parent_visible && status.in_reply_to_status_id"
-                  class="reply-to-popover"
-                  style="min-width: 0;"
-                  :class="{ '-strikethrough': !status.parent_visible }"
+                <i18n-t
+                  keypath="status.reply_to_with_arg"
+                  scope="global"
                 >
-                  <button
-                    class="button-unstyled reply-to"
-                    :aria-label="$t('tool_tip.reply')"
-                    @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
-                  >
-                    <FAIcon
-                      class="fa-scale-110 fa-old-padding"
-                      icon="reply"
-                      flip="horizontal"
-                    />
-                    {{ ' ' }}
-                    <span
-                      class="reply-to-text"
+                  <template #replyToWithIcon>
+                    <StatusPopover
+                      v-if="!isPreview"
+                      :status-id="status.parent_visible && status.in_reply_to_status_id"
+                      class="reply-to-popover"
+                      style="min-width: 0;"
+                      :class="{ '-strikethrough': !status.parent_visible }"
                     >
-                      {{ $t('status.reply_to') }}
-                    </span>
-                  </button>
-                </StatusPopover>
+                      <button
+                        class="button-unstyled reply-to"
+                        :aria-label="$t('tool_tip.reply')"
+                        @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
+                      >
+                        <i18n-t
+                          keypath="status.reply_to_with_icon"
+                          scope="global"
+                        >
+                          <template #icon>
+                            <FAIcon
+                              class="fa-scale-110 fa-old-padding"
+                              icon="reply"
+                              flip="horizontal"
+                            />
+                          </template>
+                          <template #replyTo>
+                            <span
+                              class="reply-to-text"
+                            >
+                              {{ $t('status.reply_to') }}
+                            </span>
+                          </template>
+                        </i18n-t>
+                      </button>
+                    </StatusPopover>
 
-                <span
-                  v-else
-                  class="reply-to-no-popover"
-                >
-                  <span class="reply-to-text">{{ $t('status.reply_to') }}</span>
-                </span>
-                <MentionLink
-                  :content="replyToName"
-                  :url="replyProfileLink"
-                  :user-id="status.in_reply_to_user_id"
-                  :user-screen-name="status.in_reply_to_screen_name"
-                />
+                    <span
+                      v-else
+                      class="reply-to-no-popover"
+                    >
+                      <span class="reply-to-text">{{ $t('status.reply_to') }}</span>
+                    </span>
+                  </template>
+                  <template #user>
+                    <MentionLink
+                      :content="replyToName"
+                      :url="replyProfileLink"
+                      :user-id="status.in_reply_to_user_id"
+                      :user-screen-name="status.in_reply_to_screen_name"
+                    />
+                  </template>
+                </i18n-t>
               </span>
 
               <!-- This little wrapper is made for sole purpose of "gluing" -->
@@ -332,6 +373,7 @@
               class="heading-edited-row"
             >
               <i18n-t
+                scope="global"
                 keypath="status.edited_at"
                 tag="span"
               >
@@ -364,17 +406,59 @@
             @parseReady="setHeadTailLinks"
           />
 
+          <article
+            v-if="hasVisibleQuote"
+            class="quoted-status"
+          >
+            <button
+              class="button-unstyled -link display-quoted-status-button"
+              :aria-expanded="shouldDisplayQuote"
+              @click="toggleDisplayQuote"
+            >
+              {{ shouldDisplayQuote ? $t('status.hide_quote') : $t('status.display_quote') }}
+              <FAIcon
+                class="display-quoted-status-button-icon"
+                :icon="shouldDisplayQuote ? 'chevron-up' : 'chevron-down'"
+              />
+            </button>
+            <Status
+              v-if="shouldDisplayQuote"
+              :statusoid="quotedStatus"
+              :in-quote="true"
+            />
+          </article>
+          <p
+            v-else-if="hasInvisibleQuote"
+            class="quoted-status -unavailable-prompt"
+          >
+            <i18n-t
+              scope="global"
+              keypath="status.invisible_quote"
+            >
+              <template #link>
+                <bdi>
+                  <a
+                    :href="status.quote_url"
+                    target="_blank"
+                  >
+                    {{ status.quote_url }}
+                  </a>
+                </bdi>
+              </template>
+            </i18n-t>
+          </p>
+
           <div
             v-if="inConversation && !isPreview && replies && replies.length"
             class="replies"
           >
             <button
               v-if="showOtherRepliesAsButton && replies.length > 1"
-              class="button-unstyled -link faint"
-              :title="$tc('status.ancestor_follow', replies.length - 1, { numReplies: replies.length - 1 })"
+              class="button-unstyled -link"
+              :title="$t('status.ancestor_follow', { numReplies: replies.length - 1 }, replies.length - 1)"
               @click.prevent="dive"
             >
-              {{ $tc('status.replies_list_with_others', replies.length - 1, { numReplies: replies.length - 1 }) }}
+              {{ $t('status.replies_list_with_others', { numReplies: replies.length - 1 }, replies.length - 1) }}
             </button>
             <span
               v-else
@@ -398,7 +482,7 @@
 
           <transition name="fade">
             <div
-              v-if="!hidePostStats && isFocused && combinedFavsAndRepeatsUsers.length > 0"
+              v-if="shouldDisplayFavsAndRepeats"
               class="favs-repeated-users"
             >
               <div class="stats">
@@ -426,6 +510,19 @@
                     </div>
                   </div>
                 </UserListPopover>
+                <router-link
+                  v-if="statusFromGlobalRepository.quotes_count > 0"
+                  :to="{ name: 'quotes', params: { id: status.id } }"
+                >
+                  <div
+                    class="stat-count"
+                  >
+                    <a class="stat-title">{{ $t('status.quotes') }}</a>
+                    <div class="stat-number">
+                      {{ statusFromGlobalRepository.quotes_count }}
+                    </div>
+                  </div>
+                </router-link>
                 <div class="avatar-row">
                   <AvatarList :users="combinedFavsAndRepeatsUsers" />
                 </div>
@@ -438,34 +535,12 @@
             :status="status"
           />
 
-          <div
+          <StatusActionButtons
             v-if="!noHeading && !isPreview"
-            class="status-actions"
-          >
-            <reply-button
-              :replying="replying"
-              :status="status"
-              @toggle="toggleReplying"
-            />
-            <retweet-button
-              :visibility="status.visibility"
-              :logged-in="loggedIn"
-              :status="status"
-            />
-            <favorite-button
-              :logged-in="loggedIn"
-              :status="status"
-            />
-            <ReactButton
-              v-if="loggedIn"
-              :status="status"
-            />
-            <extra-buttons
-              :status="status"
-              @onError="showError"
-              @onSuccess="clearError"
-            />
-          </div>
+            :status="status"
+            :replying="replying"
+            @toggleReplying="toggleReplying"
+          />
         </div>
       </div>
       <div
@@ -476,19 +551,13 @@
           <UserAvatar
             class="post-avatar"
             :compact="compact"
-            :bot="botIndicator"
+            :show-actor-type-indicator="showActorTypeIndicator"
           />
         </div>
         <div class="right-side">
           <div class="deleted-text">
             {{ $t('status.status_deleted') }}
           </div>
-          <reply-button
-            v-if="replying"
-            :replying="replying"
-            :status="status"
-            @toggle="toggleReplying"
-          />
         </div>
       </div>
       <div
@@ -496,13 +565,17 @@
         class="status-container reply-form"
       >
         <PostStatusForm
+          ref="postStatusForm"
           class="reply-body"
+          :closeable="true"
           :reply-to="status.id"
           :attentions="status.attentions"
           :replied-user="status.user"
           :copy-message-scope="status.visibility"
           :subject="replySubject"
-          @posted="toggleReplying"
+          @posted="doToggleReplying"
+          @draft-done="doToggleReplying"
+          @can-close="doToggleReplying"
         />
       </div>
     </template>
diff --git a/src/components/status_action_buttons/action_button.js b/src/components/status_action_buttons/action_button.js
new file mode 100644
index 000000000..32e3bd6e1
--- /dev/null
+++ b/src/components/status_action_buttons/action_button.js
@@ -0,0 +1,136 @@
+import StatusBookmarkFolderMenu from 'src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.vue'
+import EmojiPicker from 'src/components/emoji_picker/emoji_picker.vue'
+import Popover from 'src/components/popover/popover.vue'
+
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faPlus,
+  faMinus,
+  faCheck,
+  faTimes,
+  faWrench,
+
+  faChevronRight,
+  faChevronUp,
+
+  faReply,
+  faRetweet,
+  faStar,
+  faSmileBeam,
+
+  faBookmark,
+  faEyeSlash,
+  faThumbtack,
+  faShareAlt,
+  faExternalLinkAlt,
+  faHistory
+} from '@fortawesome/free-solid-svg-icons'
+import {
+  faStar as faStarRegular,
+  faBookmark as faBookmarkRegular
+} from '@fortawesome/free-regular-svg-icons'
+
+library.add(
+  faPlus,
+  faMinus,
+  faCheck,
+  faTimes,
+  faWrench,
+
+  faChevronRight,
+  faChevronUp,
+
+  faReply,
+  faRetweet,
+  faStar,
+  faStarRegular,
+  faSmileBeam,
+
+  faBookmark,
+  faBookmarkRegular,
+  faEyeSlash,
+  faThumbtack,
+  faShareAlt,
+  faExternalLinkAlt,
+  faHistory
+)
+
+export default {
+  props: [
+    'button',
+    'status',
+    'extra',
+    'status',
+    'funcArg',
+    'getClass',
+    'getComponent',
+    'doAction',
+    'close'
+  ],
+  components: {
+    StatusBookmarkFolderMenu,
+    EmojiPicker,
+    Popover
+  },
+  data: () => ({
+    animationState: false
+  }),
+  computed: {
+    buttonClass () {
+      return [
+        this.button.name + '-button',
+        {
+          '-with-extra': this.button.name === 'bookmark',
+          '-extra': this.extra,
+          '-quick': !this.extra
+        }
+      ]
+    },
+    userIsMuted () {
+      return this.$store.getters.relationship(this.status.user.id).muting
+    },
+    threadIsMuted () {
+      return this.status.thread_muted
+    },
+    hideCustomEmoji () {
+      return !this.$store.state.instance.pleromaCustomEmojiReactionsAvailable
+    },
+    buttonInnerClass () {
+      return [
+        this.button.name + '-button',
+        {
+          'main-button': this.extra,
+          'button-unstyled': !this.extra,
+          '-active': this.button.active?.(this.funcArg),
+          disabled: this.button.interactive ? !this.button.interactive(this.funcArg) : false
+        }
+      ]
+    },
+    remoteInteractionLink () {
+      return this.$store.getters.remoteInteractionLink({ statusId: this.status.id })
+    }
+  },
+  methods: {
+    addReaction (event) {
+      const emoji = event.insertion
+      const existingReaction = this.status.emoji_reactions.find(r => r.name === emoji)
+      if (existingReaction && existingReaction.me) {
+        this.$store.dispatch('unreactWithEmoji', { id: this.status.id, emoji })
+      } else {
+        this.$store.dispatch('reactWithEmoji', { id: this.status.id, emoji })
+      }
+    },
+    doActionWrap (button, close) {
+      if (button.name === 'emoji') {
+        this.$refs.picker.showPicker()
+      } else {
+        this.animationState = true
+        this.getComponent(button) === 'button' && this.doAction(button)
+        setTimeout(() => {
+          this.animationState = false
+        }, 500)
+        close()
+      }
+    }
+  }
+}
diff --git a/src/components/status_action_buttons/action_button.scss b/src/components/status_action_buttons/action_button.scss
new file mode 100644
index 000000000..bbd3f7af4
--- /dev/null
+++ b/src/components/status_action_buttons/action_button.scss
@@ -0,0 +1,105 @@
+@import "../../mixins";
+/* stylelint-disable declaration-no-important */
+
+.quick-action {
+  justify-content: space-between;
+  display: flex;
+  align-items: baseline;
+  align-items: center;
+  height: 1.5em;
+
+  .action-counter {
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    margin-left: 1em;
+  }
+
+  .action-button-inner,
+  .extra-button {
+    margin: -0.5em;
+    padding: 0.5em;
+  }
+
+  .separator {
+    display: block;
+    align-self: stretch;
+    width: 1px;
+    background-color: var(--icon);
+    margin-left: 1em;
+    margin-right: 0.5em;
+  }
+
+  &.-pin {
+    margin: calc(-2px - 0.25em);
+    padding: 0.25em;
+    border: 2px dashed var(--icon);
+    border-radius: var(--roundness);
+    grid-template-columns: minmax(max-content, 1fr) auto;
+
+    .chevron-icon,
+    .extra-button,
+    .separator {
+      display: none;
+    }
+  }
+
+  .action-button-inner {
+    display: grid;
+    grid-gap: 1em;
+    grid-template-columns: max-content;
+    grid-auto-flow: column;
+    grid-auto-columns: max-content;
+    align-items: center;
+
+    @include unfocused-style {
+      .focus-marker {
+        visibility: hidden;
+      }
+
+      .active-marker {
+        visibility: visible;
+      }
+    }
+
+    @include focused-style {
+      .focus-marker {
+        visibility: visible;
+      }
+
+      .active-marker {
+        visibility: hidden;
+      }
+    }
+  }
+}
+
+.action-button {
+  display: grid;
+  grid-auto-flow: column;
+  align-items: center;
+  padding: 0;
+
+  .action-button-inner {
+    &:hover,
+    &.-active {
+      &.reply-button:not(.disabled) {
+        .svg-inline--fa {
+          color: var(--cBlue);
+        }
+      }
+
+      &.retweet-button:not(.disabled) {
+        .svg-inline--fa {
+          color: var(--cGreen);
+        }
+      }
+
+      &.favorite-button:not(.disabled) {
+        .svg-inline--fa {
+          color: var(--cOrange);
+        }
+      }
+    }
+  }
+}
diff --git a/src/components/status_action_buttons/action_button.vue b/src/components/status_action_buttons/action_button.vue
new file mode 100644
index 000000000..105af5caf
--- /dev/null
+++ b/src/components/status_action_buttons/action_button.vue
@@ -0,0 +1,108 @@
+<template>
+  <div
+    class="action-button"
+    :class="buttonClass"
+  >
+    <component
+      :is="getComponent(button)"
+      class="action-button-inner"
+      :class="buttonInnerClass"
+      role="menuitem"
+      type="button"
+      :title="$t(button.label(funcArg))"
+      target="_blank"
+      :tabindex="0"
+      :disabled="buttonClass.disabled"
+      :href="getComponent(button) == 'a' ? button.link?.(funcArg) || remoteInteractionLink : undefined"
+      @click="doActionWrap(button, close)"
+    >
+      <FALayers>
+        <FAIcon
+          class="fa-scale-110"
+          :icon="button.icon(funcArg)"
+          :spin="!extra && getComponent(button) == 'button' && button.animated?.() && animationState"
+          :style="{ '--fa-animation-duration': '750ms' }"
+          fixed-width
+        />
+        <template v-if="!buttonClass.disabled && button.toggleable?.(funcArg) && button.active">
+          <FAIcon
+            v-if="button.active(funcArg)"
+            class="active-marker"
+            transform="shrink-6 up-9 right-15"
+            :icon="button.activeIndicator?.(funcArg) || 'check'"
+          />
+          <FAIcon
+            v-if="!button.active(funcArg)"
+            class="focus-marker"
+            transform="shrink-6 up-9 right-15"
+            :icon="button.openIndicator?.(funcArg) || 'plus'"
+          />
+          <FAIcon
+            v-else
+            class="focus-marker"
+            transform="shrink-6 up-9 right-15"
+            :icon="button.closeIndicator?.(funcArg) || 'minus'"
+          />
+        </template>
+      </FALayers>
+      <span
+        v-if="extra"
+        class="action-label"
+      >
+        {{ $t(button.label(funcArg)) }}
+      </span>
+      <FAIcon
+        v-if="button.dropdown?.()"
+        class="chevron-icon"
+        size="lg"
+        :icon="extra ? 'chevron-right' : 'chevron-up'"
+        fixed-width
+      />
+    </component>
+    <span
+      v-if="!extra && button.counter?.(funcArg) > 0"
+      class="action-counter"
+    >
+      {{ button.counter?.(funcArg) }}
+    </span>
+    <span
+      v-if="!extra && button.name === 'bookmark'"
+      class="separator"
+    />
+    <Popover
+      v-if="button.name === 'bookmark'"
+      :trigger="extra ? 'hover' : 'click'"
+      :placement="extra ? 'right' : 'top'"
+      :offset="extra ? { x: 10 } : { y: 10 }"
+      :trigger-attrs="{ class: 'extra-button' }"
+    >
+      <template #trigger>
+        <FAIcon
+          class="chevron-icon"
+          size="lg"
+          :icon="extra ? 'chevron-right' : 'chevron-up'"
+          fixed-width
+        />
+      </template>
+      <template #content>
+        <StatusBookmarkFolderMenu
+          v-if="button.name === 'bookmark'"
+          :status="status"
+        />
+      </template>
+    </Popover>
+
+    <EmojiPicker
+      v-if="button.name === 'emoji'"
+      ref="picker"
+      :enable-sticker-picker="false"
+      :hide-custom-emoji="hideCustomEmoji"
+      class="emoji-picker-panel"
+      @emoji="addReaction"
+    />
+  </div>
+</template>
+
+<script src="./action_button.js" />
+
+<style lang="scss" src="./action_button.scss" />
diff --git a/src/components/status_action_buttons/action_button_container.js b/src/components/status_action_buttons/action_button_container.js
new file mode 100644
index 000000000..bd91b9404
--- /dev/null
+++ b/src/components/status_action_buttons/action_button_container.js
@@ -0,0 +1,89 @@
+import ActionButton from './action_button.vue'
+import Popover from 'src/components/popover/popover.vue'
+import MuteConfirm from 'src/components/confirm_modal/mute_confirm.vue'
+
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faUser,
+  faGlobe,
+  faFolderTree
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faUser,
+  faGlobe,
+  faFolderTree
+)
+
+export default {
+  components: {
+    ActionButton,
+    Popover,
+    MuteConfirm
+  },
+  props: ['button', 'status'],
+  mounted () {
+    if (this.button.name === 'mute') {
+      this.$store.dispatch('fetchDomainMutes')
+    }
+  },
+  computed: {
+    buttonClass () {
+      return [
+        this.button.name + '-button',
+        {
+          '-with-extra': this.button.name === 'bookmark',
+          '-extra': this.extra,
+          '-quick': !this.extra
+        }
+      ]
+    },
+    user () {
+      return this.status.user
+    },
+    userIsMuted () {
+      return this.$store.getters.relationship(this.user.id).muting
+    },
+    conversationIsMuted () {
+      return this.status.thread_muted
+    },
+    domain () {
+      return this.user.fqn.split('@')[1]
+    },
+    domainIsMuted () {
+      return new Set(this.$store.state.users.currentUser.domainMutes).has(this.domain)
+    }
+  },
+  methods: {
+    unmuteUser () {
+      return this.$store.dispatch('unmuteUser', this.user.id)
+    },
+    unmuteConversation () {
+      return this.$store.dispatch('unmuteConversation', { id: this.status.id })
+    },
+    unmuteDomain () {
+      return this.$store.dispatch('unmuteDomain', this.user.id)
+    },
+    toggleUserMute () {
+      if (this.userIsMuted) {
+        this.unmuteUser()
+      } else {
+        this.$refs.confirmUser.optionallyPrompt()
+      }
+    },
+    toggleConversationMute () {
+      if (this.conversationIsMuted) {
+        this.unmuteConversation()
+      } else {
+        this.$refs.confirmConversation.optionallyPrompt()
+      }
+    },
+    toggleDomainMute () {
+      if (this.domainIsMuted) {
+        this.unmuteDomain()
+      } else {
+        this.$refs.confirmDomain.optionallyPrompt()
+      }
+    }
+  }
+}
diff --git a/src/components/status_action_buttons/action_button_container.vue b/src/components/status_action_buttons/action_button_container.vue
new file mode 100644
index 000000000..deada02ae
--- /dev/null
+++ b/src/components/status_action_buttons/action_button_container.vue
@@ -0,0 +1,106 @@
+<template>
+  <div>
+    <Popover
+      v-if="button.dropdown?.()"
+      :trigger="$attrs.extra ? 'hover' : 'click'"
+      :offset="{ y: 5 }"
+      :placement="$attrs.extra ? 'right' : 'top'"
+    >
+      <template #trigger>
+        <ActionButton
+          :button="button"
+          :status="status"
+          v-bind.prop="$attrs"
+        />
+      </template>
+      <template #content>
+        <div
+          v-if="button.name === 'mute'"
+          :id="`popup-menu-${randomSeed}`"
+          class="dropdown-menu"
+          role="menu"
+        >
+          <div class="menu-item dropdown-item extra-action -icon">
+            <button
+              class="main-button"
+              @click="toggleUserMute"
+            >
+              <FAIcon
+                icon="user"
+                fixed-width
+              />
+              <template v-if="userIsMuted">
+                {{ $t('status.unmute_user') }}
+              </template>
+              <template v-else>
+                {{ $t('status.mute_user') }}
+              </template>
+            </button>
+          </div>
+          <div class="menu-item dropdown-item extra-action -icon">
+            <button
+              class="main-button"
+              @click="toggleConversationMute"
+            >
+              <FAIcon
+                icon="folder-tree"
+                fixed-width
+              />
+              <template v-if="conversationIsMuted">
+                {{ $t('status.unmute_conversation') }}
+              </template>
+              <template v-else>
+                {{ $t('status.mute_conversation') }}
+              </template>
+            </button>
+          </div>
+          <div class="menu-item dropdown-item extra-action -icon">
+            <button
+              class="main-button"
+              @click="toggleDomainMute"
+            >
+              <FAIcon
+                icon="globe"
+                fixed-width
+              />
+              <template v-if="domainIsMuted">
+                {{ $t('status.unmute_domain') }}
+              </template>
+              <template v-else>
+                {{ $t('status.mute_domain') }}
+              </template>
+            </button>
+          </div>
+        </div>
+      </template>
+    </Popover>
+    <ActionButton
+      v-else
+      :button="button"
+      :status="status"
+      v-bind="$attrs"
+    />
+    <teleport to="#modal">
+      <MuteConfirm
+        ref="confirmConversation"
+        type="conversation"
+        :status="status"
+        :user="user"
+      />
+      <MuteConfirm
+        ref="confirmDomain"
+        type="domain"
+        :status="status"
+        :user="user"
+      />
+      <MuteConfirm
+        ref="confirmUser"
+        type="user"
+        :status="status"
+        :user="user"
+      />
+    </teleport>
+  </div>
+</template>
+
+<script src="./action_button_container.js" />
diff --git a/src/components/status_action_buttons/buttons_definitions.js b/src/components/status_action_buttons/buttons_definitions.js
new file mode 100644
index 000000000..9013981c0
--- /dev/null
+++ b/src/components/status_action_buttons/buttons_definitions.js
@@ -0,0 +1,228 @@
+const PRIVATE_SCOPES = new Set(['private', 'direct'])
+const PUBLIC_SCOPES = new Set(['public', 'unlisted'])
+export const BUTTONS = [{
+  // =========
+  // REPLY
+  // =========
+  name: 'reply',
+  label: 'tool_tip.reply',
+  icon: 'reply',
+  active: ({ replying }) => replying,
+  counter: ({ status }) => status.replies_count,
+  anon: true,
+  anonLink: true,
+  toggleable: true,
+  closeIndicator: 'times',
+  activeIndicator: 'none',
+  action ({ emit }) {
+    emit('toggleReplying')
+    return Promise.resolve()
+  }
+}, {
+  // =========
+  // REPEAT
+  // =========
+  name: 'retweet',
+  label: ({ status }) => status.repeated
+    ? 'tool_tip.unrepeat'
+    : 'tool_tip.repeat',
+  icon ({ status }) {
+    if (PRIVATE_SCOPES.has(status.visibility)) {
+      return 'lock'
+    }
+    return 'retweet'
+  },
+  animated: true,
+  active: ({ status }) => status.repeated,
+  counter: ({ status }) => status.repeat_num,
+  anonLink: true,
+  interactive: ({ status, loggedIn }) => loggedIn && !PRIVATE_SCOPES.has(status.visibility),
+  toggleable: true,
+  confirm: ({ status, getters }) => !status.repeated && getters.mergedConfig.modalOnRepeat,
+  confirmStrings: {
+    title: 'status.repeat_confirm_title',
+    body: 'status.repeat_confirm',
+    confirm: 'status.repeat_confirm_accept_button',
+    cancel: 'status.repeat_confirm_cancel_button'
+  },
+  action ({ status, dispatch }) {
+    if (!status.repeated) {
+      return dispatch('retweet', { id: status.id })
+    } else {
+      return dispatch('unretweet', { id: status.id })
+    }
+  }
+}, {
+  // =========
+  // FAVORITE
+  // =========
+  name: 'favorite',
+  label: ({ status }) => status.favorited
+    ? 'tool_tip.unfavorite'
+    : 'tool_tip.favorite',
+  icon: ({ status }) => status.favorited
+    ? ['fas', 'star']
+    : ['far', 'star'],
+  animated: true,
+  active: ({ status }) => status.favorited,
+  counter: ({ status }) => status.fave_num,
+  anonLink: true,
+  toggleable: true,
+  action ({ status, dispatch }) {
+    if (!status.favorited) {
+      return dispatch('favorite', { id: status.id })
+    } else {
+      return dispatch('unfavorite', { id: status.id })
+    }
+  }
+}, {
+  // =========
+  // EMOJI REACTIONS
+  // =========
+  name: 'emoji',
+  label: 'tool_tip.add_reaction',
+  icon: ['far', 'smile-beam'],
+  anonLink: true
+}, {
+  // =========
+  // MUTE
+  // =========
+  name: 'mute',
+  icon: 'eye-slash',
+  label: 'status.mute_ellipsis',
+  if: ({ loggedIn }) => loggedIn,
+  toggleable: true,
+  dropdown: true
+  // action ({ status, dispatch, emit }) {
+  // }
+}, {
+  // =========
+  // PIN STATUS
+  // =========
+  name: 'pin',
+  icon: 'thumbtack',
+  label: ({ status }) => status.pinned
+    ? 'status.unpin'
+    : 'status.pin',
+  if ({ status, loggedIn, currentUser }) {
+    return loggedIn &&
+      status.user.id === currentUser.id &&
+      PUBLIC_SCOPES.has(status.visibility)
+  },
+  action ({ status, dispatch, emit }) {
+    if (status.pinned) {
+      return dispatch('unpinStatus', { id: status.id })
+    } else {
+      return dispatch('pinStatus', { id: status.id })
+    }
+  }
+}, {
+  // =========
+  // BOOKMARK
+  // =========
+  name: 'bookmark',
+  icon: ({ status }) => status.bookmarked
+    ? ['fas', 'bookmark']
+    : ['far', 'bookmark'],
+  toggleable: true,
+  active: ({ status }) => status.bookmarked,
+  label: ({ status }) => status.bookmarked
+    ? 'status.unbookmark'
+    : 'status.bookmark',
+  if: ({ loggedIn }) => loggedIn,
+  action ({ status, dispatch, emit }) {
+    if (status.bookmarked) {
+      return dispatch('unbookmark', { id: status.id })
+    } else {
+      return dispatch('bookmark', { id: status.id })
+    }
+  }
+}, {
+  // =========
+  // EDIT
+  // =========
+  name: 'edit',
+  icon: 'pen',
+  label: 'status.edit',
+  if ({ status, loggedIn, currentUser, state }) {
+    return loggedIn &&
+      state.instance.editingAvailable &&
+      status.user.id === currentUser.id
+  },
+  action ({ dispatch, status }) {
+    return dispatch('fetchStatusSource', { id: status.id })
+      .then(data => dispatch('openEditStatusModal', {
+        statusId: status.id,
+        subject: data.spoiler_text,
+        statusText: data.text,
+        statusIsSensitive: status.nsfw,
+        statusPoll: status.poll,
+        statusFiles: [...status.attachments],
+        visibility: status.visibility,
+        statusContentType: data.content_type
+      }))
+  }
+}, {
+  // =========
+  // DELETE
+  // =========
+  name: 'delete',
+  icon: 'times',
+  label: 'status.delete',
+  if ({ status, loggedIn, currentUser }) {
+    return loggedIn && (
+      status.user.id === currentUser.id ||
+        currentUser.privileges.includes('messages_delete')
+    )
+  },
+  confirm: ({ status, getters }) => getters.mergedConfig.modalOnDelete,
+  confirmStrings: {
+    title: 'status.delete_confirm_title',
+    body: 'status.delete_confirm',
+    confirm: 'status.delete_confirm_accept_button',
+    cancel: 'status.delete_confirm_cancel_button'
+  },
+  action ({ dispatch, status }) {
+    return dispatch('deleteStatus', { id: status.id })
+  }
+}, {
+  // =========
+  // SHARE/COPY
+  // =========
+  name: 'share',
+  icon: 'share-alt',
+  label: 'status.copy_link',
+  action ({ state, status, router }) {
+    navigator.clipboard.writeText([
+      state.instance.server,
+      router.resolve({ name: 'conversation', params: { id: status.id } }).href
+    ].join(''))
+    return Promise.resolve()
+  }
+}, {
+  // =========
+  // EXTERNAL
+  // =========
+  name: 'external',
+  icon: 'external-link-alt',
+  label: 'status.external_source',
+  link: ({ status }) => status.external_url
+}, {
+  // =========
+  // REPORT
+  // =========
+  name: 'report',
+  icon: 'flag',
+  label: 'user_card.report',
+  if: ({ loggedIn }) => loggedIn,
+  action ({ dispatch, status }) {
+    dispatch('openUserReportingModal', { userId: status.user.id, statusIds: [status.id] })
+  }
+}].map(button => {
+  return Object.fromEntries(
+    Object.entries(button).map(([k, v]) => [
+      k,
+      (typeof v === 'function' || k === 'name') ? v : () => v
+    ])
+  )
+})
diff --git a/src/components/status_action_buttons/status_action_buttons.js b/src/components/status_action_buttons/status_action_buttons.js
new file mode 100644
index 000000000..622f21ca5
--- /dev/null
+++ b/src/components/status_action_buttons/status_action_buttons.js
@@ -0,0 +1,132 @@
+import { mapState } from 'vuex'
+
+import ConfirmModal from 'src/components/confirm_modal/confirm_modal.vue'
+import ActionButtonContainer from './action_button_container.vue'
+import Popover from 'src/components/popover/popover.vue'
+import genRandomSeed from 'src/services/random_seed/random_seed.service.js'
+
+import { BUTTONS } from './buttons_definitions.js'
+
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faEllipsisH
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faEllipsisH
+)
+
+const StatusActionButtons = {
+  props: ['status', 'replying'],
+  emits: ['toggleReplying'],
+  data () {
+    return {
+      showPin: false,
+      showingConfirmDialog: false,
+      currentConfirmTitle: '',
+      currentConfirmOkText: '',
+      currentConfirmCancelText: '',
+      currentConfirmAction: () => {},
+      randomSeed: genRandomSeed()
+    }
+  },
+  components: {
+    Popover,
+    ConfirmModal,
+    ActionButtonContainer
+  },
+  computed: {
+    ...mapState({
+      pinnedItems: state => new Set(state.serverSideStorage.prefsStorage.collections.pinnedStatusActions)
+    }),
+    buttons () {
+      return BUTTONS.filter(x => x.if ? x.if(this.funcArg) : true)
+    },
+    quickButtons () {
+      return this.buttons.filter(x => this.pinnedItems.has(x.name))
+    },
+    extraButtons () {
+      return this.buttons.filter(x => !this.pinnedItems.has(x.name))
+    },
+    currentUser () {
+      return this.$store.state.users.currentUser
+    },
+    funcArg () {
+      return {
+        status: this.status,
+        replying: this.replying,
+        emit: this.$emit,
+        dispatch: this.$store.dispatch,
+        state: this.$store.state,
+        getters: this.$store.getters,
+        router: this.$router,
+        currentUser: this.currentUser,
+        loggedIn: !!this.currentUser
+      }
+    },
+    triggerAttrs () {
+      return {
+        title: this.$t('status.more_actions'),
+        'aria-controls': `popup-menu-${this.randomSeed}`,
+        'aria-haspopup': 'menu'
+      }
+    }
+  },
+  methods: {
+    doAction (button) {
+      if (button.confirm?.(this.funcArg)) {
+        // TODO move to action_button
+        this.currentConfirmTitle = this.$t(button.confirmStrings(this.funcArg).title)
+        this.currentConfirmOkText = this.$t(button.confirmStrings(this.funcArg).confirm)
+        this.currentConfirmCancelText = this.$t(button.confirmStrings(this.funcArg).cancel)
+        this.currentConfirmBody = this.$t(button.confirmStrings(this.funcArg).body)
+        this.currentConfirmAction = () => {
+          this.showingConfirmDialog = false
+          this.doActionReal(button)
+        }
+        this.showingConfirmDialog = true
+      } else {
+        this.doActionReal(button)
+      }
+    },
+    doActionReal (button) {
+      button.action(this.funcArg)
+        .then(() => this.$emit('onSuccess'))
+        .catch(err => this.$emit('onError', err.error.error))
+    },
+    onExtraClose () {
+      this.showPin = false
+    },
+    isPinned (button) {
+      return this.pinnedItems.has(button.name)
+    },
+    unpin (button) {
+      this.$store.commit('removeCollectionPreference', { path: 'collections.pinnedStatusActions', value: button.name })
+      this.$store.dispatch('pushServerSideStorage')
+    },
+    pin (button) {
+      this.$store.commit('addCollectionPreference', { path: 'collections.pinnedStatusActions', value: button.name })
+      this.$store.dispatch('pushServerSideStorage')
+    },
+    getComponent (button) {
+      if (!this.$store.state.users.currentUser && button.anonLink) {
+        return 'a'
+      } else if (button.action == null && button.link != null) {
+        return 'a'
+      } else {
+        return 'button'
+      }
+    },
+    getClass (button) {
+      return {
+        [button.name + '-button']: true,
+        disabled: button.interactive ? !button.interactive(this.funcArg) : false,
+        '-pin-edit': this.showPin,
+        '-dropdown': button.dropdown?.(),
+        '-active': button.active?.(this.funcArg)
+      }
+    }
+  }
+}
+
+export default StatusActionButtons
diff --git a/src/components/status_action_buttons/status_action_buttons.scss b/src/components/status_action_buttons/status_action_buttons.scss
new file mode 100644
index 000000000..018ff34d9
--- /dev/null
+++ b/src/components/status_action_buttons/status_action_buttons.scss
@@ -0,0 +1,26 @@
+@import "../../mixins";
+
+.StatusActionButtons {
+  .quick-action-buttons {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, 4em);
+    grid-auto-flow: row dense;
+    grid-auto-rows: 1fr;
+    grid-gap: 1.25em 1em;
+    margin-top: var(--status-margin);
+  }
+
+  .pin-action-button {
+    margin: -0.5em;
+    padding: 0.5em;
+  }
+}
+// popover
+.extra-action-buttons {
+  .extra-action {
+    margin: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+    padding-right: 0;
+  }
+}
diff --git a/src/components/status_action_buttons/status_action_buttons.vue b/src/components/status_action_buttons/status_action_buttons.vue
new file mode 100644
index 000000000..bcd16b11b
--- /dev/null
+++ b/src/components/status_action_buttons/status_action_buttons.vue
@@ -0,0 +1,131 @@
+<template>
+  <div class="StatusActionButtons">
+    <span class="quick-action-buttons">
+      <span
+        v-for="button in quickButtons"
+        :key="button.name"
+        class="quick-action"
+        :class="{ '-pin': showPin, '-toggle': button.dropdown?.() }"
+      >
+        <ActionButtonContainer
+          :class="{ '-pin': showPin }"
+          :button="button"
+          :status="status"
+          :extra="false"
+          :func-arg="funcArg"
+          :get-class="getClass"
+          :get-component="getComponent"
+          :close="() => {}"
+          :do-action="doAction"
+        />
+        <button
+          v-if="showPin && currentUser"
+          type="button"
+          class="button-unstyled pin-action-button"
+          :title="$t('general.unpin')"
+          :aria-pressed="true"
+          @click.stop.prevent="unpin(button)"
+        >
+          <FAIcon
+            v-if="showPin && currentUser"
+            fixed-width
+            class="fa-scale-110"
+            icon="thumbtack"
+          />
+        </button>
+      </span>
+      <Popover
+        trigger="click"
+        :trigger-attrs="triggerAttrs"
+        :tabindex="0"
+        placement="top"
+        :offset="{ y: 5 }"
+        remove-padding
+        @close="onExtraClose"
+      >
+        <template #trigger>
+          <FAIcon
+            class="fa-scale-110 "
+            icon="ellipsis-h"
+          />
+        </template>
+        <template #content="{close, resize}">
+          <div
+            :id="`popup-menu-${randomSeed}`"
+            class="dropdown-menu extra-action-buttons"
+            role="menu"
+          >
+            <div
+              v-if="currentUser"
+              class="menu-item dropdown-item extra-action -icon"
+            >
+              <button
+                class="main-button"
+                role="menuitem"
+                :tabindex="0"
+                @click.stop="() => { resize(); showPin = !showPin }"
+              >
+                <FAIcon
+                  class="fa-scale-110"
+                  fixed-width
+                  icon="wrench"
+                /><span>{{ $t('nav.edit_pinned') }}</span>
+              </button>
+            </div>
+            <div
+              v-for="button in extraButtons"
+              :key="button.name"
+              class="menu-item dropdown-item extra-action -icon"
+              :disabled="getClass(button).disabled"
+              :class="{ disabled: getClass(button).disabled }"
+            >
+              <ActionButtonContainer
+                :button="button"
+                :status="status"
+                :extra="true"
+                :func-arg="funcArg"
+                :get-class="getClass"
+                :get-component="getComponent"
+                :close="close"
+                :do-action="doAction"
+              />
+              <button
+                v-if="showPin && currentUser"
+                type="button"
+                class="button-unstyled pin-action-button extra-button"
+                :title="$t('general.pin')"
+                :aria-pressed="false"
+                @click.stop.prevent="pin(button)"
+              >
+                <FAIcon
+                  v-if="showPin && currentUser"
+                  fixed-width
+                  class="fa-scale-110"
+                  transform="rotate-45"
+                  icon="thumbtack"
+                />
+              </button>
+            </div>
+          </div>
+        </template>
+      </Popover>
+    </span>
+
+    <teleport to="#modal">
+      <confirm-modal
+        v-if="showingConfirmDialog"
+        :title="currentConfirmTitle"
+        :confirm-text="currentConfirmOkText"
+        :cancel-text="currentConfirmCancelText"
+        @accepted="currentConfirmAction"
+        @cancelled="showingConfirmDialog = false"
+      >
+        {{ currentConfirmBody }}
+      </confirm-modal>
+    </teleport>
+  </div>
+</template>
+
+<script src="./status_action_buttons.js"></script>
+
+<style lang="scss" src="./status_action_buttons.scss"></style>
diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss
index 8fd60afc3..cc66dc5a7 100644
--- a/src/components/status_body/status_body.scss
+++ b/src/components/status_body/status_body.scss
@@ -1,5 +1,3 @@
-@import "../../variables";
-
 .StatusBody {
   display: flex;
   flex-direction: column;
@@ -14,7 +12,6 @@
 
   & .text,
   & .summary {
-    font-family: var(--postFont, sans-serif);
     white-space: pre-wrap;
     overflow-wrap: break-word;
     word-wrap: break-word;
@@ -41,7 +38,7 @@
     margin-bottom: 0.5em;
     border-style: solid;
     border-width: 0 0 1px;
-    border-color: var(--border, $fallback--border);
+    border-color: var(--border);
     flex-grow: 0;
 
     &.-tall {
@@ -112,20 +109,11 @@
     }
   }
 
-  .greentext {
-    color: $fallback--cGreen;
-    color: var(--postGreentext, $fallback--cGreen);
-  }
-
-  .cyantext {
-    color: var(--postCyantext, $fallback--cBlue);
-  }
-
   &.-compact {
     align-items: top;
     flex-direction: row;
 
-    --emoji-size: 16px;
+    --emoji-size: calc(var(--emojiSize, 32px) / 2);
 
     & .body,
     & .attachments {
diff --git a/src/components/status_body/status_body.vue b/src/components/status_body/status_body.vue
index fb3563604..f21bcc80e 100644
--- a/src/components/status_body/status_body.vue
+++ b/src/components/status_body/status_body.vue
@@ -11,6 +11,7 @@
       >
         <RichContent
           class="media-body summary"
+          :faint="compact"
           :html="status.summary_raw_html"
           :emoji="status.emojis"
         />
@@ -48,6 +49,7 @@
           :html="status.raw_html"
           :emoji="status.emojis"
           :handle-links="true"
+          :faint="compact"
           :greentext="mergedConfig.greentext"
           :attentions="status.attentions"
           @parseReady="onParseReady"
diff --git a/src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.js b/src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.js
new file mode 100644
index 000000000..50bcb0ca3
--- /dev/null
+++ b/src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.js
@@ -0,0 +1,38 @@
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faChevronRight, faFolder } from '@fortawesome/free-solid-svg-icons'
+import { mapState } from 'vuex'
+
+import Popover from '../popover/popover.vue'
+
+library.add(faChevronRight, faFolder)
+
+const StatusBookmarkFolderMenu = {
+  props: [
+    'status'
+  ],
+  data () {
+    return {}
+  },
+  components: {
+    Popover
+  },
+  computed: {
+    ...mapState({
+      folders: state => state.bookmarkFolders.allFolders
+    }),
+    folderId () {
+      return this.status.bookmark_folder_id
+    }
+  },
+  methods: {
+    toggleFolder (id) {
+      const value = id === this.folderId ? null : id
+
+      this.$store.dispatch('bookmark', { id: this.status.id, bookmark_folder_id: value })
+        .then(() => this.$emit('onSuccess'))
+        .catch(err => this.$emit('onError', err.error.error))
+    }
+  }
+}
+
+export default StatusBookmarkFolderMenu
diff --git a/src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.vue b/src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.vue
new file mode 100644
index 000000000..75f389946
--- /dev/null
+++ b/src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="dropdown-menu">
+    <div
+      v-for="folder in folders"
+      :key="folder.id"
+      class="menu-item dropdown-item -icon"
+    >
+      <button
+        class="main-button"
+        @click="toggleFolder(folder.id)"
+      >
+        <span
+          class="input menu-checkbox -radio"
+          :class="{ 'menu-checkbox-checked': status.bookmark_folder_id == folder.id }"
+        />
+        {{ folder.name }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script src="./status_bookmark_folder_menu.js"></script>
diff --git a/src/components/status_content/status_content.js b/src/components/status_content/status_content.js
index af62f9e14..b060e8899 100644
--- a/src/components/status_content/status_content.js
+++ b/src/components/status_content/status_content.js
@@ -74,6 +74,10 @@ const StatusContent = {
   },
   computed: {
     ...controlledOrUncontrolledGetters(['showingTall', 'expandingSubject', 'showingLongSubject']),
+    statusCard () {
+      if (!this.status.card) return null
+      return this.status.card.url === this.status.quote_url ? null : this.status.card
+    },
     hideAttachments () {
       return (this.mergedConfig.hideAttachments && !this.inConversation) ||
         (this.mergedConfig.hideAttachmentsInConv && this.inConversation)
@@ -87,6 +91,9 @@ const StatusContent = {
       }
       return true
     },
+    localCollapseSubjectDefault () {
+      return this.mergedConfig.collapseMessageWithSubject
+    },
     attachmentSize () {
       if (this.compact) {
         return 'small'
diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue
index c0e5c0b9d..e977d489e 100644
--- a/src/components/status_content/status_content.vue
+++ b/src/components/status_content/status_content.vue
@@ -43,7 +43,7 @@
       />
 
       <div
-        v-if="status.card && !noHeading && !compact"
+        v-if="statusCard && !noHeading && !compact"
         class="link-preview media-body"
       >
         <link-preview
diff --git a/src/components/status_history_modal/status_history_modal.vue b/src/components/status_history_modal/status_history_modal.vue
index 79642e9c8..d89f49599 100644
--- a/src/components/status_history_modal/status_history_modal.vue
+++ b/src/components/status_history_modal/status_history_modal.vue
@@ -6,7 +6,9 @@
   >
     <div class="status-history-modal-panel panel">
       <div class="panel-heading">
-        {{ $t('status.status_history') }} ({{ historyCount }})
+        <h1 class="title">
+          {{ $t('status.status_history') }} ({{ historyCount }})
+        </h1>
       </div>
       <div class="panel-body">
         <div
diff --git a/src/components/status_popover/status_popover.vue b/src/components/status_popover/status_popover.vue
index 311ca0998..839f82e90 100644
--- a/src/components/status_popover/status_popover.vue
+++ b/src/components/status_popover/status_popover.vue
@@ -40,19 +40,14 @@
 <script src="./status_popover.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 /* popover styles load on-demand, so we need to override */
 .status-popover.popover {
   font-size: 1rem;
   min-width: 15em;
   max-width: 95%;
-  border-color: $fallback--border;
-  border-color: var(--border, $fallback--border);
+  border-color: var(--border);
   border-style: solid;
   border-width: 1px;
-  border-radius: $fallback--tooltipRadius;
-  border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
 
   /* TODO cleanup this */
   .Status.Status {
diff --git a/src/components/sticker_picker/sticker_picker.vue b/src/components/sticker_picker/sticker_picker.vue
index 904853c0d..6678132e9 100644
--- a/src/components/sticker_picker/sticker_picker.vue
+++ b/src/components/sticker_picker/sticker_picker.vue
@@ -32,8 +32,6 @@
 <script src="./sticker_picker.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .sticker-picker {
   width: 100%;
 
@@ -56,7 +54,7 @@
           height: 100%;
 
           &:hover {
-            filter: drop-shadow(0 0 5px var(--accent, $fallback--link));
+            filter: drop-shadow(0 0 5px var(--accent));
           }
         }
       }
diff --git a/src/components/still-image/still-image.vue b/src/components/still-image/still-image.vue
index fc46fbe63..57633827e 100644
--- a/src/components/still-image/still-image.vue
+++ b/src/components/still-image/still-image.vue
@@ -28,8 +28,6 @@
 <script src="./still-image.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .still-image {
   position: relative;
   line-height: 0;
@@ -68,8 +66,7 @@
       color: #fff;
       display: block;
       padding: 2px 4px;
-      border-radius: $fallback--tooltipRadius;
-      border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
+      border-radius: var(--roundness);
       z-index: 2;
       visibility: var(--_still-image-label-visibility, visible);
     }
diff --git a/src/components/tab_switcher/tab.style.js b/src/components/tab_switcher/tab.style.js
new file mode 100644
index 000000000..814d33047
--- /dev/null
+++ b/src/components/tab_switcher/tab.style.js
@@ -0,0 +1,78 @@
+export default {
+  name: 'Tab', // Name of the component
+  selector: '.tab', // CSS selector/prefix
+  states: {
+    active: '.active',
+    hover: ':hover:not(.disabled)',
+    disabled: '.disabled'
+  },
+  validInnerComponents: [
+    'Text',
+    'Icon'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        background: '--fg',
+        shadow: ['--buttonDefaultShadow', '--buttonDefaultBevel'],
+        roundness: 3
+      }
+    },
+    {
+      state: ['hover'],
+      directives: {
+        shadow: ['--buttonDefaultHoverGlow', '--buttonDefaultBevel']
+      }
+    },
+    {
+      state: ['active'],
+      directives: {
+        opacity: 0
+      }
+    },
+    {
+      state: ['hover', 'active'],
+      directives: {
+        shadow: ['--buttonDefaultShadow', '--buttonDefaultBevel']
+      }
+    },
+    {
+      state: ['disabled'],
+      directives: {
+        background: '$blend(--inheritedBackground 0.25 --parent)',
+        shadow: ['--buttonDefaultBevel']
+      }
+    },
+    {
+      component: 'Text',
+      parent: {
+        component: 'Tab',
+        state: ['disabled']
+      },
+      directives: {
+        textOpacity: 0.25,
+        textOpacityMode: 'blend'
+      }
+    },
+    {
+      component: 'Icon',
+      parent: {
+        component: 'Tab',
+        state: ['active']
+      },
+      directives: {
+        textColor: '--text'
+      }
+    },
+    {
+      component: 'Icon',
+      parent: {
+        component: 'Tab',
+        state: ['active', 'hover']
+      },
+      directives: {
+        textColor: '--text'
+      }
+    }
+  ]
+}
diff --git a/src/components/tab_switcher/tab_switcher.jsx b/src/components/tab_switcher/tab_switcher.jsx
index cbc7809aa..2806240ee 100644
--- a/src/components/tab_switcher/tab_switcher.jsx
+++ b/src/components/tab_switcher/tab_switcher.jsx
@@ -61,13 +61,7 @@ export default {
         const isWanted = slot => slot.props && slot.props['data-tab-name'] === tabName
         return this.$slots.default().findIndex(isWanted) === this.activeIndex
       }
-    },
-    settingsModalVisible () {
-      return this.settingsModalState === 'visible'
-    },
-    ...mapState(useInterfaceStore, {
-      settingsModalState: store => store.settingsModalState
-    })
+    }
   },
   beforeUpdate () {
     const currentSlot = this.slots()[this.active]
@@ -104,7 +98,7 @@ export default {
       .map((slot, index) => {
         const props = slot.props
         if (!props) return
-        const classesTab = ['tab', 'button-default']
+        const classesTab = ['tab']
         const classesWrapper = ['tab-wrapper']
         if (this.activeIndex === index) {
           classesTab.push('active')
@@ -152,7 +146,12 @@ export default {
       if (props.fullHeight) {
         classes.push('full-height')
       }
-      const renderSlot = (!this.renderOnlyFocused || active)
+      let delayRender = slot.props['delay-render']
+      if (delayRender && active) {
+        slot.props['delay-render'] = false
+        delayRender = false
+      }
+      const renderSlot = (!delayRender && (!this.renderOnlyFocused || active))
         ? slot
         : ''
 
diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss
index 705925c8c..b78cb7329 100644
--- a/src/components/tab_switcher/tab_switcher.scss
+++ b/src/components/tab_switcher/tab_switcher.scss
@@ -1,5 +1,3 @@
-@import "../../variables";
-
 /* stylelint-disable no-descending-specificity */
 .tab-switcher {
   display: flex;
@@ -25,8 +23,7 @@
         content: "";
         flex: 1 1 auto;
         border-bottom: 1px solid;
-        border-bottom-color: $fallback--border;
-        border-bottom-color: var(--border, $fallback--border);
+        border-bottom-color: var(--border);
       }
 
       .tab-wrapper {
@@ -37,8 +34,7 @@
           right: 0;
           bottom: 0;
           border-bottom: 1px solid;
-          border-bottom-color: $fallback--border;
-          border-bottom-color: var(--border, $fallback--border);
+          border-bottom-color: var(--border);
         }
       }
 
@@ -80,8 +76,7 @@
         flex-basis: 0.5em;
         content: "";
         border-right: 1px solid;
-        border-right-color: $fallback--border;
-        border-right-color: var(--border, $fallback--border);
+        border-right-color: var(--border);
       }
 
       &::after {
@@ -106,16 +101,14 @@
           right: 0;
           bottom: 0;
           border-right: 1px solid;
-          border-right-color: $fallback--border;
-          border-right-color: var(--border, $fallback--border);
+          border-right-color: var(--border);
         }
 
         &::before {
           flex: 0 0 6px;
           content: "";
           border-right: 1px solid;
-          border-right-color: $fallback--border;
-          border-right-color: var(--border, $fallback--border);
+          border-right-color: var(--border);
         }
 
         &:last-child .tab {
@@ -126,7 +119,7 @@
       .tab {
         flex: 1;
         box-sizing: content-box;
-        min-width: 10em;
+        max-width: 9em;
         min-width: 1px;
         border-top-right-radius: 0;
         border-bottom-right-radius: 0;
@@ -135,12 +128,22 @@
         margin-right: -200px;
         margin-left: 1em;
 
+        &:not(.active) {
+          margin-top: 0;
+          margin-left: 1.5em;
+        }
+
         @media all and (max-width: 800px) {
           padding-left: 0.25em;
           padding-right: calc(0.25em + 200px);
           margin-right: calc(0.25em - 200px);
           margin-left: 0.25em;
 
+          &:not(.active) {
+            margin-top: 0;
+            margin-left: 0.5em;
+          }
+
           .text {
             display: none;
           }
@@ -173,12 +176,22 @@
   }
 
   .tab {
+    user-select: none;
+    color: var(--text);
+    border: none;
+    cursor: pointer;
+    box-shadow: var(--shadow);
+    font-size: 1em;
+    font-family: var(--font);
+    border-radius: var(--roundness);
+    background-color: var(--background);
     position: relative;
     white-space: nowrap;
     padding: 6px 1em;
 
     &:not(.active) {
       z-index: 4;
+      margin-top: 0.25em;
 
       &:hover {
         z-index: 6;
@@ -188,8 +201,6 @@
     &.active {
       background: transparent;
       z-index: 5;
-      color: $fallback--text;
-      color: var(--tabActiveText, $fallback--text);
     }
 
     img {
@@ -231,7 +242,7 @@
     margin-top: 0.5em;
     margin-left: 0.2em;
     margin-bottom: 0.25em;
-    border-bottom: 1px solid var(--border, $fallback--border);
+    border-bottom: 1px solid var(--border);
 
     @media all and (min-width: 800px) {
       display: none;
diff --git a/src/components/text.style.js b/src/components/text.style.js
new file mode 100644
index 000000000..a254ceb40
--- /dev/null
+++ b/src/components/text.style.js
@@ -0,0 +1,22 @@
+export default {
+  name: 'Text',
+  selector: '/*text*/',
+  virtual: true,
+  states: {
+    faint: '.faint'
+  },
+  defaultRules: [
+    {
+      directives: {
+        textColor: '--text',
+        textAuto: 'no-preserve'
+      }
+    },
+    {
+      state: ['faint'],
+      directives: {
+        textOpacity: 0.5
+      }
+    }
+  ]
+}
diff --git a/src/components/thread_tree/thread_tree.vue b/src/components/thread_tree/thread_tree.vue
index 047272784..472cc103e 100644
--- a/src/components/thread_tree/thread_tree.vue
+++ b/src/components/thread_tree/thread_tree.vue
@@ -89,7 +89,7 @@
         </template>
         <template #text>
           <span>
-            {{ $tc('status.thread_follow', totalReplyCount[status.id], { numStatus: totalReplyCount[status.id] }) }}
+            {{ $t('status.thread_follow', { numStatus: totalReplyCount[status.id] }, totalReplyCount[status.id]) }}
           </span>
         </template>
       </i18n-t>
@@ -108,7 +108,7 @@
         </template>
         <template #text>
           <span>
-            {{ $tc('status.thread_show_full', totalReplyCount[status.id], { numStatus: totalReplyCount[status.id], depth: totalReplyDepth[status.id] }) }}
+            {{ $t('status.thread_show_full', { numStatus: totalReplyCount[status.id], depth: totalReplyDepth[status.id] }, totalReplyCount[status.id]) }}
           </span>
         </template>
       </i18n-t>
@@ -119,15 +119,13 @@
 <script src="./thread_tree.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .thread-tree-replies {
-  margin-left: var(--status-margin, $status-margin);
-  border-left: 2px solid var(--border, $fallback--border);
+  margin-left: var(--status-margin);
+  border-left: 2px solid var(--border);
 }
 
 .thread-tree-replies-hidden {
-  padding: var(--status-margin, $status-margin);
+  padding: var(--status-margin);
 
   /* Make the button stretch along the whole row */
   display: flex;
diff --git a/src/components/timeago/timeago.vue b/src/components/timeago/timeago.vue
index b5f495154..bc779e801 100644
--- a/src/components/timeago/timeago.vue
+++ b/src/components/timeago/timeago.vue
@@ -3,7 +3,7 @@
     :datetime="time"
     :title="localeDateString"
   >
-    {{ relativeTimeString }}
+    {{ relativeOrAbsoluteTimeString }}
   </time>
 </template>
 
@@ -16,25 +16,78 @@ export default {
   props: ['time', 'autoUpdate', 'longFormat', 'nowThreshold', 'templateKey'],
   data () {
     return {
+      relativeTimeMs: 0,
       relativeTime: { key: 'time.now', num: 0 },
       interval: null
     }
   },
   computed: {
-    localeDateString () {
-      const browserLocale = localeService.internalToBrowserLocale(this.$i18n.locale)
+    shouldUseAbsoluteTimeFormat () {
+      if (!this.$store.getters.mergedConfig.useAbsoluteTimeFormat) {
+        return false
+      }
+      return DateUtils.durationStrToMs(this.$store.getters.mergedConfig.absoluteTimeFormatMinAge) <= this.relativeTimeMs
+    },
+    time12hFormat () {
+      return this.$store.getters.mergedConfig.absoluteTimeFormat12h === '12h'
+    },
+    browserLocale () {
+      return localeService.internalToBrowserLocale(this.$i18n.locale)
+    },
+    timeAsDate () {
       return typeof this.time === 'string'
-        ? new Date(Date.parse(this.time)).toLocaleString(browserLocale)
-        : this.time.toLocaleString(browserLocale)
+        ? new Date(Date.parse(this.time))
+        : this.time
+    },
+    localeDateString () {
+      return this.timeAsDate.toLocaleString(this.browserLocale)
     },
     relativeTimeString () {
-      const timeString = this.$i18n.tc(this.relativeTime.key, this.relativeTime.num, [this.relativeTime.num])
+      const timeString = this.$i18n.t(this.relativeTime.key, [this.relativeTime.num], this.relativeTime.num)
 
       if (typeof this.templateKey === 'string' && this.relativeTime.key !== 'time.now') {
         return this.$i18n.t(this.templateKey, [timeString])
       }
 
       return timeString
+    },
+    absoluteTimeString () {
+      if (this.longFormat) {
+        return this.localeDateString
+      }
+      const now = new Date()
+      const formatter = (() => {
+        if (DateUtils.isSameDay(this.timeAsDate, now)) {
+          return new Intl.DateTimeFormat(this.browserLocale, {
+            minute: 'numeric',
+            hour: 'numeric',
+            hour12: this.time12hFormat
+          })
+        } else if (DateUtils.isSameMonth(this.timeAsDate, now)) {
+          return new Intl.DateTimeFormat(this.browserLocale, {
+            month: 'short',
+            day: 'numeric',
+            hour12: this.time12hFormat
+          })
+        } else if (DateUtils.isSameYear(this.timeAsDate, now)) {
+          return new Intl.DateTimeFormat(this.browserLocale, {
+            month: 'short',
+            day: 'numeric',
+            hour12: this.time12hFormat
+          })
+        } else {
+          return new Intl.DateTimeFormat(this.browserLocale, {
+            year: 'numeric',
+            month: 'short',
+            hour12: this.time12hFormat
+          })
+        }
+      })()
+
+      return formatter.format(this.timeAsDate)
+    },
+    relativeOrAbsoluteTimeString () {
+      return this.shouldUseAbsoluteTimeFormat ? this.absoluteTimeString : this.relativeTimeString
     }
   },
   watch: {
@@ -54,6 +107,7 @@ export default {
   methods: {
     refreshRelativeTimeObject () {
       const nowThreshold = typeof this.nowThreshold === 'number' ? this.nowThreshold : 1
+      this.relativeTimeMs = DateUtils.relativeTimeMs(this.time)
       this.relativeTime = this.longFormat
         ? DateUtils.relativeTime(this.time, nowThreshold)
         : DateUtils.relativeTimeShort(this.time, nowThreshold)
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index e2f4d0336..7895a4444 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -26,6 +26,8 @@ const Timeline = {
     'title',
     'userId',
     'listId',
+    'statusId',
+    'bookmarkFolderId',
     'tag',
     'embedded',
     'count',
@@ -78,13 +80,13 @@ const Timeline = {
       }
     },
     classes () {
-      let rootClasses = !this.embedded ? ['panel', 'panel-default'] : ['-nonpanel']
+      let rootClasses = !this.embedded ? ['panel', 'panel-default'] : ['-embedded']
       if (this.blockingClicks) rootClasses = rootClasses.concat(['-blocked', '_misclick-prevention'])
       return {
         root: rootClasses,
-        header: ['timeline-heading'].concat(!this.embedded ? ['panel-heading', '-sticky'] : []),
-        body: ['timeline-body'].concat(!this.embedded ? ['panel-body'] : []),
-        footer: ['timeline-footer'].concat(!this.embedded ? ['panel-footer'] : [])
+        header: ['timeline-heading'].concat(!this.embedded ? ['panel-heading', '-sticky'] : ['panel-body']),
+        body: ['timeline-body'].concat(!this.embedded ? ['panel-body'] : ['panel-body']),
+        footer: ['timeline-footer'].concat(!this.embedded ? ['panel-footer'] : ['panel-body'])
       }
     },
     // id map of statuses which need to be hidden in the main list due to pinning logic
@@ -122,6 +124,8 @@ const Timeline = {
       showImmediately,
       userId: this.userId,
       listId: this.listId,
+      statusId: this.statusId,
+      bookmarkFolderId: this.bookmarkFolderId,
       tag: this.tag
     })
   },
@@ -161,6 +165,9 @@ const Timeline = {
       if (this.timeline.flushMarker !== 0) {
         this.$store.commit('clearTimeline', { timeline: this.timelineName, excludeUserId: true })
         this.$store.commit('queueFlush', { timeline: this.timelineName, id: 0 })
+        if (this.timelineName === 'user') {
+          this.$store.dispatch('fetchPinnedStatuses', this.userId)
+        }
         this.fetchOlderStatuses()
       } else {
         this.blockClicksTemporarily()
@@ -181,6 +188,8 @@ const Timeline = {
         showImmediately: true,
         userId: this.userId,
         listId: this.listId,
+        statusId: this.statusId,
+        bookmarkFolderId: this.bookmarkFolderId,
         tag: this.tag
       }).then(({ statuses }) => {
         if (statuses && statuses.length === 0) {
diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index 4371947d4..2dd66328d 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -1,31 +1,20 @@
-@import "../../variables";
-
 .Timeline {
-  .alert-dot {
-    border-radius: 100%;
-    height: 8px;
-    width: 8px;
-    position: absolute;
-    left: calc(50% - 4px);
-    top: calc(50% - 4px);
-    margin-left: 6px;
-    margin-top: -6px;
-    background-color: var(--badgeNeutral);
+  .timeline-body {
+    background: none;
+    backdrop-filter: none;
   }
 
   .alert-badge {
     font-size: 0.75em;
     line-height: 1;
     text-align: right;
-    border-radius: var(--tooltipRadius);
+    border-radius: var(--roundness);
     position: absolute;
     left: calc(50% - 0.5em);
     top: calc(50% - 0.4em);
     padding: 0.2em;
     margin-left: 0.7em;
     margin-top: -1em;
-    background-color: var(--badgeNeutral);
-    color: var(--badgeNeutralText);
   }
 
   .loadmore-button {
@@ -37,16 +26,21 @@
   }
 
   .conversation-heading {
-    top: calc(var(--__panel-heading-height) * var(--currentPanelStack, 2));
+    top: calc(var(--__panel-heading-height) * var(--currentPanelStack, 1) + var(--navbar-height));
     z-index: 2;
   }
 
-  &.-nonpanel {
+  &.-embedded {
     .timeline-heading {
       text-align: center;
       line-height: 2.75em;
       padding: 0 0.5em;
 
+      // Override the shrug empty filler
+      &:empty::before {
+        content: initial;
+      }
+
       .button-default,
       .alert {
         line-height: 2em;
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 2279f21a0..e34c42d9f 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -1,12 +1,15 @@
 <template>
   <div :class="['Timeline', classes.root]">
-    <div :class="classes.header">
+    <div
+      v-if="!embedded"
+      :class="classes.header"
+    >
       <TimelineMenu
         v-if="!embedded"
         :timeline-name="timelineName"
       />
       <div
-        v-if="showScrollTop && !embedded"
+        v-if="showScrollTop"
         class="rightside-button"
       >
         <button
@@ -24,7 +27,7 @@
           </FALayers>
         </button>
       </div>
-      <template v-if="mobileLayout && !embedded">
+      <template v-if="mobileLayout">
         <div
           v-if="showLoadButton"
           class="rightside-button"
@@ -38,13 +41,13 @@
               fixed-width
               icon="circle-plus"
             />
-            <div class="alert-badge">
+            <div class="badge -counter">
               {{ mobileLoadButtonString }}
             </div>
           </button>
         </div>
         <div
-          v-else-if="!embedded"
+          v-else
           class="loadmore-text faint veryfaint rightside-icon"
           :title="$t('timeline.up_to_date')"
           :aria-disabled="true"
@@ -65,7 +68,7 @@
           {{ loadButtonString }}
         </button>
         <div
-          v-else-if="!embedded"
+          v-else
           class="loadmore-text faint"
           @click.prevent
         >
@@ -73,11 +76,10 @@
         </div>
       </template>
       <QuickFilterSettings
-        v-if="!embedded"
+        v-if="!mobileLayout"
         class="rightside-button"
       />
       <QuickViewSettings
-        v-if="!embedded"
         class="rightside-button"
       />
     </div>
@@ -148,6 +150,8 @@
           />
         </div>
       </teleport>
+      <!-- spacer to avoid having empty shrug -->
+      <span v-if="embedded && footerSlipgate" />
     </div>
   </div>
 </template>
diff --git a/src/components/timeline_menu/timeline_menu.js b/src/components/timeline_menu/timeline_menu.js
index 79c944b70..2f75c66c8 100644
--- a/src/components/timeline_menu/timeline_menu.js
+++ b/src/components/timeline_menu/timeline_menu.js
@@ -2,6 +2,7 @@ import Popover from '../popover/popover.vue'
 import NavigationEntry from 'src/components/navigation/navigation_entry.vue'
 import { mapState } from 'vuex'
 import { ListsMenuContent } from '../lists_menu/lists_menu_content.vue'
+import { BookmarkFoldersMenuContent } from '../bookmark_folders_menu/bookmark_folders_menu_content.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { TIMELINES } from 'src/components/navigation/navigation.js'
 import { filterNavigation } from 'src/components/navigation/filter.js'
@@ -15,13 +16,14 @@ library.add(faChevronDown)
 
 // Route -> i18n key mapping, exported and not in the computed
 // because nav panel benefits from the same information.
-export const timelineNames = () => {
+export const timelineNames = (supportsBookmarkFolders) => {
   return {
     friends: 'nav.home_timeline',
-    bookmarks: 'nav.bookmarks',
+    bookmarks: supportsBookmarkFolders ? 'nav.all_bookmarks' : 'nav.bookmarks',
     dms: 'nav.dms',
     'public-timeline': 'nav.public_tl',
-    'public-external-timeline': 'nav.twkn'
+    'public-external-timeline': 'nav.twkn',
+    quotes: 'nav.quotes'
   }
 }
 
@@ -29,7 +31,8 @@ const TimelineMenu = {
   components: {
     Popover,
     NavigationEntry,
-    ListsMenuContent
+    ListsMenuContent,
+    BookmarkFoldersMenuContent
   },
   data () {
     return {
@@ -37,7 +40,7 @@ const TimelineMenu = {
     }
   },
   created () {
-    if (timelineNames()[this.$route.name]) {
+    if (timelineNames(this.bookmarkFolders)[this.$route.name]) {
       useInterfaceStore().setLastTimeline(this.$route.name)
     }
   },
@@ -46,10 +49,15 @@ const TimelineMenu = {
       const route = this.$route.name
       return route === 'lists-timeline'
     },
+    useBookmarkFoldersMenu () {
+      const route = this.$route.name
+      return this.bookmarkFolders && (route === 'bookmark-folder' || route === 'bookmarks')
+    },
     ...mapState({
       currentUser: state => state.users.currentUser,
       privateMode: state => state.instance.private,
-      federating: state => state.instance.federating
+      federating: state => state.instance.federating,
+      bookmarkFolders: state => state.instance.pleromaBookmarkFoldersAvailable
     }),
     timelinesList () {
       return filterNavigation(
@@ -58,7 +66,8 @@ const TimelineMenu = {
           hasChats: this.pleromaChatMessagesAvailable,
           isFederating: this.federating,
           isPrivate: this.privateMode,
-          currentUser: this.currentUser
+          currentUser: this.currentUser,
+          supportsBookmarkFolders: this.bookmarkFolders
         }
       )
     }
@@ -90,7 +99,10 @@ const TimelineMenu = {
       if (route === 'lists-timeline') {
         return useListsStore().findListTitle(this.$route.params.id)
       }
-      const i18nkey = timelineNames()[this.$route.name]
+      if (route === 'bookmark-folder') {
+        return this.$store.getters.findBookmarkFolderName(this.$route.params.id)
+      }
+      const i18nkey = timelineNames(this.bookmarkFolders)[this.$route.name]
       return i18nkey ? this.$t(i18nkey) : route
     }
   }
diff --git a/src/components/timeline_menu/timeline_menu.vue b/src/components/timeline_menu/timeline_menu.vue
index 5f1da1f77..717c8a8e8 100644
--- a/src/components/timeline_menu/timeline_menu.vue
+++ b/src/components/timeline_menu/timeline_menu.vue
@@ -15,6 +15,10 @@
         :show-pin="false"
         class="timelines"
       />
+      <BookmarkFoldersMenuContent
+        v-else-if="useBookmarkFoldersMenu"
+        class="timelines"
+      />
       <ul v-else>
         <NavigationEntry
           v-for="item in timelinesList"
@@ -25,8 +29,8 @@
       </ul>
     </template>
     <template #trigger>
-      <span class="button-unstyled title timeline-menu-title">
-        <span class="timeline-title">{{ timelineName() }}</span>
+      <span class="button-unstyled timeline-menu-title">
+        <h1 class="title timeline-title">{{ timelineName() }}</h1>
         <span>
           <FAIcon
             size="sm"
@@ -45,8 +49,6 @@
 <script src="./timeline_menu.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .timeline-menu-popover {
   min-width: 24rem;
   max-width: 100vw;
@@ -60,65 +62,6 @@
     margin: 0;
     padding: 0;
   }
-
-  a {
-    display: block;
-    padding: 0 0.65em;
-    height: 3.5em;
-    line-height: 3.5em;
-
-    &:hover {
-      background-color: $fallback--lightBg;
-      background-color: var(--selectedMenu, $fallback--lightBg);
-      color: $fallback--link;
-      color: var(--selectedMenuText, $fallback--link);
-
-      --faint: var(--selectedMenuFaintText, $fallback--faint);
-      --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
-      --lightText: var(--selectedMenuLightText, $fallback--lightText);
-      --icon: var(--selectedMenuIcon, $fallback--icon);
-    }
-
-    &.router-link-active {
-      font-weight: bolder;
-      background-color: $fallback--lightBg;
-      background-color: var(--selectedMenu, $fallback--lightBg);
-      color: $fallback--text;
-      color: var(--selectedMenuText, $fallback--text);
-
-      --faint: var(--selectedMenuFaintText, $fallback--faint);
-      --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
-      --lightText: var(--selectedMenuLightText, $fallback--lightText);
-      --icon: var(--selectedMenuIcon, $fallback--icon);
-
-      &:hover {
-        text-decoration: underline;
-      }
-    }
-
-    svg {
-      margin-right: 0.4em;
-      margin-left: -0.2em;
-    }
-  }
-
-  li {
-    border-bottom: 1px solid;
-    border-color: $fallback--border;
-    border-color: var(--border, $fallback--border);
-    padding: 0;
-
-    &:last-child a {
-      border-bottom-right-radius: $fallback--panelRadius;
-      border-bottom-right-radius: var(--panelRadius, $fallback--panelRadius);
-      border-bottom-left-radius: $fallback--panelRadius;
-      border-bottom-left-radius: var(--panelRadius, $fallback--panelRadius);
-    }
-
-    &:last-child {
-      border: none;
-    }
-  }
 }
 
 .TimelineMenu {
@@ -159,8 +102,6 @@
   }
 
   &.open .timeline-menu-title svg {
-    color: $fallback--text;
-    color: var(--panelText, $fallback--text);
     transform: rotate(180deg);
   }
 
diff --git a/src/components/tooltip/tooltip.vue b/src/components/tooltip/tooltip.vue
new file mode 100644
index 000000000..db0a8bef9
--- /dev/null
+++ b/src/components/tooltip/tooltip.vue
@@ -0,0 +1,24 @@
+<template>
+  <Popover trigger="hover">
+    <template #trigger>
+      <slot />
+    </template>
+    <template #content>
+      <div class="tooltip">
+        {{ props.text }}
+      </div>
+    </template>
+  </Popover>
+</template>
+
+<script setup>
+import Popover from 'src/components/popover/popover.vue'
+
+const props = defineProps(['text'])
+</script>
+
+<style lang="scss">
+.tooltip {
+  margin: 0.5em 1em;
+}
+</style>
diff --git a/src/components/top_bar.style.js b/src/components/top_bar.style.js
new file mode 100644
index 000000000..945ae7781
--- /dev/null
+++ b/src/components/top_bar.style.js
@@ -0,0 +1,57 @@
+export default {
+  name: 'TopBar',
+  selector: 'nav',
+  validInnerComponents: [
+    'Link',
+    'Text',
+    'Icon',
+    'Button',
+    'ButtonUnstyled',
+    'Input',
+    'Badge'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        background: '--fg',
+        shadow: [{
+          x: 0,
+          y: 1,
+          blur: 4,
+          spread: 0,
+          color: '#000000',
+          alpha: 0.4
+        },
+        {
+          x: 0,
+          y: 2,
+          blur: 7,
+          spread: 0,
+          color: '#000000',
+          alpha: 0.3
+        }]
+      }
+    },
+    {
+      component: 'Link',
+      parent: {
+        component: 'TopBar'
+      },
+      directives: {
+        textColor: '--text'
+      }
+    },
+    {
+      component: 'Icon',
+      parent: {
+        component: 'ButtonUnstyled',
+        parent: {
+          component: 'TopBar'
+        }
+      },
+      directives: {
+        textColor: '--parent--text'
+      }
+    }
+  ]
+}
diff --git a/src/components/underlay.style.js b/src/components/underlay.style.js
new file mode 100644
index 000000000..3e0e1bf1d
--- /dev/null
+++ b/src/components/underlay.style.js
@@ -0,0 +1,19 @@
+export default {
+  name: 'Underlay',
+  selector: '#content',
+  // Out of tree selector: Most components are laid over underlay, but underlay itself is not part of the DOM tree,
+  // i.e. it's a separate absolutely-positioned component, so we need to treat it differently depending on whether
+  // we are searching for underlay specifically or for whatever is laid on top of it.
+  outOfTreeSelector: '.underlay',
+  validInnerComponents: [
+    'Panel'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        background: '#000000',
+        opacity: 0.2
+      }
+    }
+  ]
+}
diff --git a/src/components/update_notification/update_notification.scss b/src/components/update_notification/update_notification.scss
index 4337acc4f..fb2edaa4a 100644
--- a/src/components/update_notification/update_notification.scss
+++ b/src/components/update_notification/update_notification.scss
@@ -1,5 +1,3 @@
-@import "src/variables";
-
 .UpdateNotification {
   overflow: hidden;
 }
@@ -48,7 +46,7 @@
   .panel-body {
     border-width: 0 0 1px;
     border-style: solid;
-    border-color: var(--border, $fallback--border);
+    border-color: var(--border);
   }
 
   .panel-footer {
diff --git a/src/components/update_notification/update_notification.vue b/src/components/update_notification/update_notification.vue
index 78e70a743..a35c70f86 100644
--- a/src/components/update_notification/update_notification.vue
+++ b/src/components/update_notification/update_notification.vue
@@ -9,9 +9,9 @@
       :class="{ '-peek': !showingMore }"
     >
       <div class="panel-heading">
-        <span class="title">
+        <h1 class="title">
           {{ $t('update.big_update_title') }}
-        </span>
+        </h1>
       </div>
       <div class="panel-body">
         <div
@@ -34,6 +34,7 @@
               class="extra-info-group"
             >
               <i18n-t
+                scope="global"
                 keypath="update.update_bugs"
                 tag="p"
               >
@@ -45,6 +46,7 @@
                 </template>
               </i18n-t>
               <i18n-t
+                scope="global"
                 keypath="update.update_changelog"
                 tag="p"
               >
@@ -57,6 +59,7 @@
               </i18n-t>
               <p class="art-credit">
                 <i18n-t
+                  scope="global"
                   keypath="update.art_by"
                   tag="small"
                 >
diff --git a/src/components/user_avatar/avatar.style.js b/src/components/user_avatar/avatar.style.js
new file mode 100644
index 000000000..d49213476
--- /dev/null
+++ b/src/components/user_avatar/avatar.style.js
@@ -0,0 +1,22 @@
+export default {
+  name: 'Avatar',
+  selector: '.Avatar',
+  variants: {
+    compact: '.-compact'
+  },
+  defaultRules: [
+    {
+      directives: {
+        roundness: 3,
+        shadow: [{
+          x: 0,
+          y: 1,
+          blur: 4,
+          spread: 0,
+          color: '#000000',
+          alpha: 0.2
+        }]
+      }
+    }
+  ]
+}
diff --git a/src/components/user_avatar/user_avatar.js b/src/components/user_avatar/user_avatar.js
index 33d9a2580..8cd1eeb43 100644
--- a/src/components/user_avatar/user_avatar.js
+++ b/src/components/user_avatar/user_avatar.js
@@ -3,24 +3,26 @@ import StillImage from '../still-image/still-image.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 
 import {
-  faRobot
+  faRobot,
+  faPeopleGroup
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
-  faRobot
+  faRobot,
+  faPeopleGroup
 )
 
 const UserAvatar = {
   props: [
     'user',
-    'betterShadow',
     'compact',
-    'bot'
+    'showActorTypeIndicator'
   ],
   data () {
     return {
       showPlaceholder: false,
-      defaultAvatar: `${this.$store.state.instance.server + this.$store.state.instance.defaultAvatar}`
+      defaultAvatar: `${this.$store.state.instance.server + this.$store.state.instance.defaultAvatar}`,
+      betterShadow: this.$store.state.interface.browserSupport.cssFilter
     }
   },
   components: {
diff --git a/src/components/user_avatar/user_avatar.vue b/src/components/user_avatar/user_avatar.vue
index 91c176118..83608c505 100644
--- a/src/components/user_avatar/user_avatar.vue
+++ b/src/components/user_avatar/user_avatar.vue
@@ -18,21 +18,24 @@
       :class="{ '-compact': compact }"
     />
     <FAIcon
-      v-if="bot"
+      v-if="showActorTypeIndicator && user?.actor_type === 'Service'"
       icon="robot"
-      class="bot-indicator"
+      class="actor-type-indicator"
+    />
+    <FAIcon
+      v-if="showActorTypeIndicator && user?.actor_type === 'Group'"
+      icon="people-group"
+      class="actor-type-indicator"
     />
   </span>
 </template>
 
 <script src="./user_avatar.js"></script>
 <style lang="scss">
-@import "../../variables";
-
 .Avatar {
-  --_avatarShadowBox: var(--avatarStatusShadow);
-  --_avatarShadowFilter: var(--avatarStatusShadowFilter);
-  --_avatarShadowInset: var(--avatarStatusShadowInset);
+  --_avatarShadowBox: var(--shadow);
+  --_avatarShadowFilter: var(--shadowFilter);
+  --_avatarShadowInset: var(--shadowInset);
   --_still-image-label-visibility: hidden;
 
   display: inline-block;
@@ -43,16 +46,14 @@
   &.-compact {
     width: 32px;
     height: 32px;
-    border-radius: $fallback--avatarAltRadius;
-    border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
+    border-radius: var(--roundness);
   }
 
   .avatar {
     width: 100%;
     height: 100%;
     box-shadow: var(--_avatarShadowBox);
-    border-radius: $fallback--avatarRadius;
-    border-radius: var(--avatarRadius, $fallback--avatarRadius);
+    border-radius: var(--roundness);
 
     &.-better-shadow {
       box-shadow: var(--_avatarShadowInset);
@@ -64,13 +65,11 @@
     }
 
     &.-compact {
-      border-radius: $fallback--avatarAltRadius;
-      border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
+      border-radius: var(--roundness);
     }
 
     &.-placeholder {
-      background-color: $fallback--fg;
-      background-color: var(--fg, $fallback--fg);
+      background-color: var(--background);
     }
   }
 
@@ -79,7 +78,7 @@
     height: 100%;
   }
 
-  .bot-indicator {
+  .actor-type-indicator {
     position: absolute;
     bottom: 0;
     right: 0;
@@ -87,7 +86,7 @@
     padding: 0.2em;
     background: rgb(127 127 127 / 50%);
     color: #fff;
-    border-radius: var(--tooltipRadius);
+    border-radius: var(--roundness);
   }
 }
 </style>
diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index 1bc653378..ecdff9193 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -1,4 +1,3 @@
-import { unitToSeconds } from 'src/services/date_utils/date_utils.js'
 import UserAvatar from '../user_avatar/user_avatar.vue'
 import RemoteFollow from '../remote_follow/remote_follow.vue'
 import ProgressButton from '../progress_button/progress_button.vue'
@@ -9,7 +8,7 @@ import UserNote from '../user_note/user_note.vue'
 import Select from '../select/select.vue'
 import UserLink from '../user_link/user_link.vue'
 import RichContent from 'src/components/rich_content/rich_content.jsx'
-import ConfirmModal from '../confirm_modal/confirm_modal.vue'
+import MuteConfirm from '../confirm_modal/mute_confirm.vue'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 import { mapGetters } from 'vuex'
 import { usePostStatusStore } from '../../stores/postStatus'
@@ -51,8 +50,6 @@ export default {
   data () {
     return {
       followRequestInProgress: false,
-      betterShadow: useInterfaceStore().browserSupport.cssFilter,
-      showingConfirmMute: false,
       muteExpiryAmount: 0,
       muteExpiryUnit: 'minutes'
     }
@@ -145,12 +142,6 @@ export default {
     supportsNote () {
       return 'note' in this.relationship
     },
-    shouldConfirmMute () {
-      return this.mergedConfig.modalOnMute
-    },
-    muteExpiryUnits () {
-      return ['minutes', 'hours', 'days']
-    },
     ...mapGetters(['mergedConfig'])
   },
   components: {
@@ -164,28 +155,11 @@ export default {
     RichContent,
     UserLink,
     UserNote,
-    ConfirmModal
+    MuteConfirm
   },
   methods: {
-    showConfirmMute () {
-      this.showingConfirmMute = true
-    },
-    hideConfirmMute () {
-      this.showingConfirmMute = false
-    },
     muteUser () {
-      if (!this.shouldConfirmMute) {
-        this.doMuteUser()
-      } else {
-        this.showConfirmMute()
-      }
-    },
-    doMuteUser () {
-      this.$store.dispatch('muteUser', {
-        id: this.user.id,
-        expiresIn: this.shouldConfirmMute ? unitToSeconds(this.muteExpiryUnit, this.muteExpiryAmount) : 0
-      })
-      this.hideConfirmMute()
+      this.$refs.confirmation.optionallyPrompt()
     },
     unmuteUser () {
       this.$store.dispatch('unmuteUser', this.user.id)
@@ -228,7 +202,7 @@ export default {
       useMediaViewerStore().setCurrentMedia(attachment)
     },
     mentionUser () {
-      usePostStatusStore().openPostStatusModal({ replyTo: true, repliedUser: this.user })
+      usePostStatusStore().openPostStatusModal({ profileMention: true, repliedUser: this.user })
     },
     onAvatarClickHandler (e) {
       if (this.onAvatarClick) {
diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index 4ab93a8a3..843f46e4c 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -1,5 +1,3 @@
-@import "../../variables";
-
 .user-card {
   position: relative;
   z-index: 1;
@@ -21,14 +19,6 @@
     position: relative;
   }
 
-  .panel-body {
-    word-wrap: break-word;
-    border-bottom-right-radius: inherit;
-    border-bottom-left-radius: inherit;
-    // create new stacking context
-    position: relative;
-  }
-
   .background-image {
     position: absolute;
     top: 0;
@@ -62,11 +52,6 @@
     padding: 1em;
     margin: 0;
 
-    a {
-      color: $fallback--link;
-      color: var(--postLink, $fallback--link);
-    }
-
     img {
       object-fit: contain;
       vertical-align: middle;
@@ -76,53 +61,37 @@
   }
 
   &.-rounded-t {
-    border-top-left-radius: $fallback--panelRadius;
-    border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
-    border-top-right-radius: $fallback--panelRadius;
-    border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
+    border-top-left-radius: var(--roundness);
+    border-top-right-radius: var(--roundness);
 
-    --__roundnessTop: var(--panelRadius);
+    --__roundnessTop: var(--roundness);
     --__roundnessBottom: 0;
   }
 
   &.-rounded {
-    border-radius: $fallback--panelRadius;
-    border-radius: var(--panelRadius, $fallback--panelRadius);
+    border-radius: var(--roundness);
 
-    --__roundnessTop: var(--panelRadius);
-    --__roundnessBottom: var(--panelRadius);
+    --__roundnessTop: var(--roundness);
+    --__roundnessBottom: var(--roundness);
   }
 
   &.-popover {
-    border-radius: $fallback--tooltipRadius;
-    border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
+    border-radius: var(--roundness);
 
-    --__roundnessTop: var(--tooltipRadius);
-    --__roundnessBottom: var(--tooltipRadius);
+    --__roundnessTop: var(--roundness);
+    --__roundnessBottom: var(--roundness);
   }
 
   &.-bordered {
     border-width: 1px;
     border-style: solid;
-    border-color: $fallback--border;
-    border-color: var(--border, $fallback--border);
+    border-color: var(--border);
   }
 }
 
 .user-info {
-  color: $fallback--lightText;
-  color: var(--lightText, $fallback--lightText);
   padding: 0 26px;
 
-  a {
-    color: $fallback--lightText;
-    color: var(--lightText, $fallback--lightText);
-
-    &:hover {
-      color: var(--icon);
-    }
-  }
-
   .container {
     min-width: 0;
     padding: 16px 0 6px;
@@ -164,8 +133,7 @@
       display: flex;
       justify-content: center;
       align-items: center;
-      border-radius: $fallback--avatarRadius;
-      border-radius: var(--avatarRadius, $fallback--avatarRadius);
+      border-radius: var(--roundness);
       opacity: 0;
       transition: opacity 0.2s ease;
 
@@ -188,8 +156,7 @@
     padding: 0.5em 0;
 
     &:not(:hover) .icon {
-      color: $fallback--lightText;
-      color: var(--lightText, $fallback--lightText);
+      color: var(--lightText);
     }
   }
 
@@ -203,6 +170,7 @@
     }
 
     .user-screen-name {
+      color: var(--text);
       min-width: 1px;
       flex: 0 1 auto;
       text-overflow: ellipsis;
@@ -214,16 +182,11 @@
       flex: 0 0 auto;
       margin-left: 1em;
       font-size: 0.7em;
-      color: $fallback--text;
-      color: var(--text, $fallback--text);
+      color: var(--text);
     }
 
     .user-role {
       flex: none;
-      color: $fallback--text;
-      color: var(--alertNeutralText, $fallback--text);
-      background-color: $fallback--fg;
-      background-color: var(--alertNeutral, $fallback--fg);
     }
   }
 
@@ -241,6 +204,11 @@
 
     --emoji-size: 1.7em;
 
+    .RichContent {
+      /* stylelint-disable-next-line declaration-no-important */
+      --link: var(--text) !important;
+    }
+
     .top-line,
     .bottom-line {
       display: flex;
@@ -334,8 +302,6 @@
   padding: 0.5em 1.5em 0;
   text-align: center;
   justify-content: space-between;
-  color: $fallback--lightText;
-  color: var(--lightText, $fallback--lightText);
   flex-wrap: wrap;
 }
 
@@ -355,8 +321,3 @@
     text-decoration: none;
   }
 }
-
-.mute-expiry {
-  display: flex;
-  flex-direction: row;
-}
diff --git a/src/components/user_card/user_card.style.js b/src/components/user_card/user_card.style.js
new file mode 100644
index 000000000..3d5bb2989
--- /dev/null
+++ b/src/components/user_card/user_card.style.js
@@ -0,0 +1,42 @@
+export default {
+  name: 'UserCard',
+  selector: '.user-card',
+  notEditable: true,
+  validInnerComponents: [
+    'Text',
+    'Link',
+    'Icon',
+    'Button',
+    'ButtonUnstyled',
+    'Input',
+    'RichContent',
+    'Alert'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        background: '--bg',
+        opacity: 0,
+        roundness: 3,
+        shadow: [{
+          x: 1,
+          y: 1,
+          blur: 4,
+          spread: 0,
+          color: '#000000',
+          alpha: 0.6
+        }],
+        '--profileTint': 'color | $alpha(--background 0.5)'
+      }
+    },
+    {
+      parent: {
+        component: 'UserCard'
+      },
+      component: 'RichContent',
+      directives: {
+        opacity: 0
+      }
+    }
+  ]
+}
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 2de14063d..11c3e047a 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -8,7 +8,7 @@
       :style="style"
       class="background-image"
     />
-    <div :class="onClose ? '' : panel-heading -flexible-height">
+    <div :class="onClose ? '' : 'panel-heading -flexible-height'">
       <div class="user-info">
         <div class="container">
           <a
@@ -16,10 +16,7 @@
             class="user-info-avatar -link"
             @click="zoomAvatar"
           >
-            <UserAvatar
-              :better-shadow="betterShadow"
-              :user="user"
-            />
+            <UserAvatar :user="user" />
             <div class="user-info-avatar -link -overlay">
               <FAIcon
                 class="fa-scale-110 fa-old-padding"
@@ -30,7 +27,6 @@
           <UserAvatar
             v-else-if="typeof avatarAction === 'function'"
             class="user-info-avatar"
-            :better-shadow="betterShadow"
             :user="user"
             @click="avatarAction"
           />
@@ -38,10 +34,7 @@
             v-else
             :to="userProfileLink(user)"
           >
-            <UserAvatar
-              :better-shadow="betterShadow"
-              :user="user"
-            />
+            <UserAvatar :user="user" />
           </router-link>
           <div class="user-summary">
             <div class="top-line">
@@ -113,22 +106,28 @@
               <template v-if="!hideBio">
                 <span
                   v-if="user.deactivated"
-                  class="alert user-role"
+                  class="alert neutral user-role"
                 >
                   {{ $t('user_card.deactivated') }}
                 </span>
                 <span
                   v-if="!!visibleRole"
-                  class="alert user-role"
+                  class="alert neutral user-role"
                 >
                   {{ $t(`general.role.${visibleRole}`) }}
                 </span>
                 <span
-                  v-if="user.bot"
-                  class="alert user-role"
+                  v-if="user.actor_type === 'Service'"
+                  class="alert neutral user-role"
                 >
                   {{ $t('user_card.bot') }}
                 </span>
+                <span
+                  v-if="user.actor_type === 'Group'"
+                  class="alert user-role"
+                >
+                  {{ $t('user_card.group') }}
+                </span>
               </template>
               <span v-if="user.locked">
                 <FAIcon
@@ -160,14 +159,14 @@
               v-if="userHighlightType !== 'disabled'"
               :id="'userHighlightColorTx'+user.id"
               v-model="userHighlightColor"
-              class="userHighlightText"
+              class="input userHighlightText"
               type="text"
             >
             <input
               v-if="userHighlightType !== 'disabled'"
               :id="'userHighlightColor'+user.id"
               v-model="userHighlightColor"
-              class="userHighlightCl"
+              class="input userHighlightCl"
               type="color"
             >
             {{ ' ' }}
@@ -202,7 +201,7 @@
             />
             <template v-if="relationship.following">
               <ProgressButton
-                v-if="!relationship.subscribing"
+                v-if="!relationship.notifying"
                 class="btn button-default"
                 :click="subscribeUser"
                 :title="$t('user_card.subscribe')"
@@ -276,10 +275,7 @@
         />
       </div>
     </div>
-    <div
-      v-if="!hideBio"
-      class="panel-body"
-    >
+    <div v-if="!hideBio">
       <div
         v-if="!mergedConfig.hideUserStats && switcher"
         class="user-counts"
@@ -315,51 +311,11 @@
       />
     </div>
     <teleport to="#modal">
-      <confirm-modal
-        v-if="showingConfirmMute"
-        :title="$t('user_card.mute_confirm_title')"
-        :confirm-text="$t('user_card.mute_confirm_accept_button')"
-        :cancel-text="$t('user_card.mute_confirm_cancel_button')"
-        @accepted="doMuteUser"
-        @cancelled="hideConfirmMute"
-      >
-        <i18n-t
-          keypath="user_card.mute_confirm"
-          tag="div"
-        >
-          <template #user>
-            <span
-              v-text="user.screen_name_ui"
-            />
-          </template>
-        </i18n-t>
-        <div
-          class="mute-expiry"
-        >
-          <label>
-            {{ $t('user_card.mute_duration_prompt') }}
-          </label>
-          <input
-            v-model="muteExpiryAmount"
-            type="number"
-            class="expiry-amount hide-number-spinner"
-            :min="0"
-          >
-          <Select
-            v-model="muteExpiryUnit"
-            unstyled="true"
-            class="expiry-unit"
-          >
-            <option
-              v-for="unit in muteExpiryUnits"
-              :key="unit"
-              :value="unit"
-            >
-              {{ $t(`time.${unit}_short`, ['']) }}
-            </option>
-          </Select>
-        </div>
-      </confirm-modal>
+      <MuteConfirm
+        ref="confirmation"
+        type="user"
+        :user="user"
+      />
     </teleport>
   </div>
 </template>
diff --git a/src/components/user_link/user_link.vue b/src/components/user_link/user_link.vue
index efd96e12a..80b941d32 100644
--- a/src/components/user_link/user_link.vue
+++ b/src/components/user_link/user_link.vue
@@ -1,12 +1,16 @@
 <template>
-  <router-link
-    :title="user.screen_name_ui"
-    :to="userProfileLink(user)"
-  >
-    {{ at ? '@' : '' }}{{ user.screen_name_ui }}<UnicodeDomainIndicator
-      :user="user"
-    />
-  </router-link>
+  <div class="user-profile-link">
+    <router-link
+      :title="user.screen_name_ui"
+      :to="userProfileLink(user)"
+    >
+      <slot>
+        {{ at ? '@' : '' }}{{ user.screen_name_ui }}<UnicodeDomainIndicator
+          :user="user"
+        />
+      </slot>
+    </router-link>
+  </div>
 </template>
 
 <script>
diff --git a/src/components/user_list_menu/user_list_menu.js b/src/components/user_list_menu/user_list_menu.js
index 7b2fa8c45..9f2001494 100644
--- a/src/components/user_list_menu/user_list_menu.js
+++ b/src/components/user_list_menu/user_list_menu.js
@@ -35,6 +35,11 @@ const UserListMenu = {
         ...list,
         inList: this.inListsSet.has(list.id)
       }))
+    },
+    triggerAttrs () {
+      return {
+        class: 'menu-item dropdown-item -has-submenu'
+      }
     }
   },
   methods: {
diff --git a/src/components/user_list_menu/user_list_menu.vue b/src/components/user_list_menu/user_list_menu.vue
index 06947ab7e..8b14b61ed 100644
--- a/src/components/user_list_menu/user_list_menu.vue
+++ b/src/components/user_list_menu/user_list_menu.vue
@@ -2,34 +2,39 @@
   <div class="UserListMenu">
     <Popover
       trigger="hover"
-      placement="left"
+      placement="right"
+      :trigger-attrs="triggerAttrs"
       remove-padding
     >
       <template #content>
         <div class="dropdown-menu">
-          <button
+          <div
             v-for="list in lists"
             :key="list.id"
-            class="button-default dropdown-item"
-            @click="toggleList(list.id)"
+            class="menu-item dropdown-item -icon"
           >
-            <span
-              class="menu-checkbox"
-              :class="{ 'menu-checkbox-checked': list.inList }"
-            />
-            {{ list.title }}
-          </button>
+            <button
+              class="main-button"
+              @click="toggleList(list.id)"
+            >
+              <span
+                class="input menu-checkbox"
+                :class="{ 'menu-checkbox-checked': list.inList }"
+              />
+              {{ list.title }}
+            </button>
+          </div>
         </div>
       </template>
       <template #trigger>
-        <button class="btn button-default dropdown-item -has-submenu">
+        <span class="main-button">
           {{ $t('lists.manage_lists') }}
           <FAIcon
             class="chevron-icon"
             size="lg"
             icon="chevron-right"
           />
-        </button>
+        </span>
       </template>
     </Popover>
   </div>
diff --git a/src/components/user_list_popover/user_list_popover.vue b/src/components/user_list_popover/user_list_popover.vue
index 8307cc8af..293a47094 100644
--- a/src/components/user_list_popover/user_list_popover.vue
+++ b/src/components/user_list_popover/user_list_popover.vue
@@ -48,12 +48,10 @@
 <script src="./user_list_popover.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .user-list-popover {
   padding: 0.5em;
 
-  --emoji-size: 16px;
+  --emoji-size: calc(var(--emojiSize, 32px) / 2);
 
   .user-list-row {
     padding: 0.25em;
diff --git a/src/components/user_note/user_note.vue b/src/components/user_note/user_note.vue
index 4e05951fc..e175ced00 100644
--- a/src/components/user_note/user_note.vue
+++ b/src/components/user_note/user_note.vue
@@ -33,7 +33,7 @@
     <textarea
       v-show="editing"
       v-model="localNote"
-      class="note-text"
+      class="input note-text"
     />
     <span
       v-show="!editing"
@@ -48,8 +48,6 @@
 <script src="./user_note.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .user-note {
   display: flex;
   flex-direction: column;
@@ -82,7 +80,7 @@
 
   .note-text.-blank {
     font-style: italic;
-    color: var(--faint, $fallback--faint);
+    color: var(--textFaint);
   }
 }
 </style>
diff --git a/src/components/user_panel/user_panel.vue b/src/components/user_panel/user_panel.vue
index 95ec97afe..9323b65e7 100644
--- a/src/components/user_panel/user_panel.vue
+++ b/src/components/user_panel/user_panel.vue
@@ -22,8 +22,15 @@
 <script src="./user_panel.js"></script>
 
 <style lang="scss">
-.user-panel .signed-in {
-  overflow: visible;
-  z-index: 10;
+.user-panel {
+  .panel {
+    background: var(--background);
+    backdrop-filter: var(--backdrop-filter);
+  }
+
+  .signed-in {
+    overflow: visible;
+    z-index: 10;
+  }
 }
 </style>
diff --git a/src/components/user_popover/user_popover.vue b/src/components/user_popover/user_popover.vue
index 3b2bbc452..413b254cc 100644
--- a/src/components/user_popover/user_popover.vue
+++ b/src/components/user_popover/user_popover.vue
@@ -24,8 +24,6 @@
 <script src="./user_popover.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 /* popover styles load on-demand, so we need to override */
 /* stylelint-disable block-no-empty */
 .user-popover.popover {
diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js
index acb612ed4..751bfd5a0 100644
--- a/src/components/user_profile/user_profile.js
+++ b/src/components/user_profile/user_profile.js
@@ -80,6 +80,9 @@ const UserProfile = {
     followersTabVisible () {
       return this.isUs || !this.user.hide_followers
     },
+    favoritesTabVisible () {
+      return this.isUs || !this.user.hide_favorites
+    },
     formattedBirthday () {
       const browserLocale = localeService.internalToBrowserLocale(this.$i18n.locale)
       return this.user.birthday && new Date(Date.parse(this.user.birthday)).toLocaleDateString(browserLocale, { timeZone: 'UTC', day: 'numeric', month: 'long', year: 'numeric' })
@@ -103,6 +106,8 @@ const UserProfile = {
         startFetchingTimeline('user', userId)
         startFetchingTimeline('media', userId)
         if (this.isUs) {
+          startFetchingTimeline('favorites')
+        } else if (!this.user.hide_favorites) {
           startFetchingTimeline('favorites', userId)
         }
         // Fetch all pinned statuses immediately
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index c63a303cd..103074a23 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -4,52 +4,54 @@
       v-if="user"
       class="user-profile panel panel-default"
     >
-      <UserCard
-        :user-id="userId"
-        :switcher="true"
-        :selected="timeline.viewing"
-        avatar-action="zoom"
-        rounded="top"
-        :has-note-editor="true"
-      />
-      <span
-        v-if="!!user.birthday"
-        class="user-birthday"
-      >
-        <FAIcon
-          class="fa-old-padding"
-          icon="birthday-cake"
+      <div class="panel-body">
+        <UserCard
+          :user-id="userId"
+          :switcher="true"
+          :selected="timeline.viewing"
+          avatar-action="zoom"
+          rounded="top"
+          :has-note-editor="true"
         />
-        {{ $t('user_card.birthday', { birthday: formattedBirthday }) }}
-      </span>
-      <div
-        v-if="user.fields_html && user.fields_html.length > 0"
-        class="user-profile-fields"
-      >
-        <dl
-          v-for="(field, index) in user.fields_html"
-          :key="index"
-          class="user-profile-field"
+        <span
+          v-if="!!user.birthday"
+          class="user-birthday"
         >
-          <dt
-            :title="user.fields_text[index].name"
-            class="user-profile-field-name"
+          <FAIcon
+            class="fa-old-padding"
+            icon="birthday-cake"
+          />
+          {{ $t('user_card.birthday', { birthday: formattedBirthday }) }}
+        </span>
+        <div
+          v-if="user.fields_html && user.fields_html.length > 0"
+          class="user-profile-fields"
+        >
+          <dl
+            v-for="(field, index) in user.fields_html"
+            :key="index"
+            class="user-profile-field"
           >
-            <RichContent
-              :html="field.name"
-              :emoji="user.emoji"
-            />
-          </dt>
-          <dd
-            :title="user.fields_text[index].value"
-            class="user-profile-field-value"
-          >
-            <RichContent
-              :html="field.value"
-              :emoji="user.emoji"
-            />
-          </dd>
-        </dl>
+            <dt
+              :title="user.fields_text[index].name"
+              class="user-profile-field-name"
+            >
+              <RichContent
+                :html="field.name"
+                :emoji="user.emoji"
+              />
+            </dt>
+            <dd
+              :title="user.fields_text[index].value"
+              class="user-profile-field-value"
+            >
+              <RichContent
+                :html="field.value"
+                :emoji="user.emoji"
+              />
+            </dd>
+          </dl>
+        </div>
       </div>
       <tab-switcher
         :active-tab="tab"
@@ -72,10 +74,14 @@
         <div
           v-if="followsTabVisible"
           key="followees"
+          class="panel-body"
           :label="$t('user_card.followees')"
           :disabled="!user.friends_count"
         >
-          <FriendList :user-id="userId">
+          <FriendList
+            :user-id="userId"
+            :non-interactive="true"
+          >
             <template #item="{item}">
               <FollowCard :user="item" />
             </template>
@@ -84,10 +90,14 @@
         <div
           v-if="followersTabVisible"
           key="followers"
+          class="panel-body"
           :label="$t('user_card.followers')"
           :disabled="!user.followers_count"
         >
-          <FollowerList :user-id="userId">
+          <FollowerList
+            :user-id="userId"
+            :non-interactive="true"
+          >
             <template #item="{item}">
               <FollowCard
                 :user="item"
@@ -109,7 +119,7 @@
           :footer-slipgate="footerRef"
         />
         <Timeline
-          v-if="isUs"
+          v-if="favoritesTabVisible"
           key="favorites"
           :label="$t('user_card.favorites')"
           :disabled="!favorites.visibleStatuses.length"
@@ -117,6 +127,7 @@
           :title="$t('user_card.favorites')"
           timeline-name="favorites"
           :timeline="favorites"
+          :user-id="isUs ? undefined : userId"
           :in-profile="true"
           :footer-slipgate="footerRef"
         />
@@ -131,11 +142,11 @@
       class="panel user-profile-placeholder"
     >
       <div class="panel-heading">
-        <div class="title">
+        <h1 class="title">
           {{ $t('settings.profile_tab') }}
-        </div>
+        </h1>
       </div>
-      <div class="panel-body">
+      <div>
         <span v-if="error">{{ error }}</span>
         <FAIcon
           v-else
@@ -150,14 +161,12 @@
 <script src="./user_profile.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .user-profile {
   flex: 2;
   flex-basis: 500px;
 
   // No sticky header on user profile
-  --currentPanelStack: 1;
+  --currentPanelStack: 0;
 
   .user-birthday {
     margin: 0 0.75em 0.5em;
@@ -181,9 +190,8 @@
     .user-profile-field {
       display: flex;
       margin: 0.25em;
-      border: 1px solid var(--border, $fallback--border);
-      border-radius: $fallback--inputRadius;
-      border-radius: var(--inputRadius, $fallback--inputRadius);
+      border: 1px solid var(--border);
+      border-radius: var(--roundness);
 
       .user-profile-field-name {
         flex: 0 1 30%;
@@ -191,7 +199,7 @@
         text-align: right;
         color: var(--lightText);
         min-width: 120px;
-        border-right: 1px solid var(--border, $fallback--border);
+        border-right: 1px solid var(--border);
       }
 
       .user-profile-field-value {
@@ -228,4 +236,5 @@
     padding: 7em;
   }
 }
+
 </style>
diff --git a/src/components/user_reporting_modal/user_reporting_modal.vue b/src/components/user_reporting_modal/user_reporting_modal.vue
index 092c514ec..100d1e7f7 100644
--- a/src/components/user_reporting_modal/user_reporting_modal.vue
+++ b/src/components/user_reporting_modal/user_reporting_modal.vue
@@ -6,7 +6,7 @@
     <div class="user-reporting-panel panel">
       <div class="panel-heading">
         <i18n-t
-          tag="div"
+          tag="h1"
           keypath="user_reporting.title"
           class="title"
         >
@@ -19,7 +19,7 @@
             <p>{{ $t('user_reporting.add_comment_description') }}</p>
             <textarea
               v-model="comment"
-              class="form-control"
+              class="input form-control"
               :placeholder="$t('user_reporting.additional_comments')"
               rows="1"
               @input="resize"
@@ -72,8 +72,6 @@
 <script src="./user_reporting_modal.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .user-reporting-panel {
   width: 90vw;
   max-width: 700px;
@@ -84,8 +82,7 @@
     display: flex;
     flex-direction: column-reverse;
     border-top: 1px solid;
-    border-color: $fallback--border;
-    border-color: var(--border, $fallback--border);
+    border-color: var(--border);
     overflow: hidden;
   }
 
@@ -155,8 +152,7 @@
       width: 50%;
       max-width: 320px;
       border-right: 1px solid;
-      border-color: $fallback--border;
-      border-color: var(--border, $fallback--border);
+      border-color: var(--border);
       padding: 1.1em;
 
       > div {
diff --git a/src/components/video_attachment/video_attachment.js b/src/components/video_attachment/video_attachment.js
index 107b89855..eb17223a1 100644
--- a/src/components/video_attachment/video_attachment.js
+++ b/src/components/video_attachment/video_attachment.js
@@ -1,4 +1,3 @@
-
 const VideoAttachment = {
   props: ['attachment', 'controls'],
   data () {
diff --git a/src/components/video_attachment/video_attachment.vue b/src/components/video_attachment/video_attachment.vue
index 8a3ea1e3a..df7631436 100644
--- a/src/components/video_attachment/video_attachment.vue
+++ b/src/components/video_attachment/video_attachment.vue
@@ -2,7 +2,7 @@
   <video
     class="video"
     preload="metadata"
-    :src="attachment.url"
+    :src="attachment.url + '#t=0.00000000000001'"
     :loop="loopVideo"
     :controls="controls"
     :alt="attachment.description"
diff --git a/src/components/who_to_follow/who_to_follow.vue b/src/components/who_to_follow/who_to_follow.vue
index 56543d91b..7cb4d4766 100644
--- a/src/components/who_to_follow/who_to_follow.vue
+++ b/src/components/who_to_follow/who_to_follow.vue
@@ -1,7 +1,9 @@
 <template>
   <div class="panel panel-default">
     <div class="panel-heading">
-      {{ $t('who_to_follow.who_to_follow') }}
+      <h1 class="title">
+        {{ $t('who_to_follow.who_to_follow') }}
+      </h1>
     </div>
     <div class="panel-body">
       <FollowCard
diff --git a/src/components/who_to_follow_panel/who_to_follow_panel.vue b/src/components/who_to_follow_panel/who_to_follow_panel.vue
index 0fecec0bd..92d6f6d7c 100644
--- a/src/components/who_to_follow_panel/who_to_follow_panel.vue
+++ b/src/components/who_to_follow_panel/who_to_follow_panel.vue
@@ -2,9 +2,9 @@
   <div class="who-to-follow-panel">
     <div class="panel panel-default base01-background">
       <div class="panel-heading timeline-heading base02-background base04">
-        <div class="title">
+        <h1 class="title">
           {{ $t('who_to_follow.who_to_follow') }}
-        </div>
+        </h1>
       </div>
       <div class="who-to-follow">
         <p
diff --git a/src/hocs/with_load_more/with_load_more.jsx b/src/hocs/with_load_more/with_load_more.jsx
index c0ae18561..4e5bb50f1 100644
--- a/src/hocs/with_load_more/with_load_more.jsx
+++ b/src/hocs/with_load_more/with_load_more.jsx
@@ -98,7 +98,7 @@ const withLoadMore = ({
               </button>
             }
             {!this.error && this.loading && <FAIcon spin icon="circle-notch"/>}
-            {!this.error && !this.loading && !this.bottomedOut && <a onClick={this.fetchEntries}>{this.$t('general.more')}</a>}
+            {!this.error && !this.loading && !this.bottomedOut && <a onClick={this.fetchEntries} role="button" tabindex="0">{this.$t('general.more')}</a>}
           </div>
         </div>
       )
diff --git a/src/hocs/with_load_more/with_load_more.scss b/src/hocs/with_load_more/with_load_more.scss
index bad852f4b..524e4012f 100644
--- a/src/hocs/with_load_more/with_load_more.scss
+++ b/src/hocs/with_load_more/with_load_more.scss
@@ -1,12 +1,9 @@
-@import "../../variables";
-
 .with-load-more {
   &-footer {
     padding: 10px;
     text-align: center;
     border-top: 1px solid;
-    border-top-color: $fallback--border;
-    border-top-color: var(--border, $fallback--border);
+    border-top-color: var(--border);
 
     .error {
       font-size: 1rem;
diff --git a/src/i18n/ar.json b/src/i18n/ar.json
index cd9a410a4..0fd79af0a 100644
--- a/src/i18n/ar.json
+++ b/src/i18n/ar.json
@@ -9,7 +9,8 @@
     "scope_options": "",
     "text_limit": "الحد الأقصى للنص",
     "title": "الميّزات",
-    "who_to_follow": "للمتابعة"
+    "who_to_follow": "للمتابعة",
+    "upload_limit": "حد الرفع"
   },
   "finder": {
     "error_fetching_user": "خطأ أثناء جلب صفحة المستخدم",
@@ -17,7 +18,37 @@
   },
   "general": {
     "apply": "تطبيق",
-    "submit": "إرسال"
+    "submit": "إرسال",
+    "error_retry": "حاول مجددًا",
+    "retry": "حاول مجدداً",
+    "optional": "اختياري",
+    "show_more": "اعرض المزيد",
+    "show_less": "اعرض أقل",
+    "cancel": "ألغ",
+    "disable": "عطّل",
+    "enable": "فعّل",
+    "confirm": "تأكيد",
+    "close": "أغلق",
+    "role": {
+      "admin": "مدير",
+      "moderator": "مشرف"
+    },
+    "generic_error_message": "حدث خطأ: {0}",
+    "never_show_again": "لا تظهره مجددًا",
+    "yes": "نعم",
+    "no": "لا",
+    "unpin": "ألغ تثبيت العنصر",
+    "undo": "تراجع",
+    "more": "المزيد",
+    "loading": "يحمل…",
+    "generic_error": "حدث خطأ",
+    "scope_in_timeline": {
+      "private": "المتابِعون فقط",
+      "public": "علني",
+      "unlisted": "غير مدرج"
+    },
+    "scroll_to_top": "مرر لأعلى",
+    "pin": "ثبت العنصر"
   },
   "login": {
     "login": "تسجيل الدخول",
@@ -25,7 +56,21 @@
     "password": "الكلمة السرية",
     "placeholder": "مثال lain",
     "register": "انشاء حساب",
-    "username": "إسم المستخدم"
+    "username": "إسم المستخدم",
+    "logout_confirm_title": "تأكيد الخروج",
+    "logout_confirm": "أتريد الخروج؟",
+    "logout_confirm_accept_button": "خروج",
+    "logout_confirm_cancel_button": "لا تخرج",
+    "hint": "لِج للانضمام للمناقشة",
+    "authentication_code": "رمز الاستيثاق",
+    "enter_recovery_code": "أدخل رمز التأكيد",
+    "enter_two_factor_code": "أدخل رمز الاستيثاق بعاملين",
+    "recovery_code": "رمز الاستعادة",
+    "heading": {
+      "totp": "الاستيثاق بعاملين",
+      "recovery": "الاستيثاق بعاملين"
+    },
+    "description": "لج باستخدام OAuth"
   },
   "nav": {
     "chat": "الدردشة المحلية",
@@ -33,42 +78,108 @@
     "mentions": "الإشارات",
     "public_tl": "الخيط الزمني العام",
     "timeline": "الخيط الزمني",
-    "twkn": "كافة الشبكة المعروفة"
+    "twkn": "كافة الشبكة المعروفة",
+    "search_close": "أغلق شربط البحث",
+    "back": "للخلف",
+    "administration": "الإدارة",
+    "preferences": "التفضيلات",
+    "chats": "المحادثات",
+    "lists": "القوائم",
+    "edit_nav_mobile": "خصص شريط التنقل",
+    "edit_pinned": "حرر العناصر المثبتة",
+    "mobile_notifications_close": "أغلق الاشعارات",
+    "announcements": "إعلانات",
+    "home_timeline": "الخط الزمني الرئيس",
+    "search": "بحث",
+    "who_to_follow": "للمتابعة",
+    "dms": "رسالة شخصية",
+    "edit_finish": "تم التحرير",
+    "timelines": "الخيوط الزمنية",
+    "mobile_notifications": "افتح الإشعارات (تتواجد اشعارات غير مقروءة)",
+    "about": "حول",
+    "user_search": "بحث عن مستخدم"
   },
   "notifications": {
     "broken_favorite": "منشور مجهول، جارٍ البحث عنه…",
     "favorited_you": "أعجِب بمنشورك",
     "followed_you": "يُتابعك",
     "load_older": "تحميل الإشعارات الأقدم",
-    "notifications": "الإخطارات",
+    "notifications": "الاشعارات",
     "read": "مقروء!",
-    "repeated_you": "شارَك منشورك"
+    "repeated_you": "شارَك منشورك",
+    "error": "خطأ أثناء جلب الاشعارات: {0}",
+    "follow_request": "يريد متابعتك",
+    "poll_ended": "انتهى الاستطلاع",
+    "no_more_notifications": "لا مزيد من الإشعارات",
+    "reacted_with": "تفاعل بـ{0}",
+    "submitted_report": "أرسل بلاغًا",
+    "migrated_to": "انتقلَ إلى"
   },
   "post_status": {
-    "account_not_locked_warning": "",
+    "account_not_locked_warning": "حسابك ليس {0}. يمكن للجميع مشاهدة مشاركاتك المحصورة على المتابِعين.",
     "account_not_locked_warning_link": "مقفل",
     "attachments_sensitive": "اعتبر المرفقات كلها كمحتوى حساس",
     "content_type": {
-      "text/plain": "نص صافٍ"
+      "text/plain": "نص صِرف",
+      "text/html": "HTML",
+      "text/markdown": "ماركداون"
     },
     "content_warning": "الموضوع (اختياري)",
     "default": "وصلت للتوّ إلى لوس أنجلس.",
     "direct_warning": "",
     "posting": "النشر",
     "scope": {
-      "direct": "",
-      "private": "",
+      "direct": "مباشر - شارك مع المستخدمين المذكورين فقط",
+      "private": "للمتابِعين فقط - شارك حصرًا مع المتابِعين",
       "public": "علني - يُنشر على الخيوط الزمنية العمومية",
       "unlisted": "غير مُدرَج - لا يُنشَر على الخيوط الزمنية العمومية"
-    }
+    },
+    "media_description": "وصف الوسائط",
+    "direct_warning_to_all": "سيكون عذا المنشور مرئيًا لكل المستخدمين المذكورين.",
+    "post": "انشر",
+    "preview": "معاينة",
+    "preview_empty": "فارغ",
+    "scope_notice": {
+      "public": "سيكون هذا المنشور مرئيًا للجميع",
+      "private": "سيكون هذا المنشور مرئيا لمتابِعيك فقط",
+      "unlisted": "لن تظهر هته المشاركة في الخط الزمني العلني والشبكات العلنية"
+    },
+    "direct_warning_to_first_only": "سيكون عذا المنشور مرئيًا للمستخدمين المذكورين في أول الرسالة.",
+    "edit_unsupported_warning": "بليروما لا يدعم تعديل الذكر والاستطلاع.",
+    "empty_status_error": "يتعذر نشر منشور فارغ دون ملفات",
+    "edit_status": "حرر الحالة",
+    "new_status": "انشر حالة جديدة",
+    "content_type_selection": "نسق المشاركة",
+    "scope_notice_dismiss": "أغلق هذا التنبيه",
+    "media_description_error": "فشل تحديث الوسائط، حاول مجددًا"
   },
   "registration": {
     "bio": "السيرة الذاتية",
     "email": "عنوان البريد الإلكتروني",
-    "fullname": "الإسم المعروض",
+    "fullname": "الاسم العلني",
     "password_confirm": "تأكيد الكلمة السرية",
     "registration": "التسجيل",
-    "token": "رمز الدعوة"
+    "token": "رمز الدعوة",
+    "bio_optional": "سيرة (اختيارية)",
+    "email_optional": "بيرد إلكتروني (اختياري)",
+    "username_placeholder": "مثل lain",
+    "reason": "سبب التسجيل",
+    "register": "سجل",
+    "validations": {
+      "username_required": "لايمكن تركه فارغًا",
+      "email_required": "لايمكن تركه فارغًا",
+      "password_required": "لايمكن تركه فارغًا",
+      "password_confirmation_required": "لايمكن تركه فارغًا",
+      "fullname_required": "لايمكن تركه فارغًا",
+      "password_confirmation_match": "يلزم أن يطابق كلمة السر",
+      "birthday_required": "لايمكن تركه فارغًا",
+      "birthday_min_age": "يلزم أن يكون في {date} أو قبله"
+    },
+    "fullname_placeholder": "مثل Lain Iwakura",
+    "reason_placeholder": "قبول التسجيل في هذا المثيل يستلزم موافقة المدير\nلهذا يجب عليك إعلامه بسبب التسجيل.",
+    "birthday_optional": "تاريخ الميلاد (اختياري):",
+    "email_language": "بأي لغة تريد استلام رسائل البريد الإلكتروني؟",
+    "birthday": "تاريخ الميلاد:"
   },
   "settings": {
     "attachmentRadius": "المُرفَقات",
@@ -83,9 +194,9 @@
     "cGreen": "أخضر (إعادة النشر)",
     "cOrange": "برتقالي (مفضلة)",
     "cRed": "أحمر (إلغاء)",
-    "change_password": "تغيير كلمة السر",
-    "change_password_error": "وقع هناك خلل أثناء تعديل كلمتك السرية.",
-    "changed_password": "تم تغيير كلمة المرور بنجاح!",
+    "change_password": "غيّر كلمة السر",
+    "change_password_error": "حدث خلل أثناء تعديل كلمتك السرية.",
+    "changed_password": "نجح تغيير كلمة السر!",
     "collapse_subject": "",
     "confirm_new_password": "تأكيد كلمة السر الجديدة",
     "current_avatar": "صورتك الرمزية الحالية",
@@ -94,108 +205,449 @@
     "data_import_export_tab": "تصدير واستيراد البيانات",
     "default_vis": "أسلوب العرض الافتراضي",
     "delete_account": "حذف الحساب",
-    "delete_account_description": "حذف حسابك و كافة منشوراتك نهائيًا.",
-    "delete_account_error": "",
+    "delete_account_description": "حذف حسابك و كافة بياناتك نهائيًا.",
+    "delete_account_error": "حدثة مشكلة اثناء حذف حسابك، إذا استمرت تواصل مع مدير المثيل.",
     "delete_account_instructions": "يُرجى إدخال كلمتك السرية أدناه لتأكيد عملية حذف الحساب.",
     "export_theme": "حفظ النموذج",
-    "filtering": "التصفية",
+    "filtering": "الترشيح",
     "filtering_explanation": "سيتم إخفاء كافة المنشورات التي تحتوي على هذه الكلمات، كلمة واحدة في كل سطر",
     "follow_export": "تصدير الاشتراكات",
     "follow_export_button": "تصدير الاشتراكات كملف csv",
     "follow_export_processing": "التصدير جارٍ، سوف يُطلَب منك تنزيل ملفك بعد حين",
     "follow_import": "استيراد الاشتراكات",
     "follow_import_error": "خطأ أثناء استيراد المتابِعين",
-    "follows_imported": "",
+    "follows_imported": "أُستورد المتابِعون! معالجتهم ستستغرق بعض الوقت.",
     "foreground": "الأمامية",
     "general": "الإعدادات العامة",
-    "hide_attachments_in_convo": "إخفاء المرفقات على المحادثات",
-    "hide_attachments_in_tl": "إخفاء المرفقات على الخيط الزمني",
-    "hide_post_stats": "",
-    "hide_user_stats": "",
-    "import_followers_from_a_csv_file": "",
+    "hide_attachments_in_convo": "اخف المرفقات من المحادثات",
+    "hide_attachments_in_tl": "اخف المرفقات من الخيط الزمني",
+    "hide_post_stats": "اخف احصائيات المنشور (مثل عدد التفضيلات)",
+    "hide_user_stats": "اخف احصائيات المستخدم (مثل عدد المتابِعين)",
+    "import_followers_from_a_csv_file": "استورد المتابِعين من ملف csv",
     "import_theme": "تحميل نموذج",
     "inputRadius": "",
-    "instance_default": "",
+    "instance_default": "(الافتراضي: {value})",
     "interfaceLanguage": "لغة الواجهة",
-    "invalid_theme_imported": "",
+    "invalid_theme_imported": "الملف المختار ليس سمة تدعمها بليروما.لن تطرأ تغييرات على سمتك.",
     "limited_availability": "غير متوفر على متصفحك",
     "links": "الروابط",
     "lock_account_description": "",
-    "loop_video": "",
-    "loop_video_silent_only": "",
+    "loop_video": "كرر تشغيل الفيديوهات",
+    "loop_video_silent_only": "كرر فيديوهات بدون صوت (مثل gif في ماستودون)",
     "name": "الاسم",
     "name_bio": "الاسم والسيرة الذاتية",
     "new_password": "كلمة السر الجديدة",
     "no_rich_text_description": "",
     "notification_visibility": "نوع الإشعارات التي تريد عرضها",
     "notification_visibility_follows": "يتابع",
-    "notification_visibility_likes": "الإعجابات",
-    "notification_visibility_mentions": "الإشارات",
-    "notification_visibility_repeats": "",
+    "notification_visibility_likes": "المفضلة",
+    "notification_visibility_mentions": "ذِكر",
+    "notification_visibility_repeats": "مشاركات",
     "nsfw_clickthrough": "",
     "oauth_tokens": "رموز OAuth",
     "token": "رمز",
     "refresh_token": "رمز التحديث",
     "valid_until": "صالح حتى",
     "revoke_token": "سحب",
-    "panelRadius": "",
+    "panelRadius": "لوحات",
     "pause_on_unfocused": "",
     "presets": "النماذج",
-    "profile_background": "خلفية الصفحة الشخصية",
+    "profile_background": "خلفية الملف التعريفي",
     "profile_banner": "رأسية الصفحة الشخصية",
-    "profile_tab": "الملف الشخصي",
+    "profile_tab": "الملف التعريفي",
     "radii_help": "",
-    "replies_in_timeline": "الردود على الخيط الزمني",
-    "reply_visibility_all": "عرض كافة الردود",
-    "reply_visibility_following": "",
-    "reply_visibility_self": "",
+    "replies_in_timeline": "المشاركات في الخيط الزمني",
+    "reply_visibility_all": "أظهر كل المشاركات",
+    "reply_visibility_following": "أظهر الردود الموجهة إلي أو لمتابَعي فقط",
+    "reply_visibility_self": "أظهر الردود الموجهة إلي فقط",
     "saving_err": "خطأ أثناء حفظ الإعدادات",
-    "saving_ok": "تم حفظ الإعدادات",
+    "saving_ok": "حُفظت الإعدادات",
     "security_tab": "الأمان",
     "set_new_avatar": "اختيار صورة رمزية جديدة",
     "set_new_profile_background": "اختيار خلفية جديدة للملف الشخصي",
     "set_new_profile_banner": "اختيار رأسية جديدة للصفحة الشخصية",
     "settings": "الإعدادات",
-    "stop_gifs": "",
-    "streaming": "",
-    "text": "النص",
-    "theme": "المظهر",
+    "stop_gifs": "إيقاف الصور المتحركة مالم يُمرر فوقها",
+    "streaming": "إظهار المنشورات الجديدة عند التمرير لأعلى",
+    "text": "نص",
+    "theme": "السمة",
     "theme_help": "",
     "tooltipRadius": "",
     "user_settings": "إعدادات المستخدم",
     "values": {
       "false": "لا",
       "true": "نعم"
-    }
+    },
+    "emoji_reactions_scale": "معامل تحجيم التفاعلات",
+    "app_name": "اسم تطبيق",
+    "security": "الأمن",
+    "enter_current_password_to_confirm": "أدخل كلمة السر الحالية لتيقن من هويتك",
+    "mfa": {
+      "title": "الاستيثاق بعاملين",
+      "generate_new_recovery_codes": "ولّد رموز استعادة جديدة",
+      "warning_of_generate_new_codes": "عند توليد رموز استعادة جديدة ستزال القديمة.",
+      "recovery_codes": "رموز الاستعادة.",
+      "recovery_codes_warning": "خزن هذه الرموز في مكان آمن. إذا فقدت هذه الرموز وتعذر عليك الوصول إلى تطبيق الاستيثاق بعاملين، لن تتمكن من الوصول لحسابك.",
+      "authentication_methods": "طرق الاستيثاق",
+      "scan": {
+        "title": "مسح",
+        "desc": "امسح رمز الاستجابة السريعة QR من تطبيق الاستيثاق أو أدخل المفتاح:",
+        "secret_code": "مفتاح"
+      },
+      "verify": {
+        "desc": "لتفعيل الاستيثاق بعاملين أدخل الرمز من تطبيق الاستيثاق:"
+      }
+    },
+    "block_import": "استيراد المحجوبين",
+    "import_mutes_from_a_csv_file": "استورد قائمة الخُرس من ملف csv",
+    "account_backup": "نسخ احتياطي للحساب",
+    "download_backup": "نزّل",
+    "account_backup_table_head": "نسخ احتياطي",
+    "backup_not_ready": "هذا النسخ الاحتياطي ليس جاهزًا.",
+    "backup_failed": "فشل النسخ الاحتياطي.",
+    "remove_backup": "أزل",
+    "list_backups_error": "خطأ أثناء حلب قائمة النُسخ الاحتياطية: {error}",
+    "added_backup": "أُضيفت نسخة احتياطية جديدة.",
+    "blocks_tab": "المحجوبون",
+    "confirm_dialogs_block": "حجب مستخدم",
+    "confirm_dialogs_mute": "إخراس مستخدم",
+    "confirm_dialogs_delete": "حذف حالة",
+    "confirm_dialogs_logout": "خروج",
+    "confirm_dialogs_approve_follow": "قبول متابِع",
+    "confirm_dialogs_deny_follow": "رفض متابِع",
+    "list_aliases_error": "خطأ أثناء جلب الكنيات: {error}",
+    "hide_list_aliases_error_action": "أغلق",
+    "remove_alias": "أزل هذه الكنية",
+    "add_alias_error": "حدث خطأ أثناء إضافة الكنية: {error}",
+    "confirm_dialogs": "أطلب تأكيدًا عند",
+    "confirm_dialogs_repeat": "مشاركة حالة",
+    "mutes_and_blocks": "الخُرس والمحجوبون",
+    "move_account_target": "الحساب المستهدف (مثل {example})",
+    "wordfilter": "ترشيح الكلمات",
+    "always_show_post_button": "أظهر الزر العائم لإنشاء منشور جديد دائمًا",
+    "hide_wallpaper": "اخف خلفية المثيل",
+    "save": "احفظ التعديلات",
+    "lists_navigation": "أظهر القوائم في شريط التنقل",
+    "mute_export_button": "صدّر قائمة الخرس إلى ملف csv",
+    "blocks_imported": "اُستورد المحجوبون! معالجة القائمة ستستغرق وقتًا.",
+    "mute_export": "تصدير الخُرس",
+    "mute_import": "استيراد الخُرس",
+    "mute_import_error": "خطأ أثناء استيراد الخُرس",
+    "change_email_error": "حدثت خلل أثناء تغيير بريدك الإلكتروني.",
+    "change_email": "غيّر البريد الإلكتروني",
+    "changed_email": "نجح تغيير البريد الإلكتروني!",
+    "account_alias_table_head": "الكنية",
+    "account_alias": "كنيات الحساب",
+    "move_account": "أنقل الحساب",
+    "moved_account": "نُقل الحساب.",
+    "hide_media_previews": "اخف معاينات الوسائط",
+    "hide_muted_posts": "اخف منشورات المستخدمين الخُرس",
+    "confirm_dialogs_unfollow": "الغاء متابعة مستخدم",
+    "confirm_dialogs_remove_follower": "إزالة متابع",
+    "new_alias_target": "أضف كنية جديدة (مثل {example})",
+    "added_alias": "أُضيفت الكنية.",
+    "move_account_error": "خطأ أثناء نقل الحساب: {error}",
+    "emoji_reactions_on_timeline": "أظهر التفاعلات في الخط الزمني",
+    "mutes_imported": "اُستورد الخُرس! معالجة القائمة ستستغرق وقتًا.",
+    "remove_language": "أزل",
+    "primary_language": "اللغة الرئيسية:",
+    "expert_mode": "أظهر الإعدادات المتقدمة",
+    "block_import_error": "خطأ أثناء استيراد قائمة المحجوبين",
+    "add_backup": "أنشئ نسخة احتياطية جديدة",
+    "add_backup_error": "خطأ أثناء إضافة نسخ احتياطي جديد: {error}",
+    "move_account_notes": "إذا أردت نقل حسابك عليك إضافة كنية تشير إلى هنا في الحساب المستهدف.",
+    "avatar_size_instruction": "أدنى حجم مستحسن للصورة الرمزية هو 150x150 بيكسل.",
+    "word_filter_and_more": "مرشح الكلمات والمزيد...",
+    "hide_all_muted_posts": "اخف المنشورات المكتومة",
+    "max_thumbnails": "أقصى عدد للصور المصغرة لكل منشور (فارغ = غير محدود)",
+    "block_export_button": "صدّر قائمة المحجوبين إلى ملف csv",
+    "block_export": "تصدير المحجوبين",
+    "use_one_click_nsfw": "افتح المرفقات ذات المحتوى الحساس NSFW بنقرة واحدة",
+    "account_privacy": "خصوصية",
+    "use_contain_fit": "لا تقتص الصور المصغرة للمرفقات",
+    "import_blocks_from_a_csv_file": "استورد المحجوبين من ملف csv",
+    "instance_default_simple": "(افتراضي)",
+    "interface": "واجهة",
+    "birthday": {
+      "label": "تاريخ الميلاد",
+      "show_birthday": "اظهر تاريخ ميلادي"
+    },
+    "profile_fields": {
+      "add_field": "أضف حقل",
+      "value": "محتوى",
+      "label": "البيانات الوصفية للملف الشخصي",
+      "name": "لصيقة"
+    },
+    "posts": "منشورات",
+    "user_profiles": "ملفات المستخدمين الشخصية",
+    "notification_visibility_emoji_reactions": "تفاعلات",
+    "notification_visibility_polls": "انتهاء استطلاعات اشتركت بها",
+    "file_export_import": {
+      "restore_settings": "استرجع الإعدادات من ملف",
+      "backup_restore": "نسخ احتياطي للإعدادات",
+      "backup_settings_theme": "احفظ النسخ الاحتياطي للإعدادات والسمة في ملف",
+      "backup_settings": "احفظ النسخ الاحتياطي للإعدادات في ملف"
+    },
+    "mutes_tab": "خُرس",
+    "no_mutes": "لا يوجد خُرس",
+    "hide_followers_count_description": "لا تظهر عدد المتابِعين",
+    "show_moderator_badge": "أظهر شارة \"مشرف\" في ملفي التعريفي",
+    "hide_follows_count_description": "لا تظهر عدد المتابَعين",
+    "hide_muted_threads": "اخف النقاشات المكتومة",
+    "no_blocks": "لا يوجد محجوبون",
+    "show_admin_badge": "أظهر شارة \"مدير\" في ملفي التعريفي",
+    "conversation_display_tree": "تفرعات",
+    "notification_setting_block_from_strangers": "احجب اشعارات من لا تتابعهم",
+    "style": {
+      "switcher": {
+        "clear_all": "امسح الكل",
+        "keep_as_is": "أبقه على حاله",
+        "use_snapshot": "النسخة القديمة",
+        "use_source": "النسخة الحديثة",
+        "load_theme": "حمِّل سمة",
+        "help": {
+          "upgraded_from_v2": "PleromaFE حُدث، وعليه ربما ستجد اختلافًا في السمة."
+        },
+        "keep_color": "أبق الألوان",
+        "keep_opacity": "أبق الشفافية",
+        "keep_fonts": "أبق الخطوط",
+        "keep_shadows": "أبق الظلال",
+        "clear_opacity": "امسح الشفافية"
+      },
+      "common": {
+        "color": "اللون",
+        "opacity": "الشافافية"
+      },
+      "advanced_colors": {
+        "top_bar": "شريط العلوي",
+        "icons": "أيقونات",
+        "poll": "منحنى الاستطلاع",
+        "_tab_label": "متقدم",
+        "badge_notification": "الإشعارات",
+        "selectedPost": "منشور محدد",
+        "selectedMenu": "عنصر محدد من قائمة",
+        "highlight": "عناصر بارزة",
+        "disabled": "معطل",
+        "tabs": "ألسنة",
+        "chat": {
+          "border": "حدود",
+          "incoming": "وارد",
+          "outgoing": "صادر"
+        },
+        "alert_warning": "تحذير",
+        "alert_error": "خطأ",
+        "buttons": "أزرار",
+        "borders": "الحدود",
+        "wallpaper": "خلفية",
+        "pressed": "مضغوط",
+        "inputs": "حقول إدخال"
+      },
+      "shadows": {
+        "components": {
+          "button": "زر",
+          "input": "حقل إدخال",
+          "topBar": "شريط العلوي",
+          "avatar": "الصورة الرمزية لمستخدم (في الملف الشخصي)",
+          "avatarStatus": "الصورة الرمزية لمستخدم (في منشور)"
+        },
+        "_tab_label": "الظلال والإضاءة",
+        "shadow_id": "ظل #{value}",
+        "blur": "طمس",
+        "spread": "توزع"
+      },
+      "fonts": {
+        "size": "حجم (بالبكسل)",
+        "_tab_label": "خطوط",
+        "components": {
+          "interface": "واجهة",
+          "input": "حقول الإدخال",
+          "post": "نص المنشور"
+        },
+        "family": "اسم الخط",
+        "custom": "مخصص"
+      },
+      "preview": {
+        "header": "معاينة",
+        "content": "محتوى",
+        "header_faint": "جيد",
+        "mono": "محتوى",
+        "button": "زر",
+        "input": "وصلت للتوّ إلى لوس أنجلس.",
+        "fine_print": "طالع {0} لتعلّم ما لا ينفعك!",
+        "error": "مثال خطأ",
+        "faint_link": "دليل للمساعدة"
+      },
+      "radii": {
+        "_tab_label": "الانحناء"
+      }
+    },
+    "notification_setting_privacy": "الخصوصية",
+    "notification_mutes": "لوقف استلام إشعارات من مستخدم، أخرسه.",
+    "search_user_to_mute": "جِد من تريد إخراسه",
+    "subject_input_always_show": "أظهر حقل الموضوع دائمًا",
+    "subject_line_noop": "لا تنسخ",
+    "auto_update": "أظهر المنشورات الجديدة تلقائيًا",
+    "mention_link_display": "اعرض روابط الذكر",
+    "more_settings": "إعدادات إضافية",
+    "user_mutes": "مستخدمون",
+    "mention_link_show_avatar": "أظهر الصورة الرمزية للمستخدم بجانب الرابط",
+    "preview": "معاينة",
+    "show_scrollbars": "أظهر شريط التمرير للعمود الجانبي",
+    "third_column_mode": "أظهر محتوى العمود الثالث إذا توفرت المساحة",
+    "third_column_mode_none": "لا تظهر العمود الثالث",
+    "third_column_mode_notifications": "عمود الإشعارات",
+    "columns": "الأعمدة",
+    "column_sizes": "حجم الأعمدة",
+    "column_sizes_sidebar": "الشريط الجانبي",
+    "type_domains_to_mute": "جِد نطاقًا لكتمه",
+    "upload_a_photo": "ارفع صورة",
+    "virtual_scrolling": "حسن تصيير الخيط الزمني",
+    "user_popover_avatar_action_zoom": "كبر صورة الرمزية",
+    "fun": "متعة",
+    "column_sizes_content": "المحتوى",
+    "column_sizes_notifs": "الإشعارات",
+    "search_user_to_block": "جِد من تريد حجبه",
+    "url": "رابط",
+    "subject_line_behavior": "انسخ الموضوع عند الرد",
+    "conversation_display": "اسلوب عرض المحادثة",
+    "mention_link_show_avatar_quick": "أظهر الصورة الرمزية للمستخدم عند ذكره",
+    "user_popover_avatar_action_open": "افتح الملف الشخصي",
+    "notifications": "الإشعارات",
+    "notification_setting_filters": "مرشح",
+    "notification_setting_hide_notification_contents": "اخف محتوى الإشعارات ومرسليها",
+    "mention_link_display_short": "اسماء قصيرة (مثل {'@'}foo)",
+    "mention_link_display_full_for_remote": "اسماء كاملة للمستخدمين من الخوادم البعاد ({'@'}foo{'@'}example.org)",
+    "version": {
+      "title": "نسخة"
+    },
+    "commit_value": "احفظ",
+    "mention_link_display_full": "اسماء كاملة دايمًا (مثل {'@'}foo{'@'}example.org)",
+    "mute_bot_posts": "اكتم مشاركات الحسابات الآلية",
+    "mention_links": "روابط الذِكر",
+    "email_language": "لغة رسائل البريد الإلكتروني المرسلة إلي من الخادم",
+    "bot": "هذا الحساب آلي",
+    "discoverable": "اسمح بالعثور على هذا الحساب من خلال البحث وخِدمات أخرى",
+    "right_sidebar": "عكس ترتيب الأعمدة",
+    "setting_changed": "الإعدادات مغيّرة",
+    "setting_server_side": "هذا الإعداد مرتبط بحسابك وسيأثر على كل الجلسات والعملاء",
+    "allow_following_move": "اسمح بالمتابعة التلقائية عند انتقال حساب متابَع",
+    "chatMessageRadius": "رسائل",
+    "domain_mutes": "نطاقات",
+    "new_email": "البريد إلكتروني الجديد",
+    "notification_visibility_moves": "هجرة مستخدم",
+    "subject_line_mastodon": "مثل ماستودون: انسخ الأصلي",
+    "hide_follows_description": "لا تظهر متابَعي",
+    "conversation_other_replies_button_inside": "داخل الحالات",
+    "autohide_floating_post_button": "اخفاء زر النشر تلقائيا (هاتف)",
+    "conversation_other_replies_button_below": "تحت الحالات",
+    "reply_visibility_following_short": "أظهر الردود الموجهة إلى متابَعي",
+    "conversation_display_linear": "خطي",
+    "conversation_other_replies_button": "أظهر زر \"ردود أخرى\"",
+    "hide_followers_description": "لا تظهر متابِعي"
   },
   "timeline": {
-    "collapse": "",
+    "collapse": "طوي",
     "conversation": "محادثة",
     "error_fetching": "خطأ أثناء جلب التحديثات",
-    "load_older": "تحميل المنشورات القديمة",
+    "load_older": "حمل الحالات القديمة",
     "no_retweet_hint": "",
-    "repeated": "",
-    "show_new": "عرض الجديد",
-    "up_to_date": "تم تحديثه"
+    "repeated": "شورِك",
+    "show_new": "اعرض الجديد",
+    "up_to_date": "محدث",
+    "no_more_statuses": "لا مزيد من الحالات",
+    "error": "خطأ أثناء جلب الخيط الزمني: {0}",
+    "reload": "أعد التحميل",
+    "no_statuses": "لا توجد حالات"
   },
   "user_card": {
     "approve": "قبول",
     "block": "حظر",
-    "blocked": "تم حظره!",
+    "blocked": "حُظر!",
     "deny": "رفض",
-    "follow": "اتبع",
-    "followees": "",
+    "follow": "تابع",
+    "followees": "متابَعون",
     "followers": "مُتابِعون",
-    "following": "",
+    "following": "متابَع!",
     "follows_you": "يتابعك!",
-    "mute": "كتم",
-    "muted": "تم كتمه",
+    "mute": "أخرِس",
+    "muted": "أخرَس",
     "per_day": "في اليوم",
     "remote_follow": "مُتابَعة عن بُعد",
-    "statuses": "المنشورات"
+    "statuses": "المنشورات",
+    "approve_confirm_accept_button": "قبول",
+    "approve_confirm_title": "تأكيد القبول",
+    "edit_profile": "عدّل الملف الشخصي",
+    "deny_confirm": "أتريد رفض طلب المتابعة من {user} ؟",
+    "unfollow_confirm_title": "تأكيد إلغاء المتابعة",
+    "follow_progress": "الطلب جارٍ…",
+    "hidden": "مخفي",
+    "its_you": "أنت!",
+    "approve_confirm_cancel_button": "لا تقبل",
+    "approve_confirm": "أتريد قبول طلب المتابعة من {user} ؟",
+    "block_confirm_title": "تأكيد الحظر",
+    "block_confirm_accept_button": "حظر",
+    "block_confirm_cancel_button": "لا تحظر",
+    "deactivated": "عُطل",
+    "deny_confirm_title": "تأكيد الرفض",
+    "deny_confirm_accept_button": "رفض",
+    "deny_confirm_cancel_button": "لا ترفض",
+    "favorites": "المفضلة",
+    "follow_cancel": "ألغ الطلب",
+    "follow_sent": "أُرسل الطلب!",
+    "follow_unfollow": "ألغ المتابعة",
+    "unfollow_confirm": "أتريد إلغاء متابعة {user}؟",
+    "unfollow_confirm_accept_button": "ألغ المتابعة",
+    "unfollow_confirm_cancel_button": "لا تلغ المتابعة",
+    "media": "وسائط",
+    "block_confirm": "أتريد حظر {user} ؟",
+    "mute_confirm_cancel_button": "لا تخرِس",
+    "mute_confirm_title": "تأكيد الإخراس",
+    "message": "راسل",
+    "mute_confirm": "أتريد إخراس {user}؟",
+    "mute_confirm_accept_button": "أخرِس",
+    "mention": "أذكر",
+    "mute_duration_prompt": "أخرِس هذا الشخص لـ (ضع 0 لكتمه دائمًا):",
+    "admin_menu": {
+      "moderation": "الإشراف",
+      "grant_admin": "امنحه الإدارة",
+      "revoke_admin": "اخلعه من الإدارة",
+      "delete_user": "احذف مستخدم",
+      "deactivate_account": "عطِّل الحساب",
+      "grant_moderator": "امنحه الإشراف",
+      "revoke_moderator": "اخلعه من الإشراف",
+      "activate_account": "فعُّل الحساب",
+      "delete_account": "احذف الحساب",
+      "strip_media": "أزل الوسائط من المشاركات",
+      "delete_user_data_and_deactivate_confirmation": "هذا الإجراء سيحذف بيانات الحساب وسيعطله، هل أنت متيقن؟"
+    },
+    "note": "ملاحظة",
+    "note_blank": "(لاشيء)",
+    "edit_note": "حرر الملاحظة",
+    "edit_note_apply": "طبِّق",
+    "edit_note_cancel": "ألغِ",
+    "report": "بلّغ",
+    "subscribe": "اشترك",
+    "unsubscribe": "ألغِ الاشتراك",
+    "unblock_progress": "يرفع الحجب…",
+    "block_progress": "يحجب…",
+    "unblock": "ارفع الحجب",
+    "remove_follower": "أزل متابِع",
+    "remove_follower_confirm_title": "تأكيد إزالة متابِع",
+    "remove_follower_confirm_accept_button": "أزِل",
+    "remove_follower_confirm_cancel_button": "أبق",
+    "hide_repeats": "اخف المشاركات",
+    "show_repeats": "أظهر المشاركات",
+    "bot": "آلي",
+    "unmute": "ارفع عنه الخرَس",
+    "unmute_progress": "يرفع الخرَس…",
+    "mute_progress": "يُخرِس…",
+    "remove_follower_confirm": "متيقن من إزالة {user} من متابِعيك؟",
+    "birthday": "وُلد في {birthday}"
   },
   "user_profile": {
-    "timeline_title": "الخيط الزمني للمستخدم"
+    "timeline_title": "الخيط الزمني للمستخدم",
+    "profile_loading_error": "عذرًا، حدث خطأ أثناء تحميل هذا الملف الشخصي.",
+    "profile_does_not_exist": "عذرًا، هذا الملف الشخصي ليس موجودًا."
   },
   "who_to_follow": {
     "more": "المزيد",
@@ -211,11 +663,355 @@
         "keyword_policies": "سياسة الكلمات الدلالية"
       },
       "simple": {
-        "simple_policies": "سياسات الخادم"
+        "simple_policies": "سياسات الخادم",
+        "instance": "مثيل",
+        "reason": "السبب",
+        "accept": "قبول",
+        "reject": "رفض",
+        "ftl_removal": "أُزيل من الخط الزمني «الشبكات المعروفة»"
       },
       "federation": "الاتحاد",
       "mrf_policies": "تفعيل سياسات إعادة كتابة المنشور",
       "mrf_policies_desc": "خاصية إعادة كتابة المناشير تقوم بتعديل تفاعل الاتحاد مع هذا الخادم. السياسات التالية مفعّلة:"
     }
+  },
+  "announcements": {
+    "page_header": "إعلانات",
+    "title": "إعلان",
+    "mark_as_read_action": "علّمه كمقروء",
+    "post_form_header": "انشر إعلانًا",
+    "post_placeholder": "اكتب محتوى الاعلان هنا...",
+    "post_action": "انشر",
+    "post_error": "خطأ: {error}",
+    "close_error": "أغلاق",
+    "delete_action": "احذف",
+    "start_time_prompt": "وقت البدأ: ",
+    "end_time_prompt": "وقت النهاية: ",
+    "all_day_prompt": "هذا حدث يوم كامل",
+    "start_time_display": "يبدأ في {time}",
+    "end_time_display": "ينتهي في {time}",
+    "edit_action": "حرر",
+    "submit_edit_action": "أرسل",
+    "cancel_edit_action": "ألغِ",
+    "inactive_message": "هذا الاعلان غير نشط",
+    "published_time_display": "نُشر في {time}"
+  },
+  "polls": {
+    "votes": "أصوات",
+    "vote": "صوّت",
+    "type": "نوع الاستطلاع",
+    "single_choice": "خيار واحد",
+    "multiple_choices": "متعدد الخيارات",
+    "expiry": "عمر الاستطلاع",
+    "expires_in": "ينتهي الاستطلاع في {0}",
+    "expired": "انتهى الاستطلاع منذ {0}",
+    "add_poll": "أضف استطلاعًا",
+    "add_option": "أضف خيارًا",
+    "option": "خيار",
+    "people_voted_count": "{count} شخص صوّت| {count} شخص صوّت",
+    "votes_count": "{count} صوت | {count} صوت"
+  },
+  "emoji": {
+    "stickers": "ملصقات",
+    "emoji": "إيموجي",
+    "search_emoji": "ابحث عن إيموجي",
+    "unicode_groups": {
+      "animals-and-nature": "حيوانات وطبيعة",
+      "food-and-drink": "أطعمة ومشروبات",
+      "symbols": "رموز",
+      "activities": "نشاطات",
+      "flags": "أعلام",
+      "smileys-and-emotion": "ابتسامات وانفعالات",
+      "travel-and-places": "سفر وأماكن"
+    },
+    "add_emoji": "أدخل إيموجي",
+    "custom": "إيموجي مخصص",
+    "keep_open": "أبق المنتقي مفتوحًا"
+  },
+  "interactions": {
+    "emoji_reactions": "تفاعلات بالإيموجي",
+    "reports": "البلاغات",
+    "follows": "المتابعات الجديدة"
+  },
+  "report": {
+    "state_closed": "مغلق",
+    "state_resolved": "عولج",
+    "reported_statuses": "الحالة المبلغة عنها:",
+    "state_open": "مفتوح",
+    "notes": "ملاحظة:",
+    "state": "الحالة:",
+    "reporter": "المبلِّغ:",
+    "reported_user": "المُبلغ عنه:"
+  },
+  "selectable_list": {
+    "select_all": "اختر الكل"
+  },
+  "image_cropper": {
+    "save": "احفظ",
+    "cancel": "ألغ",
+    "crop_picture": "اقتصاص الصورة",
+    "save_without_cropping": "احفظ دون اقتصاص"
+  },
+  "importer": {
+    "submit": "أرسل",
+    "success": "نجح الاستيراد.",
+    "error": "حدث خطأ أثناء الاستيراد."
+  },
+  "domain_mute_card": {
+    "mute": "أخرِس",
+    "mute_progress": "يُخرس…",
+    "unmute": "ارفع عنه الخرس",
+    "unmute_progress": "يرفع الخرس…"
+  },
+  "exporter": {
+    "export": "صدر",
+    "processing": "يُعالج. سيُطلب منك تنزيل الملف قريباً"
+  },
+  "media_modal": {
+    "previous": "السابق",
+    "next": "التالي",
+    "hide": "أغلق عارض الوسائط",
+    "counter": "{current}\\{total}"
+  },
+  "remote_user_resolver": {
+    "searching_for": "يبحث عن",
+    "error": "لم يُعثر عليه."
+  },
+  "admin_dash": {
+    "nodb": {
+      "documentation": "التوثيق",
+      "text2": "اغلب خيارات الضبط لن تتوفر."
+    },
+    "window_title": "الإدارة",
+    "wip_notice": "لوحة المدير لا زالت تجريبية ولا تزال قيد للتطوير، {adminFeLink}.",
+    "old_ui_link": "واجهة المدير القديمة هنا",
+    "commit_all": "احفظ الكل",
+    "tabs": {
+      "instance": "مثيل"
+    },
+    "instance": {
+      "instance": "معلومات المثيل",
+      "registrations": "تسجيل المستخدمين",
+      "restrict": {
+        "header": "قيّد وصول الزواروالمجهولين",
+        "timelines": "وصول الخط الزمني",
+        "profiles": "وصول الملفات الشخصية",
+        "activities": "وصول النشاطات/الحالات"
+      }
+    },
+    "limits": {
+      "posts": "حد النشر",
+      "uploads": "حد المرفقات",
+      "profile_fields": "حد حقول الملف الشخصي",
+      "user_uploads": "حد وسائط الملف الشخصي"
+    },
+    "frontend": {
+      "repository": "رابط المستودع",
+      "versions": "النسخ المتوفرة",
+      "build_url": "رابط البناء",
+      "reinstall": "أعد التثبيت",
+      "is_default": "(افتراضي)",
+      "is_default_custom": "(افتراضي، النسخة: {version})",
+      "install": "ثبّت",
+      "install_version": "ثبت النسخة {version}",
+      "more_install_options": "مزيد من خيارات التثبيت",
+      "set_default": "عينه كافتراضي",
+      "set_default_version": "عين النسخة {version} كافتراضية",
+      "available_frontends": "متوفر للتثبيت"
+    },
+    "temp_overrides": {
+      ":pleroma": {
+        ":instance": {
+          ":public": {
+            "label": "المثيل علني",
+            "description": "تعطيله سيحصر الوصول إلى API للمستخدمين الوالجين، ولن يقدر الزوار على الوصول إلى الخط الزمني العلني والموحد."
+          },
+          ":description_limit": {
+            "description": "حد عدد المحارف لوصف المرفق"
+          },
+          ":background_image": {
+            "label": "صورة الخلفية"
+          },
+          ":limit_to_local_content": {
+            "label": "اقتصار البحث على المحتوى المحلي"
+          }
+        }
+      }
+    }
+  },
+  "time": {
+    "in_past": "منذ {0}",
+    "unit": {
+      "hours_short": "{0}سا",
+      "minutes": "{0} دقيقة | {0} دقائق",
+      "days_short": "{0}ي",
+      "minutes_short": "{0}د",
+      "hours": "{0} ساعة | {0} ساعات",
+      "weeks": "{0} أسبوع | {0} أسابيع",
+      "months_short": "{0}ش",
+      "seconds": "{0} ثانية | {0} ثانية",
+      "seconds_short": "{0}ثا",
+      "years": "{0} سنة | {0} سنوات",
+      "years_short": "{0}سن",
+      "days": "{0} يوم | {0} أيام",
+      "months": "{0} شهر | {0} أشهر",
+      "weeks_short": "{0}أس"
+    },
+    "in_future": "في {0}",
+    "now": "هذه اللحظة",
+    "now_short": "الآن"
+  },
+  "status": {
+    "delete_confirm": "أتريد حذف هذه الحالة؟",
+    "delete_error": "خطأ أثناء حذف الحالة: {0}",
+    "plus_more": "+{number} أخرون",
+    "many_attachments": "المنشور يحوي {number} مرفقات",
+    "repeat_confirm": "أتريد مشاركة هذه الحالة؟",
+    "edited_at": "(آخر تعديل {time})",
+    "repeat_confirm_title": "تأكيد المشاركة",
+    "repeat_confirm_accept_button": "شارك",
+    "repeat_confirm_cancel_button": "لا تشارك",
+    "edit": "حرر الحالة",
+    "pin": "ثبته على الملف الشخصي",
+    "unpin": "ألغ تثبيته من الملف الشخصي",
+    "delete_confirm_cancel_button": "أبقه",
+    "replies_list": "الردود:",
+    "status_deleted": "هذا المنشور محذوف",
+    "favorites": "المفضلة",
+    "pinned": "مثبت",
+    "hide_full_subject": "اخف كامل الموضوع",
+    "repeats": "المشاركات",
+    "delete": "اخذف الحالة",
+    "delete_confirm_title": "تأكيد الحذف",
+    "reply_to": "رد على",
+    "mentions": "ذكرَ",
+    "unmute_conversation": "ارفع الكتم عن المحادثة",
+    "status_unavailable": "الحالة غير متوفرة",
+    "copy_link": "انسخ رابط الحالة",
+    "show_full_subject": "أظهر الموضوع كاملا",
+    "show_content": "أظهر المحتوى",
+    "hide_content": "اخف المحتوى",
+    "you": "(أنت)",
+    "show_all_attachments": "أظهر كل المرفقات",
+    "hide_attachment": "اخف المرفق",
+    "move_down": "حرك المرفق لليمين",
+    "thread_hide": "اخف هذا النقاش",
+    "thread_muted": "النقاش مكتوم",
+    "delete_confirm_accept_button": "احذف",
+    "mute_conversation": "اكتم المحادثة",
+    "external_source": "مصدر خارجي",
+    "expand": "وسّع",
+    "collapse_attachments": "طوي المرفقات",
+    "remove_attachment": "أزل المرفق",
+    "move_up": "حرك المرفق لليسار",
+    "open_gallery": "افتح المعرض",
+    "thread_show": "أظهر هذا النقاس",
+    "nsfw": "محتوى حساس NSFW",
+    "status_history": "تأريخ الحالة",
+    "thread_show_full_with_icon": "{icon} {text}",
+    "thread_follow_with_icon": "{icon} {text}",
+    "show_all_conversation_with_icon": "{icon} {text}",
+    "ancestor_follow_with_icon": "{icon} {text}",
+    "show_only_conversation_under_this": "أظهر الردود على هذه الحالة فقط",
+    "reaction_count_label": "تفاعل {num} شخص | تفاعل {num} أشخاص",
+    "replies_list_with_others": "رد (+ {numReplies} آخر): | رد (+ {numReplies} آخرون):",
+    "show_attachment_in_modal": "أظهر الوسائط في منبثقات",
+    "show_attachment_description": "معاينة الوصف ( افتح المرفق لقراءة الوصف الكامل)"
+  },
+  "lists": {
+    "creating_list": "إنشاء قائمة جديدة",
+    "update_title": "احفظ العنوان",
+    "add_members": "ابحث عن مزيد من المستخدمين",
+    "really_delete": "أمتيقن من حذف القائمة؟",
+    "lists": "قوائم",
+    "new": "قائمة جديدة",
+    "title": "عنوان القائمة",
+    "search": "ابحث عن مستخدم",
+    "remove_from_list": "أزل من القائمة",
+    "add_to_list": "أضف للقائمة",
+    "editing_list": "تحرير القائمة {listTitle}",
+    "create": "أنشئ",
+    "save": "احفظ التعديلات",
+    "delete": "احذف القائمة",
+    "manage_lists": "أدِر القوائم",
+    "manage_members": "أدِر أعضاء القائمة",
+    "is_in_list": "موجود في القائمة سلفًا"
+  },
+  "file_type": {
+    "audio": "صوت",
+    "image": "صورة",
+    "file": "ملف",
+    "video": "فيديو"
+  },
+  "user_reporting": {
+    "add_comment_description": "سيرسل البلاغ إلى مشرف المثيل، يمكنك شرح سبب البلاغ أدناه:",
+    "title": "بلاغ عن {0}",
+    "additional_comments": "تعليقات إضافية",
+    "forward_description": "هذا المستخدم من خادم آخر. هل تريد إرسال نسخة منه إلى مشرفه؟",
+    "forward_to": "وجّهه إلى {0}",
+    "submit": "أرسل",
+    "generic_error": "حدث خطأ أثناء معالجة طلبك."
+  },
+  "tool_tip": {
+    "media_upload": "ارفع وسائط",
+    "favorite": "فضّل",
+    "add_reaction": "أضف تفاعل",
+    "user_settings": "إعدادات المستخدم",
+    "accept_follow_request": "اقبل طلب المتابعة",
+    "reject_follow_request": "ارفض طلب المتابعة",
+    "repeat": "شارك",
+    "reply": "ردّ"
+  },
+  "upload": {
+    "error": {
+      "base": "فشل الرفع.",
+      "message": "فشل الرفع: {0}",
+      "default": "حاو لاحقًا",
+      "file_too_big": "حجم الملف كبير [{filesize}{filesizeunit}\\{allowedsize}{allowedsizeunit}]"
+    },
+    "file_size_units": {
+      "B": "بايت",
+      "MiB": "مب",
+      "TiB": "تب",
+      "GiB": "غب",
+      "KiB": "كب"
+    }
+  },
+  "search": {
+    "person_talking": "{count} شخص يتكلم",
+    "people_talking": "{count} شخص يتكلم",
+    "no_results": "لا نتائج",
+    "no_more_results": "لا مزيد من النتائج",
+    "people": "أشخاص",
+    "hashtags": "وسوم",
+    "load_more": "حمّل مزيدًا من النتائج"
+  },
+  "password_reset": {
+    "forgot_password": "أنسيت كلمة السر؟",
+    "placeholder": "البريد الإلكتروني أو اسم المستخدم",
+    "return_home": "عُد للصفحة الرئيسية",
+    "too_many_requests": "وصلت سقف المحاولات، حاول لاحقًا."
+  },
+  "chats": {
+    "chats": "محادثات",
+    "delete_confirm": "أتريد حذف هذه الرسالة؟",
+    "you": "أنت:",
+    "message_user": "راسل {nickname}",
+    "delete": "احذف",
+    "new": "محادثة جديدة",
+    "empty_message_error": "يستحيل إرسال رسالة فارغة",
+    "more": "مزيد",
+    "empty_chat_list_placeholder": "ليس لديك محادثات. ابدأ واحدة جديدة!"
+  },
+  "display_date": {
+    "today": "اليوم"
+  },
+  "update": {
+    "big_update_content": "نظرًا لطول المدة التي استغرقها تطوير هذا الاصدار فسترى اختلافات كبيرة عن ما اعتدت عليه.",
+    "update_bugs": "نظرًا لهذا لكبر هذا التحديث فقد نكون قد سهينى عن بعض الاخطاء لذا يرجى التبليغ عن أي علّة أو مشكلة. نحن نرحب بقتراحاتك وتعليقاتكم لتحسين بليروما وواجهها الأمامية وطرح المشاكل المتعلقة بهما.",
+    "update_changelog": "لمزيد من المعلومات، راجع {theFullChangelog}.",
+    "update_changelog_here": "سجل التغييرات الكامل",
+    "art_by": "رَسمُ {linkToArtist}",
+    "big_update_title": "رجاءً تعاون معنا"
   }
 }
diff --git a/src/i18n/compare b/src/i18n/compare
index 4dc1e47df..94e5aab55 100755
--- a/src/i18n/compare
+++ b/src/i18n/compare
@@ -2,23 +2,23 @@
 const arg = process.argv[2]
 
 if (typeof arg === 'undefined') {
-  console.log('This is a very simple and tiny tool that checks en.json with any other language and')
-  console.log('outputs all the things present in english but missing in foreign language.')
-  console.log('')
-  console.log('Usage: ./compare.js <lang> ')
-  console.log('       or')
-  console.log('       node ./compare.js <lang>')
-  console.log('')
-  console.log('Where <lang> is name of .json file containing language. For ./fi.json it should be:')
-  console.log('      ./compare.js fi ')
-  console.log('')
-  console.log('Limitations: ')
-  console.log('* This program does not work with languages left over in messages.js')
-  console.log('* This program does not check for extra strings present in foreign language but missing')
-  console.log('  in english.js (for now)')
-  console.log('')
-  console.log('There are no other arguments or options. Make an issue if you encounter a bug or want')
-  console.log('some feature to be implemented. Merge requests are welcome as well.')
+  console.info('This is a very simple and tiny tool that checks en.json with any other language and')
+  console.info('outputs all the things present in english but missing in foreign language.')
+  console.info('')
+  console.info('Usage: ./compare.js <lang> ')
+  console.info('       or')
+  console.info('       node ./compare.js <lang>')
+  console.info('')
+  console.info('Where <lang> is name of .json file containing language. For ./fi.json it should be:')
+  console.info('      ./compare.js fi ')
+  console.info('')
+  console.info('Limitations: ')
+  console.info('* This program does not work with languages left over in messages.js')
+  console.info('* This program does not check for extra strings present in foreign language but missing')
+  console.info('  in english.js (for now)')
+  console.info('')
+  console.info('There are no other arguments or options. Make an issue if you encounter a bug or want')
+  console.info('some feature to be implemented. Merge requests are welcome as well.')
   process.exit()
 }
 
@@ -35,10 +35,10 @@ function walker (a, b, path = []) {
     const article = aType[0] === 'o' ? 'an' : 'a'
 
     if (bType === 'undefined') {
-      console.log(`Foreign language is missing ${article} ${aType} at path ${currentPath.join('.')}`)
+      console.warn(`Foreign language is missing ${article} ${aType} at path ${currentPath.join('.')}`)
     } else if (aType === 'object') {
       if (bType !== 'object') {
-        console.log(`Type mismatch! English has ${aType} while foreign has ${bType} at path ${currentPath.join['.']}`)
+        console.warn(`Type mismatch! English has ${aType} while foreign has ${bType} at path ${currentPath.join['.']}`)
       } else {
         walker(aVal, bVal, currentPath)
       }
diff --git a/src/i18n/cs.json b/src/i18n/cs.json
index ca87214e0..c3ba7ca46 100644
--- a/src/i18n/cs.json
+++ b/src/i18n/cs.json
@@ -9,7 +9,10 @@
     "scope_options": "Možnosti rozsahů",
     "text_limit": "Textový limit",
     "title": "Vlastnosti",
-    "who_to_follow": "Koho sledovat"
+    "who_to_follow": "Koho sledovat",
+    "shout": "Shoutbox",
+    "pleroma_chat_messages": "Pleroma Chat",
+    "upload_limit": "Limit pro velikost souborů"
   },
   "finder": {
     "error_fetching_user": "Chyba při načítání uživatele",
@@ -20,12 +23,47 @@
     "submit": "Odeslat",
     "more": "Více",
     "generic_error": "Vyskytla se chyba",
-    "optional": "volitelné"
+    "optional": "volitelné",
+    "retry": "Zkuste to znovu",
+    "show_more": "Zobrazit více",
+    "show_less": "Zobrazit méně",
+    "never_show_again": "Znovu již nezobrazovat",
+    "dismiss": "Zahodit",
+    "cancel": "Zrušit",
+    "disable": "Vypnout",
+    "enable": "Zapnout",
+    "close": "Zavřít",
+    "peek": "Nahlédnout",
+    "generic_error_message": "Došlo k chybě: {0}",
+    "error_retry": "Zkuste to prosím znovu",
+    "confirm": "Potvrdit",
+    "verify": "Ověřit",
+    "scope_in_timeline": {
+      "public": "Veřejné",
+      "direct": "Přímá",
+      "unlisted": "Neuvedené",
+      "private": "Pouze pro sledující"
+    },
+    "scroll_to_top": "Přejít na začátek",
+    "role": {
+      "admin": "Správce",
+      "moderator": "Moderátor"
+    },
+    "pin": "Připnout položku",
+    "flash_content": "Klikněte pro zobrazení Flash obsahu pomocí Ruffle (Experimentální, nemusí fungovat).",
+    "flash_security": "Flash obsah může být nebezpečný, protože se jedná o libovolný spustitelný kód.",
+    "flash_fail": "Nepodařilo se načíst Flash obsah. Podrobnosti naleznete v konzoli.",
+    "undo": "Vrátit zpět",
+    "yes": "Ano",
+    "no": "Ne",
+    "unpin": "Odepnout položku",
+    "loading": "Načítání…"
   },
   "image_cropper": {
     "crop_picture": "Oříznout obrázek",
     "save": "Uložit",
-    "cancel": "Zrušit"
+    "cancel": "Zrušit",
+    "save_without_cropping": "Uložit bez ořezávání"
   },
   "login": {
     "login": "Přihlásit",
@@ -35,17 +73,31 @@
     "placeholder": "např. lain",
     "register": "Registrovat",
     "username": "Uživatelské jméno",
-    "hint": "Chcete-li se přidat do diskuze, přihlaste se"
+    "hint": "Chcete-li se přidat do diskuze, přihlaste se",
+    "logout_confirm": "Opravdu se chcete odhlásit?",
+    "logout_confirm_accept_button": "Odhlásit se",
+    "logout_confirm_cancel_button": "Neodhlašovat",
+    "logout_confirm_title": "Potvrzení odhlášení",
+    "authentication_code": "Ověřovací kód",
+    "enter_recovery_code": "Zadejte záložní kód",
+    "enter_two_factor_code": "Zadejte dvoufaktorový ověřovací kód",
+    "recovery_code": "Záložní kód",
+    "heading": {
+      "totp": "Dvoufaktorové ověřování",
+      "recovery": "Dvoufaktorové obnovení"
+    }
   },
   "media_modal": {
     "previous": "Předchozí",
-    "next": "Další"
+    "next": "Další",
+    "counter": "{current} / {total}",
+    "hide": "Zavřít prohlížeč médií"
   },
   "nav": {
     "about": "O instanci",
     "back": "Zpět",
     "chat": "Místní chat",
-    "friend_requests": "Požadavky o sledování",
+    "friend_requests": "Požadavky na sledování",
     "mentions": "Zmínky",
     "dms": "Přímé zprávy",
     "public_tl": "Veřejná časová osa",
@@ -53,7 +105,24 @@
     "twkn": "Celá známá síť",
     "user_search": "Hledání uživatelů",
     "who_to_follow": "Koho sledovat",
-    "preferences": "Předvolby"
+    "preferences": "Předvolby",
+    "home_timeline": "Domovská časová osa",
+    "timelines": "Časové osy",
+    "search_close": "Zavřít vyhledávací panel",
+    "chats": "Chaty",
+    "lists": "Seznamy",
+    "edit_nav_mobile": "Upravit navigační panel",
+    "mobile_sidebar": "Přepnout mobilní postranní panel",
+    "announcements": "Oznámení",
+    "mobile_notifications_close": "Uzavřít oznámení",
+    "mobile_notifications": "Otevřít oznámení (máte nějaké nepřečtené)",
+    "administration": "Správa",
+    "bookmarks": "Záložky",
+    "search": "Hledat",
+    "edit_pinned": "Upravit připnuté položky",
+    "edit_finish": "Dokončit úpravu",
+    "mobile_notifications_mark_as_seen": "Označit vše jako přečtené",
+    "interactions": "Interakce"
   },
   "notifications": {
     "broken_favorite": "Neznámý příspěvek, hledám jej…",
@@ -61,9 +130,21 @@
     "followed_you": "vás nyní sleduje",
     "load_older": "Načíst starší oznámení",
     "notifications": "Oznámení",
-    "read": "Číst!",
+    "read": "Přečíst!",
     "repeated_you": "zopakoval/a váš příspěvek",
-    "no_more_notifications": "Žádná další oznámení"
+    "no_more_notifications": "Žádná další oznámení",
+    "error": "Nastala chyba při načítání oznámení: {0}",
+    "unread_announcements": "{num} nepřečtené oznámení | {num} nepřečtených oznámení",
+    "unread_chats": "{num} nepřečtených zpráv | {num} nepřečtených zpráv",
+    "unread_follow_requests": "{num} nový požadavek o sledování | {num} nových požadavků o sledování",
+    "configuration_tip": "Může upravit co zde zobrazovat v {theSettings}. {dismiss}",
+    "follow_request": "vás chce sledovat",
+    "migrated_to": "migroval na",
+    "poll_ended": "anketa skončila",
+    "reacted_with": "reagoval/a s {0}",
+    "submitted_report": "Odeslal/a stížnost",
+    "configuration_tip_settings": "nastavení",
+    "configuration_tip_dismiss": "Již nezobrazovat"
   },
   "post_status": {
     "new_status": "Napsat nový příspěvek",
@@ -85,7 +166,27 @@
       "private": "Pouze pro sledující - Poslat pouze sledujícím",
       "public": "Veřejný - Poslat na veřejné časové osy",
       "unlisted": "Neuvedený - Neposlat na veřejné časové osy"
-    }
+    },
+    "edit_unsupported_warning": "Pleroma nepodporuje upravování zmínek a anket.",
+    "edit_status": "Upravit příspěvek",
+    "media_description": "Popis médií",
+    "reply_option": "Odpovědět na tento příspěvek",
+    "content_type_selection": "Formát příspěvku",
+    "post": "Odeslat",
+    "empty_status_error": "Nemůžete odeslat prázdný příspěvek bez žádných souborů",
+    "preview_empty": "Prázdné",
+    "media_description_error": "Selhání při aktualizaci médií, zkuste to znovu",
+    "scope_notice": {
+      "public": "Tento příspěvek bude viditelný pro všechny",
+      "private": "Tento příspěvek bude viditelný pouze pro vaše sledující",
+      "unlisted": "Tento příspěvek nebude viditelný ve Veřejné časové ose a časové ose Celá známá síť"
+    },
+    "scope_notice_dismiss": "Zavřít tuto zprávu",
+    "quote_option": "Citovat tento příspěvek",
+    "direct_warning_to_all": "Tento příspěvek budou vidět pouze zmínění uživatelé.",
+    "direct_warning_to_first_only": "Tento příspěvek bude viditelný pouze pro zmíněné uživatele na začátku příspěvku.",
+    "edit_remote_warning": "Jiné vzdálené instance nemusí podporovat úpravy a nemusí přijmout nejnovější verzi vašeho příspěvku.",
+    "preview": "Náhled"
   },
   "registration": {
     "bio": "O vás",
@@ -105,8 +206,18 @@
       "email_required": "nemůže být prázdný",
       "password_required": "nemůže být prázdné",
       "password_confirmation_required": "nemůže být prázdné",
-      "password_confirmation_match": "musí být stejné jako heslo"
-    }
+      "password_confirmation_match": "musí být stejné jako heslo",
+      "birthday_min_age": "musí být před nebo v {date}",
+      "birthday_required": "nemůže být ponecháno prázdné"
+    },
+    "birthday_optional": "Datum narození (volitelné):",
+    "register": "Registrovat",
+    "reason": "Důvod pro registraci",
+    "reason_placeholder": "Tato instance schvaluje registrace manuálně,\nZdůvodněte administraci důvod registrace.",
+    "birthday": "Datum narození:",
+    "email_language": "V jakém jazyce chcete přijímat emaily z tohoto serveru?",
+    "email_optional": "Email (volitelný)",
+    "bio_optional": "Bio (volitelné)"
   },
   "settings": {
     "app_name": "Název aplikace",
@@ -136,7 +247,7 @@
     "default_vis": "Výchozí rozsah viditelnosti",
     "delete_account": "Smazat účet",
     "delete_account_description": "Trvale smaže váš účet a všechny vaše příspěvky.",
-    "delete_account_error": "Při mazání vašeho účtu nastala chyba. Pokud tato chyba bude trvat, kontaktujte prosím admministrátora vaší instance.",
+    "delete_account_error": "Při mazání vašeho účtu nastala chyba. Pokud tato chyba přetrvává, kontaktujte prosím administrátora vaší instance.",
     "delete_account_instructions": "Pro potvrzení smazání účtu napište své heslo do pole níže.",
     "avatar_size_instruction": "Doporučená minimální velikost pro avatarové obrázky je 150x150 pixelů.",
     "export_theme": "Uložit přednastavení",
@@ -152,7 +263,7 @@
     "general": "Obecné",
     "hide_attachments_in_convo": "Skrývat přílohy v konverzacích",
     "hide_attachments_in_tl": "Skrývat přílohy v časové ose",
-    "max_thumbnails": "Maximální počet miniatur na příspěvek",
+    "max_thumbnails": "Maximální počet miniatur na příspěvek (prázdné = žádný limit)",
     "hide_isp": "Skrýt panel specifický pro instanci",
     "preload_images": "Přednačítat obrázky",
     "use_one_click_nsfw": "Otevírat citlivé přílohy pouze jedním kliknutím",
@@ -181,7 +292,7 @@
     "new_password": "Nové heslo",
     "notification_visibility": "Typy oznámení k zobrazení",
     "notification_visibility_follows": "Sledující",
-    "notification_visibility_likes": "Oblíbení",
+    "notification_visibility_likes": "Oblíbené",
     "notification_visibility_mentions": "Zmínky",
     "notification_visibility_repeats": "Zopakování",
     "no_rich_text_description": "Odstranit ze všech příspěvků formátování textu",
@@ -237,18 +348,34 @@
       "true": "ano"
     },
     "notifications": "Oznámení",
-    "enable_web_push_notifications": "Povolit webová push oznámení",
+    "enable_web_push_notifications": "Povolit web push oznámení",
     "style": {
       "switcher": {
         "keep_color": "Ponechat barvy",
         "keep_shadows": "Ponechat stíny",
         "keep_opacity": "Ponechat průhlednost",
         "keep_roundness": "Ponechat kulatost",
-        "keep_fonts": "Keep fonts",
+        "keep_fonts": "Ponechat písma",
         "save_load_hint": "Možnosti „Ponechat“ dočasně ponechávají aktuálně nastavené možností při volení či nahrávání motivů, také tyto možnosti ukládají při exportování motivu. Pokud není žádné pole zaškrtnuto, uloží export motivu všechno.",
         "reset": "Resetovat",
         "clear_all": "Vymazat vše",
-        "clear_opacity": "Vymazat průhlednost"
+        "clear_opacity": "Vymazat průhlednost",
+        "keep_as_is": "Ponechat jak je",
+        "use_snapshot": "Stará verze",
+        "help": {
+          "migration_napshot_gone": "Z nějakého důvodu chyběl snímek, některé věci můžou vypadat jinak, než si pamatujete.",
+          "fe_upgraded": "Motiv engine PleromaFE byl aktualizován po aktualizaci verze.",
+          "future_version_imported": "Soubor, který jste importoval/a byl vytvořen pro novější verzi FE.",
+          "older_version_imported": "Soubor, který jste importoval/a byl vytvořen pro starší verzi FE.",
+          "v2_imported": "Soubor, který jste importoval/a byl vytvořen pro starší verzi FE. Snažíme se zachovat maximální kompatibilitu, ale může dojít k nekonzistenci.",
+          "snapshot_present": "Snímek motivu byl načten, takže všechny hodnoty byly přepsány. Místo toho můžete načíst skutečná data motivu.",
+          "upgraded_from_v2": "PleromaFE bylo aktualizováno, motiv může vypadat trochu jinak, než si pamatujete.",
+          "snapshot_missing": "V souboru nebyl žádný snímek motivu, takže může vypadat jinak, než bylo původně zamýšleno.",
+          "fe_downgraded": "Verze PleromaFE byla vrácena zpět.",
+          "migration_snapshot_ok": "Pro jistotu byl načten snímek motivu. Můžete zkusit načíst data motivu."
+        },
+        "load_theme": "Načíst motiv",
+        "use_source": "Nová verze"
       },
       "common": {
         "color": "Barva",
@@ -283,7 +410,27 @@
         "borders": "Okraje",
         "buttons": "Tlačítka",
         "inputs": "Vstupní pole",
-        "faint_text": "Vybledlý text"
+        "faint_text": "Vybledlý text",
+        "popover": "Popisy, menu, popovery",
+        "underlay": "Podklad",
+        "pressed": "Zmáčknuté",
+        "selectedPost": "Vybraný příspěvek",
+        "selectedMenu": "Vybraná položka menu",
+        "alert_warning": "Varování",
+        "alert_neutral": "Neutrální",
+        "toggled": "Přepnuto",
+        "disabled": "Vypnuto",
+        "tabs": "Karty",
+        "chat": {
+          "incoming": "Příchozí",
+          "border": "Okraj",
+          "outgoing": "Odchozí"
+        },
+        "post": "Příspěvky/Bio uživatelů",
+        "wallpaper": "Tapeta",
+        "poll": "Graf ankety",
+        "icons": "Ikony",
+        "highlight": "Zvýrazněné prvky"
       },
       "radii": {
         "_tab_label": "Kulatost"
@@ -346,7 +493,252 @@
         "checkbox": "Pročetl/a jsem podmínky používání",
         "link": "hezký malý odkaz"
       }
-    }
+    },
+    "added_alias": "Přezdívka přidána.",
+    "emoji_reactions_scale": "Měřítko zvětšení reakcí",
+    "file_export_import": {
+      "backup_restore": "Záloha nastavení",
+      "errors": {
+        "file_too_new": "Nekompatibilní hlavní verze: {fileMajor}, tato verze PleromaFE (verze {feMajor}) je příliš stará",
+        "invalid_file": "Vybraný soubor není podporovaná záloha Pleroma nastavení. Žádné změny nebyli provedeny.",
+        "file_too_old": "Nekompatibilní verze: {fileMajor}, verze souboru je příliš stará a nepodporovaná (min. verze {feMajor})",
+        "file_slightly_new": "Menší verze je rozdílná, některé nastavení se nemusí načíst"
+      },
+      "backup_settings": "Zálohovat nastavení do souboru",
+      "backup_settings_theme": "Zálohovat nastavení a motiv do souboru",
+      "restore_settings": "Obnovit nastavení ze souboru"
+    },
+    "backup_failed": "Záloha selhala.",
+    "tree_fade_ancestors": "Zobrazit autory aktuálního příspěvku ve slabém textu",
+    "mention_link_display_full_for_remote": "jako celá jména pouze pro vzdálené uživatele (např. {'@'}foo{'@'}example.org)",
+    "autocomplete_select_first": "Automaticky vybrat prvního kandidáta, když výsledky automatického doplnění jsou dostupné",
+    "import_blocks_from_a_csv_file": "Importovat blokace z csv souboru",
+    "backup_running": "Tato záloha právě probíhá, zpracován záznam {number}. |Tato záloha právě probíhá, zpracováno {number} záznamů.",
+    "changed_email": "Email byl úspěšně změněn!",
+    "chatMessageRadius": "Zpráva chatu",
+    "confirm_dialogs_delete": "mazání příspěvku",
+    "disable_sticky_headers": "Nezanechávat záhlaví sloupců na horní část obrazovky",
+    "third_column_mode_postform": "Editor hlavního příspěvku a navigaci",
+    "columns": "Sloupce",
+    "sensitive_by_default": "Označit příspěvky jako citlivé ve výchozím stavu",
+    "domain_mutes": "Domény",
+    "fallback_language": "Záložní jazyk {index}:",
+    "primary_language": "Hlavní jazyk:",
+    "security": "Zabezpečení",
+    "enter_current_password_to_confirm": "Zadejte vaše současné heslo pro potvrzení vaší identity",
+    "post_look_feel": "Vzhled příspěvků",
+    "mention_links": "Odkazy zmínek",
+    "mfa": {
+      "confirm_and_enable": "Potvrdit a zapnout OTP",
+      "title": "Dvoufázová autentizace",
+      "scan": {
+        "title": "Skenovat",
+        "desc": "Pomocí vaší 2FA aplikace oskenujte QR kód, nebo zadejte klíč:",
+        "secret_code": "Klíč"
+      },
+      "otp": "OTP",
+      "generate_new_recovery_codes": "Vygenerovat nové záložní kódy",
+      "setup_otp": "Nastavit OTP",
+      "wait_pre_setup_otp": "přednastavení OTP",
+      "waiting_a_recovery_codes": "Přijímám záložní kódy…",
+      "recovery_codes_warning": "Zapište nebo uložte si záložní kódy jelikož je znovu již neuvidíte. Pokud ztratíte přístup k vaší 2FA aplikace a záložním kódům nebudete mít možnost se přihlásit k vašemu účtu.",
+      "recovery_codes": "Záložní kódy.",
+      "warning_of_generate_new_codes": "Když vygenerujete nové záložní kódy, tak staré přestanou fungovat.",
+      "authentication_methods": "Autentizační metody",
+      "verify": {
+        "desc": "Pro zapnutí dvoufázové autentizace zadejte kód z vaší 2FA aplikace:"
+      }
+    },
+    "remove_backup": "Odstranit",
+    "email_language": "Jazyk pro přijímání emailů ze serveru",
+    "block_export": "Export blokací",
+    "block_import": "Import blokací",
+    "block_import_error": "Chyba při importování blokací",
+    "mute_export": "Exportovat ztlumení",
+    "mute_export_button": "Exportovat vaše ztlumení jako csv soubor",
+    "wordfilter": "Filtr slov",
+    "user_profiles": "Profily uživatelů",
+    "use_at_icon": "Zobrazovat {'@'} jako ikonu namísto textu",
+    "notification_visibility_moves": "Migrace uživatelů",
+    "hide_followers_count_description": "Nezobrazovat počet sledujících uživatelů",
+    "reply_visibility_self_short": "Zobrazit odpovědi pouze sobě",
+    "third_column_mode_notifications": "Sloupec oznámení",
+    "useStreamingApi": "Přijímat příspěvky a oznámení v reálném čase",
+    "use_websockets": "Používat websockety (Aktualizace v reálném čase)",
+    "user_mutes": "Uživatelé",
+    "mention_link_display": "Zobrazit odkazy na zmínky",
+    "add_language": "Přidat záložní jazyk",
+    "account_backup": "Zálohování účtu",
+    "account_alias": "Přezdívky účtu",
+    "setting_server_side": "Toto nastavení je vázané na váš profil a ovlivňuje všechny vaše sezení a klienty",
+    "block_export_button": "Exportovat vaše blokace jako csv soubor",
+    "blocks_imported": "Blokace importovány! Jejich zpracování může chvíli trvat.",
+    "mute_import": "Importovat ztlumení",
+    "mute_import_error": "Chyba při importování ztlumení",
+    "mutes_imported": "Ztlumení importovány! Jejich zpracování může chvíli trvat.",
+    "account_backup_table_head": "Záloha",
+    "download_backup": "Stáhnout",
+    "import_mutes_from_a_csv_file": "Importovat ztlumení z csv souboru",
+    "account_backup_description": "Toto umožňuje stáhnout archiv vašeho účtu a vašich příspěvků, ale nemůžou být zpětně importovány do Pleroma účtu.",
+    "backup_not_ready": "Tato záloha není zatím připravená.",
+    "list_backups_error": "Chyba při získávání seznamu záloh: {error}",
+    "add_backup": "Vytvořit novou zálohu",
+    "bot": "Toto je účet robota",
+    "change_email": "Změnit email",
+    "change_email_error": "Nastala chyba při změně vašeho emailu.",
+    "confirm_dialogs": "Požádat o potvrzení při",
+    "confirm_dialogs_mute": "ztlumení uživatele",
+    "confirm_dialogs_logout": "odhlašování",
+    "confirm_dialogs_approve_follow": "schvalování sledujícího",
+    "confirm_dialogs_deny_follow": "odmítání sledujícího",
+    "confirm_dialogs_remove_follower": "odstraňování sledujícího",
+    "mutes_and_blocks": "Ztlumení a Blokace",
+    "account_alias_table_head": "Přezdívka",
+    "move_account": "Přesunout účet",
+    "birthday": {
+      "show_birthday": "Zobrazit moje datum narození",
+      "label": "Datum narození"
+    },
+    "account_privacy": "Soukromí",
+    "notification_visibility_in_column": "Zobrazit ve sloupci/zásuvce oznámení",
+    "notification_visibility_reports": "Nahlášení",
+    "notification_visibility_emoji_reactions": "Reakce",
+    "notification_visibility_polls": "Konce anket, ve kterých jste hlasovali",
+    "notification_extra_tip": "Zobrazení tipu přizpůsobení pro další oznámení",
+    "notification_visibility_native_notifications": "Zobrazit nativní oznámení",
+    "notification_visibility_follow_requests": "Požadavky na sledování",
+    "mute_bot_posts": "Skrýt příspěvky od robotů",
+    "hide_bot_indication": "Skrýt indikaci účtů robotů v příspěvcích",
+    "auto_update": "Zobrazovat nové příspěvky automaticky",
+    "url": "URL",
+    "preview": "Náhled",
+    "profile_fields": {
+      "label": "Metadata profilu",
+      "name": "Štítek",
+      "value": "Obsah",
+      "add_field": "Přidat pole"
+    },
+    "hide_favorites_description": "Nezobrazovat seznam oblíbených příspěvků (uživatelé stále budou notifikování)",
+    "right_sidebar": "Prohodit pořadí sloupců",
+    "hide_scrobbles": "Skrýt scrobbles",
+    "hide_shoutbox": "Skrýt shoutbox instance",
+    "new_email": "Nový email",
+    "notification_show_extra": "Zobrazit další oznámení ve sloupci oznámení",
+    "reply_visibility_following_short": "Zobrazit odpovědi mým sledujícím",
+    "search_user_to_block": "Hledat koho chcete zablokovat",
+    "search_user_to_mute": "Hledat koho chcete ztlumit",
+    "reset_avatar_confirm": "Opravdu chcete resetovat avatar?",
+    "tree_advanced": "Umožnit více flexibilní navigaci ve stromovém zobrazení",
+    "conversation_display_linear_quick": "Lineární zobrazení",
+    "max_depth_in_thread": "Maximální počet zobrazených úrovní ve vlákně ve výchozím stavu",
+    "add_backup_error": "Chyba při přidávání nové zálohy: {error}",
+    "added_backup": "Přidána nová záloha.",
+    "word_filter_and_more": "Filtr slov a další...",
+    "posts": "Příspěvky",
+    "reset_banner_confirm": "Opravdu chcete resetovat banner?",
+    "reset_background_confirm": "Opravdu chcete resetovat pozadí?",
+    "reset_avatar": "Resetovat avatar",
+    "reset_profile_background": "Resetovat pozadí profilu",
+    "reset_profile_banner": "Resetovat banner profilu",
+    "type_domains_to_mute": "Hledat domény ke ztlumení",
+    "virtual_scrolling": "Optimalizovat vykreslování časové osy",
+    "remove_language": "Odstranit",
+    "expert_mode": "Zobrazit pokročilé nastavení",
+    "save": "Uložit změny",
+    "setting_changed": "Nastavení je rozdílné od výchozího",
+    "lists_navigation": "Zobrazovat seznamy v navigaci",
+    "allow_following_move": "Povolit automatické sledování pokud se sledovaný účet přesune",
+    "confirm_dialogs_repeat": "opakování příspěvku",
+    "confirm_dialogs_unfollow": "zrušení sledování uživatele",
+    "confirm_dialogs_block": "blokování uživatele",
+    "list_aliases_error": "Chyba při zjišťování přezdívek: {error}",
+    "remove_alias": "Odstranit tuto přezdívku",
+    "new_alias_target": "Přidat novou přezdívku (např. {example})",
+    "add_alias_error": "Chyba při přidávání přezdívky: {error}",
+    "hide_list_aliases_error_action": "Zavřít",
+    "move_account_notes": "Pokud chcete přesunut účet jinam, musíte jít na cílový účet a přidat přezdívku ukazující na tento účet.",
+    "move_account_target": "Cílový účet (např. {example})",
+    "moved_account": "Účet přesunut.",
+    "move_account_error": "Chyba při přesouvání účtu: {error}",
+    "discoverable": "Umožnit objevení tohoto účtu ve výsledcích vyhledávání a v jiných službách",
+    "pad_emoji": "Přidat mezeru okolo emoji při přidávání emoji z výběru",
+    "emoji_reactions_on_timeline": "Zobrazit emoji reakce u příspěvků",
+    "hide_media_previews": "Schovat náhledy médií",
+    "hide_muted_posts": "Skrýt příspěvky od ztlumených uživatelů",
+    "hide_all_muted_posts": "Skrýt ztlumené uživatele",
+    "navbar_column_stretch": "Protáhnout navbar na šířku sloupců",
+    "always_show_post_button": "Vždy zobrazovat plovoucí tlačítko pro nový příspěvek",
+    "hide_wallpaper": "Skrýt pozadí instance",
+    "hide_wordfiltered_statuses": "Skrýt slovně filtrované příspěvky",
+    "hide_muted_threads": "Skrýt ztlumené vlákna",
+    "notification_extra_chats": "Zobrazit nepřečtené chaty",
+    "notification_extra_announcements": "Zobrazit nepřečtené oznámení",
+    "notification_extra_follow_requests": "Zobrazit nové požadavky na sledování",
+    "hide_follows_count_description": "Nezobrazovat počet sledovaných uživatelů",
+    "autohide_floating_post_button": "Automaticky skrýt tlačítko nového příspěvku (mobilní zařízení)",
+    "minimal_scopes_mode": "Minimalizovat možnosti rozsahu příspěvků",
+    "conversation_display": "Styl zobrazení konverzací",
+    "conversation_display_tree": "Stromové zobrazení",
+    "conversation_display_tree_quick": "Stromový styl",
+    "show_scrollbars": "Zobrazit posuvníky bočních sloupců",
+    "third_column_mode": "Pokud je volné místo, zobrazit třetí sloupec obsahující",
+    "third_column_mode_none": "Nikdy nezobrazovat třetí sloupec",
+    "column_sizes": "Velikost sloupců",
+    "column_sizes_sidebar": "Postranní panel",
+    "column_sizes_content": "Obsah",
+    "column_sizes_notifs": "Oznámení",
+    "conversation_display_linear": "Lineární styl",
+    "conversation_other_replies_button": "Zobrazit tlačítko ostatních odpovědí",
+    "conversation_other_replies_button_below": "Pod příspěvky",
+    "conversation_other_replies_button_inside": "Uvnitř příspěvků",
+    "mention_link_display_short": "vždy jako zkrácená jména (např. {'@'}foo)",
+    "mention_link_display_full": "vždy jako celá jména (např. {'@'}foo{'@'}example.org)",
+    "enable_web_push_always_show_tip": "Některé prohlížeče (Chromium, Chrome) vyžadují aby push zprávy vždy vytvořili oznámení, jinak obecné oznámení 'Tento web byl aktualizován na pozadí' je zobrazeno, povolte abyste zabránili tomuto oznámení, protože Chrome nejspíš skrývá push oznámení, pokud je panel zobrazen. Může mít za následek duplicitní oznámení v ostatních prohlížečích.",
+    "actor_type": "Tento účet je:",
+    "actor_type_description": "Když svůj účet označíte jako skupinu, bude automaticky opakovat všechny příspěvky, které ho zmíní.",
+    "actor_type_Person": "normální uživatel",
+    "actor_type_Service": "bot",
+    "actor_type_Group": "skupina",
+    "hide_actor_type_indication": "Skrýt označení typu účtu (bot, skupina atd.) v příspěvcích",
+    "mention_link_show_avatar": "Zobrazit avatar uživatele vedle odkazu",
+    "mention_link_show_avatar_quick": "Zobrazit avatar uživatele vedle zmínky",
+    "mention_link_fade_domain": "Zeslabit doménu (např {'@'}example.org v {'@'}foo{'@'}example.org)",
+    "fun": "Zábava",
+    "notification_mutes": "Pokud nechcete dostávat oznámení od specifický uživatelů, použijte funkci ztlumení.",
+    "more_settings": "Víc nastavení",
+    "user_popover_avatar_action_zoom": "Zvětšit avatar",
+    "user_popover_avatar_action_close": "Zavřít popover",
+    "notification_setting_annoyance": "Nepříjemnost",
+    "user_popover_avatar_action_open": "Otevřit profil",
+    "notification_setting_drawer_marks_as_seen": "Zavření zásuvky (na mobilu) označí všechny oznámení jako přečtené",
+    "notification_setting_ignore_inactionable_seen": "Ignorovat stav přečtení pro oznámení bez akce (oblíbené, opakování atd.)",
+    "notification_setting_unseen_at_top": "Zobrazovat nepřečtené oznámení nad ostatními",
+    "enable_web_push_always_show": "Vždy zobrazovat web push oznámení",
+    "notification_setting_privacy": "Soukromí",
+    "notification_setting_block_from_strangers": "Blokovat oznámení od uživatelů které nesledujete",
+    "notification_setting_hide_notification_contents": "Schovávat odesílatele a obsah push oznámení",
+    "notification_blocks": "Blokování uživatele zastaví všechny notifikace a také je odhlásí.",
+    "mention_link_use_tooltip": "Zobrazit kartu uživatele při kliknutí na zmínku",
+    "user_popover_avatar_overlay": "Zobrazit popover uživatele přes jeho avatar",
+    "greentext": "Vtipné šipky",
+    "mention_link_bolden_you": "Zvýraznit vaši zmínku",
+    "user_popover_avatar_action": "Popover akce při kliknutí na avatar",
+    "show_yous": "Zobrazit (Vy)",
+    "notification_setting_filters": "Filtry",
+    "notification_setting_ignore_inactionable_seen_tip": "Toto ve skutečnosti neoznačí tyto oznámení jako přečtené a stále o nich budete dostávat oznámení na počítači, pokud si tak vyberete",
+    "notification_setting_filters_chrome_push": "V některých prohlížečích (Chrome) nemusí být možné kompletně vyfiltrovat oznámení, pokud přijdou jako push oznámení",
+    "commit_value": "Uložit",
+    "reset_value": "Resetovat",
+    "reset_value_tooltip": "Resetovat koncept",
+    "hard_reset_value": "Tvrdý reset",
+    "version": {
+      "title": "Verze",
+      "backend_version": "Backend verze",
+      "frontend_version": "Frontend verze"
+    },
+    "commit_value_tooltip": "Hodnota není uložena, stiskněte toto tlačítko pro potvrzení změn",
+    "hard_reset_value_tooltip": "Odstranit nastavení z úložiště a vynutit výchozí hodnotu",
+    "accent": "Akcentní barva"
   },
   "time": {
     "day": "{0} day",
@@ -357,8 +749,8 @@
     "hours": "{0} hours",
     "hour_short": "{0}h",
     "hours_short": "{0}h",
-    "in_future": "in {0}",
-    "in_past": "{0} ago",
+    "in_future": "za {0}",
+    "in_past": "před {0}",
     "minute": "{0} minute",
     "minutes": "{0} minutes",
     "minute_short": "{0}min",
@@ -367,8 +759,8 @@
     "months": "{0} měs",
     "month_short": "{0} měs",
     "months_short": "{0} měs",
-    "now": "teď",
-    "now_short": "teď",
+    "now": "právě teď",
+    "now_short": "nyní",
     "second": "{0} second",
     "seconds": "{0} seconds",
     "second_short": "{0}s",
@@ -380,7 +772,23 @@
     "year": "{0} r",
     "years": "{0} l",
     "year_short": "{0}r",
-    "years_short": "{0}l"
+    "years_short": "{0}l",
+    "unit": {
+      "seconds_short": "{0}s",
+      "days": "{0} den | {0} dnů",
+      "days_short": "{0}d",
+      "hours": "{0} hodina | {0} hodin",
+      "hours_short": "{0}h",
+      "minutes": "{0} minuta | {0} minut",
+      "months": "{0} měsíc | {0} měsíců",
+      "months_short": "{0}mo",
+      "minutes_short": "{0}min",
+      "seconds": "{0} sekunda | {0} sekund",
+      "weeks": "{0} týden | {0} týdnů",
+      "weeks_short": "{0}w",
+      "years": "{0} rok | {0} roky",
+      "years_short": "{0}y"
+    }
   },
   "timeline": {
     "collapse": "Zabalit",
@@ -392,11 +800,60 @@
     "show_new": "Zobrazit nové",
     "up_to_date": "Aktuální",
     "no_more_statuses": "Žádné další příspěvky",
-    "no_statuses": "Žádné příspěvky"
+    "no_statuses": "Žádné příspěvky",
+    "socket_reconnected": "Navázáno spojení v reálném čase",
+    "error": "Chyba při načítání časové osy: {0}",
+    "reload": "Načíst znovu",
+    "socket_broke": "Spojení v reálném čase ztraceno: CloseEvent code {0}"
   },
   "status": {
     "reply_to": "Odpověď uživateli",
-    "replies_list": "Odpovědi:"
+    "replies_list": "Odpovědi:",
+    "many_attachments": "Příspěvek má {number} příloh(u)",
+    "collapse_attachments": "Sbalit přílohy",
+    "unpin": "Odepnout z profilu",
+    "thread_muted": "Vlákno ztlumeno",
+    "show_attachment_description": "Popis náhledu (otevřete přílohu pro celý popis)",
+    "move_down": "Posunout přílohu doprava",
+    "thread_show": "Zobrazit toto vlákno",
+    "pin": "Připnout na profil",
+    "mute_conversation": "Ztlumit konverzaci",
+    "thread_hide": "Skrýt toto vlákno",
+    "show_full_subject": "Zobrazit celý předmět",
+    "edited_at": "(naposledy upraveno {time})",
+    "repeat_confirm_accept_button": "Zopakovat",
+    "repeat_confirm_title": "Potvrzení zopakování",
+    "delete_error": "Chyba při mazání příspěvku: {0}",
+    "delete_confirm": "Opravdu chcete smazat tento příspěvek?",
+    "delete_confirm_title": "Potvrzení smazání",
+    "delete_confirm_accept_button": "Smazat",
+    "delete_confirm_cancel_button": "Ponechat",
+    "you": "(Vy)",
+    "hide_attachment": "Skrýt přílohu",
+    "remove_attachment": "Odstranit přílohu",
+    "attachment_stop_flash": "Zastavit Flash player",
+    "nsfw": "NSFW",
+    "repeat_confirm_cancel_button": "Neopakovat",
+    "favorites": "Oblíbené",
+    "repeats": "Opakovaní",
+    "repeat_confirm": "Opravdu chcete zopakovat tento příspěvek?",
+    "delete": "Smazat příspěvek",
+    "copy_link": "Kopírovat odkaz k příspěvku",
+    "external_source": "Externí zdroj",
+    "edit": "Upravit příspěvek",
+    "bookmark": "Přidat do záložek",
+    "unbookmark": "Odebrat ze záložek",
+    "mentions": "Zmínky",
+    "hide_full_subject": "Skrýt celý předmět",
+    "show_content": "Zobrazit obsah",
+    "hide_content": "Skrýt obsah",
+    "unmute_conversation": "Zrušit ztlumení konverzace",
+    "status_unavailable": "Příspěvek je nedostupný",
+    "status_deleted": "Tento příspěvek byl smazán",
+    "expand": "Rozbalit",
+    "show_all_attachments": "Zobrazit všechny přílohy",
+    "move_up": "Posunout přílohu doleva",
+    "open_gallery": "Otevřít galerii"
   },
   "user_card": {
     "approve": "Schválit",
@@ -406,7 +863,7 @@
     "favorites": "Oblíbené",
     "follow": "Sledovat",
     "follow_sent": "Požadavek odeslán!",
-    "follow_progress": "Odeslílám požadavek…",
+    "follow_progress": "Odesílám požadavek…",
     "follow_unfollow": "Přestat sledovat",
     "followees": "Sledovaní",
     "followers": "Sledující",
@@ -455,5 +912,270 @@
       "GiB": "GiB",
       "TiB": "TiB"
     }
+  },
+  "about": {
+    "mrf": {
+      "federation": "Federace",
+      "keyword": {
+        "ftl_removal": "Odstranění z časové osy \"Celá známá síť\"",
+        "reject": "Odmítnout",
+        "replace": "Nahradit",
+        "is_replaced_by": "→",
+        "keyword_policies": "Zásady klíčových slov"
+      },
+      "mrf_policies": "Povolené MRF zásady",
+      "simple": {
+        "instance": "Instance",
+        "reason": "Důvod",
+        "not_applicable": "N/A",
+        "accept": "Přijmout",
+        "accept_desc": "Tato instance přijímá zprávy pouze z následujících instancí:",
+        "reject": "Odmítnout",
+        "quarantine": "Karanténa",
+        "quarantine_desc": "Tato instance bude posílat pouze veřejné zprávy na tyto instance:",
+        "media_removal": "Odstranění médií",
+        "media_nsfw_desc": "Tato instance vynucuje média nastavené jako citlivé v příspěvcích z následujících instancí:",
+        "simple_policies": "Zásady specifické pro danou instanci",
+        "ftl_removal": "Odstranění z časové osy \"Celá známá síť\"",
+        "media_nsfw": "Vynutit média jako citlivé",
+        "reject_desc": "Tato instance nebude přijímat zprávy z následujících instancí:",
+        "media_removal_desc": "Tato instance odstraňuje média v příspěvcích z následujících instancí:",
+        "ftl_removal_desc": "Tato instance odstraňuje tyto instance z časové osy \"Celá známá síť\":"
+      },
+      "mrf_policies_desc": "Zásady MRF mění chování federace této instance. Následující MRF zásady jsou povoleny:"
+    },
+    "staff": "Personál"
+  },
+  "exporter": {
+    "processing": "Zpracovávám, zanedlouho budete vyzváni ke stažení vašeho souboru",
+    "export": "Exportovat"
+  },
+  "remote_user_resolver": {
+    "searching_for": "Hledám",
+    "error": "Nenalezeno."
+  },
+  "polls": {
+    "multiple_choices": "Výběr více možností",
+    "expiry": "Doba ankety",
+    "add_poll": "Přidat anketu",
+    "add_option": "Přidat možnost",
+    "single_choice": "Výběr jediné možnosti",
+    "option": "Možnost",
+    "votes": "hlasy",
+    "people_voted_count": "{count} hlasoval/a | {count} voličů",
+    "votes_count": "{count} hlasovat | {count} hlasů",
+    "vote": "Hlasovat",
+    "type": "Typ ankety",
+    "expires_in": "Anketa končí za {0}",
+    "expired": "Anketa skončila před {0}",
+    "not_enough_options": "Příliš málo jedinečných možností v anketě"
+  },
+  "interactions": {
+    "follows": "Nových sledujících",
+    "moves": "Uživatel migroval",
+    "load_older": "Načíst starší interakce",
+    "emoji_reactions": "Emoji reakce",
+    "reports": "Stížnosti",
+    "favs_repeats": "Opakované a oblíbené"
+  },
+  "emoji": {
+    "unicode_groups": {
+      "animals-and-nature": "Zvířata a příroda",
+      "flags": "Vlajky",
+      "activities": "Aktivity",
+      "people-and-body": "Lidé a těla",
+      "food-and-drink": "Jídlo a pití",
+      "objects": "Objekty",
+      "smileys-and-emotion": "Smajlíky a emoce",
+      "symbols": "Symboly",
+      "travel-and-places": "Cestování a místa"
+    },
+    "unicode": "Unicode emoji",
+    "load_all": "Načítání všech {emojiAmount} emoji",
+    "stickers": "Nálepky",
+    "emoji": "Emoji",
+    "keep_open": "Ponechat okno výběru otevřené",
+    "search_emoji": "Hledat emoji",
+    "add_emoji": "Vložit emoji",
+    "custom": "Vlastní emoji",
+    "load_all_hint": "Načteno prvních {saneAmount} emoji, načítání všech emoji může způsobit problémy s výkonem.",
+    "unpacked": "Rozbalené emoji",
+    "regional_indicator": "Regionální indikátor {letter}",
+    "hide_custom_emoji": "Skrýt vlastní emoji"
+  },
+  "importer": {
+    "submit": "Odeslat",
+    "success": "Úspěšně importováno.",
+    "error": "Nastala chyba při importování ze souboru."
+  },
+  "report": {
+    "reporter": "Nahlašující:",
+    "reported_user": "Nahlášený uživatel:",
+    "reported_statuses": "Nahlášené příspěvky:",
+    "notes": "Poznámky:",
+    "state": "Stav:",
+    "state_open": "Otevřeno",
+    "state_closed": "Uzavřeno",
+    "state_resolved": "Vyřešeno"
+  },
+  "announcements": {
+    "mark_as_read_action": "Označit jako přečtené",
+    "page_header": "Oznámení",
+    "title": "Oznámení",
+    "post_form_header": "Vyvěsit oznámení",
+    "post_placeholder": "Zde napište obsah vašeho oznámení…",
+    "post_action": "Odeslat",
+    "post_error": "Chyba: {error}",
+    "close_error": "Zavřít",
+    "delete_action": "Smazat",
+    "start_time_prompt": "Čas začátku: ",
+    "end_time_prompt": "Čas ukončení: ",
+    "all_day_prompt": "Toto je celodenní akce",
+    "published_time_display": "Zveřejněno v {time}",
+    "start_time_display": "Začíná v {time}",
+    "end_time_display": "Končí v {time}",
+    "edit_action": "Upravit",
+    "submit_edit_action": "Odeslat",
+    "cancel_edit_action": "Zrušit",
+    "inactive_message": "Toto oznámení není aktivní"
+  },
+  "shoutbox": {
+    "title": "Shoutbox"
+  },
+  "domain_mute_card": {
+    "mute": "Ztlumit",
+    "mute_progress": "Ztlumuji…",
+    "unmute": "Zrušit ztlumení",
+    "unmute_progress": "Ruším ztlumení…"
+  },
+  "errors": {
+    "storage_unavailable": "Pleroma nemohla získat přístup k úložišti prohlížeče. Vaše přihlášení nebo lokální nastavení se neuloží a můžete narazit na neočekávané problémy. Zkuste povolit soubory cookies."
+  },
+  "selectable_list": {
+    "select_all": "Vybrat vše"
+  },
+  "admin_dash": {
+    "window_title": "Administrace",
+    "commit_all": "Uložit vše",
+    "tabs": {
+      "nodb": "Žádné nastavení v databázi",
+      "frontends": "Frontendy",
+      "instance": "Instance",
+      "limits": "Limity",
+      "emoji": "Emoji"
+    },
+    "nodb": {
+      "heading": "Nastavení v databázi je vypnuto",
+      "documentation": "dokumentace",
+      "text2": "Většina konfiguračních možností nebude dostupná."
+    },
+    "wip_notice": "Tento administrační panel je experimentální a v aktivní vývoji, {adminFeLink}.",
+    "old_ui_link": "staré administrační rozhraní je dostupné zde",
+    "reset_all": "Resetovat vše",
+    "frontend": {
+      "failure_installing_frontend": "Nepodařilo se nainstalovat frontend {version}: {reason}",
+      "reinstall": "Přeinstalovat",
+      "available_frontends": "Dostupné k instalaci",
+      "is_default": "(Výchozí)",
+      "versions": "Dostupné verze",
+      "build_url": "URL sestavení",
+      "install": "Instalovat",
+      "install_version": "Instalovat verzi {version}",
+      "more_install_options": "Více instalačních možností",
+      "more_default_options": "Více výchozích nastavení pro možnosti",
+      "set_default": "Nastavit výchozí",
+      "default_frontend": "Výchozí frontend",
+      "set_default_version": "Nastavit verzi {version} jako výchozí",
+      "repository": "Odkaz k repozitáři",
+      "is_default_custom": "(Výchozí, verze: {version})",
+      "success_installing_frontend": "Frontend {version} byl úspěšně nainstalován"
+    },
+    "captcha": {
+      "native": "Nativní",
+      "kocaptcha": "KoCaptcha"
+    },
+    "instance": {
+      "instance": "Informace o instanci",
+      "captcha_header": "CAPTCHA",
+      "restrict": {
+        "activities": "Přístup k příspěvkům a aktivitám",
+        "timelines": "Přístup k časovým osám",
+        "profiles": "Přístup k uživatelským profilům",
+        "header": "Omezit přístup pro anonymní návštěvníky"
+      },
+      "registrations": "Registrace uživatelů",
+      "kocaptcha": "KoCaptcha nastavení"
+    },
+    "limits": {
+      "posts": "Limity příspěvků",
+      "uploads": "Limity příloh",
+      "users": "Limity uživatelských profilů",
+      "arbitrary_limits": "Libovolné limity",
+      "profile_fields": "Limity profilových polí",
+      "user_uploads": "Limity médií profilů"
+    },
+    "emoji": {
+      "global_actions": "Globální akce",
+      "reload": "Znovu načíst emoji",
+      "importFS": "Importovat emoji ze souborového systému",
+      "error": "Chyba: {0}",
+      "create_pack": "Vytvořit balíček",
+      "delete_pack": "Smazat balíček",
+      "new_pack_name": "Nový název balíčku",
+      "create": "Vytvořit",
+      "emoji_packs": "Emoji balíčky",
+      "remote_packs": "Vzdálené balíčky",
+      "do_list": "List",
+      "emoji_pack": "Emoji balíček",
+      "edit_pack": "Upravit balíček",
+      "description": "Popis",
+      "homepage": "Domovská stránka",
+      "fallback_src": "Záložní zdroj",
+      "fallback_sha256": "Záložní SHA256",
+      "share": "Sdílet",
+      "save": "Uložit",
+      "save_meta": "Uložit metadata",
+      "revert_meta": "Vrátit zpět metadata",
+      "delete": "Smazat",
+      "add_file": "Přidat soubor",
+      "adding_new": "Přidávání nových emoji",
+      "shortcode": "Zkratka",
+      "filename": "Jméno souboru",
+      "new_shortcode": "Zkrat, ponechte prázdné pro odvození",
+      "delete_confirm": "Opravdu chcete smazat {0}?",
+      "download_pack": "Stáhnout balíček",
+      "downloading_pack": "Stahování {0}",
+      "download": "Stáhnout",
+      "download_as_name": "Nové jméno",
+      "download_as_name_full": "Nové jméno, pro opakované použití ponechte prázdné",
+      "files": "Soubory",
+      "editing": "Upravování {0}",
+      "delete_title": "Smazat?",
+      "emoji_changed": "Neuložené změny emoji souborů, zkontrolujte zvýrazněné emoji",
+      "replace_warning": "Tímto se NAHRADÍ místní balíček se stejným jménem",
+      "metadata_changed": "Metadata jsou rozdílné od uložených",
+      "revert": "Vrátit zpět",
+      "new_filename": "Jméno souboru, ponechte prázdné pro odvození"
+    },
+    "temp_overrides": {
+      ":pleroma": {
+        ":instance": {
+          ":background_image": {
+            "label": "Obrázek na pozadí",
+            "description": "Obrázek na pozadí (především používáno PleromaFE)"
+          },
+          ":description_limit": {
+            "label": "Limit",
+            "description": "Limit počtu znaků pro popisy příloh"
+          },
+          ":public": {
+            "label": "Instance je veřejná"
+          },
+          ":limit_to_local_content": {
+            "label": "Limitovat vyhledávání pouze na místní obsah"
+          }
+        }
+      }
+    }
   }
 }
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 10ba2ef86..3fad5ca83 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -174,6 +174,8 @@
     "home_timeline": "Home timeline",
     "twkn": "Known Network",
     "bookmarks": "Bookmarks",
+    "all_bookmarks": "All bookmarks",
+    "bookmark_folders": "Bookmark folders",
     "user_search": "User Search",
     "search": "Search",
     "search_close": "Close search bar",
@@ -186,10 +188,12 @@
     "edit_pinned": "Edit pinned items",
     "edit_finish": "Done editing",
     "mobile_sidebar": "Toggle mobile sidebar",
-    "mobile_notifications": "Open notifications",
     "mobile_notifications": "Open notifications (there are unread ones)",
     "mobile_notifications_close": "Close notifications",
-    "announcements": "Announcements"
+    "mobile_notifications_mark_as_seen": "Mark all as seen",
+    "announcements": "Announcements",
+    "quotes": "Quotes",
+    "drafts": "Drafts"
   },
   "notifications": {
     "broken_favorite": "Unknown status, searching for it…",
@@ -205,7 +209,14 @@
     "migrated_to": "migrated to",
     "reacted_with": "reacted with {0}",
     "submitted_report": "submitted a report",
-    "poll_ended": "poll has ended"
+    "poll_ended": "poll has ended",
+    "unread_announcements": "{num} unread announcement | {num} unread announcements",
+    "unread_chats": "{num} unread chat | {num} unread chats",
+    "unread_follow_requests": "{num} new follow request | {num} new follow requests",
+    "configuration_tip": "You can customize what to display here in {theSettings}. {dismiss}",
+    "configuration_tip_settings": "the settings",
+    "configuration_tip_dismiss": "Do not show again",
+    "subscribed_status": "posted"
   },
   "polls": {
     "add_poll": "Add poll",
@@ -221,7 +232,9 @@
     "expiry": "Poll age",
     "expires_in": "Poll ends in {0}",
     "expired": "Poll ended {0} ago",
-    "not_enough_options": "Too few unique options in poll"
+    "not_enough_options": "Too few unique options in poll",
+    "non_anonymous": "Public poll",
+    "non_anonymous_title": "Other instances may display the options you voted for"
   },
   "emoji": {
     "stickers": "Stickers",
@@ -230,6 +243,7 @@
     "search_emoji": "Search for an emoji",
     "add_emoji": "Insert emoji",
     "custom": "Custom emoji",
+    "hide_custom_emoji": "Hide custom emojis",
     "unpacked": "Unpacked emoji",
     "unicode": "Unicode emoji",
     "unicode_groups": {
@@ -256,11 +270,14 @@
     "emoji_reactions": "Emoji Reactions",
     "reports": "Reports",
     "moves": "User migrates",
-    "load_older": "Load older interactions"
+    "load_older": "Load older interactions",
+    "statuses": "Subscriptions"
   },
   "post_status": {
     "edit_status": "Edit status",
     "new_status": "Post new status",
+    "reply_option": "Reply to this status",
+    "quote_option": "Quote this status",
     "account_not_locked_warning": "Your account is not {0}. Anyone can follow you to view your follower-only posts.",
     "account_not_locked_warning_link": "locked",
     "attachments_sensitive": "Mark attachments as sensitive",
@@ -295,7 +312,17 @@
       "private": "Followers-only - post to followers only",
       "public": "Public - post to public timelines",
       "unlisted": "Unlisted - do not post to public timelines"
-    }
+    },
+    "close_confirm_title": "Closing post form",
+    "close_confirm": "What do you want to do with your current writing?",
+    "close_confirm_save_button": "Save",
+    "close_confirm_discard_button": "Discard",
+    "close_confirm_continue_composing_button": "Continue composing",
+    "auto_save_nothing_new": "Nothing new to save.",
+    "auto_save_saved": "Saved.",
+    "auto_save_saving": "Saving...",
+    "save_to_drafts_button": "Save to drafts",
+    "save_to_drafts_and_close_button": "Save to drafts and close"
   },
   "registration": {
     "bio_optional": "Bio (optional)",
@@ -350,6 +377,12 @@
     "remove_language": "Remove",
     "primary_language": "Primary language:",
     "fallback_language": "Fallback language {index}:",
+    "actor_type": "This account is:",
+    "actor_type_description": "Marking your account as a group will make it automatically repeat statuses that mention it.",
+    "actor_type_Person": "a normal user",
+    "actor_type_Service": "a bot",
+    "actor_type_Group": "a group",
+    "mobile_center_dialog": "Vertically center dialogs on mobile",
     "app_name": "App name",
     "expert_mode": "Show advanced",
     "save": "Save changes",
@@ -359,6 +392,20 @@
     "enter_current_password_to_confirm": "Enter your current password to confirm your identity",
     "post_look_feel": "Posts Look & Feel",
     "mention_links": "Mention links",
+    "appearance": "Appearance",
+    "confirm_new_setting": "Confirm new setting?",
+    "confirm_new_question": "Does this look ok? Setting will be reverted in 10 seconds.",
+    "revert": "Revert",
+    "confirm": "Confirm",
+    "text_size": "Text and interface size",
+    "text_size_tip": "Use {0} for absolute values, {1} will scale with browser default text size.",
+    "text_size_tip2": "Values other than {0} might break some things and themes",
+    "emoji_size": "Emoji size",
+    "navbar_size": "Top bar size",
+    "panel_header_size": "Panel header size",
+    "visual_tweaks": "Minor visual tweaks",
+    "theme_debug": "Show what background theme engine assumes when dealing with transparancy (DEBUG)",
+    "scale_and_layout": "Interface scale and layout",
     "mfa": {
       "otp": "OTP",
       "setup_otp": "Setup OTP",
@@ -380,10 +427,19 @@
         "desc": "To enable two-factor authentication, enter the code from your two-factor app:"
       }
     },
+    "units": {
+      "time": {
+        "m": "minutes",
+        "s": "seconds",
+        "h": "hours",
+        "d": "days"
+      }
+    },
     "lists_navigation": "Show lists in navigation",
     "allow_following_move": "Allow auto-follow when following account moves",
     "attachmentRadius": "Attachments",
     "attachments": "Attachments",
+    "image_compression": "Compress images before uploading",
     "avatar": "Avatar",
     "avatarAltRadius": "Avatars (notifications)",
     "avatarRadius": "Avatars",
@@ -414,7 +470,6 @@
     "added_backup": "Added a new backup.",
     "add_backup_error": "Error adding a new backup: {error}",
     "blocks_tab": "Blocks",
-    "bot": "This is a bot account",
     "btnRadius": "Buttons",
     "cBlue": "Blue (Reply, follow)",
     "cGreen": "Green (Retweet)",
@@ -436,6 +491,8 @@
     "confirm_dialogs_unfollow": "unfollowing a user",
     "confirm_dialogs_block": "blocking a user",
     "confirm_dialogs_mute": "muting a user",
+    "confirm_dialogs_mute_domain": "muting domains",
+    "confirm_dialogs_mute_conversation": "muting conversations",
     "confirm_dialogs_delete": "deleting a status",
     "confirm_dialogs_logout": "logging out",
     "confirm_dialogs_approve_follow": "approving a follower",
@@ -466,8 +523,18 @@
     "avatar_size_instruction": "The recommended minimum size for avatar images is 150x150 pixels.",
     "pad_emoji": "Pad emoji with spaces when adding from picker",
     "autocomplete_select_first": "Automatically select the first candidate when autocomplete results are available",
+    "unsaved_post_action": "When you try to close an unsaved posting form",
+    "unsaved_post_action_save": "Save it to drafts",
+    "unsaved_post_action_discard": "Discard it",
+    "unsaved_post_action_confirm": "Ask every time",
+    "auto_save_draft": "Save drafts as you compose",
     "emoji_reactions_on_timeline": "Show emoji reactions on timeline",
     "emoji_reactions_scale": "Reactions scale factor",
+    "absolute_time_format": "Use absolute time format",
+    "absolute_time_format_min_age": "Only use for time older than this amount of time",
+    "absolute_time_format_12h": "Time format",
+    "absolute_time_format_12h_12h": "12 hour format (i.e. 10:00 PM)",
+    "absolute_time_format_12h_24h": "24 hour format (i.e. 22:00)",
     "export_theme": "Save preset",
     "filtering": "Filtering",
     "wordfilter": "Wordfilter",
@@ -486,7 +553,10 @@
     "hide_media_previews": "Hide media previews",
     "hide_muted_posts": "Hide posts of muted users",
     "mute_bot_posts": "Mute bot posts",
-    "hide_bot_indication": "Hide bot indication in posts",
+    "hide_actor_type_indication": "Hide actor type (bots, groups, etc.) indication in posts",
+    "hide_scrobbles": "Hide scrobbles",
+    "hide_scrobbles_after": "Hide scrobbles older than",
+    "mute_sensitive_posts": "Mute sensitive posts",
     "hide_all_muted_posts": "Hide muted posts",
     "max_thumbnails": "Maximum amount of thumbnails per post (empty = no limit)",
     "hide_isp": "Hide instance-specific panel",
@@ -519,6 +589,8 @@
     "loop_video_silent_only": "Loop only videos without sound (i.e. Mastodon's \"gifs\")",
     "mutes_tab": "Mutes",
     "play_videos_in_modal": "Play videos in a popup frame",
+    "url": "URL",
+    "preview": "Preview",
     "file_export_import": {
       "backup_restore": "Settings backup",
       "backup_settings": "Backup settings to file",
@@ -550,13 +622,23 @@
     "posts": "Posts",
     "user_profiles": "User Profiles",
     "notification_visibility": "Types of notifications to show",
+    "notification_visibility_in_column": "Show in notifications column/drawer",
+    "notification_visibility_native_notifications": "Show a native notification",
     "notification_visibility_follows": "Follows",
+    "notification_visibility_follow_requests": "Follow requests",
     "notification_visibility_likes": "Favorites",
     "notification_visibility_mentions": "Mentions",
     "notification_visibility_repeats": "Repeats",
+    "notification_visibility_reports": "Reports",
     "notification_visibility_moves": "User Migrates",
     "notification_visibility_emoji_reactions": "Reactions",
     "notification_visibility_polls": "Ends of polls you voted in",
+    "notification_visibility_statuses": "Subscriptions",
+    "notification_show_extra": "Show extra notifications in the notifications column",
+    "notification_extra_chats": "Show unread chats",
+    "notification_extra_announcements": "Show unread announcements",
+    "notification_extra_follow_requests": "Show new follow requests",
+    "notification_extra_tip": "Show the customization tip for extra notifications",
     "no_rich_text_description": "Strip rich text formatting from all posts",
     "no_blocks": "No blocks",
     "no_mutes": "No mutes",
@@ -609,6 +691,7 @@
     "subject_line_email": "Like email: \"re: subject\"",
     "subject_line_mastodon": "Like mastodon: copy as is",
     "subject_line_noop": "Do not copy",
+    "force_theme_recompilation_debug": "Disable theme cahe, force recompile on each boot (DEBUG)",
     "conversation_display": "Conversation display style",
     "conversation_display_tree": "Tree-style",
     "conversation_display_tree_quick": "Tree view",
@@ -641,6 +724,7 @@
     "use_websockets": "Use websockets (Realtime updates)",
     "text": "Text",
     "theme": "Theme",
+    "theme_old": "Theme editor (old)",
     "theme_help": "Use hex color codes (#rrggbb) to customize your color theme.",
     "theme_help_v2_1": "You can also override certain component's colors and opacity by toggling the checkbox, use \"Clear all\" button to clear all overrides.",
     "theme_help_v2_2": "Icons underneath some entries are background/text contrast indicators, hover over for detailed info. Please keep in mind that when using transparency contrast indicators show the worst possible case.",
@@ -672,15 +756,130 @@
     "greentext": "Meme arrows",
     "show_yous": "Show (You)s",
     "notifications": "Notifications",
+    "notification_setting_annoyance": "Annoyance",
+    "notification_setting_drawer_marks_as_seen": "Closing drawer (mobile) marks all notifications as read",
+    "notification_setting_ignore_inactionable_seen": "Ignore read state of inactionable notifications (likes, repeats etc)",
+    "notification_setting_ignore_inactionable_seen_tip": "This will not actually mark those notifications as read, and you'll still get desktop notifications about them if you chose so",
+    "notification_setting_unseen_at_top": "Show unread notifications above others",
     "notification_setting_filters": "Filters",
+    "notification_setting_filters_chrome_push": "On some browsers (chrome) it might be impossible to completely filter out notifications by type when they arrive by Push",
     "notification_setting_block_from_strangers": "Block notifications from users who you do not follow",
     "notification_setting_privacy": "Privacy",
     "notification_setting_hide_notification_contents": "Hide the sender and contents of push notifications",
     "notification_mutes": "To stop receiving notifications from a specific user, use a mute.",
     "notification_blocks": "Blocking a user stops all notifications as well as unsubscribes them.",
     "enable_web_push_notifications": "Enable web push notifications",
+    "enable_web_push_always_show": "Always show web push notifications",
+    "enable_web_push_always_show_tip": "Some browsers (Chromium, Chrome) require that push messages always result in a notification, otherwise generic 'Website was updated in background' is shown, enable this to prevent this notification from showing, as Chrome seem to hide push notifications if tab is in focus. Can result in showing duplicate notifications on other browsers.",
     "more_settings": "More settings",
     "style": {
+      "custom_theme_used": "(Custom theme)",
+      "custom_style_used": "(Custom style)",
+      "stock_theme_used": "(Stock theme)",
+      "themes2_outdated": "Editor for Themes V2 is being phased out and will eventually be replaced with a new one that takes advantage of new Themes V3 engine. It should still work but experience might be degraded and inconsistent.",
+      "appearance_tab_note": "Changes on this tab do not affect the theme used, so exported theme will be different from what seen in the UI",
+      "update_preview": "Update preview",
+      "themes3": {
+        "define": "Override",
+        "palette": {
+          "label": "Color schemes",
+          "name_label": "Color scheme name",
+          "import": "Import palette",
+          "export": "Export palette",
+          "apply": "Apply palette",
+          "bg": "Panel background",
+          "fg": "Buttons etc.",
+          "text": "Text",
+          "link": "Links",
+          "accent": "Accent color",
+          "cRed": "Red color",
+          "cBlue": "Blue color",
+          "cGreen": "Green color",
+          "cOrange": "Orange color",
+          "wallpaper": "Wallpaper",
+          "v2_unsupported": "Older v2 themes don't support palettes. Switch to v3 theme to make use of palettes",
+          "bundled": "Bundled palettes",
+          "style": "Palettes provided by selected style",
+          "user": "Custom palette",
+          "imported": "Imported"
+        },
+        "editor": {
+          "title": "Style editor",
+          "reset_style": "Reset",
+          "load_style": "Open from file",
+          "save_style": "Save",
+          "style_name": "Stylesheet name",
+          "style_author": "Made by",
+          "style_license": "License",
+          "style_website": "Website",
+          "component_selector": "Component",
+          "variant_selector": "Variant",
+          "states_selector": "States",
+          "main_tab": "Main",
+          "shadows_tab": "Shadows",
+          "background": "Background color",
+          "text_color": "Text color",
+          "icon_color": "Icon color",
+          "link_color": "Link color",
+          "contrast": "Text contrast",
+          "roundness": "Roundness",
+          "opacity": "Opacity",
+          "border_color": "Border color",
+          "include_in_rule": "Add to rule",
+          "test_string": "TEST",
+          "invalid": "Invalid",
+          "refresh_preview": "Refresh preview",
+          "apply_preview": "Apply",
+          "text_auto": {
+            "label": "Auto-contrast",
+            "no-preserve": "Black or White",
+            "preserve": "Keep color",
+            "no-auto": "Disabled"
+          },
+          "component_tab": "Components style",
+          "palette_tab": "Color schemes",
+          "variables_tab": "Variables (Advanced)",
+          "variables": {
+            "label": "Variables",
+            "name_label": "Name:",
+            "type_label": "Type:",
+            "type_shadow": "Shadow",
+            "type_color": "Color",
+            "type_generic": "Generic",
+            "virtual_color": "Variable color value"
+          }
+        },
+        "hacks": {
+          "underlay_overrides": "Change underlay",
+          "underlay_override_mode_none": "Theme default",
+          "underlay_override_mode_opaque": "Replace with solid color",
+          "underlay_override_mode_transparent": "Remove entirely (might break some themes)",
+          "force_interface_roundness": "Override interface roundness/sharpness",
+          "forced_roundness_mode_disabled": "Use theme defaults",
+          "forced_roundness_mode_sharp": "Force sharp edges",
+          "forced_roundness_mode_nonsharp": "Force not-so-sharp (1px roundness) edges",
+          "forced_roundness_mode_round": "Force round edges"
+        },
+        "font": {
+          "group-builtin": "Browser default fonts",
+          "builtin" : {
+            "serif": "Serif",
+            "sans-serif": "Sans-serif",
+            "monospace": "Monospace",
+            "inherit": "Unchanged"
+          },
+          "group-local": "Locally installed fonts",
+          "local-unavailable1": "List of locally installed fonts unavailalbe",
+          "local-unavailable2": "Use manual entry to specify custom font",
+          "font_list_unavailable": "Couldn't get locally installed fonts: {error}",
+          "lookup_local_fonts": "Load list of fonts installed on this computer",
+          "enter_manually": "Enter font name family manually",
+          "entry": "Enter {fontFamily}",
+          "select": "Select font",
+          "label": "{label} font"
+        }
+      },
+      "interface_font_user_override": "Override theme/browser font used",
       "switcher": {
         "keep_color": "Keep colors",
         "keep_shadows": "Keep shadows",
@@ -772,13 +971,24 @@
         "component": "Component",
         "override": "Override",
         "shadow_id": "Shadow #{value}",
+        "offset": "Shadow offset",
+        "zoom": "Zoom",
+        "offset-x": "x:",
+        "offset-y": "y:",
+        "light_grid": "Use light checkerboard",
+        "color_override": "Use different color",
+        "name": "Name",
         "blur": "Blur",
         "spread": "Spread",
         "inset": "Inset",
+        "raw": "Plain shadow",
+        "expression": "Expression (advanced)",
+        "empty_expression": "Empty expression",
         "hintV3": "For shadows you can also use the {0} notation to use other color slot.",
         "filter_hint": {
           "always_drop_shadow": "Warning, this shadow always uses {0} when browser supports it.",
           "drop_shadow_syntax": "{0} does not support {1} parameter and {2} keyword.",
+          "avatar_inset_short": "Separate inset shadow",
           "avatar_inset": "Please note that combining both inset and non-inset shadows on avatars might give unexpected results with transparent avatars.",
           "spread_zero": "Shadows with spread > 0 will appear as if it was set to zero",
           "inset_classic": "Inset shadows will be using {0}"
@@ -804,7 +1014,7 @@
           "interface": "Interface",
           "input": "Input fields",
           "post": "Post text",
-          "postCode": "Monospaced text in a post (rich text)"
+          "monospace": "Monospaced text"
         },
         "family": "Font name",
         "size": "Size (in px)",
@@ -830,6 +1040,145 @@
       "title": "Version",
       "backend_version": "Backend version",
       "frontend_version": "Frontend version"
+    },
+    "commit_value": "Save",
+    "commit_value_tooltip": "Value is not saved, press this button to commit your changes",
+    "reset_value": "Reset",
+    "reset_value_tooltip": "Reset draft",
+    "hard_reset_value": "Hard reset",
+    "hard_reset_value_tooltip": "Remove setting from storage, forcing use of default value"
+  },
+  "admin_dash": {
+    "window_title": "Administration",
+    "wip_notice": "This admin dashboard is experimental and WIP, {adminFeLink}.",
+    "old_ui_link": "old admin UI available here",
+    "reset_all": "Reset all",
+    "commit_all": "Save all",
+    "tabs": {
+      "nodb": "No DB Config",
+      "instance": "Instance",
+      "limits": "Limits",
+      "frontends": "Front-ends",
+      "emoji": "Emoji"
+    },
+    "nodb": {
+      "heading": "Database config is disabled",
+      "text": "You need to change backend config files so that {property} is set to {value}, see more in {documentation}.",
+      "documentation": "documentation",
+      "text2": "Most configuration options will be unavailable."
+    },
+    "captcha": {
+      "native": "Native",
+      "kocaptcha": "KoCaptcha"
+    },
+    "instance": {
+      "instance": "Instance information",
+      "registrations": "User sign-ups",
+      "captcha_header": "CAPTCHA",
+      "kocaptcha": "KoCaptcha settings",
+      "access": "Instance access",
+      "restrict": {
+        "header": "Restrict access for anonymous visitors",
+        "description": "Detailed setting for allowing/disallowing access to certain aspects of API. By default (indeterminate state) it will disallow if instance is not public, ticked checkbox means disallow access even if instance is public, unticked means allow access even if instance is private. Please note that unexpected behavior might happen if some settings are set, i.e. if profile access is disabled posts will show without profile information.",
+        "timelines": "Timelines access",
+        "profiles": "User profiles access",
+        "activities": "Statuses/activities access"
+      }
+    },
+    "limits": {
+      "arbitrary_limits": "Arbitrary limits",
+      "posts": "Post limits",
+      "uploads": "Attachments limits",
+      "users": "User profile limits",
+      "profile_fields": "Profile fields limits",
+      "user_uploads": "Profile media limits"
+    },
+    "frontend": {
+      "repository": "Repository link",
+      "versions": "Available versions",
+      "build_url": "Build URL",
+      "reinstall": "Reinstall",
+      "is_default": "(Default)",
+      "is_default_custom": "(Default, version: {version})",
+      "install": "Install",
+      "install_version": "Install version {version}",
+      "more_install_options": "More install options",
+      "more_default_options": "More default setting options",
+      "set_default": "Set default",
+      "set_default_version": "Set version {version} as default",
+      "wip_notice": "Please note that this section is a WIP and lacks certain features as backend implementation of front-end management is incomplete.",
+      "default_frontend": "Default frontend",
+      "default_frontend_tip": "Default frontend will be shown to all users. Currently there's no way to for a user to select personal frontend. If you switch away from PleromaFE you'll most likely have to use old and buggy AdminFE to do instance configuration until we replace it.",
+      "default_frontend_unavail": "Default frontend settings are not available, as this requires configuration in the database",
+      "available_frontends": "Available for install",
+      "failure_installing_frontend": "Failed to install frontend {version}: {reason}",
+      "success_installing_frontend": "Frontend {version} successfully installed"
+    },
+    "emoji": {
+      "global_actions": "Global actions",
+      "reload": "Reload emoji",
+      "importFS": "Import emoji from filesystem",
+      "error": "Error: {0}",
+      "create_pack": "Create pack",
+      "delete_pack": "Delete pack",
+      "new_pack_name": "New pack name",
+      "create": "Create",
+      "emoji_packs": "Emoji packs",
+      "remote_packs": "Remote packs",
+      "do_list": "List",
+      "remote_pack_instance": "Remote pack instance",
+      "emoji_pack": "Emoji pack",
+      "edit_pack": "Edit pack",
+      "description": "Description",
+      "homepage": "Homepage",
+      "fallback_src": "Fallback source",
+      "fallback_sha256": "Fallback SHA256",
+      "share": "Share",
+      "save": "Save",
+      "save_meta": "Save metadata",
+      "revert_meta": "Revert metadata",
+      "delete": "Delete",
+      "revert": "Revert",
+      "add_file": "Add file",
+      "adding_new": "Adding new emoji",
+      "shortcode": "Shortcode",
+      "filename": "Filename",
+      "new_shortcode": "Shortcode, leave blank to infer",
+      "new_filename": "Filename, leave blank to infer",
+      "delete_confirm": "Are you sure you want to delete {0}?",
+      "download_pack": "Download pack",
+      "downloading_pack": "Downloading {0}",
+      "download": "Download",
+      "download_as_name": "New name",
+      "download_as_name_full": "New name, leave blank to reuse",
+      "files": "Files",
+      "editing": "Editing {0}",
+      "delete_title": "Delete?",
+      "metadata_changed": "Metadata different from saved",
+      "emoji_changed": "Unsaved emoji file changes, check highlighted emoji",
+      "replace_warning": "This will REPLACE the local pack of the same name"
+    },
+    "temp_overrides": {
+      ":pleroma": {
+        ":instance": {
+          ":public": {
+            "label": "Instance is public",
+            "description": "Disabling this will make all API accessible only for logged-in users, this will make Public and Federated timelines inaccessible to anonymous visitors."
+          },
+          ":limit_to_local_content": {
+            "label": "Limit search to local content",
+            "description": "Disables global network search for unauthenticated (default), all users or none"
+          },
+          ":description_limit": {
+            "label": "Limit",
+            "description": "Character limit for attachment descriptions"
+          },
+          ":background_image": {
+            "label": "Background image",
+            "description": "Background image (primarily used by PleromaFE)"
+          }
+        }
+      }
     }
   },
   "time": {
@@ -869,16 +1218,19 @@
     "socket_reconnected": "Realtime connection established",
     "socket_broke": "Realtime connection lost: CloseEvent code {0}",
     "quick_view_settings": "Quick view settings",
-    "quick_filter_settings": "Quick filter settings"
+    "quick_filter_settings": "Quick filter settings",
+    "filter_settings": "Filter"
   },
   "status": {
     "favorites": "Favorites",
     "repeats": "Repeats",
+    "quotes": "Quotes",
     "repeat_confirm": "Do you really want to repeat this status?",
     "repeat_confirm_title": "Repeat confirmation",
     "repeat_confirm_accept_button": "Repeat",
     "repeat_confirm_cancel_button": "Do not repeat",
     "delete": "Delete status",
+    "delete_error": "Error deleting status: {0}",
     "edit": "Edit status",
     "edited_at": "(last edited {time})",
     "pin": "Pin on profile",
@@ -891,16 +1243,28 @@
     "delete_confirm_accept_button": "Delete",
     "delete_confirm_cancel_button": "Keep",
     "reply_to": "Reply to",
+    "reply_to_with_icon": "{icon} {replyTo}",
+    "reply_to_with_arg": "{replyToWithIcon} {user}",
     "mentions": "Mentions",
     "replies_list": "Replies:",
     "replies_list_with_others": "Replies (+{numReplies} other): | Replies (+{numReplies} others):",
+    "mute_ellipsis": "Mute…",
+    "mute_user": "Mute user",
+    "unmute_user": "Unmute user",
+    "mute_domain": "Mute domain",
+    "unmute_domain": "Unmute domain",
     "mute_conversation": "Mute conversation",
     "unmute_conversation": "Unmute conversation",
     "status_unavailable": "Status unavailable",
     "copy_link": "Copy link to status",
     "external_source": "External source",
+    "muted_words": "Wordfiltered: {word} | Wordfiltered: {word} and {numWordsMore} more words",
+    "multi_reason_mute": "{main} + one more reason | {main} + {numReasonsMore} more reasons",
+    "muted_user": "User muted",
     "thread_muted": "Thread muted",
     "thread_muted_and_words": ", has words:",
+    "sensitive_muted": "Muting sensitive content",
+    "bot_muted": "Muting bot content",
     "show_full_subject": "Show full subject",
     "hide_full_subject": "Hide full subject",
     "show_content": "Show content",
@@ -932,7 +1296,14 @@
     "show_all_conversation_with_icon": "{icon} {text}",
     "show_all_conversation": "Show full conversation ({numStatus} other status) | Show full conversation ({numStatus} other statuses)",
     "show_only_conversation_under_this": "Only show replies to this status",
-    "status_history": "Status history"
+    "status_history": "Status history",
+    "reaction_count_label": "{num} person reacted | {num} people reacted",
+    "hide_quote": "Hide the quoted status",
+    "display_quote": "Display the quoted status",
+    "invisible_quote": "Quoted status unavailable: {link}",
+    "more_actions": "More actions on this status",
+    "loading": "Loading...",
+    "load_error": "Unable to load status: {error}"
   },
   "user_card": {
     "approve": "Approve",
@@ -999,6 +1370,7 @@
     "hide_repeats": "Hide repeats",
     "show_repeats": "Show repeats",
     "bot": "Bot",
+    "group": "Group",
     "birthday": "Born {birthday}",
     "admin_menu": {
       "moderation": "Moderation",
@@ -1051,9 +1423,13 @@
   },
   "tool_tip": {
     "media_upload": "Upload media",
+    "mentions": "Mentions",
     "repeat": "Repeat",
+    "unrepeat": "Unrepeat",
     "reply": "Reply",
+    "add_reaction": "Add reaction",
     "favorite": "Favorite",
+    "unfavorite": "Unfavorite",
     "add_reaction": "Add Reaction",
     "user_settings": "User Settings",
     "accept_follow_request": "Accept follow request",
@@ -1112,6 +1488,9 @@
     "error_sending_message": "Something went wrong when sending the message.",
     "empty_chat_list_placeholder": "You don't have any chats yet. Start a new chat!"
   },
+  "bookmarks": {
+    "manage_bookmark_folders": "Manage bookmark folders"
+  },
   "lists": {
     "lists": "Lists",
     "new": "New List",
@@ -1153,5 +1532,43 @@
   },
   "unicode_domain_indicator": {
     "tooltip": "This domain contains non-ascii characters."
+  },
+  "drafts": {
+    "drafts": "Drafts",
+    "no_drafts": "You have no drafts",
+    "empty": "(No content)",
+    "poll_tooltip": "Draft contains a poll",
+    "continue": "Continue composing",
+    "save": "Save without posting",
+    "abandon": "Abandon draft",
+    "abandon_confirm_title": "Abandon confirmation",
+    "abandon_confirm": "Do you really want to abandon this draft?",
+    "abandon_confirm_accept_button": "Abandon",
+    "abandon_confirm_cancel_button": "Keep",
+    "replying": "Replying to {statusLink}",
+    "editing": "Editing {statusLink}",
+    "unavailable": "(unavailable)"
+  },
+  "splash": {
+    "loading": "Loading...",
+    "theme": "Applying theme, please wait warmly...",
+    "fun_1": "Drink more water",
+    "fun_2": "Take it easy!",
+    "fun_3": "Suya...",
+    "fun_4": "My Pleroma machine is full power!",
+    "error": "Something went wrong"
+  },
+  "bookmark_folders": {
+    "select_folder": "Select bookmark folder",
+    "creating_folder": "Creating bookmark folder",
+    "editing_folder": "Editing folder {folderName}",
+    "emoji": "Emoji",
+    "name": "Folder name",
+    "new": "New Folder",
+    "create": "Create folder",
+    "delete": "Delete folder",
+    "update_folder": "Save changes",
+    "really_delete": "Do you really want to delete the folder?",
+    "error": "Error manipulating bookmark folders: {0}"
   }
 }
diff --git a/src/i18n/eo.json b/src/i18n/eo.json
index e013edee0..2912fc992 100644
--- a/src/i18n/eo.json
+++ b/src/i18n/eo.json
@@ -55,8 +55,8 @@
     "undo": "Malfari",
     "yes": "Jes",
     "no": "Ne",
-    "unpin": "Malfiksi eron",
-    "pin": "Fiksi eron",
+    "unpin": "Malfiksi",
+    "pin": "Fiksi",
     "scroll_to_top": "Rulumi supren"
   },
   "image_cropper": {
@@ -81,7 +81,11 @@
     "recovery_code": "Rehava kodo",
     "enter_two_factor_code": "Enigu kodon de duobla aŭtentikigo",
     "enter_recovery_code": "Enigu rehavan kodon",
-    "authentication_code": "Aŭtentikiga kodo"
+    "authentication_code": "Aŭtentikiga kodo",
+    "logout_confirm_title": "Konfirmo de adiaŭo",
+    "logout_confirm": "Ĉu vi certe volas adiaŭi?",
+    "logout_confirm_accept_button": "Adiaŭi",
+    "logout_confirm_cancel_button": "Ne adiaŭi"
   },
   "media_modal": {
     "previous": "Antaŭa",
@@ -90,7 +94,7 @@
     "hide": "Fermi vidilon de vidaŭdaĵoj"
   },
   "nav": {
-    "about": "Pri",
+    "about": "Prio",
     "back": "Reen",
     "chat": "Loka babilejo",
     "friend_requests": "Petoj pri abono",
@@ -115,7 +119,11 @@
     "edit_finish": "Fini redakton",
     "mobile_notifications": "Malfermi sciigojn (estas nelegitaj)",
     "mobile_notifications_close": "Fermi sciigojn",
-    "announcements": "Anoncoj"
+    "announcements": "Anoncoj",
+    "search_close": "Fermi serĉujon",
+    "mobile_sidebar": "(Mal)ŝalti flankan breton por telefonoj",
+    "mobile_notifications_mark_as_seen": "Marki ĉion vidita",
+    "quotes": "Citoj"
   },
   "notifications": {
     "broken_favorite": "Nekonata afiŝo, serĉante ĝin…",
@@ -131,7 +139,13 @@
     "follow_request": "volas vin aboni",
     "error": "Eraris akirado de sciigoj: {0}",
     "submitted_report": "sendis raporton",
-    "poll_ended": "enketo finiĝis"
+    "poll_ended": "enketo finiĝis",
+    "unread_chats": "{num} nelegita babilo | {num} nelegitaj babiloj",
+    "unread_follow_requests": "{num} nova abonpeto | {num} novaj abonpetoj",
+    "configuration_tip": "Vi povas ŝanĝi, kio montriĝos ĉi tie en {theSettings}. {dismiss}",
+    "configuration_tip_settings": "la agordoj",
+    "unread_announcements": "{num} nelegita anonco | {num} nelegitaj anoncoj",
+    "configuration_tip_dismiss": "Ne remontri plu"
   },
   "post_status": {
     "new_status": "Afiŝi",
@@ -166,10 +180,14 @@
     "direct_warning_to_first_only": "Ĉi tiu afiŝo estas nur videbla al uzantoj menciitaj je la komenco de la mesaĝo.",
     "direct_warning_to_all": "Ĉi tiu afiŝo estos videbla al ĉiuj menciitaj uzantoj.",
     "media_description": "Priskribo de vidaŭdaĵo",
-    "post": "Afiŝo",
+    "post": "Afiŝi",
     "edit_remote_warning": "Aliaj foraj nodoj eble ne subtenas redaktadon, kaj ne povos ricevi pli novan version de via afiŝo.",
     "edit_unsupported_warning": "Pleroma ne subtenas redaktadon de mencioj aŭ enketoj.",
-    "edit_status": "Redakti afiŝon"
+    "edit_status": "Redakti afiŝon",
+    "content_type_selection": "Formo de afiŝo",
+    "scope_notice_dismiss": "Fermi ĉi tiun avizon",
+    "reply_option": "Respondi al ĉi tiu afiŝo",
+    "quote_option": "Citi ĉi tiun afiŝon"
   },
   "registration": {
     "bio": "Priskribo",
@@ -189,14 +207,18 @@
       "email_required": "ne povas resti malplena",
       "password_required": "ne povas resti malplena",
       "password_confirmation_required": "ne povas resti malplena",
-      "password_confirmation_match": "samu la pasvorton"
+      "password_confirmation_match": "samu la pasvorton",
+      "birthday_min_age": "ne povas esti post {date}",
+      "birthday_required": "ne povas resti malplena"
     },
     "reason_placeholder": "Ĉi-node oni aprobas registriĝojn permane.\nSciigu la administrantojn kial vi volas registriĝi.",
     "reason": "Kialo registriĝi",
     "register": "Registriĝi",
     "bio_optional": "Prio (malnepra)",
     "email_optional": "Retpoŝtadreso (malnepra)",
-    "email_language": "En kiu lingvo vi volus ricevi retleterojn de la servilo?"
+    "email_language": "En kiu lingvo vi volus ricevi retleterojn de la servilo?",
+    "birthday": "Naskiĝtago:",
+    "birthday_optional": "Naskiĝtago (malnepra):"
   },
   "settings": {
     "app_name": "Nomo de aplikaĵo",
@@ -453,7 +475,8 @@
           "interface": "Fasado",
           "input": "Enigaj kampoj",
           "post": "Teksto de afiŝo",
-          "postCode": "Egallarĝa teksto en afiŝo (riĉteksto)"
+          "postCode": "Egallarĝa teksto en afiŝo (riĉteksto)",
+          "monospace": "Egallarĝa teksto"
         },
         "family": "Nomo de tiparo",
         "size": "Grando (en bilderoj)",
@@ -473,6 +496,27 @@
         "header_faint": "Tio estas en ordo",
         "checkbox": "Mi legetis la kondiĉojn de uzado",
         "link": "bela eta ligil’"
+      },
+      "custom_theme_used": "(Propra haŭto)",
+      "themes3": {
+        "hacks": {
+          "underlay_override_mode_transparent": "Tute forigi (povus rompi iujn haŭtojn)",
+          "forced_roundness_mode_disabled": "Uzi implicitajn valorojn de haŭto",
+          "forced_roundness_mode_sharp": "Devigi akrajn randojn",
+          "forced_roundness_mode_nonsharp": "Devigi ne tiom akrajn randojn (rondigo je 1 bildero)",
+          "forced_roundness_mode_round": "Devigi rondajn randojn"
+        },
+        "font": {
+          "builtin": {
+            "serif": "Kalkana",
+            "sans-serif": "Senkalkana",
+            "monospace": "Egallarĝa",
+            "inherit": "Senŝanĝe"
+          },
+          "group-local": "Loke instalitaj signoformoj",
+          "local-unavailable1": "Listo de loke instalitaj signoformoj ne estas disponebla",
+          "font_list_unavailable": "Ne povis akiri loke instalitajn signoformojn: {error}"
+        }
       }
     },
     "discoverable": "Permesi trovon de ĉi tiu konto en serĉrezultoj kaj aliaj servoj",
@@ -666,7 +710,71 @@
     "user_popover_avatar_overlay": "Aperigi ŝprucaĵon pri uzanto sur profilbildo",
     "show_yous": "Montri la markon «(Vi)»",
     "user_popover_avatar_action_zoom": "Zomi la profilbildon",
-    "third_column_mode": "Kun sufiĉo da spaco, montri trian kolumnon kun"
+    "third_column_mode": "Kun sufiĉo da spaco, montri trian kolumnon kun",
+    "birthday": {
+      "show_birthday": "Montri mian naskiĝtagon",
+      "label": "Naskiĝtago"
+    },
+    "confirm_dialogs_delete": "forigo de afiŝo",
+    "backup_running": "Ĉi tiu savkopiado progresas, traktis {number} datumon. | Ĉi tiu savkopiado progresas, traktis {number} datumojn.",
+    "backup_failed": "Ĉi tiu savkopiado malsukcesis.",
+    "autocomplete_select_first": "Memage elekti unuan kandidaton kiam rezultoj de memaga konjektado disponeblas",
+    "confirm_dialogs_logout": "adiaŭo",
+    "user_popover_avatar_action": "Post klako sur profilbildon en ŝprucaĵo",
+    "remove_language": "Forigi",
+    "primary_language": "Ĉefa lingvo:",
+    "confirm_dialogs": "Peti konfirmon je",
+    "confirm_dialogs_repeat": "ripeto de afiŝo",
+    "confirm_dialogs_unfollow": "malabono de uzanto",
+    "confirm_dialogs_block": "blokado de uzanto",
+    "confirm_dialogs_mute": "silentigo de uzanto",
+    "confirm_dialogs_approve_follow": "aprobo de abonanto",
+    "confirm_dialogs_deny_follow": "malaprobo de abonanto",
+    "confirm_dialogs_remove_follower": "forigo de abonanto",
+    "tree_fade_ancestors": "Montri responditojn de la nuna afiŝo per teksto malvigla",
+    "units": {
+      "time": {
+        "m": "minutoj",
+        "s": "sekundoj",
+        "h": "horoj",
+        "d": "tagoj"
+      }
+    },
+    "url": "URL",
+    "emoji_reactions_scale": "Grandeco de reagoj",
+    "actor_type_Person": "ordinara uzanto",
+    "actor_type": "Ĉi tiu konto estas:",
+    "actor_type_description": "Se vi markos vian konton grupo, ĝi memage ripetos afiŝojn, kiuj mencios ĝin.",
+    "actor_type_Service": "roboto",
+    "actor_type_Group": "grupo",
+    "hide_actor_type_indication": "Kaŝi specon de aganto (roboto, grupo, ktp.) en afiŝoj",
+    "commit_value_tooltip": "Valoro ne estas konservita; premu ĉi tiun butonon por konfirmi viajn ŝanĝojn",
+    "add_language": "Aldoni rezervan lingvon",
+    "commit_value": "Konservi",
+    "force_theme_recompilation_debug": "Malŝalti haŭtan kaŝmemoron, devigi retradukon post ĉiu enlego (POR ERARSERĈADO)",
+    "fallback_language": "Rezerva lingvo {index}:",
+    "notification_extra_follow_requests": "Montri novajn abonpetojn",
+    "notification_extra_tip": "Montri agordan konsileton por ekstraj sciigoj",
+    "notification_show_extra": "Montri ekstrajn sciigojn en la sciiga kolumno",
+    "notification_extra_chats": "Montri nelegitajn babilojn",
+    "notification_extra_announcements": "Montri nelegitajn anoncojn",
+    "notification_setting_annoyance": "Ĝeno",
+    "mute_sensitive_posts": "Silentigi konsternajn afiŝojn",
+    "preview": "Antaŭrigardo",
+    "notification_visibility_native_notifications": "Montri indiĝenan sciigon",
+    "notification_visibility_follow_requests": "Abonpetoj",
+    "notification_visibility_reports": "Raportoj",
+    "notification_setting_ignore_inactionable_seen": "Malatenti legitecon de nereageblaj sciigoj (ŝatoj, ripetoj, ktp.)",
+    "notification_setting_ignore_inactionable_seen_tip": "Ĉi tio ne markos la sciigojn legitaj, kaj vi ankoraŭ ricevos labortablajn sciigojn pri ili, se vi elektis ricevi tiujn",
+    "notification_setting_unseen_at_top": "Montri nelegitajn sciigojn super aliaj",
+    "appearance": "Aspekto",
+    "confirm_new_setting": "Ĉu konfirmi novan agordon?",
+    "confirm_new_question": "Ĉu tio ĉi aspektas ĝuste? La ŝanĝo malfariĝos post 10 sekundoj.",
+    "revert": "Malfari",
+    "confirm": "Konfirmi",
+    "text_size": "Grandeco de teksto kaj fasado",
+    "emoji_size": "Grandeco de bildosignoj",
+    "navbar_size": "Grandeco de supra breto"
   },
   "timeline": {
     "collapse": "Maletendi",
@@ -753,7 +861,33 @@
     "note_blank": "(Neniu)",
     "edit_note_apply": "Apliki",
     "edit_note_cancel": "Nuligi",
-    "edit_note": "Redakti noton"
+    "edit_note": "Redakti noton",
+    "block_confirm": "Ĉu vi certe volas bloki uzanton {user}?",
+    "block_confirm_accept_button": "Bloki",
+    "remove_follower_confirm": "Ĉu vi certe volas forigi uzanton {user} de viaj abonantoj?",
+    "approve_confirm_accept_button": "Aprobi",
+    "approve_confirm_cancel_button": "Ne aprobi",
+    "approve_confirm": "Ĉu vi certe volas aprobi abonan peton de {user}?",
+    "block_confirm_title": "Konfirmo de blokado",
+    "approve_confirm_title": "Konfirmo de aprobo",
+    "block_confirm_cancel_button": "Ne bloki",
+    "deny_confirm_accept_button": "Malaprobi",
+    "deny_confirm_cancel_button": "Ne malaprobi",
+    "mute_confirm_title": "Silentigi konfirmon",
+    "deny_confirm_title": "Konfirmo de malaprobo",
+    "mute_confirm": "Ĉu vi certe volas silentigi uzanton {user}?",
+    "mute_confirm_accept_button": "Silentigi",
+    "mute_confirm_cancel_button": "Ne silentigi",
+    "mute_duration_prompt": "Silentigi ĉi tiun uzanton por (0 signifas senliman silentigon):",
+    "remove_follower_confirm_accept_button": "Forigi",
+    "remove_follower_confirm_title": "Konfirmo de forigo de abonanto",
+    "birthday": "Naskita je {birthday}",
+    "deny_confirm": "Ĉu vi certe volas malaprobi abonan peton de {user}?",
+    "unfollow_confirm_cancel_button": "Ne malaboni",
+    "unfollow_confirm_title": "Konfirmo de malabono",
+    "unfollow_confirm": "Ĉu vi certe volas malaboni uzanton {user}?",
+    "unfollow_confirm_accept_button": "Malaboni",
+    "remove_follower_confirm_cancel_button": "Ne forigi"
   },
   "user_profile": {
     "timeline_title": "Historio de uzanto",
@@ -775,7 +909,8 @@
     "accept_follow_request": "Akcepti abonpeton",
     "add_reaction": "Aldoni reagon",
     "toggle_expand": "Etendi aŭ maletendi sciigon por montri plenan afiŝon",
-    "toggle_mute": "Etendi aŭ maletendi afiŝon por montri silentigitan enhavon"
+    "toggle_mute": "Etendi aŭ maletendi afiŝon por montri silentigitan enhavon",
+    "autocomplete_available": "{number} rezulto disponeblas. Uzu la sagajn klavojn supren kaj suben por foliumi ilin. | {number} rezulto disponeblas. Uzu la sagajn klavojn supren kaj suben por foliumi ilin."
   },
   "upload": {
     "error": {
@@ -813,7 +948,9 @@
       "symbols": "Simboloj",
       "travel-and-places": "Vojaĝoj kaj lokoj"
     },
-    "regional_indicator": "Regiona marko {letter}"
+    "regional_indicator": "Regiona marko {letter}",
+    "unpacked": "Malpakitaj bildosignoj",
+    "hide_custom_emoji": "Kaŝi proprajn bildosignojn"
   },
   "polls": {
     "not_enough_options": "Tro malmultaj unikaj elektebloj en la enketo",
@@ -892,7 +1029,8 @@
     "follows": "Novaj abonoj",
     "favs_repeats": "Ripetoj kaj ŝatoj",
     "emoji_reactions": "Bildosignaj reagoj",
-    "reports": "Raportoj"
+    "reports": "Raportoj",
+    "statuses": "Abonoj"
   },
   "errors": {
     "storage_unavailable": "Pleroma ne povis aliri deponejon de la foliumilo. Via saluto kaj viaj lokaj agordoj ne estos konservitaj, kaj vi eble renkontos neatenditajn problemojn. Provu permesi kuketojn."
@@ -951,7 +1089,20 @@
     "show_all_conversation_with_icon": "{icon} {text}",
     "show_only_conversation_under_this": "Montri nur respondojn al ĉi tiu afiŝo",
     "status_history": "Historio de afiŝo",
-    "open_gallery": "Malfermi galerion"
+    "open_gallery": "Malfermi galerion",
+    "delete_confirm_title": "Konfirmo de forigo",
+    "delete_confirm_accept_button": "Forigi",
+    "repeat_confirm": "Ĉu vi certe volas ripeti ĉi tiun afiŝon?",
+    "repeat_confirm_title": "Konfirmo de ripeto",
+    "repeat_confirm_accept_button": "Ripeti",
+    "repeat_confirm_cancel_button": "Ne ripeti",
+    "delete_confirm_cancel_button": "Ne forigi",
+    "delete_error": "Eraris forigo de afiŝo: {0}",
+    "hide_quote": "Kaŝi la cititan afiŝon",
+    "display_quote": "Montri la cititan afiŝon",
+    "reaction_count_label": "{num} persono reagis | {num} personoj reagis",
+    "invisible_quote": "Citita afiŝo ne disponeblas: {link}",
+    "quotes": "Citaĵoj"
   },
   "time": {
     "years_short": "{0}j",
@@ -1119,6 +1270,95 @@
     "edit_action": "Redakti",
     "submit_edit_action": "Afiŝi",
     "cancel_edit_action": "Nuligi",
-    "inactive_message": "Ĉi tiu anonco estas neaktiva"
+    "inactive_message": "Ĉi tiu anonco estas neaktiva",
+    "post_form_header": "Afiŝi anoncon"
+  },
+  "admin_dash": {
+    "frontend": {
+      "default_frontend": "Implicita fasado",
+      "install": "Instali",
+      "versions": "Disponeblaj versioj",
+      "install_version": "Instali version {version}",
+      "more_install_options": "Pli da elektebloj je instalo",
+      "more_default_options": "Pli da elektebloj je implicitaj agordoj",
+      "set_default": "Agordi implicita",
+      "reinstall": "Reinstali",
+      "default_frontend_tip": "Implicita fasado montriĝos al ĉiuj uzantoj. Ankoraŭ ne ekzistas maniero, kiel uzanto povas elekti propran fasadon. Se vi ŝaltos ion alian, ol [PleromaFE], vi verŝajne devos uzadi la malnovan kaj erareman [AdminFE] por agordi la nodon, ĝis ni anstataŭigos ĝin.",
+      "repository": "Ligilo al deponejo",
+      "is_default": "(Implicita)",
+      "is_default_custom": "(Implicita, versio: {version})",
+      "set_default_version": "Agordi version {version} implicita"
+    },
+    "emoji": {
+      "download_as_name_full": "Nova nomo; lasu malplena por reuzi",
+      "download_as_name": "Nova nomo",
+      "reload": "Re-enlegi bildosignojn",
+      "importFS": "Enporti bildosignojn de dosiersistemo",
+      "error": "Eraro: {0}",
+      "create": "Krei",
+      "do_list": "Listo",
+      "delete": "Forigi",
+      "add_file": "Aldoni dosieron",
+      "filename": "Dosiernomo",
+      "files": "Dosieroj",
+      "save_meta": "Konservi pridatumojn",
+      "description": "Priskribo",
+      "homepage": "Hejmpaĝo",
+      "save": "Konservi",
+      "revert": "Malfari",
+      "share": "Kunhavigi"
+    },
+    "tabs": {
+      "emoji": "Bildosignoj",
+      "frontends": "Fasadoj",
+      "instance": "Nodo",
+      "limits": "Limoj"
+    },
+    "instance": {
+      "registrations": "Registriĝoj de uzantoj",
+      "instance": "Informoj pri nodo",
+      "restrict": {
+        "profiles": "Aliro al profiloj de uzantoj",
+        "header": "Limigi aliron por sennomaj vizitantoj",
+        "timelines": "Aliro al historioj"
+      },
+      "access": "Aliro al nodo",
+      "kocaptcha": "Agordo de KoCaptcha"
+    },
+    "limits": {
+      "users": "Limoj de profiloj de uzantoj",
+      "profile_fields": "Limoj de kampoj de profiloj",
+      "user_uploads": "Limoj de vidaŭdaĵoj de profiloj",
+      "posts": "Limoj de afiŝoj",
+      "uploads": "Limoj de kunsendaĵoj",
+      "arbitrary_limits": "Arbitraj limoj"
+    },
+    "nodb": {
+      "documentation": "dokumentaĵo"
+    },
+    "window_title": "Administrado",
+    "wip_notice": "Ĉi tiu administra fasado estas eksperimenta kaj ankoraŭ prilaborata, {adminFeLink}.",
+    "old_ui_link": "malnova administra fasado disponeblas tie ĉi",
+    "temp_overrides": {
+      ":pleroma": {
+        ":instance": {
+          ":public": {
+            "label": "Nodo estas publika"
+          },
+          ":background_image": {
+            "label": "Fonbildo",
+            "description": "Fonbildo (uzota ĉefe de PleromaFE)"
+          },
+          ":description_limit": {
+            "description": "Limo de signoj por priskriboj de kunsendaĵoj",
+            "label": "Limo"
+          }
+        }
+      }
+    },
+    "commit_all": "Konservi ĉion",
+    "captcha": {
+      "kocaptcha": "KoCaptcha"
+    }
   }
 }
diff --git a/src/i18n/fr.json b/src/i18n/fr.json
index f86d18213..7b3d43ca7 100644
--- a/src/i18n/fr.json
+++ b/src/i18n/fr.json
@@ -58,7 +58,7 @@
     "yes": "Oui",
     "no": "Non",
     "unpin": "Dégrafer l'élément",
-    "scroll_to_top": "Défiler au début",
+    "scroll_to_top": "Défiler vers le haut",
     "pin": "Agrafer l'élément",
     "generic_error_message": "Une erreur est apparue : {0}",
     "never_show_again": "Ne plus afficher"
@@ -90,7 +90,11 @@
     "heading": {
       "totp": "Authentification à double-facteur",
       "recovery": "Récupération de l'authentification à double-facteur"
-    }
+    },
+    "logout_confirm_title": "Confirmation de déconnexion",
+    "logout_confirm": "Souhaitez-vous vous déconnecter ?",
+    "logout_confirm_accept_button": "Déconnexion",
+    "logout_confirm_cancel_button": "Ne pas se déconnecter"
   },
   "media_modal": {
     "previous": "Précédent",
@@ -106,16 +110,16 @@
     "mentions": "Mentions",
     "interactions": "Interactions",
     "dms": "Messages directs",
-    "public_tl": "Flux publique",
+    "public_tl": "Flux public",
     "timeline": "Flux personnel",
     "twkn": "Réseau connu",
     "user_search": "Recherche de comptes",
-    "who_to_follow": "Suggestion de suivit",
+    "who_to_follow": "Suggestion de suivi",
     "preferences": "Préférences",
     "search": "Recherche",
     "administration": "Administration",
     "chats": "Chats",
-    "bookmarks": "Marques-Pages",
+    "bookmarks": "Marque-Pages",
     "timelines": "Flux",
     "home_timeline": "Flux personnel",
     "edit_nav_mobile": "Personnaliser la barre de navigation",
@@ -123,8 +127,14 @@
     "lists": "Listes",
     "edit_pinned": "Éditer les éléments agrafés",
     "edit_finish": "Édition terminée",
-    "mobile_sidebar": "(Dés)activer le panneau latéral",
-    "mobile_notifications_close": "Fermer les notifications"
+    "mobile_sidebar": "Basculer la barre latérale",
+    "mobile_notifications_close": "Fermer les notifications",
+    "search_close": "Fermer la barre de recherche",
+    "announcements": "Annonces",
+    "mobile_notifications_mark_as_seen": "Marquer tout comme vu",
+    "quotes": "Citations",
+    "all_bookmarks": "Tous les marque-pages",
+    "bookmark_folders": "Dossiers des marque-pages"
   },
   "notifications": {
     "broken_favorite": "Message inconnu, recherche en cours…",
@@ -140,7 +150,14 @@
     "follow_request": "veut vous suivre",
     "error": "Erreur de chargement des notifications : {0}",
     "poll_ended": "Sondage terminé",
-    "submitted_report": "Rapport envoyé"
+    "submitted_report": "Rapport envoyé",
+    "unread_announcements": "{num} annonce non lue | {num} annonces non lues",
+    "unread_chats": "{num} message non lu | {num} messages non lus",
+    "configuration_tip_settings": "les préférences",
+    "unread_follow_requests": "{num} nouvelle demande de suivi | {num} nouvelles demandes de suivi",
+    "configuration_tip": "Vous pouvez personnaliser ce qui est affiché ici dans {theSettings}. {dismiss}",
+    "configuration_tip_dismiss": "Ne plus montrer",
+    "subscribed_status": "posté"
   },
   "interactions": {
     "favs_repeats": "Partages et favoris",
@@ -148,13 +165,14 @@
     "load_older": "Chargez d'anciennes interactions",
     "moves": "Migrations de comptes",
     "emoji_reactions": "Émoticônes de réaction",
-    "reports": "Rapports"
+    "reports": "Rapports",
+    "statuses": "Abonnements"
   },
   "post_status": {
     "new_status": "Poster un nouveau statut",
     "account_not_locked_warning": "Votre compte n'est pas {0}. N'importe qui peut vous suivre pour voir vos billets en Abonné·e·s uniquement.",
     "account_not_locked_warning_link": "verrouillé",
-    "attachments_sensitive": "Marquer les pièce-jointes comme sensible",
+    "attachments_sensitive": "Marquer les pièces jointes comme sensible",
     "content_type": {
       "text/plain": "Texte brut",
       "text/html": "HTML",
@@ -173,8 +191,8 @@
     },
     "scope": {
       "direct": "Direct - N'envoyer qu'aux personnes mentionnées",
-      "private": "Abonné·e·s uniquement - Seul·e·s vos abonné·e·s verront vos status",
-      "public": "Publique - Afficher dans les flux publics",
+      "private": "Abonné·e·s uniquement - Seul·e·s vos abonné·e·s verront vos statuts",
+      "public": "Public - Afficher dans les flux publics",
       "unlisted": "Non-Listé - Ne pas afficher dans les flux publics"
     },
     "media_description_error": "Échec de téléversement du media, essayez encore",
@@ -183,9 +201,13 @@
     "preview": "Prévisualisation",
     "media_description": "Description de la pièce-jointe",
     "post": "Post",
-    "edit_status": "Éditer le status",
+    "edit_status": "Éditer le statut",
     "edit_remote_warning": "Des instances distantes pourraient ne pas supporter l'édition et seront incapables de recevoir la nouvelle version de votre post.",
-    "edit_unsupported_warning": "Pleroma ne supporte pas l'édition de mentions ni de sondages."
+    "edit_unsupported_warning": "Pleroma ne supporte pas l'édition de mentions ni de sondages.",
+    "reply_option": "Répondre à ce statut",
+    "quote_option": "Citer ce statut",
+    "scope_notice_dismiss": "Fermer ce message",
+    "content_type_selection": "Format du statut"
   },
   "registration": {
     "bio": "Biographie",
@@ -205,14 +227,18 @@
       "email_required": "ne peut pas être laissé vide",
       "password_required": "ne peut pas être laissé vide",
       "password_confirmation_required": "ne peut pas être laissé vide",
-      "password_confirmation_match": "doit être identique au mot de passe"
+      "password_confirmation_match": "doit être identique au mot de passe",
+      "birthday_min_age": "doit être le ou avant le {date}",
+      "birthday_required": "ne peut pas être vide"
     },
     "reason_placeholder": "Cette instance modère les inscriptions manuellement.\nExpliquer ce qui motive votre inscription à l'administration.",
     "reason": "Motivation d'inscription",
     "register": "Enregistrer",
     "email_language": "Dans quelle langue voulez-vous recevoir les emails du server ?",
     "bio_optional": "Biographie (optionnelle)",
-    "email_optional": "Courriel (optionnel)"
+    "email_optional": "Courriel (optionnel)",
+    "birthday": "Anniversaire :",
+    "birthday_optional": "Anniversaire (optionnel) :"
   },
   "selectable_list": {
     "select_all": "Tout selectionner"
@@ -323,8 +349,8 @@
     "notification_visibility_mentions": "Mentionnés",
     "notification_visibility_repeats": "Partages",
     "no_rich_text_description": "Ne formatez pas le texte",
-    "no_blocks": "Aucun bloqués",
-    "no_mutes": "Aucun masqués",
+    "no_blocks": "Aucun bloqué",
+    "no_mutes": "Aucun masqué",
     "hide_follows_description": "Ne pas afficher à qui je suis abonné",
     "hide_followers_description": "Ne pas afficher qui est abonné à moi",
     "show_admin_badge": "Afficher le badge d'Admin sur mon profil",
@@ -379,7 +405,7 @@
       "true": "oui"
     },
     "notifications": "Notifications",
-    "notification_mutes": "Pour stopper la récéption de notifications d'un utilisateur particulier, utilisez un masquage.",
+    "notification_mutes": "Pour stopper la réception de notifications d’un utilisateur particulier, utilisez la fonction « masquer ».",
     "notification_blocks": "Bloquer un utilisateur stoppe toute notification et se désabonne de lui.",
     "enable_web_push_notifications": "Activer les notifications de push web",
     "style": {
@@ -483,7 +509,8 @@
           "drop_shadow_syntax": "{0} ne supporte pas le paramètre {1} et mot-clé {2}.",
           "avatar_inset": "Veuillez noter que combiner à la fois les ombres internes et non-internes sur les avatars peut fournir des résultats inattendus avec la transparence des avatars.",
           "spread_zero": "Les ombres avec une dispersion > 0 apparaitrons comme si ils étaient à zéro",
-          "inset_classic": "L'ombre interne utilisera toujours {0}"
+          "inset_classic": "L'ombre interne utilisera toujours {0}",
+          "avatar_inset_short": "Séparer l'ombre incrustée"
         },
         "components": {
           "panel": "Panneau",
@@ -498,7 +525,10 @@
           "buttonPressedHover": "Bouton (cliqué+survol)",
           "input": "Champ de saisie"
         },
-        "hintV3": "Pour les ombres vous pouvez aussi utiliser la notation {0} pour utiliser un autre emplacement de couleur."
+        "hintV3": "Pour les ombres vous pouvez aussi utiliser la notation {0} pour utiliser un autre emplacement de couleur.",
+        "name": "Nom",
+        "offset": "Décalage d'ombre",
+        "light_grid": "Utiliser un damier clair"
       },
       "fonts": {
         "_tab_label": "Polices",
@@ -507,7 +537,8 @@
           "interface": "Interface",
           "input": "Champs de saisie",
           "post": "Post text",
-          "postCode": "Texte à taille fixe dans un article (texte enrichi)"
+          "postCode": "Texte à taille fixe dans un article (texte enrichi)",
+          "monospace": "Texte à espacement fixe"
         },
         "family": "Nom de la police",
         "size": "Taille (en px)",
@@ -527,7 +558,43 @@
         "header_faint": "Tout va bien",
         "checkbox": "J'ai survolé les conditions d'utilisation",
         "link": "un petit lien sympa"
-      }
+      },
+      "themes2_outdated": "L'éditeur pour les thèmes V2 est en train d'être supprimé et sera remplacé par un nouvel éditeur qui tirera parti du nouveau moteur pour les thèmes V3. Il devrait toujours fonctionner, mais l'expérience pourrait être dégradée et incohérente.",
+      "appearance_tab_note": "Dans cet onglet, les changements n'affectent pas le thème utilisé, donc le thème exporté sera différent de ce que vous voyez à l'écran",
+      "themes3": {
+        "define": "Écraser",
+        "hacks": {
+          "underlay_override_mode_none": "Valeurs par défaut du thème",
+          "underlay_overrides": "Changer le fond",
+          "underlay_override_mode_opaque": "Remplacer par une couleur uniforme",
+          "force_interface_roundness": "Écraser les arrondis de l'interface",
+          "underlay_override_mode_transparent": "Retirer complètement (peut casser certains thèmes)",
+          "forced_roundness_mode_disabled": "Utiliser les valeurs par défaut du thème",
+          "forced_roundness_mode_sharp": "Forcer les bords carrés",
+          "forced_roundness_mode_round": "Forcer les bords ronds",
+          "forced_roundness_mode_nonsharp": "Forcer les bords \"pas-vraiment-carrés\" (1 px d'arrondi)"
+        },
+        "font": {
+          "builtin": {
+            "serif": "Serif",
+            "sans-serif": "Sans-serif",
+            "monospace": "Monospace",
+            "inherit": "Inchangé"
+          },
+          "group-builtin": "Polices par défaut du navigateur",
+          "local-unavailable2": "Entrer manuellement une police spécifique",
+          "lookup_local_fonts": "Charger la liste des polices installées sur cet ordinateur",
+          "enter_manually": "Entrer le nom d'une famille de police manuellement",
+          "entry": "Entrer {fontFamily}",
+          "select": "Choisir une police",
+          "local-unavailable1": "Listes des polices indisponibles installées localement",
+          "font_list_unavailable": "Impossible de trouver la police locale : {error}",
+          "group-local": "Polices installées localement"
+        }
+      },
+      "interface_font_user_override": "Écraser le thème ou les polices utilisées",
+      "custom_theme_used": "(Thème personnalisé)",
+      "update_preview": "Mise à jour de l'aperçu"
     },
     "version": {
       "title": "Version",
@@ -554,7 +621,7 @@
     "useStreamingApi": "Recevoir les messages et notifications en temps réel",
     "notification_setting_filters": "Filtres",
     "notification_setting_privacy_option": "Masquer l'expéditeur et le contenu des notifications push",
-    "notification_setting_privacy": "Intimité",
+    "notification_setting_privacy": "Vie privée",
     "hide_followers_count_description": "Masquer le nombre d'abonnés",
     "accent": "Accent",
     "chatMessageRadius": "Message de chat",
@@ -565,7 +632,7 @@
     "mute_import": "Import des masquages",
     "mute_export_button": "Exporter vos masquages dans un fichier CSV",
     "mute_export": "Export des masquages",
-    "notification_setting_hide_notification_contents": "Cacher l'expéditeur et le contenu des notifications push",
+    "notification_setting_hide_notification_contents": "Masquer l’expéditeur et le contenu des notifications « push »",
     "notification_setting_block_from_strangers": "Bloquer les notifications des utilisateur⋅ice⋅s que vous ne suivez pas",
     "virtual_scrolling": "Optimiser le rendu des flux",
     "reset_background_confirm": "Voulez-vraiment réinitialiser l'arrière-plan ?",
@@ -632,7 +699,7 @@
     "hide_bot_indication": "Cacher l'indication d'un robot avec les messages",
     "always_show_post_button": "Toujours montrer le bouton flottant Nouveau Message",
     "hide_muted_threads": "Cacher les fils masqués",
-    "account_privacy": "Intimité",
+    "account_privacy": "Confidentialité",
     "posts": "Messages",
     "disable_sticky_headers": "Ne pas coller les en-têtes des colonnes en haut de l'écran",
     "show_scrollbars": "Montrer les ascenseurs des colonnes",
@@ -652,7 +719,7 @@
     "mention_link_fade_domain": "Estomper les domaines (ex. {'@'}example.org en {'@'}foo{'@'}example.org)",
     "mention_link_bolden_you": "Surligner les mentions qui vous sont destinées",
     "show_yous": "Afficher (Vous)",
-    "setting_server_side": "Cette préférence est liée au profile et affecte toutes les sessions et clients",
+    "setting_server_side": "Cette préférence est liée au profil et affecte toutes les sessions et clients",
     "account_backup": "Sauvegarde de compte",
     "account_backup_description": "Ceci permet de télécharger une archive des informations du compte et vos messages, mais ils ne peuvent pas actuellement être importé dans un compte Pleroma.",
     "add_backup_error": "Erreur à l'ajout d'une nouvelle sauvegarde : {error}",
@@ -677,20 +744,105 @@
     "mention_link_show_avatar_quick": "Afficher l'avatar de l'utilisateur à côté des mentions",
     "navbar_column_stretch": "Élargir la barre de navigation à la taille des colonnes",
     "column_sizes": "Taille des colonnes",
-    "column_sizes_sidebar": "Panneau latéral",
+    "column_sizes_sidebar": "Barre latérale",
     "column_sizes_content": "Contenu",
     "column_sizes_notifs": "Notifications",
     "conversation_display_linear_quick": "Vue linéaire",
     "use_websockets": "Utiliser les websockets (mises à jour en temps réel)",
     "user_popover_avatar_action_zoom": "Zoomer sur l'avatar",
     "user_popover_avatar_action_open": "Ouvrir le profil",
-    "conversation_display_tree_quick": "Vue arborescente"
+    "conversation_display_tree_quick": "Vue arborescente",
+    "emoji_reactions_scale": "Taille des réactions",
+    "backup_running": "Cette sauvegarde est en cours, {number} enregistrement effectué. | Cette sauvegarde est en cours, {number} enregistrements effectués.",
+    "backup_failed": "Cette sauvegarde a échoué.",
+    "autocomplete_select_first": "Sélectionner automatiquement la première occurrence lorsque les résultats de l'autocomplétion sont disponibles",
+    "confirm_dialogs_unfollow": "arrête de suivre un utilisateur",
+    "confirm_dialogs_repeat": "reposte un statut",
+    "actor_type": "Ce compte est :",
+    "actor_type_Person": "un utilisateur normal",
+    "actor_type_Service": "un robot",
+    "actor_type_Group": "un groupe",
+    "confirm_dialogs_logout": "à la déconnexion",
+    "confirm_dialogs_approve_follow": "accepte un nouvel abonné",
+    "confirm_dialogs_deny_follow": "refuse un nouvel abonné",
+    "confirm_dialogs_remove_follower": "supprime un abonné",
+    "actor_type_description": "En marquant votre compte comme un groupe, vous répétez automatiquement les statuts qui le mentionnent.",
+    "add_language": "Ajouter une langue de remplacement",
+    "remove_language": "Supprimer",
+    "primary_language": "Langue principale :",
+    "fallback_language": "Langue de remplacement {index} :",
+    "confirm_dialogs": "Demande de confirmation quand",
+    "confirm_dialogs_block": "bloque un utilisateur",
+    "confirm_dialogs_mute": "mute un utilisateur",
+    "confirm_dialogs_delete": "supprime un statut",
+    "url": "URL",
+    "preview": "Aperçu",
+    "reset_value": "Réinitialiser",
+    "hard_reset_value_tooltip": "Supprime le réglage du stockage, force l'utilisation de la valeur par défaut",
+    "reset_value_tooltip": "Réinitialiser le brouillon",
+    "hard_reset_value": "Remise à zéro",
+    "hide_actor_type_indication": "Cacher le type (robots, groupes, etc.) dans les statuts",
+    "notification_extra_follow_requests": "Afficher les nouvelles demandes de suivi",
+    "user_popover_avatar_action": "Action lors du clic sur la fenêtre Avatar",
+    "user_popover_avatar_action_close": "Fermer la fenêtre contextuelle",
+    "notification_setting_ignore_inactionable_seen": "Ignorer les statuts de lecture des notifications non actionnables (favoris, répétitions, etc)",
+    "notification_setting_ignore_inactionable_seen_tip": "Ceci ne marquera pas ces notifications comme lues, et vous recevrez encore les notifications de bureau si vous le décidez",
+    "notification_setting_unseen_at_top": "Afficher les notifications non lues au-dessus des autres",
+    "notification_setting_filters_chrome_push": "Sur certains navigateurs (chrome), il peut être impossible de filtrer complètement les notifications par type lorsqu'elles arrivent",
+    "enable_web_push_always_show": "Toujours afficher les notifications web",
+    "commit_value": "Sauvegarder",
+    "hide_scrobbles": "Masquer les scrobbles",
+    "notification_setting_annoyance": "Agacement",
+    "notification_setting_drawer_marks_as_seen": "Fermer le tiroir marque toutes les notifications comme lues (mobile)",
+    "commit_value_tooltip": "Les valeurs ne sont pas sauvegardées, appuyez sur ce bouton pour soumettre vos changements",
+    "birthday": {
+      "show_birthday": "Afficher mon anniversaire",
+      "label": "Anniversaire"
+    },
+    "notification_visibility_native_notifications": "Afficher une notification native",
+    "notification_visibility_follow_requests": "Demandes de suivi",
+    "notification_visibility_reports": "Rapports",
+    "notification_extra_chats": "Afficher les discussions non lues",
+    "notification_extra_announcements": "Afficher les annonces non lues",
+    "notification_extra_tip": "Afficher les astuces de personnalisation pour les notifications extras",
+    "enable_web_push_always_show_tip": "Certains navigateurs (Chromium, Chrome) exigent que les messages push donnent toujours lieu à une notification, sinon le message générique « Le site web a été mis à jour en arrière-plan » s’affiche : activez cette option pour empêcher l’affichage de cette notification, car Chrome semble masquer les notifications push si l’onglet est au centre de l’attention. Ceci peut entraîner l’affichage de notifications en double sur d’autres navigateurs.",
+    "user_popover_avatar_overlay": "Afficher la fiche de l’utilisateur au survol de l’avatar",
+    "notification_visibility_in_column": "Afficher la colonne / le tiroir de notifications",
+    "notification_show_extra": "Afficher les extras dans la colonne de notifications",
+    "units": {
+      "time": {
+        "m": "minutes",
+        "s": "secondes",
+        "h": "heures",
+        "d": "jours"
+      }
+    },
+    "force_theme_recompilation_debug": "Désactiver le cache du thème, forcer la recompilation à chaque démarrage (DEBUG)",
+    "absolute_time_format": "Utiliser le format UTC",
+    "absolute_time_format_min_age": "À n'utiliser que pour les périodes plus anciennes que cette durée",
+    "notification_visibility_statuses": "Abonnements",
+    "mute_sensitive_posts": "Masquer les postes sensibles",
+    "appearance": "Apparence",
+    "confirm_new_setting": "Confirmer le nouveau réglage ?",
+    "confirm_new_question": "Est-ce que tout est ok ? Le réglage sera rétabli dans dix secondes.",
+    "revert": "Rétablir",
+    "confirm": "Confirmer",
+    "text_size": "Taille du texte et de l'interface",
+    "text_size_tip": "Utiliser {0} pour des valeurs absolues, {1} mettra l'échelle du texte à la valeur par défaut du navigateur.",
+    "text_size_tip2": "Les valeurs différentes de {0} pourraient casser les thèmes ou d'autres trucs",
+    "emoji_size": "Taille des émojis",
+    "navbar_size": "Taille de la barre supérieure",
+    "panel_header_size": "Taille du panneau d'en-tête",
+    "visual_tweaks": "Ajustements visuels mineurs",
+    "theme_debug": "Montrer ce que le moteur de thème de l'arrière-plan bricole lorsqu'il travaille avec la transparence (DEBUG)",
+    "scale_and_layout": "Taille et disposition de l'interface",
+    "hide_scrobbles_after": "Masquer les scrobbles plus vieux que"
   },
   "timeline": {
     "collapse": "Fermer",
     "conversation": "Conversation",
     "error_fetching": "Erreur en cherchant les mises à jour",
-    "load_older": "Afficher des status plus ancien",
+    "load_older": "Afficher des statuts plus anciens",
     "no_retweet_hint": "Le message est marqué en abonnés-seulement ou direct et ne peut pas être partagé",
     "repeated": "a partagé",
     "show_new": "Afficher plus",
@@ -716,8 +868,8 @@
     "replies_list": "Réponses :",
     "mute_conversation": "Masquer la conversation",
     "unmute_conversation": "Démasquer la conversation",
-    "status_unavailable": "Status indisponible",
-    "copy_link": "Copier le lien au status",
+    "status_unavailable": "Statut indisponible",
+    "copy_link": "Copier le lien au statut",
     "expand": "Développer",
     "nsfw": "Contenu sensible",
     "status_deleted": "Ce post a été effacé",
@@ -755,10 +907,28 @@
     "move_up": "Décaler la pièce-jointe à gauche",
     "open_gallery": "Ouvrir la galerie",
     "thread_show_full": "Montrer tout le fil ({numStatus} message, {depth} niveaux maximum) | Montrer tout le fil ({numStatus} messages, {depth} niveaux maximum)",
-    "show_all_conversation": "Montrer tout le fil ({numStatus} autre message) | Montrer tout le fil ({numStatus} autre messages)",
-    "edit": "Éditer le status",
+    "show_all_conversation": "Montrer tout le fil ({numStatus} autre message) | Montrer tout le fil ({numStatus} autres messages)",
+    "edit": "Éditer le statuts",
     "edited_at": "(dernière édition {time})",
-    "status_history": "Historique du status"
+    "status_history": "Historique du statut",
+    "delete_error": "Erreur de suppression du statut : {0}",
+    "repeat_confirm": "Voulez-vous réellement reposter ce statut ?",
+    "reaction_count_label": "{num} personne a réagi | {num} personnes ont réagi",
+    "repeat_confirm_cancel_button": "Ne pas reposter",
+    "hide_quote": "Masquer les statuts cités",
+    "display_quote": "Afficher les statuts cités",
+    "invisible_quote": "Citation de statut non disponible : {link}",
+    "delete_confirm_title": "Confirmer la suppression",
+    "more_actions": "Plus d'action sur ce statut",
+    "delete_confirm_cancel_button": "Conserver",
+    "repeat_confirm_title": "Confirmer reposte",
+    "repeat_confirm_accept_button": "Reposter",
+    "delete_confirm_accept_button": "Supprimer",
+    "sensitive_muted": "Silencer le contenu sensible",
+    "quotes": "Citations",
+    "load_error": "Impossible de charger la publication : {error}",
+    "loading": "En cours de chargement…",
+    "bot_muted": "Silencer le contenu de robots"
   },
   "user_card": {
     "approve": "Accepter",
@@ -828,7 +998,39 @@
     "edit_profile": "Éditer le profil",
     "deactivated": "Désactivé",
     "follow_cancel": "Annuler la requête",
-    "remove_follower": "Retirer l'abonné·e"
+    "remove_follower": "Retirer l'abonné·e",
+    "remove_follower_confirm_accept_button": "Supprimer",
+    "approve_confirm_cancel_button": "Ne pas approuver",
+    "block_confirm_accept_button": "Bloquer",
+    "mute_confirm_title": "Confirmation de mise en sourdine",
+    "block_confirm_cancel_button": "Ne pas bloquer",
+    "unfollow_confirm": "Voulez-vous vraiment arrêter de suivre {user} ?",
+    "unfollow_confirm_accept_button": "Ne plus suivre",
+    "birthday": "Né(e) le {birthday}",
+    "edit_note": "Modifier la note",
+    "edit_note_apply": "Appliquer",
+    "edit_note_cancel": "Annuler",
+    "note": "Note",
+    "group": "Groupe",
+    "unfollow_confirm_title": "Confirmer l'arrêt de suivi",
+    "block_confirm_title": "Confirmer le blocage",
+    "deny_confirm_accept_button": "Refuser",
+    "deny_confirm_cancel_button": "Ne pas refuser",
+    "deny_confirm": "Voulez-vous refuser la demande de suivi de {user} ?",
+    "deny_confirm_title": "Refuser la confirmation",
+    "remove_follower_confirm_cancel_button": "Conserver",
+    "mute_duration_prompt": "Mettre cet utilisateur en sourdine pour (0 pour une durée indéterminée) :",
+    "remove_follower_confirm_title": "Confirmation de suppression d'utilisateur",
+    "note_blank": "(vide)",
+    "mute_confirm": "Voulez-vous vraiment mettre {user} en sourdine ?",
+    "mute_confirm_accept_button": "Mettre en sourdine",
+    "mute_confirm_cancel_button": "Ne pas mettre en sourdine",
+    "remove_follower_confirm": "Voulez-vous vraiment supprimer {user} de vos abonnés ?",
+    "approve_confirm_accept_button": "Approuver",
+    "approve_confirm": "Voulez-vous approuver la demande de suivi de {user} ?",
+    "block_confirm": "Voulez-vous vraiment bloquer {user} ?",
+    "approve_confirm_title": "Approuver confirmation",
+    "unfollow_confirm_cancel_button": "Ne pas arrêter le suivi"
   },
   "user_profile": {
     "timeline_title": "Flux du compte",
@@ -857,7 +1059,10 @@
     "add_reaction": "Ajouter une réaction",
     "accept_follow_request": "Accepter la demande de suivit",
     "reject_follow_request": "Rejeter la demande de suivit",
-    "bookmark": "Favori"
+    "bookmark": "Favori",
+    "autocomplete_available": "{number} résultat est disponible. Utilisez les touches haut et bas pour naviguer à l'intérieur. | {number} résultats sont disponibles. Utilisez les touches haut et bas pour naviguer à l'intérieur.",
+    "toggle_expand": "Étendre ou réduire la notification pour montrer les messages en entier",
+    "toggle_mute": "Étendre ou réduire les notifications pour révéler le contenu masqué"
   },
   "upload": {
     "error": {
@@ -886,11 +1091,11 @@
       "simple": {
         "simple_policies": "Politiques par instances",
         "accept": "Acceptées",
-        "accept_desc": "Cette instance accepte les messages seulement depuis ces instances :",
+        "accept_desc": "Cette instance accepte les messages seulement depuis les instances suivantes :",
         "reject": "Rejetées",
         "reject_desc": "Cette instance n'acceptera pas de message de ces instances :",
         "quarantine": "Quarantaine",
-        "quarantine_desc": "Cette instance enverra seulement des messages publics à ces instances :",
+        "quarantine_desc": "Cette instance enverra uniquement des messages publics aux instances suivantes :",
         "ftl_removal_desc": "Cette instance supprime les instance suivantes du flux fédéré :",
         "media_removal": "Suppression des pièce-jointes",
         "media_removal_desc": "Cette instance supprime le contenu multimédia des instances suivantes :",
@@ -927,7 +1132,9 @@
     "vote": "Voter",
     "expired": "Sondage terminé il y a {0}",
     "people_voted_count": "{count} voteur | {count} voteurs",
-    "votes_count": "{count} vote | {count} votes"
+    "votes_count": "{count} vote | {count} votes",
+    "non_anonymous": "Sondage public",
+    "non_anonymous_title": "Certaines instances pourraient afficher ce pour quoi vous avez voté"
   },
   "emoji": {
     "emoji": "Émoji",
@@ -937,7 +1144,7 @@
     "unicode": "émoji unicode",
     "load_all": "Charger tout les {emojiAmount} émojis",
     "load_all_hint": "{saneAmount} émojis chargé, charger tout les émojis peuvent causer des problèmes de performances.",
-    "stickers": "Stickers",
+    "stickers": "Autocollants",
     "keep_open": "Garder ouvert",
     "unicode_groups": {
       "activities": "Activités",
@@ -945,12 +1152,14 @@
       "flags": "Drapeaux",
       "food-and-drink": "Nourriture & boissons",
       "objects": "Objets",
-      "people-and-body": "Personnes & Corps",
+      "people-and-body": "Humain·e·s & Corps",
       "smileys-and-emotion": "Emoticônes",
       "symbols": "Symboles",
       "travel-and-places": "Voyages & lieux"
     },
-    "regional_indicator": "Indicateur régional {letter}"
+    "regional_indicator": "Indicateur régional {letter}",
+    "unpacked": "Émojis non catégorisés",
+    "hide_custom_emoji": "Masquer les émojis personnalisés"
   },
   "remote_user_resolver": {
     "error": "Non trouvé.",
@@ -1012,7 +1221,7 @@
     "person_talking": "{count} personnes discutant",
     "hashtags": "Mot-dièses",
     "people_talking": "{count} personnes discutant",
-    "no_results": "Aucun résultats",
+    "no_results": "Aucun résultat",
     "no_more_results": "Pas de résultats supplémentaires",
     "load_more": "Charger plus de résultats"
   },
@@ -1047,7 +1256,7 @@
     "empty_chat_list_placeholder": "Vous n'avez pas encore de discussions. Démarrez-en une nouvelle !",
     "error_sending_message": "Quelque chose s'est mal passé pendant l'envoi du message.",
     "error_loading_chat": "Quelque chose s'est mal passé au chargement de la discussion.",
-    "delete_confirm": "Voulez-vous vraiment effacer ce message ?",
+    "delete_confirm": "Souhaitez-vous vraiment effacer ce message ?",
     "more": "Plus",
     "empty_message_error": "Impossible d'envoyer un message vide",
     "new": "Nouvelle discussion",
@@ -1083,7 +1292,8 @@
     "update_changelog_here": "Liste compète des changements",
     "art_by": "Œuvre par {linkToArtist}",
     "big_update_content": "Nous n'avons pas fait de nouvelle version depuis un moment, les choses peuvent vous paraitre différentes de vos habitudes.",
-    "update_bugs": "Veuillez rapporter les problèmes sur {pleromaGitlab}, comme beaucoup de changements on été fait, même si nous testons entièrement et utilisons la version de dévelopement nous-même, nous avons pu en louper. Les retours et suggestions sont bienvenues sur ce que vous avez pu rencontrer, ou sur comment améliorer Pleroma (BE) et Pleroma-FE."
+    "update_bugs": "Veuillez rapporter les problèmes sur {pleromaGitlab}, comme beaucoup de changements on été fait, même si nous testons entièrement et utilisons la version de dévelopement nous-même, nous avons pu en louper. Les retours et suggestions sont bienvenues sur ce que vous avez pu rencontrer, ou sur comment améliorer Pleroma (BE) et Pleroma-FE.",
+    "big_update_title": "Soyez patients avec nous"
   },
   "unicode_domain_indicator": {
     "tooltip": "Ce domaine contient des caractères non ascii."
@@ -1091,11 +1301,190 @@
   "report": {
     "reporter": "Rapporteur·euse :",
     "reported_user": "Compte rapporté :",
-    "reported_statuses": "Status rapportés :",
-    "notes": "Notes :",
-    "state": "Status :",
+    "reported_statuses": "Statuts rapportés :",
+    "notes": "Notes :",
+    "state": "Statut :",
     "state_open": "Ouvert",
     "state_closed": "Fermé",
     "state_resolved": "Résolut"
+  },
+  "announcements": {
+    "page_header": "Annonces",
+    "title": "Annonce",
+    "mark_as_read_action": "Marquer comme lu",
+    "post_form_header": "Envoyer l'annonce",
+    "post_placeholder": "Rédiger ici le contenu de l'annonce...",
+    "post_action": "Publier",
+    "post_error": "Erreur : {error}",
+    "close_error": "Fermer",
+    "delete_action": "Supprimer",
+    "start_time_prompt": "Heure de début : ",
+    "end_time_prompt": "Heure de fin : ",
+    "all_day_prompt": "L'événement dure toute la journée",
+    "inactive_message": "Cette annonce n'est pas active",
+    "published_time_display": "Publié le {time}",
+    "start_time_display": "Démarre à {time}",
+    "end_time_display": "Se termine à {time}",
+    "edit_action": "Modifier",
+    "submit_edit_action": "Envoyer",
+    "cancel_edit_action": "Annuler"
+  },
+  "admin_dash": {
+    "frontend": {
+      "success_installing_frontend": "Installation réussie de l'interface {version}",
+      "failure_installing_frontend": "Échec de l'installation de l'interface {version} : {reason}",
+      "default_frontend_unavail": "Les paramètres de l'interface ne sont pas disponibles, ils doivent être configurés dans la base de données",
+      "build_url": "URL de référence",
+      "reinstall": "Réinstaller",
+      "repository": "Lien du dépôt",
+      "versions": "Versions disponibles",
+      "default_frontend_tip": "L'interface par défaut sera affichée à tous les utilisateurs. Si vous décidez de quitter PleromaFE, vous devrez utiliser l'ancienne AdminFE buguée pour configurer votre instance jusqu'à ce que nous la remplacions.",
+      "is_default": "(Défaut)",
+      "is_default_custom": "(Défaut, version : {version})",
+      "install": "Installation",
+      "install_version": "Installation de la version {version}",
+      "more_install_options": "Plus d'options d'installation",
+      "more_default_options": "Plus d'options de paramétrages par défaut",
+      "set_default": "Définir la valeur par défaut",
+      "set_default_version": "Définir la version {version} comme version par défaut",
+      "wip_notice": "Veuillez noter que cette section est en cours de développement et que certaines fonctionnalités de l'interface ne sont pas implémentées côté serveur.",
+      "default_frontend": "Interface par défaut",
+      "available_frontends": "Disponible pour installation"
+    },
+    "temp_overrides": {
+      ":pleroma": {
+        ":instance": {
+          ":public": {
+            "label": "Cette instance est publique",
+            "description": "En désactivant cette option, toutes les API ne seront accessibles qu'aux utilisateurs connectés, ce qui rendra les chronologies publiques et fédérées inaccessibles aux visiteurs anonymes."
+          },
+          ":limit_to_local_content": {
+            "label": "Limitez la recherche au contenu local",
+            "description": "Désactive la recherche globale sur le réseau pour les utilisateurs non authentifiés (par défaut), tous les utilisateurs ou aucun"
+          },
+          ":description_limit": {
+            "label": "Limite",
+            "description": "Limite de nombre de caractères pour la description des fichiers joints"
+          },
+          ":background_image": {
+            "description": "Image de fond (principalement utilisé par PleromaFE)",
+            "label": "Image de fond d'écran"
+          }
+        }
+      }
+    },
+    "tabs": {
+      "emoji": "Émoji",
+      "limits": "Limites",
+      "frontends": "Interfaces",
+      "instance": "Instance",
+      "nodb": "Pas de configuration de base de données"
+    },
+    "instance": {
+      "kocaptcha": "Réglages KoCaptcha",
+      "access": "Accès à l'instance",
+      "restrict": {
+        "header": "Restreindre l'accès aux visiteurs anonymes",
+        "profiles": "Accès aux profils d'utilisateur",
+        "activities": "Accès aux statuts/activités",
+        "description": "Paramètre détaillé permettant d'autoriser/interdire l'accès à certains aspects de l'API. Par défaut (état indéterminé), l'accès est interdit si l'instance n'est pas publique ; si la case est cochée, l'accès est interdit même si l'instance est publique ; si la case n'est pas cochée, l'accès est autorisé même si l'instance est privée. Veuillez noter qu'un comportement inattendu peut se produire si certains paramètres sont définis, par exemple si l'accès au profil est désactivé, les messages s'afficheront sans les informations relatives au profil.",
+        "timelines": "Accès aux flux"
+      },
+      "registrations": "Inscription des utilisateurs",
+      "captcha_header": "CAPTCHA",
+      "instance": "Informations sur l'instance"
+    },
+    "emoji": {
+      "global_actions": "Actions globales",
+      "reload": "Recharger les émojis",
+      "importFS": "Importer les émojis depuis le système de fichiers",
+      "error": "Erreur : {0}",
+      "create_pack": "Créer un pack",
+      "delete_pack": "Supprimer un paquet",
+      "new_pack_name": "Renommer le pack",
+      "create": "Créer",
+      "emoji_packs": "Pack d'émojis",
+      "remote_packs": "Packs d'autres instances",
+      "do_list": "Liste",
+      "remote_pack_instance": "Instance du pack",
+      "emoji_pack": "Pack d'émoji",
+      "edit_pack": "Modifier le pack",
+      "description": "Description",
+      "homepage": "Page d'accueil",
+      "fallback_src": "Source de remplacement",
+      "fallback_sha256": "Remplacement SHA256",
+      "share": "Partager",
+      "save": "Sauvegarder",
+      "save_meta": "Sauvegarder les métadonnées",
+      "revert_meta": "Annuler métadonnées",
+      "delete": "Supprimer",
+      "revert": "Revenir en arrière",
+      "add_file": "Ajouter un fichier",
+      "adding_new": "Ajouter un nouvel émoji",
+      "shortcode": "Code court",
+      "filename": "Nom du fichier",
+      "new_filename": "Nom de fichier, laisser blanc pour inférer",
+      "delete_confirm": "Êtes-vous sûr de vouloir supprimer {0} ?",
+      "download_pack": "Télécharger pack",
+      "downloading_pack": "Télécharge {0}",
+      "download": "Téléchargement",
+      "download_as_name": "Nouveau nom",
+      "download_as_name_full": "Nouveau nom, laissez blanc pour réutiliser le précédent",
+      "files": "Fichiers",
+      "editing": "Édition de {0}",
+      "delete_title": "Supprimer ?",
+      "metadata_changed": "Métadonnées différentes de celles sauvegardées",
+      "emoji_changed": "Modifications du fichier émoji non sauvegardées, vérifier l'émoji surligné",
+      "replace_warning": "Vous allez REMPLACER le pack local qui porte ce nom",
+      "new_shortcode": "Shortcode, laissez vide pour déduire"
+    },
+    "window_title": "Administration",
+    "nodb": {
+      "heading": "La configuration de base de données est désactivée",
+      "documentation": "documentation",
+      "text2": "La majorité des options de configuration ne seront pas disponibles.",
+      "text": "Vous devez modifier les fichiers de configuration du serveur pour que {property} soit définie à {value}, plus de détails dans la {documentation}."
+    },
+    "limits": {
+      "arbitrary_limits": "Limites arbitraires",
+      "posts": "Limites des statuts",
+      "uploads": "Limites des pièces jointes",
+      "users": "Limites du profil d'utilisateur",
+      "profile_fields": "Limites des champs du profile",
+      "user_uploads": "Limites des médias du profil"
+    },
+    "captcha": {
+      "native": "Natif",
+      "kocaptcha": "KoCaptcha"
+    },
+    "wip_notice": "Ce tableau de bord d'administration est expérimental et en cours de développement, {adminFeLink}.",
+    "old_ui_link": "L'ancien espace d'administration est disponible ici",
+    "reset_all": "Tout réinitialiser",
+    "commit_all": "Tout sauvegarder"
+  },
+  "splash": {
+    "settings": "Application des paramètres…",
+    "almost": "Réticulation des splines…",
+    "fun_2": "Allez-y doucement !",
+    "fun_3": "Suya…",
+    "fun_4": "Ma machine Pleroma est à pleine puissance !",
+    "loading": "En cours de chargement…",
+    "theme": "Application du thème, veuillez patienter chaleureusement…",
+    "instance": "Récupération des infos de l'instance…",
+    "fun_1": "Buvez plus d'eau",
+    "error": "Quelque chose s'est mal passé"
+  },
+  "bookmark_folders": {
+    "select_folder": "Sélectionnez le dossier des favoris",
+    "create": "Créer le dossier",
+    "emoji": "Emoji",
+    "name": "Nom du dossier",
+    "new": "Nouveau dossier",
+    "delete": "Supprimer le dossier",
+    "update_folder": "Enregistrer les changements",
+    "really_delete": "Voulez-vous vraiment supprimer le dossier ?",
+    "error": "Erreur lors de la manipulation des dossiers de favoris : {0}",
+    "creating_folder": "Création du dossier des favoris",
+    "editing_folder": "Édition du dossier {folderName}"
   }
 }
diff --git a/src/i18n/id.json b/src/i18n/id.json
index 73cc2a710..1b5fee5a0 100644
--- a/src/i18n/id.json
+++ b/src/i18n/id.json
@@ -214,7 +214,8 @@
     "domain_mutes": "Domain",
     "composing": "Menulis",
     "no_blocks": "Tidak ada yang diblokir",
-    "no_mutes": "Tidak ada yang dibisukan"
+    "no_mutes": "Tidak ada yang dibisukan",
+    "remove_language": "Hapus"
   },
   "about": {
     "mrf": {
@@ -230,7 +231,9 @@
         "accept_desc": "Instansi ini hanya menerima pesan dari instansi-instansi berikut:",
         "accept": "Terima",
         "media_removal": "Penghapusan Media",
-        "media_removal_desc": "Instansi ini menghapus media dari postingan yang berasal dari instansi-instansi berikut:"
+        "media_removal_desc": "Instansi ini menghapus media dari postingan yang berasal dari instansi-instansi berikut:",
+        "instance": "Instance",
+        "reason": "Alasan"
       },
       "federation": "Federasi",
       "mrf_policies": "Kebijakan MRF yang diaktifkan"
@@ -437,7 +440,10 @@
       "password_required": "tidak boleh kosong",
       "email_required": "tidak boleh kosong",
       "fullname_required": "tidak boleh kosong",
-      "username_required": "tidak boleh kosong"
+      "username_required": "tidak boleh kosong",
+      "password_confirmation_match": "wajib sama dengan sandi",
+      "birthday_required": "tidak boleh kosong",
+      "birthday_min_age": "wajib sama dengan atau sebelum {date}"
     },
     "register": "Daftar",
     "fullname_placeholder": "contoh. Lain Iwakura",
@@ -450,7 +456,12 @@
     "bio": "Bio",
     "reason_placeholder": "Instansi ini menerima pendaftaran secara manual.\nBeritahu administrasinya mengapa Anda ingin mendaftar.",
     "reason": "Alasan mendaftar",
-    "registration": "Pendaftaran"
+    "registration": "Pendaftaran",
+    "email_language": "Dalam bahasa apa kamu ingin menerima surel dari server ini?",
+    "email_optional": "Surel (opsional)",
+    "birthday": "Ulang tahun:",
+    "birthday_optional": "Ulang tahun (opsional):",
+    "bio_optional": "Bio (opsional)"
   },
   "post_status": {
     "preview_empty": "Kosong",
@@ -482,7 +493,8 @@
     "empty_status_error": "Tidak dapat memposting status kosong tanpa berkas",
     "account_not_locked_warning_link": "terkunci",
     "account_not_locked_warning": "Akun Anda tidak {0}. Siapapun dapat mengikuti Anda untuk melihat postingan hanya-pengikut Anda.",
-    "new_status": "Posting status baru"
+    "new_status": "Posting status baru",
+    "edit_status": "Sunting status"
   },
   "general": {
     "apply": "Terapkan",
@@ -508,7 +520,15 @@
     "generic_error": "Terjadi kesalahan",
     "loading": "Memuat…",
     "more": "Lebih banyak",
-    "submit": "Kirim"
+    "submit": "Kirim",
+    "yes": "Ya",
+    "no": "Tidak",
+    "scope_in_timeline": {
+      "direct": "Langsung",
+      "private": "Hanya pengikut",
+      "public": "Publik"
+    },
+    "generic_error_message": "Terjadi kesalahan: {0}"
   },
   "remote_user_resolver": {
     "error": "Tidak ditemukan."
@@ -522,7 +542,18 @@
     "emoji": "Emoji",
     "stickers": "Stiker",
     "keep_open": "Tetap buka pemilih",
-    "custom": "Emoji kustom"
+    "custom": "Emoji kustom",
+    "unicode_groups": {
+      "activities": "Aktivitas",
+      "animals-and-nature": "Hewan & Alam",
+      "flags": "Bendera",
+      "food-and-drink": "Makanan & Minuman",
+      "objects": "Objek",
+      "people-and-body": "Orang & Tubuh",
+      "smileys-and-emotion": "Emosi",
+      "symbols": "Simbol",
+      "travel-and-places": "Perjalanan & Tempat-tempat"
+    }
   },
   "polls": {
     "expired": "Japat berakhir {0} yang lalu",
@@ -553,11 +584,17 @@
     "timelines": "Linimasa",
     "chats": "Obrolan",
     "dms": "Pesan langsung",
-    "friend_requests": "Ingin mengikuti"
+    "friend_requests": "Ingin mengikuti",
+    "twkn": "Jaringan Dikenal",
+    "mobile_notifications_close": "Tutup notifikasi",
+    "announcements": "Pengumuman",
+    "mobile_notifications": "Buka notifikasi (ada yang belum dibaca)"
   },
   "media_modal": {
     "next": "Selanjutnya",
-    "previous": "Sebelum"
+    "previous": "Sebelum",
+    "counter": "{current} / {total}",
+    "hide": "Tutup penampil media"
   },
   "login": {
     "recovery_code": "Kode pemulihan",
@@ -574,7 +611,10 @@
     "heading": {
       "totp": "Otentikasi dua-faktor"
     },
-    "enter_two_factor_code": "Masukkan kode dua-faktor"
+    "enter_two_factor_code": "Masukkan kode dua-faktor",
+    "logout_confirm": "Apa kamu yakin ingin keluar?",
+    "logout_confirm_accept_button": "Keluar",
+    "logout_confirm_cancel_button": "Jangan keluar"
   },
   "importer": {
     "error": "Terjadi kesalahan ketika mnengimpor berkas ini.",
@@ -597,7 +637,8 @@
     "gopher": "Gopher",
     "pleroma_chat_messages": "Pleroma Obrolan",
     "chat": "Obrolan",
-    "upload_limit": "Batas unggahan"
+    "upload_limit": "Batas unggahan",
+    "media_proxy": "Proxy media"
   },
   "exporter": {
     "processing": "Memproses, Anda akan segera diminta untuk mengunduh berkas Anda",
@@ -619,12 +660,41 @@
     "moves": "Pengguna yang bermigrasi",
     "follows": "Pengikut baru",
     "favs_repeats": "Ulangan dan favorit",
-    "load_older": "Muat interaksi yang lebih tua"
+    "load_older": "Muat interaksi yang lebih tua",
+    "emoji_reactions": "Reaksi Emoji",
+    "reports": "Laporan"
   },
   "errors": {
     "storage_unavailable": "Pleroma tidak dapat mengakses penyimpanan browser. Login Anda atau pengaturan lokal Anda tidak akan tersimpan dan masalah yang tidak terduga dapat terjadi. Coba mengaktifkan kuki."
   },
   "shoutbox": {
     "title": "Kotak Suara"
+  },
+  "report": {
+    "state_closed": "Ditutup",
+    "reporter": "Pelapor:",
+    "reported_statuses": "Status yang dilaporkan:",
+    "reported_user": "Pengguna yang dilaporkan:",
+    "notes": "Catatan:",
+    "state": "Status:",
+    "state_open": "Terbuka",
+    "state_resolved": "Selesai"
+  },
+  "announcements": {
+    "end_time_prompt": "Waktu berakhir: ",
+    "published_time_display": "Diterbitkan pada {time}",
+    "page_header": "Pengumuman",
+    "title": "Pengumuman",
+    "mark_as_read_action": "Tandai telah dibaca",
+    "post_placeholder": "Ketik isi pengumumanmu di sini...",
+    "close_error": "Tutup",
+    "delete_action": "Hapus",
+    "start_time_prompt": "Waktu mulai: ",
+    "post_error": "Kesalahan: {error}",
+    "start_time_display": "Dimulai pada {time}",
+    "end_time_display": "Berakhir pada {time}",
+    "edit_action": "Sunting",
+    "submit_edit_action": "Kirim",
+    "cancel_edit_action": "Batal"
   }
 }
diff --git a/src/i18n/ja_easy.json b/src/i18n/ja_easy.json
index 21b27d120..c5ed3b6c7 100644
--- a/src/i18n/ja_easy.json
+++ b/src/i18n/ja_easy.json
@@ -163,7 +163,8 @@
     "search_close": "けんさくバーをとじる",
     "edit_nav_mobile": "ナビゲーションバーのせっていをかえる",
     "mobile_sidebar": "モバイルのサイドバーをきりかえる",
-    "edit_finish": "へんしゅうをおわりにする"
+    "edit_finish": "へんしゅうをおわりにする",
+    "mobile_notifications_mark_as_seen": "ぜんぶ みたことにする"
   },
   "notifications": {
     "broken_favorite": "ステータスがみつかりません。さがしています…",
@@ -179,7 +180,13 @@
     "migrated_to": "インスタンスを、ひっこしました",
     "reacted_with": "{0} でリアクションしました",
     "poll_ended": "とうひょうが、おわりました",
-    "submitted_report": "つうほうしました"
+    "submitted_report": "つうほうしました",
+    "unread_announcements": "まだ よんでいない おしらせが {num}こ あります",
+    "configuration_tip_settings": "せってい",
+    "configuration_tip_dismiss": "つぎは ひょうじしない",
+    "unread_chats": "よんでいない チャットが {num}こ あります",
+    "unread_follow_requests": "フォローリクエストが {num}こ あります",
+    "configuration_tip": "ここに ひょうじする ものを {theSettings}で へんこうできます。 {dismiss}"
   },
   "polls": {
     "add_poll": "とうひょうをはじめる",
@@ -218,7 +225,8 @@
       "symbols": "きごう",
       "travel-and-places": "りょこう・ばしょ"
     },
-    "regional_indicator": "ばしょをしめすきごう {letter}"
+    "regional_indicator": "ばしょをしめすきごう {letter}",
+    "unpacked": "アンパックされた えもじ"
   },
   "stickers": {
     "add_sticker": "ステッカーをふやす"
@@ -269,7 +277,9 @@
     "preview": "プレビュー",
     "preview_empty": "なにもありません",
     "empty_status_error": "とうこうないようを、にゅうりょくしてください",
-    "scope_notice_dismiss": "このつうちをとじる"
+    "scope_notice_dismiss": "このつうちをとじる",
+    "reply_option": "この ステータスに へんしんする",
+    "quote_option": "この ステータスを いんようする"
   },
   "registration": {
     "bio": "プロフィール",
@@ -324,7 +334,7 @@
       "warning_of_generate_new_codes": "あたらしいリカバリーコードをつくったら、ふるいコードはつかえなくなります。",
       "recovery_codes": "リカバリーコード。",
       "waiting_a_recovery_codes": "バックアップコードをうけとっています…",
-      "recovery_codes_warning": "コードをかきうつすか、ひとにみられないところにセーブしてください。そうでなければ、あなたはこのコードをふたたびみることはできません。もしあなたが、2FAアプリのアクセスをうしなって、なおかつ、リカバリーコードもおもいだせないならば、あなたはあなたのアカウントから、しめだされます。",
+      "recovery_codes_warning": "コードを かきうつすか、 ほかのひとが みれないところに ほぞんしてください。 そうしないと、 あなたは このコードを にどと みることができません。 もし あなたが 2FAアプリに アクセスできなくなり、 リカバリーコードも おもいだせないなら、 あなたは あなたの アカウントに はいれなくなります。",
       "authentication_methods": "にんしょうメソッド",
       "scan": {
         "title": "スキャン",
@@ -697,9 +707,9 @@
     "import_mutes_from_a_csv_file": "CSVファイルからミュートをインポートする",
     "reset_avatar": "アバターをリセットする",
     "remove_language": "とりのぞく",
-    "primary_language": "いちばんわかることば:",
+    "primary_language": "さいしょに つかう ことば:",
     "add_language": "よびとしてつかうことばを、ついかする",
-    "fallback_language": "よびとしてつかうことば {index}:",
+    "fallback_language": "よびとして つかう ことば {index}:",
     "lists_navigation": "ナビゲーションにリストをひょうじする",
     "account_alias": "アカウントのエイリアス",
     "mention_link_display_full": "いつも、ながいなまえをひょうじする (れい: {'@'}hoge{'@'}example.org)",
@@ -797,7 +807,11 @@
     "virtual_scrolling": "タイムラインのレンダリングをよくする",
     "use_at_icon": "{'@'} きごうを、もじのかわりに、アイコンでひょうじする",
     "mention_link_display_short": "いつも、みじかいなまえにする (れい: {'@'}hoge)",
-    "mention_link_display": "メンションのリンクをひょうじするけいしき"
+    "mention_link_display": "メンションのリンクをひょうじするけいしき",
+    "url": "URL",
+    "preview": "プレビュー",
+    "emoji_reactions_scale": "リアクションを なんばいの おおきさで ひょうじするか",
+    "autocomplete_select_first": "じどうほかんが あれば、 さいしょの ものを じどうで えらぶ"
   },
   "time": {
     "day": "{0}日",
diff --git a/src/i18n/ja_pedantic.json b/src/i18n/ja_pedantic.json
index fddf24db3..a5b500dde 100644
--- a/src/i18n/ja_pedantic.json
+++ b/src/i18n/ja_pedantic.json
@@ -4,36 +4,37 @@
   },
   "exporter": {
     "export": "エクスポート",
-    "processing": "処理中です。処理が完了すると、ファイルをダウンロードするよう指示があります"
+    "processing": "処理中です。処理が完了すると、ファイルのダウンロードが開始します"
   },
   "features_panel": {
     "chat": "チャット",
     "gopher": "Gopher",
-    "media_proxy": "メディアプロクシ",
+    "media_proxy": "メディアプロキシ",
     "scope_options": "公開範囲選択",
-    "text_limit": "文字の数",
+    "text_limit": "文字数制限",
     "title": "有効な機能",
     "who_to_follow": "おすすめユーザー",
     "upload_limit": "ファイルサイズの上限",
-    "pleroma_chat_messages": "Pleroma チャット"
+    "pleroma_chat_messages": "Pleroma チャット",
+    "shout": "Shoutbox"
   },
   "finder": {
-    "error_fetching_user": "ユーザー検索がエラーになりました",
+    "error_fetching_user": "ユーザーの取得に失敗しました",
     "find_user": "ユーザーを探す"
   },
   "general": {
     "apply": "適用",
     "submit": "送信",
-    "more": "続き",
-    "generic_error": "エラーになりました",
-    "optional": "省略可",
+    "more": "もっと",
+    "generic_error": "エラーが発生しました",
+    "optional": "任意",
     "show_more": "もっと見る",
     "show_less": "たたむ",
     "cancel": "キャンセル",
     "disable": "無効",
     "enable": "有効",
     "confirm": "確認",
-    "verify": "検査",
+    "verify": "検証",
     "peek": "隠す",
     "close": "閉じる",
     "dismiss": "無視",
@@ -46,7 +47,21 @@
     },
     "flash_security": "Flashコンテンツが任意の命令を実行させることにより、コンピューターが危険にさらされることがあります。",
     "flash_fail": "Flashコンテンツの読み込みに失敗しました。コンソールで詳細を確認できます。",
-    "flash_content": "（試験的機能）クリックしてFlashコンテンツを再生します。"
+    "flash_content": "(試験的機能) クリックしてFlashコンテンツを再生します。",
+    "yes": "はい",
+    "no": "いいえ",
+    "scroll_to_top": "最上部へスクロール",
+    "unpin": "ピン留めを外す",
+    "pin": "ピン留めする",
+    "scope_in_timeline": {
+      "direct": "ダイレクト",
+      "private": "フォロワー限定",
+      "public": "パブリック",
+      "unlisted": "アンリステッド"
+    },
+    "generic_error_message": "エラーが発生しました: {0}",
+    "never_show_again": "二度と表示しない",
+    "undo": "取り消す"
   },
   "image_cropper": {
     "crop_picture": "画像を切り抜く",
@@ -57,7 +72,7 @@
   "importer": {
     "submit": "送信",
     "success": "正常にインポートされました。",
-    "error": "このファイルをインポートするとき、エラーが発生しました。"
+    "error": "ファイルのインポート中にエラーが発生しました。"
   },
   "login": {
     "login": "ログイン",
@@ -69,30 +84,36 @@
     "username": "ユーザー名",
     "hint": "会話に加わるには、ログインしてください",
     "authentication_code": "認証コード",
-    "enter_recovery_code": "リカバリーコードを入力してください",
-    "enter_two_factor_code": "2段階認証コードを入力してください",
+    "enter_recovery_code": "リカバリーコードを入力",
+    "enter_two_factor_code": "二段階認証コードを入力",
     "recovery_code": "リカバリーコード",
     "heading": {
-      "totp": "2段階認証",
-      "recovery": "2段階リカバリー"
-    }
+      "totp": "二段階認証",
+      "recovery": "二段階認証リカバリー"
+    },
+    "logout_confirm": "本当にログアウトしますか？",
+    "logout_confirm_accept_button": "ログアウト",
+    "logout_confirm_cancel_button": "ログアウトしない",
+    "logout_confirm_title": "ログアウトの確認"
   },
   "media_modal": {
-    "previous": "前",
-    "next": "次"
+    "previous": "前へ",
+    "next": "次へ",
+    "hide": "メディアビューアを閉じる",
+    "counter": "{current} / {total}"
   },
   "nav": {
     "about": "このインスタンスについて",
     "back": "戻る",
     "chat": "ローカルチャット",
     "friend_requests": "フォローリクエスト",
-    "mentions": "通知",
-    "interactions": "インタラクション",
+    "mentions": "メンション",
+    "interactions": "通知",
     "dms": "ダイレクトメッセージ",
     "public_tl": "公開タイムライン",
     "timeline": "タイムライン",
     "twkn": "すべてのネットワーク",
-    "user_search": "ユーザーを探す",
+    "user_search": "ユーザー検索",
     "search": "検索",
     "who_to_follow": "おすすめユーザー",
     "preferences": "設定",
@@ -100,21 +121,43 @@
     "bookmarks": "ブックマーク",
     "timelines": "タイムライン",
     "chats": "チャット",
-    "home_timeline": "ホームタイムライン"
+    "home_timeline": "ホームタイムライン",
+    "mobile_notifications_mark_as_seen": "すべて既読にする",
+    "search_close": "検索バーを閉じる",
+    "lists": "リスト",
+    "edit_nav_mobile": "ナビゲーションバーを編集",
+    "edit_pinned": "ピン留めを編集",
+    "edit_finish": "完了",
+    "mobile_notifications": "通知を開く (未読あり)",
+    "mobile_notifications_close": "通知を閉じる",
+    "announcements": "お知らせ",
+    "all_bookmarks": "全てのブックマーク",
+    "bookmark_folders": "ブックマークフォルダ",
+    "mobile_sidebar": "モバイルのサイドバーを開く",
+    "quotes": "引用"
   },
   "notifications": {
     "broken_favorite": "ステータスが見つかりません。探しています…",
-    "favorited_you": "あなたのステータスがお気に入りされました",
+    "favorited_you": "ステータスがお気に入りされました",
     "followed_you": "フォローされました",
-    "load_older": "古い通知をみる",
+    "load_older": "古い通知を読み込む",
     "notifications": "通知",
     "read": "読んだ！",
-    "repeated_you": "あなたのステータスがリピートされました",
+    "repeated_you": "ステータスがリピートされました",
     "no_more_notifications": "通知はありません",
     "reacted_with": "{0} でリアクションしました",
     "migrated_to": "インスタンスを引っ越しました",
-    "follow_request": "あなたをフォローしたいです",
-    "error": "通知の取得に失敗しました: {0}"
+    "follow_request": "あなたをフォローしたがっています",
+    "error": "通知の取得に失敗しました: {0}",
+    "poll_ended": "投票結果が確定しました",
+    "configuration_tip_dismiss": "二度と表示しない",
+    "unread_announcements": "未読のお知らせが{num}件あります | 未読のお知らせが{num}件あります",
+    "unread_chats": "未読のチャットが{num}件あります | 未読のチャットが{num}件あります",
+    "unread_follow_requests": "フォローリクエストが{num}件来ています | フォローリクエストが{num}件来ています",
+    "configuration_tip": "ここに表示する通知の種類は{theSettings}にて変更することができます。 {dismiss}",
+    "submitted_report": "通報が送信されました",
+    "configuration_tip_settings": "設定",
+    "subscribed_status": "投稿しました"
   },
   "polls": {
     "add_poll": "投票を追加",
@@ -128,20 +171,22 @@
     "expiry": "投票期間",
     "expires_in": "投票は {0} で終了します",
     "expired": "投票は {0} 前に終了しました",
-    "not_enough_options": "相異なる選択肢が不足しています",
+    "not_enough_options": "選択肢が少なすぎます",
     "votes_count": "{count} 票 | {count} 票",
-    "people_voted_count": "{count} 人投票 | {count} 人投票"
+    "people_voted_count": "{count}人が投票しました | {count}人が投票しました"
   },
   "emoji": {
     "stickers": "ステッカー",
     "emoji": "絵文字",
-    "keep_open": "ピッカーを開いたままにする",
+    "keep_open": "絵文字ピッカーを開いたままにする",
     "search_emoji": "絵文字を検索",
     "add_emoji": "絵文字を挿入",
     "custom": "カスタム絵文字",
     "unicode": "Unicode絵文字",
     "load_all": "全 {emojiAmount} 絵文字を読み込む",
-    "load_all_hint": "最初の {saneAmount} 絵文字を読み込みました、全て読み込むと重くなる可能性があります。"
+    "load_all_hint": "最初の {saneAmount} 件の絵文字を読み込みました。すべて読み込むとパフォーマンスに影響を与える可能性があります。",
+    "unpacked": "パック外の絵文字",
+    "hide_custom_emoji": "カスタム絵文字を表示しない"
   },
   "stickers": {
     "add_sticker": "ステッカーを追加"
@@ -149,30 +194,33 @@
   "interactions": {
     "favs_repeats": "リピートとお気に入り",
     "follows": "新しいフォロワー",
-    "load_older": "古いインタラクションを見る",
-    "moves": "ユーザーの引っ越し"
+    "load_older": "古い通知を読み込む",
+    "moves": "ユーザーの引っ越し",
+    "emoji_reactions": "絵文字リアクション",
+    "reports": "通報",
+    "statuses": "購読"
   },
   "post_status": {
     "new_status": "投稿する",
-    "account_not_locked_warning": "あなたのアカウントは {0} ではありません。あなたをフォローすれば、誰でも、フォロワー限定のステータスを読むことができます。",
-    "account_not_locked_warning_link": "ロックされたアカウント",
-    "attachments_sensitive": "ファイルをNSFWにする",
+    "account_not_locked_warning": "あなたのアカウントは {0} ではありません。あなたをフォローすれば、誰でもフォロワー限定のステータスを読むことができます。",
+    "account_not_locked_warning_link": "鍵アカウント",
+    "attachments_sensitive": "ファイルを閲覧注意に設定する",
     "content_type": {
       "text/plain": "プレーンテキスト",
       "text/html": "HTML",
       "text/markdown": "Markdown",
       "text/bbcode": "BBCode"
     },
-    "content_warning": "説明 (省略可)",
+    "content_warning": "注釈 (任意)",
     "default": "羽田空港に着きました。",
-    "direct_warning_to_all": "この投稿は、メンションされたすべてのユーザーが、見ることができます。",
-    "direct_warning_to_first_only": "この投稿は、メッセージの冒頭でメンションされたユーザーだけが、見ることができます。",
+    "direct_warning_to_all": "この投稿は、メンションされたすべてのユーザーが閲覧できます。",
+    "direct_warning_to_first_only": "この投稿は、メッセージの冒頭でメンションされたユーザーだけが閲覧できます。",
     "direct_warning": "このステータスは、メンションされたユーザーだけが、読むことができます。",
     "posting": "投稿",
     "scope_notice": {
-      "public": "この投稿は、誰でも見ることができます",
-      "private": "この投稿は、あなたのフォロワーだけが、見ることができます",
-      "unlisted": "この投稿は、パブリックタイムラインと、接続しているすべてのネットワークには、表示されません"
+      "public": "この投稿は誰でも閲覧できます",
+      "private": "この投稿はフォロワーのみ閲覧できます",
+      "unlisted": "この投稿は、公開タイムラインとすべてのネットワークには表示されません"
     },
     "scope": {
       "direct": "ダイレクト: メンションされたユーザーのみに届きます",
@@ -180,22 +228,29 @@
       "public": "パブリック: 公開タイムラインに届きます",
       "unlisted": "アンリステッド: 公開タイムラインに届きません"
     },
-    "media_description_error": "メディアのアップロードに失敗しました。もう一度お試しください",
+    "media_description_error": "メディアのアップデートに失敗しました。もう一度お試しください",
     "empty_status_error": "投稿内容を入力してください",
     "preview_empty": "何もありません",
     "preview": "プレビュー",
     "media_description": "メディアの説明",
-    "post": "投稿"
+    "post": "投稿",
+    "edit_status": "ステータスを編集",
+    "reply_option": "このステータスに返信する",
+    "quote_option": "このステータスを引用する",
+    "edit_remote_warning": "他のインスタンスは投稿の編集に対応していないかもしれません。その場合、編集した内容は伝わりません。",
+    "edit_unsupported_warning": "Pleromaは、メンションと投票の編集に対応していません。",
+    "scope_notice_dismiss": "このメッセージを閉じる",
+    "content_type_selection": "投稿形式"
   },
   "registration": {
     "bio": "プロフィール",
-    "email": "Eメール",
-    "fullname": "スクリーンネーム",
+    "email": "メールアドレス",
+    "fullname": "表示名",
     "password_confirm": "パスワードの確認",
     "registration": "登録",
-    "token": "招待トークン",
+    "token": "招待コード",
     "captcha": "CAPTCHA",
-    "new_captcha": "文字が読めないときは、画像をクリックすると、新しい画像になります",
+    "new_captcha": "文字が読めない場合、画像をクリックすると新しい画像が表示されます",
     "username_placeholder": "例: lain",
     "fullname_placeholder": "例: 岩倉玲音",
     "bio_placeholder": "例:\nこんにちは。私は玲音。\n私はアニメのキャラクターで、日本の郊外に住んでいます。私をWiredで見たことがあるかもしれません。",
@@ -205,11 +260,18 @@
       "email_required": "必須",
       "password_required": "必須",
       "password_confirmation_required": "必須",
-      "password_confirmation_match": "パスワードが違います"
+      "password_confirmation_match": "パスワードが一致しません",
+      "birthday_required": "必須",
+      "birthday_min_age": "{date} 以降のユーザーは登録できません"
     },
-    "reason_placeholder": "このインスタンスは、新規登録を手動で受け付けています。\n登録したい理由を、インスタンスの管理者に教えてください。",
-    "reason": "登録するための目的",
-    "register": "登録"
+    "reason_placeholder": "このインスタンスは、新規登録を手動で承認しています。\n登録したい理由をインスタンスの管理者に教えてください。",
+    "reason": "登録を希望する理由",
+    "register": "登録",
+    "email_language": "このサーバーからのメールをどの言語で受け取りますか？",
+    "bio_optional": "プロフィール (任意)",
+    "email_optional": "メールアドレス (任意)",
+    "birthday": "誕生日:",
+    "birthday_optional": "誕生日 (任意):"
   },
   "selectable_list": {
     "select_all": "すべて選択"
@@ -223,44 +285,44 @@
       "setup_otp": "OTPのセットアップ",
       "wait_pre_setup_otp": "OTPのプリセット",
       "confirm_and_enable": "OTPの確認と有効化",
-      "title": "2段階認証",
+      "title": "二段階認証",
       "generate_new_recovery_codes": "新しいリカバリーコードを生成",
       "warning_of_generate_new_codes": "新しいリカバリーコードを生成すると、古いコードは使用できなくなります。",
       "recovery_codes": "リカバリーコード。",
       "waiting_a_recovery_codes": "バックアップコードを受信しています…",
-      "recovery_codes_warning": "コードを紙に書くか、安全な場所に保存してください。そうでなければ、あなたはコードを再び見ることはできません。もし2段階認証アプリのアクセスを喪失し、なおかつ、リカバリーコードもないならば、あなたは自分のアカウントから閉め出されます。",
+      "recovery_codes_warning": "リカバリーコードをどこか安全な場所に書き留めてください。このコードは二度と表示されません。二段階認証アプリへのアクセスを失い、リカバリーコードも紛失した場合、二度とアカウントにログインできなくなります。",
       "authentication_methods": "認証方法",
       "scan": {
         "title": "スキャン",
-        "desc": "あなたの2段階認証アプリを使って、このQRコードをスキャンするか、テキストキーを入力してください:",
+        "desc": "二段階認証アプリでQRコードを読み取るか、テキストキーを入力してください:",
         "secret_code": "キー"
       },
       "verify": {
-        "desc": "2段階認証を有効にするには、あなたの2段階認証アプリのコードを入力してください:"
+        "desc": "二段階認証を有効にするには、二段階認証アプリに表示されたコードを入力してください:"
       }
     },
     "attachmentRadius": "ファイル",
     "attachments": "ファイル",
-    "avatar": "アバター",
-    "avatarAltRadius": "通知のアバター",
-    "avatarRadius": "アバター",
+    "avatar": "アイコン",
+    "avatarAltRadius": "通知内のアイコン",
+    "avatarRadius": "アイコン",
     "background": "バックグラウンド",
     "bio": "プロフィール",
     "block_export": "ブロックのエクスポート",
     "block_export_button": "ブロックをCSVファイルにエクスポートする",
     "block_import": "ブロックのインポート",
     "block_import_error": "ブロックのインポートに失敗しました",
-    "blocks_imported": "ブロックをインポートしました！ 実際に処理されるまでに、しばらく時間がかかります。",
+    "blocks_imported": "ブロックがインポートされました。処理には時間がかかる場合があります。",
     "blocks_tab": "ブロック",
     "btnRadius": "ボタン",
     "cBlue": "返信とフォロー",
     "cGreen": "リピート",
     "cOrange": "お気に入り",
     "cRed": "キャンセル",
-    "change_password": "パスワードを変える",
-    "change_password_error": "パスワードを変えることが、できなかったかもしれません。",
-    "changed_password": "パスワードが、変わりました！",
-    "collapse_subject": "説明のある投稿をたたむ",
+    "change_password": "パスワードを変更",
+    "change_password_error": "パスワードの変更中にエラーが発生しました。",
+    "changed_password": "パスワードが変更されました！",
+    "collapse_subject": "注釈のついた投稿をたたむ",
     "composing": "投稿",
     "confirm_new_password": "新しいパスワードの確認",
     "current_avatar": "現在のアバター",
@@ -268,52 +330,52 @@
     "current_profile_banner": "現在のプロフィールバナー",
     "data_import_export_tab": "インポートとエクスポート",
     "default_vis": "デフォルトの公開範囲",
-    "delete_account": "アカウントを消す",
-    "delete_account_description": "あなたのデータが消えて、アカウントが使えなくなります。",
-    "delete_account_error": "アカウントを消すことが、できなかったかもしれません。インスタンスの管理者に、連絡してください。",
-    "delete_account_instructions": "本当にアカウントを消してもいいなら、パスワードを入力してください。",
+    "delete_account": "アカウントの削除",
+    "delete_account_description": "アカウントのデータを永久的に削除し、アカウントを無効化します。",
+    "delete_account_error": "アカウントの削除中にエラーが発生しました。継続して発生する場合、管理者に問い合せてください。",
+    "delete_account_instructions": "アカウント削除の確認のため、パスワードを入力してください。",
     "discoverable": "検索などのサービスでこのアカウントを見つけることを許可する",
-    "avatar_size_instruction": "アバターの大きさは、150×150ピクセルか、それよりも大きくするといいです。",
-    "pad_emoji": "ピッカーから絵文字を挿入するとき、絵文字の両側にスペースを入れる",
-    "export_theme": "保存",
+    "avatar_size_instruction": "アイコン画像のサイズは150x150以上を推奨します。",
+    "pad_emoji": "絵文字ピッカーから絵文字を挿入するとき、絵文字の前後に空白を挿入する",
+    "export_theme": "ファイルにテーマを出力",
     "filtering": "フィルタリング",
-    "filtering_explanation": "これらの言葉を含むすべてのものがミュートされます。1行に1つの言葉を書いてください",
+    "filtering_explanation": "これらの単語を含むステータスはミュートされます。(1行に1単語)",
     "follow_export": "フォローのエクスポート",
     "follow_export_button": "エクスポート",
     "follow_export_processing": "お待ちください。まもなくファイルをダウンロードできます。",
     "follow_import": "フォローのインポート",
-    "follow_import_error": "フォローのインポートがエラーになりました",
-    "follows_imported": "フォローがインポートされました！ 少し時間がかかるかもしれません。",
+    "follow_import_error": "フォローのインポートに失敗しました",
+    "follows_imported": "フォローがインポートされました。処理には時間がかかる場合があります。",
     "foreground": "フォアグラウンド",
     "general": "全般",
-    "hide_attachments_in_convo": "スレッドのファイルを隠す",
-    "hide_attachments_in_tl": "タイムラインのファイルを隠す",
-    "hide_muted_posts": "ミュートしているユーザーの投稿を隠す",
-    "max_thumbnails": "投稿に含まれるサムネイルの最大数",
-    "hide_isp": "インスタンス固有パネルを隠す",
+    "hide_attachments_in_convo": "スレッド内のファイルを表示しない",
+    "hide_attachments_in_tl": "タイムラインのファイルを表示しない",
+    "hide_muted_posts": "ミュートしているユーザーの投稿を表示しない",
+    "max_thumbnails": "投稿に表示するサムネイルの最大数 (空にすると無制限)",
+    "hide_isp": "インスタンス固有パネルを表示しない",
     "preload_images": "画像を先読みする",
-    "use_one_click_nsfw": "NSFWなファイルを1クリックで開く",
-    "hide_post_stats": "投稿の統計を隠す (例: お気に入りの数)",
-    "hide_user_stats": "ユーザーの統計を隠す (例: フォロワーの数)",
-    "hide_filtered_statuses": "フィルターされた投稿を隠す",
+    "use_one_click_nsfw": "閲覧注意なファイルを1クリックで開く",
+    "hide_post_stats": "投稿の統計を表示しない (例: お気に入りの数)",
+    "hide_user_stats": "ユーザーの統計を表示しない (例: フォロワーの数)",
+    "hide_filtered_statuses": "フィルタリングされた投稿を表示しない",
     "import_blocks_from_a_csv_file": "CSVファイルからブロックをインポートする",
     "import_followers_from_a_csv_file": "CSVファイルからフォローをインポートする",
-    "import_theme": "ロード",
-    "inputRadius": "インプットフィールド",
+    "import_theme": "ファイルからテーマを読み込む",
+    "inputRadius": "入力欄",
     "checkboxRadius": "チェックボックス",
     "instance_default": "(デフォルト: {value})",
     "instance_default_simple": "(デフォルト)",
     "interface": "インターフェース",
     "interfaceLanguage": "インターフェースの言語",
-    "invalid_theme_imported": "このファイルはPleromaのテーマではありません。テーマは変更されませんでした。",
-    "limited_availability": "あなたのブラウザではできません",
+    "invalid_theme_imported": "非対応の形式のテーマファイルです。テーマは変更されませんでした。",
+    "limited_availability": "非対応のブラウザです",
     "links": "リンク",
-    "lock_account_description": "あなたが認めた人だけ、あなたのアカウントをフォローできる",
-    "loop_video": "ビデオを繰り返す",
-    "loop_video_silent_only": "音のないビデオだけ繰り返す",
+    "lock_account_description": "フォローを承認制にする",
+    "loop_video": "動画をループ再生する",
+    "loop_video_silent_only": "音声のない動画のみループ再生する",
     "mutes_tab": "ミュート",
-    "play_videos_in_modal": "ビデオをメディアビューアーで見る",
-    "use_contain_fit": "画像のサムネイルを、切り抜かない",
+    "play_videos_in_modal": "動画をメディアビューアで再生する",
+    "use_contain_fit": "画像のサムネイルを切り抜かない",
     "name": "名前",
     "name_bio": "名前とプロフィール",
     "new_password": "新しいパスワード",
@@ -322,55 +384,55 @@
     "notification_visibility_likes": "お気に入り",
     "notification_visibility_mentions": "メンション",
     "notification_visibility_repeats": "リピート",
-    "no_rich_text_description": "リッチテキストを使わない",
-    "no_blocks": "ブロックはありません",
-    "no_mutes": "ミュートはありません",
-    "hide_follows_description": "フォローしている人を見せない",
-    "hide_followers_description": "フォロワーを見せない",
-    "hide_follows_count_description": "フォローしている人の数を見せない",
-    "hide_followers_count_description": "フォロワーの数を見せない",
-    "show_admin_badge": "\"管理者\"のバッジを見せる",
-    "show_moderator_badge": "\"モデレーター\"のバッジを見せる",
-    "nsfw_clickthrough": "NSFWなファイルを隠す",
+    "no_rich_text_description": "投稿のテキスト装飾を無効化する",
+    "no_blocks": "ブロックしたユーザーはいません",
+    "no_mutes": "ミュートしたユーザーはいません",
+    "hide_follows_description": "フォロー欄を非公開にする",
+    "hide_followers_description": "フォロワー欄を非公開にする",
+    "hide_follows_count_description": "フォロー数を非公開にする",
+    "hide_followers_count_description": "フォロワー数を非公開にする",
+    "show_admin_badge": "プロフィールに「管理者」バッジを表示する",
+    "show_moderator_badge": "プロフィールに「モデレーター」バッジを表示する",
+    "nsfw_clickthrough": "閲覧注意なファイルを隠す",
     "oauth_tokens": "OAuthトークン",
     "token": "トークン",
     "refresh_token": "トークンを更新",
-    "valid_until": "まで有効",
+    "valid_until": "有効期限",
     "revoke_token": "取り消す",
     "panelRadius": "パネル",
-    "pause_on_unfocused": "タブにフォーカスがないときストリーミングを止める",
+    "pause_on_unfocused": "タブにフォーカスがないとき、タイムラインの自動更新を止める",
     "presets": "プリセット",
     "profile_background": "プロフィールの背景",
     "profile_banner": "プロフィールのバナー",
     "profile_tab": "プロフィール",
-    "radii_help": "インターフェースの丸さを設定する",
-    "replies_in_timeline": "タイムラインのリプライ",
-    "reply_visibility_all": "すべてのリプライを見る",
-    "reply_visibility_following": "私に宛てられたリプライと、フォローしている人からのリプライを見る",
-    "reply_visibility_self": "私に宛てられたリプライを見る",
-    "autohide_floating_post_button": "新しい投稿ボタンを自動的に隠す (モバイル)",
+    "radii_help": "インターフェースの角丸を設定する (ピクセル単位)",
+    "replies_in_timeline": "タイムライン上の返信",
+    "reply_visibility_all": "すべての返信を表示する",
+    "reply_visibility_following": "自分、もしくはフォローしているユーザー宛ての返信のみを表示する",
+    "reply_visibility_self": "自分に宛てられた返信のみを表示する",
+    "autohide_floating_post_button": "投稿ボタンを自動的に隠す (モバイル)",
     "saving_err": "設定を保存できませんでした",
     "saving_ok": "設定を保存しました",
     "search_user_to_block": "ブロックしたいユーザーを検索",
     "search_user_to_mute": "ミュートしたいユーザーを検索",
     "security_tab": "セキュリティ",
-    "scope_copy": "返信するとき、公開範囲をコピーする (DMの公開範囲は、常にコピーされます)",
-    "minimal_scopes_mode": "公開範囲選択オプションを最小にする",
-    "set_new_avatar": "新しいアバターを設定する",
-    "set_new_profile_background": "新しいプロフィールのバックグラウンドを設定する",
-    "set_new_profile_banner": "新しいプロフィールバナーを設定する",
+    "scope_copy": "返信の公開範囲を返信先に合わせる",
+    "minimal_scopes_mode": "公開範囲選択オプションを最小化する",
+    "set_new_avatar": "アイコンを設定する",
+    "set_new_profile_background": "プロフィールの背景を設定する",
+    "set_new_profile_banner": "プロフィールのバナーを設定する",
     "settings": "設定",
-    "subject_input_always_show": "サブジェクトフィールドをいつでも表示する",
-    "subject_line_behavior": "返信するときサブジェクトをコピーする",
-    "subject_line_email": "メール風: \"re: サブジェクト\"",
-    "subject_line_mastodon": "マストドン風: そのままコピー",
+    "subject_input_always_show": "注釈欄を常に表示する",
+    "subject_line_behavior": "返信するとき、返信先の注釈をコピーする",
+    "subject_line_email": "メール風: \"re: 注釈\"",
+    "subject_line_mastodon": "Mastodon風: そのままコピー",
     "subject_line_noop": "コピーしない",
-    "post_status_content_type": "投稿のコンテントタイプ",
-    "stop_gifs": "カーソルを重ねたとき、GIFを動かす",
-    "streaming": "上までスクロールしたとき、自動的にストリーミングする",
+    "post_status_content_type": "デフォルトの投稿形式",
+    "stop_gifs": "GIFを自動再生しない",
+    "streaming": "上までスクロールしたとき、自動でタイムラインを更新する",
     "text": "文字",
     "theme": "テーマ",
-    "theme_help": "カラーテーマをカスタマイズできます。",
+    "theme_help": "カラーコード(#rrggbb)を使用してカラーテーマをカスタマイズできます。",
     "theme_help_v2_1": "チェックボックスをONにすると、コンポーネントごとに、色と透明度をオーバーライドできます。「すべてクリア」ボタンを押すと、すべてのオーバーライドをやめます。",
     "theme_help_v2_2": "バックグラウンドとテキストのコントラストを表すアイコンがあります。マウスをホバーすると、詳しい説明が出ます。透明な色を使っているときは、最悪の場合のコントラストが示されます。",
     "tooltipRadius": "ツールチップとアラート",
@@ -381,9 +443,9 @@
       "true": "はい"
     },
     "notifications": "通知",
-    "notification_mutes": "特定のユーザーからの通知を止めるには、ミュートしてください。",
-    "notification_blocks": "ブロックしているユーザーからの通知は、すべて止まります。",
-    "enable_web_push_notifications": "ウェブプッシュ通知を許可する",
+    "notification_mutes": "特定のユーザーからの通知を止めるには、ミュートを使用してください。",
+    "notification_blocks": "ユーザーをブロックすると、そのユーザーからの通知はすべて停止されます。",
+    "enable_web_push_notifications": "プッシュ通知を有効にする",
     "style": {
       "switcher": {
         "keep_color": "色を残す",
@@ -398,12 +460,12 @@
         "help": {
           "snapshot_missing": "テーマのスナップショットがありません。思っていた見た目と違うかもしれません。",
           "migration_snapshot_ok": "念のために、テーマのスナップショットが読み込まれました。テーマのデータを読み込むことができます。",
-          "fe_downgraded": "フロントエンドが前のバージョンに戻りました。",
-          "fe_upgraded": "フロントエンドと一緒に、テーマエンジンが新しくなりました。",
-          "older_version_imported": "古いフロントエンドで作られたファイルをインポートしました。",
-          "future_version_imported": "新しいフロントエンドで作られたファイルをインポートしました。",
-          "v2_imported": "古いフロントエンドのためのファイルをインポートしました。設定した通りにならないかもしれません。",
-          "upgraded_from_v2": "フロントエンドが新しくなったので、今までの見た目と少し違うかもしれません。",
+          "fe_downgraded": "PleromaFEが前のバージョンに戻りました。",
+          "fe_upgraded": "PleromaFEのテーマエンジンが更新されました。",
+          "older_version_imported": "古いバージョンで作成されたファイルをインポートしました。",
+          "future_version_imported": "新しいバージョンで作成されたファイルをインポートしました。",
+          "v2_imported": "古いバージョンで作成されたファイルをインポートしました。設定した通りにならないかもしれません。",
+          "upgraded_from_v2": "PleromaFEが更新されました。テーマの表示が以前と異なる場合があります。",
           "snapshot_source_mismatch": "フロントエンドがロールバックと更新を繰り返したため、バージョンが競合しています。",
           "migration_napshot_gone": "スナップショットがありません、覚えているものと見た目が違うかもしれません。",
           "snapshot_present": "テーマのスナップショットが読み込まれました。設定は上書きされました。代わりとして実データを読み込むことができます。"
@@ -432,7 +494,7 @@
       "common_colors": {
         "_tab_label": "共通",
         "main": "共通の色",
-        "foreground_hint": "「詳細」タブで、もっと細かく設定できます",
+        "foreground_hint": "「詳細」タブで、より細かく設定できます",
         "rgbo": "アイコンとアクセントとバッジ"
       },
       "advanced_colors": {
@@ -445,7 +507,7 @@
         "top_bar": "トップバー",
         "borders": "境界",
         "buttons": "ボタン",
-        "inputs": "インプットフィールド",
+        "inputs": "入力欄",
         "faint_text": "薄いテキスト",
         "alert_neutral": "それ以外",
         "chat": {
@@ -481,35 +543,39 @@
         "inset": "内側",
         "hint": "影の設定では、色の値として --variable を使うことができます。これはCSS3変数です。ただし、透明度の設定は、効かなくなります。",
         "filter_hint": {
-          "always_drop_shadow": "ブラウザーがサポートしていれば、常に {0} が使われます。",
+          "always_drop_shadow": "注意: この影には、ブラウザーがサポートしている場合、常に {0} が使われます。",
           "drop_shadow_syntax": "{0} は、{1} パラメーターと {2} キーワードをサポートしていません。",
-          "avatar_inset": "内側の影と外側の影を同時に使うと、透明なアバターの表示が乱れます。",
-          "spread_zero": "広がりが 0 よりも大きな影は、0 と同じです",
-          "inset_classic": "内側の影は {0} を使います"
+          "avatar_inset": "内側の影と外側の影を同時に使うと、透明なアイコンの表示が変になる場合があることに注意してください。",
+          "spread_zero": "広がりを 0 より大きくしても、表示は 0 と変わりません",
+          "inset_classic": "内側の影には {0} が使われます"
         },
         "components": {
           "panel": "パネル",
           "panelHeader": "パネルヘッダー",
           "topBar": "トップバー",
-          "avatar": "ユーザーアバター (プロフィール)",
-          "avatarStatus": "ユーザーアバター (投稿)",
+          "avatar": "ユーザーアイコン (プロフィール)",
+          "avatarStatus": "ユーザーアイコン (投稿)",
           "popup": "ポップアップとツールチップ",
           "button": "ボタン",
           "buttonHover": "ボタン (ホバー)",
           "buttonPressed": "ボタン (押されているとき)",
           "buttonPressedHover": "ボタン (ホバー、かつ、押されているとき)",
-          "input": "インプットフィールド"
+          "input": "入力欄"
         },
-        "hintV3": "影の場合は、 {0} 表記を使って他の色スロットを使うこともできます。"
+        "hintV3": "影の色には、 {0} 表記を使って他の色スロットに指定した色を再利用することもできます。",
+        "offset": "影のオフセット",
+        "name": "名前",
+        "light_grid": "背景のチェック模様を明るくする"
       },
       "fonts": {
         "_tab_label": "フォント",
         "help": "「カスタム」を選んだときは、システムにあるフォントの名前を、正しく入力してください。",
         "components": {
           "interface": "インターフェース",
-          "input": "インプットフィールド",
+          "input": "入力欄",
           "post": "投稿",
-          "postCode": "等幅 (投稿がリッチテキストであるとき)"
+          "postCode": "等幅 (投稿がリッチテキストであるとき)",
+          "monospace": "等幅テキスト"
         },
         "family": "フォント名",
         "size": "大きさ (px)",
@@ -529,14 +595,50 @@
         "header_faint": "エラーではありません",
         "checkbox": "利用規約を読みました",
         "link": "ハイパーリンク"
-      }
+      },
+      "themes2_outdated": "V2テーマのエディタは徐々に廃止され、最終的には新しいV3テーマのものに置き換えられる予定です。現状はまだ動作するはずですが、正しく動作する保証はありません。",
+      "themes3": {
+        "font": {
+          "group-local": "端末上にインストールされたフォント",
+          "local-unavailable2": "フォント名を直接指定してください",
+          "lookup_local_fonts": "端末上のフォントの一覧から選ぶ",
+          "group-builtin": "ブラウザのデフォルトフォント",
+          "builtin": {
+            "serif": "明朝体 (Serif)",
+            "sans-serif": "ゴシック体 (Sans-serif)",
+            "monospace": "等幅 (Monospace)",
+            "inherit": "変更しない"
+          },
+          "local-unavailable1": "端末上のフォントの一覧が取得できません",
+          "font_list_unavailable": "端末上のフォントの一覧が取得できません: {error}",
+          "enter_manually": "フォント名を直接入力する",
+          "entry": "{fontFamily}を入力",
+          "select": "フォントを選択"
+        },
+        "hacks": {
+          "underlay_overrides": "背景表示",
+          "underlay_override_mode_none": "テーマのデフォルトを使用する",
+          "underlay_override_mode_opaque": "単色に置き換える",
+          "underlay_override_mode_transparent": "非表示にする (テーマによっては表示が壊れる可能性があります)",
+          "force_interface_roundness": "インターフェースの角丸設定",
+          "forced_roundness_mode_disabled": "テーマのデフォルトを使用する",
+          "forced_roundness_mode_sharp": "角ばったデザインを強制する",
+          "forced_roundness_mode_nonsharp": "若干の角丸(1px分丸める)デザインを強制する",
+          "forced_roundness_mode_round": "角丸デザインを強制する"
+        },
+        "define": "上書き"
+      },
+      "custom_theme_used": "(カスタムテーマ)",
+      "appearance_tab_note": "以下の設定はテーマには反映されないため、エクスポートしたテーマの見た目は今見えているものと異なる可能性があります",
+      "update_preview": "プレビューを更新",
+      "interface_font_user_override": "フォント設定の上書き"
     },
     "version": {
       "title": "バージョン",
       "backend_version": "バックエンドのバージョン",
       "frontend_version": "フロントエンドのバージョン"
     },
-    "notification_setting_hide_notification_contents": "送った人と内容を、プッシュ通知に表示しない",
+    "notification_setting_hide_notification_contents": "送った人と通知の内容をプッシュ通知に表示しない",
     "notification_setting_privacy": "プライバシー",
     "notification_setting_block_from_strangers": "フォローしていないユーザーからの通知を拒否する",
     "notification_setting_filters": "フィルター",
@@ -544,53 +646,55 @@
     "virtual_scrolling": "タイムラインの描画を最適化する",
     "type_domains_to_mute": "ミュートしたいドメインを検索",
     "useStreamingApiWarning": "（実験中で、投稿を取りこぼすかもしれないので、おすすめしません）",
-    "useStreamingApi": "投稿と通知を、すぐに受け取る",
+    "useStreamingApi": "投稿と通知をリアルタイムで受信する",
     "user_mutes": "ユーザー",
-    "reset_background_confirm": "本当にバックグラウンドを初期化しますか？",
-    "reset_banner_confirm": "本当にバナーを初期化しますか？",
-    "reset_avatar_confirm": "本当にアバターを初期化しますか？",
-    "hide_wallpaper": "インスタンスのバックグラウンドを隠す",
-    "reset_profile_background": "プロフィールのバックグラウンドを初期化",
-    "reset_profile_banner": "プロフィールのバナーを初期化",
-    "reset_avatar": "アバターを初期化",
+    "reset_background_confirm": "本当に背景をリセットしますか？",
+    "reset_banner_confirm": "本当にバナーをリセットしますか？",
+    "reset_avatar_confirm": "本当にアイコンをリセットしますか？",
+    "hide_wallpaper": "インスタンスデフォルトの壁紙を表示しない",
+    "reset_profile_background": "プロフィールの背景をリセット",
+    "reset_profile_banner": "プロフィールのバナーをリセット",
+    "reset_avatar": "アイコンをリセット",
     "notification_visibility_emoji_reactions": "リアクション",
     "notification_visibility_moves": "ユーザーの引っ越し",
     "new_email": "新しいメールアドレス",
     "profile_fields": {
       "value": "内容",
       "name": "ラベル",
-      "add_field": "枠を追加",
-      "label": "プロフィール補足情報"
+      "add_field": "入力欄を追加",
+      "label": "追加情報"
     },
     "accent": "アクセント",
-    "mutes_imported": "ミュートをインポートしました！少し時間がかかるかもしれません。",
-    "emoji_reactions_on_timeline": "絵文字リアクションをタイムラインに表示",
+    "mutes_imported": "ミュートがインポートされました。処理には時間がかかる場合があります。",
+    "emoji_reactions_on_timeline": "絵文字リアクションをタイムラインに表示する",
     "domain_mutes": "ドメイン",
     "mutes_and_blocks": "ミュートとブロック",
     "chatMessageRadius": "チャットメッセージ",
-    "change_email_error": "メールアドレスを変えることが、できなかったかもしれません。",
-    "changed_email": "メールアドレスが、変わりました！",
-    "change_email": "メールアドレスを変える",
+    "change_email_error": "メールアドレスの変更中にエラーが発生しました。",
+    "changed_email": "メールアドレスが変更されました！",
+    "change_email": "メールアドレスを変更",
     "bot": "これは bot アカウントです",
     "mute_export_button": "ミュートをCSVファイルにエクスポートする",
     "import_mutes_from_a_csv_file": "CSVファイルからミュートをインポートする",
     "mute_import_error": "ミュートのインポートに失敗しました",
     "mute_import": "ミュートのインポート",
     "mute_export": "ミュートのエクスポート",
-    "allow_following_move": "フォロー中のアカウントが引っ越したとき、自動フォローを許可する",
-    "setting_changed": "規定の設定と異なっています",
-    "greentext": "引用を緑色で表示",
-    "sensitive_by_default": "はじめから投稿をセンシティブとして設定",
+    "allow_following_move": "フォローしているアカウントが引っ越したとき、引っ越し先を自動でフォローする",
+    "setting_changed": "デフォルトから変更された設定",
+    "greentext": "Meme arrows",
+    "sensitive_by_default": "デフォルトで投稿を閲覧注意として設定",
     "more_settings": "その他の設定",
-    "reply_visibility_self_short": "自分宛のリプライを見る",
-    "reply_visibility_following_short": "フォローしている人に宛てられたリプライを見る",
-    "hide_all_muted_posts": "ミュートした投稿を隠す",
-    "hide_media_previews": "メディアのプレビューを隠す",
+    "reply_visibility_self_short": "自分宛ての返信のみ表示",
+    "reply_visibility_following_short": "フォローしているユーザー宛ての返信のみ表示",
+    "hide_all_muted_posts": "ミュートした投稿を表示しない",
+    "hide_media_previews": "メディアのプレビューを表示しない",
     "word_filter": "単語フィルタ",
     "file_export_import": {
       "errors": {
-        "invalid_file": "これはPleromaの設定をバックアップしたファイルではありません。",
-        "file_slightly_new": "ファイルのマイナーバージョンが異なり、一部の設定が読み込まれないことがあります"
+        "invalid_file": "非対応の形式の設定ファイルです。設定は変更されませんでした。",
+        "file_slightly_new": "設定ファイルのバージョンが異なります。一部の設定は読み込まれないかもしれません",
+        "file_too_new": "互換性エラー: PleromaFEが古すぎます。設定ファイルのバージョン{fileMajor}はこのPleromaFE (バージョン{feMajor})と互換性がありません",
+        "file_too_old": "互換性エラー: 設定ファイルが古すぎます。設定ファイルのバージョン{fileMajor}はこのPleromaFE (バージョン{feMajor})と互換性がありません"
       },
       "restore_settings": "設定をファイルから復元する",
       "backup_settings_theme": "テーマを含む設定をファイルにバックアップする",
@@ -599,8 +703,169 @@
     },
     "save": "変更を保存",
     "hide_shoutbox": "Shoutboxを表示しない",
-    "always_show_post_button": "投稿ボタンを常に表示",
-    "right_sidebar": "サイドバーを右に表示"
+    "always_show_post_button": "投稿ボタンを常に表示する",
+    "right_sidebar": "サイドバーを右側に表示する",
+    "email_language": "このサーバーから受け取るメールの言語",
+    "confirm_dialogs": "以下のとき確認ダイアログを表示する:",
+    "confirm_dialogs_repeat": "ステータスをリピートするとき",
+    "confirm_dialogs_unfollow": "ユーザーのフォローを解除するとき",
+    "confirm_dialogs_block": "ユーザーをブロックするとき",
+    "confirm_dialogs_mute": "ユーザーをミュートするとき",
+    "confirm_dialogs_delete": "投稿を削除するとき",
+    "confirm_dialogs_logout": "ログアウトするとき",
+    "confirm_dialogs_deny_follow": "フォローリクエストを却下するとき",
+    "confirm_dialogs_remove_follower": "フォロワーを解除するとき",
+    "move_account_target": "引っ越し先のアカウント (例: {example})",
+    "move_account_error": "引っ越し中にエラーが発生しました: {error}",
+    "autocomplete_select_first": "オートコンプリートで最初の結果を自動的に選択する",
+    "hide_bot_indication": "bot アカウントであることを示すマークを表示しない",
+    "navbar_column_stretch": "ナビゲーションバーの幅を画面幅に合わせる",
+    "notification_visibility_follow_requests": "フォローリクエスト",
+    "notification_visibility_reports": "通報",
+    "notification_extra_chats": "未読のチャットを表示する",
+    "hide_favorites_description": "お気に入り欄を非公開にする (通知は送信されます)",
+    "conversation_display_tree": "ツリー形式",
+    "max_depth_in_thread": "デフォルトで表示するスレッドの深さ",
+    "mention_link_display": "メンションリンクを",
+    "mention_link_display_short": "常に短く表示する (例: {'@'}hoge)",
+    "mention_link_use_tooltip": "メンションリンクをクリックした時ユーザーカードを表示する",
+    "mention_link_show_avatar": "メンションリンクの横にユーザーのアイコンを表示する",
+    "mention_link_display_full_for_remote": "リモートのユーザーのみすべて表示する (例: {'@'}hoge{'@'}example.org)",
+    "mention_link_display_full": "常にすべて表示する (例: {'@'}hoge{'@'}example.org)",
+    "notification_setting_filters_chrome_push": "Chromeなどのブラウザでは、種類に応じた通知の無効化がプッシュ通知に反映されない場合があります",
+    "hard_reset_value_tooltip": "データベースから設定値を削除し、デフォルト値に戻します",
+    "disable_sticky_headers": "カラムヘッダーを画面上部に固定しない",
+    "column_sizes_notifs": "通知カラム",
+    "conversation_other_replies_button": "「その他の返信」ボタンの位置",
+    "use_websockets": "Websocketを利用してリアルタイムで更新を行う",
+    "mention_link_fade_domain": "メンションのドメイン部分を薄く表示する (例: {'@'}foo{'@'}example.org の {'@'}example.org の部分)",
+    "mention_link_show_avatar_quick": "メンションの横にユーザーアイコンを表示する",
+    "mention_link_bolden_you": "自分宛てのメンションを強調表示する",
+    "user_popover_avatar_action": "ユーザーカード内のユーザーアイコンをクリックした際の挙動",
+    "user_popover_avatar_overlay": "ユーザーカードをユーザーアイコンに被せて表示する",
+    "show_yous": "自分宛てのメンションの横に「(あなた)」と表示する",
+    "preview": "プレビュー",
+    "url": "URL",
+    "conversation_display": "スレッドの表示形式",
+    "column_sizes": "カラム幅",
+    "third_column_mode_none": "表示しない",
+    "column_sizes_content": "コンテンツ",
+    "third_column_mode_notifications": "通知カラムにする",
+    "third_column_mode_postform": "投稿フォームとナビゲーションにする",
+    "conversation_display_linear_quick": "時系列表示",
+    "conversation_display_linear": "時系列形式",
+    "conversation_display_tree_quick": "ツリー表示",
+    "user_popover_avatar_action_open": "プロフィールを表示する",
+    "account_backup": "アカウントのバックアップ",
+    "wordfilter": "ワードフィルター",
+    "column_sizes_sidebar": "サイドバー",
+    "emoji_reactions_scale": "絵文字リアクションの表示倍率",
+    "hide_wordfiltered_statuses": "ワードフィルターによってフィルタリングされたステータスを表示しない",
+    "hide_muted_threads": "ミュートしたスレッドを表示しない",
+    "notification_visibility_polls": "投票結果の確定",
+    "user_popover_avatar_action_zoom": "アイコンを拡大する",
+    "post_look_feel": "投稿の表示形式",
+    "mention_links": "メンションのリンク",
+    "setting_server_side": "この設定はサーバー側に保存され、すべてのセッションとクライアントに影響します",
+    "word_filter_and_more": "ワードフィルターとその他の設定",
+    "notification_extra_announcements": "未読のお知らせを表示する",
+    "notification_extra_follow_requests": "新着のフォローリクエストを表示する",
+    "show_scrollbars": "サイドカラムにスクロールバーを表示する",
+    "third_column_mode": "十分に幅があるとき、三つ目のカラムを",
+    "columns": "カラム",
+    "commit_value": "保存",
+    "commit_value_tooltip": "値は保存されていません。反映するにはこのボタンを押してください",
+    "remove_backup": "削除",
+    "add_backup": "新規バックアップを作成",
+    "account_backup_description": "アカウント情報と投稿のアーカイブをダウンロードできます。開発段階の機能であり、現状、ダウンロードしたデータをインポートすることはできません。",
+    "mute_bot_posts": "BOTアカウントの投稿をミュートする",
+    "auto_update": "自動でタイムラインを更新する",
+    "enable_web_push_always_show_tip": "この設定は、Chromeなどのブラウザで「このサイトはバックグラウンドで更新されました」という通知が表示されることを防止します。その他のブラウザでこの設定を有効化すると、通知が二重で表示されることがあります。",
+    "backup_failed": "バックアップに失敗しました。",
+    "confirm_dialogs_approve_follow": "フォローリクエストを承認するとき",
+    "moved_account": "アカウントの引っ越しが完了しました。",
+    "reset_value": "リセット",
+    "reset_value_tooltip": "編集中の値を破棄します",
+    "hard_reset_value": "デフォルトに戻す",
+    "conversation_other_replies_button_below": "投稿の下",
+    "conversation_other_replies_button_inside": "投稿の中",
+    "add_language": "代替言語を追加",
+    "remove_language": "削除",
+    "account_alias_table_head": "エイリアス",
+    "account_alias": "アカウントエイリアス",
+    "list_aliases_error": "エイリアスの取得中にエラーが発生しました: {error}",
+    "hide_list_aliases_error_action": "閉じる",
+    "remove_alias": "削除",
+    "new_alias_target": "エイリアスを追加 (例: {example})",
+    "added_alias": "エイリアスが追加されました。",
+    "add_alias_error": "エイリアスの追加中にエラーが発生しました: {error}",
+    "move_account": "アカウントの引っ越し",
+    "move_account_notes": "アカウントを引っ越すためには、まず引っ越し先のアカウントにこのアカウントへのエイリアスを追加する必要があります。",
+    "birthday": {
+      "label": "誕生日",
+      "show_birthday": "誕生日を公開する"
+    },
+    "account_privacy": "プライバシー",
+    "posts": "投稿",
+    "user_profiles": "ユーザープロフィール",
+    "primary_language": "第一言語:",
+    "fallback_language": "代替言語 {index}:",
+    "expert_mode": "高度な設定を表示",
+    "account_backup_table_head": "バックアップ",
+    "download_backup": "ダウンロード",
+    "backup_not_ready": "まだ準備中です。",
+    "backup_running": "処理中…{number}件のデータが処理されました。 | 処理中… {number}件のデータが処理されました。",
+    "list_backups_error": "バックアップ一覧の取得に失敗しました: {error}",
+    "added_backup": "バックアップがキューに追加されました。",
+    "add_backup_error": "バックアップの追加に失敗しました: {error}",
+    "user_popover_avatar_action_close": "ユーザーカードを閉じる",
+    "tree_advanced": "高度なナビゲーションボタンを表示する",
+    "tree_fade_ancestors": "スレッド上で祖先にあたるステータスを薄いテキストで表示する",
+    "actor_type_description": "グループとして設定されたアカウントは、メンションのついたステータスを自動的にリピートします。",
+    "actor_type_Person": "通常アカウント",
+    "actor_type_Service": "BOTアカウント",
+    "actor_type_Group": "グループアカウント",
+    "notification_visibility_in_column": "通知カラム(PC)、通知サイドバー(モバイル)に表示する",
+    "notification_setting_annoyance": "通知のカスタマイズ",
+    "notification_setting_unseen_at_top": "未読の通知を最上部に表示する",
+    "enable_web_push_always_show": "プッシュ通知を常に表示する",
+    "hide_scrobbles": "Scrobbleを表示しない",
+    "actor_type": "アカウントタイプ:",
+    "hide_actor_type_indication": "投稿にアカウントタイプ(BOTアカウント、グループアカウントなど)を示すアイコンを表示しない",
+    "notification_show_extra": "その他の通知を通知カラムに表示する",
+    "notification_setting_drawer_marks_as_seen": "モバイルUIで、通知サイドバーを閉じた時すべての通知を既読にする",
+    "notification_setting_ignore_inactionable_seen_tip": "この設定は通知を自動的に既読にするわけではなく、この設定を有効にしてもプッシュ通知などは届きます",
+    "notification_setting_ignore_inactionable_seen": "お気に入りやリピートの通知など、アクション不可な通知を未読として扱わない",
+    "notification_extra_tip": "通知カラムをカスマイズするためのヒントを表示する",
+    "use_at_icon": "メンションリンク内の{'@'}記号を画像にする",
+    "mute_sensitive_posts": "閲覧注意な投稿をミュートする",
+    "units": {
+      "time": {
+        "m": "分",
+        "s": "秒",
+        "h": "時間",
+        "d": "日"
+      }
+    },
+    "hide_scrobbles_after": "これより古いScrobbleを表示しない:",
+    "force_theme_recompilation_debug": "テーマのキャッシュを無効化し、起動の度にコンパイルし直す (デバッグ用)",
+    "scale_and_layout": "インターフェースの表示サイズとレイアウト",
+    "appearance": "見た目",
+    "confirm_new_setting": "設定を適用しますか？",
+    "confirm_new_question": "これで問題ありませんか？10秒間操作がない場合、元の設定に戻ります。",
+    "revert": "元に戻す",
+    "confirm": "適用",
+    "text_size": "フォントサイズ",
+    "text_size_tip2": "{0}以外に設定すると見た目が壊れてしまう場合があります",
+    "emoji_size": "絵文字のサイズ",
+    "navbar_size": "トップバーのサイズ",
+    "panel_header_size": "パネルヘッダーのサイズ",
+    "notification_visibility_statuses": "購読",
+    "text_size_tip": "絶対的な値には{0}を使用してください。{1}はブラウザのデフォルトのフォントサイズを基準にスケールされます。",
+    "visual_tweaks": "細かい外観の変更",
+    "absolute_time_format": "時間の表示に絶対表記を使用する",
+    "absolute_time_format_min_age": "これより古い日時に対してのみ使用する:",
+    "theme_debug": "テーマエンジンが透明度を処理する際に見ているものを表示する (デバッグ用)"
   },
   "time": {
     "day": "{0}日",
@@ -622,7 +887,7 @@
     "month_short": "{0}ヶ月前",
     "months_short": "{0}ヶ月前",
     "now": "たった今",
-    "now_short": "たった今",
+    "now_short": "今",
     "second": "{0}秒",
     "seconds": "{0}秒",
     "second_short": "{0}秒",
@@ -634,23 +899,41 @@
     "year": "{0}年",
     "years": "{0}年",
     "year_short": "{0}年",
-    "years_short": "{0}年"
+    "years_short": "{0}年",
+    "unit": {
+      "seconds_short": "{0}秒",
+      "weeks": "{0} 週間 | {0} 週間",
+      "weeks_short": "{0}週",
+      "years": "{0} 年 | {0} 年",
+      "years_short": "{0}年",
+      "days": "{0} 日 | {0} 日",
+      "hours": "{0} 時間 | {0} 時間",
+      "hours_short": "{0}時間",
+      "minutes": "{0} 分 | {0} 分",
+      "minutes_short": "{0}分",
+      "months": "{0} ヶ月 | {0} ヶ月",
+      "months_short": "{0}ヶ月",
+      "seconds": "{0} 秒 | {0} 秒",
+      "days_short": "{0}日"
+    }
   },
   "timeline": {
     "collapse": "たたむ",
     "conversation": "スレッド",
     "error_fetching": "読み込みがエラーになりました",
-    "load_older": "古いステータス",
-    "no_retweet_hint": "投稿を「フォロワーのみ」または「ダイレクト」にすると、リピートできなくなります",
+    "load_older": "古いステータスを読み込む",
+    "no_retweet_hint": "公開範囲が「フォロワーのみ」または「ダイレクト」の投稿はリピートできません",
     "repeated": "リピート",
     "show_new": "読み込み",
     "up_to_date": "最新",
     "no_more_statuses": "これで終わりです",
     "no_statuses": "ステータスはありません",
     "reload": "再読み込み",
-    "error": "タイムラインの読み込みに失敗しました: {0}",
+    "error": "タイムラインの読み込み中にエラーが発生しました: {0}",
     "socket_reconnected": "リアルタイム接続が確立されました",
-    "socket_broke": "コード{0}によりリアルタイム接続が切断されました"
+    "socket_broke": "リアルタイム接続が切断されました: コード{0}",
+    "quick_view_settings": "表示の簡易設定",
+    "quick_filter_settings": "フィルターの簡易設定"
   },
   "status": {
     "favorites": "お気に入り",
@@ -659,8 +942,8 @@
     "pin": "プロフィールにピン留め",
     "unpin": "プロフィールのピン留めを外す",
     "pinned": "ピン留め",
-    "delete_confirm": "本当にこのステータスを削除してもよろしいですか？",
-    "reply_to": "返信",
+    "delete_confirm": "本当に削除しますか？",
+    "reply_to": "返信先:",
     "replies_list": "返信:",
     "mute_conversation": "スレッドをミュート",
     "unmute_conversation": "スレッドのミュートを解除",
@@ -679,19 +962,63 @@
     "unbookmark": "ブックマーク解除",
     "bookmark": "ブックマーク",
     "mentions": "メンション",
-    "you": "（あなた）",
-    "plus_more": "ほか{number}件"
+    "you": "(あなた)",
+    "plus_more": "ほか{number}件",
+    "delete_confirm_title": "削除の確認",
+    "ancestor_follow": "このステータスについた{numReplies}件の返信をすべて表示 | このステータスについた{numReplies}件の返信をすべて表示",
+    "invisible_quote": "引用先のステータスが存在しません: {link}",
+    "ancestor_follow_with_icon": "{icon} {text}",
+    "show_all_conversation_with_icon": "{icon} {text}",
+    "delete_error": "ステータスの削除中にエラーが発生しました: {0}",
+    "delete_confirm_accept_button": "削除する",
+    "delete_confirm_cancel_button": "削除しない",
+    "collapse_attachments": "ファイルをたたむ",
+    "show_all_attachments": "すべてのファイルを表示",
+    "hide_attachment": "ファイルを隠す",
+    "reaction_count_label": "{num}人がリアクションしました | {num}人がリアクションしました",
+    "repeat_confirm_accept_button": "リピートする",
+    "repeat_confirm_cancel_button": "リピートしない",
+    "repeat_confirm": "本当にリピートしますか？",
+    "edit": "ステータスを編集",
+    "edited_at": "(最終編集: {time})",
+    "repeat_confirm_title": "リピートの確認",
+    "many_attachments": "この投稿には{number}件のファイルが添付されています",
+    "remove_attachment": "ファイルを削除",
+    "attachment_stop_flash": "Flashプレーヤーを停止",
+    "move_up": "ファイルを左へ移動",
+    "move_down": "ファイルを右へ移動",
+    "thread_follow": "このスレッドの残りを表示 (全部で{numStatus}件の投稿があります) | このスレッドの残りを表示 (全部で{numStatus}件の投稿があります)",
+    "thread_follow_with_icon": "{icon} {text}",
+    "hide_quote": "引用先を隠す",
+    "display_quote": "引用先を表示",
+    "show_only_conversation_under_this": "このステータスへの返信のみを表示",
+    "show_all_conversation": "スレッドの全体を表示 ({numStatus}件のステータス) | スレッドの全体を表示 ({numStatus}件のステータス)",
+    "replies_list_with_others": "返信 (+{numReplies}人): | 返信 (+{numReplies}人):",
+    "more_actions": "その他のアクション",
+    "thread_show_full": "このスレッドをすべて表示 (全部で{depth}層、{numStatus}件の投稿があります) | このスレッドを全て表示 (全部で{depth}層、{numStatus}件の投稿があります)",
+    "thread_show_full_with_icon": "{icon} {text}",
+    "show_attachment_in_modal": "メディアビューアで開く",
+    "show_attachment_description": "メディアの説明文をポップアップで表示 (全文を読むにはメディアを開いてください)",
+    "thread_hide": "このスレッドをたたむ",
+    "thread_show": "このスレッドを開く",
+    "open_gallery": "メディアビューアで開く",
+    "status_history": "編集履歴",
+    "sensitive_muted": "閲覧注意な投稿のためミュートされています",
+    "load_error": "投稿の読み込みに失敗しました: {error}",
+    "loading": "読み込み中…",
+    "quotes": "引用",
+    "bot_muted": "BOTによる投稿のためミュートされています"
   },
   "user_card": {
-    "approve": "受け入れ",
+    "approve": "承認",
     "block": "ブロック",
     "blocked": "ブロックしています！",
-    "deny": "お断り",
+    "deny": "拒否",
     "favorites": "お気に入り",
     "follow": "フォロー",
-    "follow_sent": "リクエストを送りました！",
-    "follow_progress": "リクエストしています…",
-    "follow_unfollow": "フォローをやめる",
+    "follow_sent": "リクエスト完了！",
+    "follow_progress": "リクエスト中…",
+    "follow_unfollow": "フォロー解除",
     "followees": "フォロー",
     "followers": "フォロワー",
     "following": "フォローしています！",
@@ -700,7 +1027,7 @@
     "media": "メディア",
     "mention": "メンション",
     "mute": "ミュート",
-    "muted": "ミュートしています",
+    "muted": "ミュート済み",
     "per_day": "/日",
     "remote_follow": "リモートフォロー",
     "report": "通報",
@@ -720,16 +1047,17 @@
       "grant_moderator": "モデレーター権限を付与",
       "revoke_moderator": "モデレーター権限を解除",
       "activate_account": "アカウントをアクティブにする",
-      "deactivate_account": "アカウントをアクティブでなくする",
+      "deactivate_account": "アカウントを無効化する",
       "delete_account": "アカウントを削除",
-      "force_nsfw": "すべての投稿をNSFWにする",
-      "strip_media": "投稿からメディアを除去する",
-      "force_unlisted": "投稿を未収載にする",
-      "sandbox": "投稿をフォロワーのみにする",
-      "disable_remote_subscription": "他のインスタンスからフォローされないようにする",
-      "disable_any_subscription": "フォローされないようにする",
-      "quarantine": "他のインスタンスからの投稿を止める",
-      "delete_user": "ユーザーを削除"
+      "force_nsfw": "すべての投稿を閲覧注意にする",
+      "strip_media": "すべての投稿からメディアを除去する",
+      "force_unlisted": "すべての投稿をアンリステッドにする",
+      "sandbox": "すべての投稿をフォロワー限定にする",
+      "disable_remote_subscription": "他のインスタンスからフォローできないようにする",
+      "disable_any_subscription": "フォローできないようにする",
+      "quarantine": "投稿を連合しないようにする",
+      "delete_user": "ユーザーを削除",
+      "delete_user_data_and_deactivate_confirmation": "このアカウントのデータを永久に削除し、アカウントを無効化します。本当によろしいですね？"
     },
     "roles": {
       "moderator": "モデレーター",
@@ -738,7 +1066,7 @@
     "show_repeats": "リピートを見る",
     "hide_repeats": "リピートを隠す",
     "message": "メッセージ",
-    "hidden": "隠す",
+    "hidden": "非公開",
     "bot": "bot",
     "highlight": {
       "solid": "背景を単色にする",
@@ -746,21 +1074,56 @@
       "side": "端に線を付ける",
       "disabled": "強調しない"
     },
-    "edit_profile": "プロフィールを編集"
+    "edit_profile": "プロフィールを編集",
+    "deny_confirm_accept_button": "拒否する",
+    "note_blank": "(なし)",
+    "edit_note_cancel": "キャンセル",
+    "remove_follower_confirm_cancel_button": "解除しない",
+    "block_confirm_title": "ブロックの確認",
+    "block_confirm": "本当に{user}をブロックしますか？",
+    "birthday": "誕生日: {birthday}",
+    "edit_note": "メモを編集",
+    "edit_note_apply": "適用",
+    "note": "メモ",
+    "remove_follower_confirm": "本当に{user}からのフォローを解除しますか？",
+    "follow_cancel": "リクエストを取り消す",
+    "approve_confirm_title": "承認の確認",
+    "remove_follower": "フォロワーを解除",
+    "remove_follower_confirm_title": "フォロワー解除の確認",
+    "approve_confirm_accept_button": "承認する",
+    "deny_confirm": "本当に{user}からのフォローリクエストを拒否しますか？",
+    "deny_confirm_cancel_button": "拒否しない",
+    "mute_confirm_cancel_button": "ミュートしない",
+    "approve_confirm_cancel_button": "承認しない",
+    "approve_confirm": "本当に{user}からのフォローリクエストを承認しますか？",
+    "unfollow_confirm_title": "フォロー解除の確認",
+    "unfollow_confirm_cancel_button": "解除しない",
+    "mute_confirm_accept_button": "ミュートする",
+    "mute_confirm": "本当に{user}をミュートしますか？",
+    "block_confirm_accept_button": "ブロックする",
+    "block_confirm_cancel_button": "ブロックしない",
+    "deny_confirm_title": "拒否の確認",
+    "unfollow_confirm": "本当に{user}のフォローを解除しますか？",
+    "unfollow_confirm_accept_button": "解除する",
+    "remove_follower_confirm_accept_button": "解除する",
+    "mute_confirm_title": "ミュートの確認",
+    "deactivated": "無効化済み",
+    "group": "グループ",
+    "mute_duration_prompt": "ミュート期間 (0で無期限):"
   },
   "user_profile": {
     "timeline_title": "ユーザータイムライン",
-    "profile_does_not_exist": "申し訳ない。このプロフィールは存在しません。",
-    "profile_loading_error": "申し訳ない。プロフィールの読み込みがエラーになりました。"
+    "profile_does_not_exist": "このプロフィールは存在しません。",
+    "profile_loading_error": "プロフィールの読み込み中にエラーが発生しました。"
   },
   "user_reporting": {
-    "title": "通報する: {0}",
+    "title": "{0}を通報する",
     "add_comment_description": "この通報は、あなたのインスタンスのモデレーターに送られます。このアカウントを通報する理由を説明することができます:",
     "additional_comments": "追加のコメント",
-    "forward_description": "このアカウントは他のサーバーに置かれています。この通報のコピーをリモートのサーバーに送りますか？",
-    "forward_to": "転送する: {0}",
+    "forward_description": "これは他のインスタンスのアカウントです。この通報のコピーをリモートのインスタンスに送りますか？",
+    "forward_to": "{0}に転送する",
     "submit": "送信",
-    "generic_error": "あなたのリクエストを処理しようとしましたが、エラーになりました。"
+    "generic_error": "リクエストの処理中にエラーが発生しました。"
   },
   "who_to_follow": {
     "more": "詳細",
@@ -774,15 +1137,17 @@
     "user_settings": "ユーザー設定",
     "bookmark": "ブックマーク",
     "reject_follow_request": "フォローリクエストを拒否",
-    "accept_follow_request": "フォローリクエストを許可",
-    "add_reaction": "リアクションを追加"
+    "accept_follow_request": "フォローリクエストを承認",
+    "add_reaction": "リアクションを追加",
+    "toggle_mute": "ミュートされた通知を開く/閉じる",
+    "toggle_expand": "この投稿を開く/閉じる"
   },
   "upload": {
     "error": {
       "base": "アップロードに失敗しました。",
-      "file_too_big": "ファイルが大きすぎます [{filesize} {filesizeunit} / {allowedsize} {allowedsizeunit}]",
-      "default": "しばらくしてから試してください",
-      "message": "アップロードに失敗: {0}"
+      "file_too_big": "ファイルが大きすぎます [{filesize}{filesizeunit} / {allowedsize}{allowedsizeunit}]",
+      "default": "時間を置いて再試行してください",
+      "message": "アップロードに失敗しました: {0}"
     },
     "file_size_units": {
       "B": "B",
@@ -793,11 +1158,13 @@
     }
   },
   "search": {
-    "people": "人々",
+    "people": "ユーザー",
     "hashtags": "ハッシュタグ",
     "person_talking": "{count} 人が話しています",
     "people_talking": "{count} 人が話しています",
-    "no_results": "見つかりませんでした"
+    "no_results": "見つかりませんでした",
+    "load_more": "さらに読み込む",
+    "no_more_results": "結果は以上です"
   },
   "password_reset": {
     "forgot_password": "パスワードを忘れましたか？",
@@ -817,23 +1184,25 @@
       "federation": "連合",
       "simple": {
         "media_nsfw_desc": "このインスタンスでは、以下のインスタンスからの投稿に対して、メディアを閲覧注意に設定します:",
-        "media_nsfw": "メディアを閲覧注意に設定",
+        "media_nsfw": "強制閲覧注意",
         "media_removal_desc": "このインスタンスでは、以下のインスタンスからの投稿に対して、メディアを除去します:",
         "media_removal": "メディア除去",
-        "ftl_removal": "「既知のネットワーク」タイムラインから除外",
-        "ftl_removal_desc": "このインスタンスでは、以下のインスタンスを「既知のネットワーク」タイムラインから除外します:",
+        "ftl_removal": "「すべてのネットワーク」タイムラインから除外",
+        "ftl_removal_desc": "このインスタンスでは、以下のインスタンスを「すべてのネットワーク」タイムラインから除外します:",
         "quarantine_desc": "このインスタンスでは、以下のインスタンスに対して公開投稿のみを送信します:",
         "quarantine": "検疫",
         "reject_desc": "このインスタンスでは、以下のインスタンスからのメッセージを受け付けません:",
         "accept_desc": "このインスタンスでは、以下のインスタンスからのメッセージのみを受け付けます:",
         "accept": "許可",
-        "simple_policies": "インスタンス固有のポリシー",
-        "reject": "拒否"
+        "simple_policies": "インスタンスに対するポリシー",
+        "reject": "拒否",
+        "instance": "インスタンス",
+        "reason": "理由"
       },
       "mrf_policies": "有効なMRFポリシー",
       "keyword": {
-        "replace": "置き換え",
-        "ftl_removal": "「接続しているすべてのネットワーク」タイムラインから除外",
+        "replace": "置換",
+        "ftl_removal": "「すべてのネットワーク」タイムラインから除外",
         "keyword_policies": "キーワードポリシー",
         "is_replaced_by": "→",
         "reject": "拒否"
@@ -847,8 +1216,8 @@
   "file_type": {
     "file": "ファイル",
     "image": "画像",
-    "video": "ビデオ",
-    "audio": "オーディオ"
+    "video": "動画",
+    "audio": "音声"
   },
   "remote_user_resolver": {
     "error": "見つかりませんでした。",
@@ -865,7 +1234,7 @@
     "empty_chat_list_placeholder": "チャットはありません。新規チャットのボタンを押して始めましょう！",
     "error_sending_message": "メッセージの送信に失敗しました。",
     "error_loading_chat": "チャットの読み込みに失敗しました。",
-    "delete_confirm": "このメッセージを本当に消してもいいですか？",
+    "delete_confirm": "本当にこのメッセージを削除しますか？",
     "more": "もっと見る",
     "empty_message_error": "メッセージを入力して下さい",
     "new": "新規チャット",
@@ -879,5 +1248,221 @@
     "unmute": "ミュート解除",
     "mute_progress": "ミュート中…",
     "mute": "ミュート"
+  },
+  "admin_dash": {
+    "window_title": "管理者設定",
+    "nodb": {
+      "text": "{property}が{value}に設定されるよう、設定ファイルを編集する必要があります。詳しくは{documentation}を確認してください。",
+      "documentation": "ドキュメント",
+      "text2": "ほとんどの設定項目は利用できません。",
+      "heading": "データベースへの設定の保存は無効化されています"
+    },
+    "captcha": {
+      "native": "ネイティブ",
+      "kocaptcha": "KoCaptcha"
+    },
+    "instance": {
+      "restrict": {
+        "header": "匿名ユーザーへのアクセス制限",
+        "profiles": "ユーザープロフィールへのアクセス",
+        "timelines": "タイムラインへのアクセス",
+        "activities": "ステータスへのアクセス",
+        "description": "この設定は特定のAPIへのアクセスを制御します。デフォルトでは、インスタンスの公開設定を反映します。一部の設定は、変更すると予期しない動作を引き起こすことがあります(例: ユーザープロフィールへのアクセスを禁止すると、投稿にユーザーの情報が表示されなくなります)。"
+      },
+      "instance": "インスタンス情報",
+      "registrations": "ユーザー登録",
+      "access": "インスタンスへのアクセス",
+      "captcha_header": "CAPTCHA",
+      "kocaptcha": "KoCaptchaの設定"
+    },
+    "frontend": {
+      "available_frontends": "インストール可能なフロントエンド",
+      "success_installing_frontend": "{version} は正常にインストールされました",
+      "failure_installing_frontend": "{version} のインストールに失敗しました: {reason}",
+      "repository": "リポジトリのURL",
+      "versions": "利用可能なバージョン",
+      "build_url": "ダウンロードURL",
+      "reinstall": "再インストール",
+      "install": "インストール",
+      "install_version": "バージョン {version} をインストール",
+      "is_default": "(デフォルト)",
+      "is_default_custom": "(デフォルト、バージョン: {version})",
+      "default_frontend": "デフォルトのフロントエンド",
+      "more_install_options": "その他のインストールオプション",
+      "wip_notice": "このセクションは開発段階です。バックエンド側の実装が未完成であるため、一部の機能は欠けています。",
+      "set_default": "デフォルトに設定",
+      "set_default_version": "バージョン {version} をデフォルトに設定",
+      "default_frontend_tip": "デフォルトのフロントエンドはすべてのユーザーに表示されます。現時点で、ユーザーがフロントエンドを選択する方法はありません。デフォルトのフロントエンドをPleromaFE以外に設定した場合、インスタンスの設定を変更するには古いAdminFEを使用する必要があります。"
+    },
+    "temp_overrides": {
+      ":pleroma": {
+        ":instance": {
+          ":public": {
+            "label": "インスタンスを公開する",
+            "description": "この設定を無効化すると、すべてのAPIの使用にログインが必要になります。これにより、匿名ユーザーは公開タイムラインとすべてのネットワークにアクセスできなくなります。"
+          },
+          ":background_image": {
+            "description": "(主にPleromaFEで使用される)背景画像",
+            "label": "背景画像"
+          },
+          ":limit_to_local_content": {
+            "description": "他インスタンスの情報の検索を、未ログインのユーザー(デフォルト)もしくはすべてのユーザーに対して制限します",
+            "label": "検索をローカルのみに制限する"
+          },
+          ":description_limit": {
+            "description": "ファイルの説明欄に対する文字数制限",
+            "label": "制限"
+          }
+        }
+      }
+    },
+    "wip_notice": "この管理者用設定画面は試験段階であり、未完成です。{adminFeLink}。",
+    "reset_all": "すべてリセット",
+    "commit_all": "すべて保存",
+    "old_ui_link": "これまでの管理者画面にはここからアクセスできます",
+    "tabs": {
+      "limits": "制限",
+      "instance": "インスタンス",
+      "frontends": "フロントエンド",
+      "emoji": "絵文字"
+    },
+    "limits": {
+      "arbitrary_limits": "任意の制限",
+      "posts": "投稿の制限",
+      "uploads": "ファイルの制限",
+      "profile_fields": "追加情報欄の制限",
+      "user_uploads": "プロフィール画像の制限",
+      "users": "ユーザープロフィールの設定"
+    },
+    "emoji": {
+      "create_pack": "パックを作成",
+      "delete_pack": "パックを削除",
+      "create": "作成",
+      "emoji_packs": "絵文字パック",
+      "remote_packs": "リモートのパック",
+      "emoji_pack": "絵文字パック",
+      "edit_pack": "パックを編集",
+      "homepage": "ホームページ",
+      "save": "保存",
+      "save_meta": "メタデータを保存",
+      "shortcode": "ショートコード",
+      "filename": "ファイル名",
+      "delete_confirm": "{0}を削除してもよろしいですか？",
+      "download_pack": "パックをダウンロード",
+      "downloading_pack": "{0}をダウンロード中",
+      "download": "ダウンロード",
+      "editing": "{0}を編集中",
+      "error": "エラー: {0}",
+      "delete": "削除",
+      "global_actions": "グローバルアクション",
+      "reload": "絵文字を再読み込み",
+      "new_pack_name": "新規パック名",
+      "fallback_sha256": "代替ソースのSHA256ハッシュ",
+      "description": "説明",
+      "fallback_src": "代替ソース",
+      "share": "共有",
+      "add_file": "ファイルを追加",
+      "adding_new": "新規絵文字を追加",
+      "revert_meta": "メタデータを元に戻す",
+      "revert": "元に戻す",
+      "new_shortcode": "ショートコード (任意)",
+      "new_filename": "ファイル名 (任意)",
+      "files": "ファイル",
+      "delete_title": "削除しますか？",
+      "metadata_changed": "変更されたメタデータ",
+      "emoji_changed": "保存されていない変更点があります。ハイライトされた絵文字を確認してください",
+      "importFS": "ファイルシステムから絵文字をインポート",
+      "do_list": "一覧を取得",
+      "remote_pack_instance": "リモートパックを取得するインスタンス",
+      "download_as_name": "パック名",
+      "download_as_name_full": "名前を入力 (空にするとリモートの名前を使用)",
+      "replace_warning": "続行するとローカルにある同名のパックが上書きされます"
+    }
+  },
+  "lists": {
+    "search": "ユーザーを検索",
+    "update_title": "リスト名を保存",
+    "really_delete": "本当に削除しますか？",
+    "error": "リストの処理中にエラーが発生しました: {0}",
+    "lists": "リスト",
+    "new": "新規リスト",
+    "save": "変更を保存",
+    "delete": "リストを削除",
+    "editing_list": "{listTitle}の編集",
+    "creating_list": "新規リストの作成",
+    "create": "作成",
+    "title": "リスト名",
+    "following_only": "フォローしているユーザーのみ表示",
+    "manage_lists": "リストの管理",
+    "manage_members": "メンバーの管理",
+    "add_members": "メンバーの追加",
+    "remove_from_list": "リストから削除",
+    "add_to_list": "リストに追加",
+    "is_in_list": "追加済み"
+  },
+  "update": {
+    "update_bugs": "何か問題を見つけたら{pleromaGitlab}にて報告してください。開発中のバージョンにて念入りに確認はしましたが、様々なものが変更されているため、我々が見逃したものがあるかもしれません。バグの報告や、Pleroma/PleromaFEを改善するための提案やフィードバックは大歓迎です。",
+    "update_changelog_here": "変更履歴",
+    "update_changelog": "全ての変更点は{theFullChangelog}を参照してください。",
+    "big_update_content": "久しぶりのリリースですので、今までと異なるところがあるかもしれません。",
+    "update_bugs_gitlab": "Pleroma GitLab",
+    "big_update_title": ""
+  },
+  "report": {
+    "reported_statuses": "通報されたステータス:",
+    "notes": "メモ:",
+    "state": "状態:",
+    "state_open": "未解決",
+    "reporter": "通報者:",
+    "state_resolved": "解決済み",
+    "reported_user": "被通報者:",
+    "state_closed": "問題なし"
+  },
+  "unicode_domain_indicator": {
+    "tooltip": "このドメインには非ASCII文字が含まれています。"
+  },
+  "announcements": {
+    "page_header": "お知らせ",
+    "title": "お知らせ",
+    "mark_as_read_action": "既読にする",
+    "post_form_header": "お知らせを投稿",
+    "post_placeholder": "お知らせの内容を入力してください…",
+    "post_action": "投稿",
+    "post_error": "エラー: {error}",
+    "close_error": "閉じる",
+    "delete_action": "削除",
+    "submit_edit_action": "完了",
+    "cancel_edit_action": "キャンセル",
+    "published_time_display": "{time} に公開",
+    "start_time_display": "{time}から開始",
+    "end_time_display": "{time}に終了",
+    "edit_action": "編集",
+    "start_time_prompt": "開始日時: ",
+    "end_time_prompt": "終了日時: ",
+    "all_day_prompt": "終日",
+    "inactive_message": "このお知らせは無効です"
+  },
+  "splash": {
+    "loading": "読み込み中…",
+    "theme": "テーマを適用中です。お待ちください…",
+    "instance": "インスタンス情報を取得中…",
+    "settings": "設定を適用中…",
+    "fun_2": "ゆっくりしていってね！",
+    "error": "問題が発生しました",
+    "fun_3": "( ˘ω˘)ｽﾔｧ…",
+    "almost": "少女祈祷中…",
+    "fun_4": "俺のPleromaが火を吹くぜ！"
+  },
+  "bookmark_folders": {
+    "emoji": "絵文字",
+    "update_folder": "変更を保存",
+    "really_delete": "本当にフォルダを削除しますか？",
+    "name": "フォルダ名",
+    "editing_folder": "{folderName}フォルダの編集",
+    "creating_folder": "新規ブックマークフォルダの作成",
+    "create": "フォルダを作成",
+    "delete": "フォルダを削除",
+    "error": "ブックマークフォルダの処理中にエラーが発生しました: {0}",
+    "new": "新規フォルダ"
   }
 }
diff --git a/src/i18n/ko.json b/src/i18n/ko.json
index 657bb0791..003878dbf 100644
--- a/src/i18n/ko.json
+++ b/src/i18n/ko.json
@@ -75,7 +75,11 @@
     "enter_two_factor_code": "2단계인증 코드를 입력하십시오",
     "enter_recovery_code": "복구 코드를 입력하십시오",
     "authentication_code": "인증 코드",
-    "hint": "로그인해서 대화에 참여"
+    "hint": "로그인해서 대화에 참여",
+    "logout_confirm_title": "로그아웃 확인",
+    "logout_confirm": "정말 로그아웃 하시겠습니까?",
+    "logout_confirm_accept_button": "로그아웃",
+    "logout_confirm_cancel_button": "로그아웃 안 함"
   },
   "nav": {
     "about": "인스턴스 소개",
@@ -104,7 +108,9 @@
     "edit_finish": "편집 종료",
     "mobile_notifications_close": "알림 닫기",
     "mobile_sidebar": "모바일 사이드바 토글",
-    "announcements": "공지사항"
+    "announcements": "공지사항",
+    "search_close": "검색 바 닫기",
+    "mobile_notifications_mark_as_seen": "모두 읽음으로 표시"
   },
   "notifications": {
     "broken_favorite": "알 수 없는 게시물입니다, 검색합니다…",
@@ -120,7 +126,13 @@
     "error": "알림 불러오기 실패: {0}",
     "follow_request": "팔로우 요청",
     "submitted_report": "신고 내용을 전송함",
-    "poll_ended": "투표가 끝남"
+    "poll_ended": "투표가 끝남",
+    "unread_follow_requests": "{num}개의 새 팔로우 요청 | {num}개의 새 팔로우 요청",
+    "configuration_tip": "{theSettings}에서 어떻게 보이는지 바꿀 수 있습니다. {dismiss}",
+    "configuration_tip_settings": "설정",
+    "configuration_tip_dismiss": "다시 보지 않기",
+    "unread_announcements": "{num}개의 읽지 않은 공지사항 | {num}개의 읽지 않은 공지사항",
+    "unread_chats": "{num}개의 읽지 않은 채팅 | {num}개의 읽지 않은 채팅"
   },
   "post_status": {
     "new_status": "새 게시물 게시",
@@ -158,7 +170,11 @@
     "edit_status": "수정",
     "edit_remote_warning": "수정 기능이 없는 다른 인스턴스에서는 수정한 사항이 반영되지 않을 수 있습니다.",
     "post": "게시",
-    "direct_warning_to_first_only": "맨 앞에 멘션한 사용자들에게만 보여집니다."
+    "direct_warning_to_first_only": "맨 앞에 멘션한 사용자들에게만 보여집니다.",
+    "content_type_selection": "게시물 형태",
+    "scope_notice_dismiss": "알림 닫기",
+    "reply_option": "이 게시물에 답글",
+    "quote_option": "이 게시물을 인용"
   },
   "registration": {
     "bio": "소개",
@@ -175,7 +191,9 @@
       "email_required": "공백으로 둘 수 없습니다",
       "password_required": "공백으로 둘 수 없습니다",
       "password_confirmation_required": "공백으로 둘 수 없습니다",
-      "password_confirmation_match": "패스워드와 일치해야 합니다"
+      "password_confirmation_match": "패스워드와 일치해야 합니다",
+      "birthday_required": "공백으로 둘 수 없습니다",
+      "birthday_min_age": "{date} 또는 그 이전 출생만 가능합니다"
     },
     "fullname_placeholder": "예: 김례인",
     "username_placeholder": "예: lain",
@@ -185,7 +203,9 @@
     "reason": "가입하려는 이유",
     "reason_placeholder": "이 인스턴스는 수동으로 가입을 승인하고 있습니다.\n왜 가입하고 싶은지 관리자에게 알려주세요.",
     "register": "가입",
-    "email_language": "무슨 언어로 이메일을 받길 원하시나요?"
+    "email_language": "무슨 언어로 이메일을 받길 원하시나요?",
+    "birthday": "생일:",
+    "birthday_optional": "생일 (선택):"
   },
   "settings": {
     "attachmentRadius": "첨부물",
@@ -383,7 +403,8 @@
         "highlight": "강조 요소",
         "pressed": "눌렸을 때",
         "toggled": "토글됨",
-        "tabs": "탭"
+        "tabs": "탭",
+        "underlay": "밑배경"
       },
       "radii": {
         "_tab_label": "둥글기"
@@ -546,7 +567,7 @@
     "discoverable": "검색 결과나 다른 서비스들에서 이 계정을 찾을 수 있도록 허용",
     "pad_emoji": "에모지를 선택창에서 고를 때 띄어쓰기를 집어넣기",
     "wordfilter": "단어 필터",
-    "word_filter_and_more": "단어 필터 그리고 더보기...",
+    "word_filter_and_more": "단어 필터 및 기타 설정...",
     "accent": "강조",
     "hide_media_previews": "미디어 미리보기 숨기기",
     "max_thumbnails": "게시물 하나 당 최대로 보여질 섬네일 개수 (비워두면 제한을 두지 않습니다)",
@@ -652,7 +673,37 @@
     "post_status_content_type": "게시물 내용 형식",
     "list_aliases_error": "별칭을 가져오는 중 에러 발생: {error}",
     "add_alias_error": "별칭을 추가하는 중 에러 발생: {error}",
-    "mention_link_show_avatar_quick": "멘션 옆에 유저 프로필 사진을 보임"
+    "mention_link_show_avatar_quick": "멘션 옆에 유저 프로필 사진을 보임",
+    "backup_running": "백업 중입니다, {number}개 처리 완료. | 백업 중입니다, {number}개 처리 완료.",
+    "confirm_dialogs": "하기 전에 다시 물어보기",
+    "autocomplete_select_first": "자동완성이 가능하면 자동으로 첫 번째 후보를 선택",
+    "backup_failed": "백업에 실패했습니다.",
+    "emoji_reactions_scale": "리액션 크기",
+    "birthday": {
+      "label": "생일",
+      "show_birthday": "내 생일 보여주기"
+    },
+    "add_language": "보조 언어 추가",
+    "confirm_dialogs_repeat": "리핏",
+    "confirm_dialogs_unfollow": "언팔로우",
+    "confirm_dialogs_block": "차단",
+    "confirm_dialogs_mute": "뮤트",
+    "confirm_dialogs_delete": "게시물 삭제",
+    "confirm_dialogs_approve_follow": "팔로워 승인",
+    "confirm_dialogs_deny_follow": "팔로워 거절",
+    "confirm_dialogs_remove_follower": "팔로워 제거",
+    "remove_language": "삭제",
+    "primary_language": "주 언어:",
+    "fallback_language": "보조 언어 {index}:",
+    "confirm_dialogs_logout": "로그아웃",
+    "url": "URL",
+    "preview": "미리보기",
+    "commit_value": "저장",
+    "commit_value_tooltip": "값이 저장되지 않았습니다, 버튼을 눌러 변경사항을 반영하세요",
+    "reset_value": "초기화",
+    "reset_value_tooltip": "변경사항 초기화",
+    "hard_reset_value": "완전 초기화",
+    "hard_reset_value_tooltip": "스토리지에서 설정을 제거하고, 기본값을 사용하도록 강제합니다"
   },
   "timeline": {
     "collapse": "접기",
@@ -669,7 +720,8 @@
     "no_more_statuses": "새 게시물 없음",
     "socket_reconnected": "실시간 연결 됨",
     "socket_broke": "실시간 연결이 끊어짐: CloseEvent 코드 {0}",
-    "quick_filter_settings": "빠른 필터 설정"
+    "quick_filter_settings": "빠른 필터 설정",
+    "quick_view_settings": "빠른 뷰 설정"
   },
   "user_card": {
     "approve": "승인",
@@ -735,7 +787,38 @@
       "striped": "줄무늬 배경",
       "solid": "단색 배경",
       "side": "옆트임"
-    }
+    },
+    "approve_confirm_title": "승인 확인",
+    "approve_confirm_accept_button": "승인",
+    "approve_confirm_cancel_button": "승인 안 함",
+    "approve_confirm": "{user}의 팔로우 요청을 승인할까요?",
+    "block_confirm_title": "차단 확인",
+    "note": "노트",
+    "unfollow_confirm": "정말 {user}를 팔로우 해제하시겠습니까?",
+    "unfollow_confirm_accept_button": "팔로우 해제",
+    "unfollow_confirm_cancel_button": "취소",
+    "remove_follower_confirm_title": "팔로워 삭제 확인",
+    "remove_follower_confirm_cancel_button": "냅두기",
+    "remove_follower_confirm_accept_button": "치우기",
+    "edit_note_cancel": "취소",
+    "birthday": "{birthday}에 태어남",
+    "edit_note": "노트 수정",
+    "edit_note_apply": "적용",
+    "deny_confirm_cancel_button": "취소",
+    "unfollow_confirm_title": "팔로우 해제 확인",
+    "mute_confirm_accept_button": "뮤트",
+    "remove_follower_confirm": "정말 {user}를 팔로워에서 치울까요?",
+    "deny_confirm_accept_button": "거절",
+    "mute_confirm_title": "뮤트 확인",
+    "mute_confirm": "정말 {user}를 뮤트할까요?",
+    "block_confirm_cancel_button": "취소",
+    "deny_confirm_title": "거절 확인",
+    "block_confirm": "정말 {user}를 차단할까요?",
+    "block_confirm_accept_button": "차단",
+    "mute_confirm_cancel_button": "취소",
+    "mute_duration_prompt": "이 사용자를 뮤트할 시간 (0으로 두면 무한히):",
+    "deny_confirm": "{user}의 팔로 요청을 거절할까요?",
+    "note_blank": "(없음)"
   },
   "user_profile": {
     "timeline_title": "사용자 타임라인",
@@ -755,7 +838,10 @@
     "add_reaction": "반응 추가",
     "accept_follow_request": "팔로우 요청 승인",
     "reject_follow_request": "팔로우 요청 거절",
-    "bookmark": "북마크"
+    "bookmark": "북마크",
+    "autocomplete_available": "{number}개의 결과가 있습니다. 위 또는 아래 화살표 키로 탐색할 수 있습니다. | {number}개의 결과가 있습니다. 위 또는 아래 화살표 키로 탐색할 수 있습니다.",
+    "toggle_expand": "알림을 펼치거나 접어서 전체 게시물을 보기",
+    "toggle_mute": "알림을 펼치거나 접어서 뮤트한 내용 보기"
   },
   "upload": {
     "error": {
@@ -801,7 +887,8 @@
       "symbols": "기호"
     },
     "keep_open": "열린 채로 두기",
-    "regional_indicator": "지역 표시기 {letter}"
+    "regional_indicator": "지역 표시기 {letter}",
+    "unpacked": "미분류 에모지"
   },
   "polls": {
     "add_poll": "투표를 추가",
@@ -1010,7 +1097,8 @@
     "update_changelog_here": "변경 내역",
     "update_changelog": "무엇이 바뀌었는지 자세히 알아보시려면, {theFullChangelog}을 참조하세요.",
     "big_update_content": "저희가 한동안 릴리즈를 안 해서, 익숙하셨던 생김새나 경험과 많이 달라졌을 수 있습니다.",
-    "update_bugs": "저희가 비록 테스트를 많이 하고 직접 개발 버전을 쓰기도 하지만, 많이 바꾸기도 했고, 몇몇 가지 놓친 점들이 있을 터이니, 사용하면서 불편한 점이나 문제는 {pleromaGitlab}에 제보해주시면 감사하겠습니다. 저희는 겪으신 문제점이나 Pleroma와 Pleroma-FE에 대한 피드백과 제안을 환영합니다."
+    "update_bugs": "저희가 비록 테스트를 많이 하고 직접 개발 버전을 쓰기도 하지만, 많이 바꾸기도 했고, 몇몇 가지 놓친 점들이 있을 터이니, 사용하면서 불편한 점이나 문제는 {pleromaGitlab}에 제보해주시면 감사하겠습니다. 저희는 겪으신 문제점이나 Pleroma와 Pleroma-FE에 대한 피드백과 제안을 환영합니다.",
+    "art_by": "{linkToArtist} 그림"
   },
   "unicode_domain_indicator": {
     "tooltip": "이 도메인은 아스키 문자가 아닌 문자를 포함하고 있습니다."
@@ -1069,7 +1157,16 @@
     "ancestor_follow_with_icon": "{icon} {text}",
     "show_all_conversation_with_icon": "{icon} {text}",
     "ancestor_follow": "이 게시물 아래 {numReplies}개 답글 더 보기 | 이 게시물 아래 {numReplies}개 답글 더 보기",
-    "show_only_conversation_under_this": "이 게시물의 답글만 보기"
+    "show_only_conversation_under_this": "이 게시물의 답글만 보기",
+    "repeat_confirm": "리핏할까요?",
+    "repeat_confirm_title": "리핏 확인",
+    "repeat_confirm_accept_button": "리핏",
+    "repeat_confirm_cancel_button": "리핏 안 함",
+    "delete_confirm_title": "삭제 확인",
+    "delete_confirm_accept_button": "삭제",
+    "delete_confirm_cancel_button": "냅두기",
+    "delete_error": "게시물 삭제 에러: {0}",
+    "reaction_count_label": "{num}명이 반응함 | {num}명이 반응함"
   },
   "errors": {
     "storage_unavailable": "Pleroma가 브라우저 저장소에 접근할 수 없습니다. 로그인이 풀리거나 로컬 설정이 초기화 되는 등 예상치 못한 문제를 겪을 수 있습니다. 쿠키를 활성화 해보세요."
@@ -1113,5 +1210,91 @@
     "submit_edit_action": "수정본 반영",
     "cancel_edit_action": "취소",
     "inactive_message": "이 공지사항은 비활성화 되었습니다"
+  },
+  "admin_dash": {
+    "window_title": "관리",
+    "wip_notice": "이 관리자 대시보드는 실험적이며 개발 중에 있습니다, {adminFeLink}.",
+    "old_ui_link": "대신 구 관리자 UI를 사용할 수 있습니다",
+    "reset_all": "전부 초기화",
+    "commit_all": "전부 저장",
+    "tabs": {
+      "nodb": "DB 설정 불가",
+      "instance": "인스턴스",
+      "frontends": "프론트엔드",
+      "limits": "제한"
+    },
+    "nodb": {
+      "heading": "데이터베이스 설정 기능이 비활성화 되어 있습니다",
+      "documentation": "관련 문서",
+      "text2": "대부분의 설정을 건드릴 수 없습니다.",
+      "text": "백엔드 설정 파일에서 {property}를 {value}로 바꿔야 합니다, {documentation}를 참고하세요."
+    },
+    "captcha": {
+      "kocaptcha": "KoCaptcha",
+      "native": "내장"
+    },
+    "instance": {
+      "registrations": "유저 가입",
+      "captcha_header": "캡차",
+      "kocaptcha": "KoCaptcha 설정",
+      "access": "인스턴스 접근",
+      "restrict": {
+        "timelines": "타임라인 접근",
+        "profiles": "사용자 프로필 접근",
+        "activities": "게시물/활동 접근",
+        "header": "로그인하지 않은 방문자의 접근을 제한",
+        "description": "특정 API의 접근을 허용할지 말지에 대한 세부 설정입니다. 기본적으로(애매한 체크 표시) 인스턴스가 비공개이면 접근을 차단합니다, 체크 표시는 인스턴스가 공개여도 차단함을 의미합니다, 체크 해제는 인스턴스가 비공개여도 접근을 허용함을 의미합니다. 설정을 바꾸면 예기치 않은 동작이 일어날 수 있음을 유의하세요, 예로 프로필 접근이 차단되면 프로필 정보 없이 게시물이 보여집니다."
+      },
+      "instance": "인스턴스 정보"
+    },
+    "limits": {
+      "arbitrary_limits": "임의 제한",
+      "posts": "게시물 제한",
+      "uploads": "첨부파일 제한",
+      "users": "사용자 프로필 제한",
+      "profile_fields": "프로필 필드 제한",
+      "user_uploads": "프로필 미디어 제한"
+    },
+    "frontend": {
+      "repository": "리포지토리 링크",
+      "versions": "사용 가능한 버전",
+      "build_url": "빌드 URL",
+      "reinstall": "재설치",
+      "is_default": "(기본)",
+      "is_default_custom": "(기본, 버전: {version})",
+      "install": "설치",
+      "install_version": "설치된 버전 {version}",
+      "more_install_options": "설치 옵션 더 보기",
+      "more_default_options": "기본 설정 옵션 더 보기",
+      "set_default": "기본으로 설정",
+      "set_default_version": "버전 {version}을 기본으로 설정",
+      "wip_notice": "이 부분은 프론트엔드 관리에 대한 백엔드 구현이 미완성이기 때문에 개발 중이고 몇몇 기능이 빠져 있습니다.",
+      "default_frontend": "기본 프론트엔드",
+      "default_frontend_tip2": "개발 중: 아직 Pleroma 백엔드가 모든 설치된 프론트엔드 목록을 알려주지 않기 때문에 이름과 ref을 직접 입력해야 합니다. 아래에 있는 목록은 여기 값을 입력하기 위한 단축 버튼입니다.",
+      "available_frontends": "설치 가능",
+      "default_frontend_tip": "기본 프론트엔드는 모든 유저에게 보입니다. 현재로썬 유저가 개인적으로 프론트엔드를 선택할 수 있진 않습니다. PleromaFE에서 벗어난다면 저희가 완전히 대체할 때까지는 인스턴스 설정을 위해서 아마도 낡고 버그투성이인 AdminFE를 쓰셔야 할 겁니다."
+    },
+    "temp_overrides": {
+      ":pleroma": {
+        ":instance": {
+          ":public": {
+            "label": "인스턴스를 공개",
+            "description": "이것을 끄면 모든 API가 로그인한 유저만 사용 가능하게 되며, 로그인하지 않은 사용자에겐 공개와 연합 타임라인이 보이지 않게 됩니다."
+          },
+          ":limit_to_local_content": {
+            "label": "로컬 컨텐츠만 검색하도록 제한",
+            "description": "로그인하지 않은 사람 (기본값), 모두 또는 없음에게 전역 검색을 비활성화합니다"
+          },
+          ":description_limit": {
+            "label": "글자수 제한",
+            "description": "첨부파일 설명문의 글자수 제한"
+          },
+          ":background_image": {
+            "label": "배경 이미지",
+            "description": "배경 이미지 (주로 PleromaFE에서 쓰임)"
+          }
+        }
+      }
+    }
   }
 }
diff --git a/src/i18n/languages.js b/src/i18n/languages.js
index 250b3b1a9..475bf5ac2 100644
--- a/src/i18n/languages.js
+++ b/src/i18n/languages.js
@@ -1,4 +1,3 @@
-
 const languages = [
   'ar',
   'ca',
@@ -18,10 +17,12 @@ const languages = [
   'ja',
   'ja_easy',
   'ko',
+  'nan-TW',
   'nb',
   'nl',
   'oc',
   'pl',
+  'pdc',
   'pt',
   'ro',
   'ru',
diff --git a/src/i18n/nan-TW.json b/src/i18n/nan-TW.json
new file mode 100644
index 000000000..26821aae6
--- /dev/null
+++ b/src/i18n/nan-TW.json
@@ -0,0 +1,1385 @@
+{
+  "about": {
+    "mrf": {
+      "federation": "聯邦",
+      "keyword": {
+        "keyword_policies": "關鍵字政策",
+        "ftl_removal": "Tuì「知影 ê 網路」時間線除掉",
+        "reject": "拒絕",
+        "replace": "取代",
+        "is_replaced_by": "→"
+      },
+      "mrf_policies": "啟用 ê MRF 政策",
+      "mrf_policies_desc": "MRF 政策操作本站 ê 對外通信行為。以下ê政策啟用 ah：",
+      "simple": {
+        "simple_policies": "站臺特有 ê 政策",
+        "instance": "站",
+        "reason": "理由",
+        "accept": "接受",
+        "accept_desc": "本站干焦接受下跤 ê 站 ê 短 phue：",
+        "reject": "拒絕",
+        "reject_desc": "本站 buē 接受 tuì 以下 ê 站 ê 短 phue：",
+        "quarantine": "隔離",
+        "quarantine_desc": "針對下跤 ê 站，本站干焦送出公開ê PO文：",
+        "ftl_removal": "Tuì「知影 ê 網路」時間線thâi掉",
+        "ftl_removal_desc": "本站buē 佇「知影 ê 網路」刊下跤 ê 站 ê PO文：",
+        "media_removal": "Thâi除媒體",
+        "media_removal_desc": "本站 kā 下跤 ê 站臺送 ê PO文 ê 媒體 lóng thâi 除：",
+        "media_nsfw": "媒體 lóng 標做「敏感內容」",
+        "media_nsfw_desc": "本站 kā 下跤 ê 站 ê 媒體，lóng 標做敏感內容：",
+        "not_applicable": "N/A"
+      }
+    },
+    "staff": "工作人員"
+  },
+  "announcements": {
+    "page_header": "公告",
+    "title": "公告",
+    "mark_as_read_action": "標做讀過",
+    "post_form_header": "貼公告",
+    "post_placeholder": "佇 tsia 拍你 ê 公告……",
+    "post_action": "貼",
+    "post_error": "錯誤：{error}",
+    "close_error": "關",
+    "start_time_prompt": "開始時間： ",
+    "end_time_prompt": "結束時間： ",
+    "all_day_prompt": "Tse 是 kui 工 ê 事件",
+    "published_time_display": "公告佇 {time}",
+    "start_time_display": "有效 tuì：{time}",
+    "end_time_display": "中止佇：{time}",
+    "edit_action": "編輯",
+    "submit_edit_action": "送出",
+    "cancel_edit_action": "取消",
+    "inactive_message": "這个公告 tsit-má 無效力",
+    "delete_action": "Thâi掉"
+  },
+  "shoutbox": {
+    "title": "留話枋"
+  },
+  "domain_mute_card": {
+    "mute": "消音",
+    "mute_progress": "Teh 消音……",
+    "unmute": "予有聲",
+    "unmute_progress": "Teh 予有聲……"
+  },
+  "exporter": {
+    "export": "匯出",
+    "processing": "Teh 處理，較停仔指示你下載檔案"
+  },
+  "features_panel": {
+    "shout": "留話枋",
+    "pleroma_chat_messages": "Pleroma 開講",
+    "media_proxy": "媒體代理伺侯器",
+    "scope_options": "公開範圍選項",
+    "text_limit": "字數限制",
+    "title": "有效 ê 功能",
+    "who_to_follow": "啥儂通綴",
+    "upload_limit": "檔案 sài-suh 限制",
+    "gopher": "Gopher"
+  },
+  "finder": {
+    "error_fetching_user": "Tshuē 用者 ê 時起錯誤",
+    "find_user": "Tshuē 用者"
+  },
+  "general": {
+    "apply": "應用",
+    "submit": "送出",
+    "more": "Koh 較 tsē",
+    "loading": "Leh 載入……",
+    "generic_error": "起錯誤 ah",
+    "generic_error_message": "起錯誤：{0}",
+    "error_retry": "請 koh 試一 kái",
+    "retry": "Koh 試",
+    "optional": "非必要",
+    "show_more": "展示較 tsē",
+    "show_less": "展示較少",
+    "never_show_again": "Mài koh 展示",
+    "dismiss": "無視",
+    "cancel": "取消",
+    "disable": "無愛用",
+    "enable": "啟用",
+    "confirm": "確認",
+    "verify": "驗證",
+    "close": "關掉",
+    "undo": "復原",
+    "yes": "是",
+    "no": "毋是",
+    "peek": "先看 māi",
+    "scroll_to_top": "捲 kàu 頂懸",
+    "role": {
+      "admin": "行政員",
+      "moderator": "管理員"
+    },
+    "unpin": "無愛 kā 釘",
+    "pin": "Kā釘起來",
+    "flash_content": "Ji̍h tsia，用 Ruffle（iáu teh 試驗，可能 buē 紡）看 Flash ê 內容。",
+    "flash_sepcurity": "注意 tse 可能有危險，因為 Flash 內容猶原是任意 ê 程式碼。",
+    "flash_fail": "載入 flash 內容失敗，詳細ē當看控制臺。",
+    "scope_in_timeline": {
+      "direct": "私人 phue",
+      "private": "干焦 hōo 綴 lí ê 看",
+      "public": "公開佇公共時間線",
+      "unlisted": "無愛公開佇公共時間線"
+    },
+    "flash_security": "Flash內容通藏任何ê指令，所以可能有危險。"
+  },
+  "image_cropper": {
+    "crop_picture": "裁相片",
+    "save": "儲存",
+    "save_without_cropping": "無裁就儲存",
+    "cancel": "取消"
+  },
+  "importer": {
+    "submit": "送出",
+    "success": "匯入成功。",
+    "error": "佇匯入 ê 時起錯誤。"
+  },
+  "login": {
+    "login": "登入",
+    "description": "用 OAuth 登入",
+    "logout": "登出",
+    "logout_confirm_title": "登出確認",
+    "logout_confirm": "Lí　敢真正　beh　登出？",
+    "logout_confirm_accept_button": "登出",
+    "logout_confirm_cancel_button": "mài 登出",
+    "password": "密碼",
+    "placeholder": "例：lain",
+    "register": "註冊",
+    "username": "用者 ê 名",
+    "hint": "登入，參與討論",
+    "authentication_code": "認證碼",
+    "enter_recovery_code": "輸入恢復碼",
+    "enter_two_factor_code": "輸入兩階段認證碼",
+    "recovery_code": "恢復碼",
+    "heading": {
+      "totp": "兩階段認證",
+      "recovery": "兩階段恢復"
+    }
+  },
+  "media_modal": {
+    "previous": "頂一　ê",
+    "next": "後一个",
+    "counter": "{current} / {total}",
+    "hide": "關掉媒體瀏覽"
+  },
+  "nav": {
+    "about": "關係本站",
+    "administration": "管理",
+    "back": "轉去",
+    "friend_requests": "跟綴請求",
+    "mentions": "The̍h起",
+    "interactions": "互動",
+    "dms": "私人 phue",
+    "public_tl": "公共時間線",
+    "timeline": "時間線",
+    "home_timeline": "Tshù ê 時間線",
+    "twkn": "知影 ê 網路",
+    "bookmarks": "冊籤",
+    "user_search": "Tshuē 用者",
+    "search_close": "關掉 tshiau-tshuē liâu",
+    "who_to_follow": "Siáng ē當綴",
+    "preferences": "個人 ê 設定",
+    "timelines": "時間線",
+    "chats": "開講",
+    "lists": "列單",
+    "edit_nav_mobile": "自訂導覽條",
+    "edit_pinned": "編輯釘起來 ê 項目",
+    "edit_finish": "編輯 suah",
+    "mobile_sidebar": "切換行動版 ê 邊 á liâu",
+    "mobile_notifications": "拍開通知（有無讀ê）",
+    "mobile_notifications_close": "關掉通知",
+    "announcements": "公告",
+    "search": "Tshuē",
+    "mobile_notifications_mark_as_seen": "Lóng 標做有讀",
+    "quotes": "引用"
+  },
+  "notifications": {
+    "broken_favorite": "狀態毋知影，leh tshiau-tshuē……",
+    "error": "佇取得通知 ê 時起錯誤：{0}",
+    "favorited_you": "kah 意 lí ê 狀態",
+    "followed_you": "綴 lí",
+    "follow_request": "想 beh 綴 lí",
+    "load_older": "載入 khah 早 ê 通知",
+    "notifications": "通知",
+    "read": "有讀ah！",
+    "repeated_you": "轉送 lí ê 狀態",
+    "no_more_notifications": "無別 ê 通知",
+    "migrated_to": "移民到",
+    "reacted_with": "顯出{0} ê 反應",
+    "submitted_report": "送出檢舉",
+    "poll_ended": "投票結束",
+    "unread_announcements": "{num} 篇公告iáu bē 讀",
+    "unread_chats": "{num} ê開講iáu bē讀",
+    "unread_follow_requests": "{num}ê新ê跟tuè請求",
+    "configuration_tip": "用{theSettings}，lí通自訂siánn物佇tsia顯示。{dismiss}",
+    "configuration_tip_settings": "設定",
+    "configuration_tip_dismiss": "Mài koh顯示",
+    "subscribed_status": "有發送ê"
+  },
+  "polls": {
+    "add_poll": "開投票",
+    "add_option": "加選項",
+    "option": "選項",
+    "votes": "票",
+    "people_voted_count": "{count} 位有投",
+    "votes_count": "{count} 票",
+    "vote": "投票",
+    "type": "投票 ê 形式",
+    "single_choice": "孤選",
+    "multiple_choices": "Tsē 選",
+    "expiry": "投票期限",
+    "expires_in": "投票 tī {0} 以後結束",
+    "expired": "投票佇 {0} 以前結束",
+    "not_enough_options": "投票 ê 選項傷少"
+  },
+  "emoji": {
+    "stickers": "貼圖",
+    "emoji": "繪文字",
+    "keep_open": "Hōo 揀選器開 leh",
+    "search_emoji": "Tshuē 繪文字",
+    "add_emoji": "插繪文字",
+    "custom": "定製 ê 繪文字",
+    "unpacked": "拍開 ê 繪文字",
+    "unicode": "Unicode 繪文字",
+    "unicode_groups": {
+      "activities": "活動",
+      "animals-and-nature": "動物 kap 自然",
+      "flags": "旗 á",
+      "food-and-drink": "食物 kap 飲料",
+      "objects": "物體",
+      "people-and-body": "Lâng kap 身軀",
+      "smileys-and-emotion": "笑面 kap 情緒",
+      "symbols": "符號",
+      "travel-and-places": "旅遊 kap 所在"
+    },
+    "load_all_hint": "載入頭前 {saneAmount} ê 繪文字，規个攏載入效能可能 ē khah 食力。",
+    "load_all": "Kā {emojiAmount} ê 繪文字攏載入",
+    "regional_indicator": "地區指引 {letter}",
+    "hide_custom_emoji": "Khàm掉自訂ê繪文字"
+  },
+  "errors": {
+    "storage_unavailable": "Pleroma buē-tàng the̍h 著瀏覽器儲存 ê。Lí ê 登入狀態抑是局部設定 buē 儲存，mā 凡勢 tú 著意料外 ê 問題。拍開 cookie 看māi。"
+  },
+  "interactions": {
+    "favs_repeats": "轉送 kap kah 意",
+    "follows": "最近綴 lí ê",
+    "emoji_reactions": "繪文字 ê 反應",
+    "reports": "檢舉",
+    "moves": "用者 ê 移民",
+    "load_older": "載入 koh khah 早 ê 互動",
+    "statuses": "訂ê"
+  },
+  "post_status": {
+    "edit_status": "編輯狀態",
+    "new_status": "PO 新 ê 狀態",
+    "account_not_locked_warning": "Lín 口座毋是 {0} ê。見 nā 有 lâng 綴--lí，ē-tàng 看著 lí ê 限定跟綴者 ê PO 文。.",
+    "account_not_locked_warning_link": "鎖起來 ê 口座",
+    "attachments_sensitive": "Kā 附件標做敏感內容",
+    "media_description": "媒體說明",
+    "content_type": {
+      "text/plain": "純 ê 文字",
+      "text/html": "HTML",
+      "text/markdown": "Markdown",
+      "text/bbcode": "BBCode"
+    },
+    "content_type_selection": "貼 ê 形式",
+    "content_warning": "主旨（毋是必要）",
+    "default": "Tú正kàu高雄ah。",
+    "direct_warning_to_all": "Tsit ê PO 文通 hōo 逐 ê 提起 ê 用者看見。",
+    "direct_warning_to_first_only": "Tsit ê PO 文，kan-ta佇短phue tú開始提起ê用者，tsiah通看見。",
+    "edit_remote_warning": "別 ê 站臺可能無支援編輯，無法度收著 PO 文上新 ê 版本。",
+    "edit_unsupported_warning": "Pleroma 無支持編輯 the̍h 起 hām 投票。",
+    "posting": "PO 文",
+    "preview": "Sing看māi",
+    "preview_empty": "空 ê",
+    "empty_status_error": "無法度 PO 無檔案 koh 空 ê 狀態",
+    "media_description_error": "更新媒體失敗，請 koh 試一 kái",
+    "scope_notice": {
+      "public": "Tsit ê PO 文通予逐 ê 儂看著",
+      "private": "Tsit ê PO 文 kan-ta 予綴 lí ê 看著",
+      "unlisted": "Tsit ê PO 文 buē 公開 tī 公共時間線 kap 知影 ê 網路"
+    },
+    "scope_notice_dismiss": "關掉 tsit ê 通知",
+    "scope": {
+      "direct": "私人 phue - PO 文干焦予提起 ê 用者看著",
+      "private": "限定綴 ê 儂 - PO 文干焦予綴 lí ê 儂看著",
+      "public": "公開 - PO kàu 公開時間線",
+      "unlisted": "Mài 列出來 - Mài PO tī 公開時間線"
+    },
+    "post": "PO 上去",
+    "reply_option": "應tsit ê狀態",
+    "quote_option": "引用tsit ê狀態"
+  },
+  "registration": {
+    "bio_optional": "介紹（毋是必要）",
+    "email_optional": "Email（毋是必要）",
+    "fullname": "顯示 ê 名",
+    "password_confirm": "確認密碼",
+    "registration": "註冊",
+    "token": "邀請碼",
+    "captcha": "驗證碼",
+    "new_captcha": "Ji̍h 圖片，the̍h 新 ê 驗證碼",
+    "fullname_placeholder": "e.g. 岩倉 Lain",
+    "bio_placeholder": "e.g.\nLí 好，我是 Lain。\n我是日本動畫 ê 角色，tuà tī 日本 ê 郊區。Lí 凡勢 bat tī Wired 知影我。",
+    "reason": "註冊 ê 理由",
+    "reason_placeholder": "本站靠人工審核註冊。\n介紹管理者 lí beh tī tsia 註冊 ê 理由。",
+    "register": "註冊",
+    "validations": {
+      "username_required": "著愛添",
+      "fullname_required": "著愛添",
+      "email_required": "著愛添",
+      "password_required": "著愛添",
+      "password_confirmation_required": "著愛添",
+      "password_confirmation_match": "密碼著相 kâng",
+      "birthday_required": "著愛添",
+      "birthday_min_age": "Buē-tàng tī {date} 以後"
+    },
+    "email_language": "Lí想 beh 服侍器用 siánn 物語言寄批 hōo lí？",
+    "birthday": "生日：",
+    "birthday_optional": "生日（毋是必要）：",
+    "email": "電子 phue 箱",
+    "username_placeholder": "比如：lain"
+  },
+  "remote_user_resolver": {
+    "remote_user_resolver": "別站用者 ê 解析器",
+    "error": "Tshuē無。",
+    "searching_for": "Tshuē："
+  },
+  "report": {
+    "reporter": "檢舉人：",
+    "reported_user": "Beh 檢舉 ê 用者：",
+    "reported_statuses": "Beh 檢舉 ê 狀態：",
+    "state_open": "開 ê",
+    "state_closed": "關 ê",
+    "state_resolved": "解決了 ê",
+    "notes": "註：",
+    "state": "狀態："
+  },
+  "selectable_list": {
+    "select_all": "攏總揀"
+  },
+  "settings": {
+    "add_language": "加一 ê 備用 ê 語言",
+    "remove_language": "Ni 掉",
+    "primary_language": "主要語言：",
+    "fallback_language": "備用語言 {index}：",
+    "app_name": "App ê 名",
+    "expert_mode": "進階模式",
+    "save": "保存改變",
+    "security": "安全",
+    "setting_changed": "設定 kap 預先 ê 有 tsing 差",
+    "style": {
+      "common": {
+        "color": "色彩",
+        "opacity": "無透明度",
+        "contrast": {
+          "hint": "色彩ê對比率：{ratio}。{level}、 {context}",
+          "level": {
+            "aa": "合AA級ê準則（上kē ê）",
+            "aaa": "合AAA級ê準則（建議ê）",
+            "bad": "無合半ê無障礙準則"
+          },
+          "context": {
+            "18pt": "大（18pt 以上）ê文字",
+            "text": "文字"
+          }
+        }
+      },
+      "switcher": {
+        "keep_shadows": "保持陰影",
+        "keep_color": "保持色彩",
+        "keep_opacity": "保持無透明度",
+        "keep_roundness": "保留邊á角ê khà-buh",
+        "keep_fonts": "保持字型",
+        "reset": "重頭設定",
+        "clear_all": "Lóng清掉",
+        "clear_opacity": "清掉無透明度",
+        "load_theme": "載入主題",
+        "keep_as_is": "Mài振動",
+        "use_snapshot": "舊ê版本",
+        "use_source": "新ê版本",
+        "help": {
+          "upgraded_from_v2": "PleromaFE升級ah，主題huân-sè kap lí知影ê無kâng。",
+          "v2_imported": "Lí輸入ê檔案是舊版本ê前端用ê。Guán盡量予版本相通，毋過可能有所在buē-tàng。",
+          "older_version_imported": "Lí輸入ê檔案是予舊ê前端用ê。",
+          "future_version_imported": "Lí輸入ê檔案是新ê前端所用ê。",
+          "snapshot_missing": "無主題ê快相佇檔案內，所以，伊看起來凡勢kap原來預料ê無kâng。",
+          "snapshot_present": "主題ê快相有載入，所以逐ê值lóng khàm過去ah。Lí 通改載入主題實際ê資料。",
+          "fe_upgraded": "版本更新了後，Pleroma前端ê ia̋n-jín 升級ah。",
+          "fe_downgraded": "Pleroma ê前端滾tńg去ah。",
+          "migration_snapshot_ok": "為著保險，主題快相載入去ah。Lí ē當試載入主題資料。",
+          "migration_napshot_gone": "快相因故無去ah，tsi̍t-kuá所在看起來可能hām lí所想ê無kâng。",
+          "snapshot_source_mismatch": "版本tshia̋ng-póng：上可能因為前端滾轉去koh更新ah，若因為用舊版本ê前端，主題tsiah改變，lí有可能beh用舊ê版本。無，著用新ê。"
+        },
+        "save_load_hint": "佇揀iah是載入主題ê時，「保存」選項保留現tsú時設定ê選項；mā佇輸出主題ê時tsūn，儲存頭拄á講ê選項。若是逐ê選擇框á無設定，逐項設定就ē khǹg佇輸出ê主題。"
+      },
+      "common_colors": {
+        "_tab_label": "一般",
+        "main": "一般ê色彩",
+        "foreground_hint": "請看「進階」分頁，來調整khah幼ê所在",
+        "rgbo": "標頭、強調、徽章"
+      },
+      "advanced_colors": {
+        "_tab_label": "進階",
+        "alert": "警告ê背景",
+        "alert_error": "錯誤",
+        "alert_warning": "警告",
+        "alert_neutral": "其他ê",
+        "post": "PO文／用者紹介",
+        "badge": "徽章ê背景",
+        "popover": "提示、目錄、跳出來ê",
+        "badge_notification": "通知",
+        "panel_header": "面枋ê標題",
+        "top_bar": "頂 liâu-á",
+        "borders": "框á邊",
+        "buttons": "鈕仔",
+        "inputs": "輸入框á",
+        "faint_text": "淺ê文字",
+        "underlay": "Tshū-á",
+        "wallpaper": "壁紙",
+        "poll": "投票數ê圖",
+        "icons": "標á",
+        "highlight": "強調ê要素",
+        "pressed": "Tshi̍h ê 時",
+        "selectedPost": "選擇ê PO文",
+        "selectedMenu": "選擇ê目錄項目",
+        "disabled": "關ê",
+        "toggled": "切換ê時",
+        "tabs": "分頁",
+        "chat": {
+          "incoming": "收著ê",
+          "outgoing": "送出ê",
+          "border": "框á邊"
+        }
+      },
+      "radii": {
+        "_tab_label": "邊á角ê khà-buh"
+      },
+      "shadows": {
+        "_tab_label": "影kap光",
+        "override": "Khàm掉",
+        "shadow_id": "影 #{value}",
+        "blur": "予n̄g-n̄g",
+        "spread": "Hōo 闊",
+        "inset": "內pîng",
+        "filter_hint": {
+          "always_drop_shadow": "警告，tsit ê 影一直用 {0}，若是瀏覽器支援tsē。",
+          "drop_shadow_syntax": "{0} 無支援參數 {1} kap 關鍵字 {2}。",
+          "avatar_inset": "請注意，結合內pîng kap外pîng ê影佇標頭，可能佇透明ê標頭現無預料ê結果。",
+          "spread_zero": "若是「hōo 闊」ê值比0較大，影ê顯示ē kap hōo 闊設做0 kâng款",
+          "inset_classic": "內pîng ê影ē用{0}"
+        },
+        "component": "部件",
+        "hintV3": "針對影，lí mā ē當用 {0} 標示法，來用其他ê色彩 khang (slot)。",
+        "components": {
+          "panelHeader": "面枋ê標題",
+          "topBar": "頂 liâu-á",
+          "avatar": "用者ê標頭（佇個人資料欄位）",
+          "popup": "跳出來ê kap提醒",
+          "button": "鈕仔",
+          "buttonHover": "鈕仔（滑鼠ê指標khǹg佇面頂）",
+          "panel": "面枋",
+          "avatarStatus": "用者ê標頭（佇PO文ê顯示）",
+          "buttonPressedHover": "鈕仔（滑鼠指標leh khǹg 佇頂懸，koh tshi̍h ê時）",
+          "buttonPressed": "鈕仔（leh tshi̍h ê時）",
+          "input": "輸入框á"
+        }
+      },
+      "fonts": {
+        "_tab_label": "字型",
+        "components": {
+          "interface": "界面",
+          "input": "輸入框á",
+          "post": "PO文",
+          "postCode": "RTF ê PO文ê平闊文字"
+        },
+        "family": "字型ê名",
+        "help": "揀界面元件所用ê字型。若是揀「家己指定」，lí著輸入系統內ê字型正確ê名。",
+        "size": "Sài-suh（單位：畫素）",
+        "weight": "字ê重（粗度）",
+        "custom": "家己指定"
+      },
+      "preview": {
+        "header": "先看māi",
+        "content": "內容",
+        "error": "錯誤ê例",
+        "button": "鈕á",
+        "text": "Tsē是{0}kap{1} ê例",
+        "mono": "內容",
+        "input": "Tú正kàu高雄ah。",
+        "faint_link": "有幫tsān ê手冊",
+        "fine_print": "讀guán ê {0}，毋過學無有路用ê！",
+        "header_faint": "Tsē OK",
+        "checkbox": "我有讀過使用條款",
+        "link": "好ê細ê連結"
+      }
+    },
+    "upload": {
+      "error": {
+        "base": "上傳 ê 時失敗。",
+        "message": "傳 buē 起去：{0}",
+        "file_too_big": "檔案 sài-suh 傷大 [{filesize}{filesizeunit} / {allowedsize}{allowedsizeunit}]",
+        "default": "Koh 試一 kái。"
+      }
+    },
+    "search": {
+      "people": "用戶",
+      "hashtags": "主題標籤",
+      "person_talking": "{count} ê leh 論",
+      "people_talking": "{count} ê leh 論",
+      "no_results": "無半 ê 結果",
+      "no_more_results": "無其他 ê 結果",
+      "load_more": "載入 koh 較 tsē 結果"
+    },
+    "password_reset": {
+      "forgot_password": "Buē 記得密碼？",
+      "password_reset": "重頭設密碼",
+      "instruction": "拍 lí ê email 地址 iah 是用者 ê 名。Guán 會送 lí 連結，重頭設定密碼。",
+      "placeholder": "Lí ê email 地址 iah 是用者 ê 名。",
+      "check_email": "檢查電子 phue 箱，看有重頭設密碼 ê 連結無。",
+      "return_home": "轉來頭頁",
+      "too_many_requests": "Lí kā 請求 ê khòo-tah 用了 ah。等一時仔，閣試一 pái。",
+      "password_reset_disabled": "密碼重頭設定無開放。請聯絡本站 ê 行政員。",
+      "password_reset_required": "Beh 登入，著重頭設 lí ê 密碼。",
+      "password_reset_required_but_mailer_is_disabled": "Lí 需要重頭設密碼，毋 koh tsia 無開放密碼 koh 再設定。請聯絡本站 ê 行政員。"
+    },
+    "chats": {
+      "message_user": "傳私人 phue：{nickname}",
+      "delete": "Thâi 掉",
+      "chats": "開講",
+      "new": "發起開講",
+      "empty_message_error": "無法度 PO 空 ê phue",
+      "more": "Koh較濟……",
+      "delete_confirm": "Lí 敢真 ê beh thâi tsit 張 phue？",
+      "error_loading_chat": "載入開講 ê 時，出箠 ah。",
+      "error_sending_message": "送 phue ê 時，出箠 ah。",
+      "empty_chat_list_placeholder": "Lí 猶無佇 tsia 開講過，來開講 lah！"
+    },
+    "lists": {
+      "lists": "列單",
+      "new": "新 ê 列單",
+      "title": "列單標題",
+      "search": "Tshuē 用者",
+      "create": "開新 ê",
+      "save": "保存改變",
+      "delete": "刣列單",
+      "following_only": "限定 lí 所關注 ê",
+      "manage_lists": "管理列單",
+      "manage_members": "管理列單成員",
+      "add_members": "Tshiau 閣較 tsē ê 用者",
+      "remove_from_list": "對列單刣掉",
+      "add_to_list": "加入去列單",
+      "is_in_list": "列單已經有 ah ",
+      "editing_list": "編輯列單 {listTitle}",
+      "creating_list": "開新 ê 列單",
+      "update_title": "保存標題",
+      "really_delete": "敢真正 beh 刣掉列單？",
+      "error": "操作列單 ê 時陣出重耽：{0}"
+    },
+    "file_type": {
+      "audio": "音訊",
+      "video": "影片",
+      "image": "影像",
+      "file": "檔案"
+    },
+    "display_date": {
+      "today": "今 á 日"
+    },
+    "update": {
+      "big_update_title": "敬請體諒",
+      "big_update_content": "因為 guán 有一站 á 無發行新版本，所以這个版本會 kap lí 以早慣 sì ê 無仝。",
+      "update_bugs": "請佇 {pleromaGitlab} 報告任何問題 kap bug，因為 Pleroma 改變真 tsē。雖罔 guán 徹底 leh 試，mā 家 kī 用開發版，伊凡勢有一寡重耽。Guán 歡迎 lín 提供關係所拄著 ê 問題 ê 意見、建議，或者是改進 Pleroma kap Pleroma-FE ê 法度。",
+      "update_changelog": "Nā beh 知影改變 ê 詳細，請看：{theFullChangelog}.",
+      "update_changelog_here": "Kui ê 改變日誌",
+      "art_by": "美編：{linkToArtist}"
+    },
+    "unicode_domain_indicator": {
+      "tooltip": "這 ê 域名包含毋是 ascii ê 字元。"
+    },
+    "setting_server_side": "Tsit-ê設定縛佇lí ê個人資料，mā 影響逐ê連線階段kap用者端",
+    "post_look_feel": "PO 文ê外貌kap感受",
+    "mention_links": "提起 ê 連結",
+    "mfa": {
+      "otp": "OTP",
+      "setup_otp": "設 OTP",
+      "wait_pre_setup_otp": "kā OTP 預設",
+      "title": "兩階段認證",
+      "generate_new_recovery_codes": "產生新ê恢復碼",
+      "warning_of_generate_new_codes": "產生新 ê 恢復碼ê時，舊 ê tio̍h 變無效。",
+      "recovery_codes": "恢復碼。",
+      "waiting_a_recovery_codes": "當leh收備份碼……",
+      "authentication_methods": "認證方法",
+      "scan": {
+        "title": "掃一 ē",
+        "secret_code": "鎖匙",
+        "desc": "The̍h lí个兩階段app，掃 tsit ê QR code，抑是拍文字鎖匙："
+      },
+      "verify": {
+        "desc": "Nā beh開兩階段認證，請拍兩階段認證app內底ê碼："
+      },
+      "confirm_and_enable": "確定，拍開 OTP",
+      "recovery_codes_warning": "著 kā tsiah ê 號碼抄落來，抑是儲存佇安全ê所在，因為號碼 buē koh 再出現。若是 lí 袂當用 lí 个兩階段認證app，而且恢復碼拍 ka-la̍uh，lí就永永buē當登入lí个口座。"
+    },
+    "lists_navigation": "佇導覽中顯示列單",
+    "allow_following_move": "若是綴ê口座徙位ê時，允准自動綴新ê",
+    "attachmentRadius": "附件",
+    "avatar": "標頭",
+    "avatarAltRadius": "標頭（通知）",
+    "avatarRadius": "標頭",
+    "background": "背景",
+    "bio": "紹介",
+    "block_export": "輸出封鎖名單",
+    "block_export_button": "封鎖名單輸出kàu csv檔",
+    "block_import_error": "佇輸入封鎖名單ê時出tshê",
+    "block_import": "輸入封鎖名單",
+    "mute_export": "輸出消音名單",
+    "mute_export_button": "輸出消音名單kàu csv檔",
+    "mute_import": "輸入消音名單",
+    "blocks_imported": "成功輸入封鎖名單！較停仔tsiah ē處理suah。",
+    "mutes_imported": "成功輸入消音名單！較停仔tsiah ē處理suah。",
+    "import_mutes_from_a_csv_file": "輸入封鎖名單ê csv檔",
+    "account_backup": "備份口座",
+    "mutes_and_blocks": "消音kap封鎖",
+    "delete_account": "Thâi口座",
+    "delete_account_error": "佇刣掉lí ê 口座ê時出問題。若是問題一直佇leh，請聯絡 lín 站臺 ê 行政員。",
+    "account_alias": "口座 ê 別名",
+    "account_alias_table_head": "別名",
+    "list_aliases_error": "佇the̍h別名ê時出tshê：{error}",
+    "hide_list_aliases_error_action": "關掉",
+    "remove_alias": "Thâi 掉tsit ê別名",
+    "new_alias_target": "加新ê別名（比如： {example})）",
+    "added_alias": "別名加入去ah。",
+    "add_alias_error": "佇加別名ê時出tshê：{error}",
+    "move_account": "徙口座",
+    "move_account_target": "目標口座（比如：{example}）",
+    "moved_account": "口座徙過去ah。",
+    "move_account_error": "佇徙口座ê時出tshê：{error}",
+    "attachments": "附件",
+    "email_language": "服侍器送ê email 所用 ê 語言",
+    "enter_current_password_to_confirm": "輸入lí tsit-má ê 密碼，確認lí ê身份",
+    "mute_import_error": "佇輸入消音名單ê時出tshê",
+    "delete_account_description": "Ē 永永刣掉lí个資料，hōo lí 个口座bē當用。",
+    "delete_account_instructions": "佇佇下跤拍lí个密碼，確認 kā 口座 thâi掉。",
+    "move_account_notes": "若是欲徙tsit ê口座，著去lí ê目標口座hia，加一ê指tsia ê別名。",
+    "account_backup_table_head": "備份",
+    "download_backup": "下載",
+    "backup_not_ready": "備份猶 buē tshuân 予好勢。",
+    "backup_running": "備份leh處理，其中 {number} 筆記錄處理 suah--ah。",
+    "backup_failed": "備份失敗。",
+    "remove_backup": "Thâi 掉",
+    "list_backups_error": "佇 the̍h 備份列單ê時出tshê： {error}",
+    "add_backup": "開新ê備份",
+    "added_backup": "新ê備份開好 ah。",
+    "add_backup_error": "佇開新ê備份ê時出tshê：{error}",
+    "blocks_tab": "封鎖",
+    "bot": "Tse 是機器 lâng ê 口座",
+    "btnRadius": "鈕仔",
+    "cBlue": "藍色（回應，跟綴）",
+    "cGreen": "綠色（轉送）",
+    "cOrange": "柑仔色（kah 意）",
+    "cRed": "紅色（取消）",
+    "change_email": "換電子 phue 箱",
+    "changed_email": "電子 phue 箱變換成功！",
+    "change_password": "改密碼",
+    "change_password_error": "佇改密碼ê時出問題。",
+    "changed_password": "改密碼成功！",
+    "chatMessageRadius": "開講ê訊息",
+    "composing": "編寫ê設定",
+    "confirm_new_password": "確認新ê密碼",
+    "current_password": "Tann ê 密碼",
+    "confirm_dialogs": "問確認佇",
+    "confirm_dialogs_repeat": "轉送狀態",
+    "confirm_dialogs_unfollow": "無愛綴用者",
+    "confirm_dialogs_block": "封鎖用者",
+    "confirm_dialogs_mute": "kā用者消音",
+    "confirm_dialogs_delete": "thâi掉狀態",
+    "confirm_dialogs_logout": "登出",
+    "confirm_dialogs_approve_follow": "允准跟綴",
+    "confirm_dialogs_deny_follow": "無允准跟綴",
+    "confirm_dialogs_remove_follower": "徙走綴 lí ê",
+    "data_import_export_tab": "資料輸入／出",
+    "default_vis": "預設ê公開範圍",
+    "discoverable": "允准用tshiau-tshuē kap 其他ê服務tshuē著 tsit ê口座",
+    "domain_mutes": "域名",
+    "avatar_size_instruction": "建議ê標頭影像sài-suh 是150x150畫素。",
+    "pad_emoji": "Tuì 揀選器揀繪文字以後，佇繪文字雙 pîng 邊加空白",
+    "emoji_reactions_on_timeline": "佇時間線頂，顯示繪文字ê反應",
+    "emoji_reactions_scale": "反應ê規模係數",
+    "export_theme": "保存主題",
+    "filtering": "過濾",
+    "wordfilter": "詞語過濾器",
+    "word_filter_and_more": "詞語過濾器 kap 其他……",
+    "follow_export": "輸出 lí 所綴ê",
+    "follow_export_button": "輸出lí所綴ê kàu csv 檔",
+    "follow_import": "輸入lí所綴ê",
+    "follow_import_error": "佇輸入跟綴 ê 資料 ê 時出tshê",
+    "accent": "強調",
+    "foreground": "前景",
+    "general": "一般",
+    "hide_attachments_in_convo": "佇對話ê時，khàm附件",
+    "hide_attachments_in_tl": "Khàm掉時間線內ê附件",
+    "hide_media_previews": "Khàm掉媒體ê預展",
+    "hide_muted_posts": "Khàm掉消音ê用者ê PO文",
+    "hide_bot_indication": "Khàm 掉PO文內底ê機器lâng ê指示",
+    "hide_all_muted_posts": "Khàm掉消音êPO文",
+    "max_thumbnails": "PO文ê縮小圖ê khòo-tah（無寫=無限制）",
+    "hide_isp": "Khàm 站臺特有ê面 pang",
+    "right_sidebar": "Kā 邊á ê欄位徙kah正手pîng",
+    "navbar_column_stretch": "伸導覽liâu，kah 欄位平闊",
+    "always_show_post_button": "一直顯示「新ê PO文」ê鈕仔",
+    "hide_wallpaper": "Khàm站臺ê壁紙",
+    "use_one_click_nsfw": "Tshi̍h chi̍t 下就ē當拍開敏感內容",
+    "hide_post_stats": "Khàm PO文ê統計數據（比如：kah 意ê額數）",
+    "hide_filtered_statuses": "Khàm 逐ê過濾掉êPO文",
+    "hide_wordfiltered_statuses": "Khàm詞語過濾掉ê狀態",
+    "hide_muted_threads": "Khàm消音ê討論線",
+    "import_blocks_from_a_csv_file": "Tuì csv 檔輸入封鎖名單",
+    "import_followers_from_a_csv_file": "Uì csv 檔輸入跟綴ê資料",
+    "import_theme": "載入主題",
+    "inputRadius": "輸入ê格仔",
+    "checkboxRadius": "選擇框仔",
+    "instance_default": "（預設：{value}）",
+    "instance_default_simple": "（預設）",
+    "interface": "界面",
+    "column_sizes_sidebar": "邊 á liâu",
+    "auto_update": "自動顯示新ê PO文",
+    "user_mutes": "用者",
+    "useStreamingApi": "連鞭收著PO文kap通知",
+    "use_websockets": "用websockets（實ê時間ê更新）",
+    "text": "文字",
+    "theme": "主題",
+    "theme_help": "用16進位ê碼(#rrggbb)來訂做家己ê色彩主題。",
+    "change_email_error": "佇換電子phue箱ê時出問題。",
+    "collapse_subject": "Kā 有主旨ê PO 文 khàm 起來",
+    "autocomplete_select_first": "若是有自動完成ê結果，自動揀頭一ê侯選ê",
+    "filtering_explanation": "見若有下跤ê詞語ê狀態，會hőng消音。一tsuā寫一ê",
+    "follows_imported": "Lí所綴ê輸入去ah！較停仔tsiah ē處理suah。",
+    "mute_bot_posts": "Kā 機器lâng ê PO文消音",
+    "hide_shoutbox": "Khàm 站臺ê留話pang",
+    "account_backup_description": "Tse 予 lí ē當 kā lín 口座 ê 資訊 kap PO 文載落來，毋過 in 猶無法度輸入kàu Pleroma口座 ê 內底。",
+    "theme_help_v2_1": "拍開選擇框á就 ē 當改掉一寡組件ê色彩kap無透明度。Ji̍h「Lóng清掉」，ē 恢復原來ê款。",
+    "preload_images": "Kā 圖片先載入",
+    "hide_user_stats": "Khàm 掉用者ê統計數據（比如：綴ê lâng額）",
+    "interfaceLanguage": "界面ê語言",
+    "invalid_theme_imported": "Lí 所揀ê主題檔案，Pleroma 無支援，所以主題無改。",
+    "limited_availability": "你ê瀏覽器內底buē當用",
+    "links": "連結",
+    "lock_account_description": "Kan-ta lí 同意，別儂tsiah通綴lí",
+    "loop_video": "循環播出ê影片",
+    "loop_video_silent_only": "Kan-ta無聲ê影片tsiah通循環播出（比如：Mastodon ê \"gif\"）",
+    "mutes_tab": "消音",
+    "play_videos_in_modal": "佇跳出來ê框仔播出影片",
+    "url": "URL",
+    "preview": "預展",
+    "file_export_import": {
+      "backup_restore": "備份設定",
+      "backup_settings": "Kā 設定備份kàu檔案",
+      "backup_settings_theme": "Kā設定kap主題備份kàu檔案",
+      "restore_settings": "對檔案回復設定",
+      "errors": {
+        "file_too_old": "無接受ê主要版本：{fileMajor}，檔案ê版本siūnn舊，buē當處理（{feMajor} 版以後ê tsiah支援）",
+        "file_slightly_new": "檔案ê次版本無仝，一寡設定可能buē當載入去",
+        "invalid_file": "選擇ê檔案毋是Pleroma支援ê設定備份，設定無振動。",
+        "file_too_new": "無接受ê主要版本：{fileMajor}，本 PleromaFE（設定版本 {feMajor}）siūnn舊，buē當處理"
+      }
+    },
+    "profile_fields": {
+      "label": "個人資料ê meta資料",
+      "add_field": "加格仔",
+      "name": "標簽",
+      "value": "內容"
+    },
+    "birthday": {
+      "label": "生日",
+      "show_birthday": "顯示我ê生日"
+    },
+    "account_privacy": "隱私",
+    "use_contain_fit": "Mài裁附件ê縮小圖",
+    "name_bio": "名kah介紹",
+    "new_password": "新ê密碼",
+    "posts": "PO文",
+    "name": "名",
+    "new_email": "新ê電子phue箱",
+    "notification_visibility_likes": "收藏",
+    "hide_favorites_description": "Mài 顯示阮收藏ê列單（別儂uân-á ē收著通知）",
+    "user_profiles": "用者ê資料",
+    "notification_visibility": "Beh顯示啥款ê通知",
+    "notification_visibility_follows": "綴ê儂",
+    "notification_visibility_mentions": "提起",
+    "notification_visibility_repeats": "轉送",
+    "notification_visibility_moves": "用者suá位",
+    "notification_visibility_emoji_reactions": "反應",
+    "notification_visibility_polls": "Lí參與ê選舉辦suah佇",
+    "no_rich_text_description": "Po文mài用RTF格式",
+    "no_blocks": "無封鎖",
+    "no_mutes": "無消音",
+    "hide_follows_description": "Mài顯示我綴ê儂",
+    "hide_followers_description": "Mài顯示綴我ê儂",
+    "hide_follows_count_description": "Mài顯示我跟綴ê儂額",
+    "hide_followers_count_description": "Mài顯示綴我ê儂額",
+    "show_moderator_badge": "佇我ê個人資料顯示「管理員」證章",
+    "nsfw_clickthrough": "Khàm掉敏感ê媒體內容",
+    "oauth_tokens": "OAuth token",
+    "refresh_token": "重頭the̍h token",
+    "valid_until": "到期佇",
+    "revoke_token": "撤回",
+    "panelRadius": "面pang",
+    "presets": "代先ê設定",
+    "profile_background": "個人資料ê背景",
+    "profile_banner": "個人資料ê條á",
+    "profile_tab": "個人資料",
+    "radii_help": "設定界面邊á ê khà-buh (curve) ê 半徑（單位：畫素）",
+    "replies_in_timeline": "佇時間線內底ê回應",
+    "reply_visibility_all": "顯示所有ê回應",
+    "reply_visibility_following": "Kan-ta顯示送予我抑是我綴ê儂ê回應",
+    "reply_visibility_self": "Kan-ta顯示送予我ê回應",
+    "reply_visibility_following_short": "顯示予我所綴ê儂ê回應",
+    "reply_visibility_self_short": "Kan-ta顯示予我ka-kī ê回應",
+    "autohide_floating_post_button": "自動khàm掉「新êPO文」ê鈕仔（行動版）",
+    "saving_err": "佇保存設定ê時出tshê",
+    "saving_ok": "設定保存好ah",
+    "search_user_to_block": "Tshuē lí beh封鎖ê",
+    "search_user_to_mute": "Tshuē lí beh 消音ê",
+    "security_tab": "安全",
+    "scope_copy": "回應ê時ē khóo-pih ê範圍（私人phue 定著ē hőng khóo-pih）",
+    "minimal_scopes_mode": "Kā PO文ê公開範圍ê選項，kiu kah上細",
+    "set_new_avatar": "設定新ê標頭",
+    "set_new_profile_background": "設定新ê個人資料ê背景",
+    "set_new_profile_banner": "設定新ê個人資料ê條á",
+    "reset_avatar": "重頭設定標頭",
+    "reset_profile_background": "重頭設個人資料ê背景",
+    "reset_profile_banner": "重頭設個人資料ê條á",
+    "reset_avatar_confirm": "Lí敢確實beh 重頭設定標頭？",
+    "reset_banner_confirm": "Lí敢確實beh 重頭設定條á？",
+    "reset_background_confirm": "Lí敢確實beh 重頭設定背景？",
+    "settings": "設定",
+    "subject_input_always_show": "一直顯示主旨ê格á",
+    "subject_line_behavior": "回應ê時，khóo-pih主旨",
+    "subject_line_email": "電子phue風格：「re: 主旨」",
+    "subject_line_mastodon": "Mastodon風格：主旨無變",
+    "subject_line_noop": "Mài khóo-pih",
+    "conversation_display": "顯示對話ê風格",
+    "conversation_display_tree": "樹á ê形",
+    "disable_sticky_headers": "Mài 予欄位ê頭牢佇螢幕頂懸",
+    "show_scrollbars": "展示邊á ê欄位 ê giú-á",
+    "third_column_mode": "空間夠額ê時，展示第三ê欄位",
+    "third_column_mode_none": "不管時mài顯示第三ê欄位",
+    "third_column_mode_notifications": "通知ê欄位",
+    "third_column_mode_postform": "主要ê PO文表kah導覽",
+    "show_admin_badge": "佇我ê個人資料顯示「行政員」證章",
+    "pause_on_unfocused": "若是 Pleroma ê分頁無點開，tiō 暫停更新",
+    "conversation_display_tree_quick": "樹á形ê展示",
+    "columns": "欄位",
+    "column_sizes": "欄位sài-suh",
+    "column_sizes_content": "內容",
+    "column_sizes_notifs": "通知",
+    "tree_advanced": "允准用較活動ê方式導覽佇樹á形ê展示",
+    "tree_fade_ancestors": "用較淺ê色水顯示目前狀態ê前文",
+    "conversation_display_linear": "線á形ê風格",
+    "conversation_display_linear_quick": "線á形ê展示",
+    "conversation_other_replies_button": "顯示「其他ê回應」鈕仔",
+    "conversation_other_replies_button_below": "佇狀態下kha",
+    "conversation_other_replies_button_inside": "佇狀態內底",
+    "max_depth_in_thread": "預設ê討論線顯示層數ê上限",
+    "post_status_content_type": "Po文狀態ê內容類型",
+    "sensitive_by_default": "預設內，kā po文標做敏感內容",
+    "stop_gifs": "Kā滑鼠ê指標khǹg佇面頂ê時，動畫圖片tsiah振動",
+    "streaming": "Giú kàu頂懸ê時，自動展示新ê po文",
+    "theme_help_v2_2": "一寡圖片下kha ê標á，是背景／圖片ê對比指示，滑鼠指標khǹg佇面頂ê時，ē當看詳細。請記lit，若是用透明ê，對比指示顯示上bái ê情況。",
+    "tooltipRadius": "提醒",
+    "type_domains_to_mute": "揣beh愛消音ê域名",
+    "upload_a_photo": "Kā相片傳上去",
+    "user_settings": "用者ê設定",
+    "values": {
+      "false": "無",
+      "true": "是"
+    },
+    "mention_link_display_short": "一直顯示短ê名（比如： {'@'}foo）",
+    "mention_link_display_full": "一直用全名顯示（比如：{'@'}foo{'@'}example.org）",
+    "virtual_scrolling": "Kā時間線ê算畫最佳化",
+    "mention_link_display_full_for_remote": "Kan-ta kā其他域名ê用者，用全名顯示（比如：{'@'}foo{'@'}example.org）",
+    "token": "Token",
+    "use_at_icon": "用標á顯示 {'@'} 符號，mài用文字",
+    "mention_link_display": "顯示提起ê連結",
+    "mention_link_use_tooltip": "佇tshi̍h提起ê連結ê時，顯示用者ê卡片",
+    "mention_link_show_avatar": "佇連結邊á顯示用者ê標頭",
+    "mention_link_show_avatar_quick": "佇提起ê隔壁，顯示用者ê標頭",
+    "mention_link_fade_domain": "用較淺ê色水顯示域名（比如：{'@'}foo{'@'}example.org ê {'@'}example.org）",
+    "mention_link_bolden_you": "佇lí hőng提起ê時，強調對lí ê提起文字",
+    "user_popover_avatar_action": "Tshi̍h跳出來ê標頭ê動作",
+    "user_popover_avatar_action_zoom": "放大／縮小標頭",
+    "user_popover_avatar_action_close": "關掉跳出來ê框á",
+    "user_popover_avatar_action_open": "拍開個人資料",
+    "user_popover_avatar_overlay": "佇用者ê跳出來ê框仔面頂，顯示用者ê標頭",
+    "fun": "趣味ê",
+    "greentext": "Meme ê箭頭",
+    "show_yous": "顯示（Lí）",
+    "notifications": "通知",
+    "notification_setting_filters": "過濾ê",
+    "notification_setting_block_from_strangers": "關lí bô綴ê lâng 送ê通知",
+    "notification_setting_privacy": "隱私",
+    "notification_setting_hide_notification_contents": "Kā sak通知ê lâng kap伊ê內容khàm掉",
+    "notification_mutes": "若tsún無愛收tuì指定用者來ê通知，著用消音。",
+    "notification_blocks": "封鎖用者ē停止所有i hia來ê通知，mā取消訂伊。",
+    "enable_web_push_notifications": "拍開網頁sak通知ê功能",
+    "more_settings": "Koh較tsē ê設定",
+    "version": {
+      "title": "版本",
+      "backend_version": "後端ê版本",
+      "frontend_version": "前端ê版本"
+    },
+    "commit_value": "儲存",
+    "commit_value_tooltip": "值無儲存，tshi̍h tsit ê 鈕仔來送出你改變ê",
+    "hard_reset_value": "硬ê重頭設",
+    "hard_reset_value_tooltip": "Suá掉儲存內底ê設定，強制用預設ê值",
+    "reset_value": "重頭設",
+    "reset_value_tooltip": "重頭設草稿",
+    "hide_scrobbles": "Tshàng scrobble（記錄）",
+    "notification_show_extra": "顯示koh khah tsē ê通知佇通知ê欄位",
+    "notification_extra_chats": "顯示bô讀ê開講",
+    "notification_extra_announcements": "顯示bô讀ê公告",
+    "notification_extra_follow_requests": "顯示新ê跟tuè請求",
+    "notification_extra_tip": "顯示自訂其他通知ê撇步",
+    "confirm_new_setting": "Lí敢確認新ê設定？",
+    "text_size_tip": "用 {0} 做絕對值，{1} ē根據瀏覽器ê標準文字sài-suh放大縮小。",
+    "theme_debug": "佇處理透明ê時，顯示背景主題ia̋n-jín 所假使ê（DEBUG）",
+    "units": {
+      "time": {
+        "s": "秒鐘",
+        "m": "分鐘",
+        "h": "點鐘",
+        "d": "工"
+      }
+    },
+    "actor_type": "Tsit ê口座是：",
+    "actor_type_Person": "一般ê用者",
+    "actor_type_description": "標記lí ê口座做群組，ē hōo自動轉送提起伊ê狀態。",
+    "actor_type_Group": "群組",
+    "actor_type_Service": "機器lâng",
+    "appearance": "外觀",
+    "confirm_new_question": "Tse看起來kám好？設定ē佇10秒鐘後改轉去。",
+    "revert": "改轉去",
+    "confirm": "確認",
+    "text_size": "文字kap界面ê sài-suh",
+    "text_size_tip2": "毋是 {0} ê值可能ē破壞一寡物件kap主題",
+    "emoji_size": "繪文字ê sài-suh",
+    "navbar_size": "頂 liâu-á êsài-suh",
+    "panel_header_size": "面pang標題ê sài-suh",
+    "visual_tweaks": "細細ê外觀調整",
+    "scale_and_layout": "界面ê sài-suh kap排列"
+  },
+  "status": {
+    "favorites": "收藏",
+    "repeat_confirm_cancel_button": "Mài轉送",
+    "delete_confirm_title": "Thâi掉ê確認",
+    "edit": "編輯狀態",
+    "edited_at": "（頂kái編輯佇：{time}）",
+    "pin": "釘佇個人資料",
+    "unpin": "Tuì個人資料拆掉",
+    "pinned": "釘入去ê",
+    "bookmark": "加入冊籤",
+    "unbookmark": "Tuì冊籤the̍h掉",
+    "delete_confirm": "Lí kám真ê beh thâi掉tsit ê狀態？",
+    "delete_confirm_accept_button": "Thâi掉",
+    "delete_confirm_cancel_button": "保留",
+    "reply_to": "回應",
+    "replies_list": "回應：",
+    "repeats": "轉送",
+    "repeat_confirm_accept_button": "轉送",
+    "repeat_confirm_title": "轉送ê確認",
+    "repeat_confirm": "Lí kám真ê beh轉送tsit ê狀態？",
+    "delete": "Thâi掉狀態",
+    "delete_error": "Thâi狀態ê時出tshê：{0}",
+    "mentions": "提起",
+    "move_down": "Kā附件suá kàu正pîng",
+    "thread_show_full": "展示tsit 條討論線ê所有（lóng總有{numStatus}ê狀態，深度上限：{depth}）",
+    "thread_follow": "看討論線tshun ê部份（lóng總有{numStatus}ê狀態）",
+    "replies_list_with_others": "回應（+其他{numReplies}ê）：",
+    "mute_conversation": "Kā會話消音",
+    "unmute_conversation": "Kā會話取消消音",
+    "status_unavailable": "狀態bē當用",
+    "copy_link": "Khóo-pih 狀態ê連結",
+    "external_source": "外口ê來源",
+    "thread_muted": "討論線消音ah",
+    "thread_muted_and_words": "，有詞語：",
+    "hide_full_subject": "Khàm掉主題ê全文",
+    "show_full_subject": "顯示標題ê全文",
+    "show_content": "顯示內容",
+    "hide_content": "Khàm掉內容",
+    "status_deleted": "Tsit篇PO文thâi掉ah",
+    "nsfw": "敏感ê內容",
+    "expand": "Thián開",
+    "you": "（Lí）",
+    "plus_more": "Koh有{number}ê",
+    "many_attachments": "PO文有{number}ê附件",
+    "collapse_attachments": "Kā附件tshàng起來",
+    "show_all_attachments": "顯示逐ê附件",
+    "show_attachment_in_modal": "佇媒體模式顯示",
+    "show_attachment_description": "Kā敘述先看māi（拍開附件會當看kui ê敘述）",
+    "hide_attachment": "Khàm掉附件",
+    "attachment_stop_flash": "停止Flash ê播放器",
+    "remove_attachment": "Kā附件suá走",
+    "move_up": "Kā附件suá kàu倒pîng",
+    "open_gallery": "拍開畫廊",
+    "thread_hide": "Khàm掉討論線",
+    "thread_show": "顯示討論線",
+    "thread_show_full_with_icon": "{icon} {text}",
+    "thread_follow_with_icon": "{icon} {text}",
+    "ancestor_follow": "看其他{numReplies}ê佇tsit ê狀態ê回應",
+    "ancestor_follow_with_icon": "{icon} {text}",
+    "show_all_conversation_with_icon": "{icon} {text}",
+    "show_all_conversation": "看kui ê會話（有其他{numStatus}ê狀態）",
+    "show_only_conversation_under_this": "Kan-ta顯示tsit ê狀態ê回應",
+    "status_history": "狀態ê歷史",
+    "reaction_count_label": "{num}ê lâng用表情反應",
+    "hide_quote": "Khàm掉引用ê狀態",
+    "display_quote": "顯示引用ê狀態",
+    "invisible_quote": "引用ê狀態bē當用：{link}",
+    "more_actions": "佇tsit ê狀態ê其他動作"
+  },
+  "user_card": {
+    "favorites": "收藏",
+    "show_repeats": "顯示轉送",
+    "hide_repeats": "Khàm掉轉送",
+    "remove_follower_confirm": "Lí kám真正想beh kā {user} tuì lí所跟綴ê suá走？",
+    "statuses": "狀態",
+    "admin_menu": {
+      "activate_account": "啟動口座",
+      "deactivate_account": "予口座失效",
+      "delete_account": "Thâi掉口座",
+      "force_nsfw": "Kā逐ê PO文標做敏感內容",
+      "strip_media": "Tuì PO文thâi掉媒體",
+      "force_unlisted": "強制PO文mài列佇公共時間線",
+      "disable_remote_subscription": "Mài允准tuì其他站臺跟tuè用者",
+      "sandbox": "強制PO文kan-ta予跟tuè ê看",
+      "disable_any_subscription": "Mài允准跟tuè任何用者",
+      "quarantine": "Tuì聯邦禁止用者ê PO文",
+      "delete_user": "Thâi掉用者ê口座",
+      "delete_user_data_and_deactivate_confirmation": "Án-ne ē永永thâi掉tsit ê口座ê資料兼hōo失效。Lí kám完全確定？",
+      "grant_admin": "授與行政員ê權",
+      "revoke_admin": "撤掉行政員ê權",
+      "moderation": "仲裁",
+      "grant_moderator": "授與仲裁員ê權",
+      "revoke_moderator": "撤掉仲裁員ê權"
+    },
+    "highlight": {
+      "disabled": "Mài強調",
+      "side": "邊á ê花tsuā",
+      "solid": "孤色ê背景",
+      "striped": "花tsuā ê背景"
+    },
+    "note": "筆記",
+    "note_blank": "（無）",
+    "edit_note": "編輯筆記",
+    "edit_note_apply": "適用",
+    "approve": "核准",
+    "approve_confirm_title": "核准ê確認",
+    "approve_confirm_accept_button": "核准",
+    "approve_confirm_cancel_button": "Mài核准",
+    "block": "封鎖",
+    "blocked": "封鎖ah！",
+    "block_confirm_title": "封鎖ê確認",
+    "approve_confirm": "Lí kám想beh核准{user}ê跟tuè請求？",
+    "block_confirm": "Lí kám 真正想beh封鎖{user}?",
+    "block_confirm_accept_button": "封鎖",
+    "block_confirm_cancel_button": "Mài封鎖",
+    "deactivated": "停止使用ah",
+    "deny": "拒絕",
+    "deny_confirm_title": "拒絕ê確認",
+    "deny_confirm_accept_button": "拒絕",
+    "deny_confirm_cancel_button": "Mài拒絕",
+    "deny_confirm": "Lí kám想beh拒絕{user}ê跟tuè請求？",
+    "edit_profile": "編輯個人資料",
+    "follow": "跟tuè",
+    "follow_cancel": "取消請求",
+    "follow_sent": "請求送ah！",
+    "follow_progress": "Teh請求……",
+    "follow_unfollow": "無愛跟tuè",
+    "unfollow_confirm_title": "無愛跟tuè ê確認",
+    "unfollow_confirm": "lí kám真正無beh跟tuè {user}?",
+    "unfollow_confirm_accept_button": "無愛跟綴",
+    "unfollow_confirm_cancel_button": "繼續跟tuè",
+    "followees": "Teh跟綴",
+    "followers": "跟綴ê",
+    "following": "Teh跟tuè！",
+    "follows_you": "跟tuè lí！",
+    "hidden": "Tshàng起來ê",
+    "its_you": "Tse是lí！",
+    "media": "媒體",
+    "mention": "提起",
+    "message": "短phue",
+    "mute": "消音",
+    "muted": "消音ê",
+    "mute_confirm_title": "消音ê確認",
+    "mute_confirm": "Lí確定想beh kā {user}消音？",
+    "mute_confirm_accept_button": "消音",
+    "mute_confirm_cancel_button": "Mài消音",
+    "mute_duration_prompt": "消音tsit ê用戶ê期限（0表示永遠）：",
+    "per_day": "/kang",
+    "remote_follow": "遠距離ê關注",
+    "remove_follower": "Suá走跟綴ê",
+    "remove_follower_confirm_title": "Suá走跟tuè者ê確認",
+    "remove_follower_confirm_accept_button": "Suá走",
+    "remove_follower_confirm_cancel_button": "保留",
+    "report": "檢舉",
+    "subscribe": "注文",
+    "unsubscribe": "取消注文",
+    "unblock": "Mài封鎖",
+    "unblock_progress": "Teh取消封鎖……",
+    "block_progress": "Leh封鎖……",
+    "unmute": "Mài消音",
+    "mute_progress": "Leh消音……",
+    "unmute_progress": "Leh取消消音……",
+    "bot": "機器lâng",
+    "birthday": "出世佇{birthday}",
+    "edit_note_cancel": "取消"
+  },
+  "tool_tip": {
+    "favorite": "收藏",
+    "repeat": "轉送",
+    "media_upload": "Kā媒體傳起去",
+    "reply": "回應",
+    "add_reaction": "加反應",
+    "user_settings": "用者ê設定",
+    "accept_follow_request": "允准跟tuè ê請求",
+    "reject_follow_request": "拒絕跟tuè ê請求",
+    "bookmark": "冊籤",
+    "toggle_expand": "Thián開á是tshàng通知，顯示kui篇PO文",
+    "toggle_mute": "Thián開á是tshàng通知，顯露消音ê內容",
+    "autocomplete_available": "{number} ê結果通用。用頂kap下ê key來看結果。"
+  },
+  "password_reset": {
+    "instruction": "輸入你ê email地址iah是用者ê名。阮ē寄予lí連結，通重頭設你ê密碼。",
+    "password_reset_disabled": "密碼重頭設ê功能無開放。請聯絡lín站臺ê行政員。",
+    "password_reset_required_but_mailer_is_disabled": "Lí著重設密碼，M̄-koh重頭設密碼ê功能無開放。請聯絡lín站臺ê行政員。",
+    "forgot_password": "Buē記得密碼？",
+    "password_reset": "密碼重頭設",
+    "placeholder": "你ê email iah是用者ê名",
+    "check_email": "檢查你ê電子phue箱，有重頭設密碼ê連結ê phue無。",
+    "return_home": "Tńg去頭頁",
+    "too_many_requests": "Lí已經kàu 試ê回數限制 ah，小等leh koh試。",
+    "password_reset_required": "Lí著重設密碼，tsiah通登入。"
+  },
+  "admin_dash": {
+    "window_title": "行政員",
+    "reset_all": "Kui ê重頭設",
+    "wip_notice": "Tsit ê 管理 la-jí-báng (dashboard) 是試驗ê，koh teh 起做，{adminFeLink}.",
+    "old_ui_link": "舊ê管理界面佇tsia",
+    "commit_all": "Lóng總儲存",
+    "tabs": {
+      "nodb": "無資料庫ê設置",
+      "instance": "站臺",
+      "limits": "限制",
+      "frontends": "前端"
+    },
+    "nodb": {
+      "heading": "資料庫設置無開放",
+      "text": "Lí需要改後端ê設置檔案，tsiah ē當kā{property}設做{value}，請佇{documentation}了解詳細。",
+      "documentation": "文件",
+      "text2": "大部份ê設定ē無開放。"
+    },
+    "limits": {
+      "user_uploads": "個人資料ê媒體限制",
+      "arbitrary_limits": "任何限制",
+      "posts": "PO文ê限制",
+      "uploads": "附件ê限制",
+      "users": "用者個人資料ê限制",
+      "profile_fields": "個人資料欄位ê限制"
+    },
+    "captcha": {
+      "native": "在來ê",
+      "kocaptcha": "KoCaptcha"
+    },
+    "instance": {
+      "instance": "站臺ê資訊",
+      "registrations": "用者ê註冊",
+      "kocaptcha": "KoCaptcha ê設定",
+      "restrict": {
+        "header": "管制無落名ê訪客使用",
+        "timelines": "讀取時間線",
+        "profiles": "讀取用者ê個人資料",
+        "activities": "讀取狀態／活動",
+        "description": "（無）允准一kuá方面ê API the̍h取資源ê詳細設定。預設（無定ê狀態），若是站臺毋是公開ê，ē無允准the̍h取；選擇框á若勾，就算站臺是公開ê，iáu是無允准the̍h取；若無勾，就算站臺是私人ê，mā是允准the̍h取。請注意，若是設一kuá設定，無預料ê行為可能產生。比如講，若是the̍h取個人資料無開放，PO文buē顯示個人資料。"
+      },
+      "access": "讀取實體",
+      "captcha_header": "CAPTCHA"
+    },
+    "frontend": {
+      "repository": "原始碼庫ê連結",
+      "versions": "通用ê版本",
+      "build_url": "起做URL",
+      "reinstall": "重頭安裝",
+      "is_default": "（預設）",
+      "is_default_custom": "（預設，版本：{version}）",
+      "install": "安裝",
+      "install_version": "安裝ê版本：{version}",
+      "more_install_options": "其他ê安裝選項",
+      "more_default_options": "其他ê預設設定ê選項",
+      "set_default": "設做預設ê",
+      "set_default_version": "Kā版本{version}設做預設ê",
+      "default_frontend_tip": "預設ê前端ē展示予逐ê用者。現在，用者無法度揀個人ê前端。若是lí變換，無beh用PleromaFE，上有可能ē用舊koh問題tsē ê AdminFE 做站臺ê設置，佇阮iáu-bē kā伊取代以前。",
+      "wip_notice": "請注意，tsit ê段落iáu teh起做，欠缺一寡特點，因為後端tuì前端管理ê實做無齊備。",
+      "default_frontend": "預設ê前端",
+      "default_frontend_tip2": "Teh起做：因為Pleroma後端無適當列出逐ê安裝ê前端，lí著手動輸入名字kap引用。下kha ê列單提供寫tsiah-ê 值ê近路。",
+      "available_frontends": "Ē當安裝"
+    },
+    "temp_overrides": {
+      ":pleroma": {
+        ":instance": {
+          ":public": {
+            "description": "無開放tse，ē 控制逐êAPI，干焦予登入ê用者用，mā ē予公開kap聯邦ê時間線，buē當予無落名ê訪客the̍h著。",
+            "label": "站臺是公開ê"
+          },
+          ":limit_to_local_content": {
+            "label": "Kan-ta會當tshuē在地ê內容",
+            "description": "無開放無認證ê用者、逐儂，猶是lóng總開放tshuē全球ê網路"
+          },
+          ":description_limit": {
+            "label": "限制",
+            "description": "附件說明ê字元限制"
+          },
+          ":background_image": {
+            "label": "背景ê影像",
+            "description": "背景ê影像（主要予PleromaFE用）"
+          }
+        }
+      }
+    }
+  },
+  "timeline": {
+    "up_to_date": "是上新ê",
+    "collapse": "疊起來",
+    "conversation": "會話",
+    "error": "佇the̍h時間線ê時出tshê：{0}",
+    "load_older": "載入舊ê狀態",
+    "repeated": "轉送ah",
+    "no_retweet_hint": "PO文hőng標做限定跟綴ê，á是私人phue，無法度轉送",
+    "show_new": "看新ê",
+    "reload": "重新載入",
+    "no_more_statuses": "無其他ê狀態",
+    "no_statuses": "無狀態",
+    "socket_reconnected": "實時ê連結成立ah",
+    "socket_broke": "實時連結拍m̄見ah：CloseEvent代碼{0}",
+    "quick_view_settings": "快速 view ê設定",
+    "quick_filter_settings": "快速過濾器ê設定"
+  },
+  "time": {
+    "unit": {
+      "days": "{0}工",
+      "days_short": "{0}工",
+      "hours": "{0}點鐘",
+      "hours_short": "{0}點鐘",
+      "minutes": "{0}分鐘",
+      "minutes_short": "{0}分",
+      "months": "{0}個月",
+      "months_short": "{0}個月",
+      "seconds": "{0}秒鐘",
+      "seconds_short": "{0}秒",
+      "weeks": "{0}禮拜",
+      "weeks_short": "{0}週",
+      "years": "{0}年",
+      "years_short": "{0}年"
+    },
+    "in_future": "koh有{0}",
+    "in_past": "{0}進前",
+    "now": "tú正",
+    "now_short": "tsit-má"
+  },
+  "user_reporting": {
+    "title": "檢舉 {0}",
+    "forward_description": "Tsit ê口座是別ê站臺ê。Mā kám beh寄報告ê khóo-pih kàu hit ê站？",
+    "add_comment_description": "本檢舉ē 寄kàu你ê站臺ê仲裁員。Lí會當佇下kha解說檢舉tsit ê口座ê原因：",
+    "additional_comments": "其他ê意見",
+    "forward_to": "轉送kàu{0}",
+    "submit": "送出",
+    "generic_error": "佇處理lí ê請求ê時出tshê。"
+  },
+  "lists": {
+    "really_delete": "Kám真正 beh thâi列單？",
+    "search": "Tshiau-tshuē用者",
+    "create": "建立",
+    "save": "保存改變",
+    "delete": "Thâi列單",
+    "lists": "列單",
+    "new": "新ê列單",
+    "title": "列單ê標題",
+    "following_only": "限制佇跟tuè ê",
+    "manage_lists": "管理列單",
+    "manage_members": "管理列單ê成員",
+    "add_members": "Tshiau-tshuē其他ê用者",
+    "remove_from_list": "Tuì列單suá走",
+    "add_to_list": "Ke-thinn kàu列單",
+    "is_in_list": "已經佇列單內底",
+    "editing_list": "編輯列單 {listTitle}",
+    "creating_list": "開新ê列單",
+    "update_title": "保存標題",
+    "error": "佇操作列單ê時出tshê：{0}"
+  },
+  "update": {
+    "update_bugs": "請報告任何問題kap錯誤佇 {pleromaGitlab}，因為已經改變真tsē。雖bóng guán徹底試過，ka-kī mā用開發版，iáu是有可能有無注意ê所在。Guán歡迎lí tuì所tú tio̍h ê問題，提出意見kap建議，或者是改進Pleroma kap Pleroma-FE ê方法。",
+    "big_update_title": "請sió等tsi̍t ê",
+    "update_bugs_gitlab": "Pleroma GitLab",
+    "big_update_content": "Guán已經有tsi̍t段時間無推出發行，所以外觀kap感覺kap lí所慣勢ê，凡勢無kâng。",
+    "update_changelog": "Beh知影改變ê詳細，請看{theFullChangelog}。",
+    "update_changelog_here": "Changelog全文",
+    "art_by": "美術製作：{linkToArtist}"
+  },
+  "user_profile": {
+    "timeline_title": "用者ê時間線",
+    "profile_does_not_exist": "Pháinn勢，tsit ê個人資料無佇leh。",
+    "profile_loading_error": "Pháinn勢，佇載入tsit ê個人資料ê時出tshê。"
+  },
+  "who_to_follow": {
+    "more": "詳情",
+    "who_to_follow": "Siáng通tuè"
+  },
+  "upload": {
+    "error": {
+      "base": "傳起去ê時失敗。",
+      "message": "傳起去ê時失敗：{0}",
+      "file_too_big": "檔案siūnn大[{filesize}{filesizeunit} / {allowedsize}{allowedsizeunit}]",
+      "default": "Koh試tsi̍t kái"
+    },
+    "file_size_units": {
+      "B": "B",
+      "KiB": "KiB",
+      "MiB": "MiB",
+      "GiB": "GiB",
+      "TiB": "TiB"
+    }
+  },
+  "search": {
+    "people": "Lâng",
+    "hashtags": "井字ê標籤",
+    "person_talking": "{count}ê lâng teh開講",
+    "people_talking": "{count}ê lâng teh開講",
+    "no_results": "無結果",
+    "no_more_results": "無其他結果",
+    "load_more": "載入其他結果"
+  },
+  "chats": {
+    "you": "Lí：",
+    "message_user": "送短phue予：{nickname}",
+    "delete": "Thâi掉",
+    "chats": "開講",
+    "new": "新ê開講",
+    "empty_message_error": "Bē當PO空ê短phue",
+    "more": "其他",
+    "delete_confirm": "Lí kám真正beh thâi tsit ê短phue？",
+    "error_loading_chat": "佇載入開講ê時出問題。",
+    "error_sending_message": "佇送短phue ê時出問題。",
+    "empty_chat_list_placeholder": "Lí iáu buē開講過。開始開講！"
+  },
+  "file_type": {
+    "audio": "聲音",
+    "video": "影片",
+    "image": "影像",
+    "file": "檔案"
+  },
+  "display_date": {
+    "today": "今á日"
+  },
+  "unicode_domain_indicator": {
+    "tooltip": "Tsit ê域名含m̄是ascii ê字元。"
+  }
+}
diff --git a/src/i18n/pdc.json b/src/i18n/pdc.json
new file mode 100644
index 000000000..0967ef424
--- /dev/null
+++ b/src/i18n/pdc.json
@@ -0,0 +1 @@
+{}
diff --git a/src/i18n/pl.json b/src/i18n/pl.json
index efebcc83b..9bfaa34d0 100644
--- a/src/i18n/pl.json
+++ b/src/i18n/pl.json
@@ -24,7 +24,10 @@
         "media_removal": "Usuwanie multimediów",
         "media_removal_desc": "Ta instancja usuwa multimedia z postów od wymienionych instancji:",
         "media_nsfw": "Multimedia ustawione jako wrażliwe",
-        "media_nsfw_desc": "Ta instancja wymusza, by multimedia z wymienionych instancji były ustawione jako wrażliwe:"
+        "media_nsfw_desc": "Ta instancja wymusza, by multimedia z wymienionych instancji były ustawione jako wrażliwe:",
+        "instance": "Instancja",
+        "reason": "Powód",
+        "not_applicable": "Nie dotyczy"
       }
     },
     "staff": "Administracja"
@@ -861,5 +864,13 @@
   },
   "errors": {
     "storage_unavailable": "Pleroma nie mogła uzyskać dostępu do pamięci masowej przeglądarki. Twój login lub lokalne ustawienia nie zostaną zapisane i możesz napotkać problemy. Spróbuj włączyć ciasteczka."
+  },
+  "announcements": {
+    "page_header": "Ogłoszenia",
+    "title": "Ogłoszenie",
+    "mark_as_read_action": "Oznacz jako przeczytane",
+    "post_placeholder": "Wprowadź treść ogłoszenia…",
+    "close_error": "Zamknij",
+    "delete_action": "Usuń"
   }
 }
diff --git a/src/i18n/pt.json b/src/i18n/pt.json
index b997701c0..76119eda0 100644
--- a/src/i18n/pt.json
+++ b/src/i18n/pt.json
@@ -11,7 +11,8 @@
     "title": "Características",
     "who_to_follow": "Quem seguir",
     "upload_limit": "Limite de carregamento",
-    "pleroma_chat_messages": "Chat do Pleroma"
+    "pleroma_chat_messages": "Chat do Pleroma",
+    "shout": "Shoutbox"
   },
   "finder": {
     "error_fetching_user": "Erro ao pesquisar utilizador",
@@ -36,11 +37,27 @@
     "error_retry": "Por favor, tenta novamente",
     "loading": "A carregar…",
     "dismiss": "Ignorar",
-    "role":
-    {
+    "role": {
       "moderator": "Moderador",
       "admin": "Admin"
-    }
+    },
+    "undo": "Refazer",
+    "yes": "Sim",
+    "no": "Não",
+    "unpin": "Desafixar o item",
+    "scroll_to_top": "Rolar para o topo",
+    "flash_content": "Clique para mostrar conteúdo Flash usando o Ruffle (Experimental, talvez não funcione).",
+    "flash_security": "Note que isso pode ser potencialmente perigoso dado que o conteúdo Flash ainda é código arbitrário.",
+    "flash_fail": "Falha ao carregar conteúdo flash, veja o console para detalhes.",
+    "scope_in_timeline": {
+      "direct": "Direct",
+      "private": "Apenas-seguidores",
+      "public": "Público",
+      "unlisted": "Não-listado"
+    },
+    "pin": "Fixar o item",
+    "generic_error_message": "Um erro ocorreu: {0}",
+    "never_show_again": "Não mostrar mais"
   },
   "image_cropper": {
     "crop_picture": "Cortar imagem",
@@ -64,11 +81,17 @@
     "recovery_code": "Código de recuperação",
     "authentication_code": "Código de autenticação",
     "enter_two_factor_code": "Introduza o código de dois fatores",
-    "enter_recovery_code": "Introduza um código de recuperação"
+    "enter_recovery_code": "Introduza um código de recuperação",
+    "logout_confirm_title": "Confirmação de logoff",
+    "logout_confirm": "Você realmente quer sair?",
+    "logout_confirm_accept_button": "Sair",
+    "logout_confirm_cancel_button": "Não sair"
   },
   "media_modal": {
     "previous": "Anterior",
-    "next": "Próximo"
+    "next": "Próximo",
+    "counter": "{current} / {total}",
+    "hide": "Fechar visualizador de mídia"
   },
   "nav": {
     "about": "Sobre",
@@ -88,7 +111,18 @@
     "administration": "Administração",
     "chats": "Salas de Chat",
     "timelines": "Cronologias",
-    "bookmarks": "Itens Guardados"
+    "bookmarks": "Itens Guardados",
+    "home_timeline": "Timeline da home",
+    "lists": "Listas",
+    "edit_pinned": "Editar itens fixados",
+    "edit_nav_mobile": "Customizar barra de navegação",
+    "mobile_notifications_mark_as_seen": "Marcar todas como vistas",
+    "search_close": "Fechar barra de busca",
+    "mobile_notifications_close": "Fechar notificações",
+    "announcements": "Anúncios",
+    "edit_finish": "Edição finalizada",
+    "mobile_sidebar": "Alternar barra lateral móvel",
+    "mobile_notifications": "Abrir notificações (há notificações não lidas)"
   },
   "notifications": {
     "broken_favorite": "Publicação desconhecida, a procurar…",
@@ -102,7 +136,15 @@
     "reacted_with": "reagiu com {0}",
     "migrated_to": "migrou para",
     "follow_request": "quer seguir-te",
-    "error": "Erro ao obter notificações: {0}"
+    "error": "Erro ao obter notificações: {0}",
+    "unread_announcements": "{num} anúncio não lido | {num} anúncios não lidos",
+    "unread_chats": "{num} mensagem não lida | {num} mensagens não lidas",
+    "configuration_tip": "Você pode customizar o que você deseja mostrar aqui em {theSettings}. {dismiss}",
+    "unread_follow_requests": "{num} novo pedido de seguidor | {num} novos pedidos de seguidores",
+    "configuration_tip_settings": "as configurações",
+    "configuration_tip_dismiss": "Não mostrar novamente",
+    "poll_ended": "enquete finalizada",
+    "submitted_report": "enviado um relatório"
   },
   "post_status": {
     "new_status": "Publicar nova publicação",
@@ -136,7 +178,14 @@
     "media_description": "Descrição da multimédia",
     "media_description_error": "Falha ao atualizar ficheiro, tente novamente",
     "direct_warning_to_first_only": "Esta publicação só será visível para os utilizadores mencionados no início da mensagem.",
-    "direct_warning_to_all": "Esta publicação será visível para todos os utilizadores mencionados."
+    "direct_warning_to_all": "Esta publicação será visível para todos os utilizadores mencionados.",
+    "edit_status": "Editar status",
+    "reply_option": "Responder a esse status",
+    "quote_option": "Citar esse status",
+    "edit_remote_warning": "Outras instâncias remotas talvez não suportem edição e sejam incapazes de receber a última versão do seu post.",
+    "content_type_selection": "Formato do post",
+    "scope_notice_dismiss": "Fechar essa notificação",
+    "edit_unsupported_warning": "Pleroma não suporta editar menções ou enquetes."
   },
   "registration": {
     "bio": "Biografia",
@@ -156,8 +205,18 @@
       "email_required": "não pode ser deixado em branco",
       "password_required": "não pode ser deixado em branco",
       "password_confirmation_required": "não pode ser deixado em branco",
-      "password_confirmation_match": "deve corresponder à palavra-passe"
-    }
+      "password_confirmation_match": "deve corresponder à palavra-passe",
+      "birthday_required": "não pode ser deixado em branco",
+      "birthday_min_age": "deve ser em ou antes de {date}"
+    },
+    "birthday": "Data de nascimento:",
+    "reason": "Razão para registrar",
+    "register": "Registrar",
+    "reason_placeholder": "Essa instância aprova os registros manualmente.\nPermita ao administrador saber o porquê do seu registro.",
+    "birthday_optional": "Data de nascimento (opcional):",
+    "bio_optional": "Bio (opcional)",
+    "email_optional": "Email (opcional)",
+    "email_language": "Em qual linguagem você deseja receber emails do servidor?"
   },
   "settings": {
     "app_name": "Nome da aplicação",
@@ -523,7 +582,56 @@
     "autohide_floating_post_button": "Automaticamente ocultar o botão 'Nova Publicação' (telemóvel)",
     "notification_visibility_moves": "Utilizador Migrado",
     "accent": "Destaque",
-    "pad_emoji": "Preencher espaços ao adicionar emojis do seletor"
+    "pad_emoji": "Preencher espaços ao adicionar emojis do seletor",
+    "confirm_dialogs_logout": "saindo",
+    "move_account_error": "Erro ao mover conta: {error}",
+    "confirm_dialogs_delete": "excluindo um status",
+    "save": "Salvar mudanças",
+    "lists_navigation": "Mostrar listas na navegação",
+    "email_language": "Linguagem para receber emails do servidor",
+    "account_backup_description": "Isso permite a você baixar um arquivo das informações da sua conta e os seus posts, mas eles ainda não podem ser importados para uma conta do Pleroma.",
+    "add_backup_error": "Erro ao adicionar um novo backup: {error}",
+    "confirm_dialogs": "Pedir por confirmação quando",
+    "confirm_dialogs_repeat": "repetindo um status",
+    "account_alias": "Apelidos de conta",
+    "account_alias_table_head": "Apelido",
+    "list_aliases_error": "Erro ao buscar por apelidos: {error}",
+    "hide_list_aliases_error_action": "Fechar",
+    "confirm_dialogs_deny_follow": "negando um seguidor",
+    "confirm_dialogs_approve_follow": "aprovando um seguidor",
+    "backup_running": "Esse backup está em andamento, {number} registro processado. | Esse backup está em progresso, {number} registros processados.",
+    "add_backup": "Criar um novo backup",
+    "added_backup": "Adicionado um novo backup.",
+    "backup_failed": "Esse backup falhou.",
+    "list_backups_error": "Erro ao buscar a lista de backup: {error}",
+    "move_account_notes": "Se você deseja mover a conta para outro lugar, você deve ir para sua conta de destino e adicionar um apelido apontando para cá.",
+    "add_alias_error": "Erro ao adicionar apelido: {error}",
+    "move_account": "Mover conta",
+    "actor_type": "Essa conta é:",
+    "actor_type_description": "Marcando a sua conta como um grupo irá fazer com que ela automaticamente repita os status que a mencionam.",
+    "actor_type_Person": "um usuário normal",
+    "actor_type_Service": "um bot",
+    "actor_type_Group": "um grupo",
+    "account_backup": "Backup da conta",
+    "confirm_dialogs_unfollow": "deixando de seguir usuário",
+    "confirm_dialogs_block": "bloqueando um usuário",
+    "confirm_dialogs_remove_follower": "removendo um seguidor",
+    "remove_alias": "Remover esse apelido",
+    "new_alias_target": "Adicionar um novo apelido (e.g. {example})",
+    "added_alias": "Apelido adicionado.",
+    "move_account_target": "Conta de destino (e.g. {example})",
+    "moved_account": "Conta movida.",
+    "remove_language": "Remover",
+    "primary_language": "Linguagem primária:",
+    "fallback_language": "Linguagem de reserva {index}:",
+    "add_language": "Adicionar linguagem de reserva",
+    "expert_mode": "Mostrar avançados",
+    "setting_changed": "As configurações são diferentes do padrão",
+    "setting_server_side": "Essas configurações estão atreladas ao seu perfil e afetarão todas as sessões e clientes",
+    "mention_links": "Links de menção",
+    "confirm_dialogs_mute": "mutando um usuário",
+    "backup_not_ready": "Esse backup não está pronto ainda.",
+    "remove_backup": "Remover"
   },
   "timeline": {
     "collapse": "Esconder",
@@ -699,7 +807,20 @@
     "load_all": "A carregar todos os {emojiAmount} emojis",
     "load_all_hint": "Carregado o primeiro emoji {saneAmount}, carregar todos os emojis pode causar problemas de desempenho.",
     "keep_open": "Manter o seletor aberto",
-    "stickers": "Autocolantes"
+    "stickers": "Autocolantes",
+    "hide_custom_emoji": "Ocultar emojis customizados",
+    "unicode_groups": {
+      "symbols": "Símbolos",
+      "activities": "Atividades",
+      "animals-and-nature": "Animais & Natureza",
+      "people-and-body": "Pessoas & Corpo",
+      "smileys-and-emotion": "Sorriso & Emoção",
+      "travel-and-places": "Viagem & Lugares",
+      "food-and-drink": "Comida & Bebidas",
+      "objects": "Objetos"
+    },
+    "regional_indicator": "Indicador regional {letter}",
+    "unpacked": "Emoji desempacotado"
   },
   "polls": {
     "single_choice": "Escolha única",
@@ -713,7 +834,9 @@
     "expiry": "Tempo para finalizar sondagem",
     "multiple_choices": "Escolha múltipla",
     "type": "Tipo de sondagem",
-    "add_poll": "Adicionar Sondagem"
+    "add_poll": "Adicionar Sondagem",
+    "votes_count": "{count} voto | {count} votos",
+    "people_voted_count": "{count} pessoa votou | {count} pessoas votaram"
   },
   "importer": {
     "error": "Ocorreu um erro ao importar este ficheiro.",
@@ -737,7 +860,9 @@
     "load_older": "Carregar interações mais antigas",
     "follows": "Novos seguidores",
     "favs_repeats": "Gostos e Partilhas",
-    "moves": "O utilizador migra"
+    "moves": "O utilizador migra",
+    "emoji_reactions": "Reações de Emoji",
+    "reports": "Relatórios"
   },
   "errors": {
     "storage_unavailable": "O Pleroma não conseguiu aceder ao armazenamento do navegador. A sua sessão ou definições locais não serão armazenadas e poderá encontrar problemas inesperados. Tente ativar as cookies."
@@ -828,5 +953,35 @@
     "day_short": "{0}d",
     "days": "{0} dias",
     "day": "{0} dia"
+  },
+  "report": {
+    "state_closed": "Fechar",
+    "reported_statuses": "Estado das denúncias:",
+    "reported_user": "Usuário denunciado:",
+    "state_resolved": "Resolvido",
+    "state": "Estado:",
+    "state_open": "Abrir",
+    "notes": "Notas:"
+  },
+  "announcements": {
+    "start_time_display": "Inicia às {time}",
+    "post_form_header": "Enviar anúncio",
+    "post_placeholder": "Digite o conteúdo do seu anúncio aqui...",
+    "page_header": "Anúncios",
+    "title": "Anúncio",
+    "mark_as_read_action": "Marcar como lido",
+    "post_action": "Postar",
+    "post_error": "Erro: {error}",
+    "close_error": "Fechar",
+    "delete_action": "Apagar",
+    "start_time_prompt": "Tempo de início: ",
+    "end_time_prompt": "Tempo de término: ",
+    "all_day_prompt": "Esse é um evento para o dia todo",
+    "published_time_display": "Publicado às {time}",
+    "end_time_display": "Finaliza às {time}",
+    "edit_action": "Editar",
+    "submit_edit_action": "Enviar",
+    "cancel_edit_action": "Cancelar",
+    "inactive_message": "Esse anúncio está inativo"
   }
 }
diff --git a/src/i18n/service_worker_messages.js b/src/i18n/service_worker_messages.js
index f691f1c48..a4e6d60ad 100644
--- a/src/i18n/service_worker_messages.js
+++ b/src/i18n/service_worker_messages.js
@@ -25,6 +25,7 @@ const messages = {
   oc: require('../lib/notification-i18n-loader.js!./oc.json'),
   pl: require('../lib/notification-i18n-loader.js!./pl.json'),
   pt: require('../lib/notification-i18n-loader.js!./pt.json'),
+  pdc: require('../lib/notification-i18n-loader.js!./pdc.json'),
   ro: require('../lib/notification-i18n-loader.js!./ro.json'),
   ru: require('../lib/notification-i18n-loader.js!./ru.json'),
   sk: require('../lib/notification-i18n-loader.js!./sk.json'),
diff --git a/src/i18n/uk.json b/src/i18n/uk.json
index cbb1a21f9..30ffac49c 100644
--- a/src/i18n/uk.json
+++ b/src/i18n/uk.json
@@ -33,11 +33,11 @@
       "public": "Публічне",
       "unlisted": "Непублічне"
     },
-    "undo": "Відмінити",
+    "undo": "Скасувати",
     "yes": "Так",
     "no": "Ні",
     "unpin": "Відкріпити",
-    "scroll_to_top": "Вгору",
+    "scroll_to_top": "Піднятися вгору",
     "pin": "Прикріпити"
   },
   "finder": {
@@ -88,7 +88,7 @@
         "simple_policies": "Правила поточного інстансу",
         "reason": "Причина",
         "not_applicable": "н/в",
-        "instance": "Інстанс"
+        "instance": "Сервер"
       },
       "mrf_policies_desc": "Правила MRF розповсюджуються на даний  інстанс. Наступні правила активні:",
       "mrf_policies": "Активувати правила MRF (модуль переписування повідомлень)",
@@ -121,7 +121,8 @@
     "placeholder": "напр. stepan",
     "logout_confirm": "Ви дійсно хочете вийти?",
     "logout_confirm_accept_button": "Вийти",
-    "logout_confirm_cancel_button": "Ні, хочу назад!"
+    "logout_confirm_cancel_button": "Ні, хочу назад!",
+    "logout_confirm_title": "Вихід"
   },
   "importer": {
     "error": "Під час імпортування файлу сталася помилка.",
@@ -164,7 +165,13 @@
     "broken_favorite": "Невідомий допис, шукаю його…",
     "error": "Помилка при оновленні сповіщень: {0}",
     "poll_ended": "опитування закінчено",
-    "submitted_report": "подав скаргу"
+    "submitted_report": "подав скаргу",
+    "unread_announcements": "{num} непрочитане оголошення | {num} непрочитаних оголошень",
+    "unread_chats": "{num} непрочитаний чат | {num} непрочитаних чатів",
+    "unread_follow_requests": "{num} новий запит на підписку | {num} нових запитів на підписку",
+    "configuration_tip": "Ви можете налаштувати, що відображати тут у {theSettings}. {dismiss}",
+    "configuration_tip_settings": "налаштування",
+    "configuration_tip_dismiss": "Не показувати знову"
   },
   "nav": {
     "chats": "Чати",
@@ -193,7 +200,9 @@
     "mobile_notifications_close": "Закрити сповіщення",
     "edit_nav_mobile": "Редагувати панель навігації",
     "announcements": "Анонси",
-    "search_close": "Закрити панель пошуку"
+    "search_close": "Закрити панель пошуку",
+    "mobile_notifications_mark_as_seen": "Позначити все прочитаним",
+    "quotes": "Цитування"
   },
   "media_modal": {
     "next": "Наступна",
@@ -267,7 +276,9 @@
       "activities": "Активності",
       "symbols": "Символи",
       "travel-and-places": "Подорожі та Місця"
-    }
+    },
+    "unpacked": "Розпаковані емоджі",
+    "hide_custom_emoji": "Приховати кастомні емодзі"
   },
   "post_status": {
     "content_type": {
@@ -282,7 +293,7 @@
     "new_status": "Створити допис",
     "direct_warning_to_first_only": "Цей допис побачать лише користувачі, що були згадані на початку повідомлення.",
     "direct_warning_to_all": "Цей допис побачать всі згадані користувачі.",
-    "default": "Що нового?",
+    "default": "Щойно приземлились у Борисполі.",
     "content_warning": "Тема (необов'язково)",
     "preview": "Попередній перегляд",
     "posting": "Відправляється",
@@ -304,7 +315,11 @@
     "post": "Опублікувати",
     "edit_unsupported_warning": "Pleroma не підтримує редагування згадувань чи голосувань.",
     "edit_status": "Редагувати допис",
-    "edit_remote_warning": "Інші віддалені інстанси можуть не підтримувати редагування та вони можуть не отримати актуальну версію допису."
+    "edit_remote_warning": "Інші віддалені інстанси можуть не підтримувати редагування та вони можуть не отримати актуальну версію допису.",
+    "content_type_selection": "Форматування допису",
+    "scope_notice_dismiss": "Закрити це сповіщення",
+    "reply_option": "Відповісти на цей допис",
+    "quote_option": "Процитувати допис"
   },
   "settings": {
     "blocks_imported": "Блокування імпортовані! Їх обробка триватиме певний час.",
@@ -529,7 +544,7 @@
         "header": "Попередній перегляд",
         "link": "невеличке посилання",
         "header_faint": "Це нормально",
-        "input": "Що нового?",
+        "input": "Щойно приземлився у Борисполі.",
         "checkbox": "Я переглянув умови використання",
         "fine_print": "Прочитайте наш {0} аби нічого нового не дізнатись!",
         "faint_link": "корисний підручник"
@@ -730,12 +745,12 @@
     "conversation_display_tree_quick": "Вигляд дерева",
     "disable_sticky_headers": "Не закріплювати заголовок колонки зверху на сторінці",
     "third_column_mode_none": "Не показувати третю колонку взагалі",
-    "third_column_mode_notifications": "Колонка сповіщень",
+    "third_column_mode_notifications": "Колонку сповіщень",
     "columns": "Колонки",
     "auto_update": "Автоматично показувати нові дописи",
     "use_websockets": "Використовувати вебсокети (Оновлення в реальному часі)",
     "use_at_icon": "Показувати {'@'} символ як іконку замість тексту",
-    "mute_bot_posts": "Приховати дописи ботів",
+    "mute_bot_posts": "Приховувати дописи ботів",
     "always_show_post_button": "Завжди показувати плаваючу кнопку «Новий Допис»",
     "hide_favorites_description": "Не показувати список моїх вподобань (люди все одно отримують сповіщення)",
     "third_column_mode": "Коли достатньо місця, показувати третю колонку, що містить",
@@ -743,7 +758,100 @@
     "wordfilter": "Фільтр слів",
     "mention_links": "Посилання для згадування",
     "user_profiles": "Профілі користувачів",
-    "notification_visibility_polls": "Закінчення опитувань, в яких ви проголосували"
+    "notification_visibility_polls": "Закінчення опитувань, в яких ви проголосували",
+    "remove_language": "Вилучити",
+    "primary_language": "Основна мова:",
+    "fallback_language": "Резервна мова {index}:",
+    "confirm_dialogs_deny_follow": "тим, як відмовити у запиті на підписку",
+    "confirm_dialogs_remove_follower": "видаленням підписника",
+    "notification_show_extra": "Показувати додаткові сповіщення в панелі сповіщень",
+    "notification_extra_chats": "Показувати непрочитані чати",
+    "notification_extra_announcements": "Показувати непрочитані оголошення",
+    "notification_extra_follow_requests": "Показувати нові запити на підписку",
+    "third_column_mode_postform": "Форму відправки повідомлень та панель навігації",
+    "notification_extra_tip": "Показати пораду з налаштувань для додаткових сповіщень",
+    "backup_running": "Резервне копіювання триває, оброблено {number} записи. | Резервне копіювання триває, оброблено {number} записів.",
+    "backup_failed": "Резервне копіювання не вдалося.",
+    "preview": "Попередній перегляд",
+    "url": "URL",
+    "birthday": {
+      "label": "День народження",
+      "show_birthday": "Показувати мій день народження"
+    },
+    "confirm_dialogs": "Запитувати підтвердження перед",
+    "confirm_dialogs_repeat": "поширенням допису",
+    "confirm_dialogs_unfollow": "скасуванням підписки",
+    "confirm_dialogs_block": "блокуванням користувача",
+    "confirm_dialogs_mute": "тим, як заглушити користувача",
+    "show_scrollbars": "Показувати смугу прокрутки на бічних панелях",
+    "column_sizes": "Розміри панелей",
+    "column_sizes_sidebar": "Бічна панель",
+    "add_language": "Додати резервну мову",
+    "confirm_dialogs_delete": "видаленням допису",
+    "confirm_dialogs_logout": "виходом із системи",
+    "confirm_dialogs_approve_follow": "схваленням запиту на підписку",
+    "mute_sensitive_posts": "Не стежити за чутливими постами",
+    "notification_visibility_follow_requests": "Запити на стеження",
+    "notification_visibility_reports": "Скарги",
+    "conversation_display_linear": "Линійний стиль",
+    "conversation_display_linear_quick": "Линійний вигляд",
+    "conversation_other_replies_button": "Показувати кнопку \"інші відповіді\"",
+    "conversation_other_replies_button_below": "Нижче статусів",
+    "mention_link_bolden_you": "Підсвічувати згадки в яких вас згадано",
+    "notification_setting_ignore_inactionable_seen_tip": "Це насправді не позначить ці сповіщення прочитанними, і ви все одно отримаєте сповіщення на робочому столі",
+    "notification_setting_unseen_at_top": "Показувати непрочитані сповіщення згори",
+    "mention_link_show_avatar": "Показувати світлину користувача поруч з посиланням",
+    "column_sizes_notifs": "Сповіщення",
+    "commit_value": "Зберегти",
+    "commit_value_tooltip": "Значення не збережено, натисніть цю кнопку щоб зберегти зміни",
+    "units": {
+      "time": {
+        "m": "хвилин",
+        "s": "секунд",
+        "h": "годин",
+        "d": "днів"
+      }
+    },
+    "hide_scrobbles_after": "Приховати прослуховування старіші чим",
+    "conversation_other_replies_button_inside": "Всередині статусів",
+    "mention_link_display": "Показувати посилання на згадки",
+    "user_popover_avatar_action": "Дія при натисканні на світлину",
+    "notification_setting_ignore_inactionable_seen": "Ігнорувати прочитаний статус сповіщень, на які неможливо відреагувати (вподобання, репости і тд)",
+    "user_popover_avatar_action_close": "Закрити панель",
+    "reset_value": "Скинути",
+    "enable_web_push_always_show_tip": "Деякі браузери (Chromium, Chrome) потребують щоб push повідомлення завжди були сповіщенням, інакше ви побачите загальне повідомлення \"Сайт було оновлено у фоні\". Увімкніть це налаштування щоб запобігти цьому повідомленню. Може призвести до подвійних сповіщень у інших браузерах.",
+    "autocomplete_select_first": "Автоматично обирати перше значення коли доступні результати автозаповнення",
+    "hide_scrobbles": "Приховати прослуховування",
+    "notification_visibility_in_column": "Показувати в панелі сповіщень",
+    "tree_advanced": "Дозволити більш гнучку навігацію при розгорнутому перегляді",
+    "tree_fade_ancestors": "Показувати похідні статуси більш блідим текстом",
+    "notification_setting_drawer_marks_as_seen": "Закриття панелі в мобільній версії позначає всі сповіщення прочитанними",
+    "user_popover_avatar_overlay": "Показувати картку користувача над світлиною",
+    "show_yous": "Показати (Вас)",
+    "notification_setting_annoyance": "Роздратування",
+    "notification_setting_filters_chrome_push": "У деяких браузерах (Google Chrome) може бути неможливо повністю відфільтрувати сповіщення за типом, коли вони надходять через Push",
+    "enable_web_push_always_show": "Завжди показувати web push сповіщення",
+    "user_popover_avatar_action_zoom": "Збільшити світлину",
+    "actor_type_description": "Позначення вашого акаунту як групового змусить його автоматично повторювати статуси, які вас згадують.",
+    "actor_type_Person": "звичайний користувач",
+    "actor_type_Service": "бот",
+    "actor_type_Group": "група",
+    "actor_type": "Цей акаунт:",
+    "notification_visibility_native_notifications": "Показувати нативне сповіщення",
+    "column_sizes_content": "Зміст",
+    "mention_link_display_full": "завжди повні імена (наприклад {'@'}petro{'@'}poroshenko.org)",
+    "force_theme_recompilation_debug": "Вимкнути кеш теми, увімкнути перекомпіляцію при кожному старті (ВІДЛАДКА)",
+    "mention_link_use_tooltip": "Показувати картку користувача при натисканні згадки",
+    "mention_link_show_avatar_quick": "Показувати світлину користувача поруч зі згадками",
+    "mention_link_fade_domain": "Скорочувати домени (наприклад {'@'}poroshenko.org в {'@'}petro{'@'}poroshenko.org)",
+    "hard_reset_value": "Скинути всі налаштування",
+    "reset_value_tooltip": "Відкинути чернетку",
+    "hard_reset_value_tooltip": "Прибрати налаштування зі сховища, буде використовуватись значення за замовчуванням",
+    "emoji_reactions_scale": "Масштабування реакцій",
+    "max_depth_in_thread": "Максимальна кількість рівнів треду для відображення за замовчуванням",
+    "mention_link_display_full_for_remote": "як повні імена тільки для користувачів з інших серверів (наприклад {'@'}petro{'@'}poroshenko.org)",
+    "mention_link_display_short": "завжди як короткі імена (наприклад {'@'}petro)",
+    "hide_actor_type_indication": "Приховати позначення типу акаунту (бот, група і тд) в постах"
   },
   "selectable_list": {
     "select_all": "Вибрати все"
@@ -760,7 +868,9 @@
       "password_required": "не може бути порожнім",
       "email_required": "не може бути порожнім",
       "fullname_required": "не може бути порожнім",
-      "username_required": "не може бути порожнім"
+      "username_required": "не може бути порожнім",
+      "birthday_required": "не може бути пустим",
+      "birthday_min_age": "має бути в або перед {date}"
     },
     "bio_placeholder": "напр.\nНаш народ завжди прагне волі для себе і бажає її для інших народів. Він боровся і бореться за правду і справедливість. Ми хочемо жити у згоді і взаємному шануванні з усіми народами доброї волі. Такі самі права визнаємо за іншими народами, за які боремося для себе.",
     "fullname_placeholder": "напр. Степан Бандера",
@@ -778,7 +888,9 @@
     "reason": "Причина реєстрації",
     "bio_optional": "Біографія (необов'язково)",
     "email_language": "Якою мовою ви бажаєте отримувати електронні листи від сервера?",
-    "email_optional": "Ел. пошта (необов'язково)"
+    "email_optional": "Ел. пошта (необов'язково)",
+    "birthday": "День народження:",
+    "birthday_optional": "День народження (необов'язково):"
   },
   "who_to_follow": {
     "who_to_follow": "На кого підписатися",
@@ -793,7 +905,10 @@
     "reject_follow_request": "Відхилити запит на підписку",
     "accept_follow_request": "Прийняти запит на підписку",
     "media_upload": "Завантажити медіа",
-    "bookmark": "Додати до закладок"
+    "bookmark": "Додати до закладок",
+    "toggle_expand": "Розгорнути або згорнути сповіщення щоб показати допис повністю",
+    "toggle_mute": "Розгорнути або згорнути сповіщення щоб відкрити заглушений контент",
+    "autocomplete_available": "{number} результат. Використовуйте клавіши зі стрілками для навігації. | {number} результатів доступно. Використовуйте клавіши зі стрілками для навігації."
   },
   "upload": {
     "error": {
@@ -865,7 +980,9 @@
     "hashtags": "Хештеги",
     "people": "Люди",
     "people_talking": "{count} людей говорять про це",
-    "person_talking": "{count} особа говорить про це"
+    "person_talking": "{count} особа говорить про це",
+    "no_more_results": "Більше немає",
+    "load_more": "Завантажити ще"
   },
   "user_card": {
     "statuses": "Дописи",
@@ -890,7 +1007,8 @@
       "grant_moderator": "Надати права модератора",
       "revoke_admin": "Позбавити прав адміністратора",
       "grant_admin": "Надати права адміністратора",
-      "quarantine": "Не розповсюджувати дописи на інших інстансах"
+      "quarantine": "Не розповсюджувати дописи на інших інстансах",
+      "delete_user_data_and_deactivate_confirmation": "Це назовсім видалить дані обліковки й вимкне її. Точно продовжити?"
     },
     "deny": "Відмовити",
     "block": "Заблокувати",
@@ -929,7 +1047,40 @@
     "bot": "Бот",
     "edit_profile": "Редагувати профіль",
     "deactivated": "Деактивований",
-    "follow_cancel": "Скасувати запит"
+    "follow_cancel": "Скасувати запит",
+    "block_confirm_title": "Блокування",
+    "block_confirm": "Точно заблокувати {user}?",
+    "mute_confirm_cancel_button": "Ні, не приглушувати",
+    "note_blank": "(Пусто)",
+    "edit_note_apply": "Застосувати",
+    "edit_note_cancel": "Скасувати",
+    "block_confirm_accept_button": "Так, заблокувати",
+    "block_confirm_cancel_button": "Ні, не блокувати",
+    "deny_confirm_title": "Відхилити запит на підписку",
+    "mute_confirm_accept_button": "Так, приглушити",
+    "mute_confirm": "Точно приглушити {user}?",
+    "edit_note": "Редагувати нотатку",
+    "mute_confirm_title": "Приглушення",
+    "mute_duration_prompt": "Приглушити користувача на (0 якщо назавжди):",
+    "approve_confirm_title": "Дозвіл підписатись",
+    "approve_confirm_accept_button": "Так, дозволити",
+    "approve_confirm_cancel_button": "Ні, скасувати",
+    "deny_confirm_accept_button": "Так, відхилити",
+    "deny_confirm_cancel_button": "Ні, скасувати",
+    "deny_confirm": "Ви точно хочете відхилити запит на підписку від {user}?",
+    "unfollow_confirm_title": "Відписка",
+    "unfollow_confirm": "Точно відписатись від {user}?",
+    "unfollow_confirm_accept_button": "Так, відписатись",
+    "unfollow_confirm_cancel_button": "Ні, не відписуватись",
+    "note": "Приватна нотатка",
+    "group": "Група",
+    "remove_follower_confirm": "Ви дійсно хочете прибрати користувача {user} з ваших фоловерів?",
+    "remove_follower_confirm_title": "Підтверджувати відписку",
+    "remove_follower": "Відписка",
+    "remove_follower_confirm_accept_button": "Прибрати",
+    "remove_follower_confirm_cancel_button": "Зберегти",
+    "birthday": "День народження: {birthday}",
+    "approve_confirm": "Прийняти запит на стеження від {user}?"
   },
   "status": {
     "copy_link": "Скопіювати посилання на допис",
@@ -965,7 +1116,44 @@
     "plus_more": "+{number} більше",
     "thread_show_full_with_icon": "{icon} {text}",
     "show_only_conversation_under_this": "Показати всі відповіді на цей допис",
-    "status_history": "Історія змін"
+    "status_history": "Історія змін",
+    "thread_hide": "Сховати гілку",
+    "open_gallery": "Відкрити галерею",
+    "repeat_confirm": "Точно поширити допис?",
+    "repeat_confirm_title": "Підтвердьте поширення",
+    "repeat_confirm_accept_button": "Так, поширити",
+    "repeat_confirm_cancel_button": "Ні, не поширювати",
+    "delete_error": "Помилка при видаленні допису: {0}",
+    "delete_confirm_accept_button": "Так, видалити",
+    "delete_confirm_cancel_button": "Ні, лишити",
+    "delete_confirm_title": "Підтвердьте видалення",
+    "you": "(ви)",
+    "collapse_attachments": "Згорнути вкладення",
+    "show_all_attachments": "Показати всі вкладення",
+    "hide_attachment": "Сховати вкладення",
+    "many_attachments": "Вкладень: {number} | Вкладень: {number}",
+    "attachment_stop_flash": "Зупинити Flash-плеєр",
+    "thread_follow": "Ще відповідей: {numStatus} | Ще відповідей: {numStatus}",
+    "remove_attachment": "Видалити вкладення",
+    "ancestor_follow": "Переглянути ще {numReplies} під цим дописом | Переглянути ще {numReplies} під цим дописом",
+    "show_all_conversation": "Показати всю розмову (ще дописів: {numStatus}) | Показати всю розмову (ще дописів: {numStatus})",
+    "move_up": "Посунути вкладення ліворуч",
+    "move_down": "Посунути вкладення праворуч",
+    "thread_show": "Показати гілку",
+    "mentions": "Згадки",
+    "thread_show_full": "Показати відповіді: ({numStatus}/{depth}) | Показати відповіді: ({numStatus}/{depth})",
+    "hide_quote": "Сховати процитований допис",
+    "display_quote": "Показати процитований допис",
+    "invisible_quote": "Процитований допис недоступний: {link}",
+    "replies_list_with_others": "Ще відповідей: {numReplies} | Ще відповідей: {numReplies}:",
+    "show_attachment_in_modal": "Показати вкладення у вікні",
+    "show_attachment_description": "Переглянути опис (натисніть саме вкладення, якщо опис не вміщається)",
+    "quotes": "Цитування",
+    "load_error": "Неможливо завантажити статус: {error}",
+    "loading": "Завантаження...",
+    "sensitive_muted": "Заглушення чутливого контенту",
+    "reaction_count_label": "{num} людина відреагувала | {num} людей відреагували",
+    "more_actions": "Більше дій для цього статусу"
   },
   "timeline": {
     "no_more_statuses": "Більше немає дописів",
@@ -980,7 +1168,9 @@
     "repeated": "поширив(-ла)",
     "no_retweet_hint": "Запис, позначено як \"тільки для підписників\" або \"особисте\" і тому не може бути поширений",
     "socket_broke": "Втрачено з'єднання у реальному часі: код {0}",
-    "socket_reconnected": "Встановлено з'єднання у реальному часі"
+    "socket_reconnected": "Встановлено з'єднання у реальному часі",
+    "quick_view_settings": "Налаштування швидкого перегляду",
+    "quick_filter_settings": "Налаштування швидкого фільтру"
   },
   "user_reporting": {
     "submit": "Відправити",
@@ -1026,5 +1216,171 @@
     "submit_edit_action": "Надіслати",
     "cancel_edit_action": "Скасувати",
     "inactive_message": "Це оголошення неактивне"
+  },
+  "lists": {
+    "really_delete": "Дійсно видалити список?",
+    "error": "Помилка при роботі зі списками: {0}",
+    "is_in_list": "Вже є у списку",
+    "editing_list": "Редагування списку {listTitle}",
+    "creating_list": "Створення нового списку",
+    "search": "Знайти користувачів",
+    "create": "Створити",
+    "save": "Зберегти зміни",
+    "manage_members": "Керувати учасниками списку",
+    "new": "Новий список",
+    "title": "Назва списку",
+    "delete": "Видалити список",
+    "following_only": "Лише за ким ви стежите",
+    "lists": "Списки",
+    "manage_lists": "Керувати списками",
+    "remove_from_list": "Видалити зі списку",
+    "add_to_list": "Додати до списку",
+    "update_title": "Зберегти назву",
+    "add_members": "Шукати більше користувачів"
+  },
+  "update": {
+    "update_changelog": "Щоб дізнатись більше інформації, дивіться {theFullChangelog}.",
+    "update_bugs": "Будь ласка, повідомляйте про будь-які проблеми та помилки на {pleromaGitlab}, оскільки ми внесли багато змін, і навіть після ретельно проведених перевірок, ми можемо щось пропустити. Ми заздалегідь вдячні за ваші відгуки щодо проблем, з якими ви можете зіткнутися, а також пропозиції щодо вдосконалення Pleroma та Pleroma-FE.",
+    "update_changelog_here": "повний список змін",
+    "big_update_title": "Хвилинку уваги",
+    "update_bugs_gitlab": "Pleroma GitLab",
+    "big_update_content": "У нас не було оновлень протягом тривалого часу, тому речі можуть мати інакший вигляд, аніж ви звикли.",
+    "art_by": "Арт від {linkToArtist}"
+  },
+  "unicode_domain_indicator": {
+    "tooltip": "Цей домен містить не-ASCII символи."
+  },
+  "admin_dash": {
+    "window_title": "Адміністрування",
+    "tabs": {
+      "instance": "Сервер (Instance)",
+      "frontends": "Фронтенди",
+      "nodb": "Немає конфігурації бази даних",
+      "emoji": "Емодзі",
+      "limits": "Ліміти"
+    },
+    "nodb": {
+      "heading": "Конфіг бази даних вимкнено",
+      "text": "Вам потрібно змінити налаштування бекенду таким чином, щоб {property} дорівнювало {value}, детальніше у {documentation}.",
+      "text2": "Більшість налаштувань будуть недоступні.",
+      "documentation": "документація"
+    },
+    "frontend": {
+      "install": "Встановити",
+      "install_version": "Встановити версію {version}",
+      "success_installing_frontend": "Фронтенд версії {version} успішно встановлено",
+      "failure_installing_frontend": "Не вдалось встановити версію {version}: {reason}",
+      "repository": "Посилання на репозиторій",
+      "versions": "Доступні версії",
+      "is_default_custom": "(За замовчуванням, версія: {version})",
+      "build_url": "URL збірки",
+      "reinstall": "Перевстановити",
+      "default_frontend_unavail": "Налаштування фронтенду недоступні, адже вони потребують конфігурації бази даних",
+      "default_frontend_tip": "Фронтенд за замовчуванням будуть бачити всі користувачі. На сьогоднішній день немає можливості обирати персональний фронтенд під кожного користувача. Якщо ви не користуватиметесь PleromaFE, то, скоріш за все, вам доведеться користуватись старим та забагованим AdminFE для налаштування свого серверу, допоки ми не придумаємо нічого кращого.",
+      "set_default": "Призначити за замовчуванням",
+      "set_default_version": "Призначити версію {version} за замовчуванням",
+      "wip_notice": "Будь ласка майте на увазі що цей розділ знаходиться у процесі розробки та певні функції можуть не працювати.",
+      "default_frontend": "Фронтенд за замовчуванням",
+      "available_frontends": "Доступно для встановлення",
+      "is_default": "(За замовчуванням)",
+      "more_install_options": "Більше варіантів встановлення",
+      "more_default_options": "Більше налаштувань за замовчуванням"
+    },
+    "emoji": {
+      "adding_new": "Додати новий емодзі",
+      "shortcode": "Шорткод",
+      "filename": "Назва файлу",
+      "add_file": "Додати файл",
+      "importFS": "Імпортувати емодзі з файлової системи",
+      "global_actions": "Глобальні дії",
+      "reload": "Перезавантажити емодзі",
+      "error": "Помилка: {0}",
+      "delete_pack": "Видалити набір",
+      "create_pack": "Створити набір",
+      "create": "Створити",
+      "new_pack_name": "Нова назва набору",
+      "emoji_packs": "Набори емодзі",
+      "remote_packs": "Віддалені набори",
+      "do_list": "Список",
+      "remote_pack_instance": "Сервер з віддаленими наборами",
+      "homepage": "Домашня сторінка",
+      "edit_pack": "Редагувати набір",
+      "description": "Опис",
+      "fallback_src": "Джерело заміни",
+      "share": "Поділитись",
+      "fallback_sha256": "Заміна SHA256",
+      "delete_confirm": "Ви впевнені, що хочете видалити {0}?",
+      "download_pack": "Завантажити набір",
+      "downloading_pack": "Завантаження {0}",
+      "download": "Завантажити",
+      "new_filename": "Назва файлу, залиште порожнім для автозаповнення",
+      "download_as_name": "Нове ім'я",
+      "editing": "Редагування {0}",
+      "delete_title": "Видалити?",
+      "download_as_name_full": "Нове ім'я, залиште порожнім для перевикористання",
+      "files": "Файли",
+      "metadata_changed": "Метадані відрізняються від збережених",
+      "replace_warning": "Це ЗАМІНИТЬ локальний набір з такою самою назвою",
+      "emoji_changed": "Незбережені зміни файлу емодзі, перевірте підсвічений емодзі",
+      "emoji_pack": "Набір емодзі",
+      "revert_meta": "Відновити метадані",
+      "save": "Зберегти",
+      "delete": "Видалити",
+      "revert": "Відновити",
+      "save_meta": "Зберегти метадані",
+      "new_shortcode": "Шорткод, залиште порожнім для автозаповнення"
+    },
+    "instance": {
+      "restrict": {
+        "activities": "Доступ до статусів/активностей",
+        "header": "Обмежити доступ для анонімних відвідувачів",
+        "timelines": "Доступ до стрічок",
+        "profiles": "Доступ до профілів користувачів",
+        "description": "Детальне налаштування для контролю доступу до певних розділів API. За замовчуванням (невизначений стан) доступ буде заборонений якщо сервер не публічний, увімкнене налаштування забороняє доступ навіть до публічного серверу, вимкнене налаштування дозволяє доступ навіть до приватного серверу. Неправильні налаштування можуть призвести до небажаних наслідків: наприклад, якщо доступ до профілю обмежений, то пости будуть відображатись без інформації про профіль."
+      },
+      "registrations": "Заявки на реєстрацію",
+      "instance": "Інформація про сервер",
+      "access": "Доступ до серверу",
+      "captcha_header": "CAPTCHA",
+      "kocaptcha": "налаштування KoCaptcha"
+    },
+    "reset_all": "Скинути все",
+    "commit_all": "Зберегти все",
+    "captcha": {
+      "kocaptcha": "KoCaptchа",
+      "native": "Нативний"
+    },
+    "limits": {
+      "uploads": "Ліміти вкладень",
+      "users": "Ліміти користувацьких профілей",
+      "profile_fields": "Ліміти полів у профілі",
+      "arbitrary_limits": "Довільні ліміти",
+      "user_uploads": "Ліміти медіа у профілі",
+      "posts": "Ліміти дописів"
+    },
+    "temp_overrides": {
+      ":pleroma": {
+        ":instance": {
+          ":limit_to_local_content": {
+            "label": "Обмежити пошуки локальним контентом",
+            "description": "Вимикає глобальних пошук по мережі для неавторизованих (за замовчуванням), всіх користувачів або нікого"
+          },
+          ":description_limit": {
+            "description": "Максимальна довжина поля опису вкладень",
+            "label": "Обмеження"
+          },
+          ":public": {
+            "description": "Вимкнення цього зробить API доступним тільки залогіненим користувачам, таким чином Публічна стрічка та стрічка Федерації будуть недоступні неавторизованим користувачам.",
+            "label": "Публічний сервер"
+          },
+          ":background_image": {
+            "label": "Тло",
+            "description": "Тло (використовується PleromaFE)"
+          }
+        }
+      }
+    },
+    "wip_notice": "Ця адмінська панель експериментальна, {adminFeLink}.",
+    "old_ui_link": "старий інтерфейс адмінки доступний тут"
   }
 }
diff --git a/src/i18n/zh.json b/src/i18n/zh.json
index 8ea4c1e09..37ea03fc0 100644
--- a/src/i18n/zh.json
+++ b/src/i18n/zh.json
@@ -130,23 +130,32 @@
     "edit_nav_mobile": "自定义导航栏",
     "edit_pinned": "编辑固定的项目",
     "mobile_sidebar": "切换移动设备侧栏",
-    "search_close": "关闭搜索栏"
+    "search_close": "关闭搜索栏",
+    "mobile_notifications_mark_as_seen": "全部已阅",
+    "quotes": "引用"
   },
   "notifications": {
     "broken_favorite": "未知的状态，正在搜索中…",
-    "favorited_you": "喜欢了你的状态",
-    "followed_you": "关注了你",
+    "favorited_you": "喜欢了您的状态",
+    "followed_you": "关注了您",
     "load_older": "加载更早的通知",
     "notifications": "通知",
     "read": "已阅！",
-    "repeated_you": "转发了你的状态",
+    "repeated_you": "转发了您的状态",
     "no_more_notifications": "没有更多的通知",
-    "reacted_with": "作出了 {0} 的反应",
+    "reacted_with": "作出了 {0} 的回应",
     "migrated_to": "迁移到了",
-    "follow_request": "想要关注你",
+    "follow_request": "想要关注您",
     "error": "取得通知时发生错误：{0}",
     "poll_ended": "投票结束了",
-    "submitted_report": "提交举报"
+    "submitted_report": "提交举报",
+    "unread_announcements": "{num} 条未读公告",
+    "unread_chats": "{num} 条未读聊天讯息",
+    "unread_follow_requests": "{num} 个新关注请求",
+    "configuration_tip": "可以在 {theSettings} 里定制什么会显示在这里。{dismiss}",
+    "configuration_tip_settings": "设置",
+    "configuration_tip_dismiss": "不再显示",
+    "subscribed_status": "已发送"
   },
   "polls": {
     "add_poll": "增加投票",
@@ -173,11 +182,12 @@
     "load_older": "加载更早的互动",
     "moves": "用户迁移",
     "reports": "举报",
-    "emoji_reactions": "表情回应"
+    "emoji_reactions": "表情回应",
+    "statuses": "订阅"
   },
   "post_status": {
     "new_status": "发布新状态",
-    "account_not_locked_warning": "你的帐号没有 {0}。任何人都可以关注你并浏览你的上锁内容。",
+    "account_not_locked_warning": "您的帐号没有 {0}。任何人都可以关注您并浏览您的上锁内容。",
     "account_not_locked_warning_link": "上锁",
     "attachments_sensitive": "标记附件为敏感内容",
     "content_type": {
@@ -193,12 +203,12 @@
     "posting": "发送中",
     "scope_notice": {
       "public": "本条内容可以被所有人看到",
-      "private": "关注你的人才能看到本条内容",
+      "private": "关注您的人才能看到本条内容",
       "unlisted": "本条内容既不在公共时间线，也不会在所有已知网络上可见"
     },
     "scope": {
       "direct": "私信 - 只发送给被提及的用户",
-      "private": "仅关注者 - 只有关注了你的人能看到",
+      "private": "仅关注者 - 只有关注了您的人能看到",
       "public": "公共 - 发送到公共时间轴",
       "unlisted": "不公开 - 不会发送到公共时间轴"
     },
@@ -206,13 +216,15 @@
     "preview": "预览",
     "media_description": "媒体描述",
     "media_description_error": "更新媒体失败，请重试",
-    "empty_status_error": "不能发布没有内容、没有附件的发文",
+    "empty_status_error": "不能发布没有内容、没有附件的帖子",
     "post": "发送",
     "edit_remote_warning": "其它远程实例可能不支持编辑并且无法接收您的帖子的最新版本。",
     "edit_unsupported_warning": "Pleroma 不支持对提及或投票进行编辑。",
     "edit_status": "编辑状态",
     "content_type_selection": "发帖格式",
-    "scope_notice_dismiss": "关闭此提示"
+    "scope_notice_dismiss": "关闭此提示",
+    "reply_option": "回复这条状态",
+    "quote_option": "引用这条状态"
   },
   "registration": {
     "bio": "简介",
@@ -225,7 +237,7 @@
     "new_captcha": "点击图片获取新的验证码",
     "username_placeholder": "例如：lain",
     "fullname_placeholder": "例如：岩仓玲音",
-    "bio_placeholder": "例如：\n你好，我是玲音。\n我是一个住在日本郊区的动画少女。你可能在 Wired 见过我。",
+    "bio_placeholder": "例如：\n你好，我是玲音。\n我是一个住在日本郊区的动画少女。您可能在 Wired 见过我。",
     "validations": {
       "username_required": "不能留空",
       "fullname_required": "不能留空",
@@ -239,7 +251,7 @@
     "reason_placeholder": "此实例的注册需要手动批准。\n请让管理员知道您为什么想要注册。",
     "reason": "注册理由",
     "register": "注册",
-    "email_language": "你想从服务器收到什么语言的邮件？",
+    "email_language": "您想从服务器收到什么语言的邮件？",
     "bio_optional": "介绍（可选）",
     "email_optional": "电子邮件（可选）",
     "birthday": "生日：",
@@ -281,7 +293,7 @@
     "background": "背景",
     "bio": "简介",
     "block_export": "屏蔽名单导出",
-    "block_export_button": "导出你的屏蔽名单到一个 csv 文件",
+    "block_export_button": "导出您的屏蔽名单到一个 csv 文件",
     "block_import": "屏蔽名单导入",
     "block_import_error": "导入屏蔽名单出错",
     "blocks_imported": "屏蔽名单导入成功！需要一点时间来处理。",
@@ -302,10 +314,10 @@
     "current_profile_banner": "您当前的横幅图片",
     "data_import_export_tab": "数据导入/导出",
     "default_vis": "默认可见范围",
-    "delete_account": "删除账户",
-    "delete_account_description": "永久删除你的帐号和所有数据。",
-    "delete_account_error": "删除账户时发生错误，如果一直删除不了，请联系实例管理员。",
-    "delete_account_instructions": "在下面输入您的密码来确认删除账户。",
+    "delete_account": "删除账号",
+    "delete_account_description": "永久删除您的帐号和所有数据。",
+    "delete_account_error": "删除账号时发生错误。如果一直删除不了，请联系实例管理员。",
+    "delete_account_instructions": "在下面输入您的密码来确认删除账号。",
     "avatar_size_instruction": "推荐的头像图片最小尺寸为 150x150 像素。",
     "export_theme": "导出预置主题",
     "filtering": "过滤器",
@@ -380,11 +392,11 @@
     "autohide_floating_post_button": "自动隐藏新帖子的按钮（移动设备）",
     "saving_err": "保存设置时发生错误",
     "saving_ok": "设置已保存",
-    "search_user_to_block": "搜索你想屏蔽的用户",
-    "search_user_to_mute": "搜索你想要隐藏的用户",
+    "search_user_to_block": "搜索您想屏蔽的用户",
+    "search_user_to_mute": "搜索您想要隐藏的用户",
     "security_tab": "安全",
     "scope_copy": "回复时复制可见范围（私信中永远会复制）",
-    "minimal_scopes_mode": "使发文可见范围的选项最少化",
+    "minimal_scopes_mode": "使帖子可见范围的选项最小化",
     "set_new_avatar": "设置新头像",
     "set_new_profile_background": "设置新的个人资料背景",
     "set_new_profile_banner": "设置新的横幅图片",
@@ -394,7 +406,7 @@
     "subject_line_email": "类似电子邮件： \"re: 主题\"",
     "subject_line_mastodon": "类似 mastodon: 与原主题相同",
     "subject_line_noop": "不要复制",
-    "post_status_content_type": "发文状态内容类型",
+    "post_status_content_type": "帖子状态内容类型",
     "stop_gifs": "鼠标悬停时播放GIF",
     "streaming": "滚动到顶部时自动推送新内容",
     "text": "文本",
@@ -538,7 +550,8 @@
           "interface": "界面",
           "input": "输入框",
           "post": "发帖文字",
-          "postCode": "帖子中使用等间距文字（富文本）"
+          "postCode": "帖子中使用等间距文字（富文本）",
+          "monospace": "等宽文本"
         },
         "family": "字体名称",
         "size": "大小 (in px)",
@@ -558,7 +571,43 @@
         "header_faint": "这很正常",
         "checkbox": "我已经浏览了条款及细则",
         "link": "一个棒棒的小小链接"
-      }
+      },
+      "custom_theme_used": "（自定义主题）",
+      "themes2_outdated": "V2 主题的编辑器正在被淘汰并且最终会被新的利用 V3 主题引擎的编辑器取代。但是体验有可能会被降级并且不稳定。",
+      "appearance_tab_note": "在这个标签页的更改不会影响使用的主题，所以导出的主题会和界面显示的主题不同",
+      "update_preview": "更新预览",
+      "themes3": {
+        "define": "覆盖",
+        "hacks": {
+          "underlay_overrides": "更改底色",
+          "underlay_override_mode_none": "主题默认",
+          "underlay_override_mode_opaque": "使用单色更改",
+          "underlay_override_mode_transparent": "完全移除（有可能破外一些主题）",
+          "force_interface_roundness": "覆盖界面圆角/锐度",
+          "forced_roundness_mode_disabled": "使用主题默认",
+          "forced_roundness_mode_sharp": "强制使用锐利边角",
+          "forced_roundness_mode_nonsharp": "强制使用不太锋利（1px 圆角）的边角",
+          "forced_roundness_mode_round": "强制使用圆角"
+        },
+        "font": {
+          "group-builtin": "浏览器默认字体",
+          "builtin": {
+            "serif": "衬线字体",
+            "sans-serif": "无衬线字体",
+            "monospace": "等宽字体",
+            "inherit": "未更改"
+          },
+          "group-local": "本地字体",
+          "local-unavailable1": "不可用的本地字体列表",
+          "local-unavailable2": "使用手动输入来指定自定义字体",
+          "font_list_unavailable": "无法找到本地字体：{error}",
+          "lookup_local_fonts": "加载这台电脑的本地字体列表",
+          "enter_manually": "手动输入字体名称",
+          "entry": "输入 {fontFamily}",
+          "select": "选择字体"
+        }
+      },
+      "interface_font_user_override": "覆盖使用的主题/浏览器字体"
     },
     "version": {
       "title": "版本",
@@ -574,12 +623,12 @@
     "notification_setting_privacy_option": "在通知推送中隐藏发送者和内容",
     "notification_setting_privacy": "隐私",
     "hide_follows_count_description": "不显示关注数",
-    "notification_visibility_emoji_reactions": "互动",
+    "notification_visibility_emoji_reactions": "回应",
     "notification_visibility_moves": "用户迁移",
     "new_email": "新邮箱",
-    "emoji_reactions_on_timeline": "在时间线上显示表情符号互动",
+    "emoji_reactions_on_timeline": "在时间线上显示表情符号回应",
     "notification_setting_hide_notification_contents": "隐藏推送通知中的发送者与内容信息",
-    "notification_setting_block_from_strangers": "屏蔽来自你没有关注的用户的通知",
+    "notification_setting_block_from_strangers": "屏蔽来自您没有关注的用户的通知",
     "type_domains_to_mute": "搜索需要隐藏的域名",
     "useStreamingApi": "实时接收帖子和通知",
     "user_mutes": "用户",
@@ -610,15 +659,15 @@
     "mutes_imported": "隐藏名单导入成功！处理它们将需要一段时间。",
     "mute_import_error": "导入隐藏名单出错",
     "mute_import": "隐藏名单导入",
-    "mute_export_button": "导出你的隐藏名单到一个 csv 文件",
+    "mute_export_button": "导出您的隐藏名单到一个 csv 文件",
     "mute_export": "隐藏名单导出",
     "hide_wallpaper": "隐藏实例壁纸",
     "setting_changed": "与默认设置不同",
     "more_settings": "更多设置",
-    "sensitive_by_default": "默认标记发文为敏感内容",
+    "sensitive_by_default": "默认标记帖子为敏感内容",
     "reply_visibility_self_short": "只显示对我本人的回复",
     "reply_visibility_following_short": "显示对我关注的人的回复",
-    "hide_all_muted_posts": "不显示已隐藏的发文",
+    "hide_all_muted_posts": "不显示已隐藏的帖子",
     "hide_media_previews": "隐藏媒体预览",
     "word_filter": "词语过滤",
     "save": "保存更改",
@@ -656,14 +705,14 @@
     "move_account_target": "目标账号（例如 {example}）",
     "moved_account": "账号移动好了。",
     "move_account_error": "移动账号时出错：{error}",
-    "setting_server_side": "这个设置是捆绑到你的个人资料的，能影响所有会话和客户端",
+    "setting_server_side": "这个设置是捆绑到您的个人资料的，能影响所有会话和客户端",
     "post_look_feel": "文章的样子跟感受",
     "email_language": "从服务器收邮件的语言",
-    "account_backup_description": "这个允许你下载一份账号信息和文章的存档，但是现在还不能导入到 Pleroma 账号里。",
+    "account_backup_description": "这个允许您下载一份账号信息和文章的存档，但是现在还不能导入到 Pleroma 账号里。",
     "backup_not_ready": "备份还没准备好。",
     "add_backup_error": "添加新备份时出错：{error}",
     "add_alias_error": "添加别名时出错：{error}",
-    "move_account_notes": "如果你想把账号移动到别的地方，你必须去目标账号，然后加一个指向这里的别名。",
+    "move_account_notes": "如果您想把账号移动到别的地方，您必须去目标账号，然后加一个指向这里的别名。",
     "wordfilter": "词语过滤器",
     "user_profiles": "用户资料",
     "third_column_mode_notifications": "通知栏",
@@ -677,7 +726,7 @@
     },
     "hide_favorites_description": "不显示我的喜欢列表（人们仍然会收到通知）",
     "third_column_mode": "当有足够的空间时，显示第三栏包含",
-    "third_column_mode_postform": "主要的发文形式和导航",
+    "third_column_mode_postform": "主要的帖子形式和导航",
     "columns": "分栏",
     "user_popover_avatar_overlay": "在用户头像上显示用户弹出窗口",
     "navbar_column_stretch": "延伸导航栏至分栏宽度",
@@ -697,12 +746,12 @@
     "max_depth_in_thread": "默认显示同主题帖子中的最大层数",
     "hide_wordfiltered_statuses": "隐藏经过词语过滤的状态",
     "hide_muted_threads": "不显示已隐藏的同主题帖子",
-    "notification_visibility_polls": "你所投的投票的结束于",
+    "notification_visibility_polls": "您所投的投票的结束于",
     "tree_advanced": "允许在树状视图中进行更灵活的导航",
-    "tree_fade_ancestors": "以模糊的文字显示当前状态的原型",
+    "tree_fade_ancestors": "以模糊的文字显示当前状态的上级",
     "conversation_display_linear": "线性样式",
     "mention_link_fade_domain": "淡化域名（例如：{'@'}example.org 中的 {'@'}foo{'@'}example.org）",
-    "mention_link_bolden_you": "当你被提及时突出显示提及你",
+    "mention_link_bolden_you": "当您被提及时突出显示提及您",
     "user_popover_avatar_action": "弹出式头像点击动作",
     "user_popover_avatar_action_zoom": "缩放头像",
     "user_popover_avatar_action_close": "关闭弹出窗口",
@@ -738,7 +787,66 @@
     "mention_link_show_avatar": "在链接旁边显示用户头像",
     "mention_link_show_avatar_quick": "在提及内容旁边显示用户头像",
     "user_popover_avatar_action_open": "打开个人资料",
-    "autocomplete_select_first": "当有自动完成的结果时，自动选择第一个候选项"
+    "autocomplete_select_first": "当有自动完成的结果时，自动选择第一个候选项",
+    "url": "URL",
+    "preview": "预览",
+    "commit_value": "保存",
+    "commit_value_tooltip": "当前值未保存，请按此按钮以提交您的修改",
+    "reset_value": "重置",
+    "reset_value_tooltip": "重置草稿",
+    "hard_reset_value": "硬重置",
+    "hard_reset_value_tooltip": "从存储中移除设置，强制使用默认值",
+    "emoji_reactions_scale": "表情回应比例系数",
+    "notification_show_extra": "在通知栏里显示额外通知",
+    "notification_extra_chats": "显示未读聊天",
+    "notification_extra_announcements": "显示未读公告",
+    "notification_extra_follow_requests": "显示新的关注请求",
+    "notification_extra_tip": "显示额外通知的定制提示",
+    "notification_visibility_follow_requests": "关注请求",
+    "notification_visibility_reports": "举报",
+    "mute_sensitive_posts": "隐藏敏感帖子",
+    "notification_visibility_in_column": "在侧栏/菜单显示通知菜单",
+    "notification_visibility_native_notifications": "显示本地通知",
+    "units": {
+      "time": {
+        "m": "分钟",
+        "s": "秒",
+        "h": "小时",
+        "d": "天"
+      }
+    },
+    "hide_scrobbles_after": "隐藏比这个时间更早的 scrobble",
+    "notification_setting_ignore_inactionable_seen": "忽略无法回复通知（喜欢，转发等）的已阅状态",
+    "notification_setting_unseen_at_top": "将未读通知置顶",
+    "notification_setting_ignore_inactionable_seen_tip": "如果您继续，这将不会标记这些通知为已读，并且您仍会接收到桌面推送通知",
+    "actor_type": "账号：",
+    "actor_type_description": "将您的账号标记为组会使其转发所有提及它的状态。",
+    "actor_type_Person": "正常用户",
+    "actor_type_Service": "机器人",
+    "actor_type_Group": "组",
+    "hide_actor_type_indication": "隐藏帖子中账号类型（机器人，组等）的表示",
+    "notification_setting_annoyance": "烦扰",
+    "notification_setting_drawer_marks_as_seen": "关闭菜单（移动端）来标记全部通知为已阅",
+    "enable_web_push_always_show_tip": "一些浏览器（Chromium，Chrome）需要推送信息才能显示通知，否则会显示“网页在背景发生了更改”的通知，勾选这个选项可以防止这种通知显示，因为 Chrome 在标签页激活时会隐藏网页推送通知。可能会在其他浏览器中显示双重通知。",
+    "enable_web_push_always_show": "总是显示网页推送通知",
+    "force_theme_recompilation_debug": "禁用主题缓存，强制在每次启动时重新编译（调试）",
+    "notification_setting_filters_chrome_push": "在一些浏览器中（Chrome），有可能无法完全按照类型过滤通过推送传递的通知",
+    "hide_scrobbles": "隐藏 scrobble",
+    "appearance": "外观",
+    "confirm_new_setting": "确认新的设置？",
+    "confirm_new_question": "是否保留这些设置？设置将在 10 秒后还原。",
+    "revert": "恢复",
+    "confirm": "确定",
+    "text_size": "文字与界面大小",
+    "text_size_tip": "用 {0} 作为绝对值，{1} 会根据浏览器默认文字大小进行缩放。",
+    "text_size_tip2": "{0} 之外的值可能会破坏一些功能和主题",
+    "emoji_size": "表情符号大小",
+    "navbar_size": "顶栏大小",
+    "panel_header_size": "面板标题大小",
+    "visual_tweaks": "细微外观调整",
+    "theme_debug": "显示当遇到透明背景时背景主题引擎的假设（调试）",
+    "scale_and_layout": "界面大小与布局",
+    "notification_visibility_statuses": "订阅"
   },
   "time": {
     "day": "{0} 天",
@@ -834,7 +942,7 @@
     "nsfw": "NSFW",
     "external_source": "外部来源",
     "expand": "展开",
-    "you": "（你）",
+    "you": "（您）",
     "plus_more": "还有 {number} 个",
     "many_attachments": "文章有 {number} 个附件",
     "collapse_attachments": "折起附件",
@@ -869,7 +977,17 @@
     "delete_confirm_accept_button": "删除",
     "delete_confirm_cancel_button": "保留",
     "show_attachment_in_modal": "在媒体模式中显示",
-    "status_history": "状态历史"
+    "status_history": "状态历史",
+    "delete_error": "删除状态时出错：{0}",
+    "reaction_count_label": "{num} 人作出了表情回应",
+    "invisible_quote": "引用的状态不可用：{link}",
+    "hide_quote": "隐藏引用的状态",
+    "display_quote": "显示引用的状态",
+    "quotes": "引用",
+    "sensitive_muted": "正在隐藏敏感内容",
+    "loading": "加载中...",
+    "load_error": "无法加载动态：{error}",
+    "more_actions": "状态的更多动作"
   },
   "user_card": {
     "approve": "核准",
@@ -884,14 +1002,14 @@
     "followees": "正在关注",
     "followers": "关注者",
     "following": "正在关注！",
-    "follows_you": "关注了你！",
-    "its_you": "就是你！",
+    "follows_you": "关注了您！",
+    "its_you": "就是您！",
     "media": "媒体",
     "mute": "隐藏",
     "muted": "已隐藏",
     "per_day": "每天",
     "remote_follow": "跨站关注",
-    "report": "报告",
+    "report": "举报",
     "statuses": "状态",
     "subscribe": "订阅",
     "unsubscribe": "退订",
@@ -916,9 +1034,9 @@
       "sandbox": "强制帖子为只有关注者可看",
       "disable_remote_subscription": "禁止从远程实例关注用户",
       "disable_any_subscription": "完全禁止关注用户",
-      "quarantine": "从联合实例中禁止用户帖子",
+      "quarantine": "不许帖子传入别站",
       "delete_user": "删除用户",
-      "delete_user_data_and_deactivate_confirmation": "这将永久删除该账户的数据并停用该账户。你完全确定吗？"
+      "delete_user_data_and_deactivate_confirmation": "这将永久删除该账号的数据并停用该账号。您完全确定吗？"
     },
     "hidden": "已隐藏",
     "show_repeats": "显示转发",
@@ -966,7 +1084,8 @@
     "note_blank": "（空）",
     "edit_note": "编辑备注",
     "edit_note_apply": "应用",
-    "edit_note_cancel": "取消"
+    "edit_note_cancel": "取消",
+    "group": "组"
   },
   "user_profile": {
     "timeline_title": "用户时间线",
@@ -974,10 +1093,10 @@
     "profile_loading_error": "抱歉，载入个人资料时出错。"
   },
   "user_reporting": {
-    "title": "报告 {0}",
-    "add_comment_description": "此报告会发送给您的实例监察员。您可以在下面提供更多详细信息解释报告的缘由：",
+    "title": "举报 {0}",
+    "add_comment_description": "此举报会发送给您的实例监察员。您可以在下面提供更多详细信息解释举报的缘由：",
     "additional_comments": "其它信息",
-    "forward_description": "这个账号来自另一个服务器。是否同时发送一份报告副本到那里？",
+    "forward_description": "这个账号来自另一个服务器。是否同时发送一份举报副本到那里？",
     "forward_to": "转发 {0}",
     "submit": "提交",
     "generic_error": "当处理您的请求时，发生了一个错误。"
@@ -993,7 +1112,7 @@
     "favorite": "喜欢",
     "user_settings": "用户设置",
     "reject_follow_request": "拒绝关注请求",
-    "add_reaction": "添加互动",
+    "add_reaction": "添加回应",
     "bookmark": "书签",
     "accept_follow_request": "接受关注请求",
     "toggle_expand": "展开或折叠通知以显示帖子全文",
@@ -1063,7 +1182,8 @@
       "smileys-and-emotion": "表情与情感"
     },
     "regional_indicator": "地区指示符 {letter}",
-    "unpacked": "拆分的表情符号"
+    "unpacked": "未分组的表情符号",
+    "hide_custom_emoji": "隐藏自定义表情符号"
   },
   "about": {
     "mrf": {
@@ -1130,7 +1250,7 @@
     "chats": "聊天",
     "delete": "删除",
     "message_user": "发消息给 {nickname}",
-    "you": "你："
+    "you": "您："
   },
   "announcements": {
     "page_header": "公告",
@@ -1171,9 +1291,9 @@
     "update_changelog": "关于变化的更多细节，请参见 {theFullChangelog} 。",
     "update_changelog_here": "完整的更新日志",
     "big_update_title": "请忍耐一下",
-    "big_update_content": "我们已经有一段时间没有发布发行版，所以事情的外观和感觉可能与你习惯的不一样。",
-    "update_bugs": "请在 {pleromaGitlab} 上报告任何问题和bug，因为我们已经改变了很多，虽然我们进行了彻底的测试，并且自己使用了开发版本，但我们可能错过了一些东西。我们欢迎你对你可能遇到的问题或如何改进Pleroma和Pleroma-FE提出反馈和建议。",
-    "art_by": "Art by {linkToArtist}"
+    "big_update_content": "我们已经有一段时间没有发布发行版，所以事情的外观和感觉可能与您习惯的不一样。",
+    "update_bugs": "请在 {pleromaGitlab} 上报告任何问题和 bug，因为我们改变了软件中的很多东西，虽然我们进行了彻底的测试，并且我们自己使用开发版本，但我们可能错过了一些东西。我们欢迎您对您可能遇到的问题或如何改进 Pleroma 和 Pleroma-FE 提出反馈和建议。",
+    "art_by": "{linkToArtist} 的作品"
   },
   "lists": {
     "search": "搜索用户",
@@ -1195,5 +1315,138 @@
     "lists": "列表",
     "new": "新的列表",
     "title": "列表标题"
+  },
+  "admin_dash": {
+    "window_title": "管理员",
+    "old_ui_link": "旧的管理界面在此处",
+    "reset_all": "重置全部",
+    "commit_all": "保存全部",
+    "tabs": {
+      "nodb": "无数据库配置",
+      "instance": "实例",
+      "limits": "限制",
+      "frontends": "前端",
+      "emoji": "表情符号"
+    },
+    "nodb": {
+      "heading": "数据库配置已禁用",
+      "documentation": "文档",
+      "text2": "大多数配置选项将不可用。",
+      "text": "您需要修改后端配置文件，以便将 {property} 设置为 {value}，更多内容请参见 {documentation}。"
+    },
+    "captcha": {
+      "native": "本地",
+      "kocaptcha": "KoCaptcha"
+    },
+    "instance": {
+      "instance": "实例信息",
+      "registrations": "用户注册",
+      "captcha_header": "验证码",
+      "kocaptcha": "KoCaptcha 设置",
+      "access": "实例访问",
+      "restrict": {
+        "header": "限制匿名访客的访问",
+        "timelines": "时间线访问",
+        "profiles": "用户个人资料访问",
+        "activities": "状态/活动访问",
+        "description": "允许/不允许访问特定 API 的详细设置。默认情况下（不确定状态），如果实例不是公开的，它将拒绝访问；勾选复选框意味着即使实例是公开的，也拒绝访问；不勾选意味着即使实例是私有的，也允许访问。请注意，如果某些设置被设定，可能会发生意想不到的行为，例如，如果个人资料访问被禁用，显示的帖文将不包含个人资料信息。"
+      }
+    },
+    "limits": {
+      "arbitrary_limits": "任意限制",
+      "posts": "帖文限制",
+      "uploads": "附件限制",
+      "users": "用户个人资料限制",
+      "profile_fields": "个人资料字段限制",
+      "user_uploads": "个人资料媒体限制"
+    },
+    "frontend": {
+      "repository": "存储库链接",
+      "versions": "可用版本",
+      "build_url": "构建产物 URL",
+      "reinstall": "重新安装",
+      "is_default": "（默认）",
+      "is_default_custom": "（默认，版本：{version}）",
+      "install": "安装",
+      "install_version": "安装版本 {version}",
+      "more_install_options": "更多安装选项",
+      "more_default_options": "更多默认设置选项",
+      "set_default": "设为默认",
+      "set_default_version": "将版本 {version} 设为默认",
+      "wip_notice": "请注意，此部分是一个WIP，缺乏某些功能，因为前端管理的后台实现并不完整。",
+      "default_frontend": "默认前端",
+      "default_frontend_tip": "默认的前端将显示给所有用户。目前还没有办法让用户选择自己的前端。如果您不使用 PleromaFE，您很可能不得不使用旧的和有问题的 AdminFE 来进行实例配置，直到我们替换它。",
+      "available_frontends": "可供安装",
+      "failure_installing_frontend": "无法安装前端 {version}：{reason}",
+      "success_installing_frontend": "前端 {version} 成功安装",
+      "default_frontend_unavail": "默认前端设置不可以，因为这需要数据库中的配置"
+    },
+    "temp_overrides": {
+      ":pleroma": {
+        ":instance": {
+          ":public": {
+            "label": "实例是公开的",
+            "description": "禁用此功能将使所有的 API 只能被已登录用户访问，这将使公共和联邦时间线无法被匿名访客访问。"
+          },
+          ":limit_to_local_content": {
+            "label": "将搜索限于本地内容",
+            "description": "禁用未认证用户（默认）、所有用户或无人的全局网络搜索"
+          },
+          ":description_limit": {
+            "label": "限制",
+            "description": "附件描述的字数限制"
+          },
+          ":background_image": {
+            "label": "背景图片",
+            "description": "背景图片（主要使用于 PleromaFE）"
+          }
+        }
+      }
+    },
+    "wip_notice": "此管理仪表板是实验性和 WIP 的，{adminFeLink}。",
+    "emoji": {
+      "remote_pack_instance": "远程表情包实例",
+      "fallback_src": "回退源",
+      "fallback_sha256": "回退 SHA256",
+      "delete_confirm": "您确定要删除 {0} 吗？",
+      "download_pack": "下载表情包",
+      "files": "文件",
+      "downloading_pack": "正在下载 {0}",
+      "download": "下载",
+      "download_as_name": "新名称",
+      "download_as_name_full": "新名称，留空来使用旧的名称",
+      "emoji_changed": "未保存的表情符号文件更改，检查突出显示的的表情符号",
+      "replace_warning": "这将替换本地同名的表情包",
+      "reload": "重新加载表情符号",
+      "create_pack": "创建表情包",
+      "emoji_pack": "表情包",
+      "save_meta": "保存元数据",
+      "delete": "删除",
+      "revert": "恢复",
+      "add_file": "添加文件",
+      "adding_new": "添加新的表情符号",
+      "shortcode": "简码",
+      "filename": "文件名",
+      "new_shortcode": "简码，留空来自动推断",
+      "emoji_packs": "表情包",
+      "remote_packs": "远程表情包",
+      "do_list": "列表",
+      "edit_pack": "编辑表情包",
+      "description": "描述",
+      "global_actions": "全局动作",
+      "importFS": "从文件系统导入表情符号",
+      "error": "错误：{0}",
+      "delete_pack": "删除表情包",
+      "new_pack_name": "新的表情包名称",
+      "create": "创建",
+      "homepage": "主页",
+      "share": "分享",
+      "save": "保存",
+      "revert_meta": "回复元数据",
+      "new_filename": "文件名，留空来自动推断",
+      "editing": "正在编辑 {0}",
+      "delete_title": "确定删除？",
+      "metadata_changed": "元数据和保存的不同"
+    }
   }
 }
diff --git a/src/i18n/zh_Hant.json b/src/i18n/zh_Hant.json
index 96c752155..2baed8980 100644
--- a/src/i18n/zh_Hant.json
+++ b/src/i18n/zh_Hant.json
@@ -546,7 +546,7 @@
       "backend_version": "後端版本",
       "frontend_version": "前端版本"
     },
-    "virtual_scrolling": "優化時間線渲染",
+    "virtual_scrolling": "最佳化時間軸算繪",
     "import_mutes_from_a_csv_file": "從CSV文件導入靜音",
     "mutes_imported": "靜音導入了！處理它們將需要一段時間。",
     "mute_import": "靜音導入",
@@ -576,7 +576,10 @@
     },
     "sensitive_by_default": "默認標記發文為敏感內容",
     "right_sidebar": "在右側顯示側邊欄",
-    "hide_shoutbox": "隱藏實例留言框"
+    "hide_shoutbox": "隱藏實例留言框",
+    "mention_link_display_short": "總是使用短名（如： {'@'}foo）",
+    "mention_link_display": "顯式提及連結",
+    "use_at_icon": "將{'@'}改用圖標顯示，不用文字"
   },
   "chats": {
     "more": "更多",
diff --git a/src/lib/persisted_state.js b/src/lib/persisted_state.js
index ab9a79b39..cbd203bd7 100644
--- a/src/lib/persisted_state.js
+++ b/src/lib/persisted_state.js
@@ -1,7 +1,7 @@
 import merge from 'lodash.merge'
-import localforage from 'localforage'
 import { each, get, set, cloneDeep } from 'lodash'
 import { useInterfaceStore } from '../stores/interface'
+import { storage } from './storage.js'
 
 let loaded = false
 
@@ -27,7 +27,7 @@ const saveImmedeatelyActions = [
 ]
 
 const defaultStorage = (() => {
-  return localforage
+  return storage
 })()
 
 export default function createPersistedState ({
@@ -39,7 +39,7 @@ export default function createPersistedState ({
   },
   setState = (key, state, storage) => {
     if (!loaded) {
-      console.log('waiting for old state to be loaded...')
+      console.info('waiting for old state to be loaded...')
       return Promise.resolve()
     } else {
       return storage.setItem(key, state)
@@ -66,7 +66,7 @@ export default function createPersistedState ({
         }
         loaded = true
       } catch (e) {
-        console.log("Couldn't load state")
+        console.error("Couldn't load state")
         console.error(e)
         loaded = true
       }
@@ -87,8 +87,8 @@ export default function createPersistedState ({
               })
           }
         } catch (e) {
-          console.log("Couldn't persist state:")
-          console.log(e)
+          console.error("Couldn't persist state:")
+          console.error(e)
         }
       })
     }
diff --git a/src/lib/storage.js b/src/lib/storage.js
new file mode 100644
index 000000000..25a49abc9
--- /dev/null
+++ b/src/lib/storage.js
@@ -0,0 +1,3 @@
+import localforage from 'localforage'
+
+export const storage = localforage
diff --git a/src/main.js b/src/main.js
index 4ebfb4ffb..1d6b5fb02 100644
--- a/src/main.js
+++ b/src/main.js
@@ -6,16 +6,27 @@ import './lib/event_target_polyfill.js'
 
 import instanceModule from './modules/instance.js'
 import statusesModule from './modules/statuses.js'
+import notificationsModule from './modules/notifications.js'
+import listsModule from './modules/lists.js'
 import usersModule from './modules/users.js'
 import apiModule from './modules/api.js'
 import configModule from './modules/config.js'
-import serverSideConfigModule from './modules/serverSideConfig.js'
+import profileConfigModule from './modules/profileConfig.js'
 import serverSideStorageModule from './modules/serverSideStorage.js'
+import adminSettingsModule from './modules/adminSettings.js'
+import shoutModule from './modules/shout.js'
 import oauthModule from './modules/oauth.js'
 import authFlowModule from './modules/auth_flow.js'
 import oauthTokensModule from './modules/oauth_tokens.js'
-
+import reportsModule from './modules/reports.js'
+import pollsModule from './modules/polls.js'
+import postStatusModule from './modules/postStatus.js'
+import editStatusModule from './modules/editStatus.js'
+import statusHistoryModule from './modules/statusHistory.js'
+import draftsModule from './modules/drafts.js'
 import chatsModule from './modules/chats.js'
+import announcementsModule from './modules/announcements.js'
+import bookmarkFoldersModule from './modules/bookmark_folders.js'
 
 import { createI18n } from 'vue-i18n'
 
@@ -35,7 +46,7 @@ const i18n = createI18n({
   messages: messages.default
 })
 
-messages.setLanguage(i18n, currentLocale)
+messages.setLanguage(i18n.global, currentLocale)
 
 const persistedStateOptions = {
   paths: [
@@ -47,42 +58,78 @@ const persistedStateOptions = {
 };
 
 (async () => {
-  let storageError = false
-  const plugins = [pushNotifications]
-  const pinia = createPinia()
-  try {
-    const persistedState = await createPersistedState(persistedStateOptions)
-    plugins.push(persistedState)
-  } catch (e) {
-    console.error(e)
-    storageError = true
+  const isFox = Math.floor(Math.random() * 2) > 0 ? '_fox' : ''
+
+  const splashError = (i18n, e) => {
+    const throbber = document.querySelector('#throbber')
+    throbber.addEventListener('animationend', () => {
+      document.querySelector('#mascot').src = `/static/pleromatan_orz${isFox}.png`
+    })
+    throbber.classList.add('dead')
+    document.querySelector('#status').textContent = i18n.global.t('splash.error')
+    console.error('PleromaFE failed to initialize: ', e)
+    document.querySelector('#statusError').textContent = e
+    document.querySelector('#statusStack').textContent = e.stack
+    document.querySelector('#statusError').style = 'display: block'
+    document.querySelector('#statusStack').style = 'display: block'
   }
 
-  // Temporarily storing as a global variable while we migrate to Pinia
-  window.vuex = createStore({
-    modules: {
-      instance: instanceModule,
-      // TODO refactor users/statuses modules, they depend on each other
-      users: usersModule,
-      statuses: statusesModule,
-      api: apiModule,
-      config: configModule,
-      serverSideConfig: serverSideConfigModule,
-      serverSideStorage: serverSideStorageModule,
-      oauth: oauthModule,
-      authFlow: authFlowModule,
-      oauthTokens: oauthTokensModule,
-      chats: chatsModule
-    },
-    plugins,
-    strict: false // Socket modifies itself, let's ignore this for now.
-    // strict: process.env.NODE_ENV !== 'production'
-  })
+  window.splashError = e => splashError(i18n, e)
+  window.splashUpdate = key => {
+    if (document.querySelector('#status')) {
+      document.querySelector('#status').textContent = i18n.global.t(key)
+    }
+  }
 
-  const store = window.vuex
-
-  // Temporarily passing pinia and vuex stores along with storageError result until migration is fully complete.
-  afterStoreSetup({ pinia, store, storageError, i18n })
+  try {
+    let storageError
+    const plugins = [pushNotifications]
+    const pinia = createPinia()
+    try {
+      const persistedState = await createPersistedState(persistedStateOptions)
+      plugins.push(persistedState)
+    } catch (e) {
+      console.error('Storage error', e)
+      storageError = e
+    }
+    document.querySelector('#mascot').src = `/static/pleromatan_apology${isFox}.png`
+    document.querySelector('#status').removeAttribute('class')
+    document.querySelector('#status').textContent = i18n.global.t('splash.loading')
+    document.querySelector('#splash-credit').textContent = i18n.global.t('update.art_by', { linkToArtist: 'pipivovott' })
+    const store = createStore({
+      modules: {
+        instance: instanceModule,
+        // TODO refactor users/statuses modules, they depend on each other
+        users: usersModule,
+        statuses: statusesModule,
+        notifications: notificationsModule,
+        api: apiModule,
+        config: configModule,
+        profileConfig: profileConfigModule,
+        serverSideStorage: serverSideStorageModule,
+        adminSettings: adminSettingsModule,
+        oauth: oauthModule,
+        authFlow: authFlowModule,
+        oauthTokens: oauthTokensModule,
+        drafts: draftsModule,
+        chats: chatsModule,
+        bookmarkFolders: bookmarkFoldersModule
+      },
+      plugins,
+      options: {
+        devtools: process.env.NODE_ENV !== 'production'
+      },
+      strict: false // Socket modifies itself, let's ignore this for now.
+      // strict: process.env.NODE_ENV !== 'production'
+    })
+    if (storageError) {
+      // Temporarily passing pinia and vuex stores along with storageError result until migration is fully complete.
+      store.dispatch('pushGlobalNotice', { messageKey: 'errors.storage_unavailable', level: 'error' })
+    }
+    return await afterStoreSetup({ pinia, store, storageError, i18n })
+  } catch (e) {
+    splashError(i18n, e)
+  }
 })()
 
 // These are inlined by webpack's DefinePlugin
diff --git a/src/modules/adminSettings.js b/src/modules/adminSettings.js
new file mode 100644
index 000000000..ef28f6e0b
--- /dev/null
+++ b/src/modules/adminSettings.js
@@ -0,0 +1,229 @@
+import { set, get, cloneDeep, differenceWith, isEqual, flatten } from 'lodash'
+
+export const defaultState = {
+  frontends: [],
+  loaded: false,
+  needsReboot: null,
+  config: null,
+  modifiedPaths: null,
+  descriptions: null,
+  draft: null,
+  dbConfigEnabled: null
+}
+
+export const newUserFlags = {
+  ...defaultState.flagStorage
+}
+
+const adminSettingsStorage = {
+  state: {
+    ...cloneDeep(defaultState)
+  },
+  mutations: {
+    setInstanceAdminNoDbConfig (state) {
+      state.loaded = false
+      state.dbConfigEnabled = false
+    },
+    setAvailableFrontends (state, { frontends }) {
+      state.frontends = frontends.map(f => {
+        f.installedRefs = f.installed_refs
+        if (f.name === 'pleroma-fe') {
+          f.refs = ['master', 'develop']
+        } else {
+          f.refs = [f.ref]
+        }
+        return f
+      })
+    },
+    updateAdminSettings (state, { config, modifiedPaths }) {
+      state.loaded = true
+      state.dbConfigEnabled = true
+      state.config = config
+      state.modifiedPaths = modifiedPaths
+    },
+    updateAdminDescriptions (state, { descriptions }) {
+      state.descriptions = descriptions
+    },
+    updateAdminDraft (state, { path, value }) {
+      const [group, key, subkey] = path
+      const parent = [group, key, subkey]
+
+      set(state.draft, path, value)
+
+      // force-updating grouped draft to trigger refresh of group settings
+      if (path.length > parent.length) {
+        set(state.draft, parent, cloneDeep(get(state.draft, parent)))
+      }
+    },
+    resetAdminDraft (state) {
+      state.draft = cloneDeep(state.config)
+    }
+  },
+  actions: {
+    loadFrontendsStuff ({ state, rootState, dispatch, commit }) {
+      rootState.api.backendInteractor.fetchAvailableFrontends()
+        .then(frontends => commit('setAvailableFrontends', { frontends }))
+    },
+    loadAdminStuff ({ state, rootState, dispatch, commit }) {
+      rootState.api.backendInteractor.fetchInstanceDBConfig()
+        .then(backendDbConfig => {
+          if (backendDbConfig.error) {
+            if (backendDbConfig.error.status === 400) {
+              backendDbConfig.error.json().then(errorJson => {
+                if (/configurable_from_database/.test(errorJson.error)) {
+                  commit('setInstanceAdminNoDbConfig')
+                }
+              })
+            }
+          } else {
+            dispatch('setInstanceAdminSettings', { backendDbConfig })
+          }
+        })
+      if (state.descriptions === null) {
+        rootState.api.backendInteractor.fetchInstanceConfigDescriptions()
+          .then(backendDescriptions => dispatch('setInstanceAdminDescriptions', { backendDescriptions }))
+      }
+    },
+    setInstanceAdminSettings ({ state, commit, dispatch }, { backendDbConfig }) {
+      const config = state.config || {}
+      const modifiedPaths = new Set()
+      backendDbConfig.configs.forEach(c => {
+        const path = [c.group, c.key]
+        if (c.db) {
+          // Path elements can contain dot, therefore we use ' -> ' as a separator instead
+          // Using strings for modified paths for easier searching
+          c.db.forEach(x => modifiedPaths.add([...path, x].join(' -> ')))
+        }
+        const convert = (value) => {
+          if (Array.isArray(value) && value.length > 0 && value[0].tuple) {
+            return value.reduce((acc, c) => {
+              return { ...acc, [c.tuple[0]]: convert(c.tuple[1]) }
+            }, {})
+          } else {
+            return value
+          }
+        }
+        set(config, path, convert(c.value))
+      })
+      commit('updateAdminSettings', { config, modifiedPaths })
+      commit('resetAdminDraft')
+    },
+    setInstanceAdminDescriptions ({ state, commit, dispatch }, { backendDescriptions }) {
+      const convert = ({ children, description, label, key = '<ROOT>', group, suggestions }, path, acc) => {
+        const newPath = group ? [group, key] : [key]
+        const obj = { description, label, suggestions }
+        if (Array.isArray(children)) {
+          children.forEach(c => {
+            convert(c, newPath, obj)
+          })
+        }
+        set(acc, newPath, obj)
+      }
+
+      const descriptions = {}
+      backendDescriptions.forEach(d => convert(d, '', descriptions))
+      commit('updateAdminDescriptions', { descriptions })
+    },
+
+    // This action takes draft state, diffs it with live config state and then pushes
+    // only differences between the two. Difference detection only work up to subkey (third) level.
+    pushAdminDraft ({ rootState, state, commit, dispatch }) {
+      // TODO cleanup paths in modifiedPaths
+      const convert = (value) => {
+        if (typeof value !== 'object') {
+          return value
+        } else if (Array.isArray(value)) {
+          return value.map(convert)
+        } else {
+          return Object.entries(value).map(([k, v]) => ({ tuple: [k, v] }))
+        }
+      }
+
+      // Getting all group-keys used in config
+      const allGroupKeys = flatten(
+        Object
+          .entries(state.config)
+          .map(
+            ([group, lv1data]) => Object
+              .keys(lv1data)
+              .map((key) => ({ group, key }))
+          )
+      )
+
+      // Only using group-keys where there are changes detected
+      const changedGroupKeys = allGroupKeys.filter(({ group, key }) => {
+        return !isEqual(state.config[group][key], state.draft[group][key])
+      })
+
+      // Here we take all changed group-keys and get all changed subkeys
+      const changed = changedGroupKeys.map(({ group, key }) => {
+        const config = state.config[group][key]
+        const draft = state.draft[group][key]
+
+        // We convert group-key value into entries arrays
+        const eConfig = Object.entries(config)
+        const eDraft = Object.entries(draft)
+
+        // Then those entries array we diff so only changed subkey entries remain
+        // We use the diffed array to reconstruct the object and then shove it into convert()
+        return ({ group, key, value: convert(Object.fromEntries(differenceWith(eDraft, eConfig, isEqual))) })
+      })
+
+      rootState.api.backendInteractor.pushInstanceDBConfig({
+        payload: {
+          configs: changed
+        }
+      })
+        .then(() => rootState.api.backendInteractor.fetchInstanceDBConfig())
+        .then(backendDbConfig => dispatch('setInstanceAdminSettings', { backendDbConfig }))
+    },
+    pushAdminSetting ({ rootState, state, commit, dispatch }, { path, value }) {
+      const [group, key, ...rest] = Array.isArray(path) ? path : path.split(/\./g)
+      const clone = {} // not actually cloning the entire thing to avoid excessive writes
+      set(clone, rest, value)
+
+      // TODO cleanup paths in modifiedPaths
+      const convert = (value) => {
+        if (typeof value !== 'object') {
+          return value
+        } else if (Array.isArray(value)) {
+          return value.map(convert)
+        } else {
+          return Object.entries(value).map(([k, v]) => ({ tuple: [k, v] }))
+        }
+      }
+
+      rootState.api.backendInteractor.pushInstanceDBConfig({
+        payload: {
+          configs: [{
+            group,
+            key,
+            value: convert(clone)
+          }]
+        }
+      })
+        .then(() => rootState.api.backendInteractor.fetchInstanceDBConfig())
+        .then(backendDbConfig => dispatch('setInstanceAdminSettings', { backendDbConfig }))
+    },
+    resetAdminSetting ({ rootState, state, commit, dispatch }, { path }) {
+      const [group, key, subkey] = path.split(/\./g)
+
+      state.modifiedPaths.delete(path)
+
+      return rootState.api.backendInteractor.pushInstanceDBConfig({
+        payload: {
+          configs: [{
+            group,
+            key,
+            delete: true,
+            subkeys: [subkey]
+          }]
+        }
+      })
+        .then(() => rootState.api.backendInteractor.fetchInstanceDBConfig())
+        .then(backendDbConfig => dispatch('setInstanceAdminSettings', { backendDbConfig }))
+    }
+  }
+}
+
+export default adminSettingsStorage
diff --git a/src/modules/api.js b/src/modules/api.js
index 0000ddc8e..e01b2aef8 100644
--- a/src/modules/api.js
+++ b/src/modules/api.js
@@ -89,6 +89,9 @@ const api = {
           const { state, commit, dispatch, rootState } = store
           const timelineData = rootState.statuses.timelines.friends
           state.mastoUserSocket = state.backendInteractor.startUserSocket({ store })
+          state.mastoUserSocket.addEventListener('pleroma:authenticated', () => {
+            state.mastoUserSocket.subscribe('user')
+          })
           state.mastoUserSocket.addEventListener(
             'message',
             ({ detail: message }) => {
@@ -204,12 +207,14 @@ const api = {
       timeline = 'friends',
       tag = false,
       userId = false,
-      listId = false
+      listId = false,
+      statusId = false,
+      bookmarkFolderId = false
     }) {
       if (store.state.fetchers[timeline]) return
 
       const fetcher = store.state.backendInteractor.startFetchingTimeline({
-        timeline, store, userId, listId, tag
+        timeline, store, userId, listId, statusId, bookmarkFolderId, tag
       })
       store.commit('addFetcher', { fetcherName: timeline, fetcher })
     },
@@ -273,6 +278,18 @@ const api = {
       store.commit('removeFetcher', { fetcherName: 'lists', fetcher })
     },
 
+    // Bookmark folders
+    startFetchingBookmarkFolders (store) {
+      if (store.state.fetchers.bookmarkFolders) return
+      const fetcher = store.state.backendInteractor.startFetchingBookmarkFolders({ store })
+      store.commit('addFetcher', { fetcherName: 'bookmarkFolders', fetcher })
+    },
+    stopFetchingBookmarkFolders (store) {
+      const fetcher = store.state.fetchers.bookmarkFolders
+      if (!fetcher) return
+      store.commit('removeFetcher', { fetcherName: 'bookmarkFolders', fetcher })
+    },
+
     // Pleroma websocket
     setWsToken (store, token) {
       store.commit('setWsToken', token)
diff --git a/src/modules/bookmark_folders.js b/src/modules/bookmark_folders.js
new file mode 100644
index 000000000..c276adf4b
--- /dev/null
+++ b/src/modules/bookmark_folders.js
@@ -0,0 +1,66 @@
+import { remove, find } from 'lodash'
+
+export const defaultState = {
+  allFolders: []
+}
+
+export const mutations = {
+  setBookmarkFolders (state, value) {
+    state.allFolders = value
+  },
+  setBookmarkFolder (state, { id, name, emoji, emoji_url: emojiUrl }) {
+    const entry = find(state.allFolders, { id })
+    if (!entry) {
+      state.allFolders.push({ id, name, emoji, emoji_url: emojiUrl })
+    } else {
+      entry.name = name
+      entry.emoji = emoji
+      entry.emoji_url = emojiUrl
+    }
+  },
+  deleteBookmarkFolder (state, { folderId }) {
+    remove(state.allFolders, folder => folder.id === folderId)
+  }
+}
+
+const actions = {
+  setBookmarkFolders ({ commit }, value) {
+    commit('setBookmarkFolders', value)
+  },
+  createBookmarkFolder ({ rootState, commit }, { name, emoji }) {
+    return rootState.api.backendInteractor.createBookmarkFolder({ name, emoji })
+      .then((folder) => {
+        commit('setBookmarkFolder', folder)
+        return folder
+      })
+  },
+  setBookmarkFolder ({ rootState, commit }, { folderId, name, emoji }) {
+    return rootState.api.backendInteractor.updateBookmarkFolder({ folderId, name, emoji })
+      .then((folder) => {
+        commit('setBookmarkFolder', folder)
+        return folder
+      })
+  },
+  deleteBookmarkFolder ({ rootState, commit }, { folderId }) {
+    rootState.api.backendInteractor.deleteBookmarkFolder({ folderId })
+    commit('deleteBookmarkFolder', { folderId })
+  }
+}
+
+export const getters = {
+  findBookmarkFolderName: state => id => {
+    const folder = state.allFolders.find(folder => folder.id === id)
+
+    if (!folder) return
+    return folder.name
+  }
+}
+
+const bookmarkFolders = {
+  state: defaultState,
+  mutations,
+  actions,
+  getters
+}
+
+export default bookmarkFolders
diff --git a/src/modules/chats.js b/src/modules/chats.js
index f28c26039..0f1540db2 100644
--- a/src/modules/chats.js
+++ b/src/modules/chats.js
@@ -65,6 +65,7 @@ const chats = {
       const newChatMessageSideEffects = (chat) => {
         maybeShowChatNotification(store, chat)
       }
+      commit('addNewUsers', chats.map(k => k.account).filter(k => k))
       commit('addNewChats', { dispatch, chats, rootGetters, newChatMessageSideEffects })
     },
     updateChat ({ commit }, { chat }) {
diff --git a/src/modules/config.js b/src/modules/config.js
index bbabebad6..8e61adff9 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -1,11 +1,23 @@
 import Cookies from 'js-cookie'
-import { setPreset, applyTheme, applyConfig } from '../services/style_setter/style_setter.js'
+import { applyConfig } from '../services/style_setter/style_setter.js'
 import messages from '../i18n/messages'
+import { set } from 'lodash'
 import localeService from '../services/locale/locale.service.js'
 import { useI18nStore } from '../stores/i18n.js'
 import { useInterfaceStore } from '../stores/interface.js'
 
 const BACKEND_LANGUAGE_COOKIE_NAME = 'userLanguage'
+const APPEARANCE_SETTINGS_KEYS = new Set([
+  'sidebarColumnWidth',
+  'contentColumnWidth',
+  'notifsColumnWidth',
+  'textSize',
+  'navbarSize',
+  'panelHeaderSize',
+  'forcedRoundness',
+  'emojiSize',
+  'emojiReactionsScale'
+])
 
 const browserLocale = (window.navigator.language || 'en').split('-')[0]
 
@@ -20,15 +32,40 @@ export const multiChoiceProperties = [
   'conversationDisplay', // tree | linear
   'conversationOtherRepliesButton', // below | inside
   'mentionLinkDisplay', // short | full_for_remote | full
-  'userPopoverAvatarAction' // close | zoom | open
+  'userPopoverAvatarAction', // close | zoom | open
+  'unsavedPostAction' // save | discard | confirm
 ]
 
 export const defaultState = {
   expertLevel: 0, // used to track which settings to show and hide
-  colors: {},
-  theme: undefined,
-  customTheme: undefined,
-  customThemeSource: undefined,
+
+  // Theme  stuff
+  theme: undefined, // Very old theme store, stores preset name, still in use
+
+  // V1
+  colors: {}, // VERY old theme store, just colors of V1, probably not even used anymore
+
+  // V2
+  customTheme: undefined, // "snapshot", previously was used as actual theme store for V2 so it's still used in case of PleromaFE downgrade event.
+  customThemeSource: undefined, // "source", stores original theme data
+
+  // V3
+  style: null,
+  styleCustomData: null,
+  palette: null,
+  paletteCustomData: null,
+  themeDebug: false, // debug mode that uses computed backgrounds instead of real ones to debug contrast functions
+  forceThemeRecompilation: false, //  flag that forces recompilation on boot even if cache exists
+  theme3hacks: { // Hacks, user overrides that are independent of theme used
+    underlay: 'none',
+    fonts: {
+      interface: undefined,
+      input: undefined,
+      post: undefined,
+      monospace: undefined
+    }
+  },
+
   hideISP: false,
   hideInstanceWallpaper: false,
   hideShoutbox: false,
@@ -37,10 +74,13 @@ export const defaultState = {
   hideMutedThreads: undefined, // instance default
   hideWordFilteredPosts: undefined, // instance default
   muteBotStatuses: undefined, // instance default
+  muteSensitiveStatuses: undefined, // instance default
   collapseMessageWithSubject: undefined, // instance default
   padEmoji: true,
   hideAttachments: false,
   hideAttachmentsInConv: false,
+  hideScrobbles: false,
+  hideScrobblesAfter: '2d',
   maxThumbnails: 16,
   hideNsfw: true,
   preloadImage: true,
@@ -57,6 +97,7 @@ export const defaultState = {
   notificationVisibility: {
     follows: true,
     mentions: true,
+    statuses: true,
     likes: true,
     repeats: true,
     moves: true,
@@ -66,7 +107,21 @@ export const defaultState = {
     chatMention: true,
     polls: true
   },
+  notificationNative: {
+    follows: true,
+    mentions: true,
+    statuses: true,
+    likes: false,
+    repeats: false,
+    moves: false,
+    emojiReactions: false,
+    followRequest: true,
+    reports: true,
+    chatMention: true,
+    polls: true
+  },
   webPushNotifications: false,
+  webPushAlwaysShowNotifications: false,
   muteWords: [],
   highlight: {},
   interfaceLanguage: browserLocale,
@@ -84,11 +139,14 @@ export const defaultState = {
   modalOnUnfollow: undefined, // instance default
   modalOnBlock: undefined, // instance default
   modalOnMute: undefined, // instance default
+  modalOnMuteConversation: undefined, // instance default
+  modalOnMuteDomain: undefined, // instance default
   modalOnDelete: undefined, // instance default
   modalOnLogout: undefined, // instance default
   modalOnApproveFollow: undefined, // instance default
   modalOnDenyFollow: undefined, // instance default
   modalOnRemoveUserFromFollowers: undefined, // instance default
+  modalMobileCenter: undefined,
   playVideosInModal: false,
   useOneClickNsfw: false,
   useContainFit: true,
@@ -99,7 +157,12 @@ export const defaultState = {
   sidebarColumnWidth: '25rem',
   contentColumnWidth: '45rem',
   notifsColumnWidth: '25rem',
-  emojiReactionsScale: 1.0,
+  emojiReactionsScale: undefined,
+  textSize: undefined, // instance default
+  emojiSize: undefined, // instance default
+  navbarSize: undefined, // instance default
+  panelHeaderSize: undefined, // instance default
+  forcedRoundness: undefined, // instance default
   navbarColumnStretch: false,
   greentext: undefined, // instance default
   useAtIcon: undefined, // instance default
@@ -118,8 +181,22 @@ export const defaultState = {
   conversationTreeAdvanced: undefined, // instance default
   conversationOtherRepliesButton: undefined, // instance default
   conversationTreeFadeAncestors: undefined, // instance default
+  showExtraNotifications: undefined, // instance default
+  showExtraNotificationsTip: undefined, // instance default
+  showChatsInExtraNotifications: undefined, // instance default
+  showAnnouncementsInExtraNotifications: undefined, // instance default
+  showFollowRequestsInExtraNotifications: undefined, // instance default
   maxDepthInThread: undefined, // instance default
-  autocompleteSelect: undefined // instance default
+  autocompleteSelect: undefined, // instance default
+  closingDrawerMarksAsSeen: undefined, // instance default
+  unseenAtTop: undefined, // instance default
+  ignoreInactionableSeen: undefined, // instance default
+  unsavedPostAction: undefined, // instance default
+  autoSaveDraft: undefined, // instance default
+  useAbsoluteTimeFormat: undefined, // instance default
+  absoluteTimeFormatMinAge: undefined, // instance default
+  absoluteTime12h: undefined, // instance default
+  imageCompression: true
 }
 
 // caching the instance default properties
@@ -149,8 +226,12 @@ const config = {
     }
   },
   mutations: {
+    setOptionTemporarily (state, { name, value }) {
+      set(state, name, value)
+      applyConfig(state)
+    },
     setOption (state, { name, value }) {
-      state[name] = value
+      set(state, name, value)
     },
     setHighlight (state, { user, color, type }) {
       const data = this.state.config.highlight[user]
@@ -179,33 +260,86 @@ const config = {
     setHighlight ({ commit, dispatch }, { user, color, type }) {
       commit('setHighlight', { user, color, type })
     },
+    setOptionTemporarily ({ commit, dispatch, state, rootState }, { name, value }) {
+      if (rootState.interface.temporaryChangesTimeoutId !== null) {
+        console.warn('Can\'t track more than one temporary change')
+        return
+      }
+      const oldValue = state[name]
+
+      commit('setOptionTemporarily', { name, value })
+
+      const confirm = () => {
+        dispatch('setOption', { name, value })
+        commit('clearTemporaryChanges')
+      }
+
+      const revert = () => {
+        commit('setOptionTemporarily', { name, value: oldValue })
+        commit('clearTemporaryChanges')
+      }
+
+      commit('setTemporaryChanges', {
+        timeoutId: setTimeout(revert, 10000),
+        confirm,
+        revert
+      })
+    },
+    setThemeV2 ({ commit, dispatch }, { customTheme, customThemeSource }) {
+      commit('setOption', { name: 'theme', value: 'custom' })
+      commit('setOption', { name: 'customTheme', value: customTheme })
+      commit('setOption', { name: 'customThemeSource', value: customThemeSource })
+      dispatch('setTheme', { themeData: customThemeSource, recompile: true })
+    },
     setOption ({ commit, dispatch, state }, { name, value }) {
-      commit('setOption', { name, value })
-      switch (name) {
-        case 'theme':
-          setPreset(value)
-          break
-        case 'sidebarColumnWidth':
-        case 'contentColumnWidth':
-        case 'notifsColumnWidth':
-        case 'emojiReactionsScale':
+      const exceptions = new Set([
+        'useStreamingApi'
+      ])
+
+      if (exceptions.has(name)) {
+        switch (name) {
+          case 'useStreamingApi': {
+            const action = value ? 'enableMastoSockets' : 'disableMastoSockets'
+
+            dispatch(action).then(() => {
+              commit('setOption', { name: 'useStreamingApi', value })
+            }).catch((e) => {
+              console.error('Failed starting MastoAPI Streaming socket', e)
+              dispatch('disableMastoSockets')
+              dispatch('setOption', { name: 'useStreamingApi', value: false })
+            })
+            break
+          }
+        }
+      } else {
+        commit('setOption', { name, value })
+        if (APPEARANCE_SETTINGS_KEYS.has(name)) {
           applyConfig(state)
-          break
-        case 'customTheme':
-        case 'customThemeSource':
-          applyTheme(value)
-          break
-        case 'interfaceLanguage':
-          messages.setLanguage(useI18nStore().i18n, value)
-          dispatch('loadUnicodeEmojiData', value)
-          Cookies.set(
-            BACKEND_LANGUAGE_COOKIE_NAME,
-            localeService.internalToBackendLocaleMulti(value)
-          )
-          break
-        case 'thirdColumnMode':
-          useInterfaceStore().setLayoutWidth(undefined)
-          break
+        }
+        if (name.startsWith('theme3hacks')) {
+          dispatch('applyTheme', { recompile: true })
+        }
+        switch (name) {
+          case 'theme':
+            if (value === 'custom') break
+            dispatch('setTheme', { themeName: value, recompile: true, saveData: true })
+            break
+          case 'themeDebug': {
+            dispatch('setTheme', { recompile: true })
+            break
+          }
+          case 'interfaceLanguage':
+            messages.setLanguage(useI18nStore().i18n, value)
+            dispatch('loadUnicodeEmojiData', value)
+            Cookies.set(
+              BACKEND_LANGUAGE_COOKIE_NAME,
+              localeService.internalToBackendLocaleMulti(value)
+            )
+            break
+          case 'thirdColumnMode':
+            useInterfaceStore().setLayoutWidth(undefined)
+            break
+        }
       }
     }
   }
diff --git a/src/modules/drafts.js b/src/modules/drafts.js
new file mode 100644
index 000000000..7a38fe2d5
--- /dev/null
+++ b/src/modules/drafts.js
@@ -0,0 +1,86 @@
+import { storage } from 'src/lib/storage.js'
+
+export const defaultState = {
+  drafts: {}
+}
+
+export const mutations = {
+  addOrSaveDraft (state, { draft }) {
+    state.drafts[draft.id] = draft
+  },
+  abandonDraft (state, { id }) {
+    delete state.drafts[id]
+  },
+  loadDrafts (state, data) {
+    state.drafts = data
+  }
+}
+
+const storageKey = 'pleroma-fe-drafts'
+
+/*
+ * Note: we do not use the persist state plugin because
+ * it is not impossible for a user to have two windows at
+ * the same time. The persist state plugin is just overriding
+ * everything with the current state. This isn't good because
+ * if a draft is created in one window and another draft is
+ * created in another, the draft in the first window will just
+ * be overriden.
+ * Here, we can't guarantee 100% atomicity unless one uses
+ * different keys, which will just pollute the whole storage.
+ * It is indeed best to have backend support for this.
+ */
+const getStorageData = async () => ((await storage.getItem(storageKey)) || {})
+
+const saveDraftToStorage = async (draft) => {
+  const currentData = await getStorageData()
+  currentData[draft.id] = JSON.parse(JSON.stringify(draft))
+  await storage.setItem(storageKey, currentData)
+}
+
+const deleteDraftFromStorage = async (id) => {
+  const currentData = await getStorageData()
+  delete currentData[id]
+  await storage.setItem(storageKey, currentData)
+}
+
+export const actions = {
+  async addOrSaveDraft (store, { draft }) {
+    const id = draft.id || (new Date().getTime()).toString()
+    const draftWithId = { ...draft, id }
+    store.commit('addOrSaveDraft', { draft: draftWithId })
+    await saveDraftToStorage(draftWithId)
+    return id
+  },
+  async abandonDraft (store, { id }) {
+    store.commit('abandonDraft', { id })
+    await deleteDraftFromStorage(id)
+  },
+  async loadDrafts (store) {
+    const currentData = await getStorageData()
+    store.commit('loadDrafts', currentData)
+  }
+}
+
+export const getters = {
+  draftsByTypeAndRefId (state) {
+    return (type, refId) => {
+      return Object.values(state.drafts).filter(draft => draft.type === type && draft.refId === refId)
+    }
+  },
+  draftsArray (state) {
+    return Object.values(state.drafts)
+  },
+  draftCount (state) {
+    return Object.values(state.drafts).length
+  }
+}
+
+const drafts = {
+  state: defaultState,
+  mutations,
+  getters,
+  actions
+}
+
+export default drafts
diff --git a/src/modules/instance.js b/src/modules/instance.js
index 4a417d831..3bdc4bff2 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -1,5 +1,3 @@
-import { getPreset, applyTheme } from '../services/style_setter/style_setter.js'
-import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js'
 import apiService from '../services/api/api.service.js'
 import { instanceDefaultProperties } from './config.js'
 import { langCodeToCldrName, ensureFinalFallback } from '../i18n/languages.js'
@@ -45,7 +43,10 @@ const defaultState = {
   registrationOpen: true,
   server: 'http://localhost:4040/',
   textlimit: 5000,
-  themeData: undefined,
+  themesIndex: undefined,
+  stylesIndex: undefined,
+  palettesIndex: undefined,
+  themeData: undefined, // used for theme editor v2
   vapidPublicKey: undefined,
 
   // Stuff from static/config.json
@@ -72,15 +73,19 @@ const defaultState = {
   hideSitename: false,
   hideUserStats: false,
   muteBotStatuses: false,
+  muteSensitiveStatuses: false,
   modalOnRepeat: false,
   modalOnUnfollow: false,
   modalOnBlock: true,
   modalOnMute: false,
+  modalOnMuteConversation: false,
+  modalOnMuteDomain: true,
   modalOnDelete: true,
   modalOnLogout: true,
   modalOnApproveFollow: false,
   modalOnDenyFollow: false,
   modalOnRemoveUserFromFollowers: false,
+  modalMobileCenter: false,
   loginMethod: 'password',
   logo: '/static/logo.svg',
   logoMargin: '.2em',
@@ -98,14 +103,36 @@ const defaultState = {
   sidebarRight: false,
   subjectLineBehavior: 'email',
   theme: 'pleroma-dark',
+  palette: null,
+  style: null,
+  emojiReactionsScale: 0.5,
+  textSize: '14px',
+  emojiSize: '2.2rem',
+  navbarSize: '3.5rem',
+  panelHeaderSize: '3.2rem',
+  forcedRoundness: -1,
+  fontsOverride: {},
   virtualScrolling: true,
   sensitiveByDefault: false,
   conversationDisplay: 'linear',
   conversationTreeAdvanced: false,
   conversationOtherRepliesButton: 'below',
   conversationTreeFadeAncestors: false,
+  showExtraNotifications: true,
+  showExtraNotificationsTip: true,
+  showChatsInExtraNotifications: true,
+  showAnnouncementsInExtraNotifications: true,
+  showFollowRequestsInExtraNotifications: true,
   maxDepthInThread: 6,
   autocompleteSelect: false,
+  closingDrawerMarksAsSeen: true,
+  unseenAtTop: false,
+  ignoreInactionableSeen: false,
+  unsavedPostAction: 'confirm',
+  autoSaveDraft: false,
+  useAbsoluteTimeFormat: false,
+  absoluteTimeFormatMinAge: '0d',
+  absoluteTime12h: '24h',
 
   // Nasty stuff
   customEmoji: [],
@@ -125,10 +152,13 @@ const defaultState = {
   shoutAvailable: false,
   pleromaChatMessagesAvailable: false,
   pleromaCustomEmojiReactionsAvailable: false,
+  pleromaBookmarkFoldersAvailable: false,
   gopherAvailable: false,
   mediaProxyAvailable: false,
   suggestionsEnabled: false,
   suggestionsWeb: '',
+  quotingAvailable: false,
+  groupActorAvailable: false,
 
   // Html stuff
   instanceSpecificPanelContent: '',
@@ -136,6 +166,7 @@ const defaultState = {
 
   // Version Information
   backendVersion: '',
+  backendRepository: '',
   frontendVersion: '',
 
   pollsAvailable: false,
@@ -269,9 +300,6 @@ const instance = {
             dispatch('initializeSocket')
           }
           break
-        case 'theme':
-          dispatch('setTheme', value)
-          break
       }
     },
     async getStaticEmoji ({ commit }) {
@@ -288,8 +316,7 @@ const instance = {
         }, {})
         commit('setInstanceOption', { name: 'emoji', value: injectRegionalIndicators(emoji) })
       } catch (e) {
-        console.warn("Can't load static emoji")
-        console.warn(e)
+        console.warn("Can't load static emoji\n", e)
       }
     },
 
@@ -356,29 +383,9 @@ const instance = {
           throw (res)
         }
       } catch (e) {
-        console.warn("Can't load custom emojis")
-        console.warn(e)
+        console.warn("Can't load custom emojis\n", e)
       }
     },
-
-    setTheme ({ commit, rootState }, themeName) {
-      commit('setInstanceOption', { name: 'theme', value: themeName })
-      getPreset(themeName)
-        .then(themeData => {
-          commit('setInstanceOption', { name: 'themeData', value: themeData })
-          // No need to apply theme if there's user theme already
-          const { customTheme } = rootState.config
-          if (customTheme) return
-
-          // New theme presets don't have 'theme' property, they use 'source'
-          const themeSource = themeData.source
-          if (!themeData.theme || (themeSource && themeSource.themeEngineVersion === CURRENT_VERSION)) {
-            applyTheme(themeSource)
-          } else {
-            applyTheme(themeData.theme)
-          }
-        })
-    },
     fetchEmoji ({ dispatch, state }) {
       if (!state.customEmojiFetched) {
         state.customEmojiFetched = true
@@ -397,8 +404,7 @@ const instance = {
         })
         commit('setKnownDomains', result)
       } catch (e) {
-        console.warn("Can't load known domains")
-        console.warn(e)
+        console.warn("Can't load known domains\n", e)
       }
     }
   }
diff --git a/src/modules/notifications.js b/src/modules/notifications.js
new file mode 100644
index 000000000..c1f5a63e7
--- /dev/null
+++ b/src/modules/notifications.js
@@ -0,0 +1,169 @@
+import apiService from '../services/api/api.service.js'
+
+import {
+  isStatusNotification,
+  isValidNotification,
+  maybeShowNotification
+} from '../services/notification_utils/notification_utils.js'
+
+import {
+  closeDesktopNotification,
+  closeAllDesktopNotifications
+} from '../services/desktop_notification_utils/desktop_notification_utils.js'
+
+const emptyNotifications = () => ({
+  desktopNotificationSilence: true,
+  maxId: 0,
+  minId: Number.POSITIVE_INFINITY,
+  data: [],
+  idStore: {},
+  loading: false
+})
+
+export const defaultState = () => ({
+  ...emptyNotifications()
+})
+
+export const notifications = {
+  state: defaultState(),
+  mutations: {
+    addNewNotifications (state, { notifications }) {
+      notifications.forEach(notification => {
+        state.data.push(notification)
+        state.idStore[notification.id] = notification
+      })
+    },
+    clearNotifications (state) {
+      state = emptyNotifications()
+    },
+    updateNotificationsMinMaxId (state, id) {
+      state.maxId = id > state.maxId ? id : state.maxId
+      state.minId = id < state.minId ? id : state.minId
+    },
+    setNotificationsLoading (state, { value }) {
+      state.loading = value
+    },
+    setNotificationsSilence (state, { value }) {
+      state.desktopNotificationSilence = value
+    },
+    markNotificationsAsSeen (state) {
+      state.data.forEach((notification) => {
+        notification.seen = true
+      })
+    },
+    markSingleNotificationAsSeen (state, { id }) {
+      const notification = state.idStore[id]
+      if (notification) notification.seen = true
+    },
+    dismissNotification (state, { id }) {
+      state.data = state.data.filter(n => n.id !== id)
+      delete state.idStore[id]
+    },
+    updateNotification (state, { id, updater }) {
+      const notification = state.idStore[id]
+      notification && updater(notification)
+    }
+  },
+  actions: {
+    addNewNotifications (store, { notifications, older }) {
+      const { commit, dispatch, state, rootState } = store
+      const validNotifications = notifications.filter((notification) => {
+        // If invalid notification, update ids but don't add it to store
+        if (!isValidNotification(notification)) {
+          console.error('Invalid notification:', notification)
+          commit('updateNotificationsMinMaxId', notification.id)
+          return false
+        }
+        return true
+      })
+
+      const statusNotifications = validNotifications.filter(notification => isStatusNotification(notification.type) && notification.status)
+
+      // Synchronous commit to add all the statuses
+      commit('addNewStatuses', { statuses: statusNotifications.map(notification => notification.status) })
+
+      // Update references to statuses in notifications to ones in the store
+      statusNotifications.forEach(notification => {
+        const id = notification.status.id
+        const referenceStatus = rootState.statuses.allStatusesObject[id]
+
+        if (referenceStatus) {
+          notification.status = referenceStatus
+        }
+      })
+
+      validNotifications.forEach(notification => {
+        if (notification.type === 'pleroma:report') {
+          dispatch('addReport', notification.report)
+        }
+
+        if (notification.type === 'pleroma:emoji_reaction') {
+          dispatch('fetchEmojiReactionsBy', notification.status.id)
+        }
+
+        // Only add a new notification if we don't have one for the same action
+        // eslint-disable-next-line no-prototype-builtins
+        if (!state.idStore.hasOwnProperty(notification.id)) {
+          commit('updateNotificationsMinMaxId', notification.id)
+          commit('addNewNotifications', { notifications: [notification] })
+
+          maybeShowNotification(store, notification)
+        } else if (notification.seen) {
+          state.idStore[notification.id].seen = true
+        }
+      })
+    },
+    notificationClicked ({ state, dispatch }, { id }) {
+      const notification = state.idStore[id]
+      const { type, seen } = notification
+
+      if (!seen) {
+        switch (type) {
+          case 'mention':
+          case 'pleroma:report':
+          case 'follow_request':
+            break
+          default:
+            dispatch('markSingleNotificationAsSeen', { id })
+        }
+      }
+    },
+    setNotificationsLoading ({ rootState, commit }, { value }) {
+      commit('setNotificationsLoading', { value })
+    },
+    setNotificationsSilence ({ rootState, commit }, { value }) {
+      commit('setNotificationsSilence', { value })
+    },
+    markNotificationsAsSeen ({ rootState, state, commit }) {
+      commit('markNotificationsAsSeen')
+      apiService.markNotificationsAsSeen({
+        id: state.maxId,
+        credentials: rootState.users.currentUser.credentials
+      }).then(() => {
+        closeAllDesktopNotifications(rootState)
+      })
+    },
+    markSingleNotificationAsSeen ({ rootState, commit }, { id }) {
+      commit('markSingleNotificationAsSeen', { id })
+      apiService.markNotificationsAsSeen({
+        single: true,
+        id,
+        credentials: rootState.users.currentUser.credentials
+      }).then(() => {
+        closeDesktopNotification(rootState, { id })
+      })
+    },
+    dismissNotificationLocal ({ rootState, commit }, { id }) {
+      commit('dismissNotification', { id })
+    },
+    dismissNotification ({ rootState, commit }, { id }) {
+      commit('dismissNotification', { id })
+      rootState.api.backendInteractor.dismissNotification({ id })
+    },
+    updateNotification ({ rootState, commit }, { id, updater }) {
+      commit('updateNotification', { id, updater })
+    }
+  }
+}
+
+export default notifications
diff --git a/src/modules/serverSideConfig.js b/src/modules/profileConfig.js
similarity index 85%
rename from src/modules/serverSideConfig.js
rename to src/modules/profileConfig.js
index 476263bc8..2cb2014ac 100644
--- a/src/modules/serverSideConfig.js
+++ b/src/modules/profileConfig.js
@@ -22,9 +22,9 @@ const notificationsApi = ({ rootState, commit }, { path, value, oldValue }) => {
     .updateNotificationSettings({ settings })
     .then(result => {
       if (result.status === 'success') {
-        commit('confirmServerSideOption', { name, value })
+        commit('confirmProfileOption', { name, value })
       } else {
-        commit('confirmServerSideOption', { name, value: oldValue })
+        commit('confirmProfileOption', { name, value: oldValue })
       }
     })
 }
@@ -94,16 +94,16 @@ export const settingsMap = {
 
 export const defaultState = Object.fromEntries(Object.keys(settingsMap).map(key => [key, null]))
 
-const serverSideConfig = {
+const profileConfig = {
   state: { ...defaultState },
   mutations: {
-    confirmServerSideOption (state, { name, value }) {
+    confirmProfileOption (state, { name, value }) {
       set(state, name, value)
     },
-    wipeServerSideOption (state, { name }) {
+    wipeProfileOption (state, { name }) {
       set(state, name, null)
     },
-    wipeAllServerSideOptions (state) {
+    wipeAllProfileOptions (state) {
       Object.keys(settingsMap).forEach(key => {
         set(state, key, null)
       })
@@ -118,23 +118,23 @@ const serverSideConfig = {
     }
   },
   actions: {
-    setServerSideOption ({ rootState, state, commit, dispatch }, { name, value }) {
+    setProfileOption ({ rootState, state, commit, dispatch }, { name, value }) {
       const oldValue = get(state, name)
       const map = settingsMap[name]
       if (!map) throw new Error('Invalid server-side setting')
       const { set: path = map, api = defaultApi } = map
-      commit('wipeServerSideOption', { name })
+      commit('wipeProfileOption', { name })
 
       api({ rootState, commit }, { path, value, oldValue })
         .catch((e) => {
           console.warn('Error setting server-side option:', e)
-          commit('confirmServerSideOption', { name, value: oldValue })
+          commit('confirmProfileOption', { name, value: oldValue })
         })
     },
     logout ({ commit }) {
-      commit('wipeAllServerSideOptions')
+      commit('wipeAllProfileOptions')
     }
   }
 }
 
-export default serverSideConfig
+export default profileConfig
diff --git a/src/modules/serverSideStorage.js b/src/modules/serverSideStorage.js
index c933ce8df..fab88ddb1 100644
--- a/src/modules/serverSideStorage.js
+++ b/src/modules/serverSideStorage.js
@@ -1,5 +1,17 @@
 import { toRaw } from 'vue'
-import { isEqual, cloneDeep, set, get, clamp, flatten, groupBy, findLastIndex, takeRight, uniqWith } from 'lodash'
+import {
+  isEqual,
+  cloneDeep,
+  set,
+  get,
+  clamp,
+  flatten,
+  groupBy,
+  findLastIndex,
+  takeRight,
+  uniqWith,
+  merge as _merge
+} from 'lodash'
 import { CURRENT_UPDATE_COUNTER } from 'src/components/update_notification/update_notification.js'
 
 export const VERSION = 1
@@ -26,6 +38,7 @@ export const defaultState = {
       collapseNav: false
     },
     collections: {
+      pinnedStatusActions: ['reply', 'retweet', 'favorite', 'emoji'],
       pinnedNavItems: ['home', 'dms', 'chats']
     }
   },
@@ -77,7 +90,7 @@ const _verifyPrefs = (state) => {
   })
 }
 
-export const _getRecentData = (cache, live) => {
+export const _getRecentData = (cache, live, isTest) => {
   const result = { recent: null, stale: null, needUpload: false }
   const cacheValid = _checkValidity(cache || {})
   const liveValid = _checkValidity(live || {})
@@ -110,6 +123,17 @@ export const _getRecentData = (cache, live) => {
     console.debug('Both sources are invalid, start from scratch')
     result.needUpload = true
   }
+
+  const merge = (a, b) => ({
+    _version: a._version ?? b._version,
+    _timestamp: a._timestamp ?? b._timestamp,
+    needUpload: b.needUpload ?? a.needUpload,
+    prefsStorage: _merge(a.prefsStorage, b.prefsStorage),
+    flagStorage: _merge(a.flagStorage, b.flagStorage)
+  })
+  result.recent = isTest ? result.recent : (result.recent && merge(defaultState, result.recent))
+  result.stale = isTest ? result.stale : (result.stale && merge(defaultState, result.stale))
+
   return result
 }
 
@@ -281,18 +305,18 @@ export const mutations = {
   clearServerSideStorage (state, userData) {
     state = { ...cloneDeep(defaultState) }
   },
-  setServerSideStorage (state, userData) {
+  setServerSideStorage (state, userData, test) {
     const live = userData.storage
     state.raw = live
     let cache = state.cache
     if (cache && cache._user !== userData.fqn) {
-      console.warn('cache belongs to another user! reinitializing local cache!')
+      console.warn('Cache belongs to another user! reinitializing local cache!')
       cache = null
     }
 
     cache = _doMigrations(cache)
 
-    let { recent, stale, needsUpload } = _getRecentData(cache, live)
+    let { recent, stale, needUpload } = _getRecentData(cache, live)
 
     const userNew = userData.created_at > NEW_USER_DATE
     const flagsTemplate = userNew ? newUserFlags : defaultState.flagStorage
@@ -306,7 +330,7 @@ export const mutations = {
       })
     }
 
-    if (!needsUpload && recent && stale) {
+    if (!needUpload && recent && stale) {
       console.debug('Checking if data needs merging...')
       // discarding timestamps and versions
       const { _timestamp: _0, _version: _1, ...recentData } = recent
@@ -335,7 +359,7 @@ export const mutations = {
     recent.flagStorage = { ...flagsTemplate, ...totalFlags }
     recent.prefsStorage = { ...defaultState.prefsStorage, ...totalPrefs }
 
-    state.dirty = dirty || needsUpload
+    state.dirty = dirty || needUpload
     state.cache = recent
     // set local timestamp to smaller one if we don't have any changes
     if (stale && recent && !state.dirty) {
@@ -419,7 +443,6 @@ const serverSideStorage = {
   actions: {
     pushServerSideStorage ({ state, rootState, commit }, { force = false } = {}) {
       const needPush = state.dirty || force
-      console.log(needPush)
       if (!needPush) return
       commit('updateCache', { username: rootState.users.currentUser.fqn })
       const params = { pleroma_settings_store: { 'pleroma-fe': state.cache } }
diff --git a/src/modules/statuses.js b/src/modules/statuses.js
index 5e165ced4..942bf28b6 100644
--- a/src/modules/statuses.js
+++ b/src/modules/statuses.js
@@ -12,11 +12,6 @@ import {
   isArray,
   omitBy
 } from 'lodash'
-import {
-  isStatusNotification,
-  isValidNotification,
-  maybeShowNotification
-} from '../services/notification_utils/notification_utils.js'
 import apiService from '../services/api/api.service.js'
 import { useReportsStore } from '../stores/reports.js'
 
@@ -37,21 +32,12 @@ const emptyTl = (userId = 0) => ({
   flushMarker: 0
 })
 
-const emptyNotifications = () => ({
-  desktopNotificationSilence: true,
-  maxId: 0,
-  minId: Number.POSITIVE_INFINITY,
-  data: [],
-  idStore: {},
-  loading: false
-})
-
 export const defaultState = () => ({
   allStatuses: [],
+  scrobblesNextFetch: {},
   allStatusesObject: {},
   conversationsObject: {},
   maxId: 0,
-  notifications: emptyNotifications(),
   favorites: new Set(),
   timelines: {
     mentions: emptyTl(),
@@ -121,8 +107,24 @@ const sortTimeline = (timeline) => {
   return timeline
 }
 
+const getLatestScrobble = (state, user) => {
+  if (state.scrobblesNextFetch[user.id] && state.scrobblesNextFetch[user.id] > Date.now()) {
+    return
+  }
+
+  state.scrobblesNextFetch[user.id] = Date.now() + 24 * 60 * 60 * 1000
+  apiService.fetchScrobbles({ accountId: user.id }).then((scrobbles) => {
+    if (scrobbles.length > 0) {
+      user.latestScrobble = scrobbles[0]
+
+      state.scrobblesNextFetch[user.id] = Date.now() + 60 * 1000
+    }
+  })
+}
+
 // Add status to the global storages (arrays and objects maintaining statuses) except timelines
 const addStatusToGlobalStorage = (state, data) => {
+  getLatestScrobble(state, data.user)
   const result = mergeOrAdd(state.allStatuses, state.allStatusesObject, data)
   if (result.new) {
     // Add to conversation
@@ -138,22 +140,6 @@ const addStatusToGlobalStorage = (state, data) => {
   return result
 }
 
-// Remove status from the global storages (arrays and objects maintaining statuses) except timelines
-const removeStatusFromGlobalStorage = (state, status) => {
-  remove(state.allStatuses, { id: status.id })
-
-  // TODO: Need to remove from allStatusesObject?
-
-  // Remove possible notification
-  remove(state.notifications.data, ({ action: { id } }) => id === status.id)
-
-  // Remove from conversation
-  const conversationId = status.statusnet_conversation_id
-  if (state.conversationsObject[conversationId]) {
-    remove(state.conversationsObject[conversationId], { id: status.id })
-  }
-}
-
 const addNewStatuses = (state, { statuses, showImmediately = false, timeline, user = {}, noIdUpdate = false, userId, pagination = {} }) => {
   // Sanity check
   if (!isArray(statuses)) {
@@ -230,6 +216,10 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us
       timelineObject.newStatusCount += 1
     }
 
+    if (status.quote) {
+      addStatus(status.quote, /* showImmediately = */ false, /* addToTimeline = */ false)
+    }
+
     return status
   }
 
@@ -283,26 +273,12 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us
         favoriteStatus(favorite)
       }
     },
-    deletion: (deletion) => {
-      const uri = deletion.uri
-      const status = find(allStatuses, { uri })
-      if (!status) {
-        return
-      }
-
-      removeStatusFromGlobalStorage(state, status)
-
-      if (timeline) {
-        remove(timelineObject.statuses, { uri })
-        remove(timelineObject.visibleStatuses, { uri })
-      }
-    },
     follow: (follow) => {
       // NOOP, it is known status but we don't do anything about it for now
     },
     default: (unknown) => {
-      console.log('unknown status type')
-      console.log(unknown)
+      console.warn('unknown status type')
+      console.warn(unknown)
     }
   }
 
@@ -318,52 +294,6 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us
   }
 }
 
-const updateNotificationsMinMaxId = (state, notification) => {
-  state.notifications.maxId = notification.id > state.notifications.maxId
-    ? notification.id
-    : state.notifications.maxId
-  state.notifications.minId = notification.id < state.notifications.minId
-    ? notification.id
-    : state.notifications.minId
-}
-
-const addNewNotifications = (state, { dispatch, notifications, older, visibleNotificationTypes, rootGetters, newNotificationSideEffects }) => {
-  each(notifications, (notification) => {
-    // If invalid notification, update ids but don't add it to store
-    if (!isValidNotification(notification)) {
-      console.error('Invalid notification:', notification)
-      updateNotificationsMinMaxId(state, notification)
-      return
-    }
-
-    if (isStatusNotification(notification.type)) {
-      notification.action = addStatusToGlobalStorage(state, notification.action).item
-      notification.status = notification.status && addStatusToGlobalStorage(state, notification.status).item
-    }
-
-    if (notification.type === 'pleroma:report') {
-      useReportsStore().addReport(notification.report)
-    }
-
-    if (notification.type === 'pleroma:emoji_reaction') {
-      dispatch('fetchEmojiReactionsBy', notification.status.id)
-    }
-
-    // Only add a new notification if we don't have one for the same action
-    // eslint-disable-next-line no-prototype-builtins
-    if (!state.notifications.idStore.hasOwnProperty(notification.id)) {
-      updateNotificationsMinMaxId(state, notification)
-
-      state.notifications.data.push(notification)
-      state.notifications.idStore[notification.id] = notification
-
-      newNotificationSideEffects(notification)
-    } else if (notification.seen) {
-      state.notifications.idStore[notification.id].seen = true
-    }
-  })
-}
-
 const removeStatus = (state, { timeline, userId }) => {
   const timelineObject = state.timelines[timeline]
   if (userId) {
@@ -376,7 +306,6 @@ const removeStatus = (state, { timeline, userId }) => {
 
 export const mutations = {
   addNewStatuses,
-  addNewNotifications,
   removeStatus,
   showNewStatuses (state, { timeline }) {
     const oldTimeline = (state.timelines[timeline])
@@ -398,9 +327,6 @@ export const mutations = {
     const userId = excludeUserId ? state.timelines[timeline].userId : undefined
     state.timelines[timeline] = emptyTl(userId)
   },
-  clearNotifications (state) {
-    state.notifications = emptyNotifications()
-  },
   setFavorited (state, { status, value }) {
     const newStatus = state.allStatusesObject[status.id]
 
@@ -460,10 +386,12 @@ export const mutations = {
   setBookmarked (state, { status, value }) {
     const newStatus = state.allStatusesObject[status.id]
     newStatus.bookmarked = value
+    newStatus.bookmark_folder_id = status.bookmark_folder_id
   },
   setBookmarkedConfirm (state, { status }) {
     const newStatus = state.allStatusesObject[status.id]
     newStatus.bookmarked = status.bookmarked
+    if (status.pleroma) newStatus.bookmark_folder_id = status.pleroma.bookmark_folder
   },
   setDeleted (state, { status }) {
     const newStatus = state.allStatusesObject[status.id]
@@ -483,31 +411,6 @@ export const mutations = {
     const newStatus = state.allStatusesObject[id]
     newStatus.nsfw = nsfw
   },
-  setNotificationsLoading (state, { value }) {
-    state.notifications.loading = value
-  },
-  setNotificationsSilence (state, { value }) {
-    state.notifications.desktopNotificationSilence = value
-  },
-  markNotificationsAsSeen (state) {
-    each(state.notifications.data, (notification) => {
-      notification.seen = true
-    })
-  },
-  markSingleNotificationAsSeen (state, { id }) {
-    const notification = find(state.notifications.data, n => n.id === id)
-    if (notification) notification.seen = true
-  },
-  dismissNotification (state, { id }) {
-    state.notifications.data = state.notifications.data.filter(n => n.id !== id)
-  },
-  dismissNotifications (state, { finder }) {
-    state.notifications.data = state.notifications.data.filter(n => finder)
-  },
-  updateNotification (state, { id, updater }) {
-    const notification = find(state.notifications.data, n => n.id === id)
-    notification && updater(notification)
-  },
   queueFlush (state, { timeline, id }) {
     state.timelines[timeline].flushMarker = id
   },
@@ -589,23 +492,9 @@ export const mutations = {
 const statuses = {
   state: defaultState(),
   actions: {
-    addNewStatuses ({ rootState, commit }, { statuses, showImmediately = false, timeline = false, noIdUpdate = false, userId, pagination }) {
+    addNewStatuses ({ rootState, commit, dispatch, state }, { statuses, showImmediately = false, timeline = false, noIdUpdate = false, userId, pagination }) {
       commit('addNewStatuses', { statuses, showImmediately, timeline, noIdUpdate, user: rootState.users.currentUser, userId, pagination })
     },
-    addNewNotifications (store, { notifications, older }) {
-      const { commit, dispatch, rootGetters } = store
-
-      const newNotificationSideEffects = (notification) => {
-        maybeShowNotification(store, notification)
-      }
-      commit('addNewNotifications', { dispatch, notifications, older, rootGetters, newNotificationSideEffects })
-    },
-    setNotificationsLoading ({ rootState, commit }, { value }) {
-      commit('setNotificationsLoading', { value })
-    },
-    setNotificationsSilence ({ rootState, commit }, { value }) {
-      commit('setNotificationsSilence', { value })
-    },
     fetchStatus ({ rootState, dispatch }, id) {
       return rootState.api.backendInteractor.fetchStatus({ id })
         .then((status) => dispatch('addNewStatuses', { statuses: [status] }))
@@ -616,9 +505,19 @@ const statuses = {
     fetchStatusHistory ({ rootState, dispatch }, status) {
       return apiService.fetchStatusHistory({ status })
     },
-    deleteStatus ({ rootState, commit }, status) {
-      commit('setDeleted', { status })
+    deleteStatus ({ rootState, commit, dispatch }, status) {
       apiService.deleteStatus({ id: status.id, credentials: rootState.users.currentUser.credentials })
+        .then((_) => {
+          commit('setDeleted', { status })
+        })
+        .catch((e) => {
+          dispatch('pushGlobalNotice', {
+            level: 'error',
+            messageKey: 'status.delete_error',
+            messageArgs: [e.message],
+            timeout: 5000
+          })
+        })
     },
     deleteStatusById ({ rootState, commit }, id) {
       const status = rootState.statuses.allStatusesObject[id]
@@ -651,11 +550,11 @@ const statuses = {
       rootState.api.backendInteractor.unpinOwnStatus({ id: statusId })
         .then((status) => dispatch('addNewStatuses', { statuses: [status] }))
     },
-    muteConversation ({ rootState, commit }, statusId) {
+    muteConversation ({ rootState, commit }, { id: statusId }) {
       return rootState.api.backendInteractor.muteConversation({ id: statusId })
         .then((status) => commit('setMutedStatus', status))
     },
-    unmuteConversation ({ rootState, commit }, statusId) {
+    unmuteConversation ({ rootState, commit }, { id: statusId }) {
       return rootState.api.backendInteractor.unmuteConversation({ id: statusId })
         .then((status) => commit('setMutedStatus', status))
     },
@@ -673,7 +572,7 @@ const statuses = {
     },
     bookmark ({ rootState, commit }, status) {
       commit('setBookmarked', { status, value: true })
-      rootState.api.backendInteractor.bookmarkStatus({ id: status.id })
+      rootState.api.backendInteractor.bookmarkStatus({ id: status.id, folder_id: status.bookmark_folder_id })
         .then(status => {
           commit('setBookmarkedConfirm', { status })
         })
@@ -691,31 +590,6 @@ const statuses = {
     queueFlushAll ({ rootState, commit }) {
       commit('queueFlushAll')
     },
-    markNotificationsAsSeen ({ rootState, commit }) {
-      commit('markNotificationsAsSeen')
-      apiService.markNotificationsAsSeen({
-        id: rootState.statuses.notifications.maxId,
-        credentials: rootState.users.currentUser.credentials
-      })
-    },
-    markSingleNotificationAsSeen ({ rootState, commit }, { id }) {
-      commit('markSingleNotificationAsSeen', { id })
-      apiService.markNotificationsAsSeen({
-        single: true,
-        id,
-        credentials: rootState.users.currentUser.credentials
-      })
-    },
-    dismissNotificationLocal ({ rootState, commit }, { id }) {
-      commit('dismissNotification', { id })
-    },
-    dismissNotification ({ rootState, commit }, { id }) {
-      commit('dismissNotification', { id })
-      rootState.api.backendInteractor.dismissNotification({ id })
-    },
-    updateNotification ({ rootState, commit }, { id, updater }) {
-      commit('updateNotification', { id, updater })
-    },
     fetchFavsAndRepeats ({ rootState, commit }, id) {
       Promise.all([
         rootState.api.backendInteractor.fetchFavoritedByUsers({ id }),
@@ -748,7 +622,7 @@ const statuses = {
       )
     },
     fetchEmojiReactionsBy ({ rootState, commit }, id) {
-      rootState.api.backendInteractor.fetchEmojiReactions({ id }).then(
+      return rootState.api.backendInteractor.fetchEmojiReactions({ id }).then(
         emojiReactions => {
           commit('addEmojiReactionsBy', { id, emojiReactions, currentUser: rootState.users.currentUser })
         }
diff --git a/src/modules/users.js b/src/modules/users.js
index e2204bb19..9257987ca 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -2,7 +2,7 @@ import backendInteractorService from '../services/backend_interactor_service/bac
 import { windowWidth, windowHeight } from '../services/window_utils/window_utils'
 import oauthApi from '../services/new_api/oauth.js'
 import { compact, map, each, mergeWith, last, concat, uniq, isArray } from 'lodash'
-import { registerPushNotifications, unregisterPushNotifications } from '../services/push/push.js'
+import { registerPushNotifications, unregisterPushNotifications } from '../services/sw/sw.js'
 import { useInterfaceStore } from '../stores/interface.js'
 
 // TODO: Unify with mergeOrAdd in statuses.js
@@ -196,9 +196,15 @@ export const mutations = {
       state.currentUser.blockIds.push(blockId)
     }
   },
+  setBlockIdsMaxId (state, blockIdsMaxId) {
+    state.currentUser.blockIdsMaxId = blockIdsMaxId
+  },
   saveMuteIds (state, muteIds) {
     state.currentUser.muteIds = muteIds
   },
+  setMuteIdsMaxId (state, muteIdsMaxId) {
+    state.currentUser.muteIdsMaxId = muteIdsMaxId
+  },
   addMuteId (state, muteId) {
     if (state.currentUser.muteIds.indexOf(muteId) === -1) {
       state.currentUser.muteIds.push(muteId)
@@ -245,6 +251,7 @@ export const mutations = {
   signUpPending (state) {
     state.signUpPending = true
     state.signUpErrors = []
+    state.signUpNotice = {}
   },
   signUpSuccess (state) {
     state.signUpPending = false
@@ -252,6 +259,12 @@ export const mutations = {
   signUpFailure (state, errors) {
     state.signUpPending = false
     state.signUpErrors = errors
+    state.signUpNotice = {}
+  },
+  signUpNotice (state, notice) {
+    state.signUpPending = false
+    state.signUpErrors = []
+    state.signUpNotice = notice
   }
 }
 
@@ -282,6 +295,7 @@ export const defaultState = {
   usersByNameObject: {},
   signUpPending: false,
   signUpErrors: [],
+  signUpNotice: {},
   relationships: {}
 }
 
@@ -321,10 +335,20 @@ const users = {
           .then((inLists) => store.commit('updateUserInLists', { id, inLists }))
       }
     },
-    fetchBlocks (store) {
-      return store.rootState.api.backendInteractor.fetchBlocks()
+    fetchBlocks (store, args) {
+      const { reset } = args || {}
+
+      const maxId = store.state.currentUser.blockIdsMaxId
+      return store.rootState.api.backendInteractor.fetchBlocks({ maxId })
         .then((blocks) => {
-          store.commit('saveBlockIds', map(blocks, 'id'))
+          if (reset) {
+            store.commit('saveBlockIds', map(blocks, 'id'))
+          } else {
+            map(blocks, 'id').map(id => store.commit('addBlockId', id))
+          }
+          if (blocks.length) {
+            store.commit('setBlockIdsMaxId', last(blocks).id)
+          }
           store.commit('addNewUsers', blocks)
           return blocks
         })
@@ -347,10 +371,20 @@ const users = {
     editUserNote (store, args) {
       return editUserNote(store, args)
     },
-    fetchMutes (store) {
-      return store.rootState.api.backendInteractor.fetchMutes()
+    fetchMutes (store, args) {
+      const { reset } = args || {}
+
+      const maxId = store.state.currentUser.muteIdsMaxId
+      return store.rootState.api.backendInteractor.fetchMutes({ maxId })
         .then((mutes) => {
-          store.commit('saveMuteIds', map(mutes, 'id'))
+          if (reset) {
+            store.commit('saveMuteIds', map(mutes, 'id'))
+          } else {
+            map(mutes, 'id').map(id => store.commit('addMuteId', id))
+          }
+          if (mutes.length) {
+            store.commit('setMuteIdsMaxId', last(mutes).id)
+          }
           store.commit('addNewUsers', mutes)
           return mutes
         })
@@ -419,11 +453,11 @@ const users = {
       commit('clearFollowers', userId)
     },
     subscribeUser ({ rootState, commit }, id) {
-      return rootState.api.backendInteractor.subscribeUser({ id })
+      return rootState.api.backendInteractor.followUser({ id, notify: true })
         .then((relationship) => commit('updateUserRelationship', [relationship]))
     },
     unsubscribeUser ({ rootState, commit }, id) {
-      return rootState.api.backendInteractor.unsubscribeUser({ id })
+      return rootState.api.backendInteractor.followUser({ id, notify: false })
         .then((relationship) => commit('updateUserRelationship', [relationship]))
     },
     toggleActivationStatus ({ rootState, commit }, { user }) {
@@ -473,7 +507,7 @@ const users = {
       store.commit('addNewUsers', users)
       store.commit('addNewUsers', targetUsers)
 
-      const notificationsObject = store.rootState.statuses.notifications.idStore
+      const notificationsObject = store.rootState.notifications.idStore
       const relevantNotifications = Object.entries(notificationsObject)
         .filter(([k, val]) => notificationIds.includes(k))
         .map(([k, val]) => val)
@@ -499,9 +533,16 @@ const users = {
         const data = await rootState.api.backendInteractor.register(
           { params: { ...userInfo } }
         )
-        store.commit('signUpSuccess')
-        store.commit('setToken', data.access_token)
-        store.dispatch('loginUser', data.access_token)
+
+        if (data.access_token) {
+          store.commit('signUpSuccess')
+          store.commit('setToken', data.access_token)
+          store.dispatch('loginUser', data.access_token)
+          return 'ok'
+        } else { // Request succeeded, but user cannot login yet.
+          store.commit('signUpNotice', data)
+          return 'request_sent'
+        }
       } catch (e) {
         const errors = e.message
         store.commit('signUpFailure', errors)
@@ -539,6 +580,7 @@ const users = {
           store.commit('setBackendInteractor', backendInteractorService(store.getters.getToken()))
           store.dispatch('stopFetchingNotifications')
           store.dispatch('stopFetchingLists')
+          store.dispatch('stopFetchingBookmarkFolders')
           store.dispatch('stopFetchingFollowRequests')
           store.commit('clearNotifications')
           store.commit('resetStatuses')
@@ -552,6 +594,7 @@ const users = {
     loginUser (store, accessToken) {
       return new Promise((resolve, reject) => {
         const commit = store.commit
+        const dispatch = store.dispatch
         commit('beginLogin')
         store.rootState.api.backendInteractor.verifyCredentials(accessToken)
           .then((data) => {
@@ -566,54 +609,55 @@ const users = {
               commit('setServerSideStorage', user)
               commit('addNewUsers', [user])
 
-              store.dispatch('fetchEmoji')
+              dispatch('fetchEmoji')
 
               getNotificationPermission()
                 .then(permission => useInterfaceStore().setNotificationPermission(permission))
 
               // Set our new backend interactor
               commit('setBackendInteractor', backendInteractorService(accessToken))
-              store.dispatch('pushServerSideStorage')
+              dispatch('pushServerSideStorage')
 
               if (user.token) {
-                store.dispatch('setWsToken', user.token)
+                dispatch('setWsToken', user.token)
 
                 // Initialize the shout socket.
-                store.dispatch('initializeSocket')
+                dispatch('initializeSocket')
               }
 
               const startPolling = () => {
                 // Start getting fresh posts.
-                store.dispatch('startFetchingTimeline', { timeline: 'friends' })
+                dispatch('startFetchingTimeline', { timeline: 'friends' })
 
                 // Start fetching notifications
-                store.dispatch('startFetchingNotifications')
+                dispatch('startFetchingNotifications')
 
                 // Start fetching chats
-                store.dispatch('startFetchingChats')
+                dispatch('startFetchingChats')
               }
 
-              store.dispatch('startFetchingLists')
+              dispatch('startFetchingLists')
+              dispatch('startFetchingBookmarkFolders')
 
               if (user.locked) {
-                store.dispatch('startFetchingFollowRequests')
+                dispatch('startFetchingFollowRequests')
               }
 
               if (store.getters.mergedConfig.useStreamingApi) {
-                store.dispatch('fetchTimeline', { timeline: 'friends', since: null })
-                store.dispatch('fetchNotifications', { since: null })
-                store.dispatch('enableMastoSockets', true).catch((error) => {
+                dispatch('fetchTimeline', { timeline: 'friends', since: null })
+                dispatch('fetchNotifications', { since: null })
+                dispatch('enableMastoSockets', true).catch((error) => {
                   console.error('Failed initializing MastoAPI Streaming socket', error)
                 }).then(() => {
-                  store.dispatch('fetchChats', { latest: true })
-                  setTimeout(() => store.dispatch('setNotificationsSilence', false), 10000)
+                  dispatch('fetchChats', { latest: true })
+                  setTimeout(() => dispatch('setNotificationsSilence', false), 10000)
                 })
               } else {
                 startPolling()
               }
 
               // Get user mutes
-              store.dispatch('fetchMutes')
+              dispatch('fetchMutes')
 
               useInterfaceStore().setLayoutWidth(windowWidth())
               useInterfaceStore().setLayoutHeight(windowHeight())
@@ -625,6 +669,12 @@ const users = {
               const response = data.error
               // Authentication failed
               commit('endLogin')
+
+              // remove authentication token on client/authentication errors
+              if ([400, 401, 403, 422].includes(response.status)) {
+                commit('clearToken')
+              }
+
               if (response.status === 401) {
                 reject(new Error('Wrong username or password'))
               } else {
@@ -635,7 +685,7 @@ const users = {
             resolve()
           })
           .catch((error) => {
-            console.log(error)
+            console.error(error)
             commit('endLogin')
             reject(new Error('Failed to connect to server, try again'))
           })
diff --git a/src/panel.scss b/src/panel.scss
index 9471da113..47d55aa4a 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -1,15 +1,24 @@
 /* stylelint-disable no-descending-specificity */
 .panel {
+  --__panel-background: var(--background);
+  --__panel-backdrop-filter: var(--backdrop-filter);
+
+  .tab-switcher .tabs {
+    background: var(--__panel-background);
+    backdrop-filter: var(--__panel-backdrop-filter);
+  }
+
   position: relative;
   display: flex;
   flex-direction: column;
-  background-color: $fallback--bg;
-  background-color: var(--bg, $fallback--bg);
+
+  .panel-heading {
+    background-color: inherit;
+  }
 
   &::after,
   & {
-    border-radius: $fallback--panelRadius;
-    border-radius: var(--panelRadius, $fallback--panelRadius);
+    border-radius: var(--roundness);
   }
 
   &::after {
@@ -20,19 +29,25 @@
     left: 0;
     right: 0;
     z-index: 5;
-    box-shadow: 1px 1px 4px rgb(0 0 0 / 60%);
-    box-shadow: var(--panelShadow);
+    box-shadow: var(--shadow);
     pointer-events: none;
   }
 }
 
 .panel-body {
   padding: var(--panel-body-padding, 0);
+  background: var(--background);
+  backdrop-filter: var(--__panel-backdrop-filter);
+
+  .tab-switcher .tabs {
+    background: none;
+    backdrop-filter: none;
+  }
 
   &:empty::before {
     content: "¯\\_(ツ)_/¯"; // Could use words but it'd require translations
     display: block;
-    margin: 1em;
+    padding: 1em;
     text-align: center;
   }
 
@@ -45,11 +60,13 @@
 
 .panel-heading,
 .panel-footer {
-  --panel-heading-height-padding: 0.6em;
-  --__panel-heading-gap: 0.5em;
-  --__panel-heading-height: 3.2em;
+  --panel-heading-height-padding: calc(var(--panel-header-height) * 0.2);
+  --__panel-heading-gap: calc(var(--panel-header-height) * 0.1565);
+  --__panel-heading-height: var(--panel-header-height);
   --__panel-heading-height-inner: calc(var(--__panel-heading-height) - 2 * var(--panel-heading-height-padding, 0));
 
+  font-size: calc(var(--panelHeaderSize) / 3.2);
+  backdrop-filter: var(--__panel-backdrop-filter);
   position: relative;
   box-sizing: border-box;
   display: grid;
@@ -76,8 +93,7 @@
   &.-stub {
     &,
     &::after {
-      border-radius: $fallback--panelRadius;
-      border-radius: var(--panelRadius, $fallback--panelRadius);
+      border-radius: var(--roundness);
     }
   }
 
@@ -99,6 +115,8 @@
 
   .title {
     font-size: 1.3em;
+    margin: 0;
+    font-weight: normal;
   }
 
   .alert {
@@ -119,82 +137,33 @@
       padding-bottom: 0;
       align-self: stretch;
     }
+
+    > .alert {
+      line-height: calc(var(--__panel-heading-height-inner) - 2px);
+    }
   }
 }
 
 // TODO Should refactor panels into separate component and utilize slots
 
 .panel-heading {
-  border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
-  border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
+  border-radius: var(--roundness) var(--roundness) 0 0;
   border-width: 0 0 1px;
   align-items: start;
-  // panel theme
-  color: var(--panelText);
-  background-color: $fallback--bg;
-  background-color: var(--bg, $fallback--bg);
+  background-image:
+    linear-gradient(to bottom, var(--background), var(--background)),
+    linear-gradient(to bottom, var(--__panel-background), var(--__panel-background));
 
   &::after {
-    background-color: $fallback--fg;
-    background-color: var(--panel, $fallback--fg);
+    background-color: var(--background);
     z-index: -2;
-    border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
-    border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
-    box-shadow: var(--panelHeaderShadow);
-  }
-
-  a,
-  .-link {
-    color: $fallback--link;
-    color: var(--panelLink, $fallback--link);
-  }
-
-  .button-unstyled:hover,
-  a:hover {
-    i[class*="icon-"],
-    .svg-inline--fa,
-    .iconLetter {
-      color: var(--panelText);
-    }
-  }
-
-  .faint {
-    background-color: transparent;
-    color: $fallback--faint;
-    color: var(--panelFaint, $fallback--faint);
-  }
-
-  .faint-link {
-    color: $fallback--faint;
-    color: var(--faintLink, $fallback--faint);
+    border-radius: var(--roundness) var(--roundness) 0 0;
+    box-shadow: var(--shadow);
   }
 
   &:not(.-flexible-height) {
     > .button-default {
       flex-shrink: 0;
-
-      &,
-      i[class*="icon-"] {
-        color: $fallback--text;
-        color: var(--btnPanelText, $fallback--text);
-      }
-
-      &:active {
-        background-color: $fallback--fg;
-        background-color: var(--btnPressedPanel, $fallback--fg);
-        color: $fallback--text;
-        color: var(--btnPressedPanelText, $fallback--text);
-      }
-
-      &:disabled {
-        color: $fallback--text;
-        color: var(--btnDisabledPanelText, $fallback--text);
-      }
-
-      &.toggled {
-        color: $fallback--text;
-        color: var(--btnToggledPanelText, $fallback--text);
-      }
     }
   }
 
@@ -232,11 +201,12 @@
 }
 
 .panel-footer {
-  border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
-  border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
   align-items: center;
   border-width: 1px 0 0;
   border-style: solid;
-  border-color: var(--border, $fallback--border);
+  border-color: var(--border);
+  background-color: var(--__panel-background);
 }
 /* stylelint-enable no-descending-specificity */
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index 259e5b30a..bcc346866 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -68,8 +68,6 @@ const MASTODON_UNBLOCK_USER_URL = id => `/api/v1/accounts/${id}/unblock`
 const MASTODON_MUTE_USER_URL = id => `/api/v1/accounts/${id}/mute`
 const MASTODON_UNMUTE_USER_URL = id => `/api/v1/accounts/${id}/unmute`
 const MASTODON_REMOVE_USER_FROM_FOLLOWERS = id => `/api/v1/accounts/${id}/remove_from_followers`
-const MASTODON_SUBSCRIBE_USER = id => `/api/v1/pleroma/accounts/${id}/subscribe`
-const MASTODON_UNSUBSCRIBE_USER = id => `/api/v1/pleroma/accounts/${id}/unsubscribe`
 const MASTODON_USER_NOTE_URL = id => `/api/v1/accounts/${id}/note`
 const MASTODON_BOOKMARK_STATUS_URL = id => `/api/v1/statuses/${id}/bookmark`
 const MASTODON_UNBOOKMARK_STATUS_URL = id => `/api/v1/statuses/${id}/unbookmark`
@@ -107,6 +105,25 @@ const PLEROMA_ANNOUNCEMENTS_URL = '/api/v1/pleroma/admin/announcements'
 const PLEROMA_POST_ANNOUNCEMENT_URL = '/api/v1/pleroma/admin/announcements'
 const PLEROMA_EDIT_ANNOUNCEMENT_URL = id => `/api/v1/pleroma/admin/announcements/${id}`
 const PLEROMA_DELETE_ANNOUNCEMENT_URL = id => `/api/v1/pleroma/admin/announcements/${id}`
+const PLEROMA_SCROBBLES_URL = id => `/api/v1/pleroma/accounts/${id}/scrobbles`
+const PLEROMA_STATUS_QUOTES_URL = id => `/api/v1/pleroma/statuses/${id}/quotes`
+const PLEROMA_USER_FAVORITES_TIMELINE_URL = id => `/api/v1/pleroma/accounts/${id}/favourites`
+const PLEROMA_BOOKMARK_FOLDERS_URL = '/api/v1/pleroma/bookmark_folders'
+const PLEROMA_BOOKMARK_FOLDER_URL = id => `/api/v1/pleroma/bookmark_folders/${id}`
+
+const PLEROMA_ADMIN_CONFIG_URL = '/api/pleroma/admin/config'
+const PLEROMA_ADMIN_DESCRIPTIONS_URL = '/api/pleroma/admin/config/descriptions'
+const PLEROMA_ADMIN_FRONTENDS_URL = '/api/pleroma/admin/frontends'
+const PLEROMA_ADMIN_FRONTENDS_INSTALL_URL = '/api/pleroma/admin/frontends/install'
+
+const PLEROMA_EMOJI_RELOAD_URL = '/api/pleroma/admin/reload_emoji'
+const PLEROMA_EMOJI_IMPORT_FS_URL = '/api/pleroma/emoji/packs/import'
+const PLEROMA_EMOJI_PACKS_URL = (page, pageSize) => `/api/v1/pleroma/emoji/packs?page=${page}&page_size=${pageSize}`
+const PLEROMA_EMOJI_PACK_URL = (name) => `/api/v1/pleroma/emoji/pack?name=${name}`
+const PLEROMA_EMOJI_PACKS_DL_REMOTE_URL = '/api/v1/pleroma/emoji/packs/download'
+const PLEROMA_EMOJI_PACKS_LS_REMOTE_URL =
+  (url, page, pageSize) => `/api/v1/pleroma/emoji/packs/remote?url=${url}&page=${page}&page_size=${pageSize}`
+const PLEROMA_EMOJI_UPDATE_FILE_URL = (name) => `/api/v1/pleroma/emoji/packs/files?name=${name}`
 
 const oldfetch = window.fetch
 
@@ -256,6 +273,7 @@ const followUser = ({ id, credentials, ...options }) => {
   const url = MASTODON_FOLLOW_URL(id)
   const form = {}
   if (options.reblogs !== undefined) { form.reblogs = options.reblogs }
+  if (options.notify !== undefined) { form.notify = options.notify }
   return fetch(url, {
     body: JSON.stringify(form),
     headers: {
@@ -665,13 +683,16 @@ const fetchTimeline = ({
   timeline,
   credentials,
   since = false,
+  minId = false,
   until = false,
   userId = false,
   listId = false,
+  statusId = false,
   tag = false,
   withMuted = false,
   replyVisibility = 'all',
-  includeTypes = []
+  includeTypes = [],
+  bookmarkFolderId = false
 }) => {
   const timelineUrls = {
     public: MASTODON_PUBLIC_TIMELINE,
@@ -683,14 +704,20 @@ const fetchTimeline = ({
     media: MASTODON_USER_TIMELINE_URL,
     list: MASTODON_LIST_TIMELINE_URL,
     favorites: MASTODON_USER_FAVORITES_TIMELINE_URL,
+    publicFavorites: PLEROMA_USER_FAVORITES_TIMELINE_URL,
     tag: MASTODON_TAG_TIMELINE_URL,
-    bookmarks: MASTODON_BOOKMARK_TIMELINE_URL
+    bookmarks: MASTODON_BOOKMARK_TIMELINE_URL,
+    quotes: PLEROMA_STATUS_QUOTES_URL
   }
   const isNotifications = timeline === 'notifications'
   const params = []
 
   let url = timelineUrls[timeline]
 
+  if (timeline === 'favorites' && userId) {
+    url = timelineUrls.publicFavorites(userId)
+  }
+
   if (timeline === 'user' || timeline === 'media') {
     url = url(userId)
   }
@@ -699,6 +726,13 @@ const fetchTimeline = ({
     url = url(listId)
   }
 
+  if (timeline === 'quotes') {
+    url = url(statusId)
+  }
+
+  if (minId) {
+    params.push(['min_id', minId])
+  }
   if (since) {
     params.push(['since_id', since])
   }
@@ -728,6 +762,9 @@ const fetchTimeline = ({
       params.push(['include_types[]', type])
     })
   }
+  if (timeline === 'bookmarks' && bookmarkFolderId) {
+    params.push(['folder_id', bookmarkFolderId])
+  }
 
   params.push(['limit', 20])
 
@@ -797,11 +834,14 @@ const unretweet = ({ id, credentials }) => {
     .then((data) => parseStatus(data))
 }
 
-const bookmarkStatus = ({ id, credentials }) => {
+const bookmarkStatus = ({ id, credentials, ...options }) => {
   return promisedRequest({
     url: MASTODON_BOOKMARK_STATUS_URL(id),
     headers: authHeaders(credentials),
-    method: 'POST'
+    method: 'POST',
+    payload: {
+      folder_id: options.folder_id
+    }
   })
 }
 
@@ -822,6 +862,7 @@ const postStatus = ({
   poll,
   mediaIds = [],
   inReplyToStatusId,
+  quoteId,
   contentType,
   preview,
   idempotencyKey
@@ -854,6 +895,9 @@ const postStatus = ({
   if (inReplyToStatusId) {
     form.append('in_reply_to_id', inReplyToStatusId)
   }
+  if (quoteId) {
+    form.append('quote_id', quoteId)
+  }
   if (preview) {
     form.append('preview', 'true')
   }
@@ -923,8 +967,9 @@ const editStatus = ({
 }
 
 const deleteStatus = ({ id, credentials }) => {
-  return fetch(MASTODON_DELETE_URL(id), {
-    headers: authHeaders(credentials),
+  return promisedRequest({
+    url: MASTODON_DELETE_URL(id),
+    credentials,
     method: 'DELETE'
   })
 }
@@ -1113,8 +1158,12 @@ const generateMfaBackupCodes = ({ credentials }) => {
   }).then((data) => data.json())
 }
 
-const fetchMutes = ({ credentials }) => {
-  return promisedRequest({ url: MASTODON_USER_MUTES_URL, credentials })
+const fetchMutes = ({ maxId, credentials }) => {
+  const query = new URLSearchParams({ with_relationships: true })
+  if (maxId) {
+    query.append('max_id', maxId)
+  }
+  return promisedRequest({ url: `${MASTODON_USER_MUTES_URL}?${query.toString()}`, credentials })
     .then((users) => users.map(parseUser))
 }
 
@@ -1130,16 +1179,12 @@ const unmuteUser = ({ id, credentials }) => {
   return promisedRequest({ url: MASTODON_UNMUTE_USER_URL(id), credentials, method: 'POST' })
 }
 
-const subscribeUser = ({ id, credentials }) => {
-  return promisedRequest({ url: MASTODON_SUBSCRIBE_USER(id), credentials, method: 'POST' })
-}
-
-const unsubscribeUser = ({ id, credentials }) => {
-  return promisedRequest({ url: MASTODON_UNSUBSCRIBE_USER(id), credentials, method: 'POST' })
-}
-
-const fetchBlocks = ({ credentials }) => {
-  return promisedRequest({ url: MASTODON_USER_BLOCKS_URL, credentials })
+const fetchBlocks = ({ maxId, credentials }) => {
+  const query = new URLSearchParams({ with_relationships: true })
+  if (maxId) {
+    query.append('max_id', maxId)
+  }
+  return promisedRequest({ url: `${MASTODON_USER_BLOCKS_URL}?${query.toString()}`, credentials })
     .then((users) => users.map(parseUser))
 }
 
@@ -1439,17 +1484,18 @@ const deleteAnnouncement = ({ id, credentials }) => {
   })
 }
 
-export const getMastodonSocketURI = ({ credentials, stream, args = {} }) => {
-  return Object.entries({
-    ...(credentials
-      ? { access_token: credentials }
-      : {}
-    ),
-    stream,
-    ...args
-  }).reduce((acc, [key, val]) => {
-    return acc + `${key}=${val}&`
-  }, MASTODON_STREAMING + '?')
+export const getMastodonSocketURI = ({ credentials, stream, args = {} }, base) => {
+  const url = new URL(MASTODON_STREAMING, base)
+  if (credentials) {
+    url.searchParams.append('access_token', credentials)
+  }
+  if (stream) {
+    url.searchParams.append('stream', stream)
+  }
+  Object.entries(args).forEach(([key, val]) => {
+    url.searchParams.append(key, val)
+  })
+  return url
 }
 
 const MASTODON_STREAMING_EVENTS = new Set([
@@ -1461,7 +1507,8 @@ const MASTODON_STREAMING_EVENTS = new Set([
 ])
 
 const PLEROMA_STREAMING_EVENTS = new Set([
-  'pleroma:chat_update'
+  'pleroma:chat_update',
+  'pleroma:respond'
 ])
 
 // A thin wrapper around WebSocket API that allows adding a pre-processor to it
@@ -1469,7 +1516,8 @@ const PLEROMA_STREAMING_EVENTS = new Set([
 export const ProcessedWS = ({
   url,
   preprocessor = handleMastoWS,
-  id = 'Unknown'
+  id = 'Unknown',
+  credentials
 }) => {
   const eventTarget = new EventTarget()
   const socket = new WebSocket(url)
@@ -1484,6 +1532,12 @@ export const ProcessedWS = ({
   }
   socket.addEventListener('open', (wsEvent) => {
     console.debug(`[WS][${id}] Socket connected`, wsEvent)
+    if (credentials) {
+      socket.send(JSON.stringify({
+        type: 'pleroma:authenticate',
+        token: credentials
+      }))
+    }
   })
   socket.addEventListener('error', (wsEvent) => {
     console.debug(`[WS][${id}] Socket errored`, wsEvent)
@@ -1504,19 +1558,47 @@ export const ProcessedWS = ({
   })
   /**/
 
+  const onAuthenticated = () => {
+    eventTarget.dispatchEvent(new CustomEvent('pleroma:authenticated'))
+  }
+
   proxy(socket, 'open')
   proxy(socket, 'close')
-  proxy(socket, 'message', preprocessor)
+  proxy(socket, 'message', (event) => preprocessor(event, { onAuthenticated }))
   proxy(socket, 'error')
 
   // 1000 = Normal Closure
   eventTarget.close = () => { socket.close(1000, 'Shutting down socket') }
   eventTarget.getState = () => socket.readyState
+  eventTarget.subscribe = (stream, args = {}) => {
+    console.debug(
+      `[WS][${id}] Subscribing to stream ${stream} with args`,
+      args
+    )
+    socket.send(JSON.stringify({
+      type: 'subscribe',
+      stream,
+      ...args
+    }))
+  }
+  eventTarget.unsubscribe = (stream, args = {}) => {
+    console.debug(
+      `[WS][${id}] Unsubscribing from stream ${stream} with args`,
+      args
+    )
+    socket.send(JSON.stringify({
+      type: 'unsubscribe',
+      stream,
+      ...args
+    }))
+  }
 
   return eventTarget
 }
 
-export const handleMastoWS = (wsEvent) => {
+export const handleMastoWS = (wsEvent, {
+  onAuthenticated = () => {}
+} = {}) => {
   const { data } = wsEvent
   if (!data) return
   const parsedEvent = JSON.parse(data)
@@ -1527,7 +1609,18 @@ export const handleMastoWS = (wsEvent) => {
       return { event, id: payload }
     }
     const data = payload ? JSON.parse(payload) : null
-    if (event === 'update') {
+    if (event === 'pleroma:respond') {
+      if (data.type === 'pleroma:authenticate') {
+        if (data.result === 'success') {
+          console.debug('[WS] Successfully authenticated')
+          onAuthenticated()
+        } else {
+          console.error('[WS] Unable to authenticate:', data.error)
+          wsEvent.target.close()
+        }
+      }
+      return null
+    } else if (event === 'update') {
       return { event, status: parseStatus(data) }
     } else if (event === 'status.update') {
       return { event, status: parseStatus(data) }
@@ -1659,6 +1752,233 @@ const setReportState = ({ id, state, credentials }) => {
     })
 }
 
+// ADMIN STUFF // EXPERIMENTAL
+const fetchInstanceDBConfig = ({ credentials }) => {
+  return fetch(PLEROMA_ADMIN_CONFIG_URL, {
+    headers: authHeaders(credentials)
+  })
+    .then((response) => {
+      if (response.ok) {
+        return response.json()
+      } else {
+        return {
+          error: response
+        }
+      }
+    })
+}
+
+const fetchInstanceConfigDescriptions = ({ credentials }) => {
+  return fetch(PLEROMA_ADMIN_DESCRIPTIONS_URL, {
+    headers: authHeaders(credentials)
+  })
+    .then((response) => {
+      if (response.ok) {
+        return response.json()
+      } else {
+        return {
+          error: response
+        }
+      }
+    })
+}
+
+const fetchAvailableFrontends = ({ credentials }) => {
+  return fetch(PLEROMA_ADMIN_FRONTENDS_URL, {
+    headers: authHeaders(credentials)
+  })
+    .then((response) => {
+      if (response.ok) {
+        return response.json()
+      } else {
+        return {
+          error: response
+        }
+      }
+    })
+}
+
+const pushInstanceDBConfig = ({ credentials, payload }) => {
+  return fetch(PLEROMA_ADMIN_CONFIG_URL, {
+    headers: {
+      Accept: 'application/json',
+      'Content-Type': 'application/json',
+      ...authHeaders(credentials)
+    },
+    method: 'POST',
+    body: JSON.stringify(payload)
+  })
+    .then((response) => {
+      if (response.ok) {
+        return response.json()
+      } else {
+        return {
+          error: response
+        }
+      }
+    })
+}
+
+const installFrontend = ({ credentials, payload }) => {
+  return fetch(PLEROMA_ADMIN_FRONTENDS_INSTALL_URL, {
+    headers: {
+      Accept: 'application/json',
+      'Content-Type': 'application/json',
+      ...authHeaders(credentials)
+    },
+    method: 'POST',
+    body: JSON.stringify(payload)
+  })
+    .then((response) => {
+      if (response.ok) {
+        return response.json()
+      } else {
+        return {
+          error: response
+        }
+      }
+    })
+}
+
+const fetchScrobbles = ({ accountId, limit = 1 }) => {
+  let url = PLEROMA_SCROBBLES_URL(accountId)
+  const params = [['limit', limit]]
+  const queryString = map(params, (param) => `${param[0]}=${param[1]}`).join('&')
+  url += `?${queryString}`
+  return fetch(url, {})
+    .then((response) => {
+      if (response.ok) {
+        return response.json()
+      } else {
+        return {
+          error: response
+        }
+      }
+    })
+}
+
+const deleteEmojiPack = ({ name }) => {
+  return fetch(PLEROMA_EMOJI_PACK_URL(name), { method: 'DELETE' })
+}
+
+const reloadEmoji = () => {
+  return fetch(PLEROMA_EMOJI_RELOAD_URL, { method: 'POST' })
+}
+
+const importEmojiFromFS = () => {
+  return fetch(PLEROMA_EMOJI_IMPORT_FS_URL)
+}
+
+const createEmojiPack = ({ name }) => {
+  return fetch(PLEROMA_EMOJI_PACK_URL(name), { method: 'POST' })
+}
+
+const listEmojiPacks = ({ page, pageSize }) => {
+  return fetch(PLEROMA_EMOJI_PACKS_URL(page, pageSize))
+}
+
+const listRemoteEmojiPacks = ({ instance, page, pageSize }) => {
+  if (!instance.startsWith('http')) {
+    instance = 'https://' + instance
+  }
+
+  return fetch(
+    PLEROMA_EMOJI_PACKS_LS_REMOTE_URL(instance, page, pageSize),
+    {
+      headers: { 'Content-Type': 'application/json' }
+    }
+  )
+}
+
+const downloadRemoteEmojiPack = ({ instance, packName, as }) => {
+  return fetch(
+    PLEROMA_EMOJI_PACKS_DL_REMOTE_URL,
+    {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        url: instance, name: packName, as
+      })
+    }
+  )
+}
+
+const saveEmojiPackMetadata = ({ name, newData }) => {
+  return fetch(
+    PLEROMA_EMOJI_PACK_URL(name),
+    {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ metadata: newData })
+    }
+  )
+}
+
+const addNewEmojiFile = ({ packName, file, shortcode, filename }) => {
+  const data = new FormData()
+  if (filename.trim() !== '') { data.set('filename', filename) }
+  if (shortcode.trim() !== '') { data.set('shortcode', shortcode) }
+  data.set('file', file)
+
+  return fetch(
+    PLEROMA_EMOJI_UPDATE_FILE_URL(packName),
+    { method: 'POST', body: data }
+  )
+}
+
+const updateEmojiFile = ({ packName, shortcode, newShortcode, newFilename, force }) => {
+  return fetch(
+    PLEROMA_EMOJI_UPDATE_FILE_URL(packName),
+    {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ shortcode, new_shortcode: newShortcode, new_filename: newFilename, force })
+    }
+  )
+}
+
+const deleteEmojiFile = ({ packName, shortcode }) => {
+  return fetch(`${PLEROMA_EMOJI_UPDATE_FILE_URL(packName)}&shortcode=${shortcode}`, { method: 'DELETE' })
+}
+
+const fetchBookmarkFolders = ({ credentials }) => {
+  const url = PLEROMA_BOOKMARK_FOLDERS_URL
+  return fetch(url, { headers: authHeaders(credentials) })
+    .then((data) => data.json())
+}
+
+const createBookmarkFolder = ({ name, emoji, credentials }) => {
+  const url = PLEROMA_BOOKMARK_FOLDERS_URL
+  const headers = authHeaders(credentials)
+  headers['Content-Type'] = 'application/json'
+
+  return fetch(url, {
+    headers,
+    method: 'POST',
+    body: JSON.stringify({ name, emoji })
+  }).then((data) => data.json())
+}
+
+const updateBookmarkFolder = ({ folderId, name, emoji, credentials }) => {
+  const url = PLEROMA_BOOKMARK_FOLDER_URL(folderId)
+  const headers = authHeaders(credentials)
+  headers['Content-Type'] = 'application/json'
+
+  return fetch(url, {
+    headers,
+    method: 'PATCH',
+    body: JSON.stringify({ name, emoji })
+  }).then((data) => data.json())
+}
+
+const deleteBookmarkFolder = ({ folderId, credentials }) => {
+  const url = PLEROMA_BOOKMARK_FOLDER_URL(folderId)
+  return fetch(url, {
+    method: 'DELETE',
+    headers: authHeaders(credentials)
+  })
+}
+
 const apiService = {
   verifyCredentials,
   fetchTimeline,
@@ -1697,8 +2017,6 @@ const apiService = {
   fetchMutes,
   muteUser,
   unmuteUser,
-  subscribeUser,
-  unsubscribeUser,
   fetchBlocks,
   fetchOAuthTokens,
   revokeOAuthToken,
@@ -1772,7 +2090,28 @@ const apiService = {
   postAnnouncement,
   editAnnouncement,
   deleteAnnouncement,
-  adminFetchAnnouncements
+  fetchScrobbles,
+  adminFetchAnnouncements,
+  fetchInstanceDBConfig,
+  fetchInstanceConfigDescriptions,
+  fetchAvailableFrontends,
+  pushInstanceDBConfig,
+  installFrontend,
+  importEmojiFromFS,
+  reloadEmoji,
+  listEmojiPacks,
+  createEmojiPack,
+  deleteEmojiPack,
+  saveEmojiPackMetadata,
+  addNewEmojiFile,
+  updateEmojiFile,
+  deleteEmojiFile,
+  listRemoteEmojiPacks,
+  downloadRemoteEmojiPack,
+  fetchBookmarkFolders,
+  createBookmarkFolder,
+  updateBookmarkFolder,
+  deleteBookmarkFolder
 }
 
 export default apiService
diff --git a/src/services/backend_interactor_service/backend_interactor_service.js b/src/services/backend_interactor_service/backend_interactor_service.js
index 62ee85496..ca3cac53d 100644
--- a/src/services/backend_interactor_service/backend_interactor_service.js
+++ b/src/services/backend_interactor_service/backend_interactor_service.js
@@ -3,10 +3,11 @@ import timelineFetcher from '../timeline_fetcher/timeline_fetcher.service.js'
 import notificationsFetcher from '../notifications_fetcher/notifications_fetcher.service.js'
 import followRequestFetcher from '../../services/follow_request_fetcher/follow_request_fetcher.service'
 import listsFetcher from '../../services/lists_fetcher/lists_fetcher.service.js'
+import bookmarkFoldersFetcher from '../../services/bookmark_folders_fetcher/bookmark_folders_fetcher.service.js'
 
 const backendInteractorService = credentials => ({
-  startFetchingTimeline ({ timeline, store, userId = false, listId = false, tag }) {
-    return timelineFetcher.startFetching({ timeline, store, credentials, userId, listId, tag })
+  startFetchingTimeline ({ timeline, store, userId = false, listId = false, statusId = false, bookmarkFolderId = false, tag }) {
+    return timelineFetcher.startFetching({ timeline, store, credentials, userId, listId, statusId, bookmarkFolderId, tag })
   },
 
   fetchTimeline (args) {
@@ -29,10 +30,14 @@ const backendInteractorService = credentials => ({
     return listsFetcher.startFetching({ store, credentials })
   },
 
+  startFetchingBookmarkFolders ({ store }) {
+    return bookmarkFoldersFetcher.startFetching({ store, credentials })
+  },
+
   startUserSocket ({ store }) {
     const serv = store.rootState.instance.server.replace('http', 'ws')
-    const url = serv + getMastodonSocketURI({ credentials, stream: 'user' })
-    return ProcessedWS({ url, id: 'User' })
+    const url = getMastodonSocketURI({}, serv)
+    return ProcessedWS({ url, id: 'Unified', credentials })
   },
 
   ...Object.entries(apiService).reduce((acc, [key, func]) => {
diff --git a/src/services/bookmark_folders_fetcher/bookmark_folders_fetcher.service.js b/src/services/bookmark_folders_fetcher/bookmark_folders_fetcher.service.js
new file mode 100644
index 000000000..2181ab67b
--- /dev/null
+++ b/src/services/bookmark_folders_fetcher/bookmark_folders_fetcher.service.js
@@ -0,0 +1,22 @@
+import apiService from '../api/api.service.js'
+import { promiseInterval } from '../promise_interval/promise_interval.js'
+
+const fetchAndUpdate = ({ store, credentials }) => {
+  return apiService.fetchBookmarkFolders({ credentials })
+    .then(bookmarkFolders => {
+      store.commit('setBookmarkFolders', bookmarkFolders)
+    }, () => {})
+    .catch(() => {})
+}
+
+const startFetching = ({ credentials, store }) => {
+  const boundFetchAndUpdate = () => fetchAndUpdate({ credentials, store })
+  boundFetchAndUpdate()
+  return promiseInterval(boundFetchAndUpdate, 240000)
+}
+
+const bookmarkFoldersFetcher = {
+  startFetching
+}
+
+export default bookmarkFoldersFetcher
diff --git a/src/services/color_convert/color_convert.js b/src/services/color_convert/color_convert.js
index 47d6344e5..0e78b57af 100644
--- a/src/services/color_convert/color_convert.js
+++ b/src/services/color_convert/color_convert.js
@@ -1,7 +1,7 @@
-import { invertLightness, contrastRatio } from 'chromatism'
+import { invertLightness, contrastRatio, convert } from 'chromatism'
 
 // useful for visualizing color when debugging
-export const consoleColor = (color) => console.log('%c##########', 'background: ' + color + '; color: ' + color)
+// const consoleColor = (color) => console.debug('%c##########', 'background: ' + color + '; color: ' + color)
 
 /**
  * Convert r, g, b values into hex notation. All components are [0-255]
@@ -52,15 +52,6 @@ const c2linear = (bit) => {
   }
 }
 
-/**
- * Converts sRGB into linear RGB
- * @param {Object} srgb - sRGB color
- * @returns {Object} linear rgb color
- */
-const srgbToLinear = (srgb) => {
-  return 'rgb'.split('').reduce((acc, c) => { acc[c] = c2linear(srgb[c]); return acc }, {})
-}
-
 /**
  * Calculates relative luminance for given color
  * https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
@@ -70,7 +61,10 @@ const srgbToLinear = (srgb) => {
  * @returns {Number} relative luminance
  */
 export const relativeLuminance = (srgb) => {
-  const { r, g, b } = srgbToLinear(srgb)
+  const r = c2linear(srgb.r)
+  const g = c2linear(srgb.g)
+  const b = c2linear(srgb.b)
+
   return 0.2126 * r + 0.7152 * g + 0.0722 * b
 }
 
@@ -110,13 +104,17 @@ export const getContrastRatioLayers = (text, layers, bedrock) => {
  * @returns {Object} sRGB of resulting color
  */
 export const alphaBlend = (fg, fga, bg) => {
-  if (fga === 1 || typeof fga === 'undefined') return fg
-  return 'rgb'.split('').reduce((acc, c) => {
-    // Simplified https://en.wikipedia.org/wiki/Alpha_compositing#Alpha_blending
-    // for opaque bg and transparent fg
-    acc[c] = (fg[c] * fga + bg[c] * (1 - fga))
-    return acc
-  }, {})
+  if (fga === 1 || typeof fga === 'undefined') {
+    return fg
+  }
+
+  // Simplified https://en.wikipedia.org/wiki/Alpha_compositing#Alpha_blending
+  // for opaque bg and transparent fg
+  return {
+    r: (fg.r * fga + bg.r * (1 - fga)),
+    g: (fg.g * fga + bg.g * (1 - fga)),
+    b: (fg.b * fga + bg.b * (1 - fga))
+  }
 }
 
 /**
@@ -130,10 +128,11 @@ export const alphaBlendLayers = (bedrock, layers) => layers.reduce((acc, [color,
 }, bedrock)
 
 export const invert = (rgb) => {
-  return 'rgb'.split('').reduce((acc, c) => {
-    acc[c] = 255 - rgb[c]
-    return acc
-  }, {})
+  return {
+    r: 255 - rgb.r,
+    g: 255 - rgb.g,
+    b: 255 - rgb.b
+  }
 }
 
 /**
@@ -144,6 +143,7 @@ export const invert = (rgb) => {
  */
 export const hex2rgb = (hex) => {
   const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+
   return result
     ? {
         r: parseInt(result[1], 16),
@@ -161,11 +161,13 @@ export const hex2rgb = (hex) => {
  * @returns {Object} result
  */
 export const mixrgb = (a, b) => {
-  return 'rgb'.split('').reduce((acc, k) => {
-    acc[k] = (a[k] + b[k]) / 2
-    return acc
-  }, {})
+  return {
+    r: (a.r + b.r) / 2,
+    g: (a.g + b.g) / 2,
+    b: (a.b + b.b) / 2
+  }
 }
+
 /**
  * Converts rgb object into a CSS rgba() color
  *
@@ -173,7 +175,33 @@ export const mixrgb = (a, b) => {
  * @returns {String} CSS rgba() color
  */
 export const rgba2css = function (rgba) {
-  return `rgba(${Math.floor(rgba.r)}, ${Math.floor(rgba.g)}, ${Math.floor(rgba.b)}, ${rgba.a})`
+  const base = {
+    r: 0,
+    g: 0,
+    b: 0,
+    a: 1
+  }
+
+  if (rgba !== null) {
+    if (rgba.r !== undefined && !isNaN(rgba.r)) {
+      base.r = rgba.r
+    }
+    if (rgba.g !== undefined && !isNaN(rgba.g)) {
+      base.g = rgba.g
+    }
+    if (rgba.b !== undefined && !isNaN(rgba.b)) {
+      base.b = rgba.b
+    }
+    if (rgba.a !== undefined && !isNaN(rgba.a)) {
+      base.a = rgba.a
+    }
+  } else {
+    base.r = 255
+    base.g = 255
+    base.b = 255
+  }
+
+  return `rgba(${Math.floor(base.r)}, ${Math.floor(base.g)}, ${Math.floor(base.b)}, ${base.a})`
 }
 
 /**
@@ -187,19 +215,37 @@ export const rgba2css = function (rgba) {
  * @param {Boolean} preserve - try to preserve intended text color's hue/saturation (i.e. no BW)
  */
 export const getTextColor = function (bg, text, preserve) {
-  const contrast = getContrastRatio(bg, text)
-
-  if (contrast < 4.5) {
-    const base = typeof text.a !== 'undefined' ? { a: text.a } : {}
-    const result = Object.assign(base, invertLightness(text).rgb)
-    if (!preserve && getContrastRatio(bg, result) < 4.5) {
+  const originalContrast = getContrastRatio(bg, text)
+  if (!preserve) {
+    if (originalContrast < 4.5) {
       // B&W
       return contrastRatio(bg, text).rgb
     }
-    // Inverted color
-    return result
   }
-  return text
+
+  const originalColor = convert(text).hex
+  const invertedColor = invertLightness(originalColor).hex
+  const invertedContrast = getContrastRatio(bg, convert(invertedColor).rgb)
+  let workColor
+
+  if (invertedContrast > originalContrast) {
+    workColor = invertedColor
+  } else {
+    workColor = originalColor
+  }
+
+  let contrast = getContrastRatio(bg, text)
+  const result = convert(rgb2hex(workColor)).hsl
+  const delta = result.l >= 50 ? 1 : -1
+  const multiplier = 1
+  while (contrast < 4.5 && result.l > 20 && result.l < 80) {
+    result.l += delta * multiplier
+    result.l = Math.min(100, Math.max(0, result.l))
+    contrast = getContrastRatio(bg, convert(result).rgb)
+  }
+
+  const base = typeof text.a !== 'undefined' ? { a: text.a } : {}
+  return Object.assign(convert(result).rgb, base)
 }
 
 /**
diff --git a/src/services/date_utils/date_utils.js b/src/services/date_utils/date_utils.js
index ed8e14170..69398c0cf 100644
--- a/src/services/date_utils/date_utils.js
+++ b/src/services/date_utils/date_utils.js
@@ -6,10 +6,13 @@ export const WEEK = 7 * DAY
 export const MONTH = 30 * DAY
 export const YEAR = 365.25 * DAY
 
-export const relativeTime = (date, nowThreshold = 1) => {
+export const relativeTimeMs = (date) => {
   if (typeof date === 'string') date = Date.parse(date)
+  return Math.abs(Date.now() - date)
+}
+export const relativeTime = (date, nowThreshold = 1) => {
   const round = Date.now() > date ? Math.floor : Math.ceil
-  const d = Math.abs(Date.now() - date)
+  const d = relativeTimeMs(date)
   const r = { num: round(d / YEAR), key: 'time.unit.years' }
   if (d < nowThreshold * SECOND) {
     r.num = 0
@@ -57,3 +60,39 @@ export const secondsToUnit = (unit, amount) => {
     case 'days': return (1000 * amount) / DAY
   }
 }
+
+export const isSameYear = (a, b) => {
+  return a.getFullYear() === b.getFullYear()
+}
+
+export const isSameMonth = (a, b) => {
+  return a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth()
+}
+
+export const isSameDay = (a, b) => {
+  return a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth() &&
+    a.getDate() === b.getDate()
+}
+
+export const durationStrToMs = (str) => {
+  if (typeof str !== 'string') {
+    return 0
+  }
+
+  const unit = str.replace(/[0-9,.]+/, '')
+  const value = str.replace(/[^0-9,.]+/, '')
+  switch (unit) {
+    case 'd':
+      return value * DAY
+    case 'h':
+      return value * HOUR
+    case 'm':
+      return value * MINUTE
+    case 's':
+      return value * SECOND
+    default:
+      return 0
+  }
+}
diff --git a/src/services/desktop_notification_utils/desktop_notification_utils.js b/src/services/desktop_notification_utils/desktop_notification_utils.js
index b84a1f750..80b8c6e0a 100644
--- a/src/services/desktop_notification_utils/desktop_notification_utils.js
+++ b/src/services/desktop_notification_utils/desktop_notification_utils.js
@@ -1,9 +1,38 @@
+import {
+  showDesktopNotification as swDesktopNotification,
+  closeDesktopNotification as swCloseDesktopNotification,
+  isSWSupported
+} from '../sw/sw.js'
+const state = { failCreateNotif: false }
+
 export const showDesktopNotification = (rootState, desktopNotificationOpts) => {
   if (!('Notification' in window && window.Notification.permission === 'granted')) return
-  if (rootState.statuses.notifications.desktopNotificationSilence) { return }
+  if (rootState.notifications.desktopNotificationSilence) { return }
 
-  const desktopNotification = new window.Notification(desktopNotificationOpts.title, desktopNotificationOpts)
-  // Chrome is known for not closing notifications automatically
-  // according to MDN, anyway.
-  setTimeout(desktopNotification.close.bind(desktopNotification), 5000)
+  if (isSWSupported()) {
+    swDesktopNotification(desktopNotificationOpts)
+  } else if (!state.failCreateNotif) {
+    try {
+      const desktopNotification = new window.Notification(desktopNotificationOpts.title, desktopNotificationOpts)
+      setTimeout(desktopNotification.close.bind(desktopNotification), 5000)
+    } catch {
+      state.failCreateNotif = true
+    }
+  }
+}
+
+export const closeDesktopNotification = (rootState, { id }) => {
+  if (!('Notification' in window && window.Notification.permission === 'granted')) return
+
+  if (isSWSupported()) {
+    swCloseDesktopNotification({ id })
+  }
+}
+
+export const closeAllDesktopNotifications = (rootState) => {
+  if (!('Notification' in window && window.Notification.permission === 'granted')) return
+
+  if (isSWSupported()) {
+    swCloseDesktopNotification({})
+  }
 }
diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
index adefc5a55..cbadac69f 100644
--- a/src/services/entity_normalizer/entity_normalizer.service.js
+++ b/src/services/entity_normalizer/entity_normalizer.service.js
@@ -107,6 +107,7 @@ export const parseUser = (data) => {
 
       output.allow_following_move = data.pleroma.allow_following_move
 
+      output.hide_favorites = data.pleroma.hide_favorites
       output.hide_follows = data.pleroma.hide_follows
       output.hide_followers = data.pleroma.hide_followers
       output.hide_follows_count = data.pleroma.hide_follows_count
@@ -165,6 +166,7 @@ export const parseUser = (data) => {
         output.show_role = data.source.pleroma.show_role
         output.discoverable = data.source.pleroma.discoverable
         output.show_birthday = data.pleroma.show_birthday
+        output.actor_type = data.source.pleroma.actor_type
       }
     }
 
@@ -325,6 +327,12 @@ export const parseStatus = (data) => {
       output.thread_muted = pleroma.thread_muted
       output.emoji_reactions = pleroma.emoji_reactions
       output.parent_visible = pleroma.parent_visible === undefined ? true : pleroma.parent_visible
+      output.quote = pleroma.quote ? parseStatus(pleroma.quote) : undefined
+      output.quote_id = pleroma.quote_id ? pleroma.quote_id : (output.quote ? output.quote.id : undefined)
+      output.quote_url = pleroma.quote_url
+      output.quote_visible = pleroma.quote_visible
+      output.quotes_count = pleroma.quotes_count
+      output.bookmark_folder_id = pleroma.bookmark_folder
     } else {
       output.text = data.content
       output.summary = data.spoiler_text
@@ -434,8 +442,9 @@ export const parseNotification = (data) => {
   if (masto) {
     output.type = mastoDict[data.type] || data.type
     output.seen = data.pleroma.is_seen
-    output.status = isStatusNotification(output.type) ? parseStatus(data.status) : null
-    output.action = output.status // TODO: Refactor, this is unneeded
+    // TODO: null check should be a temporary fix, I guess.
+    // Investigate why backend does this.
+    output.status = isStatusNotification(output.type) && data.status !== null ? parseStatus(data.status) : null
     output.target = output.type !== 'move'
       ? null
       : parseUser(data.target)
diff --git a/src/services/export_import/export_import.js b/src/services/export_import/export_import.js
index 7fee0ad33..ec53a7434 100644
--- a/src/services/export_import/export_import.js
+++ b/src/services/export_import/export_import.js
@@ -2,15 +2,23 @@ import utf8 from 'utf8'
 
 export const newExporter = ({
   filename = 'data',
+  mime = 'application/json',
+  extension = 'json',
   getExportedObject
 }) => ({
   exportData () {
-    const stringified = utf8.encode(JSON.stringify(getExportedObject(), null, 2)) // Pretty-print and indent with 2 spaces
+    let stringified
+    if (mime === 'application/json') {
+      stringified = utf8.encode(JSON.stringify(getExportedObject(), null, 2)) // Pretty-print and indent with 2 spaces
+    } else {
+      stringified = utf8.encode(getExportedObject()) // Pretty-print and indent with 2 spaces
+    }
 
     // Create an invisible link with a data url and simulate a click
     const e = document.createElement('a')
-    e.setAttribute('download', `${filename}.json`)
-    e.setAttribute('href', 'data:application/json;base64,' + window.btoa(stringified))
+    const realFilename = typeof filename === 'function' ? filename() : filename
+    e.setAttribute('download', `${realFilename}.${extension}`)
+    e.setAttribute('href', `data:${mime};base64, ${window.btoa(stringified)}`)
     e.style.display = 'none'
 
     document.body.appendChild(e)
@@ -20,6 +28,8 @@ export const newExporter = ({
 })
 
 export const newImporter = ({
+  accept = '.json',
+  parser = (string) => JSON.parse(string),
   onImport,
   onImportFailure,
   validator = () => true
@@ -27,18 +37,19 @@ export const newImporter = ({
   importData () {
     const filePicker = document.createElement('input')
     filePicker.setAttribute('type', 'file')
-    filePicker.setAttribute('accept', '.json')
+    filePicker.setAttribute('accept', accept)
 
     filePicker.addEventListener('change', event => {
       if (event.target.files[0]) {
+        const filename = event.target.files[0].name
         // eslint-disable-next-line no-undef
         const reader = new FileReader()
         reader.onload = ({ target }) => {
           try {
-            const parsed = JSON.parse(target.result)
-            const validationResult = validator(parsed)
+            const parsed = parser(target.result, filename)
+            const validationResult = validator(parsed, filename)
             if (validationResult === true) {
-              onImport(parsed)
+              onImport(parsed, filename)
             } else {
               onImportFailure({ validationResult })
             }
diff --git a/src/services/favicon_service/favicon_service.js b/src/services/favicon_service/favicon_service.js
index 7e19629d9..df603bb46 100644
--- a/src/services/favicon_service/favicon_service.js
+++ b/src/services/favicon_service/favicon_service.js
@@ -55,10 +55,13 @@ const createFaviconService = () => {
     })
   }
 
+  const getOriginalFavicons = () => [...favicons]
+
   return {
     initFaviconService,
     clearFaviconBadge,
-    drawFaviconBadge
+    drawFaviconBadge,
+    getOriginalFavicons
   }
 }
 
diff --git a/src/services/file_type/file_type.service.js b/src/services/file_type/file_type.service.js
index 5182ecd18..f7989ffed 100644
--- a/src/services/file_type/file_type.service.js
+++ b/src/services/file_type/file_type.service.js
@@ -1,7 +1,7 @@
 // TODO this func might as well take the entire file and use its mimetype
 // or the entire service could be just mimetype service that only operates
 // on mimetypes and not files. Currently the naming is confusing.
-const fileType = mimetype => {
+export const fileType = mimetype => {
   if (mimetype.match(/flash/)) {
     return 'flash'
   }
@@ -25,11 +25,25 @@ const fileType = mimetype => {
   return 'unknown'
 }
 
-const fileMatchesSomeType = (types, file) =>
+export const fileTypeExt = url => {
+  if (url.match(/\.(a?png|jpe?g|gif|webp|avif)$/)) {
+    return 'image'
+  }
+  if (url.match(/\.(ogv|mp4|webm|mov)$/)) {
+    return 'video'
+  }
+  if (url.match(/\.(it|s3m|mod|umx|mp3|aac|m4a|flac|alac|ogg|oga|opus|wav|ape|midi?)$/)) {
+    return 'audio'
+  }
+  return 'unknown'
+}
+
+export const fileMatchesSomeType = (types, file) =>
   types.some(type => fileType(file.mimetype) === type)
 
 const fileTypeService = {
   fileType,
+  fileTypeExt,
   fileMatchesSomeType
 }
 
diff --git a/src/services/gesture_service/gesture_service.js b/src/services/gesture_service/gesture_service.js
index 265a7f25e..570a1746d 100644
--- a/src/services/gesture_service/gesture_service.js
+++ b/src/services/gesture_service/gesture_service.js
@@ -1,4 +1,3 @@
-
 const DIRECTION_LEFT = [-1, 0]
 const DIRECTION_RIGHT = [1, 0]
 const DIRECTION_UP = [0, -1]
diff --git a/src/services/html_converter/utility.service.js b/src/services/html_converter/utility.service.js
index f10429718..f8e62dfea 100644
--- a/src/services/html_converter/utility.service.js
+++ b/src/services/html_converter/utility.service.js
@@ -5,7 +5,7 @@
  * @return {String} - tagname, i.e. "div"
  */
 export const getTagName = (tag) => {
-  const result = /(?:<\/(\w+)>|<(\w+)\s?.*?\/?>)/gi.exec(tag)
+  const result = /(?:<\/(\w+)>|<(\w+)\s?.*?\/?>)/gis.exec(tag)
   return result && (result[1] || result[2])
 }
 
@@ -22,7 +22,7 @@ export const getAttrs = (tag, filter) => {
     .replace(new RegExp('^' + getTagName(tag)), '')
     .replace(/\/?$/, '')
     .trim()
-  const attrs = Array.from(innertag.matchAll(/([a-z0-9-]+)(?:=("[^"]+?"|'[^']+?'))?/gi))
+  const attrs = Array.from(innertag.matchAll(/([a-z]+[a-z0-9-]*)(?:=("[^"]+?"|'[^']+?'))?/gi))
     .map(([trash, key, value]) => [key, value])
     .map(([k, v]) => {
       if (!v) return [k, true]
diff --git a/src/services/locale/locale.service.js b/src/services/locale/locale.service.js
index a4af8b90f..9a96cf012 100644
--- a/src/services/locale/locale.service.js
+++ b/src/services/locale/locale.service.js
@@ -3,6 +3,7 @@ import ISO6391 from 'iso-639-1'
 import _ from 'lodash'
 
 const specialLanguageCodes = {
+  pdc: 'en',
   ja_easy: 'ja',
   zh_Hant: 'zh-HANT',
   zh: 'zh-Hans'
@@ -18,7 +19,9 @@ const internalToBackendLocaleMulti = codes => {
 
 const getLanguageName = (code) => {
   const specialLanguageNames = {
+    pdc: 'Pennsilfaanisch-Deitsch',
     ja_easy: 'やさしいにほんご',
+    'nan-TW': '臺語（閩南語）',
     zh: '简体中文',
     zh_Hant: '繁體中文'
   }
diff --git a/src/services/matcher/matcher.service.js b/src/services/matcher/matcher.service.js
index b6c4e9099..54f02d312 100644
--- a/src/services/matcher/matcher.service.js
+++ b/src/services/matcher/matcher.service.js
@@ -14,8 +14,11 @@ export const mentionMatchesUrl = (attention, url) => {
  * @param {string} url
  */
 export const extractTagFromUrl = (url) => {
-  const regex = /tag[s]*\/(\w+)$/g
-  const result = regex.exec(url)
+  const decoded = decodeURI(url)
+  // https://git.pleroma.social/pleroma/elixir-libraries/linkify/-/blob/master/lib/linkify/parser.ex
+  // https://www.pcre.org/original/doc/html/pcrepattern.html
+  const regex = /tag[s]*\/([\p{L}\p{N}_]*[\p{Alphabetic}_·\u{200c}][\p{L}\p{N}_·\p{M}\u{200c}]*)$/ug
+  const result = regex.exec(decoded)
   if (!result) {
     return false
   }
diff --git a/src/services/new_api/oauth.js b/src/services/new_api/oauth.js
index 3c8e64bd9..a4b7cbf07 100644
--- a/src/services/new_api/oauth.js
+++ b/src/services/new_api/oauth.js
@@ -10,7 +10,8 @@ export const getOrCreateApp = ({ clientId, clientSecret, instance, commit }) =>
   const url = `${instance}/api/v1/apps`
   const form = new window.FormData()
 
-  form.append('client_name', `PleromaFE_${window.___pleromafe_commit_hash}_${(new Date()).toISOString()}`)
+  form.append('client_name', 'PleromaFE')
+  form.append('website', 'https://pleroma.social')
   form.append('redirect_uris', REDIRECT_URI)
   form.append('scopes', 'read write follow push admin')
 
diff --git a/src/services/notification_utils/notification_utils.js b/src/services/notification_utils/notification_utils.js
index aec753c46..24408d2b8 100644
--- a/src/services/notification_utils/notification_utils.js
+++ b/src/services/notification_utils/notification_utils.js
@@ -1,29 +1,38 @@
-import { filter, sortBy, includes } from 'lodash'
 import { muteWordHits } from '../status_parser/status_parser.js'
 import { showDesktopNotification } from '../desktop_notification_utils/desktop_notification_utils.js'
 import { useI18nStore } from '../../stores/i18n.js'
 
-export const notificationsFromStore = store => store.state.statuses.notifications.data
+import FaviconService from 'src/services/favicon_service/favicon_service.js'
+
+export const ACTIONABLE_NOTIFICATION_TYPES = new Set(['mention', 'pleroma:report', 'follow_request'])
+
+let cachedBadgeUrl = null
+
+export const notificationsFromStore = store => store.state.notifications.data
 
 export const visibleTypes = store => {
-  const rootState = store.rootState || store.state
+  // When called from within a module we need rootGetters to access wider scope
+  // however when called from a component (i.e. this.$store) we already have wider scope
+  const rootGetters = store.rootGetters || store.getters
+  const { notificationVisibility } = rootGetters.mergedConfig
 
   return ([
-    rootState.config.notificationVisibility.likes && 'like',
-    rootState.config.notificationVisibility.mentions && 'mention',
-    rootState.config.notificationVisibility.repeats && 'repeat',
-    rootState.config.notificationVisibility.follows && 'follow',
-    rootState.config.notificationVisibility.followRequest && 'follow_request',
-    rootState.config.notificationVisibility.moves && 'move',
-    rootState.config.notificationVisibility.emojiReactions && 'pleroma:emoji_reaction',
-    rootState.config.notificationVisibility.reports && 'pleroma:report',
-    rootState.config.notificationVisibility.polls && 'poll'
+    notificationVisibility.likes && 'like',
+    notificationVisibility.mentions && 'mention',
+    notificationVisibility.statuses && 'status',
+    notificationVisibility.repeats && 'repeat',
+    notificationVisibility.follows && 'follow',
+    notificationVisibility.followRequest && 'follow_request',
+    notificationVisibility.moves && 'move',
+    notificationVisibility.emojiReactions && 'pleroma:emoji_reaction',
+    notificationVisibility.reports && 'pleroma:report',
+    notificationVisibility.polls && 'poll'
   ].filter(_ => _))
 }
 
-const statusNotifications = ['like', 'mention', 'repeat', 'pleroma:emoji_reaction', 'poll']
+const statusNotifications = new Set(['like', 'mention', 'status', 'repeat', 'pleroma:emoji_reaction', 'poll'])
 
-export const isStatusNotification = (type) => includes(statusNotifications, type)
+export const isStatusNotification = (type) => statusNotifications.has(type)
 
 export const isValidNotification = (notification) => {
   if (isStatusNotification(notification.type) && !notification.status) {
@@ -50,7 +59,8 @@ const sortById = (a, b) => {
 
 const isMutedNotification = (store, notification) => {
   if (!notification.status) return
-  return notification.status.muted || muteWordHits(notification.status, store.rootGetters.mergedConfig.muteWords).length > 0
+  const rootGetters = store.rootGetters || store.getters
+  return notification.status.muted || muteWordHits(notification.status, rootGetters.mergedConfig.muteWords).length > 0
 }
 
 export const maybeShowNotification = (store, notification) => {
@@ -66,19 +76,39 @@ export const maybeShowNotification = (store, notification) => {
 
 export const filteredNotificationsFromStore = (store, types) => {
   // map is just to clone the array since sort mutates it and it causes some issues
-  let sortedNotifications = notificationsFromStore(store).map(_ => _).sort(sortById)
-  sortedNotifications = sortBy(sortedNotifications, 'seen')
+  const sortedNotifications = notificationsFromStore(store).map(_ => _).sort(sortById)
+  // TODO implement sorting elsewhere and make it optional
   return sortedNotifications.filter(
     (notification) => (types || visibleTypes(store)).includes(notification.type)
   )
 }
 
-export const unseenNotificationsFromStore = store =>
-  filter(filteredNotificationsFromStore(store), ({ seen }) => !seen)
+export const unseenNotificationsFromStore = store => {
+  const rootGetters = store.rootGetters || store.getters
+  const ignoreInactionableSeen = rootGetters.mergedConfig.ignoreInactionableSeen
+
+  return filteredNotificationsFromStore(store).filter(({ seen, type }) => {
+    if (!ignoreInactionableSeen) return !seen
+    if (seen) return false
+    return ACTIONABLE_NOTIFICATION_TYPES.has(type)
+  })
+}
 
 export const prepareNotificationObject = (notification, i18n) => {
+  if (cachedBadgeUrl === null) {
+    const favicons = FaviconService.getOriginalFavicons()
+    const favicon = favicons[favicons.length - 1]
+    if (!favicon) {
+      cachedBadgeUrl = 'about:blank'
+    } else {
+      cachedBadgeUrl = favicon.favimg.src
+    }
+  }
+
   const notifObj = {
-    tag: notification.id
+    tag: notification.id,
+    type: notification.type,
+    badge: cachedBadgeUrl
   }
   const status = notification.status
   const title = notification.from_profile.name
@@ -89,6 +119,9 @@ export const prepareNotificationObject = (notification, i18n) => {
     case 'like':
       i18nString = 'favorited_you'
       break
+    case 'status':
+      i18nString = 'subscribed_status'
+      break
     case 'repeat':
       i18nString = 'repeated_you'
       break
@@ -125,3 +158,18 @@ export const prepareNotificationObject = (notification, i18n) => {
 
   return notifObj
 }
+
+export const countExtraNotifications = (store) => {
+  const rootGetters = store.rootGetters || store.getters
+  const mergedConfig = rootGetters.mergedConfig
+
+  if (!mergedConfig.showExtraNotifications) {
+    return 0
+  }
+
+  return [
+    mergedConfig.showChatsInExtraNotifications ? rootGetters.unreadChatCount : 0,
+    mergedConfig.showAnnouncementsInExtraNotifications ? rootGetters.unreadAnnouncementCount : 0,
+    mergedConfig.showFollowRequestsInExtraNotifications ? rootGetters.followRequestCount : 0
+  ].reduce((a, c) => a + c, 0)
+}
diff --git a/src/services/notifications_fetcher/notifications_fetcher.service.js b/src/services/notifications_fetcher/notifications_fetcher.service.js
index 3b4f9f7b1..926bc8369 100644
--- a/src/services/notifications_fetcher/notifications_fetcher.service.js
+++ b/src/services/notifications_fetcher/notifications_fetcher.service.js
@@ -6,11 +6,15 @@ import { promiseInterval } from '../promise_interval/promise_interval.js'
 // Note: chat_mention excluded as pleroma-fe polls them separately
 const mastoApiNotificationTypes = [
   'mention',
+  'status',
   'favourite',
   'reblog',
   'follow',
+  'follow_request',
   'move',
+  'poll',
   'pleroma:emoji_reaction',
+  'pleroma:chat_mention',
   'pleroma:report'
 ]
 
@@ -22,7 +26,7 @@ const fetchAndUpdate = ({ store, credentials, older = false, since }) => {
   const args = { credentials }
   const { getters } = store
   const rootState = store.rootState || store.state
-  const timelineData = rootState.statuses.notifications
+  const timelineData = rootState.notifications
   const hideMutedPosts = getters.mergedConfig.hideMutedPosts
 
   args.includeTypes = mastoApiNotificationTypes
@@ -50,10 +54,14 @@ const fetchAndUpdate = ({ store, credentials, older = false, since }) => {
     // The normal maxId-check does not tell if older notifications have changed
     const notifications = timelineData.data
     const readNotifsIds = notifications.filter(n => n.seen).map(n => n.id)
-    const numUnseenNotifs = notifications.length - readNotifsIds.length
-    if (numUnseenNotifs > 0 && readNotifsIds.length > 0) {
-      args.since = Math.max(...readNotifsIds)
-      fetchNotifications({ store, args, older })
+    const unreadNotifsIds = notifications.filter(n => !n.seen).map(n => n.id)
+    if (readNotifsIds.length > 0 && readNotifsIds.length > 0) {
+      const minId = Math.min(...unreadNotifsIds) // Oldest known unread notification
+      if (minId !== Infinity) {
+        args.since = false // Don't use since_id since it sorta conflicts with min_id
+        args.minId = minId - 1 // go beyond
+        fetchNotifications({ store, args, older })
+      }
     }
 
     return result
diff --git a/src/services/poll/poll.service.js b/src/services/poll/poll.service.js
new file mode 100644
index 000000000..90f8e87ae
--- /dev/null
+++ b/src/services/poll/poll.service.js
@@ -0,0 +1,36 @@
+import * as DateUtils from 'src/services/date_utils/date_utils.js'
+import { uniq } from 'lodash'
+
+const pollFallbackValues = {
+  pollType: 'single',
+  options: ['', ''],
+  expiryAmount: 10,
+  expiryUnit: 'minutes'
+}
+
+const pollFallback = (object, attr) => {
+  return object[attr] !== undefined ? object[attr] : pollFallbackValues[attr]
+}
+
+const pollFormToMasto = (poll) => {
+  const expiresIn = DateUtils.unitToSeconds(
+    pollFallback(poll, 'expiryUnit'),
+    pollFallback(poll, 'expiryAmount')
+  )
+
+  const options = uniq(pollFallback(poll, 'options').filter(option => option !== ''))
+  if (options.length < 2) {
+    return { errorKey: 'polls.not_enough_options' }
+  }
+
+  return {
+    options,
+    multiple: pollFallback(poll, 'pollType') === 'multiple',
+    expiresIn
+  }
+}
+
+export {
+  pollFallback,
+  pollFormToMasto
+}
diff --git a/src/services/promise_interval/promise_interval.js b/src/services/promise_interval/promise_interval.js
index 0c0a66a01..0f9abaf13 100644
--- a/src/services/promise_interval/promise_interval.js
+++ b/src/services/promise_interval/promise_interval.js
@@ -1,4 +1,3 @@
-
 // promiseInterval - replacement for setInterval for promises, starts counting
 // the interval only after a promise is done instead of immediately.
 // - promiseCall is a function that returns a promise, it's called the first
diff --git a/src/services/random_seed/random_seed.service.js b/src/services/random_seed/random_seed.service.js
new file mode 100644
index 000000000..33f92e811
--- /dev/null
+++ b/src/services/random_seed/random_seed.service.js
@@ -0,0 +1,3 @@
+const genRandomSeed = () => `${Math.random()}`.replace('.', '-')
+
+export default genRandomSeed
diff --git a/src/services/status_poster/status_poster.service.js b/src/services/status_poster/status_poster.service.js
index 1eb10bb61..aaef5a7a8 100644
--- a/src/services/status_poster/status_poster.service.js
+++ b/src/services/status_poster/status_poster.service.js
@@ -10,6 +10,7 @@ const postStatus = ({
   poll,
   media = [],
   inReplyToStatusId = undefined,
+  quoteId = undefined,
   contentType = 'text/plain',
   preview = false,
   idempotencyKey = ''
@@ -24,6 +25,7 @@ const postStatus = ({
     sensitive,
     mediaIds,
     inReplyToStatusId,
+    quoteId,
     contentType,
     poll,
     preview,
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 43fe3c730..5592c527e 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -1,452 +1,302 @@
-import { convert } from 'chromatism'
-import { rgb2hex, hex2rgb, rgba2css, getCssColor, relativeLuminance } from '../color_convert/color_convert.js'
-import { getColors, computeDynamicColor, getOpacitySlot } from '../theme_data/theme_data.service.js'
+import { init, getEngineChecksum } from '../theme_data/theme_data_3.service.js'
+import { getCssRules } from '../theme_data/css_utils.js'
 import { defaultState } from '../../modules/config.js'
+import { chunk } from 'lodash'
+import pako from 'pako'
+import localforage from 'localforage'
 
-export const applyTheme = (input) => {
-  const { rules } = generatePreset(input)
-  const head = document.head
-  const body = document.body
-  body.classList.add('hidden')
+// On platforms where this is not supported, it will return undefined
+// Otherwise it will return an array
+const supportsAdoptedStyleSheets = !!document.adoptedStyleSheets
 
-  const styleEl = document.createElement('style')
-  head.appendChild(styleEl)
-  const styleSheet = styleEl.sheet
+const createStyleSheet = (id) => {
+  if (supportsAdoptedStyleSheets) {
+    return {
+      el: null,
+      sheet: new CSSStyleSheet(),
+      rules: []
+    }
+  }
 
-  styleSheet.toString()
-  styleSheet.insertRule(`:root { ${rules.radii} }`, 'index-max')
-  styleSheet.insertRule(`:root { ${rules.colors} }`, 'index-max')
-  styleSheet.insertRule(`:root { ${rules.shadows} }`, 'index-max')
-  styleSheet.insertRule(`:root { ${rules.fonts} }`, 'index-max')
-  body.classList.remove('hidden')
+  const el = document.getElementById(id)
+  // Clear all rules in it
+  for (let i = el.sheet.cssRules.length - 1; i >= 0; --i) {
+    el.sheet.deleteRule(i)
+  }
+
+  return {
+    el,
+    sheet: el.sheet,
+    rules: []
+  }
 }
 
-const configColumns = ({ sidebarColumnWidth, contentColumnWidth, notifsColumnWidth, emojiReactionsScale }) =>
-  ({ sidebarColumnWidth, contentColumnWidth, notifsColumnWidth, emojiReactionsScale })
+const EAGER_STYLE_ID = 'pleroma-eager-styles'
+const LAZY_STYLE_ID = 'pleroma-lazy-styles'
 
-const defaultConfigColumns = configColumns(defaultState)
+const adoptStyleSheets = (styles) => {
+  if (supportsAdoptedStyleSheets) {
+    document.adoptedStyleSheets = styles.map(s => s.sheet)
+  }
+  // Some older browsers do not support document.adoptedStyleSheets.
+  // In this case, we use the <style> elements.
+  // Since the <style> elements we need are already in the DOM, there
+  // is nothing to do here.
+}
 
-export const applyConfig = (config) => {
-  const columns = configColumns(config)
+export const generateTheme = (inputRuleset, callbacks, debug) => {
+  const {
+    onNewRule = (rule, isLazy) => {},
+    onLazyFinished = () => {},
+    onEagerFinished = () => {}
+  } = callbacks
 
-  if (columns === defaultConfigColumns) {
+  const themes3 = init({
+    inputRuleset,
+    debug
+  })
+
+  getCssRules(themes3.eager, debug).forEach(rule => {
+    // Hacks to support multiple selectors on same component
+    onNewRule(rule, false)
+  })
+  onEagerFinished()
+
+  // Optimization - instead of processing all lazy rules in one go, process them in small chunks
+  // so that UI can do other things and be somewhat responsive while less important rules are being
+  // processed
+  let counter = 0
+  const chunks = chunk(themes3.lazy, 200)
+  // let t0 = performance.now()
+  const processChunk = () => {
+    const chunk = chunks[counter]
+    Promise.all(chunk.map(x => x())).then(result => {
+      getCssRules(result.filter(x => x), debug).forEach(rule => {
+        onNewRule(rule, true)
+      })
+      // const t1 = performance.now()
+      // console.debug('Chunk ' + counter + ' took ' + (t1 - t0) + 'ms')
+      // t0 = t1
+      counter += 1
+      if (counter < chunks.length) {
+        setTimeout(processChunk, 0)
+      } else {
+        onLazyFinished()
+      }
+    })
+  }
+
+  return { lazyProcessFunc: processChunk }
+}
+
+export const tryLoadCache = async () => {
+  console.info('Trying to load compiled theme data from cache')
+  const data = await localforage.getItem('pleromafe-theme-cache')
+  if (!data) return null
+  let cache
+  try {
+    const inflated = pako.inflate(data)
+    const decoded = new TextDecoder().decode(inflated)
+    cache = JSON.parse(decoded)
+    console.info(`Loaded theme from cache, compressed=${Math.ceil(data.length / 1024)}kiB size=${Math.ceil(inflated.length / 1024)}kiB`)
+  } catch (e) {
+    console.error('Failed to decode theme cache:', e)
+    return false
+  }
+  if (cache.engineChecksum === getEngineChecksum()) {
+    const eagerStyles = createStyleSheet(EAGER_STYLE_ID)
+    const lazyStyles = createStyleSheet(LAZY_STYLE_ID)
+
+    cache.data[0].forEach(rule => eagerStyles.sheet.insertRule(rule, 'index-max'))
+    cache.data[1].forEach(rule => lazyStyles.sheet.insertRule(rule, 'index-max'))
+
+    adoptStyleSheets([eagerStyles, lazyStyles])
+
+    return true
+  } else {
+    console.warn('Engine checksum doesn\'t match, cache not usable, clearing')
+    localStorage.removeItem('pleroma-fe-theme-cache')
+  }
+}
+
+export const applyTheme = (
+  input,
+  onEagerFinish = data => {},
+  onFinish = data => {},
+  debug
+) => {
+  const eagerStyles = createStyleSheet(EAGER_STYLE_ID)
+  const lazyStyles = createStyleSheet(LAZY_STYLE_ID)
+
+  const insertRule = (styles, rule) => {
+    if (rule.indexOf('webkit') >= 0) {
+      try {
+        styles.sheet.insertRule(rule, 'index-max')
+        styles.rules.push(rule)
+      } catch (e) {
+        console.warn('Can\'t insert rule due to lack of support', e)
+      }
+    } else {
+      styles.sheet.insertRule(rule, 'index-max')
+      styles.rules.push(rule)
+    }
+  }
+
+  const { lazyProcessFunc } = generateTheme(
+    input,
+    {
+      onNewRule (rule, isLazy) {
+        if (isLazy) {
+          insertRule(lazyStyles, rule)
+        } else {
+          insertRule(eagerStyles, rule)
+        }
+      },
+      onEagerFinished () {
+        adoptStyleSheets([eagerStyles])
+        onEagerFinish()
+      },
+      onLazyFinished () {
+        adoptStyleSheets([eagerStyles, lazyStyles])
+        const cache = { engineChecksum: getEngineChecksum(), data: [eagerStyles.rules, lazyStyles.rules] }
+        onFinish(cache)
+        const compress = (js) => {
+          return pako.deflate(JSON.stringify(js))
+        }
+        localforage.setItem('pleromafe-theme-cache', compress(cache))
+      }
+    },
+    debug
+  )
+
+  setTimeout(lazyProcessFunc, 0)
+}
+
+const extractStyleConfig = ({
+  sidebarColumnWidth,
+  contentColumnWidth,
+  notifsColumnWidth,
+  emojiReactionsScale,
+  emojiSize,
+  navbarSize,
+  panelHeaderSize,
+  textSize,
+  forcedRoundness
+}) => {
+  const result = {
+    sidebarColumnWidth,
+    contentColumnWidth,
+    notifsColumnWidth,
+    emojiReactionsScale,
+    emojiSize,
+    navbarSize,
+    panelHeaderSize,
+    textSize
+  }
+
+  switch (forcedRoundness) {
+    case 'disable':
+      break
+    case '0':
+      result.forcedRoundness = '0'
+      break
+    case '1':
+      result.forcedRoundness = '1px'
+      break
+    case '2':
+      result.forcedRoundness = '0.4rem'
+      break
+    default:
+  }
+
+  return result
+}
+
+const defaultStyleConfig = extractStyleConfig(defaultState)
+
+export const applyConfig = (input, i18n) => {
+  const config = extractStyleConfig(input)
+
+  if (config === defaultStyleConfig) {
     return
   }
 
   const head = document.head
-  const body = document.body
-  body.classList.add('hidden')
 
   const rules = Object
-    .entries(columns)
+    .entries(config)
     .filter(([k, v]) => v)
     .map(([k, v]) => `--${k}: ${v}`).join(';')
 
+  document.getElementById('style-config')?.remove()
   const styleEl = document.createElement('style')
+  styleEl.id = 'style-config'
   head.appendChild(styleEl)
   const styleSheet = styleEl.sheet
 
   styleSheet.toString()
   styleSheet.insertRule(`:root { ${rules} }`, 'index-max')
-  body.classList.remove('hidden')
-}
 
-export const getCssShadow = (input, usesDropShadow) => {
-  if (input.length === 0) {
-    return 'none'
-  }
-
-  return input
-    .filter(_ => usesDropShadow ? _.inset : _)
-    .map((shad) => [
-      shad.x,
-      shad.y,
-      shad.blur,
-      shad.spread
-    ].map(_ => _ + 'px').concat([
-      getCssColor(shad.color, shad.alpha),
-      shad.inset ? 'inset' : ''
-    ]).join(' ')).join(', ')
-}
-
-const getCssShadowFilter = (input) => {
-  if (input.length === 0) {
-    return 'none'
-  }
-
-  return input
-  // drop-shadow doesn't support inset or spread
-    .filter((shad) => !shad.inset && Number(shad.spread) === 0)
-    .map((shad) => [
-      shad.x,
-      shad.y,
-      // drop-shadow's blur is twice as strong compared to box-shadow
-      shad.blur / 2
-    ].map(_ => _ + 'px').concat([
-      getCssColor(shad.color, shad.alpha)
-    ]).join(' '))
-    .map(_ => `drop-shadow(${_})`)
-    .join(' ')
-}
-
-export const generateColors = (themeData) => {
-  const sourceColors = !themeData.themeEngineVersion
-    ? colors2to3(themeData.colors || themeData)
-    : themeData.colors || themeData
-
-  const { colors, opacity } = getColors(sourceColors, themeData.opacity || {})
-
-  const htmlColors = Object.entries(colors)
-    .reduce((acc, [k, v]) => {
-      if (!v) return acc
-      acc.solid[k] = rgb2hex(v)
-      acc.complete[k] = typeof v.a === 'undefined' ? rgb2hex(v) : rgba2css(v)
-      return acc
-    }, { complete: {}, solid: {} })
-  return {
-    rules: {
-      colors: Object.entries(htmlColors.complete)
-        .filter(([k, v]) => v)
-        .map(([k, v]) => `--${k}: ${v}`)
-        .join(';')
-    },
-    theme: {
-      colors: htmlColors.solid,
-      opacity
-    }
+  // TODO find a way to make this not apply to theme previews
+  if (Object.prototype.hasOwnProperty.call(config, 'forcedRoundness')) {
+    styleSheet.insertRule(` *:not(.preview-block) {
+        --roundness: var(--forcedRoundness) !important;
+    }`, 'index-max')
   }
 }
 
-export const generateRadii = (input) => {
-  let inputRadii = input.radii || {}
-  // v1 -> v2
-  if (typeof input.btnRadius !== 'undefined') {
-    inputRadii = Object
-      .entries(input)
-      .filter(([k, v]) => k.endsWith('Radius'))
-      .reduce((acc, e) => { acc[e[0].split('Radius')[0]] = e[1]; return acc }, {})
-  }
-  const radii = Object.entries(inputRadii).filter(([k, v]) => v).reduce((acc, [k, v]) => {
-    acc[k] = v
-    return acc
-  }, {
-    btn: 4,
-    input: 4,
-    checkbox: 2,
-    panel: 10,
-    avatar: 5,
-    avatarAlt: 50,
-    tooltip: 2,
-    attachment: 5,
-    chatMessage: inputRadii.panel
-  })
-
-  return {
-    rules: {
-      radii: Object.entries(radii).filter(([k, v]) => v).map(([k, v]) => `--${k}Radius: ${v}px`).join(';')
-    },
-    theme: {
-      radii
-    }
-  }
-}
-
-export const generateFonts = (input) => {
-  const fonts = Object.entries(input.fonts || {}).filter(([k, v]) => v).reduce((acc, [k, v]) => {
-    acc[k] = Object.entries(v).filter(([k, v]) => v).reduce((acc, [k, v]) => {
-      acc[k] = v
-      return acc
-    }, acc[k])
-    return acc
-  }, {
-    interface: {
-      family: 'sans-serif'
-    },
-    input: {
-      family: 'inherit'
-    },
-    post: {
-      family: 'inherit'
-    },
-    postCode: {
-      family: 'monospace'
-    }
-  })
-
-  return {
-    rules: {
-      fonts: Object
-        .entries(fonts)
-        .filter(([k, v]) => v)
-        .map(([k, v]) => `--${k}Font: ${v.family}`).join(';')
-    },
-    theme: {
-      fonts
-    }
-  }
-}
-
-const border = (top, shadow) => ({
-  x: 0,
-  y: top ? 1 : -1,
-  blur: 0,
-  spread: 0,
-  color: shadow ? '#000000' : '#FFFFFF',
-  alpha: 0.2,
-  inset: true
-})
-const buttonInsetFakeBorders = [border(true, false), border(false, true)]
-const inputInsetFakeBorders = [border(true, true), border(false, false)]
-const hoverGlow = {
-  x: 0,
-  y: 0,
-  blur: 4,
-  spread: 0,
-  color: '--faint',
-  alpha: 1
-}
-
-export const DEFAULT_SHADOWS = {
-  panel: [{
-    x: 1,
-    y: 1,
-    blur: 4,
-    spread: 0,
-    color: '#000000',
-    alpha: 0.6
-  }],
-  topBar: [{
-    x: 0,
-    y: 0,
-    blur: 4,
-    spread: 0,
-    color: '#000000',
-    alpha: 0.6
-  }],
-  popup: [{
-    x: 2,
-    y: 2,
-    blur: 3,
-    spread: 0,
-    color: '#000000',
-    alpha: 0.5
-  }],
-  avatar: [{
-    x: 0,
-    y: 1,
-    blur: 8,
-    spread: 0,
-    color: '#000000',
-    alpha: 0.7
-  }],
-  avatarStatus: [],
-  panelHeader: [],
-  button: [{
-    x: 0,
-    y: 0,
-    blur: 2,
-    spread: 0,
-    color: '#000000',
-    alpha: 1
-  }, ...buttonInsetFakeBorders],
-  buttonHover: [hoverGlow, ...buttonInsetFakeBorders],
-  buttonPressed: [hoverGlow, ...inputInsetFakeBorders],
-  input: [...inputInsetFakeBorders, {
-    x: 0,
-    y: 0,
-    blur: 2,
-    inset: true,
-    spread: 0,
-    color: '#000000',
-    alpha: 1
-  }]
-}
-export const generateShadows = (input, colors) => {
-  // TODO this is a small hack for `mod` to work with shadows
-  // this is used to get the "context" of shadow, i.e. for `mod` properly depend on background color of element
-  const hackContextDict = {
-    button: 'btn',
-    panel: 'bg',
-    top: 'topBar',
-    popup: 'popover',
-    avatar: 'bg',
-    panelHeader: 'panel',
-    input: 'input'
-  }
-
-  const cleanInputShadows = Object.fromEntries(
-    Object.entries(input.shadows || {})
-      .map(([name, shadowSlot]) => [
-        name,
-        // defaulting color to black to avoid potential problems
-        shadowSlot.map(shadowDef => ({ color: '#000000', ...shadowDef }))
-      ])
-  )
-  const inputShadows = cleanInputShadows && !input.themeEngineVersion
-    ? shadows2to3(cleanInputShadows, input.opacity)
-    : cleanInputShadows || {}
-  const shadows = Object.entries({
-    ...DEFAULT_SHADOWS,
-    ...inputShadows
-  }).reduce((shadowsAcc, [slotName, shadowDefs]) => {
-    const slotFirstWord = slotName.replace(/[A-Z].*$/, '')
-    const colorSlotName = hackContextDict[slotFirstWord]
-    const isLightOnDark = relativeLuminance(convert(colors[colorSlotName]).rgb) < 0.5
-    const mod = isLightOnDark ? 1 : -1
-    const newShadow = shadowDefs.reduce((shadowAcc, def) => [
-      ...shadowAcc,
-      {
-        ...def,
-        color: rgb2hex(computeDynamicColor(
-          def.color,
-          (variableSlot) => convert(colors[variableSlot]).rgb,
-          mod
-        ))
-      }
-    ], [])
-    return { ...shadowsAcc, [slotName]: newShadow }
-  }, {})
-
-  return {
-    rules: {
-      shadows: Object
-        .entries(shadows)
-      // TODO for v2.2: if shadow doesn't have non-inset shadows with spread > 0 - optionally
-      // convert all non-inset shadows into filter: drop-shadow() to boost performance
-        .map(([k, v]) => [
-          `--${k}Shadow: ${getCssShadow(v)}`,
-          `--${k}ShadowFilter: ${getCssShadowFilter(v)}`,
-          `--${k}ShadowInset: ${getCssShadow(v, true)}`
-        ].join(';'))
-        .join(';')
-    },
-    theme: {
-      shadows
-    }
-  }
-}
-
-export const composePreset = (colors, radii, shadows, fonts) => {
-  return {
-    rules: {
-      ...shadows.rules,
-      ...colors.rules,
-      ...radii.rules,
-      ...fonts.rules
-    },
-    theme: {
-      ...shadows.theme,
-      ...colors.theme,
-      ...radii.theme,
-      ...fonts.theme
-    }
-  }
-}
-
-export const generatePreset = (input) => {
-  const colors = generateColors(input)
-  return composePreset(
-    colors,
-    generateRadii(input),
-    generateShadows(input, colors.theme.colors, colors.mod),
-    generateFonts(input)
-  )
-}
-
-export const getThemes = () => {
+export const getResourcesIndex = async (url, parser = JSON.parse) => {
   const cache = 'no-store'
+  const customUrl = url.replace(/\.(\w+)$/, '.custom.$1')
+  let builtin
+  let custom
 
-  return window.fetch('/static/styles.json', { cache })
-    .then((data) => data.json())
-    .then((themes) => {
-      return Object.entries(themes).map(([k, v]) => {
-        let promise = null
+  const resourceTransform = (resources) => {
+    return Object
+      .entries(resources)
+      .map(([k, v]) => {
         if (typeof v === 'object') {
-          promise = Promise.resolve(v)
+          return [k, () => Promise.resolve(v)]
         } else if (typeof v === 'string') {
-          promise = window.fetch(v, { cache })
-            .then((data) => data.json())
-            .catch((e) => {
-              console.error(e)
-              return null
-            })
+          return [
+            k,
+            () => window
+              .fetch(v, { cache })
+              .then(data => data.text())
+              .then(text => parser(text))
+              .catch(e => {
+                console.error(e)
+                return null
+              })
+          ]
+        } else {
+          console.error(`Unknown resource format - ${k} is a ${typeof v}`)
+          return [k, null]
         }
-        return [k, promise]
       })
-    })
-    .then((promises) => {
-      return promises
-        .reduce((acc, [k, v]) => {
-          acc[k] = v
-          return acc
-        }, {})
-    })
+  }
+
+  try {
+    const builtinData = await window.fetch(url, { cache })
+    const builtinResources = await builtinData.json()
+    builtin = resourceTransform(builtinResources)
+  } catch (e) {
+    builtin = []
+    console.warn(`Builtin resources at ${url} unavailable`)
+  }
+
+  try {
+    const customData = await window.fetch(customUrl, { cache })
+    const customResources = await customData.json()
+    custom = resourceTransform(customResources)
+  } catch (e) {
+    custom = []
+    console.warn(`Custom resources at ${customUrl} unavailable`)
+  }
+
+  const total = [...custom, ...builtin]
+  if (total.length === 0) {
+    return Promise.reject(new Error(`Resource at ${url} and ${customUrl} completely unavailable. Panicking`))
+  }
+  return Promise.resolve(Object.fromEntries(total))
 }
-export const colors2to3 = (colors) => {
-  return Object.entries(colors).reduce((acc, [slotName, color]) => {
-    const btnPositions = ['', 'Panel', 'TopBar']
-    switch (slotName) {
-      case 'lightBg':
-        return { ...acc, highlight: color }
-      case 'btnText':
-        return {
-          ...acc,
-          ...btnPositions
-            .reduce(
-              (statePositionAcc, position) =>
-                ({ ...statePositionAcc, ['btn' + position + 'Text']: color })
-              , {}
-            )
-        }
-      default:
-        return { ...acc, [slotName]: color }
-    }
-  }, {})
-}
-
-/**
- * This handles compatibility issues when importing v2 theme's shadows to current format
- *
- * Back in v2 shadows allowed you to use dynamic colors however those used pure CSS3 variables
- */
-export const shadows2to3 = (shadows, opacity) => {
-  return Object.entries(shadows).reduce((shadowsAcc, [slotName, shadowDefs]) => {
-    const isDynamic = ({ color = '#000000' }) => color.startsWith('--')
-    const getOpacity = ({ color }) => opacity[getOpacitySlot(color.substring(2).split(',')[0])]
-    const newShadow = shadowDefs.reduce((shadowAcc, def) => [
-      ...shadowAcc,
-      {
-        ...def,
-        alpha: isDynamic(def) ? getOpacity(def) || 1 : def.alpha
-      }
-    ], [])
-    return { ...shadowsAcc, [slotName]: newShadow }
-  }, {})
-}
-
-export const getPreset = (val) => {
-  return getThemes()
-    .then((themes) => themes[val] ? themes[val] : themes['pleroma-dark'])
-    .then((theme) => {
-      const isV1 = Array.isArray(theme)
-      const data = isV1 ? {} : theme.theme
-
-      if (isV1) {
-        const bg = hex2rgb(theme[1])
-        const fg = hex2rgb(theme[2])
-        const text = hex2rgb(theme[3])
-        const link = hex2rgb(theme[4])
-
-        const cRed = hex2rgb(theme[5] || '#FF0000')
-        const cGreen = hex2rgb(theme[6] || '#00FF00')
-        const cBlue = hex2rgb(theme[7] || '#0000FF')
-        const cOrange = hex2rgb(theme[8] || '#E3FF00')
-
-        data.colors = { bg, fg, text, link, cRed, cBlue, cGreen, cOrange }
-      }
-
-      return { theme: data, source: theme.source }
-    })
-}
-
-export const setPreset = (val) => getPreset(val).then(data => applyTheme(data.theme))
diff --git a/src/services/push/push.js b/src/services/sw/sw.js
similarity index 66%
rename from src/services/push/push.js
rename to src/services/sw/sw.js
index 1787ac365..b25f6328d 100644
--- a/src/services/push/push.js
+++ b/src/services/sw/sw.js
@@ -10,8 +10,12 @@ function urlBase64ToUint8Array (base64String) {
   return Uint8Array.from([...rawData].map((char) => char.charCodeAt(0)))
 }
 
+export function isSWSupported () {
+  return 'serviceWorker' in navigator
+}
+
 function isPushSupported () {
-  return 'serviceWorker' in navigator && 'PushManager' in window
+  return 'PushManager' in window
 }
 
 function getOrCreateServiceWorker () {
@@ -24,7 +28,7 @@ function subscribePush (registration, isEnabled, vapidPublicKey) {
   if (!vapidPublicKey) return Promise.reject(new Error('VAPID public key is not found'))
 
   const subscribeOptions = {
-    userVisibleOnly: true,
+    userVisibleOnly: false,
     applicationServerKey: urlBase64ToUint8Array(vapidPublicKey)
   }
   return registration.pushManager.subscribe(subscribeOptions)
@@ -32,14 +36,14 @@ function subscribePush (registration, isEnabled, vapidPublicKey) {
 
 function unsubscribePush (registration) {
   return registration.pushManager.getSubscription()
-    .then((subscribtion) => {
-      if (subscribtion === null) { return }
-      return subscribtion.unsubscribe()
+    .then((subscription) => {
+      if (subscription === null) { return }
+      return subscription.unsubscribe()
     })
 }
 
 function deleteSubscriptionFromBackEnd (token) {
-  return window.fetch('/api/v1/push/subscription/', {
+  return fetch('/api/v1/push/subscription/', {
     method: 'DELETE',
     headers: {
       'Content-Type': 'application/json',
@@ -78,6 +82,44 @@ function sendSubscriptionToBackEnd (subscription, token, notificationVisibility)
     return responseData
   })
 }
+export async function initServiceWorker (store) {
+  if (!isSWSupported()) return
+  await getOrCreateServiceWorker()
+  navigator.serviceWorker.addEventListener('message', (event) => {
+    const { dispatch } = store
+    const { type, ...rest } = event.data
+
+    switch (type) {
+      case 'notificationClicked':
+        dispatch('notificationClicked', { id: rest.id })
+    }
+  })
+}
+
+export async function showDesktopNotification (content) {
+  if (!isSWSupported) return
+  const { active: sw } = await window.navigator.serviceWorker.getRegistration()
+  if (!sw) return console.error('No serviceworker found!')
+  sw.postMessage({ type: 'desktopNotification', content })
+}
+
+export async function closeDesktopNotification ({ id }) {
+  if (!isSWSupported) return
+  const { active: sw } = await window.navigator.serviceWorker.getRegistration()
+  if (!sw) return console.error('No serviceworker found!')
+  if (id >= 0) {
+    sw.postMessage({ type: 'desktopNotificationClose', content: { id } })
+  } else {
+    sw.postMessage({ type: 'desktopNotificationClose', content: { all: true } })
+  }
+}
+
+export async function updateFocus () {
+  if (!isSWSupported) return
+  const { active: sw } = await window.navigator.serviceWorker.getRegistration()
+  if (!sw) return console.error('No serviceworker found!')
+  sw.postMessage({ type: 'updateFocus' })
+}
 
 export function registerPushNotifications (isEnabled, vapidPublicKey, token, notificationVisibility) {
   if (isPushSupported()) {
@@ -98,13 +140,8 @@ export function unregisterPushNotifications (token) {
         })
         .then(([registration, unsubResult]) => {
           if (!unsubResult) {
-            console.warn('Push subscription cancellation wasn\'t successful, killing SW anyway...')
+            console.warn('Push subscription cancellation wasn\'t successful')
           }
-          return registration.unregister().then((result) => {
-            if (!result) {
-              console.warn('Failed to kill SW')
-            }
-          })
         })
     ]).catch((e) => console.warn(`Failed to disable Web Push Notifications: ${e.message}`))
   }
diff --git a/src/services/theme_data/css_utils.js b/src/services/theme_data/css_utils.js
new file mode 100644
index 000000000..48935ea0e
--- /dev/null
+++ b/src/services/theme_data/css_utils.js
@@ -0,0 +1,156 @@
+import { convert } from 'chromatism'
+
+import { hex2rgb, rgba2css } from '../color_convert/color_convert.js'
+
+export const getCssColorString = (color, alpha = 1) => rgba2css({ ...convert(color).rgb, a: alpha })
+
+export const getCssShadow = (input, usesDropShadow) => {
+  if (input.length === 0) {
+    return 'none'
+  }
+
+  return input
+    .filter(_ => usesDropShadow ? _.inset : _)
+    .map((shad) => [
+      shad.x,
+      shad.y,
+      shad.blur,
+      shad.spread
+    ].map(_ => _ + 'px ').concat([
+      getCssColorString(shad.color, shad.alpha),
+      shad.inset ? 'inset' : ''
+    ]).join(' ')).join(', ')
+}
+
+export const getCssShadowFilter = (input) => {
+  if (input.length === 0) {
+    return 'none'
+  }
+
+  return input
+  // drop-shadow doesn't support inset or spread
+    .filter((shad) => !shad.inset && Number(shad.spread) === 0)
+    .map((shad) => [
+      shad.x,
+      shad.y,
+      // drop-shadow's blur is twice as strong compared to box-shadow
+      shad.blur / 2
+    ].map(_ => _ + 'px').concat([
+      getCssColorString(shad.color, shad.alpha)
+    ]).join(' '))
+    .map(_ => `drop-shadow(${_})`)
+    .join(' ')
+}
+
+// `debug` changes what backgrounds are used to "stacked" solid colors so you can see
+// what theme engine "thinks" is actual background color is for purposes of text color
+// generation and for when --stacked variable is used
+export const getCssRules = (rules, debug) => rules.map(rule => {
+  let selector = rule.selector
+  if (!selector) {
+    selector = 'html'
+  }
+  const header = selector + ' {'
+  const footer = '}'
+
+  const virtualDirectives = Object.entries(rule.virtualDirectives || {}).map(([k, v]) => {
+    return '  ' + k + ': ' + v
+  }).join(';\n')
+
+  const directives = Object.entries(rule.directives).map(([k, v]) => {
+    switch (k) {
+      case 'roundness': {
+        return '  ' + [
+          '--roundness: ' + v + 'px'
+        ].join(';\n  ')
+      }
+      case 'shadow': {
+        if (!rule.dynamicVars.shadow) {
+          return ''
+        }
+        return '  ' + [
+          '--shadow: ' + getCssShadow(rule.dynamicVars.shadow),
+          '--shadowFilter: ' + getCssShadowFilter(rule.dynamicVars.shadow),
+          '--shadowInset: ' + getCssShadow(rule.dynamicVars.shadow, true)
+        ].join(';\n  ')
+      }
+      case 'background': {
+        if (debug) {
+          return `
+            --background: ${getCssColorString(rule.dynamicVars.stacked)};
+            background-color: ${getCssColorString(rule.dynamicVars.stacked)};
+          `
+        }
+        if (v === 'transparent') {
+          if (rule.component === 'Root') return null
+          return [
+            rule.directives.backgroundNoCssColor !== 'yes' ? ('background-color: ' + v) : '',
+            '  --background: ' + v
+          ].filter(x => x).join(';\n')
+        }
+        const color = getCssColorString(rule.dynamicVars.background, rule.directives.opacity)
+        const cssDirectives = ['--background: ' + color]
+        if (rule.directives.backgroundNoCssColor !== 'yes') {
+          cssDirectives.push('background-color: ' + color)
+        }
+        return cssDirectives.filter(x => x).join(';\n')
+      }
+      case 'blur': {
+        const cssDirectives = []
+        if (rule.directives.opacity < 1) {
+          cssDirectives.push(`--backdrop-filter: blur(${v}) `)
+          if (rule.directives.backgroundNoCssColor !== 'yes') {
+            cssDirectives.push(`backdrop-filter: blur(${v}) `)
+          }
+        }
+        return cssDirectives.join(';\n')
+      }
+      case 'font': {
+        return 'font-family: ' + v
+      }
+      case 'textColor': {
+        if (rule.directives.textNoCssColor === 'yes') { return '' }
+        return 'color: ' + v
+      }
+      default:
+        if (k.startsWith('--')) {
+          const [type, value] = v.split('|').map(x => x.trim())
+          switch (type) {
+            case 'color': {
+              const color = rule.dynamicVars[k]
+              if (typeof color === 'string') {
+                return k + ': ' + rgba2css(hex2rgb(color))
+              } else {
+                return k + ': ' + rgba2css(color)
+              }
+            }
+            case 'generic':
+              return k + ': ' + value
+            default:
+              return null
+          }
+        }
+        return null
+    }
+  }).filter(x => x).map(x => '  ' + x + ';').join('\n')
+
+  return [
+    header,
+    directives,
+    (rule.component === 'Text' && rule.state.indexOf('faint') < 0 && rule.directives.textNoCssColor !== 'yes') ? '  color: var(--text);' : '',
+    virtualDirectives,
+    footer
+  ].filter(x => x).join('\n')
+}).filter(x => x)
+
+export const getScopedVersion = (rules, newScope) => {
+  return rules.map(x => {
+    if (x.startsWith('html')) {
+      return x.replace('html', newScope)
+    } else if (x.startsWith('#content')) {
+      return x.replace('#content', newScope)
+    } else {
+      return newScope + ' > ' + x
+    }
+  })
+}
diff --git a/src/services/theme_data/iss_deserializer.js b/src/services/theme_data/iss_deserializer.js
new file mode 100644
index 000000000..55a596a5f
--- /dev/null
+++ b/src/services/theme_data/iss_deserializer.js
@@ -0,0 +1,170 @@
+import { flattenDeep } from 'lodash'
+
+export const deserializeShadow = string => {
+  const modes = ['_full', 'inset', 'x', 'y', 'blur', 'spread', 'color', 'alpha', 'name']
+  const regexPrep = [
+    // inset keyword (optional)
+    '^',
+    '(?:(inset)\\s+)?',
+    // x
+    '(?:(-?[0-9]+(?:\\.[0-9]+)?)\\s+)',
+    // y
+    '(?:(-?[0-9]+(?:\\.[0-9]+)?)\\s+)',
+    // blur (optional)
+    '(?:(-?[0-9]+(?:\\.[0-9]+)?)\\s+)?',
+    // spread (optional)
+    '(?:(-?[0-9]+(?:\\.[0-9]+)?)\\s+)?',
+    // either hex, variable or function
+    '(#[0-9a-f]{6}|--[a-z0-9\\-_]+|\\$[a-z0-9\\-()_ ]+)',
+    // opacity (optional)
+    '(?:\\s+\\/\\s+([0-9]+(?:\\.[0-9]+)?)\\s*)?',
+    // name
+    '(?:\\s+#(\\w+)\\s*)?',
+    '$'
+  ].join('')
+  const regex = new RegExp(regexPrep, 'gis') // global, (stable) indices, single-string
+  const result = regex.exec(string)
+  if (result == null) {
+    if (string.startsWith('$') || string.startsWith('--')) {
+      return string
+    } else {
+      throw new Error(`Invalid shadow definition: '${string}'`)
+    }
+  } else {
+    const numeric = new Set(['x', 'y', 'blur', 'spread', 'alpha'])
+    const { x, y, blur, spread, alpha, inset, color, name } = Object.fromEntries(modes.map((mode, i) => {
+      if (numeric.has(mode)) {
+        const number = Number(result[i])
+        if (Number.isNaN(number)) {
+          if (mode === 'alpha') return [mode, 1]
+          return [mode, 0]
+        }
+        return [mode, number]
+      } else if (mode === 'inset') {
+        return [mode, !!result[i]]
+      } else {
+        return [mode, result[i]]
+      }
+    }).filter(([k, v]) => v !== false).slice(1))
+
+    return { x, y, blur, spread, color, alpha, inset, name }
+  }
+}
+// this works nearly the same as HTML tree converter
+const parseIss = (input) => {
+  const buffer = [{ selector: null, content: [] }]
+  let textBuffer = ''
+
+  const getCurrentBuffer = () => {
+    let current = buffer[buffer.length - 1]
+    if (current == null) {
+      current = { selector: null, content: [] }
+    }
+    return current
+  }
+
+  // Processes current line buffer, adds it to output buffer and clears line buffer
+  const flushText = (kind) => {
+    if (textBuffer === '') return
+    if (kind === 'content') {
+      getCurrentBuffer().content.push(textBuffer.trim())
+    } else {
+      getCurrentBuffer().selector = textBuffer.trim()
+    }
+    textBuffer = ''
+  }
+
+  for (let i = 0; i < input.length; i++) {
+    const char = input[i]
+
+    if (char === ';') {
+      flushText('content')
+    } else if (char === '{') {
+      flushText('header')
+    } else if (char === '}') {
+      flushText('content')
+      buffer.push({ selector: null, content: [] })
+      textBuffer = ''
+    } else {
+      textBuffer += char
+    }
+  }
+
+  return buffer
+}
+export const deserialize = (input) => {
+  const ast = parseIss(input)
+  const finalResult = ast.filter(i => i.selector != null).map(item => {
+    const { selector, content } = item
+    let stateCount = 0
+    const selectors = selector.split(/,/g)
+    const result = selectors.map(selector => {
+      const output = { component: '' }
+      let currentDepth = null
+
+      selector.split(/ /g).reverse().forEach((fragment, index, arr) => {
+        const fragmentObject = { component: '' }
+
+        let mode = 'component'
+        for (let i = 0; i < fragment.length; i++) {
+          const char = fragment[i]
+          switch (char) {
+            case '.': {
+              mode = 'variant'
+              fragmentObject.variant = ''
+              break
+            }
+            case ':': {
+              mode = 'state'
+              fragmentObject.state = fragmentObject.state || []
+              stateCount++
+              break
+            }
+            default: {
+              if (mode === 'state') {
+                const currentState = fragmentObject.state[stateCount - 1]
+                if (currentState == null) {
+                  fragmentObject.state.push('')
+                }
+                fragmentObject.state[stateCount - 1] += char
+              } else {
+                fragmentObject[mode] += char
+              }
+            }
+          }
+        }
+        if (currentDepth !== null) {
+          currentDepth.parent = { ...fragmentObject }
+          currentDepth = currentDepth.parent
+        } else {
+          Object.keys(fragmentObject).forEach(key => {
+            output[key] = fragmentObject[key]
+          })
+          if (index !== (arr.length - 1)) {
+            output.parent = { component: '' }
+          }
+          currentDepth = output
+        }
+      })
+
+      output.directives = Object.fromEntries(content.map(d => {
+        const [property, value] = d.split(':')
+        let realValue = (value || '').trim()
+        if (property === 'shadow') {
+          if (realValue === 'none') {
+            realValue = []
+          } else {
+            realValue = value.split(',').map(v => deserializeShadow(v.trim()))
+          }
+        } if (!Number.isNaN(Number(value))) {
+          realValue = Number(value)
+        }
+        return [property, realValue]
+      }))
+
+      return output
+    })
+    return result
+  })
+  return flattenDeep(finalResult)
+}
diff --git a/src/services/theme_data/iss_serializer.js b/src/services/theme_data/iss_serializer.js
new file mode 100644
index 000000000..9e553eabd
--- /dev/null
+++ b/src/services/theme_data/iss_serializer.js
@@ -0,0 +1,53 @@
+import { unroll } from './iss_utils.js'
+import { deserializeShadow } from './iss_deserializer.js'
+
+export const serializeShadow = (s, throwOnInvalid) => {
+  if (typeof s === 'object') {
+    const inset = s.inset ? 'inset ' : ''
+    const name = s.name ? ` #${s.name} ` : ''
+    const result = `${inset}${s.x} ${s.y} ${s.blur} ${s.spread} ${s.color} / ${s.alpha}${name}`
+    deserializeShadow(result) // Verify that output is valid and parseable
+    return result
+  } else {
+    return s
+  }
+}
+
+export const serialize = (ruleset) => {
+  return ruleset.map((rule) => {
+    if (Object.keys(rule.directives || {}).length === 0) return false
+
+    const header = unroll(rule).reverse().map(rule => {
+      const { component } = rule
+      const newVariant = (rule.variant == null || rule.variant === 'normal') ? '' : ('.' + rule.variant)
+      const newState = (rule.state || []).filter(st => st !== 'normal')
+
+      return `${component}${newVariant}${newState.map(st => ':' + st).join('')}`
+    }).join(' ')
+
+    const content = Object.entries(rule.directives).map(([directive, value]) => {
+      if (directive.startsWith('--')) {
+        const [valType, newValue] = value.split('|') // only first one! intentional!
+        switch (valType) {
+          case 'shadow':
+            return `  ${directive}: ${valType.trim()} | ${newValue.map(serializeShadow).map(s => s.trim()).join(', ')}`
+          default:
+            return `  ${directive}: ${valType.trim()} | ${newValue.trim()}`
+        }
+      } else {
+        switch (directive) {
+          case 'shadow':
+            if (value.length > 0) {
+              return `  ${directive}: ${value.map(serializeShadow).join(', ')}`
+            } else {
+              return `  ${directive}: none`
+            }
+          default:
+            return `  ${directive}: ${value}`
+        }
+      }
+    })
+
+    return `${header} {\n${content.join(';\n')}\n}`
+  }).filter(x => x).join('\n\n')
+}
diff --git a/src/services/theme_data/iss_utils.js b/src/services/theme_data/iss_utils.js
new file mode 100644
index 000000000..a0914ee28
--- /dev/null
+++ b/src/services/theme_data/iss_utils.js
@@ -0,0 +1,199 @@
+import { sortBy } from 'lodash'
+
+// "Unrolls" a tree structure of item: { parent: { ...item2, parent: { ...item3, parent: {...} } }}
+// into an array [item2, item3] for iterating
+export const unroll = (item) => {
+  const out = []
+  let currentParent = item
+  while (currentParent) {
+    out.push(currentParent)
+    currentParent = currentParent.parent
+  }
+  return out
+}
+
+// This gives you an array of arrays of all possible unique (i.e. order-insensitive) combinations
+// Can only accept primitives. Duplicates are not supported and can cause unexpected behavior
+export const getAllPossibleCombinations = (array) => {
+  const combos = [array.map(x => [x])]
+  for (let comboSize = 2; comboSize <= array.length; comboSize++) {
+    const previous = combos[combos.length - 1]
+    const newCombos = previous.map(self => {
+      const selfSet = new Set()
+      self.forEach(x => selfSet.add(x))
+      const nonSelf = array.filter(x => !selfSet.has(x))
+      return nonSelf.map(x => [...self, x])
+    })
+    const flatCombos = newCombos.reduce((acc, x) => [...acc, ...x], [])
+    const uniqueComboStrings = new Set()
+    const uniqueCombos = flatCombos.map(sortBy).filter(x => {
+      if (uniqueComboStrings.has(x.join())) {
+        return false
+      } else {
+        uniqueComboStrings.add(x.join())
+        return true
+      }
+    })
+    combos.push(uniqueCombos)
+  }
+  return combos.reduce((acc, x) => [...acc, ...x], [])
+}
+
+/**
+ * Converts rule, parents and their criteria into a CSS (or path if ignoreOutOfTreeSelector == true)
+ * selector.
+ *
+ * "path" here refers to "fake" selector that cannot be actually used in UI but is used for internal
+ * purposes
+ *
+ * @param {Object} components - object containing all components definitions
+ *
+ * @returns {Function}
+ * @param {Object} rule - rule in question to convert to CSS selector
+ * @param {boolean} ignoreOutOfTreeSelector - wthether to ignore aformentioned field in
+ *   component definition and use selector
+ * @param {boolean} isParent - (mostly) internal argument used when recursing
+ *
+ * @returns {String} CSS selector (or path)
+ */
+export const genericRuleToSelector = components => (rule, ignoreOutOfTreeSelector, liteMode, children) => {
+  const isParent = !!children
+  if (!rule && !isParent) return null
+  const component = components[rule.component]
+  const { states = {}, variants = {}, outOfTreeSelector } = component
+
+  const expand = (array = [], subArray = []) => {
+    if (array.length === 0) return subArray.map(x => [x])
+    if (subArray.length === 0) return array.map(x => [x])
+    return array.map(a => {
+      return subArray.map(b => [a, b])
+    }).flat()
+  }
+
+  let componentSelectors = Array.isArray(component.selector) ? component.selector : [component.selector]
+  if (ignoreOutOfTreeSelector || liteMode) componentSelectors = [componentSelectors[0]]
+  componentSelectors = componentSelectors.map(selector => {
+    if (selector === ':root') {
+      return ''
+    } else if (isParent) {
+      return selector
+    } else {
+      if (outOfTreeSelector && !ignoreOutOfTreeSelector) return outOfTreeSelector
+      return selector
+    }
+  })
+
+  const applicableVariantName = (rule.variant || 'normal')
+  let variantSelectors = null
+  if (applicableVariantName !== 'normal') {
+    variantSelectors = variants[applicableVariantName]
+  } else {
+    variantSelectors = variants?.normal ?? ''
+  }
+  variantSelectors = Array.isArray(variantSelectors) ? variantSelectors : [variantSelectors]
+  if (ignoreOutOfTreeSelector || liteMode) variantSelectors = [variantSelectors[0]]
+
+  const applicableStates = (rule.state || []).filter(x => x !== 'normal')
+  // const applicableStates = (rule.state || [])
+  const statesSelectors = applicableStates.map(state => {
+    const selector = states[state] || ''
+    let arraySelector = Array.isArray(selector) ? selector : [selector]
+    if (ignoreOutOfTreeSelector || liteMode) arraySelector = [arraySelector[0]]
+    arraySelector
+      .sort((a, b) => {
+        if (a.startsWith(':')) return 1
+        if (/^[a-z]/.exec(a)) return -1
+        else return 0
+      })
+      .join('')
+    return arraySelector
+  })
+
+  const statesSelectorsFlat = statesSelectors.reduce((acc, s) => {
+    return expand(acc, s).map(st => st.join(''))
+  }, [])
+
+  const componentVariant = expand(componentSelectors, variantSelectors).map(cv => cv.join(''))
+  const componentVariantStates = expand(componentVariant, statesSelectorsFlat).map(cvs => cvs.join(''))
+  const selectors = expand(componentVariantStates, children).map(cvsc => cvsc.join(' '))
+  /*
+  */
+
+  if (rule.parent) {
+    return genericRuleToSelector(components)(rule.parent, ignoreOutOfTreeSelector, liteMode, selectors)
+  }
+
+  return selectors.join(', ').trim()
+}
+
+/**
+ * Check if combination matches
+ *
+ * @param {Object} criteria - criteria to match against
+ * @param {Object} subject - rule/combination to check match
+ * @param {boolean} strict - strict checking:
+ *   By default every variant and state inherits from "normal" state/variant
+ *   so when checking if combination matches, it WILL match against "normal"
+ *   state/variant. In strict mode inheritance is ignored an "normal" does
+ *   not match
+ */
+export const combinationsMatch = (criteria, subject, strict) => {
+  if (criteria.component !== subject.component) return false
+
+  // All variants inherit from normal
+  if (subject.variant !== 'normal' || strict) {
+    if (criteria.variant !== subject.variant) return false
+  }
+
+  // Subject states > 1 essentially means state is "normal" and therefore matches
+  if (subject.state.length > 1 || strict) {
+    const subjectStatesSet = new Set(subject.state)
+    const criteriaStatesSet = new Set(criteria.state)
+
+    const setsAreEqual =
+      [...criteriaStatesSet].every(state => subjectStatesSet.has(state)) &&
+      [...subjectStatesSet].every(state => criteriaStatesSet.has(state))
+
+    if (!setsAreEqual) return false
+  }
+  return true
+}
+
+/**
+ * Search for rule that matches `criteria` in set of rules
+ * meant to be used in a ruleset.filter() function
+ *
+ * @param {Object} criteria - criteria to search for
+ * @param {boolean} strict - whether search strictly or not (see combinationsMatch)
+ *
+ * @return function that returns true/false if subject matches
+ */
+export const findRules = (criteria, strict) => subject => {
+  // If we searching for "general" rules - ignore "specific" ones
+  if (criteria.parent === null && !!subject.parent) return false
+  if (!combinationsMatch(criteria, subject, strict)) return false
+
+  if (criteria.parent !== undefined && criteria.parent !== null) {
+    if (!subject.parent && !strict) return true
+    const pathCriteria = unroll(criteria)
+    const pathSubject = unroll(subject)
+    if (pathCriteria.length < pathSubject.length) return false
+
+    // Search: .a .b .c
+    // Matches: .a .b .c; .b .c; .c; .z .a .b .c
+    // Does not match .a .b .c .d, .a .b .e
+    for (let i = 0; i < pathCriteria.length; i++) {
+      const criteriaParent = pathCriteria[i]
+      const subjectParent = pathSubject[i]
+      if (!subjectParent) return true
+      if (!combinationsMatch(criteriaParent, subjectParent, strict)) return false
+    }
+  }
+  return true
+}
+
+// Pre-fills 'normal' state/variant if missing
+export const normalizeCombination = rule => {
+  rule.variant = rule.variant ?? 'normal'
+  rule.state = [...new Set(['normal', ...(rule.state || [])])]
+}
diff --git a/src/services/theme_data/pleromafe.t3.js b/src/services/theme_data/pleromafe.t3.js
new file mode 100644
index 000000000..db612a5b5
--- /dev/null
+++ b/src/services/theme_data/pleromafe.t3.js
@@ -0,0 +1,2 @@
+export const sampleRules = [
+]
diff --git a/src/services/theme_data/theme2_keys.js b/src/services/theme_data/theme2_keys.js
new file mode 100644
index 000000000..ffc5627c4
--- /dev/null
+++ b/src/services/theme_data/theme2_keys.js
@@ -0,0 +1,177 @@
+export default [
+  'bg',
+  'wallpaper',
+  'fg',
+  'text',
+  'underlay',
+  'link',
+  'accent',
+  'faint',
+  'faintLink',
+  'postFaintLink',
+
+  'cBlue',
+  'cRed',
+  'cGreen',
+  'cOrange',
+
+  'profileBg',
+  'profileTint',
+
+  'highlight',
+  'highlightLightText',
+  'highlightPostLink',
+  'highlightFaintText',
+  'highlightFaintLink',
+  'highlightPostFaintLink',
+  'highlightText',
+  'highlightLink',
+  'highlightIcon',
+
+  'popover',
+  'popoverLightText',
+  'popoverPostLink',
+  'popoverFaintText',
+  'popoverFaintLink',
+  'popoverPostFaintLink',
+  'popoverText',
+  'popoverLink',
+  'popoverIcon',
+
+  'selectedPost',
+  'selectedPostFaintText',
+  'selectedPostLightText',
+  'selectedPostPostLink',
+  'selectedPostFaintLink',
+  'selectedPostText',
+  'selectedPostLink',
+  'selectedPostIcon',
+
+  'selectedMenu',
+  'selectedMenuLightText',
+  'selectedMenuFaintText',
+  'selectedMenuFaintLink',
+  'selectedMenuText',
+  'selectedMenuLink',
+  'selectedMenuIcon',
+
+  'selectedMenuPopover',
+  'selectedMenuPopoverLightText',
+  'selectedMenuPopoverFaintText',
+  'selectedMenuPopoverFaintLink',
+  'selectedMenuPopoverText',
+  'selectedMenuPopoverLink',
+  'selectedMenuPopoverIcon',
+
+  'lightText',
+
+  'postLink',
+
+  'postGreentext',
+
+  'postCyantext',
+
+  'border',
+
+  'poll',
+  'pollText',
+
+  'icon',
+
+  // Foreground,
+  'fgText',
+  'fgLink',
+
+  // Panel header,
+  'panel',
+  'panelText',
+  'panelFaint',
+  'panelLink',
+
+  // Top bar,
+  'topBar',
+  'topBarText',
+  'topBarLink',
+
+  // Tabs,
+  'tab',
+  'tabText',
+  'tabActiveText',
+
+  // Buttons,
+  'btn',
+  'btnText',
+  'btnPanelText',
+  'btnTopBarText',
+
+  // Buttons: pressed,
+  'btnPressed',
+  'btnPressedText',
+  'btnPressedPanel',
+  'btnPressedPanelText',
+  'btnPressedTopBar',
+  'btnPressedTopBarText',
+
+  // Buttons: toggled,
+  'btnToggled',
+  'btnToggledText',
+  'btnToggledPanelText',
+  'btnToggledTopBarText',
+
+  // Buttons: disabled,
+  'btnDisabled',
+  'btnDisabledText',
+  'btnDisabledPanelText',
+  'btnDisabledTopBarText',
+
+  // Input fields,
+  'input',
+  'inputText',
+  'inputPanelText',
+  'inputTopbarText',
+
+  'alertError',
+  'alertErrorText',
+  'alertErrorPanelText',
+
+  'alertWarning',
+  'alertWarningText',
+  'alertWarningPanelText',
+
+  'alertSuccess',
+  'alertSuccessText',
+  'alertSuccessPanelText',
+
+  'alertNeutral',
+  'alertNeutralText',
+  'alertNeutralPanelText',
+
+  'alertPopupError',
+  'alertPopupErrorText',
+
+  'alertPopupWarning',
+  'alertPopupWarningText',
+
+  'alertPopupSuccess',
+  'alertPopupSuccessText',
+
+  'alertPopupNeutral',
+  'alertPopupNeutralText',
+
+  'badgeNeutral',
+  'badgeNeutralText',
+
+  'badgeNotification',
+  'badgeNotificationText',
+
+  'chatBg',
+
+  'chatMessageIncomingBg',
+  'chatMessageIncomingText',
+  'chatMessageIncomingLink',
+  'chatMessageIncomingBorder',
+  'chatMessageOutgoingBg',
+  'chatMessageOutgoingText',
+  'chatMessageOutgoingLink',
+  'chatMessageOutgoingBorder'
+]
diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js
new file mode 100644
index 000000000..9de1aca3c
--- /dev/null
+++ b/src/services/theme_data/theme2_to_theme3.js
@@ -0,0 +1,534 @@
+import { convert } from 'chromatism'
+import allKeys from './theme2_keys'
+
+// keys that are meant to be used globally, i.e. what's the rest of the theme is based upon.
+export const basePaletteKeys = new Set([
+  'bg',
+  'fg',
+  'text',
+  'link',
+  'accent',
+
+  'cBlue',
+  'cRed',
+  'cGreen',
+  'cOrange',
+
+  'wallpaper'
+])
+
+export const fontsKeys = new Set([
+  'interface',
+  'input',
+  'post',
+  'postCode'
+])
+
+export const opacityKeys = new Set([
+  'alert',
+  'alertPopup',
+  'bg',
+  'border',
+  'btn',
+  'faint',
+  'input',
+  'panel',
+  'popover',
+  'profileTint',
+  'underlay'
+])
+
+export const shadowsKeys = new Set([
+  'panel',
+  'topBar',
+  'popup',
+  'avatar',
+  'avatarStatus',
+  'panelHeader',
+  'button',
+  'buttonHover',
+  'buttonPressed',
+  'input'
+])
+
+export const radiiKeys = new Set([
+  'btn',
+  'input',
+  'checkbox',
+  'panel',
+  'avatar',
+  'avatarAlt',
+  'tooltip',
+  'attachment',
+  'chatMessage'
+])
+
+// Keys that are not available in editor and never meant to be edited
+export const hiddenKeys = new Set([
+  'profileBg',
+  'profileTint'
+])
+
+export const extendedBasePrefixes = [
+  'border',
+  'icon',
+  'highlight',
+  'lightText',
+
+  'popover',
+
+  'panel',
+  'topBar',
+  'tab',
+  'btn',
+  'input',
+  'selectedMenu',
+
+  'alert',
+  'alertPopup',
+  'badge',
+
+  'post',
+  'selectedPost', // wrong nomenclature
+  'poll',
+
+  'chatBg',
+  'chatMessage'
+]
+export const nonComponentPrefixes = new Set([
+  'border',
+  'icon',
+  'highlight',
+  'lightText',
+  'chatBg'
+])
+
+export const extendedBaseKeys = Object.fromEntries(
+  extendedBasePrefixes.map(prefix => [
+    prefix,
+    allKeys.filter(k => {
+      if (prefix === 'alert') {
+        return k.startsWith(prefix) && !k.startsWith('alertPopup')
+      }
+      return k.startsWith(prefix)
+    })
+  ])
+)
+
+// Keysets that are only really used intermideately, i.e. to generate other colors
+export const temporary = new Set([
+  '',
+  'highlight'
+])
+
+export const temporaryColors = {}
+
+export const convertTheme2To3 = (data) => {
+  data.colors.accent = data.colors.accent || data.colors.link
+  data.colors.link = data.colors.link || data.colors.accent
+  const generateRoot = () => {
+    const directives = {}
+    basePaletteKeys.forEach(key => { directives['--' + key] = 'color | ' + convert(data.colors[key]).hex })
+    return {
+      component: 'Root',
+      directives
+    }
+  }
+
+  const convertOpacity = () => {
+    const newRules = []
+    Object.keys(data.opacity || {}).forEach(key => {
+      if (!opacityKeys.has(key) || data.opacity[key] === undefined) return null
+      const originalOpacity = data.opacity[key]
+      const rule = { source: '2to3' }
+
+      switch (key) {
+        case 'alert':
+          rule.component = 'Alert'
+          break
+        case 'alertPopup':
+          rule.component = 'Alert'
+          rule.parent = { component: 'Popover' }
+          break
+        case 'bg':
+          rule.component = 'Panel'
+          break
+        case 'border':
+          rule.component = 'Border'
+          break
+        case 'btn':
+          rule.component = 'Button'
+          break
+        case 'faint':
+          rule.component = 'Text'
+          rule.state = ['faint']
+          break
+        case 'input':
+          rule.component = 'Input'
+          break
+        case 'panel':
+          rule.component = 'PanelHeader'
+          break
+        case 'popover':
+          rule.component = 'Popover'
+          break
+        case 'profileTint':
+          return null
+        case 'underlay':
+          rule.component = 'Underlay'
+          break
+      }
+
+      switch (key) {
+        case 'alert':
+        case 'alertPopup':
+        case 'bg':
+        case 'btn':
+        case 'input':
+        case 'panel':
+        case 'popover':
+        case 'underlay':
+          rule.directives = { opacity: originalOpacity }
+          break
+        case 'faint':
+        case 'border':
+          rule.directives = { textOpacity: originalOpacity }
+          break
+      }
+
+      newRules.push(rule)
+
+      if (rule.component === 'Button') {
+        newRules.push({ ...rule, component: 'ScrollbarElement' })
+        newRules.push({ ...rule, component: 'Tab' })
+        newRules.push({ ...rule, component: 'Tab', state: ['active'], directives: { opacity: 0 } })
+      }
+      if (rule.component === 'Panel') {
+        newRules.push({ ...rule, component: 'Post' })
+      }
+    })
+    return newRules
+  }
+
+  const convertRadii = () => {
+    const newRules = []
+    Object.keys(data.radii || {}).forEach(key => {
+      if (!radiiKeys.has(key) || data.radii[key] === undefined) return null
+      const originalRadius = data.radii[key]
+      const rule = { source: '2to3' }
+
+      switch (key) {
+        case 'btn':
+          rule.component = 'Button'
+          break
+        case 'tab':
+          rule.component = 'Tab'
+          break
+        case 'input':
+          rule.component = 'Input'
+          break
+        case 'checkbox':
+          rule.component = 'Input'
+          rule.variant = 'checkbox'
+          break
+        case 'panel':
+          rule.component = 'Panel'
+          break
+        case 'avatar':
+          rule.component = 'Avatar'
+          break
+        case 'avatarAlt':
+          rule.component = 'Avatar'
+          rule.variant = 'compact'
+          break
+        case 'tooltip':
+          rule.component = 'Popover'
+          break
+        case 'attachment':
+          rule.component = 'Attachment'
+          break
+        case 'ChatMessage':
+          rule.component = 'Button'
+          break
+      }
+      rule.directives = {
+        roundness: originalRadius
+      }
+      newRules.push(rule)
+      if (rule.component === 'Button') {
+        newRules.push({ ...rule, component: 'ScrollbarElement' })
+        newRules.push({ ...rule, component: 'Tab' })
+      }
+    })
+    return newRules
+  }
+
+  const convertFonts = () => {
+    const newRules = []
+    Object.keys(data.fonts || {}).forEach(key => {
+      if (!fontsKeys.has(key)) return
+      if (!data.fonts[key]) return
+      const originalFont = data.fonts[key].family
+      const rule = { source: '2to3' }
+
+      switch (key) {
+        case 'interface':
+        case 'postCode':
+          rule.component = 'Root'
+          break
+        case 'input':
+          rule.component = 'Input'
+          break
+        case 'post':
+          rule.component = 'RichContent'
+          break
+      }
+      switch (key) {
+        case 'interface':
+        case 'input':
+        case 'post':
+          rule.directives = { '--font': 'generic | ' + originalFont }
+          break
+        case 'postCode':
+          rule.directives = { '--monoFont': 'generic | ' + originalFont }
+          newRules.push({ ...rule, component: 'RichContent' })
+          break
+      }
+      newRules.push(rule)
+    })
+    return newRules
+  }
+  const convertShadows = () => {
+    const newRules = []
+    Object.keys(data.shadows || {}).forEach(key => {
+      if (!shadowsKeys.has(key)) return
+      const originalShadow = data.shadows[key]
+      const rule = { source: '2to3' }
+
+      switch (key) {
+        case 'panel':
+          rule.component = 'Panel'
+          break
+        case 'topBar':
+          rule.component = 'TopBar'
+          break
+        case 'popup':
+          rule.component = 'Popover'
+          break
+        case 'avatar':
+          rule.component = 'Avatar'
+          break
+        case 'avatarStatus':
+          rule.component = 'Avatar'
+          rule.parent = { component: 'Post' }
+          break
+        case 'panelHeader':
+          rule.component = 'PanelHeader'
+          break
+        case 'button':
+          rule.component = 'Button'
+          break
+        case 'buttonHover':
+          rule.component = 'Button'
+          rule.state = ['hover']
+          break
+        case 'buttonPressed':
+          rule.component = 'Button'
+          rule.state = ['pressed']
+          break
+        case 'input':
+          rule.component = 'Input'
+          break
+      }
+      rule.directives = {
+        shadow: originalShadow
+      }
+      newRules.push(rule)
+      if (key === 'topBar') {
+        newRules.push({ ...rule, component: 'PanelHeader', parent: { component: 'MobileDrawer' } })
+      }
+      if (key === 'avatarStatus') {
+        newRules.push({ ...rule, parent: { component: 'Notification' } })
+      }
+      if (key === 'buttonPressed') {
+        newRules.push({ ...rule, state: ['toggled'] })
+        newRules.push({ ...rule, state: ['toggled', 'focus'] })
+        newRules.push({ ...rule, state: ['pressed', 'focus'] })
+        newRules.push({ ...rule, state: ['toggled', 'focus', 'hover'] })
+        newRules.push({ ...rule, state: ['pressed', 'focus', 'hover'] })
+      }
+
+      if (rule.component === 'Button') {
+        newRules.push({ ...rule, component: 'ScrollbarElement' })
+        newRules.push({ ...rule, component: 'Tab' })
+      }
+    })
+    return newRules
+  }
+
+  const extendedRules = Object.entries(extendedBaseKeys).map(([prefix, keys]) => {
+    if (nonComponentPrefixes.has(prefix)) return null
+    const rule = { source: '2to3' }
+    if (prefix === 'alertPopup') {
+      rule.component = 'Alert'
+      rule.parent = { component: 'Popover' }
+    } else if (prefix === 'selectedPost') {
+      rule.component = 'Post'
+      rule.state = ['selected']
+    } else if (prefix === 'selectedMenu') {
+      rule.component = 'MenuItem'
+      rule.state = ['hover']
+    } else if (prefix === 'chatMessageIncoming') {
+      rule.component = 'ChatMessage'
+    } else if (prefix === 'chatMessageOutgoing') {
+      rule.component = 'ChatMessage'
+      rule.variant = 'outgoing'
+    } else if (prefix === 'panel') {
+      rule.component = 'PanelHeader'
+    } else if (prefix === 'topBar') {
+      rule.component = 'TopBar'
+    } else if (prefix === 'chatMessage') {
+      rule.component = 'ChatMessage'
+    } else if (prefix === 'poll') {
+      rule.component = 'PollGraph'
+    } else if (prefix === 'btn') {
+      rule.component = 'Button'
+    } else {
+      rule.component = prefix[0].toUpperCase() + prefix.slice(1).toLowerCase()
+    }
+    return keys.map((key) => {
+      if (!data.colors[key]) return null
+      const leftoverKey = key.replace(prefix, '')
+      const parts = (leftoverKey || 'Bg').match(/[A-Z][a-z]*/g)
+      const last = parts.slice(-1)[0]
+      let newRule = { source: '2to3', directives: {} }
+      let variantArray = []
+
+      switch (last) {
+        case 'Text':
+        case 'Faint': // typo
+        case 'Link':
+        case 'Icon':
+        case 'Greentext':
+        case 'Cyantext':
+        case 'Border':
+          newRule.parent = rule
+          newRule.directives.textColor = data.colors[key]
+          variantArray = parts.slice(0, -1)
+          break
+        default:
+          newRule = { ...rule, directives: {} }
+          newRule.directives.background = data.colors[key]
+          variantArray = parts
+          break
+      }
+
+      if (last === 'Text' || last === 'Link') {
+        const secondLast = parts.slice(-2)[0]
+        if (secondLast === 'Light') {
+          return null // unsupported
+        } else if (secondLast === 'Faint') {
+          newRule.state = ['faint']
+          variantArray = parts.slice(0, -2)
+        }
+      }
+
+      switch (last) {
+        case 'Text':
+        case 'Link':
+        case 'Icon':
+        case 'Border':
+          newRule.component = last
+          break
+        case 'Greentext':
+        case 'Cyantext':
+          newRule.component = 'FunText'
+          newRule.variant = last.toLowerCase()
+          break
+        case 'Faint':
+          newRule.component = 'Text'
+          newRule.state = ['faint']
+          break
+      }
+
+      variantArray = variantArray.filter(x => x !== 'Bg')
+
+      if (last === 'Link' && prefix === 'selectedPost') {
+        // selectedPost has typo - duplicate 'Post'
+        variantArray = variantArray.filter(x => x !== 'Post')
+      }
+
+      if (prefix === 'popover' && variantArray[0] === 'Post') {
+        newRule.component = 'Post'
+        newRule.parent = { source: '2to3hack', component: 'Popover' }
+        variantArray = variantArray.filter(x => x !== 'Post')
+      }
+
+      if (prefix === 'selectedMenu' && variantArray[0] === 'Popover') {
+        newRule.parent = { source: '2to3hack', component: 'Popover' }
+        variantArray = variantArray.filter(x => x !== 'Popover')
+      }
+
+      switch (prefix) {
+        case 'btn':
+        case 'input':
+        case 'alert': {
+          const hasPanel = variantArray.find(x => x === 'Panel')
+          if (hasPanel) {
+            newRule.parent = { source: '2to3hack', component: 'PanelHeader', parent: newRule.parent }
+            variantArray = variantArray.filter(x => x !== 'Panel')
+          }
+          const hasTop = variantArray.find(x => x === 'Top') // TopBar
+          if (hasTop) {
+            newRule.parent = { source: '2to3hack', component: 'TopBar', parent: newRule.parent }
+            variantArray = variantArray.filter(x => x !== 'Top' && x !== 'Bar')
+          }
+          break
+        }
+      }
+
+      if (variantArray.length > 0) {
+        if (prefix === 'btn') {
+          newRule.state = variantArray.map(x => x.toLowerCase())
+        } else {
+          newRule.variant = variantArray[0].toLowerCase()
+        }
+      }
+
+      if (newRule.component === 'Panel') {
+        return [newRule, { ...newRule, component: 'MobileDrawer' }]
+      } else if (newRule.component === 'Button') {
+        const rules = [
+          newRule,
+          { ...newRule, component: 'Tab' },
+          { ...newRule, component: 'ScrollbarElement' }
+        ]
+        if (newRule.state?.indexOf('toggled') >= 0) {
+          rules.push({ ...newRule, state: [...newRule.state, 'focused'] })
+          rules.push({ ...newRule, state: [...newRule.state, 'hover'] })
+          rules.push({ ...newRule, state: [...newRule.state, 'hover', 'focused'] })
+        }
+        if (newRule.state?.indexOf('hover') >= 0) {
+          rules.push({ ...newRule, state: [...newRule.state, 'focused'] })
+        }
+        return rules
+      } else if (newRule.component === 'Badge') {
+        if (newRule.variant === 'notification') {
+          return [newRule, { component: 'Root', directives: { '--badgeNotification': 'color | ' + newRule.directives.background } }]
+        } else if (newRule.variant === 'neutral') {
+          return [{ ...newRule, variant: 'normal' }]
+        } else {
+          return [newRule]
+        }
+      } else if (newRule.component === 'TopBar') {
+        return [newRule, { ...newRule, parent: { component: 'MobileDrawer' }, component: 'PanelHeader' }]
+      } else {
+        return [newRule]
+      }
+    })
+  })
+
+  const flatExtRules = extendedRules.filter(x => x).reduce((acc, x) => [...acc, ...x], []).filter(x => x).reduce((acc, x) => [...acc, ...x], [])
+
+  return [generateRoot(), ...convertShadows(), ...convertRadii(), ...convertOpacity(), ...convertFonts(), ...flatExtRules]
+}
diff --git a/src/services/theme_data/theme3_slot_functions.js b/src/services/theme_data/theme3_slot_functions.js
new file mode 100644
index 000000000..89bcd21e1
--- /dev/null
+++ b/src/services/theme_data/theme3_slot_functions.js
@@ -0,0 +1,169 @@
+import { convert, brightness } from 'chromatism'
+import { alphaBlend, getTextColor, relativeLuminance } from '../color_convert/color_convert.js'
+
+export const process = (text, functions, { findColor, findShadow }, { dynamicVars, staticVars }) => {
+  const { funcName, argsString } = /\$(?<funcName>\w+)\((?<argsString>[#a-zA-Z0-9-,.'"\s]*)\)/.exec(text).groups
+  const args = argsString.split(/ /g).map(a => a.trim())
+
+  const func = functions[funcName]
+  if (args.length < func.argsNeeded) {
+    throw new Error(`$${funcName} requires at least ${func.argsNeeded} arguments, but ${args.length} were provided`)
+  }
+  return func.exec(args, { findColor, findShadow }, { dynamicVars, staticVars })
+}
+
+export const colorFunctions = {
+  alpha: {
+    argsNeeded: 2,
+    documentation: 'Changes alpha value of the color only to be used for CSS variables',
+    args: [
+      'color: source color used',
+      'amount: alpha value'
+    ],
+    exec: (args, { findColor }, { dynamicVars, staticVars }) => {
+      const [color, amountArg] = args
+
+      const colorArg = convert(findColor(color, { dynamicVars, staticVars })).rgb
+      const amount = Number(amountArg)
+      return { ...colorArg, a: amount }
+    }
+  },
+  brightness: {
+    argsNeeded: 2,
+    document: 'Changes brightness/lightness of color in HSL colorspace',
+    args: [
+      'color: source color used',
+      'amount: lightness value'
+    ],
+    exec: (args, { findColor }, { dynamicVars, staticVars }) => {
+      const [color, amountArg] = args
+
+      const colorArg = convert(findColor(color, { dynamicVars, staticVars })).hsl
+      colorArg.l += Number(amountArg)
+      return { ...convert(colorArg).rgb }
+    }
+  },
+  textColor: {
+    argsNeeded: 2,
+    documentation: 'Get text color with adequate contrast for given background and intended text color. Same function is used internally',
+    args: [
+      'background: color of backdrop where text will be shown',
+      'foreground: intended text color',
+      `[preserve]: (optional) intended color preservation:
+'preserve' - try to preserve the color
+'no-preserve' - if can't get adequate color - fall back to black or white
+'no-auto' - don't do anything (useless as a color function)`
+    ],
+    exec: (args, { findColor }, { dynamicVars, staticVars }) => {
+      const [backgroundArg, foregroundArg, preserve = 'preserve'] = args
+
+      const background = convert(findColor(backgroundArg, { dynamicVars, staticVars })).rgb
+      const foreground = convert(findColor(foregroundArg, { dynamicVars, staticVars })).rgb
+
+      return getTextColor(background, foreground, preserve === 'preserve')
+    }
+  },
+  blend: {
+    argsNeeded: 3,
+    documentation: 'Alpha blending between two colors',
+    args: [
+      'background: bottom layer color',
+      'amount: opacity of top layer',
+      'foreground: upper layer color'
+    ],
+    exec: (args, { findColor }, { dynamicVars, staticVars }) => {
+      const [backgroundArg, amountArg, foregroundArg] = args
+
+      const background = convert(findColor(backgroundArg, { dynamicVars, staticVars })).rgb
+      const foreground = convert(findColor(foregroundArg, { dynamicVars, staticVars })).rgb
+      const amount = Number(amountArg)
+
+      return alphaBlend(background, amount, foreground)
+    }
+  },
+  boost: {
+    argsNeeded: 2,
+    documentation: 'If given color is dark makes it darker, if color is light - makes it lighter',
+    args: [
+      'color: source color',
+      'amount: how much darken/brighten the color'
+    ],
+    exec: (args, { findColor }, { dynamicVars, staticVars }) => {
+      const [colorArg, amountArg] = args
+
+      const color = convert(findColor(colorArg, { dynamicVars, staticVars })).rgb
+      const amount = Number(amountArg)
+
+      const isLight = relativeLuminance(color) < 0.5
+      const mod = isLight ? -1 : 1
+      return brightness(amount * mod, color).rgb
+    }
+  },
+  mod: {
+    argsNeeded: 2,
+    documentation: 'Old function that increases or decreases brightness depending if background color is dark or light. Advised against using it as it might give unexpected results.',
+    args: [
+      'color: source color',
+      'amount: how much darken/brighten the color'
+    ],
+    exec: (args, { findColor }, { dynamicVars, staticVars }) => {
+      const [colorArg, amountArg] = args
+
+      const color = convert(findColor(colorArg, { dynamicVars, staticVars })).rgb
+      const amount = Number(amountArg)
+
+      const effectiveBackground = dynamicVars.lowerLevelBackground
+      const isLightOnDark = relativeLuminance(convert(effectiveBackground).rgb) < 0.5
+      const mod = isLightOnDark ? 1 : -1
+      return brightness(amount * mod, color).rgb
+    }
+  }
+}
+
+export const shadowFunctions = {
+  borderSide: {
+    argsNeeded: 3,
+    documentation: 'Simulate a border on a side with a shadow, best works on inset border',
+    args: [
+      'color: border color',
+      'side: string indicating on which side border should be, takes either one word or two words joined by dash (i.e. "left" or "bottom-right")',
+      'width: border width (thickness)',
+      '[alpha]: (Optional) border opacity, defaults to 1 (fully opaque)',
+      '[inset]: (Optional) whether border should be on the inside or outside, defaults to inside'
+    ],
+    exec: (args, { findColor }) => {
+      const [color, side, alpha = '1', widthArg = '1', inset = 'inset'] = args
+
+      const width = Number(widthArg)
+      const isInset = inset === 'inset'
+
+      const targetShadow = {
+        x: 0,
+        y: 0,
+        blur: 0,
+        spread: 0,
+        color,
+        alpha: Number(alpha),
+        inset: isInset
+      }
+
+      side.split('-').forEach((position) => {
+        switch (position) {
+          case 'left':
+            targetShadow.x = width * (inset ? 1 : -1)
+            break
+          case 'right':
+            targetShadow.x = -1 * width * (inset ? 1 : -1)
+            break
+          case 'top':
+            targetShadow.y = width * (inset ? 1 : -1)
+            break
+          case 'bottom':
+            targetShadow.y = -1 * width * (inset ? 1 : -1)
+            break
+        }
+      })
+      return [targetShadow]
+    }
+  }
+}
diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js
index b376ef4de..ef7ec645e 100644
--- a/src/services/theme_data/theme_data.service.js
+++ b/src/services/theme_data/theme_data.service.js
@@ -1,5 +1,5 @@
 import { convert, brightness, contrastRatio } from 'chromatism'
-import { alphaBlendLayers, getTextColor, relativeLuminance } from '../color_convert/color_convert.js'
+import { rgb2hex, rgba2css, alphaBlendLayers, getTextColor, relativeLuminance, getCssColor } from '../color_convert/color_convert.js'
 import { LAYERS, DEFAULT_OPACITY, SLOT_INHERITANCE } from './pleromafe.js'
 
 /*
@@ -117,7 +117,6 @@ export const topoSort = (
       // Put it into the output list
       output.push(node)
     } else if (grays.has(node)) {
-      console.debug('Cyclic depenency in topoSort, ignoring')
       output.push(node)
     } else if (blacks.has(node)) {
       // do nothing
@@ -407,3 +406,347 @@ export const getColors = (sourceColors, sourceOpacity) => SLOT_ORDERED.reduce(({
     }
   }
 }, { colors: {}, opacity: {} })
+
+export const composePreset = (colors, radii, shadows, fonts) => {
+  return {
+    rules: {
+      ...shadows.rules,
+      ...colors.rules,
+      ...radii.rules,
+      ...fonts.rules
+    },
+    theme: {
+      ...shadows.theme,
+      ...colors.theme,
+      ...radii.theme,
+      ...fonts.theme
+    }
+  }
+}
+
+export const generatePreset = (input) => {
+  const colors = generateColors(input)
+  return composePreset(
+    colors,
+    generateRadii(input),
+    generateShadows(input, colors.theme.colors, colors.mod),
+    generateFonts(input)
+  )
+}
+
+export const getCssShadow = (input, usesDropShadow) => {
+  if (input.length === 0) {
+    return 'none'
+  }
+
+  return input
+    .filter(_ => usesDropShadow ? _.inset : _)
+    .map((shad) => [
+      shad.x,
+      shad.y,
+      shad.blur,
+      shad.spread
+    ].map(_ => _ + 'px').concat([
+      getCssColor(shad.color, shad.alpha),
+      shad.inset ? 'inset' : ''
+    ]).join(' ')).join(', ')
+}
+
+export const getCssShadowFilter = (input) => {
+  if (input.length === 0) {
+    return 'none'
+  }
+
+  return input
+  // drop-shadow doesn't support inset or spread
+    .filter((shad) => !shad.inset && Number(shad.spread) === 0)
+    .map((shad) => [
+      shad.x,
+      shad.y,
+      // drop-shadow's blur is twice as strong compared to box-shadow
+      shad.blur / 2
+    ].map(_ => _ + 'px').concat([
+      getCssColor(shad.color, shad.alpha)
+    ]).join(' '))
+    .map(_ => `drop-shadow(${_})`)
+    .join(' ')
+}
+
+export const generateColors = (themeData) => {
+  const sourceColors = !themeData.themeEngineVersion
+    ? colors2to3(themeData.colors || themeData)
+    : themeData.colors || themeData
+
+  const { colors, opacity } = getColors(sourceColors, themeData.opacity || {})
+
+  const htmlColors = Object.entries(colors)
+    .reduce((acc, [k, v]) => {
+      if (!v) return acc
+      acc.solid[k] = rgb2hex(v)
+      acc.complete[k] = typeof v.a === 'undefined' ? rgb2hex(v) : rgba2css(v)
+      return acc
+    }, { complete: {}, solid: {} })
+  return {
+    rules: {
+      colors: Object.entries(htmlColors.complete)
+        .filter(([k, v]) => v)
+        .map(([k, v]) => `--${k}: ${v}`)
+        .join(';')
+    },
+    theme: {
+      colors: htmlColors.solid,
+      opacity
+    }
+  }
+}
+
+export const generateRadii = (input) => {
+  let inputRadii = input.radii || {}
+  // v1 -> v2
+  if (typeof input.btnRadius !== 'undefined') {
+    inputRadii = Object
+      .entries(input)
+      .filter(([k, v]) => k.endsWith('Radius'))
+      .reduce((acc, e) => { acc[e[0].split('Radius')[0]] = e[1]; return acc }, {})
+  }
+  const radii = Object.entries(inputRadii).filter(([k, v]) => v).reduce((acc, [k, v]) => {
+    acc[k] = v
+    return acc
+  }, {
+    btn: 4,
+    input: 4,
+    checkbox: 2,
+    panel: 10,
+    avatar: 5,
+    avatarAlt: 50,
+    tooltip: 2,
+    attachment: 5,
+    chatMessage: inputRadii.panel
+  })
+
+  return {
+    rules: {
+      radii: Object.entries(radii).filter(([k, v]) => v).map(([k, v]) => `--${k}Radius: ${v}px`).join(';')
+    },
+    theme: {
+      radii
+    }
+  }
+}
+
+export const generateFonts = (input) => {
+  const fonts = Object.entries(input.fonts || {}).filter(([k, v]) => v).reduce((acc, [k, v]) => {
+    acc[k] = Object.entries(v).filter(([k, v]) => v).reduce((acc, [k, v]) => {
+      acc[k] = v
+      return acc
+    }, acc[k])
+    return acc
+  }, {
+    interface: {
+      family: 'sans-serif'
+    },
+    input: {
+      family: 'inherit'
+    },
+    post: {
+      family: 'inherit'
+    },
+    postCode: {
+      family: 'monospace'
+    }
+  })
+
+  return {
+    rules: {
+      fonts: Object
+        .entries(fonts)
+        .filter(([k, v]) => v)
+        .map(([k, v]) => `--${k}Font: ${v.family}`).join(';')
+    },
+    theme: {
+      fonts
+    }
+  }
+}
+
+const border = (top, shadow) => ({
+  x: 0,
+  y: top ? 1 : -1,
+  blur: 0,
+  spread: 0,
+  color: shadow ? '#000000' : '#FFFFFF',
+  alpha: 0.2,
+  inset: true
+})
+const buttonInsetFakeBorders = [border(true, false), border(false, true)]
+const inputInsetFakeBorders = [border(true, true), border(false, false)]
+const hoverGlow = {
+  x: 0,
+  y: 0,
+  blur: 4,
+  spread: 0,
+  color: '--faint',
+  alpha: 1
+}
+
+export const DEFAULT_SHADOWS = {
+  panel: [{
+    x: 1,
+    y: 1,
+    blur: 4,
+    spread: 0,
+    color: '#000000',
+    alpha: 0.6
+  }],
+  topBar: [{
+    x: 0,
+    y: 0,
+    blur: 4,
+    spread: 0,
+    color: '#000000',
+    alpha: 0.6
+  }],
+  popup: [{
+    x: 2,
+    y: 2,
+    blur: 3,
+    spread: 0,
+    color: '#000000',
+    alpha: 0.5
+  }],
+  avatar: [{
+    x: 0,
+    y: 1,
+    blur: 8,
+    spread: 0,
+    color: '#000000',
+    alpha: 0.7
+  }],
+  avatarStatus: [],
+  panelHeader: [],
+  button: [{
+    x: 0,
+    y: 0,
+    blur: 2,
+    spread: 0,
+    color: '#000000',
+    alpha: 1
+  }, ...buttonInsetFakeBorders],
+  buttonHover: [hoverGlow, ...buttonInsetFakeBorders],
+  buttonPressed: [hoverGlow, ...inputInsetFakeBorders],
+  input: [...inputInsetFakeBorders, {
+    x: 0,
+    y: 0,
+    blur: 2,
+    inset: true,
+    spread: 0,
+    color: '#000000',
+    alpha: 1
+  }]
+}
+export const generateShadows = (input, colors) => {
+  // TODO this is a small hack for `mod` to work with shadows
+  // this is used to get the "context" of shadow, i.e. for `mod` properly depend on background color of element
+  const hackContextDict = {
+    button: 'btn',
+    panel: 'bg',
+    top: 'topBar',
+    popup: 'popover',
+    avatar: 'bg',
+    panelHeader: 'panel',
+    input: 'input'
+  }
+
+  const cleanInputShadows = Object.fromEntries(
+    Object.entries(input.shadows || {})
+      .map(([name, shadowSlot]) => [
+        name,
+        // defaulting color to black to avoid potential problems
+        shadowSlot.map(shadowDef => ({ color: '#000000', ...shadowDef }))
+      ])
+  )
+  const inputShadows = cleanInputShadows && !input.themeEngineVersion
+    ? shadows2to3(cleanInputShadows, input.opacity)
+    : cleanInputShadows || {}
+  const shadows = Object.entries({
+    ...DEFAULT_SHADOWS,
+    ...inputShadows
+  }).reduce((shadowsAcc, [slotName, shadowDefs]) => {
+    const slotFirstWord = slotName.replace(/[A-Z].*$/, '')
+    const colorSlotName = hackContextDict[slotFirstWord]
+    const isLightOnDark = relativeLuminance(convert(colors[colorSlotName]).rgb) < 0.5
+    const mod = isLightOnDark ? 1 : -1
+    const newShadow = shadowDefs.reduce((shadowAcc, def) => [
+      ...shadowAcc,
+      {
+        ...def,
+        color: rgb2hex(computeDynamicColor(
+          def.color,
+          (variableSlot) => convert(colors[variableSlot]).rgb,
+          mod
+        ))
+      }
+    ], [])
+    return { ...shadowsAcc, [slotName]: newShadow }
+  }, {})
+
+  return {
+    rules: {
+      shadows: Object
+        .entries(shadows)
+      // TODO for v2.2: if shadow doesn't have non-inset shadows with spread > 0 - optionally
+      // convert all non-inset shadows into filter: drop-shadow() to boost performance
+        .map(([k, v]) => [
+          `--${k}Shadow: ${getCssShadow(v)}`,
+          `--${k}ShadowFilter: ${getCssShadowFilter(v)}`,
+          `--${k}ShadowInset: ${getCssShadow(v, true)}`
+        ].join(';'))
+        .join(';')
+    },
+    theme: {
+      shadows
+    }
+  }
+}
+
+/**
+ * This handles compatibility issues when importing v2 theme's shadows to current format
+ *
+ * Back in v2 shadows allowed you to use dynamic colors however those used pure CSS3 variables
+ */
+export const shadows2to3 = (shadows, opacity) => {
+  return Object.entries(shadows).reduce((shadowsAcc, [slotName, shadowDefs]) => {
+    const isDynamic = ({ color = '#000000' }) => color.startsWith('--')
+    const getOpacity = ({ color }) => opacity[getOpacitySlot(color.substring(2).split(',')[0])]
+    const newShadow = shadowDefs.reduce((shadowAcc, def) => [
+      ...shadowAcc,
+      {
+        ...def,
+        alpha: isDynamic(def) ? getOpacity(def) || 1 : def.alpha
+      }
+    ], [])
+    return { ...shadowsAcc, [slotName]: newShadow }
+  }, {})
+}
+
+export const colors2to3 = (colors) => {
+  return Object.entries(colors).reduce((acc, [slotName, color]) => {
+    const btnPositions = ['', 'Panel', 'TopBar']
+    switch (slotName) {
+      case 'lightBg':
+        return { ...acc, highlight: color }
+      case 'btnText':
+        return {
+          ...acc,
+          ...btnPositions
+            .reduce(
+              (statePositionAcc, position) =>
+                ({ ...statePositionAcc, ['btn' + position + 'Text']: color })
+              , {}
+            )
+        }
+      default:
+        return { ...acc, [slotName]: color }
+    }
+  }, {})
+}
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
new file mode 100644
index 000000000..423848f0f
--- /dev/null
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -0,0 +1,575 @@
+import { convert, brightness } from 'chromatism'
+import sum from 'hash-sum'
+import { flattenDeep, sortBy } from 'lodash'
+import {
+  alphaBlend,
+  getTextColor,
+  rgba2css,
+  mixrgb,
+  relativeLuminance
+} from '../color_convert/color_convert.js'
+
+import {
+  colorFunctions,
+  shadowFunctions,
+  process
+} from './theme3_slot_functions.js'
+
+import {
+  unroll,
+  getAllPossibleCombinations,
+  genericRuleToSelector,
+  normalizeCombination,
+  findRules
+} from './iss_utils.js'
+import { deserializeShadow } from './iss_deserializer.js'
+
+// Ensuring the order of components
+const components = {
+  Root: null,
+  Text: null,
+  FunText: null,
+  Link: null,
+  Icon: null,
+  Border: null,
+  Panel: null,
+  Chat: null,
+  ChatMessage: null
+}
+
+export const findShadow = (shadows, { dynamicVars, staticVars }) => {
+  return (shadows || []).map(shadow => {
+    let targetShadow
+    if (typeof shadow === 'string') {
+      if (shadow.startsWith('$')) {
+        targetShadow = process(shadow, shadowFunctions, { findColor, findShadow }, { dynamicVars, staticVars })
+      } else if (shadow.startsWith('--')) {
+        // modifiers are completely unsupported here
+        const variableSlot = shadow.substring(2)
+        return findShadow(staticVars[variableSlot], { dynamicVars, staticVars })
+      } else {
+        targetShadow = deserializeShadow(shadow)
+      }
+    } else {
+      targetShadow = shadow
+    }
+
+    const shadowArray = Array.isArray(targetShadow) ? targetShadow : [targetShadow]
+    return shadowArray.map(s => ({
+      ...s,
+      color: findColor(s.color, { dynamicVars, staticVars })
+    }))
+  })
+}
+
+export const findColor = (color, { dynamicVars, staticVars }) => {
+  try {
+    if (typeof color !== 'string' || (!color.startsWith('--') && !color.startsWith('$'))) return color
+    let targetColor = null
+    if (color.startsWith('--')) {
+      // Modifier support is pretty much for v2 themes only
+      const [variable, modifier] = color.split(/,/g).map(str => str.trim())
+      const variableSlot = variable.substring(2)
+      if (variableSlot === 'stack') {
+        const { r, g, b } = dynamicVars.stacked
+        targetColor = { r, g, b }
+      } else if (variableSlot.startsWith('parent')) {
+        if (variableSlot === 'parent') {
+          const { r, g, b } = dynamicVars.lowerLevelBackground
+          targetColor = { r, g, b }
+        } else {
+          const virtualSlot = variableSlot.replace(/^parent/, '')
+          targetColor = convert(dynamicVars.lowerLevelVirtualDirectivesRaw[virtualSlot]).rgb
+        }
+      } else {
+        switch (variableSlot) {
+          case 'inheritedBackground':
+            targetColor = convert(dynamicVars.inheritedBackground).rgb
+            break
+          case 'background':
+            targetColor = convert(dynamicVars.background).rgb
+            break
+          default:
+            targetColor = convert(staticVars[variableSlot]).rgb
+        }
+      }
+
+      if (modifier) {
+        const effectiveBackground = dynamicVars.lowerLevelBackground ?? targetColor
+        const isLightOnDark = relativeLuminance(convert(effectiveBackground).rgb) < 0.5
+        const mod = isLightOnDark ? 1 : -1
+        targetColor = brightness(Number.parseFloat(modifier) * mod, targetColor).rgb
+      }
+    }
+
+    if (color.startsWith('$')) {
+      try {
+        targetColor = process(color, colorFunctions, { findColor }, { dynamicVars, staticVars })
+      } catch (e) {
+        console.error('Failure executing color function', e)
+        targetColor = '#FF00FF'
+      }
+    }
+    // Color references other color
+    return targetColor
+  } catch (e) {
+    throw new Error(`Couldn't find color "${color}", variables are:
+Static:
+${JSON.stringify(staticVars, null, 2)}
+Dynamic:
+${JSON.stringify(dynamicVars, null, 2)}`)
+  }
+}
+
+const getTextColorAlpha = (directives, intendedTextColor, dynamicVars, staticVars) => {
+  const opacity = directives.textOpacity
+  const backgroundColor = convert(dynamicVars.lowerLevelBackground).rgb
+  const textColor = convert(findColor(intendedTextColor, { dynamicVars, staticVars })).rgb
+  if (opacity === null || opacity === undefined || opacity >= 1) {
+    return convert(textColor).hex
+  }
+  if (opacity === 0) {
+    return convert(backgroundColor).hex
+  }
+  const opacityMode = directives.textOpacityMode
+  switch (opacityMode) {
+    case 'fake':
+      return convert(alphaBlend(textColor, opacity, backgroundColor)).hex
+    case 'mixrgb':
+      return convert(mixrgb(backgroundColor, textColor)).hex
+    default:
+      return rgba2css({ a: opacity, ...textColor })
+  }
+}
+
+// Loading all style.js[on] files dynamically
+const componentsContext = require.context('src', true, /\.style.js(on)?$/)
+componentsContext.keys().forEach(key => {
+  const component = componentsContext(key).default
+  if (components[component.name] != null) {
+    console.warn(`Component in file ${key} is trying to override existing component ${component.name}! You have collisions/duplicates!`)
+  }
+  components[component.name] = component
+})
+
+const engineChecksum = sum(components)
+
+const ruleToSelector = genericRuleToSelector(components)
+
+export const getEngineChecksum = () => engineChecksum
+
+/**
+ * Initializes and compiles the theme according to the ruleset
+ *
+ * @param {Object[]} inputRuleset - set of rules to compile theme against. Acts as an override to
+ *   component default rulesets
+ * @param {string} ultimateBackgroundColor - Color that will be the "final" background for
+ *   calculating contrast ratios and making text automatically accessible. Really used for cases when
+ *   stuff is transparent.
+ * @param {boolean} debug - print out debug information in console, mostly just performance stuff
+ * @param {boolean} liteMode - use validInnerComponentsLite instead of validInnerComponents, meant to
+ *   generatate theme previews and such that need to be compiled faster and don't require a lot of other
+ *   components present in "normal" mode
+ * @param {boolean} onlyNormalState - only use components 'normal' states, meant for generating theme
+ *   previews since states are the biggest factor for compilation time and are completely unnecessary
+ *   when previewing multiple themes at same time
+ */
+export const init = ({
+  inputRuleset,
+  ultimateBackgroundColor,
+  debug = false,
+  liteMode = false,
+  editMode = false,
+  onlyNormalState = false,
+  initialStaticVars = {}
+}) => {
+  const rootComponentName = 'Root'
+  if (!inputRuleset) throw new Error('Ruleset is null or undefined!')
+  const staticVars = { ...initialStaticVars }
+  const stacked = {}
+  const computed = {}
+
+  const rulesetUnsorted = [
+    ...Object.values(components)
+      .map(c => (c.defaultRules || []).map(r => ({ source: 'Built-in', component: c.name, ...r })))
+      .reduce((acc, arr) => [...acc, ...arr], []),
+    ...inputRuleset
+  ].map(rule => {
+    normalizeCombination(rule)
+    let currentParent = rule.parent
+    while (currentParent) {
+      normalizeCombination(currentParent)
+      currentParent = currentParent.parent
+    }
+
+    return rule
+  })
+
+  const ruleset = rulesetUnsorted
+    .map((data, index) => ({ data, index }))
+    .toSorted(({ data: a, index: ai }, { data: b, index: bi }) => {
+      const parentsA = unroll(a).length
+      const parentsB = unroll(b).length
+
+      let aScore = 0
+      let bScore = 0
+
+      aScore += parentsA * 1000
+      bScore += parentsB * 1000
+
+      aScore += a.variant !== 'normal' ? 100 : 0
+      bScore += b.variant !== 'normal' ? 100 : 0
+
+      aScore += a.state.filter(x => x !== 'normal').length * 1000
+      bScore += b.state.filter(x => x !== 'normal').length * 1000
+
+      aScore += a.component === 'Text' ? 1 : 0
+      bScore += b.component === 'Text' ? 1 : 0
+
+      // Debug
+      a._specificityScore = aScore
+      b._specificityScore = bScore
+
+      if (aScore === bScore) {
+        return ai - bi
+      }
+      return aScore - bScore
+    })
+    .map(({ data }) => data)
+
+  if (!ultimateBackgroundColor) {
+    console.warn('No ultimate background color provided, falling back to panel color')
+    const rootRule = ruleset.findLast((x) => (x.component === 'Root' && x.directives?.['--bg']))
+    ultimateBackgroundColor = rootRule.directives['--bg'].split('|')[1].trim()
+  }
+
+  const virtualComponents = new Set(Object.values(components).filter(c => c.virtual).map(c => c.name))
+  const nonEditableComponents = new Set(Object.values(components).filter(c => c.notEditable).map(c => c.name))
+
+  const processCombination = (combination) => {
+    try {
+      const selector = ruleToSelector(combination, true)
+      const cssSelector = ruleToSelector(combination)
+
+      const parentSelector = selector.split(/ /g).slice(0, -1).join(' ')
+      const soloSelector = selector.split(/ /g).slice(-1)[0]
+
+      const lowerLevelSelector = parentSelector
+      let lowerLevelBackground = computed[lowerLevelSelector]?.background
+      if (editMode && !lowerLevelBackground) {
+        // FIXME hack for editor until it supports handling component backgrounds
+        lowerLevelBackground = '#00FFFF'
+      }
+      const lowerLevelVirtualDirectives = computed[lowerLevelSelector]?.virtualDirectives
+      const lowerLevelVirtualDirectivesRaw = computed[lowerLevelSelector]?.virtualDirectivesRaw
+
+      const dynamicVars = computed[selector] || {
+        lowerLevelSelector,
+        lowerLevelBackground,
+        lowerLevelVirtualDirectives,
+        lowerLevelVirtualDirectivesRaw
+      }
+
+      // Inheriting all of the applicable rules
+      const existingRules = ruleset.filter(findRules(combination))
+      const computedDirectives =
+            existingRules
+              .map(r => r.directives)
+              .reduce((acc, directives) => ({ ...acc, ...directives }), {})
+      const computedRule = {
+        ...combination,
+        directives: computedDirectives
+      }
+
+      computed[selector] = computed[selector] || {}
+      computed[selector].computedRule = computedRule
+      computed[selector].dynamicVars = dynamicVars
+
+      // avoid putting more stuff into actual CSS
+      computed[selector].virtualDirectives = {}
+      // but still be able to access it i.e. from --parent
+      computed[selector].virtualDirectivesRaw = computed[lowerLevelSelector]?.virtualDirectivesRaw || {}
+
+      if (virtualComponents.has(combination.component)) {
+        const virtualName = [
+          '--',
+          combination.component.toLowerCase(),
+          combination.variant === 'normal'
+            ? ''
+            : combination.variant[0].toUpperCase() + combination.variant.slice(1).toLowerCase(),
+          ...sortBy(combination.state.filter(x => x !== 'normal')).map(state => state[0].toUpperCase() + state.slice(1).toLowerCase())
+        ].join('')
+
+        let inheritedTextColor = computedDirectives.textColor
+        let inheritedTextAuto = computedDirectives.textAuto
+        let inheritedTextOpacity = computedDirectives.textOpacity
+        let inheritedTextOpacityMode = computedDirectives.textOpacityMode
+        const lowerLevelTextSelector = [...selector.split(/ /g).slice(0, -1), soloSelector].join(' ')
+        const lowerLevelTextRule = computed[lowerLevelTextSelector]
+
+        if (inheritedTextColor == null || inheritedTextOpacity == null || inheritedTextOpacityMode == null) {
+          inheritedTextColor = computedDirectives.textColor ?? lowerLevelTextRule.textColor
+          inheritedTextAuto = computedDirectives.textAuto ?? lowerLevelTextRule.textAuto
+          inheritedTextOpacity = computedDirectives.textOpacity ?? lowerLevelTextRule.textOpacity
+          inheritedTextOpacityMode = computedDirectives.textOpacityMode ?? lowerLevelTextRule.textOpacityMode
+        }
+
+        const newTextRule = {
+          ...computedRule,
+          directives: {
+            ...computedRule.directives,
+            textColor: inheritedTextColor,
+            textAuto: inheritedTextAuto ?? 'preserve',
+            textOpacity: inheritedTextOpacity,
+            textOpacityMode: inheritedTextOpacityMode
+          }
+        }
+
+        dynamicVars.inheritedBackground = lowerLevelBackground
+        dynamicVars.stacked = convert(stacked[lowerLevelSelector]).rgb
+
+        const intendedTextColor = convert(findColor(inheritedTextColor, { dynamicVars, staticVars })).rgb
+        const textColor = newTextRule.directives.textAuto === 'no-auto'
+          ? intendedTextColor
+          : getTextColor(
+            convert(stacked[lowerLevelSelector]).rgb,
+            intendedTextColor,
+            newTextRule.directives.textAuto === 'preserve'
+          )
+        const virtualDirectives = { ...(computed[lowerLevelSelector].virtualDirectives || {}) }
+        const virtualDirectivesRaw = { ...(computed[lowerLevelSelector].virtualDirectivesRaw || {}) }
+
+        // Storing color data in lower layer to use as custom css properties
+        virtualDirectives[virtualName] = getTextColorAlpha(newTextRule.directives, textColor, dynamicVars)
+        virtualDirectivesRaw[virtualName] = textColor
+
+        computed[lowerLevelSelector].virtualDirectives = virtualDirectives
+        computed[lowerLevelSelector].virtualDirectivesRaw = virtualDirectivesRaw
+
+        return {
+          dynamicVars,
+          selector: cssSelector.split(/ /g).slice(0, -1).join(' '),
+          ...combination,
+          directives: {},
+          virtualDirectives,
+          virtualDirectivesRaw
+        }
+      } else {
+        computed[selector] = computed[selector] || {}
+
+        // TODO: DEFAULT TEXT COLOR
+        const lowerLevelStackedBackground = stacked[lowerLevelSelector] || convert(ultimateBackgroundColor).rgb
+
+        if (computedDirectives.background) {
+          let inheritRule = null
+          const variantRules = ruleset.filter(
+            findRules({
+              component: combination.component,
+              variant: combination.variant,
+              parent: combination.parent
+            })
+          )
+          const lastVariantRule = variantRules[variantRules.length - 1]
+          if (lastVariantRule) {
+            inheritRule = lastVariantRule
+          } else {
+            const normalRules = ruleset.filter(findRules({
+              component: combination.component,
+              parent: combination.parent
+            }))
+            const lastNormalRule = normalRules[normalRules.length - 1]
+            inheritRule = lastNormalRule
+          }
+
+          const inheritSelector = ruleToSelector({ ...inheritRule, parent: combination.parent }, true)
+          const inheritedBackground = computed[inheritSelector].background
+
+          dynamicVars.inheritedBackground = inheritedBackground
+
+          const rgb = convert(findColor(computedDirectives.background, { dynamicVars, staticVars })).rgb
+
+          if (!stacked[selector]) {
+            let blend
+            const alpha = computedDirectives.opacity ?? 1
+            if (alpha >= 1) {
+              blend = rgb
+            } else if (alpha <= 0) {
+              blend = lowerLevelStackedBackground
+            } else {
+              blend = alphaBlend(rgb, computedDirectives.opacity, lowerLevelStackedBackground)
+            }
+            stacked[selector] = blend
+            computed[selector].background = { ...rgb, a: computedDirectives.opacity ?? 1 }
+          }
+        }
+
+        if (computedDirectives.shadow) {
+          dynamicVars.shadow = flattenDeep(findShadow(flattenDeep(computedDirectives.shadow), { dynamicVars, staticVars }))
+        }
+
+        if (!stacked[selector]) {
+          computedDirectives.background = 'transparent'
+          computedDirectives.opacity = 0
+          stacked[selector] = lowerLevelStackedBackground
+          computed[selector].background = { ...lowerLevelStackedBackground, a: 0 }
+        }
+
+        dynamicVars.stacked = stacked[selector]
+        dynamicVars.background = computed[selector].background
+
+        const dynamicSlots = Object.entries(computedDirectives).filter(([k, v]) => k.startsWith('--'))
+
+        dynamicSlots.forEach(([k, v]) => {
+          const [type, value] = v.split('|').map(x => x.trim()) // woah, Extreme!
+          switch (type) {
+            case 'color': {
+              const color = findColor(value, { dynamicVars, staticVars })
+              dynamicVars[k] = color
+              if (combination.component === rootComponentName) {
+                staticVars[k.substring(2)] = color
+              }
+              break
+            }
+            case 'shadow': {
+              const shadow = value.split(/,/g).map(s => s.trim()).filter(x => x)
+              dynamicVars[k] = shadow
+              if (combination.component === rootComponentName) {
+                staticVars[k.substring(2)] = shadow
+              }
+              break
+            }
+            case 'generic': {
+              dynamicVars[k] = value
+              if (combination.component === rootComponentName) {
+                staticVars[k.substring(2)] = value
+              }
+              break
+            }
+          }
+        })
+
+        const rule = {
+          dynamicVars,
+          selector: cssSelector,
+          ...combination,
+          directives: computedDirectives
+        }
+
+        return rule
+      }
+    } catch (e) {
+      const { component, variant, state } = combination
+      throw new Error(`Error processing combination ${component}.${variant}:${state.join(':')}: ${e}`)
+    }
+  }
+
+  const processInnerComponent = (component, parent) => {
+    const combinations = []
+    const {
+      states: originalStates = {},
+      variants: originalVariants = {}
+    } = component
+
+    let validInnerComponents
+    if (editMode) {
+      const temp = (component.validInnerComponentsLite || component.validInnerComponents || [])
+      validInnerComponents = temp.filter(c => virtualComponents.has(c) && !nonEditableComponents.has(c))
+    } else if (liteMode) {
+      validInnerComponents = (component.validInnerComponentsLite || component.validInnerComponents || [])
+    } else {
+      validInnerComponents = component.validInnerComponents || []
+    }
+
+    // Normalizing states and variants to always include "normal"
+    const states = { normal: '', ...originalStates }
+    const variants = { normal: '', ...originalVariants }
+    const innerComponents = (validInnerComponents).map(name => {
+      const result = components[name]
+      if (result === undefined) console.error(`Component ${component.name} references a component ${name} which does not exist!`)
+      return result
+    })
+
+    // Optimization: we only really need combinations without "normal" because all states implicitly have it
+    const permutationStateKeys = Object.keys(states).filter(s => s !== 'normal')
+    const stateCombinations = onlyNormalState
+      ? [
+          ['normal']
+        ]
+      : [
+          ['normal'],
+          ...getAllPossibleCombinations(permutationStateKeys)
+            .map(combination => ['normal', ...combination])
+            .filter(combo => {
+              // Optimization: filter out some hard-coded combinations that don't make sense
+              if (combo.indexOf('disabled') >= 0) {
+                return !(
+                  combo.indexOf('hover') >= 0 ||
+                    combo.indexOf('focused') >= 0 ||
+                    combo.indexOf('pressed') >= 0
+                )
+              }
+              return true
+            })
+        ]
+
+    const stateVariantCombination = Object.keys(variants).map(variant => {
+      return stateCombinations.map(state => ({ variant, state }))
+    }).reduce((acc, x) => [...acc, ...x], [])
+
+    stateVariantCombination.forEach(combination => {
+      combination.component = component.name
+      combination.lazy = component.lazy || parent?.lazy
+      combination.parent = parent
+      if (!liteMode && combination.state.indexOf('hover') >= 0) {
+        combination.lazy = true
+      }
+
+      combinations.push(combination)
+
+      innerComponents.forEach(innerComponent => {
+        combinations.push(...processInnerComponent(innerComponent, combination))
+      })
+    })
+
+    return combinations
+  }
+
+  const t0 = performance.now()
+  const combinations = processInnerComponent(components[rootComponentName] ?? components.Root)
+  const t1 = performance.now()
+  if (debug) {
+    console.debug('Tree traveral took ' + (t1 - t0) + ' ms')
+  }
+
+  const result = combinations.map((combination) => {
+    if (combination.lazy) {
+      return async () => processCombination(combination)
+    } else {
+      return processCombination(combination)
+    }
+  }).filter(x => x)
+  const t2 = performance.now()
+  if (debug) {
+    console.debug('Eager processing took ' + (t2 - t1) + ' ms')
+  }
+
+  // optimization to traverse big-ass array only once instead of twice
+  const eager = []
+  const lazy = []
+
+  result.forEach(x => {
+    if (typeof x === 'function') {
+      lazy.push(x)
+    } else {
+      eager.push(x)
+    }
+  })
+
+  return {
+    lazy,
+    eager,
+    staticVars,
+    engineChecksum,
+    themeChecksum: sum([lazy, eager])
+  }
+}
diff --git a/src/services/timeline_fetcher/timeline_fetcher.service.js b/src/services/timeline_fetcher/timeline_fetcher.service.js
index c79590dff..2bbcf1003 100644
--- a/src/services/timeline_fetcher/timeline_fetcher.service.js
+++ b/src/services/timeline_fetcher/timeline_fetcher.service.js
@@ -25,6 +25,8 @@ const fetchAndUpdate = ({
   showImmediately = false,
   userId = false,
   listId = false,
+  statusId = false,
+  bookmarkFolderId = false,
   tag = false,
   until,
   since
@@ -48,6 +50,8 @@ const fetchAndUpdate = ({
 
   args.userId = userId
   args.listId = listId
+  args.statusId = statusId
+  args.bookmarkFolderId = bookmarkFolderId
   args.tag = tag
   args.withMuted = !hideMutedPosts
   if (loggedIn && ['friends', 'public', 'publicAndExternal'].includes(timeline)) {
@@ -79,15 +83,16 @@ const fetchAndUpdate = ({
     })
 }
 
-const startFetching = ({ timeline = 'friends', credentials, store, userId = false, listId = false, tag = false }) => {
+const startFetching = ({ timeline = 'friends', credentials, store, userId = false, listId = false, statusId = false, bookmarkFolderId = false, tag = false }) => {
   const rootState = store.rootState || store.state
   const timelineData = rootState.statuses.timelines[camelCase(timeline)]
   const showImmediately = timelineData.visibleStatuses.length === 0
   timelineData.userId = userId
   timelineData.listId = listId
-  fetchAndUpdate({ timeline, credentials, store, showImmediately, userId, listId, tag })
+  timelineData.bookmarkFolderId = bookmarkFolderId
+  fetchAndUpdate({ timeline, credentials, store, showImmediately, userId, listId, statusId, bookmarkFolderId, tag })
   const boundFetchAndUpdate = () =>
-    fetchAndUpdate({ timeline, credentials, store, userId, listId, tag })
+    fetchAndUpdate({ timeline, credentials, store, userId, listId, statusId, bookmarkFolderId, tag })
   return promiseInterval(boundFetchAndUpdate, 10000)
 }
 const timelineFetcher = {
diff --git a/src/services/version/version.service.js b/src/services/version/version.service.js
deleted file mode 100644
index 2e11bf3a1..000000000
--- a/src/services/version/version.service.js
+++ /dev/null
@@ -1,6 +0,0 @@
-
-export const extractCommit = versionString => {
-  const regex = /-g(\w+)/i
-  const matches = versionString.match(regex)
-  return matches ? matches[1] : ''
-}
diff --git a/src/services/window_utils/window_utils.js b/src/services/window_utils/window_utils.js
index 909088dbc..c33785363 100644
--- a/src/services/window_utils/window_utils.js
+++ b/src/services/window_utils/window_utils.js
@@ -1,4 +1,3 @@
-
 export const windowWidth = () =>
   window.innerWidth ||
   document.documentElement.clientWidth ||
diff --git a/src/sw.js b/src/sw.js
index 70fed44bc..4a36672c1 100644
--- a/src/sw.js
+++ b/src/sw.js
@@ -1,6 +1,6 @@
 /* eslint-env serviceworker */
 
-import localForage from 'localforage'
+import { storage } from 'src/lib/storage.js'
 import { parseNotification } from './services/entity_normalizer/entity_normalizer.service.js'
 import { prepareNotificationObject } from './services/notification_utils/notification_utils.js'
 import { createI18n } from 'vue-i18n'
@@ -13,9 +13,10 @@ const i18n = createI18n({
   messages
 })
 
-function isEnabled () {
-  return localForage.getItem('vuex-lz')
-    .then(data => data.config.webPushNotifications)
+const state = {
+  lastFocused: null,
+  notificationIds: new Set(),
+  allowedNotificationTypes: null
 }
 
 function getWindowClients () {
@@ -23,17 +24,48 @@ function getWindowClients () {
     .then((clientList) => clientList.filter(({ type }) => type === 'window'))
 }
 
-const setLocale = async () => {
-  const state = await localForage.getItem('vuex-lz')
-  const locale = state.config.interfaceLanguage || 'en'
+const setSettings = async () => {
+  const vuexState = await storage.getItem('vuex-lz')
+  const locale = vuexState.config.interfaceLanguage || 'en'
   i18n.locale = locale
+  const notificationsNativeArray = Object.entries(vuexState.config.notificationNative)
+  state.webPushAlwaysShowNotifications = vuexState.config.webPushAlwaysShowNotifications
+
+  state.allowedNotificationTypes = new Set(
+    notificationsNativeArray
+      .filter(([k, v]) => v)
+      .map(([k]) => {
+        switch (k) {
+          case 'mentions':
+            return 'mention'
+          case 'statuses':
+            return 'status'
+          case 'likes':
+            return 'like'
+          case 'repeats':
+            return 'repeat'
+          case 'emojiReactions':
+            return 'pleroma:emoji_reaction'
+          case 'reports':
+            return 'pleroma:report'
+          case 'followRequest':
+            return 'follow_request'
+          case 'follows':
+            return 'follow'
+          case 'polls':
+            return 'poll'
+          default:
+            return k
+        }
+      })
+  )
 }
 
-const maybeShowNotification = async (event) => {
-  const enabled = await isEnabled()
+const showPushNotification = async (event) => {
   const activeClients = await getWindowClients()
-  await setLocale()
-  if (enabled && (activeClients.length === 0)) {
+  await setSettings()
+  // Only show push notifications if all tabs/windows are closed
+  if (state.webPushAlwaysShowNotifications || activeClients.length === 0) {
     const data = event.data.json()
 
     const url = `${self.registration.scope}api/v1/notifications/${data.notification_id}`
@@ -43,13 +75,48 @@ const maybeShowNotification = async (event) => {
 
     const res = prepareNotificationObject(parsedNotification, i18n)
 
-    self.registration.showNotification(res.title, res)
+    if (state.webPushAlwaysShowNotifications || state.allowedNotificationTypes.has(parsedNotification.type)) {
+      return self.registration.showNotification(res.title, res)
+    }
   }
+  return Promise.resolve()
 }
 
 self.addEventListener('push', async (event) => {
   if (event.data) {
-    event.waitUntil(maybeShowNotification(event))
+    // Supposedly, we HAVE to return a promise inside waitUntil otherwise it will
+    // show (extra) notification that website is updated in background
+    event.waitUntil(showPushNotification(event))
+  }
+})
+
+self.addEventListener('message', async (event) => {
+  await setSettings()
+  const { type, content } = event.data
+
+  if (type === 'desktopNotification') {
+    const { title, ...rest } = content
+    const { tag, type } = rest
+    if (state.notificationIds.has(tag)) return
+    state.notificationIds.add(tag)
+    setTimeout(() => state.notificationIds.delete(tag), 10000)
+    if (state.allowedNotificationTypes.has(type)) {
+      self.registration.showNotification(title, rest)
+    }
+  }
+
+  if (type === 'desktopNotificationClose') {
+    const { id, all } = content
+    const search = all ? null : { tag: id }
+    const notifications = await self.registration.getNotifications(search)
+    notifications.forEach(n => n.close())
+  }
+
+  if (type === 'updateFocus') {
+    state.lastFocused = event.source.id
+
+    const notifications = await self.registration.getNotifications()
+    notifications.forEach(n => n.close())
   }
 })
 
@@ -59,7 +126,14 @@ self.addEventListener('notificationclick', (event) => {
   event.waitUntil(getWindowClients().then((list) => {
     for (let i = 0; i < list.length; i++) {
       const client = list[i]
-      if (client.url === '/' && 'focus' in client) { return client.focus() }
+      client.postMessage({ type: 'notificationClicked', id: event.notification.tag })
+    }
+
+    for (let i = 0; i < list.length; i++) {
+      const client = list[i]
+      if (state.lastFocused === null || client.id === state.lastFocused) {
+        if ('focus' in client) return client.focus()
+      }
     }
 
     if (clients.openWindow) return clients.openWindow('/')
diff --git a/static/.gitignore b/static/.gitignore
new file mode 100644
index 000000000..3332292a1
--- /dev/null
+++ b/static/.gitignore
@@ -0,0 +1 @@
+*.custom.*
diff --git a/static/config.json b/static/config.json
index fb39ff77f..8a78284a3 100644
--- a/static/config.json
+++ b/static/config.json
@@ -24,6 +24,8 @@
   "showInstanceSpecificPanel": false,
   "sidebarRight": false,
   "subjectLineBehavior": "email",
-  "theme": "pleroma-dark",
+  "theme": null,
+  "style": null,
+  "palette": null,
   "webPushNotifications": false
 }
diff --git a/static/palettes/index.json b/static/palettes/index.json
new file mode 100644
index 000000000..2cd110d1e
--- /dev/null
+++ b/static/palettes/index.json
@@ -0,0 +1,75 @@
+{
+  "pleroma-dark": [ "Pleroma Dark", "#121a24", "#182230", "#b9b9ba", "#d8a070", "#d31014", "#0fa00f", "#0095ff", "#ffa500" ],
+  "pleroma-light": [ "Pleroma Light", "#f2f4f6", "#dbe0e8", "#304055", "#f86f0f", "#d31014", "#0fa00f", "#0095ff", "#ffa500" ],
+  "classic-dark": {
+    "name": "Classic Dark",
+    "bg": "#161c20",
+    "fg": "#282e32",
+    "text": "#b9b9b9",
+    "link": "#baaa9c",
+    "cRed": "#d31014",
+    "cGreen": "#0fa00f",
+    "cBlue": "#0095ff",
+    "cOrange": "#ffa500"
+  },
+  "bird": [ "Bird", "#f8fafd", "#e6ecf0", "#14171a", "#0084b8", "#e0245e", "#17bf63", "#1b95e0", "#fab81e"],
+  "pleroma-amoled": [ "Pleroma Dark AMOLED", "#000000", "#111111", "#b0b0b1", "#d8a070", "#aa0000", "#0fa00f", "#0095ff", "#d59500"],
+  "tomorrow-night": {
+    "name": "Tomorrow Night",
+    "bg": "#1d1f21",
+    "fg": "#373b41",
+    "link": "#81a2be",
+    "text": "#c5c8c6",
+    "cRed": "#cc6666",
+    "cBlue": "#8abeb7",
+    "cGreen": "#b5bd68",
+    "cOrange": "#de935f"
+  },
+  "dracula": {
+    "name": "Dracula",
+    "bg": "#282A36",
+    "fg": "#44475A",
+    "link": "#BC92F9",
+    "text": "#f8f8f2",
+    "cRed": "#FF5555",
+    "cBlue": "#8BE9FD",
+    "cGreen": "#50FA7B",
+    "cOrange": "#FFB86C"
+  },
+  "ir-black": [ "Ir Black", "#000000", "#242422", "#b5b3aa", "#ff6c60", "#FF6C60", "#A8FF60", "#96CBFE", "#FFFFB6" ],
+  "monokai": [ "Monokai", "#272822", "#383830", "#f8f8f2", "#f92672", "#F92672", "#a6e22e", "#66d9ef", "#f4bf75" ],
+  "purple-stream": {
+    "name": "Purple stream",
+    "bg": "#17171A",
+    "fg": "#450F92",
+    "link": "#8769B4",
+    "text": "#C0C0C5",
+    "cRed": "#EB0300",
+    "cBlue": "#4656FF",
+    "cGreen": "#B0E020",
+    "cOrange": "#FF9046"
+  },
+  "feud": {
+    "name": "Feud",
+    "bg": "#323337",
+    "fg": "#1D1E21",
+    "link": "#18A0E3",
+    "accent": "#6671E2",
+    "text": "#DBDDE0",
+    "cRed": "#E05053",
+    "cBlue": "#6671E2",
+    "cGreen": "#3A8D5D",
+    "cOrange": "#DCAA45"
+  },
+  "constabulary": {
+    "name": "Constabulary",
+    "bg": "#FFFFFF",
+    "fg": "#3B5897",
+    "link": "#28487C",
+    "text": "#333333",
+    "cRed": "#FA3C4C",
+    "cBlue": "#0083FF",
+    "cGreen": "#44BDC6",
+    "cOrange": "#FFC200"
+  }
+}
diff --git a/static/pleromatan_apology.png b/static/pleromatan_apology.png
new file mode 100644
index 000000000..36ad7aeb8
Binary files /dev/null and b/static/pleromatan_apology.png differ
diff --git a/static/pleromatan_apology_fox.png b/static/pleromatan_apology_fox.png
new file mode 100644
index 000000000..17f87694c
Binary files /dev/null and b/static/pleromatan_apology_fox.png differ
diff --git a/static/pleromatan_orz.png b/static/pleromatan_orz.png
new file mode 100644
index 000000000..aa54411f1
Binary files /dev/null and b/static/pleromatan_orz.png differ
diff --git a/static/pleromatan_orz_fox.png b/static/pleromatan_orz_fox.png
new file mode 100644
index 000000000..936e42f11
Binary files /dev/null and b/static/pleromatan_orz_fox.png differ
diff --git a/static/styles.json b/static/styles.json
index 23f57c65e..2f836a47a 100644
--- a/static/styles.json
+++ b/static/styles.json
@@ -1,12 +1,6 @@
 {
   "pleroma-dark": "/static/themes/pleroma-dark.json",
   "pleroma-light": "/static/themes/pleroma-light.json",
-  "pleroma-amoled": [ "Pleroma Dark AMOLED", "#000000", "#111111", "#b0b0b1", "#d8a070", "#aa0000", "#0fa00f", "#0095ff", "#d59500"],
-  "classic-dark": [ "Classic Dark", "#161c20", "#282e32", "#b9b9b9", "#baaa9c", "#d31014", "#0fa00f", "#0095ff", "#ffa500" ],
-  "bird": [ "Bird", "#f8fafd", "#e6ecf0", "#14171a", "#0084b8", "#e0245e", "#17bf63", "#1b95e0", "#fab81e"],
-  "ir-black": [ "Ir Black", "#000000", "#242422", "#b5b3aa", "#ff6c60", "#FF6C60", "#A8FF60", "#96CBFE", "#FFFFB6" ],
-  "monokai": [ "Monokai", "#272822", "#383830", "#f8f8f2", "#f92672", "#F92672", "#a6e22e", "#66d9ef", "#f4bf75" ],
-
   "redmond-xx": "/static/themes/redmond-xx.json",
   "redmond-xx-se": "/static/themes/redmond-xx-se.json",
   "redmond-xxi": "/static/themes/redmond-xxi.json",
diff --git a/static/styles/Breezy DX.iss b/static/styles/Breezy DX.iss
new file mode 100644
index 000000000..fcaa7a8eb
--- /dev/null
+++ b/static/styles/Breezy DX.iss	
@@ -0,0 +1,101 @@
+@meta {
+  name: Breezy DX;
+  author: HJ;
+  license: WTFPL;
+  website: ebin.club;
+}
+
+@palette.Dark {
+  bg: #292C32;
+  fg: #292C32;
+  text: #ffffff;
+  link: #1CA4F3;
+  accent: #1CA4F3;
+  cRed: #f41a51;
+  cBlue: #1CA4F3;
+  cGreen: #1af46e;
+  cOrange: #f4af1a;
+}
+
+@palette.Light {
+  bg: #EFF0F2;
+  fg: #EFF0F2;
+  text: #1B1F22;
+  underlay: #5d6086;
+  accent: #1CA4F3;
+  cBlue: #1CA4F3;
+  cRed: #f41a51;
+  cGreen: #1af46e;
+  cOrange: #f4af1a;
+  border: #d8e6f9;
+  link: #1CA4F3;
+}
+
+@palette.Panda {
+  bg: #EFF0F2;
+  fg: #292C32;
+  text: #1B1F22;
+  link: #1CA4F3;
+  accent: #1CA4F3;
+  cRed: #f41a51;
+  cBlue: #1CA4F3;
+  cGreen: #1af46e;
+  cOrange: #f4af1a;
+}
+
+Root {
+  --badgeNotification: color | --cRed;
+  --buttonDefaultHoverGlow: shadow | inset 0 0 0 1 --accent / 1;
+  --buttonDefaultFocusGlow: shadow | inset 0 0 0 1 --accent / 1;
+  --buttonDefaultShadow: shadow | inset 0 0 0 1 --parent--text / 0.35, 0 5 5 -5 #000000 / 0.35;
+  --buttonDefaultBevel: shadow | inset 0 14 14 -14 #FFFFFF / 0.1;
+  --buttonPressedBevel: shadow | inset 0 -20 20 -20 #000000 / 0.05;
+  --defaultInputBevel: shadow | inset 0 0 0 1 --parent--text / 0.35;
+  --defaultInputHoverGlow: shadow | 0 0 0 1 --accent / 1;
+  --defaultInputFocusGlow: shadow | 0 0 0 1 --link / 1;
+}
+
+Button:disabled {
+  shadow: --buttonDefaultBevel, --buttonDefaultShadow
+}
+
+Button:hover {
+  shadow: --buttonDefaultHoverGlow, --buttonDefaultBevel, --buttonDefaultShadow
+}
+
+Button:toggled {
+  background: $blend(--bg 0.3 --accent)
+}
+
+Button:pressed {
+  background: $blend(--bg 0.8 --accent)
+}
+
+Button:pressed:toggled {
+  background: $blend(--bg 0.2 --accent)
+}
+
+Button:toggled:hover {
+  background: $blend(--bg 0.3 --accent)
+}
+
+Button {
+  background: --parent;
+}
+
+Input {
+  shadow: --defaultInputBevel;
+  background: --parent;
+}
+
+PanelHeader {
+  shadow: inset 0 30 30 -30 #ffffff / 0.25
+}
+
+Tab:hover {
+  shadow: --buttonDefaultHoverGlow, --buttonDefaultBevel, --buttonDefaultShadow
+}
+
+Tab {
+  background: --parent;
+}
diff --git a/static/styles/Redmond DX.iss b/static/styles/Redmond DX.iss
new file mode 100644
index 000000000..76e325932
--- /dev/null
+++ b/static/styles/Redmond DX.iss	
@@ -0,0 +1,169 @@
+@meta {
+  name: Redmond DX;
+  author: HJ;
+  license: WTFPL;
+  website: ebin.club;
+}
+
+@palette.Modern {
+  bg: #D3CFC7;
+  fg: #092369;
+  text: #000000;
+  link: #0000FF;
+  accent: #A5C9F0;
+  cRed: #FF3000;
+  cBlue: #009EFF;
+  cGreen: #309E00;
+  cOrange: #FFCE00;
+}
+
+@palette.Classic {
+  bg: #BFBFBF;
+  fg: #000180;
+  text: #000000;
+  link: #0000FF;
+  accent: #A5C9F0;
+  cRed: #FF0000;
+  cBlue: #2E2ECE;
+  cGreen: #007E00;
+  cOrange: #CE8F5F;
+}
+
+@palette.Vapor {
+  bg: #F0ADCD;
+  fg: #bca4ee;
+  text: #602040;
+  link: #064745;
+  accent: #9DF7C8;
+  cRed: #86004a;
+  cBlue: #0e5663;
+  cGreen: #0a8b51;
+  cOrange: #787424;
+}
+
+Root {
+  --gradientColor: color | --accent;
+  --inputColor: color | #FFFFFF;
+  --bevelLight: color | $brightness(--bg 50);
+  --bevelDark: color | $brightness(--bg -20);
+  --bevelExtraDark: color | #404040;
+  --buttonDefaultBevel: shadow | $borderSide(--bevelExtraDark bottom-right 1 1), $borderSide(--bevelLight top-left 1 1), $borderSide(--bevelDark bottom-right 1 2);
+  --buttonPressedFocusedBevel: shadow | inset 0 0 0 1 #000000 / 1 #Outer , inset 0 0 0 2 --bevelExtraDark / 1 #inner;
+  --buttonPressedBevel: shadow | $borderSide(--bevelDark top-left 1 1), $borderSide(--bevelLight bottom-right 1 1), $borderSide(--bevelExtraDark top-left 1 2);
+  --defaultInputBevel: shadow | $borderSide(--bevelDark top-left 1 1), $borderSide(--bevelLight bottom-right 1 1), $borderSide(--bevelExtraDark top-left 1 2), $borderSide(--bg bottom-right 1 2);
+}
+
+Button:toggled {
+  background: --bg;
+  shadow: --buttonPressedBevel
+}
+
+Button:focused {
+  shadow: --buttonDefaultBevel, 0 0 0 1 #000000 / 1
+}
+
+Button:pressed {
+  shadow: --buttonPressedBevel
+}
+
+Button:hover {
+  shadow: --buttonDefaultBevel;
+  background: --bg
+}
+
+Button {
+  shadow: --buttonDefaultBevel;
+  background: --bg;
+  roundness: 0
+}
+
+Button:pressed:hover {
+  shadow: --buttonPressedBevel
+}
+
+Button:hover:pressed:focused {
+  shadow: --buttonPressedFocusedBevel
+}
+
+Button:pressed:focused {
+  shadow: --buttonPressedFocusedBevel
+}
+
+Button:toggled:pressed {
+  shadow: --buttonPressedFocusedBevel
+}
+
+Input {
+  background: $boost(--bg 20);
+  shadow: --defaultInputBevel;
+  roundness: 0
+}
+
+Input:focused {
+  shadow: inset 0 0 0 1 #000000 / 1, --defaultInputBevel
+}
+
+Input:focused:hover {
+  shadow: --defaultInputBevel
+}
+
+Input:focused:hover:disabled {
+  shadow: --defaultInputBevel
+}
+
+Input:hover {
+  shadow: --defaultInputBevel
+}
+
+Input:disabled {
+  shadow: --defaultInputBevel
+}
+
+Panel {
+  shadow: --buttonDefaultBevel;
+  roundness: 0
+}
+
+PanelHeader {
+  shadow: inset -1100 0 1000 -1000 --gradientColor / 1 #Gradient ;
+  background: --fg
+}
+
+Tab:hover {
+  background: --bg;
+  shadow: --buttonDefaultBevel
+}
+
+Tab:active {
+  background: --bg
+}
+
+Tab:active:hover {
+  background: --bg;
+  shadow: --defaultButtonBevel
+}
+
+Tab:active:hover:disabled {
+  background: --bg
+}
+
+Tab:hover:disabled {
+  background: --bg
+}
+
+Tab:disabled {
+  background: --bg
+}
+
+Tab {
+  background: --bg;
+  shadow: --buttonDefaultBevel
+}
+
+Tab:hover:active {
+  shadow: --buttonDefaultBevel
+}
+
+TopBar Link {
+  textColor: #ffffff
+}
diff --git a/static/styles/index.json b/static/styles/index.json
new file mode 100644
index 000000000..6c1dd1676
--- /dev/null
+++ b/static/styles/index.json
@@ -0,0 +1,4 @@
+{
+  "RedmondDX": "/static/styles/Redmond DX.iss",
+  "BreezyDX": "/static/styles/Breezy DX.iss"
+}
diff --git a/test/e2e/nightwatch.conf.js b/test/e2e/nightwatch.conf.js
index 4041c6989..fdd2fda29 100644
--- a/test/e2e/nightwatch.conf.js
+++ b/test/e2e/nightwatch.conf.js
@@ -9,7 +9,7 @@ module.exports = {
 
   selenium: {
     start_process: true,
-    server_path: 'node_modules/selenium-server/lib/runner/selenium-server-standalone-2.53.1.jar',
+    server_path: require('selenium-server').path,
     host: '127.0.0.1',
     port: 4444,
     cli_args: {
diff --git a/test/unit/specs/components/gallery.spec.js b/test/unit/specs/components/gallery.spec.js
new file mode 100644
index 000000000..3c92ae267
--- /dev/null
+++ b/test/unit/specs/components/gallery.spec.js
@@ -0,0 +1,276 @@
+import Gallery from 'src/components/gallery/gallery.vue'
+
+describe('Gallery', () => {
+  let local
+
+  it('attachments is falsey', () => {
+    local = { attachments: false }
+    expect(Gallery.computed.rows.call(local)).to.eql([])
+
+    local = { attachments: null }
+    expect(Gallery.computed.rows.call(local)).to.eql([])
+
+    local = { attachments: undefined }
+    expect(Gallery.computed.rows.call(local)).to.eql([])
+  })
+
+  it('no attachments', () => {
+    local = { attachments: [] }
+    expect(Gallery.computed.rows.call(local)).to.eql([])
+  })
+
+  it('one audio attachment', () => {
+    local = {
+      attachments: [
+        { mimetype: 'audio/mpeg' }
+      ]
+    }
+
+    expect(Gallery.computed.rows.call(local)).to.eql([
+      { audio: true, items: [{ mimetype: 'audio/mpeg' }] }
+    ])
+  })
+
+  it('one image attachment', () => {
+    local = {
+      attachments: [
+        { mimetype: 'image/png' }
+      ]
+    }
+
+    expect(Gallery.computed.rows.call(local)).to.eql([
+      { items: [{ mimetype: 'image/png' }] }
+    ])
+  })
+
+  it('one audio attachment and one image attachment', () => {
+    local = {
+      attachments: [
+        { mimetype: 'audio/mpeg' },
+        { mimetype: 'image/png' }
+      ]
+    }
+
+    expect(Gallery.computed.rows.call(local)).to.eql([
+      { audio: true, items: [{ mimetype: 'audio/mpeg' }] },
+      { items: [{ mimetype: 'image/png' }] }
+    ])
+  })
+
+  it('has "size" key set to "hide"', () => {
+    let local
+    local = {
+      attachments: [
+        { mimetype: 'audio/mpeg' }
+      ],
+      size: 'hide'
+    }
+
+    expect(Gallery.computed.rows.call(local)).to.eql([
+      { minimal: true, items: [{ mimetype: 'audio/mpeg' }] }
+    ])
+
+    local = {
+      attachments: [
+        { mimetype: 'image/jpg' },
+        { mimetype: 'image/png' },
+        { mimetype: 'image/jpg' },
+        { mimetype: 'audio/mpeg' },
+        { mimetype: 'image/png' },
+        { mimetype: 'audio/mpeg' },
+        { mimetype: 'image/jpg' },
+        { mimetype: 'image/png' },
+        { mimetype: 'image/jpg' }
+      ],
+      size: 'hide'
+    }
+
+    // When defining `size: hide`, the `items` aren't
+    // grouped and `audio` isn't set
+    expect(Gallery.computed.rows.call(local)).to.eql([
+      { minimal: true, items: [{ mimetype: 'image/jpg' }] },
+      { minimal: true, items: [{ mimetype: 'image/png' }] },
+      { minimal: true, items: [{ mimetype: 'image/jpg' }] },
+      { minimal: true, items: [{ mimetype: 'audio/mpeg' }] },
+      { minimal: true, items: [{ mimetype: 'image/png' }] },
+      { minimal: true, items: [{ mimetype: 'audio/mpeg' }] },
+      { minimal: true, items: [{ mimetype: 'image/jpg' }] },
+      { minimal: true, items: [{ mimetype: 'image/png' }] },
+      { minimal: true, items: [{ mimetype: 'image/jpg' }] }
+    ])
+  })
+
+  // types other than image or audio should be `minimal`
+  it('non-image/audio', () => {
+    let local
+    local = {
+      attachments: [
+        { mimetype: 'plain/text' }
+      ]
+    }
+    expect(Gallery.computed.rows.call(local)).to.eql([
+      { minimal: true, items: [{ mimetype: 'plain/text' }] }
+    ])
+
+    // No grouping of non-image/audio items
+    local = {
+      attachments: [
+        { mimetype: 'plain/text' },
+        { mimetype: 'plain/text' },
+        { mimetype: 'plain/text' }
+      ]
+    }
+    expect(Gallery.computed.rows.call(local)).to.eql([
+      { minimal: true, items: [{ mimetype: 'plain/text' }] },
+      { minimal: true, items: [{ mimetype: 'plain/text' }] },
+      { minimal: true, items: [{ mimetype: 'plain/text' }] }
+    ])
+
+    local = {
+      attachments: [
+        { mimetype: 'image/png' },
+        { mimetype: 'plain/text' },
+        { mimetype: 'image/jpg' },
+        { mimetype: 'audio/mpeg' }
+      ]
+    }
+    // NOTE / TODO: When defining `size: hide`, the `items` aren't
+    // grouped and `audio` isn't set
+    expect(Gallery.computed.rows.call(local)).to.eql([
+      { items: [{ mimetype: 'image/png' }] },
+      { minimal: true, items: [{ mimetype: 'plain/text' }] },
+      { items: [{ mimetype: 'image/jpg' }] },
+      { audio: true, items: [{ mimetype: 'audio/mpeg' }] }
+    ])
+  })
+
+  it('mixed attachments', () => {
+    local = {
+      attachments: [
+        { mimetype: 'audio/mpeg' },
+        { mimetype: 'image/png' },
+        { mimetype: 'audio/mpeg' },
+        { mimetype: 'image/jpg' },
+        { mimetype: 'image/png' },
+        { mimetype: 'image/jpg' },
+        { mimetype: 'image/jpg' }
+      ]
+    }
+
+    expect(Gallery.computed.rows.call(local)).to.eql([
+      { audio: true, items: [{ mimetype: 'audio/mpeg' }] },
+      { items: [{ mimetype: 'image/png' }] },
+      { audio: true, items: [{ mimetype: 'audio/mpeg' }] },
+      { items: [{ mimetype: 'image/jpg' }, { mimetype: 'image/png' }, { mimetype: 'image/jpg' }, { mimetype: 'image/jpg' }] }
+    ])
+
+    local = {
+      attachments: [
+        { mimetype: 'image/jpg' },
+        { mimetype: 'image/png' },
+        { mimetype: 'image/jpg' },
+        { mimetype: 'image/jpg' },
+        { mimetype: 'audio/mpeg' },
+        { mimetype: 'image/png' },
+        { mimetype: 'audio/mpeg' }
+      ]
+    }
+
+    expect(Gallery.computed.rows.call(local)).to.eql([
+      { items: [{ mimetype: 'image/jpg' }, { mimetype: 'image/png' }, { mimetype: 'image/jpg' }] },
+      { items: [{ mimetype: 'image/jpg' }] },
+      { audio: true, items: [{ mimetype: 'audio/mpeg' }] },
+      { items: [{ mimetype: 'image/png' }] },
+      { audio: true, items: [{ mimetype: 'audio/mpeg' }] }
+    ])
+
+    local = {
+      attachments: [
+        { mimetype: 'image/jpg' },
+        { mimetype: 'image/png' },
+        { mimetype: 'image/jpg' },
+        { mimetype: 'image/jpg' },
+        { mimetype: 'image/png' },
+        { mimetype: 'image/png' },
+        { mimetype: 'image/jpg' }
+      ]
+    }
+
+    // Group by three-per-row, unless there's one dangling, then stick it on the end of the last row
+    // https://git.pleroma.social/pleroma/pleroma-fe/-/merge_requests/1785#note_98514
+    expect(Gallery.computed.rows.call(local)).to.eql([
+      { items: [{ mimetype: 'image/jpg' }, { mimetype: 'image/png' }, { mimetype: 'image/jpg' }] },
+      { items: [{ mimetype: 'image/jpg' }, { mimetype: 'image/png' }, { mimetype: 'image/png' }, { mimetype: 'image/jpg' }] }
+    ])
+
+    local = {
+      attachments: [
+        { mimetype: 'image/jpg' },
+        { mimetype: 'image/png' },
+        { mimetype: 'image/jpg' },
+        { mimetype: 'image/jpg' },
+        { mimetype: 'image/png' },
+        { mimetype: 'image/png' },
+        { mimetype: 'image/jpg' },
+        { mimetype: 'image/png' }
+      ]
+    }
+
+    expect(Gallery.computed.rows.call(local)).to.eql([
+      { items: [{ mimetype: 'image/jpg' }, { mimetype: 'image/png' }, { mimetype: 'image/jpg' }] },
+      { items: [{ mimetype: 'image/jpg' }, { mimetype: 'image/png' }, { mimetype: 'image/png' }] },
+      { items: [{ mimetype: 'image/jpg' }, { mimetype: 'image/png' }] }
+    ])
+  })
+
+  it('does not do grouping when grid is set', () => {
+    const attachments = [
+      { mimetype: 'audio/mpeg' },
+      { mimetype: 'image/png' },
+      { mimetype: 'audio/mpeg' },
+      { mimetype: 'image/jpg' },
+      { mimetype: 'image/png' },
+      { mimetype: 'image/jpg' },
+      { mimetype: 'image/jpg' }
+    ]
+
+    local = { grid: true, attachments }
+
+    expect(Gallery.computed.rows.call(local)).to.eql([
+      { grid: true, items: attachments }
+    ])
+  })
+
+  it('limit is set', () => {
+    const attachments = [
+      { mimetype: 'audio/mpeg' },
+      { mimetype: 'image/png' },
+      { mimetype: 'image/jpg' },
+      { mimetype: 'audio/mpeg' },
+      { mimetype: 'image/jpg' }
+    ]
+
+    let local
+    local = { attachments, limit: 2 }
+
+    expect(Gallery.computed.rows.call(local)).to.eql([
+      { audio: true, items: [{ mimetype: 'audio/mpeg' }] },
+      { items: [{ mimetype: 'image/png' }] }
+    ])
+
+    local = { attachments, limit: 3 }
+
+    expect(Gallery.computed.rows.call(local)).to.eql([
+      { audio: true, items: [{ mimetype: 'audio/mpeg' }] },
+      { items: [{ mimetype: 'image/png' }, { mimetype: 'image/jpg' }] }
+    ])
+
+    local = { attachments, limit: 4 }
+
+    expect(Gallery.computed.rows.call(local)).to.eql([
+      { audio: true, items: [{ mimetype: 'audio/mpeg' }] },
+      { items: [{ mimetype: 'image/png' }, { mimetype: 'image/jpg' }] },
+      { audio: true, items: [{ mimetype: 'audio/mpeg' }] }
+    ])
+  })
+})
diff --git a/test/unit/specs/components/rich_content.spec.js b/test/unit/specs/components/rich_content.spec.js
index 427eb5ed0..37d8bcbfa 100644
--- a/test/unit/specs/components/rich_content.spec.js
+++ b/test/unit/specs/components/rich_content.spec.js
@@ -539,7 +539,6 @@ describe('RichContent', () => {
       `,
       props: ['handleLinks', 'attentions', 'vhtml']
     }
-    console.log(1)
 
     const ptest = (handleLinks, vhtml) => {
       const t0 = performance.now()
@@ -562,11 +561,11 @@ describe('RichContent', () => {
       return `Mount: ${t1 - t0}ms, destroy: ${t2 - t1}ms, avg ${(t1 - t0) / amount}ms - ${(t2 - t1) / amount}ms per item`
     }
 
-    console.log(`${amount} items with links handling:`)
-    console.log(ptest(true))
-    console.log(`${amount} items without links handling:`)
-    console.log(ptest(false))
-    console.log(`${amount} items plain v-html:`)
-    console.log(ptest(false, true))
+    console.debug(`${amount} items with links handling:`)
+    console.debug(ptest(true))
+    console.debug(`${amount} items without links handling:`)
+    console.debug(ptest(false))
+    console.debug(`${amount} items plain v-html:`)
+    console.debug(ptest(false, true))
   })
 })
diff --git a/test/unit/specs/modules/serverSideStorage.spec.js b/test/unit/specs/modules/serverSideStorage.spec.js
index 2e43263ae..50df2a853 100644
--- a/test/unit/specs/modules/serverSideStorage.spec.js
+++ b/test/unit/specs/modules/serverSideStorage.spec.js
@@ -74,7 +74,7 @@ describe('The serverSideStorage module', () => {
         })
       })
 
-      it('should reset local timestamp to remote if contents are the same', () => {
+      it.only('should reset local timestamp to remote if contents are the same', () => {
         const state = {
           ...cloneDeep(defaultState),
           cache: null
@@ -176,33 +176,33 @@ describe('The serverSideStorage module', () => {
     })
     describe('_getRecentData', () => {
       it('should handle nulls correctly', () => {
-        expect(_getRecentData(null, null)).to.eql({ recent: null, stale: null, needUpload: true })
+        expect(_getRecentData(null, null, true)).to.eql({ recent: null, stale: null, needUpload: true })
       })
 
       it('doesn\'t choke on invalid data', () => {
-        expect(_getRecentData({ a: 1 }, { b: 2 })).to.eql({ recent: null, stale: null, needUpload: true })
+        expect(_getRecentData({ a: 1 }, { b: 2 }, true)).to.eql({ recent: null, stale: null, needUpload: true })
       })
 
       it('should prefer the valid non-null correctly, needUpload works properly', () => {
         const nonNull = { _version: VERSION, _timestamp: 1 }
-        expect(_getRecentData(nonNull, null)).to.eql({ recent: nonNull, stale: null, needUpload: true })
-        expect(_getRecentData(null, nonNull)).to.eql({ recent: nonNull, stale: null, needUpload: false })
+        expect(_getRecentData(nonNull, null, true)).to.eql({ recent: nonNull, stale: null, needUpload: true })
+        expect(_getRecentData(null, nonNull, true)).to.eql({ recent: nonNull, stale: null, needUpload: false })
       })
 
       it('should prefer the one with higher timestamp', () => {
         const a = { _version: VERSION, _timestamp: 1 }
         const b = { _version: VERSION, _timestamp: 2 }
 
-        expect(_getRecentData(a, b)).to.eql({ recent: b, stale: a, needUpload: false })
-        expect(_getRecentData(b, a)).to.eql({ recent: b, stale: a, needUpload: false })
+        expect(_getRecentData(a, b, true)).to.eql({ recent: b, stale: a, needUpload: false })
+        expect(_getRecentData(b, a, true)).to.eql({ recent: b, stale: a, needUpload: false })
       })
 
       it('case where both are same', () => {
         const a = { _version: VERSION, _timestamp: 3 }
         const b = { _version: VERSION, _timestamp: 3 }
 
-        expect(_getRecentData(a, b)).to.eql({ recent: b, stale: a, needUpload: false })
-        expect(_getRecentData(b, a)).to.eql({ recent: b, stale: a, needUpload: false })
+        expect(_getRecentData(a, b, true)).to.eql({ recent: b, stale: a, needUpload: false })
+        expect(_getRecentData(b, a, true)).to.eql({ recent: b, stale: a, needUpload: false })
       })
     })
 
diff --git a/test/unit/specs/modules/statuses.spec.js b/test/unit/specs/modules/statuses.spec.js
index a8d0e5a33..0d83a9f8a 100644
--- a/test/unit/specs/modules/statuses.spec.js
+++ b/test/unit/specs/modules/statuses.spec.js
@@ -77,24 +77,6 @@ describe('Statuses module', () => {
       expect(state.timelines.public.newStatusCount).to.equal(0)
     })
 
-    it('removes statuses by tag on deletion', () => {
-      const state = defaultState()
-      const status = makeMockStatus({ id: '1' })
-      const otherStatus = makeMockStatus({ id: '3' })
-      status.uri = 'xxx'
-      const deletion = makeMockStatus({ id: '2', type: 'deletion' })
-      deletion.text = 'Dolus deleted notice {{tag:gs.smuglo.li,2016-11-18:noticeId=1038007:objectType=note}}.'
-      deletion.uri = 'xxx'
-
-      mutations.addNewStatuses(state, { statuses: [status, otherStatus], showImmediately: true, timeline: 'public' })
-      mutations.addNewStatuses(state, { statuses: [deletion], showImmediately: true, timeline: 'public' })
-
-      expect(state.allStatuses).to.eql([otherStatus])
-      expect(state.timelines.public.statuses).to.eql([otherStatus])
-      expect(state.timelines.public.visibleStatuses).to.eql([otherStatus])
-      expect(state.timelines.public.maxId).to.eql('3')
-    })
-
     it('does not update the maxId when the noIdUpdate flag is set', () => {
       const state = defaultState()
       const status = makeMockStatus({ id: '1' })
@@ -315,62 +297,4 @@ describe('Statuses module', () => {
       expect(state.timelines.user.userId).to.eql(123)
     })
   })
-
-  describe('notifications', () => {
-    it('removes a notification when the notice gets removed', () => {
-      const user = { id: '1' }
-      const state = defaultState()
-      const status = makeMockStatus({ id: '1' })
-      const otherStatus = makeMockStatus({ id: '3' })
-      const mentionedStatus = makeMockStatus({ id: '2' })
-      mentionedStatus.attentions = [user]
-      mentionedStatus.uri = 'xxx'
-      otherStatus.attentions = [user]
-
-      const deletion = makeMockStatus({ id: '4', type: 'deletion' })
-      deletion.text = 'Dolus deleted notice {{tag:gs.smuglo.li,2016-11-18:noticeId=1038007:objectType=note}}.'
-      deletion.uri = 'xxx'
-      const newNotificationSideEffects = () => {}
-      mutations.addNewStatuses(state, { statuses: [status, otherStatus], user })
-      mutations.addNewNotifications(
-        state,
-        {
-          notifications: [{
-            from_profile: { id: '2' },
-            id: '998',
-            type: 'mention',
-            status: otherStatus,
-            action: otherStatus,
-            seen: false
-          }],
-          newNotificationSideEffects
-        })
-
-      expect(state.notifications.data.length).to.eql(1)
-      mutations.addNewNotifications(
-        state,
-        {
-          notifications: [{
-            from_profile: { id: '2' },
-            id: '999',
-            type: 'mention',
-            status: mentionedStatus,
-            action: mentionedStatus,
-            seen: false
-          }],
-          newNotificationSideEffects
-        })
-
-      mutations.addNewStatuses(state, { statuses: [mentionedStatus], user })
-      expect(state.allStatuses.length).to.eql(3)
-      expect(state.notifications.data.length).to.eql(2)
-      expect(state.notifications.data[1].status).to.eql(mentionedStatus)
-      expect(state.notifications.data[1].action).to.eql(mentionedStatus)
-      expect(state.notifications.data[1].type).to.eql('mention')
-
-      mutations.addNewStatuses(state, { statuses: [deletion], user })
-      expect(state.allStatuses.length).to.eql(2)
-      expect(state.notifications.data.length).to.eql(1)
-    })
-  })
 })
diff --git a/test/unit/specs/services/matcher/matcher.spec.js b/test/unit/specs/services/matcher/matcher.spec.js
index 7a2494f07..c6e9719d3 100644
--- a/test/unit/specs/services/matcher/matcher.spec.js
+++ b/test/unit/specs/services/matcher/matcher.spec.js
@@ -78,5 +78,11 @@ describe('MatcherService', () => {
 
       expect(MatcherService.extractTagFromUrl(url)).to.eql(false)
     })
+
+    it('should return tag name from non-ascii tags', () => {
+      const url = encodeURI('https://website.com/tag/喵喵喵')
+
+      expect(MatcherService.extractTagFromUrl(url)).to.eql('喵喵喵')
+    })
   })
 })
diff --git a/test/unit/specs/services/notification_utils/notification_utils.spec.js b/test/unit/specs/services/notification_utils/notification_utils.spec.js
index 00628d833..60db7380c 100644
--- a/test/unit/specs/services/notification_utils/notification_utils.spec.js
+++ b/test/unit/specs/services/notification_utils/notification_utils.spec.js
@@ -5,28 +5,28 @@ describe('NotificationUtils', () => {
     it('should return sorted notifications with configured types', () => {
       const store = {
         state: {
-          statuses: {
-            notifications: {
-              data: [
-                {
-                  id: 1,
-                  action: { id: '1' },
-                  type: 'like'
-                },
-                {
-                  id: 2,
-                  action: { id: '2' },
-                  type: 'mention'
-                },
-                {
-                  id: 3,
-                  action: { id: '3' },
-                  type: 'repeat'
-                }
-              ]
-            }
-          },
-          config: {
+          notifications: {
+            data: [
+              {
+                id: 1,
+                action: { id: '1' },
+                type: 'like'
+              },
+              {
+                id: 2,
+                action: { id: '2' },
+                type: 'mention'
+              },
+              {
+                id: 3,
+                action: { id: '3' },
+                type: 'repeat'
+              }
+            ]
+          }
+        },
+        getters: {
+          mergedConfig: {
             notificationVisibility: {
               likes: true,
               repeats: true,
@@ -55,23 +55,23 @@ describe('NotificationUtils', () => {
     it('should return only notifications not marked as seen', () => {
       const store = {
         state: {
-          statuses: {
-            notifications: {
-              data: [
-                {
-                  action: { id: '1' },
-                  type: 'like',
-                  seen: false
-                },
-                {
-                  action: { id: '2' },
-                  type: 'mention',
-                  seen: true
-                }
-              ]
-            }
-          },
-          config: {
+          notifications: {
+            data: [
+              {
+                action: { id: '1' },
+                type: 'like',
+                seen: false
+              },
+              {
+                action: { id: '2' },
+                type: 'mention',
+                seen: true
+              }
+            ]
+          }
+        },
+        getters: {
+          mergedConfig: {
             notificationVisibility: {
               likes: true,
               repeats: true,
diff --git a/test/unit/specs/services/theme_data/iss_deserializer.spec.js b/test/unit/specs/services/theme_data/iss_deserializer.spec.js
new file mode 100644
index 000000000..ca97243f7
--- /dev/null
+++ b/test/unit/specs/services/theme_data/iss_deserializer.spec.js
@@ -0,0 +1,40 @@
+import { deserialize } from 'src/services/theme_data/iss_deserializer.js'
+import { serialize } from 'src/services/theme_data/iss_serializer.js'
+const componentsContext = require.context('src', true, /\.style.js(on)?$/)
+
+describe('ISS (de)serialization', () => {
+  componentsContext.keys().forEach(key => {
+    const component = componentsContext(key).default
+
+    it(`(De)serialization of component ${component.name} works`, () => {
+      const normalized = component.defaultRules.map(x => ({ component: component.name, ...x }))
+      const serialized = serialize(normalized)
+      const deserialized = deserialize(serialized)
+
+      // for some reason comparing objects directly fails the assert
+      expect(JSON.stringify(deserialized, null, 2)).to.equal(JSON.stringify(normalized, null, 2))
+    })
+  })
+
+  /*
+  // Debug snippet
+  const onlyComponent = componentsContext('./components/panel_header.style.js').default
+  it.only(`(De)serialization of component ${onlyComponent.name} works`, () => {
+    const normalized = onlyComponent.defaultRules.map(x => ({ component: onlyComponent.name, ...x }))
+    console.debug('BEGIN INPUT ================')
+    console.debug(normalized)
+    console.debug('END INPUT ==================')
+    const serialized = serialize(normalized)
+    console.debug('BEGIN SERIAL ===============')
+    console.debug(serialized)
+    console.debug('END SERIAL =================')
+    const deserialized = deserialize(serialized)
+    console.debug('BEGIN DESERIALIZED =========')
+    console.debug(serialized)
+    console.debug('END DESERIALIZED ===========')
+
+    // for some reason comparing objects directly fails the assert
+    expect(JSON.stringify(deserialized, null, 2)).to.equal(JSON.stringify(normalized, null, 2))
+  })
+  /* */
+})
diff --git a/test/unit/specs/services/theme_data/theme_data3.spec.js b/test/unit/specs/services/theme_data/theme_data3.spec.js
new file mode 100644
index 000000000..b76ea5969
--- /dev/null
+++ b/test/unit/specs/services/theme_data/theme_data3.spec.js
@@ -0,0 +1,150 @@
+// import { topoSort } from 'src/services/theme_data/theme_data.service.js'
+import {
+  getAllPossibleCombinations
+} from 'src/services/theme_data/iss_utils.js'
+import {
+  init
+} from 'src/services/theme_data/theme_data_3.service.js'
+import {
+  basePaletteKeys
+} from 'src/services/theme_data/theme2_to_theme3.js'
+
+describe('Theme Data 3', () => {
+  describe('getAllPossibleCombinations', () => {
+    it('test simple 3 values case', () => {
+      const out = getAllPossibleCombinations([1, 2, 3]).map(x => x.sort((a, b) => a - b))
+      expect(out).to.eql([
+        [1], [2], [3],
+        [1, 2], [1, 3], [2, 3],
+        [1, 2, 3]
+      ])
+    })
+
+    it('test simple 4 values case', () => {
+      const out = getAllPossibleCombinations([1, 2, 3, 4]).map(x => x.sort((a, b) => a - b))
+      expect(out).to.eql([
+        [1], [2], [3], [4],
+        [1, 2], [1, 3], [1, 4], [2, 3], [2, 4], [3, 4],
+        [1, 2, 3], [1, 2, 4], [1, 3, 4], [2, 3, 4],
+        [1, 2, 3, 4]
+      ])
+    })
+
+    it('test massive 5 values case, using strings', () => {
+      const out = getAllPossibleCombinations(['a', 'b', 'c', 'd', 'e']).map(x => x.sort((a, b) => a - b))
+      expect(out).to.eql([
+        // 1
+        ['a'], ['b'], ['c'], ['d'], ['e'],
+        // 2
+        ['a', 'b'], ['a', 'c'], ['a', 'd'], ['a', 'e'],
+        ['b', 'c'], ['b', 'd'], ['b', 'e'],
+        ['c', 'd'], ['c', 'e'],
+        ['d', 'e'],
+        // 3
+        ['a', 'b', 'c'], ['a', 'b', 'd'], ['a', 'b', 'e'],
+        ['a', 'c', 'd'], ['a', 'c', 'e'],
+        ['a', 'd', 'e'],
+
+        ['b', 'c', 'd'], ['b', 'c', 'e'],
+        ['b', 'd', 'e'],
+
+        ['c', 'd', 'e'],
+        // 4
+        ['a', 'b', 'c', 'd'], ['a', 'b', 'c', 'e'],
+        ['a', 'b', 'd', 'e'],
+
+        ['a', 'c', 'd', 'e'],
+
+        ['b', 'c', 'd', 'e'],
+        // 5
+        ['a', 'b', 'c', 'd', 'e']
+      ])
+    })
+  })
+
+  describe('init', function () {
+    this.timeout(5000)
+
+    it('Test initialization without anything', () => {
+      const out = init({ inputRuleset: [], ultimateBackgroundColor: '#DEADAF' })
+
+      expect(out).to.have.property('eager')
+      expect(out).to.have.property('lazy')
+      expect(out).to.have.property('staticVars')
+
+      expect(out.lazy).to.be.an('array')
+      expect(out.lazy).to.have.lengthOf.above(1)
+      expect(out.eager).to.be.an('array')
+      expect(out.eager).to.have.lengthOf.above(1)
+      expect(out.staticVars).to.be.an('object')
+
+      // check backwards compat/generic stuff
+      basePaletteKeys.forEach(key => {
+        expect(out.staticVars).to.have.property(key)
+      })
+    })
+
+    it('Test initialization with a basic palette', () => {
+      const out = init({
+        inputRuleset: [{
+          component: 'Root',
+          directives: {
+            '--bg': 'color | #008080',
+            '--fg': 'color | #00C0A0'
+          }
+        }],
+        ultimateBackgroundColor: '#DEADAF'
+      })
+
+      expect(out.staticVars).to.have.property('bg').equal('#008080')
+      expect(out.staticVars).to.have.property('fg').equal('#00C0A0')
+
+      const panelRule = out.eager.filter(x => {
+        if (x.component !== 'Panel') return false
+        return true
+      })[0]
+
+      expect(panelRule).to.have.nested.deep.property('dynamicVars.stacked', { r: 0, g: 128, b: 128 })
+    })
+
+    it('Test initialization with opacity', () => {
+      const out = init({
+        inputRuleset: [{
+          component: 'Root',
+          directives: {
+            '--bg': 'color | #008080'
+          }
+        }, {
+          component: 'Panel',
+          directives: {
+            opacity: 0.5
+          }
+        }],
+        ultimateBackgroundColor: '#DEADAF'
+      })
+
+      expect(out.staticVars).to.have.property('bg').equal('#008080')
+
+      const panelRule = out.eager.filter(x => {
+        if (x.component !== 'Panel') return false
+        return true
+      })[0]
+
+      expect(panelRule).to.have.nested.deep.property('dynamicVars.background', { r: 0, g: 128, b: 128, a: 0.5 })
+      expect(panelRule).to.have.nested.deep.property('dynamicVars.stacked')
+      // Somewhat incorrect since we don't do gamma correction
+      // real expectancy should be this:
+      /*
+
+      expect(panelRule).to.have.nested.deep.property('dynamicVars.stacked.r').that.is.closeTo(147.0, 0.01)
+      expect(panelRule).to.have.nested.deep.property('dynamicVars.stacked.g').that.is.closeTo(143.2, 0.01)
+      expect(panelRule).to.have.nested.deep.property('dynamicVars.stacked.b').that.is.closeTo(144.0, 0.01)
+
+      */
+
+      expect(panelRule).to.have.nested.deep.property('dynamicVars.stacked.r').that.is.closeTo(88.8, 0.01)
+      expect(panelRule).to.have.nested.deep.property('dynamicVars.stacked.g').that.is.closeTo(133.2, 0.01)
+      expect(panelRule).to.have.nested.deep.property('dynamicVars.stacked.b').that.is.closeTo(134, 0.01)
+    })
+  })
+})
diff --git a/test/unit/specs/services/version/version.service.spec.js b/test/unit/specs/services/version/version.service.spec.js
deleted file mode 100644
index 519145ee1..000000000
--- a/test/unit/specs/services/version/version.service.spec.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { extractCommit } from 'src/services/version/version.service.js'
-
-describe('extractCommit', () => {
-  it('return short commit hash following "-g" characters', () => {
-    expect(extractCommit('1.0.0-45-g5e7aeebc')).to.eql('5e7aeebc')
-  })
-
-  it('return short commit hash without branch name', () => {
-    expect(extractCommit('1.0.0-45-g5e7aeebc-branch')).to.eql('5e7aeebc')
-  })
-})
diff --git a/tools/check-changelog b/tools/check-changelog
new file mode 100644
index 000000000..9b3ff37f2
--- /dev/null
+++ b/tools/check-changelog
@@ -0,0 +1,18 @@
+#!/bin/sh
+
+echo "looking for change log"
+
+git remote add upstream https://git.pleroma.social/pleroma/pleroma-fe.git
+git fetch upstream ${CI_MERGE_REQUEST_TARGET_BRANCH_NAME}:refs/remotes/upstream/$CI_MERGE_REQUEST_TARGET_BRANCH_NAME
+
+git diff --raw --no-renames upstream/$CI_MERGE_REQUEST_TARGET_BRANCH_NAME HEAD -- changelog.d | \
+    grep ' A\t' | grep '\.\(skip\|add\|remove\|change\|fix\|security\)$'
+ret=$?
+
+if [ $ret -eq 0 ]; then
+    echo "found a changelog entry"
+    exit 0
+else
+    echo "changelog entry not found"
+    exit 1
+fi
diff --git a/tools/collect-changelog b/tools/collect-changelog
new file mode 100755
index 000000000..1e12d5640
--- /dev/null
+++ b/tools/collect-changelog
@@ -0,0 +1,27 @@
+#!/bin/sh
+
+collectType() {
+    local suffix="$1"
+    local header="$2"
+    local printed=0
+    for file in changelog.d/*."$suffix"; do
+        if [ '!' -f "$file" ]; then
+            continue
+        fi
+        if [ "$printed" = 0 ]; then
+            echo
+            echo "### $header"
+            printed=1
+        fi
+        # Normalize any trailing newlines/spaces, etc.
+        echo "- $(cat "$file")"
+    done
+}
+
+collectType security Security
+collectType change Changed
+collectType add Added
+collectType fix Fixed
+collectType remove Removed
+
+rm changelog.d/*
diff --git a/tools/emoji_merger.js b/tools/emoji_merger.js
index a74e847ed..78a798dfe 100644
--- a/tools/emoji_merger.js
+++ b/tools/emoji_merger.js
@@ -60,7 +60,7 @@ const run = () => {
   }, {})
 
   fs.writeFile(outputFilename, JSON.stringify(sorted, null, 2), 'utf8', (err) => {
-    if (err) console.log('Error writing file', err)
+    if (err) console.error('Error writing file', err)
   })
 }
 
diff --git a/yarn.lock b/yarn.lock
index 03c711d0b..06100a5da 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -24,13 +24,6 @@
   dependencies:
     "@babel/highlight" "^7.0.0"
 
-"@babel/code-frame@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.16.7.tgz#44416b6bd7624b998f5b1af5d470856c40138789"
-  integrity sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==
-  dependencies:
-    "@babel/highlight" "^7.16.7"
-
 "@babel/code-frame@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.18.6.tgz#3b25d38c89600baa2dcc219edfa88a74eb2c427a"
@@ -38,41 +31,45 @@
   dependencies:
     "@babel/highlight" "^7.18.6"
 
-"@babel/compat-data@^7.17.7":
-  version "7.17.7"
-  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.17.7.tgz#078d8b833fbbcc95286613be8c716cef2b519fa2"
-  integrity sha512-p8pdE6j0a29TNGebNm7NzYZWB3xVZJBZ7XGs42uAKzQo8VQ3F0By/cQCtUEABwIqw5zo6WA4NbmxsfzADzMKnQ==
+"@babel/code-frame@^7.24.7", "@babel/code-frame@^7.25.9", "@babel/code-frame@^7.26.2":
+  version "7.26.2"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.26.2.tgz#4b5fab97d33338eff916235055f0ebc21e573a85"
+  integrity sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.25.9"
+    js-tokens "^4.0.0"
+    picocolors "^1.0.0"
 
 "@babel/compat-data@^7.18.8":
   version "7.18.8"
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.18.8.tgz#2483f565faca607b8535590e84e7de323f27764d"
   integrity sha512-HSmX4WZPPK3FUxYp7g2T6EyO8j96HlZJlxmKPSh6KAcqwyDrfx7hKjXpAW/0FhFfTJsR0Yt4lAjLI2coMptIHQ==
 
-"@babel/compat-data@^7.20.1", "@babel/compat-data@^7.20.5":
-  version "7.20.5"
-  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.20.5.tgz#86f172690b093373a933223b4745deeb6049e733"
-  integrity sha512-KZXo2t10+/jxmkhNXc7pZTqRvSOIvVv/+lJwHS+B2rErwOyjuVRh60yVpb7liQ1U5t7lLJ1bz+t8tSypUZdm0g==
+"@babel/compat-data@^7.22.6", "@babel/compat-data@^7.26.5":
+  version "7.26.5"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.26.5.tgz#df93ac37f4417854130e21d72c66ff3d4b897fc7"
+  integrity sha512-XvcZi1KWf88RVbF9wn8MN6tYFloU5qX8KjuF3E1PVBmJ9eypXfs4GRiJwLuTZL0iSnJUKn1BFPa5BPZZJyFzPg==
 
-"@babel/core@7.21.0":
-  version "7.21.0"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.21.0.tgz#1341aefdcc14ccc7553fcc688dd8986a2daffc13"
-  integrity sha512-PuxUbxcW6ZYe656yL3EAhpy7qXKq0DmYsrJLpbB8XrsCP9Nm+XCg9XFMb5vIDliPD7+U/+M+QJlH17XOcB7eXA==
+"@babel/core@7.26.7":
+  version "7.26.7"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.26.7.tgz#0439347a183b97534d52811144d763a17f9d2b24"
+  integrity sha512-SRijHmF0PSPgLIBYlWnG0hyeJLwXE2CgpsXaMOrtt2yp9/86ALw6oUlj9KYuZ0JN07T4eBMVIW4li/9S1j2BGA==
   dependencies:
     "@ampproject/remapping" "^2.2.0"
-    "@babel/code-frame" "^7.18.6"
-    "@babel/generator" "^7.21.0"
-    "@babel/helper-compilation-targets" "^7.20.7"
-    "@babel/helper-module-transforms" "^7.21.0"
-    "@babel/helpers" "^7.21.0"
-    "@babel/parser" "^7.21.0"
-    "@babel/template" "^7.20.7"
-    "@babel/traverse" "^7.21.0"
-    "@babel/types" "^7.21.0"
-    convert-source-map "^1.7.0"
+    "@babel/code-frame" "^7.26.2"
+    "@babel/generator" "^7.26.5"
+    "@babel/helper-compilation-targets" "^7.26.5"
+    "@babel/helper-module-transforms" "^7.26.0"
+    "@babel/helpers" "^7.26.7"
+    "@babel/parser" "^7.26.7"
+    "@babel/template" "^7.25.9"
+    "@babel/traverse" "^7.26.7"
+    "@babel/types" "^7.26.7"
+    convert-source-map "^2.0.0"
     debug "^4.1.0"
     gensync "^1.0.0-beta.2"
-    json5 "^2.2.2"
-    semver "^6.3.0"
+    json5 "^2.2.3"
+    semver "^6.3.1"
 
 "@babel/core@^7.12.3":
   version "7.18.10"
@@ -95,23 +92,14 @@
     json5 "^2.2.1"
     semver "^6.3.0"
 
-"@babel/eslint-parser@7.19.1":
-  version "7.19.1"
-  resolved "https://registry.yarnpkg.com/@babel/eslint-parser/-/eslint-parser-7.19.1.tgz#4f68f6b0825489e00a24b41b6a1ae35414ecd2f4"
-  integrity sha512-AqNf2QWt1rtu2/1rLswy6CDP7H9Oh3mMhk177Y67Rg8d7RD9WfOLLv8CGn6tisFvS2htm86yIe1yLF6I1UDaGQ==
+"@babel/eslint-parser@7.26.5":
+  version "7.26.5"
+  resolved "https://registry.yarnpkg.com/@babel/eslint-parser/-/eslint-parser-7.26.5.tgz#aa669f4d873f9cd617050cf3c40c19cd96307efb"
+  integrity sha512-Kkm8C8uxI842AwQADxl0GbcG1rupELYLShazYEZO/2DYjhyWXJIOUVOE3tBYm6JXzUCNJOZEzqc4rCW/jsEQYQ==
   dependencies:
     "@nicolo-ribaudo/eslint-scope-5-internals" "5.1.1-v1"
     eslint-visitor-keys "^2.1.0"
-    semver "^6.3.0"
-
-"@babel/generator@^7.17.3":
-  version "7.17.7"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.17.7.tgz#8da2599beb4a86194a3b24df6c085931d9ee45ad"
-  integrity sha512-oLcVCTeIFadUoArDTwpluncplrYBmTCCZZgXCbgNGvOBBiSDDK3eWO4b/+eOTli5tKv1lg+a5/NAXg+nTcei1w==
-  dependencies:
-    "@babel/types" "^7.17.0"
-    jsesc "^2.5.1"
-    source-map "^0.5.0"
+    semver "^6.3.1"
 
 "@babel/generator@^7.18.10":
   version "7.18.10"
@@ -122,15 +110,6 @@
     "@jridgewell/gen-mapping" "^0.3.2"
     jsesc "^2.5.1"
 
-"@babel/generator@^7.18.7":
-  version "7.18.7"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.18.7.tgz#2aa78da3c05aadfc82dbac16c99552fc802284bd"
-  integrity sha512-shck+7VLlY72a2w9c3zYWuE1pwOKEiQHV7GTUbSnhyl5eu3i04t30tBY82ZRWrDfo3gkakCFtevExnxbkf2a3A==
-  dependencies:
-    "@babel/types" "^7.18.7"
-    "@jridgewell/gen-mapping" "^0.3.2"
-    jsesc "^2.5.1"
-
 "@babel/generator@^7.18.9":
   version "7.18.9"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.18.9.tgz#68337e9ea8044d6ddc690fb29acae39359cca0a5"
@@ -140,40 +119,16 @@
     "@jridgewell/gen-mapping" "^0.3.2"
     jsesc "^2.5.1"
 
-"@babel/generator@^7.20.0":
-  version "7.20.0"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.20.0.tgz#0bfc5379e0efb05ca6092091261fcdf7ec36249d"
-  integrity sha512-GUPcXxWibClgmYJuIwC2Bc2Lg+8b9VjaJ+HlNdACEVt+Wlr1eoU1OPZjZRm7Hzl0gaTsUZNQfeihvZJhG7oc3w==
+"@babel/generator@^7.26.5":
+  version "7.26.5"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.26.5.tgz#e44d4ab3176bbcaf78a5725da5f1dc28802a9458"
+  integrity sha512-2caSP6fN9I7HOe6nqhtft7V4g7/V/gfDsC3Ag4W7kEzzvRGKqiv0pu0HogPiZ3KaVSoNDhUws6IJjDjpfmYIXw==
   dependencies:
-    "@babel/types" "^7.20.0"
-    "@jridgewell/gen-mapping" "^0.3.2"
-    jsesc "^2.5.1"
-
-"@babel/generator@^7.20.7":
-  version "7.20.7"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.20.7.tgz#f8ef57c8242665c5929fe2e8d82ba75460187b4a"
-  integrity sha512-7wqMOJq8doJMZmP4ApXTzLxSr7+oO2jroJURrVEp6XShrQUObV8Tq/D0NCcoYg2uHqUrjzO0zwBjoYzelxK+sw==
-  dependencies:
-    "@babel/types" "^7.20.7"
-    "@jridgewell/gen-mapping" "^0.3.2"
-    jsesc "^2.5.1"
-
-"@babel/generator@^7.21.0":
-  version "7.21.1"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.21.1.tgz#951cc626057bc0af2c35cd23e9c64d384dea83dd"
-  integrity sha512-1lT45bAYlQhFn/BHivJs43AiW2rg3/UbLyShGfF3C0KmHvO5fSghWd5kBJy30kpRRucGzXStvnnCFniCR2kXAA==
-  dependencies:
-    "@babel/types" "^7.21.0"
-    "@jridgewell/gen-mapping" "^0.3.2"
-    "@jridgewell/trace-mapping" "^0.3.17"
-    jsesc "^2.5.1"
-
-"@babel/helper-annotate-as-pure@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.7.tgz#bb2339a7534a9c128e3102024c60760a3a7f3862"
-  integrity sha512-s6t2w/IPQVTAET1HitoowRGXooX8mCgtuP5195wD/QJPV6wYjpujCGF7JuMODVX2ZAJOf1GT6DT9MHEZvLOFSw==
-  dependencies:
-    "@babel/types" "^7.16.7"
+    "@babel/parser" "^7.26.5"
+    "@babel/types" "^7.26.5"
+    "@jridgewell/gen-mapping" "^0.3.5"
+    "@jridgewell/trace-mapping" "^0.3.25"
+    jsesc "^3.0.2"
 
 "@babel/helper-annotate-as-pure@^7.18.6":
   version "7.18.6"
@@ -182,15 +137,14 @@
   dependencies:
     "@babel/types" "^7.18.6"
 
-"@babel/helper-builder-binary-assignment-operator-visitor@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.18.6.tgz#f14d640ed1ee9246fb33b8255f08353acfe70e6a"
-  integrity sha512-KT10c1oWEpmrIRYnthbzHgoOf6B+Xd6a5yhdbNtdhtG7aO1or5HViuf1TQR36xY/QprXA5nvxO6nAjhJ4y38jw==
+"@babel/helper-annotate-as-pure@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.25.9.tgz#d8eac4d2dc0d7b6e11fa6e535332e0d3184f06b4"
+  integrity sha512-gv7320KBUFJz1RnylIg5WWYPRXKZ884AGkYpgpWW02TH66Dl+HaC1t1CKd0z3R4b6hdYEcmrNZHUmfCP+1u3/g==
   dependencies:
-    "@babel/helper-explode-assignable-expression" "^7.18.6"
-    "@babel/types" "^7.18.6"
+    "@babel/types" "^7.25.9"
 
-"@babel/helper-compilation-targets@^7.17.7", "@babel/helper-compilation-targets@^7.18.9":
+"@babel/helper-compilation-targets@^7.18.9":
   version "7.18.9"
   resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.18.9.tgz#69e64f57b524cde3e5ff6cc5a9f4a387ee5563bf"
   integrity sha512-tzLCyVmqUiFlcFoAPLA/gL9TeYrF61VLNtb+hvkuVaB5SUjW7jcfrglBIX1vUIoT7CLP3bBlIMeyEsIl2eFQNg==
@@ -200,37 +154,29 @@
     browserslist "^4.20.2"
     semver "^6.3.0"
 
-"@babel/helper-compilation-targets@^7.20.0", "@babel/helper-compilation-targets@^7.20.7":
-  version "7.20.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.20.7.tgz#a6cd33e93629f5eb473b021aac05df62c4cd09bb"
-  integrity sha512-4tGORmfQcrc+bvrjb5y3dG9Mx1IOZjsHqQVUz7XCNHO+iTmqxWnVg3KRygjGmpRLJGdQSKuvFinbIb0CnZwHAQ==
+"@babel/helper-compilation-targets@^7.22.6", "@babel/helper-compilation-targets@^7.25.9", "@babel/helper-compilation-targets@^7.26.5":
+  version "7.26.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.26.5.tgz#75d92bb8d8d51301c0d49e52a65c9a7fe94514d8"
+  integrity sha512-IXuyn5EkouFJscIDuFF5EsiSolseme1s0CZB+QxVugqJLYmKdxI1VfIBOst0SUu4rnk2Z7kqTwmoO1lp3HIfnA==
   dependencies:
-    "@babel/compat-data" "^7.20.5"
-    "@babel/helper-validator-option" "^7.18.6"
-    browserslist "^4.21.3"
+    "@babel/compat-data" "^7.26.5"
+    "@babel/helper-validator-option" "^7.25.9"
+    browserslist "^4.24.0"
     lru-cache "^5.1.1"
-    semver "^6.3.0"
+    semver "^6.3.1"
 
-"@babel/helper-create-class-features-plugin@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.18.6.tgz#6f15f8459f3b523b39e00a99982e2c040871ed72"
-  integrity sha512-YfDzdnoxHGV8CzqHGyCbFvXg5QESPFkXlHtvdCkesLjjVMT2Adxe4FGUR5ChIb3DxSaXO12iIOCWoXdsUVwnqw==
+"@babel/helper-create-class-features-plugin@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.25.9.tgz#7644147706bb90ff613297d49ed5266bde729f83"
+  integrity sha512-UTZQMvt0d/rSz6KI+qdu7GQze5TIajwTS++GUozlw8VBJDEOAqSXwm1WvmYEZwqdqSGQshRocPDqrt4HBZB3fQ==
   dependencies:
-    "@babel/helper-annotate-as-pure" "^7.18.6"
-    "@babel/helper-environment-visitor" "^7.18.6"
-    "@babel/helper-function-name" "^7.18.6"
-    "@babel/helper-member-expression-to-functions" "^7.18.6"
-    "@babel/helper-optimise-call-expression" "^7.18.6"
-    "@babel/helper-replace-supers" "^7.18.6"
-    "@babel/helper-split-export-declaration" "^7.18.6"
-
-"@babel/helper-create-regexp-features-plugin@^7.16.7":
-  version "7.17.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.17.0.tgz#1dcc7d40ba0c6b6b25618997c5dbfd310f186fe1"
-  integrity sha512-awO2So99wG6KnlE+TPs6rn83gCz5WlEePJDTnLEqbchMVrBeAujURVphRdigsk094VhvZehFoNOihSlcBjwsXA==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.16.7"
-    regexpu-core "^5.0.1"
+    "@babel/helper-annotate-as-pure" "^7.25.9"
+    "@babel/helper-member-expression-to-functions" "^7.25.9"
+    "@babel/helper-optimise-call-expression" "^7.25.9"
+    "@babel/helper-replace-supers" "^7.25.9"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
+    semver "^6.3.1"
 
 "@babel/helper-create-regexp-features-plugin@^7.18.6":
   version "7.18.6"
@@ -240,67 +186,31 @@
     "@babel/helper-annotate-as-pure" "^7.18.6"
     regexpu-core "^5.1.0"
 
-"@babel/helper-create-regexp-features-plugin@^7.19.0":
-  version "7.19.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.19.0.tgz#7976aca61c0984202baca73d84e2337a5424a41b"
-  integrity sha512-htnV+mHX32DF81amCDrwIDr8nrp1PTm+3wfBN9/v8QJOLEioOCOG7qNyq0nHeFiWbT3Eb7gsPwEmV64UCQ1jzw==
+"@babel/helper-create-regexp-features-plugin@^7.25.9":
+  version "7.26.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.26.3.tgz#5169756ecbe1d95f7866b90bb555b022595302a0"
+  integrity sha512-G7ZRb40uUgdKOQqPLjfD12ZmGA54PzqDFUv2BKImnC9QIfGhIHKvVML0oN8IUiDq4iRqpq74ABpvOaerfWdong==
   dependencies:
-    "@babel/helper-annotate-as-pure" "^7.18.6"
-    regexpu-core "^5.1.0"
+    "@babel/helper-annotate-as-pure" "^7.25.9"
+    regexpu-core "^6.2.0"
+    semver "^6.3.1"
 
-"@babel/helper-define-polyfill-provider@^0.3.3":
-  version "0.3.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.3.3.tgz#8612e55be5d51f0cd1f36b4a5a83924e89884b7a"
-  integrity sha512-z5aQKU4IzbqCC1XH0nAqfsFLMVSo22SBKUc0BxGrLkolTdPTructy0ToNnlO2zA4j9Q/7pjMZf0DSY+DSTYzww==
+"@babel/helper-define-polyfill-provider@^0.6.2", "@babel/helper-define-polyfill-provider@^0.6.3":
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.6.3.tgz#f4f2792fae2ef382074bc2d713522cf24e6ddb21"
+  integrity sha512-HK7Bi+Hj6H+VTHA3ZvBis7V/6hu9QuTrnMXNybfUf2iiuU/N97I8VjB+KbhFF8Rld/Lx5MzoCwPCpPjfK+n8Cg==
   dependencies:
-    "@babel/helper-compilation-targets" "^7.17.7"
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-compilation-targets" "^7.22.6"
+    "@babel/helper-plugin-utils" "^7.22.5"
     debug "^4.1.1"
     lodash.debounce "^4.0.8"
     resolve "^1.14.2"
-    semver "^6.1.2"
-
-"@babel/helper-environment-visitor@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.16.7.tgz#ff484094a839bde9d89cd63cba017d7aae80ecd7"
-  integrity sha512-SLLb0AAn6PkUeAfKJCCOl9e1R53pQlGAfc4y4XuMRZfqeMYLE0dM1LMhqbGAlGQY0lfw5/ohoYWAe9V1yibRag==
-  dependencies:
-    "@babel/types" "^7.16.7"
-
-"@babel/helper-environment-visitor@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.6.tgz#b7eee2b5b9d70602e59d1a6cad7dd24de7ca6cd7"
-  integrity sha512-8n6gSfn2baOY+qlp+VSzsosjCVGFqWKmDF0cCWOybh52Dw3SEyoWR1KrhMJASjLwIEkkAufZ0xvr+SxLHSpy2Q==
 
 "@babel/helper-environment-visitor@^7.18.9":
   version "7.18.9"
   resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.9.tgz#0c0cee9b35d2ca190478756865bb3528422f51be"
   integrity sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==
 
-"@babel/helper-explode-assignable-expression@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.18.6.tgz#41f8228ef0a6f1a036b8dfdfec7ce94f9a6bc096"
-  integrity sha512-eyAYAsQmB80jNfg4baAtLeWAQHfHFiR483rzFK+BhETlGZaQC9bsfrugfXDCbRHLQbIA7U5NxhhOxN7p/dWIcg==
-  dependencies:
-    "@babel/types" "^7.18.6"
-
-"@babel/helper-function-name@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.16.7.tgz#f1ec51551fb1c8956bc8dd95f38523b6cf375f8f"
-  integrity sha512-QfDfEnIUyyBSR3HtrtGECuZ6DAyCkYFp7GHl75vFtTnn6pjKeK0T1DB5lLkFvBea8MdaiUABx3osbgLyInoejA==
-  dependencies:
-    "@babel/helper-get-function-arity" "^7.16.7"
-    "@babel/template" "^7.16.7"
-    "@babel/types" "^7.16.7"
-
-"@babel/helper-function-name@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.18.6.tgz#8334fecb0afba66e6d87a7e8c6bb7fed79926b83"
-  integrity sha512-0mWMxV1aC97dhjCah5U5Ua7668r5ZmSC2DLfH2EZnf9c3/dHZKiFa5pRLMH5tjSl471tY6496ZWk/kjNONBxhw==
-  dependencies:
-    "@babel/template" "^7.18.6"
-    "@babel/types" "^7.18.6"
-
 "@babel/helper-function-name@^7.18.9":
   version "7.18.9"
   resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.18.9.tgz#940e6084a55dee867d33b4e487da2676365e86b0"
@@ -309,36 +219,6 @@
     "@babel/template" "^7.18.6"
     "@babel/types" "^7.18.9"
 
-"@babel/helper-function-name@^7.19.0":
-  version "7.19.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.19.0.tgz#941574ed5390682e872e52d3f38ce9d1bef4648c"
-  integrity sha512-WAwHBINyrpqywkUH0nTnNgI5ina5TFn85HKS0pbPDfxFfhyR/aNQEn4hGi1P1JyT//I0t4OgXUlofzWILRvS5w==
-  dependencies:
-    "@babel/template" "^7.18.10"
-    "@babel/types" "^7.19.0"
-
-"@babel/helper-function-name@^7.21.0":
-  version "7.21.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.21.0.tgz#d552829b10ea9f120969304023cd0645fa00b1b4"
-  integrity sha512-HfK1aMRanKHpxemaY2gqBmL04iAPOPRj7DxtNbiDOrJK+gdwkiNRVpCpUJYbUT+aZyemKN8brqTOxzCaG6ExRg==
-  dependencies:
-    "@babel/template" "^7.20.7"
-    "@babel/types" "^7.21.0"
-
-"@babel/helper-get-function-arity@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.16.7.tgz#ea08ac753117a669f1508ba06ebcc49156387419"
-  integrity sha512-flc+RLSOBXzNzVhcLu6ujeHUrD6tANAOU5ojrRx/as+tbzf8+stUCj7+IfRRoAbEZqj/ahXEMsjhOhgeZsrnTw==
-  dependencies:
-    "@babel/types" "^7.16.7"
-
-"@babel/helper-hoist-variables@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.7.tgz#86bcb19a77a509c7b77d0e22323ef588fa58c246"
-  integrity sha512-m04d/0Op34H5v7pbZw6pSKP7weA6lsMvfiIAMeIvkY/R4xQtBSMFEigu9QTZ2qB/9l22vsxtM8a+Q8CzD255fg==
-  dependencies:
-    "@babel/types" "^7.16.7"
-
 "@babel/helper-hoist-variables@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz#d4d2c8fb4baeaa5c68b99cc8245c56554f926678"
@@ -346,26 +226,13 @@
   dependencies:
     "@babel/types" "^7.18.6"
 
-"@babel/helper-member-expression-to-functions@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.18.6.tgz#44802d7d602c285e1692db0bad9396d007be2afc"
-  integrity sha512-CeHxqwwipekotzPDUuJOfIMtcIHBuc7WAzLmTYWctVigqS5RktNMQ5bEwQSuGewzYnCtTWa3BARXeiLxDTv+Ng==
+"@babel/helper-member-expression-to-functions@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.25.9.tgz#9dfffe46f727005a5ea29051ac835fb735e4c1a3"
+  integrity sha512-wbfdZ9w5vk0C0oyHqAJbc62+vet5prjj01jjJ8sKn3j9h3MQQlflEdXYvuqRWjHnM12coDEqiC1IRCi0U/EKwQ==
   dependencies:
-    "@babel/types" "^7.18.6"
-
-"@babel/helper-member-expression-to-functions@^7.20.7":
-  version "7.20.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.20.7.tgz#a6f26e919582275a93c3aa6594756d71b0bb7f05"
-  integrity sha512-9J0CxJLq315fEdi4s7xK5TQaNYjZw+nDVpVqr1axNGKzdrdwYBD5b4uKv3n75aABG0rCCTK8Im8Ww7eYfMrZgw==
-  dependencies:
-    "@babel/types" "^7.20.7"
-
-"@babel/helper-module-imports@^7.0.0":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.7.4.tgz#e5a92529f8888bf319a6376abfbd1cebc491ad91"
-  integrity sha512-dGcrX6K9l8258WFjyDLJwuVKxR4XZfU0/vTUgOQYWEnRD8mgr+p4d6fCUMq/ys0h4CCt/S5JhbvtyErjWouAUQ==
-  dependencies:
-    "@babel/types" "^7.7.4"
+    "@babel/traverse" "^7.25.9"
+    "@babel/types" "^7.25.9"
 
 "@babel/helper-module-imports@^7.0.0-beta.49":
   version "7.0.0"
@@ -380,19 +247,13 @@
   dependencies:
     "@babel/types" "^7.18.6"
 
-"@babel/helper-module-transforms@^7.18.6":
-  version "7.18.8"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.18.8.tgz#4f8408afead0188cfa48672f9d0e5787b61778c8"
-  integrity sha512-che3jvZwIcZxrwh63VfnFTUzcAM9v/lznYkkRxIBGMPt1SudOKHAEec0SIRCfiuIzTcF7VGj/CaTT6gY4eWxvA==
+"@babel/helper-module-imports@^7.24.7", "@babel/helper-module-imports@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.25.9.tgz#e7f8d20602ebdbf9ebbea0a0751fb0f2a4141715"
+  integrity sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw==
   dependencies:
-    "@babel/helper-environment-visitor" "^7.18.6"
-    "@babel/helper-module-imports" "^7.18.6"
-    "@babel/helper-simple-access" "^7.18.6"
-    "@babel/helper-split-export-declaration" "^7.18.6"
-    "@babel/helper-validator-identifier" "^7.18.6"
-    "@babel/template" "^7.18.6"
-    "@babel/traverse" "^7.18.8"
-    "@babel/types" "^7.18.8"
+    "@babel/traverse" "^7.25.9"
+    "@babel/types" "^7.25.9"
 
 "@babel/helper-module-transforms@^7.18.9":
   version "7.18.9"
@@ -408,127 +269,54 @@
     "@babel/traverse" "^7.18.9"
     "@babel/types" "^7.18.9"
 
-"@babel/helper-module-transforms@^7.19.6":
-  version "7.19.6"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.19.6.tgz#6c52cc3ac63b70952d33ee987cbee1c9368b533f"
-  integrity sha512-fCmcfQo/KYr/VXXDIyd3CBGZ6AFhPFy1TfSEJ+PilGVlQT6jcbqtHAM4C1EciRqMza7/TpOUZliuSH+U6HAhJw==
+"@babel/helper-module-transforms@^7.25.9", "@babel/helper-module-transforms@^7.26.0":
+  version "7.26.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.26.0.tgz#8ce54ec9d592695e58d84cd884b7b5c6a2fdeeae"
+  integrity sha512-xO+xu6B5K2czEnQye6BHA7DolFFmS3LB7stHZFaOLb1pAwO1HWLS8fXA+eh0A2yIvltPVmx3eNNDBJA2SLHXFw==
   dependencies:
-    "@babel/helper-environment-visitor" "^7.18.9"
-    "@babel/helper-module-imports" "^7.18.6"
-    "@babel/helper-simple-access" "^7.19.4"
-    "@babel/helper-split-export-declaration" "^7.18.6"
-    "@babel/helper-validator-identifier" "^7.19.1"
-    "@babel/template" "^7.18.10"
-    "@babel/traverse" "^7.19.6"
-    "@babel/types" "^7.19.4"
+    "@babel/helper-module-imports" "^7.25.9"
+    "@babel/helper-validator-identifier" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
 
-"@babel/helper-module-transforms@^7.20.7":
-  version "7.20.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.20.7.tgz#7a6c9a1155bef55e914af574153069c9d9470c43"
-  integrity sha512-FNdu7r67fqMUSVuQpFQGE6BPdhJIhitoxhGzDbAXNcA07uoVG37fOiMk3OSV8rEICuyG6t8LGkd9EE64qIEoIA==
+"@babel/helper-optimise-call-expression@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.25.9.tgz#3324ae50bae7e2ab3c33f60c9a877b6a0146b54e"
+  integrity sha512-FIpuNaz5ow8VyrYcnXQTDRGvV6tTjkNtCK/RYNDXGSLlUD6cBuQTSw43CShGxjvfBTfcUA/r6UhUCbtYqkhcuQ==
   dependencies:
-    "@babel/helper-environment-visitor" "^7.18.9"
-    "@babel/helper-module-imports" "^7.18.6"
-    "@babel/helper-simple-access" "^7.20.2"
-    "@babel/helper-split-export-declaration" "^7.18.6"
-    "@babel/helper-validator-identifier" "^7.19.1"
-    "@babel/template" "^7.20.7"
-    "@babel/traverse" "^7.20.7"
-    "@babel/types" "^7.20.7"
-
-"@babel/helper-module-transforms@^7.21.0":
-  version "7.21.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.21.0.tgz#89a8f86ad748870e3d024e470b2e8405e869db67"
-  integrity sha512-eD/JQ21IG2i1FraJnTMbUarAUkA7G988ofehG5MDCRXaUU91rEBJuCeSoou2Sk1y4RbLYXzqEg1QLwEmRU4qcQ==
-  dependencies:
-    "@babel/helper-environment-visitor" "^7.18.9"
-    "@babel/helper-module-imports" "^7.18.6"
-    "@babel/helper-simple-access" "^7.20.2"
-    "@babel/helper-split-export-declaration" "^7.18.6"
-    "@babel/helper-validator-identifier" "^7.19.1"
-    "@babel/template" "^7.20.7"
-    "@babel/traverse" "^7.21.0"
-    "@babel/types" "^7.21.0"
-
-"@babel/helper-optimise-call-expression@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.18.6.tgz#9369aa943ee7da47edab2cb4e838acf09d290ffe"
-  integrity sha512-HP59oD9/fEHQkdcbgFCnbmgH5vIQTJbxh2yf+CdM89/glUNnuzr87Q8GIjGEnOktTROemO0Pe0iPAYbqZuOUiA==
-  dependencies:
-    "@babel/types" "^7.18.6"
+    "@babel/types" "^7.25.9"
 
 "@babel/helper-plugin-utils@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.0.0.tgz#bbb3fbee98661c569034237cc03967ba99b4f250"
   integrity sha512-CYAOUCARwExnEixLdB6sDm2dIJ/YgEAKDM1MOeMeZu9Ld/bDgVo8aiWrXwcY7OBh+1Ea2uUcVRcxKk0GJvW7QA==
 
-"@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.16.7", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz#aa3a8ab4c3cceff8e65eb9e73d87dc4ff320b2f5"
-  integrity sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA==
-
 "@babel/helper-plugin-utils@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.18.6.tgz#9448974dd4fb1d80fefe72e8a0af37809cd30d6d"
   integrity sha512-gvZnm1YAAxh13eJdkb9EWHBnF3eAub3XTLCZEehHT2kWxiKVRL64+ae5Y6Ivne0mVHmMYKT+xWgZO+gQhuLUBg==
 
-"@babel/helper-plugin-utils@^7.18.9":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.18.9.tgz#4b8aea3b069d8cb8a72cdfe28ddf5ceca695ef2f"
-  integrity sha512-aBXPT3bmtLryXaoJLyYPXPlSD4p1ld9aYeR+sJNOZjJJGiOpb+fKfh3NkcCu7J54nUJwCERPBExCCpyCOHnu/w==
+"@babel/helper-plugin-utils@^7.22.5", "@babel/helper-plugin-utils@^7.24.8", "@babel/helper-plugin-utils@^7.25.9", "@babel/helper-plugin-utils@^7.26.5":
+  version "7.26.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.26.5.tgz#18580d00c9934117ad719392c4f6585c9333cc35"
+  integrity sha512-RS+jZcRdZdRFzMyr+wcsaqOmld1/EqTghfaBGQQd/WnRdzdlvSZ//kF7U8VQTxf1ynZ4cjUcYgjVGx13ewNPMg==
 
-"@babel/helper-plugin-utils@^7.19.0":
-  version "7.19.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.19.0.tgz#4796bb14961521f0f8715990bee2fb6e51ce21bf"
-  integrity sha512-40Ryx7I8mT+0gaNxm8JGTZFUITNqdLAgdg0hXzeVZxVD6nFsdhQvip6v8dqkRHzsz1VFpFAaOCHNn0vKBL7Czw==
-
-"@babel/helper-plugin-utils@^7.20.2":
-  version "7.20.2"
-  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.20.2.tgz#d1b9000752b18d0877cff85a5c376ce5c3121629"
-  integrity sha512-8RvlJG2mj4huQ4pZ+rU9lqKi9ZKiRmuvGuM2HlWmkmgOhbs6zEAw6IEiJ5cQqGbDzGZOhwuOQNtZMi/ENLjZoQ==
-
-"@babel/helper-remap-async-to-generator@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.18.6.tgz#fa1f81acd19daee9d73de297c0308783cd3cfc23"
-  integrity sha512-z5wbmV55TveUPZlCLZvxWHtrjuJd+8inFhk7DG0WW87/oJuGDcjDiu7HIvGcpf5464L6xKCg3vNkmlVVz9hwyQ==
+"@babel/helper-remap-async-to-generator@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.25.9.tgz#e53956ab3d5b9fb88be04b3e2f31b523afd34b92"
+  integrity sha512-IZtukuUeBbhgOcaW2s06OXTzVNJR0ybm4W5xC1opWFFJMZbwRj5LCk+ByYH7WdZPZTt8KnFwA8pvjN2yqcPlgw==
   dependencies:
-    "@babel/helper-annotate-as-pure" "^7.18.6"
-    "@babel/helper-environment-visitor" "^7.18.6"
-    "@babel/helper-wrap-function" "^7.18.6"
-    "@babel/types" "^7.18.6"
+    "@babel/helper-annotate-as-pure" "^7.25.9"
+    "@babel/helper-wrap-function" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
 
-"@babel/helper-remap-async-to-generator@^7.18.9":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.18.9.tgz#997458a0e3357080e54e1d79ec347f8a8cd28519"
-  integrity sha512-dI7q50YKd8BAv3VEfgg7PS7yD3Rtbi2J1XMXaalXO0W0164hYLnh8zpjRS0mte9MfVp/tltvr/cfdXPvJr1opA==
+"@babel/helper-replace-supers@^7.25.9":
+  version "7.26.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.26.5.tgz#6cb04e82ae291dae8e72335dfe438b0725f14c8d"
+  integrity sha512-bJ6iIVdYX1YooY2X7w1q6VITt+LnUILtNk7zT78ykuwStx8BauCzxvFqFaHjOpW1bVnSUM1PN1f0p5P21wHxvg==
   dependencies:
-    "@babel/helper-annotate-as-pure" "^7.18.6"
-    "@babel/helper-environment-visitor" "^7.18.9"
-    "@babel/helper-wrap-function" "^7.18.9"
-    "@babel/types" "^7.18.9"
-
-"@babel/helper-replace-supers@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.18.6.tgz#efedf51cfccea7b7b8c0f00002ab317e7abfe420"
-  integrity sha512-fTf7zoXnUGl9gF25fXCWE26t7Tvtyn6H4hkLSYhATwJvw2uYxd3aoXplMSe0g9XbwK7bmxNes7+FGO0rB/xC0g==
-  dependencies:
-    "@babel/helper-environment-visitor" "^7.18.6"
-    "@babel/helper-member-expression-to-functions" "^7.18.6"
-    "@babel/helper-optimise-call-expression" "^7.18.6"
-    "@babel/traverse" "^7.18.6"
-    "@babel/types" "^7.18.6"
-
-"@babel/helper-replace-supers@^7.20.7":
-  version "7.20.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.20.7.tgz#243ecd2724d2071532b2c8ad2f0f9f083bcae331"
-  integrity sha512-vujDMtB6LVfNW13jhlCrp48QNslK6JXi7lQG736HVbHz/mbf4Dc7tIRh1Xf5C0rF7BP8iiSxGMCmY6Ci1ven3A==
-  dependencies:
-    "@babel/helper-environment-visitor" "^7.18.9"
-    "@babel/helper-member-expression-to-functions" "^7.20.7"
-    "@babel/helper-optimise-call-expression" "^7.18.6"
-    "@babel/template" "^7.20.7"
-    "@babel/traverse" "^7.20.7"
-    "@babel/types" "^7.20.7"
+    "@babel/helper-member-expression-to-functions" "^7.25.9"
+    "@babel/helper-optimise-call-expression" "^7.25.9"
+    "@babel/traverse" "^7.26.5"
 
 "@babel/helper-simple-access@^7.18.6":
   version "7.18.6"
@@ -537,33 +325,13 @@
   dependencies:
     "@babel/types" "^7.18.6"
 
-"@babel/helper-simple-access@^7.19.4":
-  version "7.19.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.19.4.tgz#be553f4951ac6352df2567f7daa19a0ee15668e7"
-  integrity sha512-f9Xq6WqBFqaDfbCzn2w85hwklswz5qsKlh7f08w4Y9yhJHpnNC0QemtSkK5YyOY8kPGvyiwdzZksGUhnGdaUIg==
+"@babel/helper-skip-transparent-expression-wrappers@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.25.9.tgz#0b2e1b62d560d6b1954893fd2b705dc17c91f0c9"
+  integrity sha512-K4Du3BFa3gvyhzgPcntrkDgZzQaq6uozzcpGbOO1OEJaI+EJdqWIMTLgFgQf6lrfiDFo5FU+BxKepI9RmZqahA==
   dependencies:
-    "@babel/types" "^7.19.4"
-
-"@babel/helper-simple-access@^7.20.2":
-  version "7.20.2"
-  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.20.2.tgz#0ab452687fe0c2cfb1e2b9e0015de07fc2d62dd9"
-  integrity sha512-+0woI/WPq59IrqDYbVGfshjT5Dmk/nnbdpcF8SnMhhXObpTq2KNBdLFRFrkVdbDOyUmHBCxzm5FHV1rACIkIbA==
-  dependencies:
-    "@babel/types" "^7.20.2"
-
-"@babel/helper-skip-transparent-expression-wrappers@^7.18.9":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.18.9.tgz#778d87b3a758d90b471e7b9918f34a9a02eb5818"
-  integrity sha512-imytd2gHi3cJPsybLRbmFrF7u5BIEuI2cNheyKi3/iOBC63kNn3q8Crn2xVuESli0aM4KYsyEqKyS7lFL8YVtw==
-  dependencies:
-    "@babel/types" "^7.18.9"
-
-"@babel/helper-split-export-declaration@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.7.tgz#0b648c0c42da9d3920d85ad585f2778620b8726b"
-  integrity sha512-xbWoy/PFoxSWazIToT9Sif+jJTlrMcndIsaOKvTA6u7QEo7ilkRZpjew18/W3c7nm8fXdUDXh02VXTbZ0pGDNw==
-  dependencies:
-    "@babel/types" "^7.16.7"
+    "@babel/traverse" "^7.25.9"
+    "@babel/types" "^7.25.9"
 
 "@babel/helper-split-export-declaration@^7.18.6":
   version "7.18.6"
@@ -577,10 +345,10 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.18.10.tgz#181f22d28ebe1b3857fa575f5c290b1aaf659b56"
   integrity sha512-XtIfWmeNY3i4t7t4D2t02q50HvqHybPqW2ki1kosnvWCwuCMeo81Jf0gwr85jy/neUdg5XDdeFE/80DXiO+njw==
 
-"@babel/helper-string-parser@^7.19.4":
-  version "7.19.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz#38d3acb654b4701a9b77fb0615a96f775c3a9e63"
-  integrity sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==
+"@babel/helper-string-parser@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz#1aabb72ee72ed35789b4bbcad3ca2862ce614e8c"
+  integrity sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==
 
 "@babel/helper-validator-identifier@^7.16.7":
   version "7.16.7"
@@ -592,35 +360,29 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.18.6.tgz#9c97e30d31b2b8c72a1d08984f2ca9b574d7a076"
   integrity sha512-MmetCkz9ej86nJQV+sFCxoGGrUbU3q02kgLciwkrt9QqEB7cP39oKEY0PakknEO0Gu20SskMRi+AYZ3b1TpN9g==
 
-"@babel/helper-validator-identifier@^7.19.1":
-  version "7.19.1"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz#7eea834cf32901ffdc1a7ee555e2f9c27e249ca2"
-  integrity sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==
+"@babel/helper-validator-identifier@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz#24b64e2c3ec7cd3b3c547729b8d16871f22cbdc7"
+  integrity sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==
 
 "@babel/helper-validator-option@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.18.6.tgz#bf0d2b5a509b1f336099e4ff36e1a63aa5db4db8"
   integrity sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw==
 
-"@babel/helper-wrap-function@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.18.6.tgz#ec44ea4ad9d8988b90c3e465ba2382f4de81a073"
-  integrity sha512-I5/LZfozwMNbwr/b1vhhuYD+J/mU+gfGAj5td7l5Rv9WYmH6i3Om69WGKNmlIpsVW/mF6O5bvTKbvDQZVgjqOw==
-  dependencies:
-    "@babel/helper-function-name" "^7.18.6"
-    "@babel/template" "^7.18.6"
-    "@babel/traverse" "^7.18.6"
-    "@babel/types" "^7.18.6"
+"@babel/helper-validator-option@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.25.9.tgz#86e45bd8a49ab7e03f276577f96179653d41da72"
+  integrity sha512-e/zv1co8pp55dNdEcCynfj9X7nyUKUXoUEwfXqaZt0omVOmDe9oOTdKStH4GmAw6zxMFs50ZayuMfHDKlO7Tfw==
 
-"@babel/helper-wrap-function@^7.18.9":
-  version "7.18.10"
-  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.18.10.tgz#a7fcd3ab9b1be4c9b52cf7d7fdc1e88c2ce93396"
-  integrity sha512-95NLBP59VWdfK2lyLKe6eTMq9xg+yWKzxzxbJ1wcYNi1Auz200+83fMDADjRxBvc2QQor5zja2yTQzXGhk2GtQ==
+"@babel/helper-wrap-function@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.25.9.tgz#d99dfd595312e6c894bd7d237470025c85eea9d0"
+  integrity sha512-ETzz9UTjQSTmw39GboatdymDq4XIQbR8ySgVrylRhPOFpsd+JrKHIuF0de7GCWmem+T4uC5z7EZguod7Wj4A4g==
   dependencies:
-    "@babel/helper-function-name" "^7.18.9"
-    "@babel/template" "^7.18.10"
-    "@babel/traverse" "^7.18.10"
-    "@babel/types" "^7.18.10"
+    "@babel/template" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
+    "@babel/types" "^7.25.9"
 
 "@babel/helpers@^7.18.9":
   version "7.18.9"
@@ -631,14 +393,13 @@
     "@babel/traverse" "^7.18.9"
     "@babel/types" "^7.18.9"
 
-"@babel/helpers@^7.21.0":
-  version "7.21.0"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.21.0.tgz#9dd184fb5599862037917cdc9eecb84577dc4e7e"
-  integrity sha512-XXve0CBtOW0pd7MRzzmoyuSj0e3SEzj8pgyFxnTT1NJZL38BD1MK7yYrm8yefRPIDvNNe14xR4FdbHwpInD4rA==
+"@babel/helpers@^7.26.7":
+  version "7.26.7"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.26.7.tgz#fd1d2a7c431b6e39290277aacfd8367857c576a4"
+  integrity sha512-8NHiL98vsi0mbPQmYAGWwfcFaOy4j2HY49fXJCfuDcdE7fMIsH9a7GdaeXpIBsbT7307WU8KCMp5pUVDNL4f9A==
   dependencies:
-    "@babel/template" "^7.20.7"
-    "@babel/traverse" "^7.21.0"
-    "@babel/types" "^7.21.0"
+    "@babel/template" "^7.25.9"
+    "@babel/types" "^7.26.7"
 
 "@babel/highlight@^7.0.0":
   version "7.0.0"
@@ -648,15 +409,6 @@
     esutils "^2.0.2"
     js-tokens "^4.0.0"
 
-"@babel/highlight@^7.16.7":
-  version "7.16.10"
-  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.16.10.tgz#744f2eb81579d6eea753c227b0f570ad785aba88"
-  integrity sha512-5FnTQLSLswEj6IkgVw5KusNUUFY9ZGqe/TRFnP/BKYHYgfh7tc+C7mwiy95/yNP7Dh9x580Vv8r7u7ZfTBFxdw==
-  dependencies:
-    "@babel/helper-validator-identifier" "^7.16.7"
-    chalk "^2.0.0"
-    js-tokens "^4.0.0"
-
 "@babel/highlight@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.18.6.tgz#81158601e93e2563795adcbfbdf5d64be3f2ecdf"
@@ -671,22 +423,12 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.18.11.tgz#68bb07ab3d380affa9a3f96728df07969645d2d9"
   integrity sha512-9JKn5vN+hDt0Hdqn1PiJ2guflwP+B6Ga8qbDuoF0PzzVhrzsKIJo8yGqVk6CmMHiMei9w1C1Bp9IMJSIK+HPIQ==
 
-"@babel/parser@^7.16.4":
-  version "7.17.8"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.17.8.tgz#2817fb9d885dd8132ea0f8eb615a6388cca1c240"
-  integrity sha512-BoHhDJrJXqcg+ZL16Xv39H9n+AqJ4pcDrQBGZN+wHxIysrLZ3/ECwCBUch/1zUNhnsXULcONU3Ei5Hmkfk6kiQ==
-
-"@babel/parser@^7.16.7", "@babel/parser@^7.17.3":
-  version "7.17.7"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.17.7.tgz#fc19b645a5456c8d6fdb6cecd3c66c0173902800"
-  integrity sha512-bm3AQf45vR4gKggRfvJdYJ0gFLoCbsPxiFLSH6hTVYABptNHY6l9NrhnucVjQ/X+SPtLANT9lc0fFhikj+VBRA==
-
 "@babel/parser@^7.18.10":
   version "7.18.10"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.18.10.tgz#94b5f8522356e69e8277276adf67ed280c90ecc1"
   integrity sha512-TYk3OA0HKL6qNryUayb5UUEhM/rkOQozIBEA5ITXh5DWrSp0TlUQXMyZmnWxG/DizSWBeeQ0Zbc5z8UGaaqoeg==
 
-"@babel/parser@^7.18.6", "@babel/parser@^7.18.8":
+"@babel/parser@^7.18.6":
   version "7.18.8"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.18.8.tgz#822146080ac9c62dac0823bb3489622e0bc1cbdf"
   integrity sha512-RSKRfYX20dyH+elbJK2uqAkVyucL+xXzhqlMD5/ZXx+dAAwpyB7HsvnHe/ZUGOF+xLr5Wx9/JoXVTj6BQE2/oA==
@@ -696,665 +438,593 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.18.9.tgz#f2dde0c682ccc264a9a8595efd030a5cc8fd2539"
   integrity sha512-9uJveS9eY9DJ0t64YbIBZICtJy8a5QrDEVdiLCG97fVLpDTpGX7t8mMSb6OWw6Lrnjqj4O8zwjELX3dhoMgiBg==
 
-"@babel/parser@^7.20.0":
-  version "7.20.0"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.20.0.tgz#b26133c888da4d79b0d3edcf42677bcadc783046"
-  integrity sha512-G9VgAhEaICnz8iiJeGJQyVl6J2nTjbW0xeisva0PK6XcKsga7BIaqm4ZF8Rg1Wbaqmy6znspNqhPaPkyukujzg==
+"@babel/parser@^7.25.3", "@babel/parser@^7.25.6", "@babel/parser@^7.25.9", "@babel/parser@^7.26.5":
+  version "7.26.5"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.26.5.tgz#6fec9aebddef25ca57a935c86dbb915ae2da3e1f"
+  integrity sha512-SRJ4jYmXRqV1/Xc+TIVG84WjHBXKlxO9sHQnA2Pf12QQEAp1LOh6kDzNHXcUnbH1QI0FDoPPVOt+vyUDucxpaw==
+  dependencies:
+    "@babel/types" "^7.26.5"
 
-"@babel/parser@^7.20.7":
-  version "7.20.7"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.20.7.tgz#66fe23b3c8569220817d5feb8b9dcdc95bb4f71b"
-  integrity sha512-T3Z9oHybU+0vZlY9CiDSJQTD5ZapcW18ZctFMi0MOAl/4BjFF4ul7NVSARLdbGO5vDqy9eQiGTV0LtKfvCYvcg==
+"@babel/parser@^7.26.7":
+  version "7.26.7"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.26.7.tgz#e114cd099e5f7d17b05368678da0fb9f69b3385c"
+  integrity sha512-kEvgGGgEjRUutvdVvZhbn/BxVt+5VSpwXz1j3WYXQbXDo8KzFOPNG2GQbdAiNq8g6wn1yKk7C/qrke03a84V+w==
+  dependencies:
+    "@babel/types" "^7.26.7"
 
-"@babel/parser@^7.21.0":
-  version "7.21.1"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.21.1.tgz#a8f81ee2fe872af23faea4b17a08fcc869de7bcc"
-  integrity sha512-JzhBFpkuhBNYUY7qs+wTzNmyCWUHEaAFpQQD2YfU1rPL38/L43Wvid0fFkiOCnHvsGncRZgEPyGnltABLcVDTg==
+"@babel/plugin-bugfix-firefox-class-in-computed-class-key@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-firefox-class-in-computed-class-key/-/plugin-bugfix-firefox-class-in-computed-class-key-7.25.9.tgz#cc2e53ebf0a0340777fff5ed521943e253b4d8fe"
+  integrity sha512-ZkRyVkThtxQ/J6nv3JFYv1RYY+JT5BvU0y3k5bWrmuG4woXypRa4PXmm9RhOwodRkYFWqC0C0cqcJ4OqR7kW+g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
 
-"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.18.6":
+"@babel/plugin-bugfix-safari-class-field-initializer-scope@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-class-field-initializer-scope/-/plugin-bugfix-safari-class-field-initializer-scope-7.25.9.tgz#af9e4fb63ccb8abcb92375b2fcfe36b60c774d30"
+  integrity sha512-MrGRLZxLD/Zjj0gdU15dfs+HH/OXvnw/U4jJD8vpcP2CJQapPEv1IWwjc/qMg7ItBlPwSv1hRBbb7LeuANdcnw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.25.9.tgz#e8dc26fcd616e6c5bf2bd0d5a2c151d4f92a9137"
+  integrity sha512-2qUwwfAFpJLZqxd02YW9btUCZHl+RFvdDkNfZwaIJrvB8Tesjsk8pEQkTvGwZXLqXUx/2oyY3ySRhm6HOXuCug==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.25.9.tgz#807a667f9158acac6f6164b4beb85ad9ebc9e1d1"
+  integrity sha512-6xWgLZTJXwilVjlnV7ospI3xi+sl8lN8rXXbBD6vYn3UYDlGsag8wrZkKcSI8G6KgqKP7vNFaDgeDnfAABq61g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.25.9"
+    "@babel/plugin-transform-optional-chaining" "^7.25.9"
+
+"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/-/plugin-bugfix-v8-static-class-fields-redefine-readonly-7.25.9.tgz#de7093f1e7deaf68eadd7cc6b07f2ab82543269e"
+  integrity sha512-aLnMXYPnzwwqhYSCyXfKkIkYgJ8zv9RK+roo9DkTXz38ynIhd9XCbN08s3MGvqL2MYGVUGdRQLL/JqBIeJhJBg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
+
+"@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2":
+  version "7.21.0-placeholder-for-preset-env.2"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz#7844f9289546efa9febac2de4cfe358a050bd703"
+  integrity sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==
+
+"@babel/plugin-syntax-import-assertions@^7.26.0":
+  version "7.26.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.26.0.tgz#620412405058efa56e4a564903b79355020f445f"
+  integrity sha512-QCWT5Hh830hK5EQa7XzuqIkQU9tT/whqbDz7kuaZMHFl1inRRg7JnuAEOQ0Ur0QUl0NufCk1msK2BeY79Aj/eg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-syntax-import-attributes@^7.26.0":
+  version "7.26.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.26.0.tgz#3b1412847699eea739b4f2602c74ce36f6b0b0f7"
+  integrity sha512-e2dttdsJ1ZTpi3B9UYGLw41hifAubg19AtCu/2I/F1QNVclOBr1dYpTdmdyZ84Xiz43BS/tCUkMAZNLv12Pi+A==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-syntax-jsx@^7.24.7":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.25.9.tgz#a34313a178ea56f1951599b929c1ceacee719290"
+  integrity sha512-ld6oezHQMZsZfp6pWtbjaNDF2tiiCYYDqQszHt5VV437lewP9aSi2Of99CK0D0XB21k7FLgnLcmQKyKzynfeAA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-syntax-unicode-sets-regex@^7.18.6":
   version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.18.6.tgz#da5b8f9a580acdfbe53494dba45ea389fb09a4d2"
-  integrity sha512-Dgxsyg54Fx1d4Nge8UnvTrED63vrwOdPmyvPzlNN/boaliRP54pm3pGzZD1SJUwrBA+Cs/xdG8kXX6Mn/RfISQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
-
-"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.18.9":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.18.9.tgz#a11af19aa373d68d561f08e0a57242350ed0ec50"
-  integrity sha512-AHrP9jadvH7qlOj6PINbgSuphjQUAK7AOT7DPjBo9EHoLhQTnnK5u45e1Hd4DbSQEO9nqPWtQ89r+XEOWFScKg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.9"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.18.9"
-    "@babel/plugin-proposal-optional-chaining" "^7.18.9"
-
-"@babel/plugin-proposal-async-generator-functions@^7.20.1":
-  version "7.20.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.20.7.tgz#bfb7276d2d573cb67ba379984a2334e262ba5326"
-  integrity sha512-xMbiLsn/8RK7Wq7VeVytytS2L6qE69bXPB10YCmMdDZbKF4okCqY74pI/jJQ/8U0b/F6NrT2+14b8/P9/3AMGA==
-  dependencies:
-    "@babel/helper-environment-visitor" "^7.18.9"
-    "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/helper-remap-async-to-generator" "^7.18.9"
-    "@babel/plugin-syntax-async-generators" "^7.8.4"
-
-"@babel/plugin-proposal-class-properties@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.18.6.tgz#b110f59741895f7ec21a6fff696ec46265c446a3"
-  integrity sha512-cumfXOF0+nzZrrN8Rf0t7M+tF6sZc7vhQwYQck9q1/5w2OExlD+b4v4RpMJFaV1Z7WcDRgO6FqvxqxGlwo+RHQ==
-  dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.18.6"
-
-"@babel/plugin-proposal-class-static-block@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.18.6.tgz#8aa81d403ab72d3962fc06c26e222dacfc9b9020"
-  integrity sha512-+I3oIiNxrCpup3Gi8n5IGMwj0gOCAjcJUSQEcotNnCCPMEnixawOQ+KeJPlgfjzx+FKQ1QSyZOWe7wmoJp7vhw==
-  dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.18.6"
-    "@babel/plugin-syntax-class-static-block" "^7.14.5"
-
-"@babel/plugin-proposal-dynamic-import@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.18.6.tgz#72bcf8d408799f547d759298c3c27c7e7faa4d94"
-  integrity sha512-1auuwmK+Rz13SJj36R+jqFPMJWyKEDd7lLSdOj4oJK0UTgGueSAtkrCvz9ewmgyU/P941Rv2fQwZJN8s6QruXw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
-    "@babel/plugin-syntax-dynamic-import" "^7.8.3"
-
-"@babel/plugin-proposal-export-namespace-from@^7.18.9":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.18.9.tgz#5f7313ab348cdb19d590145f9247540e94761203"
-  integrity sha512-k1NtHyOMvlDDFeb9G5PhUXuGj8m/wiwojgQVEhJ/fsVsMCpLyOP4h0uGEjYJKrRI+EVPlb5Jk+Gt9P97lOGwtA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.9"
-    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
-
-"@babel/plugin-proposal-json-strings@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.18.6.tgz#7e8788c1811c393aff762817e7dbf1ebd0c05f0b"
-  integrity sha512-lr1peyn9kOdbYc0xr0OdHTZ5FMqS6Di+H0Fz2I/JwMzGmzJETNeOFq2pBySw6X/KFL5EWDjlJuMsUGRFb8fQgQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
-    "@babel/plugin-syntax-json-strings" "^7.8.3"
-
-"@babel/plugin-proposal-logical-assignment-operators@^7.18.9":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.18.9.tgz#8148cbb350483bf6220af06fa6db3690e14b2e23"
-  integrity sha512-128YbMpjCrP35IOExw2Fq+x55LMP42DzhOhX2aNNIdI9avSWl2PI0yuBWarr3RYpZBSPtabfadkH2yeRiMD61Q==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.9"
-    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
-
-"@babel/plugin-proposal-nullish-coalescing-operator@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.18.6.tgz#fdd940a99a740e577d6c753ab6fbb43fdb9467e1"
-  integrity sha512-wQxQzxYeJqHcfppzBDnm1yAY0jSRkUXR2z8RePZYrKwMKgMlE8+Z6LUno+bd6LvbGh8Gltvy74+9pIYkr+XkKA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
-    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
-
-"@babel/plugin-proposal-numeric-separator@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.18.6.tgz#899b14fbafe87f053d2c5ff05b36029c62e13c75"
-  integrity sha512-ozlZFogPqoLm8WBr5Z8UckIoE4YQ5KESVcNudyXOR8uqIkliTEgJ3RoketfG6pmzLdeZF0H/wjE9/cCEitBl7Q==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
-    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
-
-"@babel/plugin-proposal-object-rest-spread@^7.20.2":
-  version "7.20.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.20.7.tgz#aa662940ef425779c75534a5c41e9d936edc390a"
-  integrity sha512-d2S98yCiLxDVmBmE8UjGcfPvNEUbA1U5q5WxaWFUGRzJSVAZqm5W6MbPct0jxnegUZ0niLeNX+IOzEs7wYg9Dg==
-  dependencies:
-    "@babel/compat-data" "^7.20.5"
-    "@babel/helper-compilation-targets" "^7.20.7"
-    "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
-    "@babel/plugin-transform-parameters" "^7.20.7"
-
-"@babel/plugin-proposal-optional-catch-binding@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.18.6.tgz#f9400d0e6a3ea93ba9ef70b09e72dd6da638a2cb"
-  integrity sha512-Q40HEhs9DJQyaZfUjjn6vE8Cv4GmMHCYuMGIWUnlxH6400VGxOuwWsPt4FxXxJkC/5eOzgn0z21M9gMT4MOhbw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
-    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
-
-"@babel/plugin-proposal-optional-chaining@^7.18.9":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.18.9.tgz#e8e8fe0723f2563960e4bf5e9690933691915993"
-  integrity sha512-v5nwt4IqBXihxGsW2QmCWMDS3B3bzGIk/EQVZz2ei7f3NJl8NzAJVvUmpDW5q1CRNY+Beb/k58UAH1Km1N411w==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.9"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.18.9"
-    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
-
-"@babel/plugin-proposal-private-methods@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.18.6.tgz#5209de7d213457548a98436fa2882f52f4be6bea"
-  integrity sha512-nutsvktDItsNn4rpGItSNV2sz1XwS+nfU0Rg8aCx3W3NOKVzdMjJRu0O5OkgDp3ZGICSTbgRpxZoWsxoKRvbeA==
-  dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.18.6"
-
-"@babel/plugin-proposal-private-property-in-object@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.18.6.tgz#a64137b232f0aca3733a67eb1a144c192389c503"
-  integrity sha512-9Rysx7FOctvT5ouj5JODjAFAkgGoudQuLPamZb0v1TGLpapdNaftzifU8NTWQm0IRjqoYypdrSmyWgkocDQ8Dw==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.18.6"
-    "@babel/helper-create-class-features-plugin" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.18.6"
-    "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
-
-"@babel/plugin-proposal-unicode-property-regex@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.18.6.tgz#af613d2cd5e643643b65cded64207b15c85cb78e"
-  integrity sha512-2BShG/d5yoZyXZfVePH91urL5wTG6ASZU9M4o03lKK8u8UW1y08OMttBSOADTcJrnPMpvDXRG3G8fyLh4ovs8w==
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-unicode-sets-regex/-/plugin-syntax-unicode-sets-regex-7.18.6.tgz#d49a3b3e6b52e5be6740022317580234a6a47357"
+  integrity sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==
   dependencies:
     "@babel/helper-create-regexp-features-plugin" "^7.18.6"
     "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-proposal-unicode-property-regex@^7.4.4":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.16.7.tgz#635d18eb10c6214210ffc5ff4932552de08188a2"
-  integrity sha512-QRK0YI/40VLhNVGIjRNAAQkEHws0cswSdFFjpFyt943YmJIU1da9uW63Iu6NFV6CxTZW5eTDCrwZUstBWgp/Rg==
+"@babel/plugin-transform-arrow-functions@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.25.9.tgz#7821d4410bee5daaadbb4cdd9a6649704e176845"
+  integrity sha512-6jmooXYIwn9ca5/RylZADJ+EnSxVUS5sjeJ9UPk6RWRzXCmOJCy6dqItPJFpw2cuCangPK4OYr5uhGKcmrm5Qg==
   dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.16.7"
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-syntax-async-generators@^7.8.4":
-  version "7.8.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz#a983fb1aeb2ec3f6ed042a210f640e90e786fe0d"
-  integrity sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==
+"@babel/plugin-transform-async-generator-functions@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.25.9.tgz#1b18530b077d18a407c494eb3d1d72da505283a2"
+  integrity sha512-RXV6QAzTBbhDMO9fWwOmwwTuYaiPbggWQ9INdZqAYeSHyG7FzQ+nOZaUUjNwKv9pV3aE4WFqFm1Hnbci5tBCAw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.8.0"
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-remap-async-to-generator" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
 
-"@babel/plugin-syntax-class-properties@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz#b5c987274c4a3a82b89714796931a6b53544ae10"
-  integrity sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==
+"@babel/plugin-transform-async-to-generator@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.25.9.tgz#c80008dacae51482793e5a9c08b39a5be7e12d71"
+  integrity sha512-NT7Ejn7Z/LjUH0Gv5KsBCxh7BH3fbLTV0ptHvpeMvrt3cPThHfJfst9Wrb7S8EvJ7vRTFI7z+VAvFVEQn/m5zQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.12.13"
+    "@babel/helper-module-imports" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-remap-async-to-generator" "^7.25.9"
 
-"@babel/plugin-syntax-class-static-block@^7.14.5":
-  version "7.14.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-class-static-block/-/plugin-syntax-class-static-block-7.14.5.tgz#195df89b146b4b78b3bf897fd7a257c84659d406"
-  integrity sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==
+"@babel/plugin-transform-block-scoped-functions@^7.26.5":
+  version "7.26.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.26.5.tgz#3dc4405d31ad1cbe45293aa57205a6e3b009d53e"
+  integrity sha512-chuTSY+hq09+/f5lMj8ZSYgCFpppV2CbYrhNFJ1BFoXpiWPnnAb7R0MqrafCpN8E1+YRrtM1MXZHJdIx8B6rMQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/helper-plugin-utils" "^7.26.5"
 
-"@babel/plugin-syntax-dynamic-import@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz#62bf98b2da3cd21d626154fc96ee5b3cb68eacb3"
-  integrity sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==
+"@babel/plugin-transform-block-scoping@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.25.9.tgz#c33665e46b06759c93687ca0f84395b80c0473a1"
+  integrity sha512-1F05O7AYjymAtqbsFETboN1NvBdcnzMerO+zlMyJBEz6WkMdejvGWw9p05iTSjC85RLlBseHHQpYaM4gzJkBGg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.8.0"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-syntax-export-namespace-from@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz#028964a9ba80dbc094c915c487ad7c4e7a66465a"
-  integrity sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==
+"@babel/plugin-transform-class-properties@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.25.9.tgz#a8ce84fedb9ad512549984101fa84080a9f5f51f"
+  integrity sha512-bbMAII8GRSkcd0h0b4X+36GksxuheLFjP65ul9w6C3KgAamI3JqErNgSrosX6ZPj+Mpim5VvEbawXxJCyEUV3Q==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/helper-create-class-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-syntax-import-assertions@^7.20.0":
-  version "7.20.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.20.0.tgz#bb50e0d4bea0957235390641209394e87bdb9cc4"
-  integrity sha512-IUh1vakzNoWalR8ch/areW7qFopR2AEw03JlG7BbrDqmQ4X3q9uuipQwSGrUn7oGiemKjtSLDhNtQHzMHr1JdQ==
+"@babel/plugin-transform-class-static-block@^7.26.0":
+  version "7.26.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.26.0.tgz#6c8da219f4eb15cae9834ec4348ff8e9e09664a0"
+  integrity sha512-6J2APTs7BDDm+UMqP1useWqhcRAXo0WIoVj26N7kPFB6S73Lgvyka4KTZYIxtgYXiN5HTyRObA72N2iu628iTQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.19.0"
+    "@babel/helper-create-class-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-syntax-json-strings@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz#01ca21b668cd8218c9e640cb6dd88c5412b2c96a"
-  integrity sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==
+"@babel/plugin-transform-classes@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.25.9.tgz#7152457f7880b593a63ade8a861e6e26a4469f52"
+  integrity sha512-mD8APIXmseE7oZvZgGABDyM34GUmK45Um2TXiBUt7PnuAxrgoSVf123qUzPxEr/+/BHrRn5NMZCdE2m/1F8DGg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.8.0"
-
-"@babel/plugin-syntax-jsx@^7.0.0":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.16.7.tgz#50b6571d13f764266a113d77c82b4a6508bbe665"
-  integrity sha512-Esxmk7YjA8QysKeT3VhTXvF6y77f/a91SIs4pWb4H2eWGQkCKFgQaG6hdoEVZtGsrAcb2K5BW66XsOErD4WU3Q==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.16.7"
-
-"@babel/plugin-syntax-logical-assignment-operators@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz#ca91ef46303530448b906652bac2e9fe9941f699"
-  integrity sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-
-"@babel/plugin-syntax-nullish-coalescing-operator@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz#167ed70368886081f74b5c36c65a88c03b66d1a9"
-  integrity sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.0"
-
-"@babel/plugin-syntax-numeric-separator@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz#b9b070b3e33570cd9fd07ba7fa91c0dd37b9af97"
-  integrity sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-
-"@babel/plugin-syntax-object-rest-spread@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz#60e225edcbd98a640332a2e72dd3e66f1af55871"
-  integrity sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.0"
-
-"@babel/plugin-syntax-optional-catch-binding@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz#6111a265bcfb020eb9efd0fdfd7d26402b9ed6c1"
-  integrity sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.0"
-
-"@babel/plugin-syntax-optional-chaining@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz#4f69c2ab95167e0180cd5336613f8c5788f7d48a"
-  integrity sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.0"
-
-"@babel/plugin-syntax-private-property-in-object@^7.14.5":
-  version "7.14.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-private-property-in-object/-/plugin-syntax-private-property-in-object-7.14.5.tgz#0dc6671ec0ea22b6e94a1114f857970cd39de1ad"
-  integrity sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.14.5"
-
-"@babel/plugin-syntax-top-level-await@^7.14.5":
-  version "7.14.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz#c1cfdadc35a646240001f06138247b741c34d94c"
-  integrity sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.14.5"
-
-"@babel/plugin-transform-arrow-functions@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.18.6.tgz#19063fcf8771ec7b31d742339dac62433d0611fe"
-  integrity sha512-9S9X9RUefzrsHZmKMbDXxweEH+YlE8JJEuat9FdvW9Qh1cw7W64jELCtWNkPBPX5En45uy28KGvA/AySqUh8CQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
-
-"@babel/plugin-transform-async-to-generator@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.18.6.tgz#ccda3d1ab9d5ced5265fdb13f1882d5476c71615"
-  integrity sha512-ARE5wZLKnTgPW7/1ftQmSi1CmkqqHo2DNmtztFhvgtOWSDfq0Cq9/9L+KnZNYSNrydBekhW3rwShduf59RoXag==
-  dependencies:
-    "@babel/helper-module-imports" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.18.6"
-    "@babel/helper-remap-async-to-generator" "^7.18.6"
-
-"@babel/plugin-transform-block-scoped-functions@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.18.6.tgz#9187bf4ba302635b9d70d986ad70f038726216a8"
-  integrity sha512-ExUcOqpPWnliRcPqves5HJcJOvHvIIWfuS4sroBUenPuMdmW+SMHDakmtS7qOo13sVppmUijqeTv7qqGsvURpQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
-
-"@babel/plugin-transform-block-scoping@^7.20.2":
-  version "7.20.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.20.9.tgz#2034307073e243fd476dddb5472ec35d13802853"
-  integrity sha512-hwZN0kr16UkIF/kR9F9x8gd1kTkQl1vyAF2lkUmlTuCtTKOGLE5blQctuxEeKXwz0dkArQ9RYL8+HLb/75KGMA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.20.2"
-
-"@babel/plugin-transform-classes@^7.20.2":
-  version "7.20.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.20.7.tgz#f438216f094f6bb31dc266ebfab8ff05aecad073"
-  integrity sha512-LWYbsiXTPKl+oBlXUGlwNlJZetXD5Am+CyBdqhPsDVjM9Jc8jwBJFrKhHf900Kfk2eZG1y9MAG3UNajol7A4VQ==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.18.6"
-    "@babel/helper-compilation-targets" "^7.20.7"
-    "@babel/helper-environment-visitor" "^7.18.9"
-    "@babel/helper-function-name" "^7.19.0"
-    "@babel/helper-optimise-call-expression" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/helper-replace-supers" "^7.20.7"
-    "@babel/helper-split-export-declaration" "^7.18.6"
+    "@babel/helper-annotate-as-pure" "^7.25.9"
+    "@babel/helper-compilation-targets" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-replace-supers" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
     globals "^11.1.0"
 
-"@babel/plugin-transform-computed-properties@^7.18.9":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.18.9.tgz#2357a8224d402dad623caf6259b611e56aec746e"
-  integrity sha512-+i0ZU1bCDymKakLxn5srGHrsAPRELC2WIbzwjLhHW9SIE1cPYkLCL0NlnXMZaM1vhfgA2+M7hySk42VBvrkBRw==
+"@babel/plugin-transform-computed-properties@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.25.9.tgz#db36492c78460e534b8852b1d5befe3c923ef10b"
+  integrity sha512-HnBegGqXZR12xbcTHlJ9HGxw1OniltT26J5YpfruGqtUHlz/xKf/G2ak9e+t0rVqrjXa9WOhvYPz1ERfMj23AA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/template" "^7.25.9"
 
-"@babel/plugin-transform-destructuring@^7.20.2":
-  version "7.20.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.20.7.tgz#8bda578f71620c7de7c93af590154ba331415454"
-  integrity sha512-Xwg403sRrZb81IVB79ZPqNQME23yhugYVqgTxAhT99h485F4f+GMELFhhOsscDUB7HCswepKeCKLn/GZvUKoBA==
+"@babel/plugin-transform-destructuring@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.25.9.tgz#966ea2595c498224340883602d3cfd7a0c79cea1"
+  integrity sha512-WkCGb/3ZxXepmMiX101nnGiU+1CAdut8oHyEOHxkKuS1qKpU2SMXE2uSvfz8PBuLd49V6LEsbtyPhWC7fnkgvQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-dotall-regex@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.18.6.tgz#b286b3e7aae6c7b861e45bed0a2fafd6b1a4fef8"
-  integrity sha512-6S3jpun1eEbAxq7TdjLotAsl4WpQI9DxfkycRcKrjhQYzU87qpXdknpBg/e+TdcMehqGnLFi7tnFUBR02Vq6wg==
+"@babel/plugin-transform-dotall-regex@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.25.9.tgz#bad7945dd07734ca52fe3ad4e872b40ed09bb09a"
+  integrity sha512-t7ZQ7g5trIgSRYhI9pIJtRl64KHotutUJsh4Eze5l7olJv+mRSg4/MmbZ0tv1eeqRbdvo/+trvJD/Oc5DmW2cA==
   dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-create-regexp-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-dotall-regex@^7.4.4":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.16.7.tgz#6b2d67686fab15fb6a7fd4bd895d5982cfc81241"
-  integrity sha512-Lyttaao2SjZF6Pf4vk1dVKv8YypMpomAbygW+mU5cYP3S5cWTfCJjG8xV6CFdzGFlfWK81IjL9viiTvpb6G7gQ==
+"@babel/plugin-transform-duplicate-keys@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.25.9.tgz#8850ddf57dce2aebb4394bb434a7598031059e6d"
+  integrity sha512-LZxhJ6dvBb/f3x8xwWIuyiAHy56nrRG3PeYTpBkkzkYRRQ6tJLu68lEF5VIqMUZiAV7a8+Tb78nEoMCMcqjXBw==
   dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.16.7"
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-duplicate-keys@^7.18.9":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.18.9.tgz#687f15ee3cdad6d85191eb2a372c4528eaa0ae0e"
-  integrity sha512-d2bmXCtZXYc59/0SanQKbiWINadaJXqtvIQIzd4+hNwkWBgyCd5F/2t1kXoUdvPMrxzPvhK6EMQRROxsue+mfw==
+"@babel/plugin-transform-duplicate-named-capturing-groups-regex@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-named-capturing-groups-regex/-/plugin-transform-duplicate-named-capturing-groups-regex-7.25.9.tgz#6f7259b4de127721a08f1e5165b852fcaa696d31"
+  integrity sha512-0UfuJS0EsXbRvKnwcLjFtJy/Sxc5J5jhLHnFhy7u4zih97Hz6tJkLU+O+FMMrNZrosUPxDi6sYxJ/EA8jDiAog==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.9"
+    "@babel/helper-create-regexp-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-exponentiation-operator@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.18.6.tgz#421c705f4521888c65e91fdd1af951bfefd4dacd"
-  integrity sha512-wzEtc0+2c88FVR34aQmiz56dxEkxr2g8DQb/KfaFa1JYXOFVsbhvAonFN6PwVWj++fKmku8NP80plJ5Et4wqHw==
+"@babel/plugin-transform-dynamic-import@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.25.9.tgz#23e917de63ed23c6600c5dd06d94669dce79f7b8"
+  integrity sha512-GCggjexbmSLaFhqsojeugBpeaRIgWNTcgKVq/0qIteFEqY2A+b9QidYadrWlnbWQUrW5fn+mCvf3tr7OeBFTyg==
   dependencies:
-    "@babel/helper-builder-binary-assignment-operator-visitor" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-for-of@^7.18.8":
-  version "7.18.8"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.18.8.tgz#6ef8a50b244eb6a0bdbad0c7c61877e4e30097c1"
-  integrity sha512-yEfTRnjuskWYo0k1mHUqrVWaZwrdq8AYbfrpqULOJOaucGSp4mNMVps+YtA8byoevxS/urwU75vyhQIxcCgiBQ==
+"@babel/plugin-transform-exponentiation-operator@^7.26.3":
+  version "7.26.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.26.3.tgz#e29f01b6de302c7c2c794277a48f04a9ca7f03bc"
+  integrity sha512-7CAHcQ58z2chuXPWblnn1K6rLDnDWieghSOEmqQsrBenH0P9InCUtOJYD89pvngljmZlJcz3fcmgYsXFNGa1ZQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-function-name@^7.18.9":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.18.9.tgz#cc354f8234e62968946c61a46d6365440fc764e0"
-  integrity sha512-WvIBoRPaJQ5yVHzcnJFor7oS5Ls0PYixlTYE63lCj2RtdQEl15M68FXQlxnG6wdraJIXRdR7KI+hQ7q/9QjrCQ==
+"@babel/plugin-transform-export-namespace-from@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.25.9.tgz#90745fe55053394f554e40584cda81f2c8a402a2"
+  integrity sha512-2NsEz+CxzJIVOPx2o9UsW1rXLqtChtLoVnwYHHiB04wS5sgn7mrV45fWMBX0Kk+ub9uXytVYfNP2HjbVbCB3Ww==
   dependencies:
-    "@babel/helper-compilation-targets" "^7.18.9"
-    "@babel/helper-function-name" "^7.18.9"
-    "@babel/helper-plugin-utils" "^7.18.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-literals@^7.18.9":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.18.9.tgz#72796fdbef80e56fba3c6a699d54f0de557444bc"
-  integrity sha512-IFQDSRoTPnrAIrI5zoZv73IFeZu2dhu6irxQjY9rNjTT53VmKg9fenjvoiOWOkJ6mm4jKVPtdMzBY98Fp4Z4cg==
+"@babel/plugin-transform-for-of@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.25.9.tgz#4bdc7d42a213397905d89f02350c5267866d5755"
+  integrity sha512-LqHxduHoaGELJl2uhImHwRQudhCM50pT46rIBNvtT/Oql3nqiS3wOwP+5ten7NpYSXrrVLgtZU3DZmPtWZo16A==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.25.9"
 
-"@babel/plugin-transform-member-expression-literals@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.18.6.tgz#ac9fdc1a118620ac49b7e7a5d2dc177a1bfee88e"
-  integrity sha512-qSF1ihLGO3q+/g48k85tUjD033C29TNTVB2paCwZPVmOsjn9pClvYYrM2VeJpBY2bcNkuny0YUyTNRyRxJ54KA==
+"@babel/plugin-transform-function-name@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.25.9.tgz#939d956e68a606661005bfd550c4fc2ef95f7b97"
+  integrity sha512-8lP+Yxjv14Vc5MuWBpJsoUCd3hD6V9DgBon2FVYL4jJgbnVQ9fTgYmonchzZJOVNgzEgbxp4OwAf6xz6M/14XA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-compilation-targets" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
 
-"@babel/plugin-transform-modules-amd@^7.19.6":
-  version "7.20.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.20.7.tgz#1e5cfeb4e5f9b392e86f85698896336b442f8760"
-  integrity sha512-+1IVLD+dHOzRZWNFFSoyPZz4ffsVmOP+OhhjeahLKpU97v/52LcCb9RabRl5eHM1/HAuH5Dl0q9Pyzrq1v2otQ==
+"@babel/plugin-transform-json-strings@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.25.9.tgz#c86db407cb827cded902a90c707d2781aaa89660"
+  integrity sha512-xoTMk0WXceiiIvsaquQQUaLLXSW1KJ159KP87VilruQm0LNNGxWzahxSS6T6i4Zg3ezp4vA4zuwiNUR53qmQAw==
   dependencies:
-    "@babel/helper-module-transforms" "^7.20.7"
-    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-modules-commonjs@^7.19.6":
-  version "7.20.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.20.7.tgz#abb5f84695e74d46acf48244082f6cbf8bb23120"
-  integrity sha512-76jqqFiFdCD+RJwEdtBHUG2/rEKQAmpejPbAKyQECEE3/y4U5CMPc9IXvipS990vgQhzq+ZRw6WJ+q4xJ/P24w==
+"@babel/plugin-transform-literals@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.25.9.tgz#1a1c6b4d4aa59bc4cad5b6b3a223a0abd685c9de"
+  integrity sha512-9N7+2lFziW8W9pBl2TzaNht3+pgMIRP74zizeCSrtnSKVdUl8mAjjOP2OOVQAfZ881P2cNjDj1uAMEdeD50nuQ==
   dependencies:
-    "@babel/helper-module-transforms" "^7.20.7"
-    "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/helper-simple-access" "^7.20.2"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-modules-systemjs@^7.19.6":
-  version "7.19.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.19.6.tgz#59e2a84064b5736a4471b1aa7b13d4431d327e0d"
-  integrity sha512-fqGLBepcc3kErfR9R3DnVpURmckXP7gj7bAlrTQyBxrigFqszZCkFkcoxzCp2v32XmwXLvbw+8Yq9/b+QqksjQ==
+"@babel/plugin-transform-logical-assignment-operators@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.25.9.tgz#b19441a8c39a2fda0902900b306ea05ae1055db7"
+  integrity sha512-wI4wRAzGko551Y8eVf6iOY9EouIDTtPb0ByZx+ktDGHwv6bHFimrgJM/2T021txPZ2s4c7bqvHbd+vXG6K948Q==
   dependencies:
-    "@babel/helper-hoist-variables" "^7.18.6"
-    "@babel/helper-module-transforms" "^7.19.6"
-    "@babel/helper-plugin-utils" "^7.19.0"
-    "@babel/helper-validator-identifier" "^7.19.1"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-modules-umd@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.18.6.tgz#81d3832d6034b75b54e62821ba58f28ed0aab4b9"
-  integrity sha512-dcegErExVeXcRqNtkRU/z8WlBLnvD4MRnHgNs3MytRO1Mn1sHRyhbcpYbVMGclAqOjdW+9cfkdZno9dFdfKLfQ==
+"@babel/plugin-transform-member-expression-literals@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.25.9.tgz#63dff19763ea64a31f5e6c20957e6a25e41ed5de"
+  integrity sha512-PYazBVfofCQkkMzh2P6IdIUaCEWni3iYEerAsRWuVd8+jlM1S9S9cz1dF9hIzyoZ8IA3+OwVYIp9v9e+GbgZhA==
   dependencies:
-    "@babel/helper-module-transforms" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-named-capturing-groups-regex@^7.19.1":
-  version "7.19.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.19.1.tgz#ec7455bab6cd8fb05c525a94876f435a48128888"
-  integrity sha512-oWk9l9WItWBQYS4FgXD4Uyy5kq898lvkXpXQxoJEY1RnvPk4R/Dvu2ebXU9q8lP+rlMwUQTFf2Ok6d78ODa0kw==
+"@babel/plugin-transform-modules-amd@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.25.9.tgz#49ba478f2295101544abd794486cd3088dddb6c5"
+  integrity sha512-g5T11tnI36jVClQlMlt4qKDLlWnG5pP9CSM4GhdRciTNMRgkfpo5cR6b4rGIOYPgRRuFAvwjPQ/Yk+ql4dyhbw==
   dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.19.0"
-    "@babel/helper-plugin-utils" "^7.19.0"
+    "@babel/helper-module-transforms" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-new-target@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.18.6.tgz#d128f376ae200477f37c4ddfcc722a8a1b3246a8"
-  integrity sha512-DjwFA/9Iu3Z+vrAn+8pBUGcjhxKguSMlsFqeCKbhb9BAV756v0krzVK04CRDi/4aqmk8BsHb4a/gFcaA5joXRw==
+"@babel/plugin-transform-modules-commonjs@^7.26.3":
+  version "7.26.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.26.3.tgz#8f011d44b20d02c3de44d8850d971d8497f981fb"
+  integrity sha512-MgR55l4q9KddUDITEzEFYn5ZsGDXMSsU9E+kh7fjRXTIC3RHqfCo8RPRbyReYJh44HQ/yomFkqbOFohXvDCiIQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-module-transforms" "^7.26.0"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-object-super@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.18.6.tgz#fb3c6ccdd15939b6ff7939944b51971ddc35912c"
-  integrity sha512-uvGz6zk+pZoS1aTZrOvrbj6Pp/kK2mp45t2B+bTDre2UgsZZ8EZLSJtUg7m/no0zOJUWgFONpB7Zv9W2tSaFlA==
+"@babel/plugin-transform-modules-systemjs@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.25.9.tgz#8bd1b43836269e3d33307151a114bcf3ba6793f8"
+  integrity sha512-hyss7iIlH/zLHaehT+xwiymtPOpsiwIIRlCAOwBB04ta5Tt+lNItADdlXw3jAWZ96VJ2jlhl/c+PNIQPKNfvcA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
-    "@babel/helper-replace-supers" "^7.18.6"
+    "@babel/helper-module-transforms" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-validator-identifier" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
 
-"@babel/plugin-transform-parameters@^7.20.1", "@babel/plugin-transform-parameters@^7.20.7":
-  version "7.20.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.20.7.tgz#0ee349e9d1bc96e78e3b37a7af423a4078a7083f"
-  integrity sha512-WiWBIkeHKVOSYPO0pWkxGPfKeWrCJyD3NJ53+Lrp/QMSZbsVPovrVl2aWZ19D/LTVnaDv5Ap7GJ/B2CTOZdrfA==
+"@babel/plugin-transform-modules-umd@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.25.9.tgz#6710079cdd7c694db36529a1e8411e49fcbf14c9"
+  integrity sha512-bS9MVObUgE7ww36HEfwe6g9WakQ0KF07mQF74uuXdkoziUPfKyu/nIm663kz//e5O1nPInPFx36z7WJmJ4yNEw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-module-transforms" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-property-literals@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.18.6.tgz#e22498903a483448e94e032e9bbb9c5ccbfc93a3"
-  integrity sha512-cYcs6qlgafTud3PAzrrRNbQtfpQ8+y/+M5tKmksS9+M1ckbH6kzY8MrexEM9mcA6JDsukE19iIRvAyYl463sMg==
+"@babel/plugin-transform-named-capturing-groups-regex@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.25.9.tgz#454990ae6cc22fd2a0fa60b3a2c6f63a38064e6a"
+  integrity sha512-oqB6WHdKTGl3q/ItQhpLSnWWOpjUJLsOCLVyeFgeTktkBSCiurvPOsyt93gibI9CmuKvTUEtWmG5VhZD+5T/KA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-create-regexp-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-regenerator@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.18.6.tgz#585c66cb84d4b4bf72519a34cfce761b8676ca73"
-  integrity sha512-poqRI2+qiSdeldcz4wTSTXBRryoq3Gc70ye7m7UD5Ww0nE29IXqMl6r7Nd15WBgRd74vloEMlShtH6CKxVzfmQ==
+"@babel/plugin-transform-new-target@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.25.9.tgz#42e61711294b105c248336dcb04b77054ea8becd"
+  integrity sha512-U/3p8X1yCSoKyUj2eOBIx3FOn6pElFOKvAAGf8HTtItuPyB+ZeOqfn+mvTtg9ZlOAjsPdK3ayQEjqHjU/yLeVQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
-    regenerator-transform "^0.15.0"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-reserved-words@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.18.6.tgz#b1abd8ebf8edaa5f7fe6bbb8d2133d23b6a6f76a"
-  integrity sha512-oX/4MyMoypzHjFrT1CdivfKZ+XvIPMFXwwxHp/r0Ddy2Vuomt4HDFGmft1TAY2yiTKiNSsh3kjBAzcM8kSdsjA==
+"@babel/plugin-transform-nullish-coalescing-operator@^7.26.6":
+  version "7.26.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.26.6.tgz#fbf6b3c92cb509e7b319ee46e3da89c5bedd31fe"
+  integrity sha512-CKW8Vu+uUZneQCPtXmSBUC6NCAUdya26hWCElAWh5mVSlSRsmiCPUUDKb3Z0szng1hiAJa098Hkhg9o4SE35Qw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.26.5"
 
-"@babel/plugin-transform-runtime@7.21.0":
-  version "7.21.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.21.0.tgz#2a884f29556d0a68cd3d152dcc9e6c71dfb6eee8"
-  integrity sha512-ReY6pxwSzEU0b3r2/T/VhqMKg/AkceBT19X0UptA3/tYi5Pe2eXgEUH+NNMC5nok6c6XQz5tyVTUpuezRfSMSg==
+"@babel/plugin-transform-numeric-separator@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.25.9.tgz#bfed75866261a8b643468b0ccfd275f2033214a1"
+  integrity sha512-TlprrJ1GBZ3r6s96Yq8gEQv82s8/5HnCVHtEJScUj90thHQbwe+E5MLhi2bbNHBEJuzrvltXSru+BUxHDoog7Q==
   dependencies:
-    "@babel/helper-module-imports" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.20.2"
-    babel-plugin-polyfill-corejs2 "^0.3.3"
-    babel-plugin-polyfill-corejs3 "^0.6.0"
-    babel-plugin-polyfill-regenerator "^0.4.1"
-    semver "^6.3.0"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-shorthand-properties@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.18.6.tgz#6d6df7983d67b195289be24909e3f12a8f664dc9"
-  integrity sha512-eCLXXJqv8okzg86ywZJbRn19YJHU4XUa55oz2wbHhaQVn/MM+XhukiT7SYqp/7o00dg52Rj51Ny+Ecw4oyoygw==
+"@babel/plugin-transform-object-rest-spread@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.25.9.tgz#0203725025074164808bcf1a2cfa90c652c99f18"
+  integrity sha512-fSaXafEE9CVHPweLYw4J0emp1t8zYTXyzN3UuG+lylqkvYd7RMrsOQ8TYx5RF231be0vqtFC6jnx3UmpJmKBYg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-compilation-targets" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/plugin-transform-parameters" "^7.25.9"
 
-"@babel/plugin-transform-spread@^7.19.0":
-  version "7.19.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.19.0.tgz#dd60b4620c2fec806d60cfaae364ec2188d593b6"
-  integrity sha512-RsuMk7j6n+r752EtzyScnWkQyuJdli6LdO5Klv8Yx0OfPVTcQkIUfS8clx5e9yHXzlnhOZF3CbQ8C2uP5j074w==
+"@babel/plugin-transform-object-super@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.25.9.tgz#385d5de135162933beb4a3d227a2b7e52bb4cf03"
+  integrity sha512-Kj/Gh+Rw2RNLbCK1VAWj2U48yxxqL2x0k10nPtSdRa0O2xnHXalD0s+o1A6a0W43gJ00ANo38jxkQreckOzv5A==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.19.0"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.18.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-replace-supers" "^7.25.9"
 
-"@babel/plugin-transform-sticky-regex@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.18.6.tgz#c6706eb2b1524028e317720339583ad0f444adcc"
-  integrity sha512-kfiDrDQ+PBsQDO85yj1icueWMfGfJFKN1KCkndygtu/C9+XUfydLC8Iv5UYJqRwy4zk8EcplRxEOeLyjq1gm6Q==
+"@babel/plugin-transform-optional-catch-binding@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.25.9.tgz#10e70d96d52bb1f10c5caaac59ac545ea2ba7ff3"
+  integrity sha512-qM/6m6hQZzDcZF3onzIhZeDHDO43bkNNlOX0i8n3lR6zLbu0GN2d8qfM/IERJZYauhAHSLHy39NF0Ctdvcid7g==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-template-literals@^7.18.9":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.18.9.tgz#04ec6f10acdaa81846689d63fae117dd9c243a5e"
-  integrity sha512-S8cOWfT82gTezpYOiVaGHrCbhlHgKhQt8XH5ES46P2XWmX92yisoZywf5km75wv5sYcXDUCLMmMxOLCtthDgMA==
+"@babel/plugin-transform-optional-chaining@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.25.9.tgz#e142eb899d26ef715435f201ab6e139541eee7dd"
+  integrity sha512-6AvV0FsLULbpnXeBjrY4dmWF8F7gf8QnvTEoO/wX/5xm/xE1Xo8oPuD3MPS+KS9f9XBEAWN7X1aWr4z9HdOr7A==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.25.9"
 
-"@babel/plugin-transform-typeof-symbol@^7.18.9":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.18.9.tgz#c8cea68263e45addcd6afc9091429f80925762c0"
-  integrity sha512-SRfwTtF11G2aemAZWivL7PD+C9z52v9EvMqH9BuYbabyPuKUvSWks3oCg6041pT925L4zVFqaVBeECwsmlguEw==
+"@babel/plugin-transform-parameters@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.25.9.tgz#b856842205b3e77e18b7a7a1b94958069c7ba257"
+  integrity sha512-wzz6MKwpnshBAiRmn4jR8LYz/g8Ksg0o80XmwZDlordjwEk9SxBzTWC7F5ef1jhbrbOW2DJ5J6ayRukrJmnr0g==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-unicode-escapes@^7.18.10":
-  version "7.18.10"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.18.10.tgz#1ecfb0eda83d09bbcb77c09970c2dd55832aa246"
-  integrity sha512-kKAdAI+YzPgGY/ftStBFXTI1LZFju38rYThnfMykS+IXy8BVx+res7s2fxf1l8I35DV2T97ezo6+SGrXz6B3iQ==
+"@babel/plugin-transform-private-methods@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.25.9.tgz#847f4139263577526455d7d3223cd8bda51e3b57"
+  integrity sha512-D/JUozNpQLAPUVusvqMxyvjzllRaF8/nSrP1s2YGQT/W4LHK4xxsMcHjhOGTS01mp9Hda8nswb+FblLdJornQw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.9"
+    "@babel/helper-create-class-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-unicode-regex@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.18.6.tgz#194317225d8c201bbae103364ffe9e2cea36cdca"
-  integrity sha512-gE7A6Lt7YLnNOL3Pb9BNeZvi+d8l7tcRrG4+pwJjK9hD2xX4mEvjlQW60G9EEmfXVYRPv9VRQcyegIVHCql/AA==
+"@babel/plugin-transform-private-property-in-object@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.25.9.tgz#9c8b73e64e6cc3cbb2743633885a7dd2c385fe33"
+  integrity sha512-Evf3kcMqzXA3xfYJmZ9Pg1OvKdtqsDMSWBDzZOPLvHiTt36E75jLDQo5w1gtRU95Q4E5PDttrTf25Fw8d/uWLw==
   dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-annotate-as-pure" "^7.25.9"
+    "@babel/helper-create-class-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/preset-env@7.20.2":
-  version "7.20.2"
-  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.20.2.tgz#9b1642aa47bb9f43a86f9630011780dab7f86506"
-  integrity sha512-1G0efQEWR1EHkKvKHqbG+IN/QdgwfByUpM5V5QroDzGV2t3S/WXNQd693cHiHTlCFMpr9B6FkPFXDA2lQcKoDg==
+"@babel/plugin-transform-property-literals@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.25.9.tgz#d72d588bd88b0dec8b62e36f6fda91cedfe28e3f"
+  integrity sha512-IvIUeV5KrS/VPavfSM/Iu+RE6llrHrYIKY1yfCzyO/lMXHQ+p7uGhonmGVisv6tSBSVgWzMBohTcvkC9vQcQFA==
   dependencies:
-    "@babel/compat-data" "^7.20.1"
-    "@babel/helper-compilation-targets" "^7.20.0"
-    "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/helper-validator-option" "^7.18.6"
-    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression" "^7.18.6"
-    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining" "^7.18.9"
-    "@babel/plugin-proposal-async-generator-functions" "^7.20.1"
-    "@babel/plugin-proposal-class-properties" "^7.18.6"
-    "@babel/plugin-proposal-class-static-block" "^7.18.6"
-    "@babel/plugin-proposal-dynamic-import" "^7.18.6"
-    "@babel/plugin-proposal-export-namespace-from" "^7.18.9"
-    "@babel/plugin-proposal-json-strings" "^7.18.6"
-    "@babel/plugin-proposal-logical-assignment-operators" "^7.18.9"
-    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.18.6"
-    "@babel/plugin-proposal-numeric-separator" "^7.18.6"
-    "@babel/plugin-proposal-object-rest-spread" "^7.20.2"
-    "@babel/plugin-proposal-optional-catch-binding" "^7.18.6"
-    "@babel/plugin-proposal-optional-chaining" "^7.18.9"
-    "@babel/plugin-proposal-private-methods" "^7.18.6"
-    "@babel/plugin-proposal-private-property-in-object" "^7.18.6"
-    "@babel/plugin-proposal-unicode-property-regex" "^7.18.6"
-    "@babel/plugin-syntax-async-generators" "^7.8.4"
-    "@babel/plugin-syntax-class-properties" "^7.12.13"
-    "@babel/plugin-syntax-class-static-block" "^7.14.5"
-    "@babel/plugin-syntax-dynamic-import" "^7.8.3"
-    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
-    "@babel/plugin-syntax-import-assertions" "^7.20.0"
-    "@babel/plugin-syntax-json-strings" "^7.8.3"
-    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
-    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
-    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
-    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
-    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
-    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
-    "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
-    "@babel/plugin-syntax-top-level-await" "^7.14.5"
-    "@babel/plugin-transform-arrow-functions" "^7.18.6"
-    "@babel/plugin-transform-async-to-generator" "^7.18.6"
-    "@babel/plugin-transform-block-scoped-functions" "^7.18.6"
-    "@babel/plugin-transform-block-scoping" "^7.20.2"
-    "@babel/plugin-transform-classes" "^7.20.2"
-    "@babel/plugin-transform-computed-properties" "^7.18.9"
-    "@babel/plugin-transform-destructuring" "^7.20.2"
-    "@babel/plugin-transform-dotall-regex" "^7.18.6"
-    "@babel/plugin-transform-duplicate-keys" "^7.18.9"
-    "@babel/plugin-transform-exponentiation-operator" "^7.18.6"
-    "@babel/plugin-transform-for-of" "^7.18.8"
-    "@babel/plugin-transform-function-name" "^7.18.9"
-    "@babel/plugin-transform-literals" "^7.18.9"
-    "@babel/plugin-transform-member-expression-literals" "^7.18.6"
-    "@babel/plugin-transform-modules-amd" "^7.19.6"
-    "@babel/plugin-transform-modules-commonjs" "^7.19.6"
-    "@babel/plugin-transform-modules-systemjs" "^7.19.6"
-    "@babel/plugin-transform-modules-umd" "^7.18.6"
-    "@babel/plugin-transform-named-capturing-groups-regex" "^7.19.1"
-    "@babel/plugin-transform-new-target" "^7.18.6"
-    "@babel/plugin-transform-object-super" "^7.18.6"
-    "@babel/plugin-transform-parameters" "^7.20.1"
-    "@babel/plugin-transform-property-literals" "^7.18.6"
-    "@babel/plugin-transform-regenerator" "^7.18.6"
-    "@babel/plugin-transform-reserved-words" "^7.18.6"
-    "@babel/plugin-transform-shorthand-properties" "^7.18.6"
-    "@babel/plugin-transform-spread" "^7.19.0"
-    "@babel/plugin-transform-sticky-regex" "^7.18.6"
-    "@babel/plugin-transform-template-literals" "^7.18.9"
-    "@babel/plugin-transform-typeof-symbol" "^7.18.9"
-    "@babel/plugin-transform-unicode-escapes" "^7.18.10"
-    "@babel/plugin-transform-unicode-regex" "^7.18.6"
-    "@babel/preset-modules" "^0.1.5"
-    "@babel/types" "^7.20.2"
-    babel-plugin-polyfill-corejs2 "^0.3.3"
-    babel-plugin-polyfill-corejs3 "^0.6.0"
-    babel-plugin-polyfill-regenerator "^0.4.1"
-    core-js-compat "^3.25.1"
-    semver "^6.3.0"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/preset-modules@^0.1.5":
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/@babel/preset-modules/-/preset-modules-0.1.5.tgz#ef939d6e7f268827e1841638dc6ff95515e115d9"
-  integrity sha512-A57th6YRG7oR3cq/yt/Y84MvGgE0eJG2F1JLhKuyG+jFxEgrd/HAMJatiFtmOiZurz+0DkrvbheCLaV5f2JfjA==
+"@babel/plugin-transform-regenerator@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.25.9.tgz#03a8a4670d6cebae95305ac6defac81ece77740b"
+  integrity sha512-vwDcDNsgMPDGP0nMqzahDWE5/MLcX8sv96+wfX7as7LoF/kr97Bo/7fI00lXY4wUXYfVmwIIyG80fGZ1uvt2qg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+    regenerator-transform "^0.15.2"
+
+"@babel/plugin-transform-regexp-modifiers@^7.26.0":
+  version "7.26.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regexp-modifiers/-/plugin-transform-regexp-modifiers-7.26.0.tgz#2f5837a5b5cd3842a919d8147e9903cc7455b850"
+  integrity sha512-vN6saax7lrA2yA/Pak3sCxuD6F5InBjn9IcrIKQPjpsLvuHYLVroTxjdlVRHjjBWxKOqIwpTXDkOssYT4BFdRw==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-reserved-words@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.25.9.tgz#0398aed2f1f10ba3f78a93db219b27ef417fb9ce"
+  integrity sha512-7DL7DKYjn5Su++4RXu8puKZm2XBPHyjWLUidaPEkCUBbE7IPcsrkRHggAOOKydH1dASWdcUBxrkOGNxUv5P3Jg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-runtime@7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.25.9.tgz#62723ea3f5b31ffbe676da9d6dae17138ae580ea"
+  integrity sha512-nZp7GlEl+yULJrClz0SwHPqir3lc0zsPrDHQUcxGspSL7AKrexNSEfTbfqnDNJUO13bgKyfuOLMF8Xqtu8j3YQ==
+  dependencies:
+    "@babel/helper-module-imports" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+    babel-plugin-polyfill-corejs2 "^0.4.10"
+    babel-plugin-polyfill-corejs3 "^0.10.6"
+    babel-plugin-polyfill-regenerator "^0.6.1"
+    semver "^6.3.1"
+
+"@babel/plugin-transform-shorthand-properties@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.25.9.tgz#bb785e6091f99f826a95f9894fc16fde61c163f2"
+  integrity sha512-MUv6t0FhO5qHnS/W8XCbHmiRWOphNufpE1IVxhK5kuN3Td9FT1x4rx4K42s3RYdMXCXpfWkGSbCSd0Z64xA7Ng==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-spread@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.25.9.tgz#24a35153931b4ba3d13cec4a7748c21ab5514ef9"
+  integrity sha512-oNknIB0TbURU5pqJFVbOOFspVlrpVwo2H1+HUIsVDvp5VauGGDP1ZEvO8Nn5xyMEs3dakajOxlmkNW7kNgSm6A==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.25.9"
+
+"@babel/plugin-transform-sticky-regex@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.25.9.tgz#c7f02b944e986a417817b20ba2c504dfc1453d32"
+  integrity sha512-WqBUSgeVwucYDP9U/xNRQam7xV8W5Zf+6Eo7T2SRVUFlhRiMNFdFz58u0KZmCVVqs2i7SHgpRnAhzRNmKfi2uA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-template-literals@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.25.9.tgz#6dbd4a24e8fad024df76d1fac6a03cf413f60fe1"
+  integrity sha512-o97AE4syN71M/lxrCtQByzphAdlYluKPDBzDVzMmfCobUjjhAryZV0AIpRPrxN0eAkxXO6ZLEScmt+PNhj2OTw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-typeof-symbol@^7.26.7":
+  version "7.26.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.26.7.tgz#d0e33acd9223744c1e857dbd6fa17bd0a3786937"
+  integrity sha512-jfoTXXZTgGg36BmhqT3cAYK5qkmqvJpvNrPhaK/52Vgjhw4Rq29s9UqpWWV0D6yuRmgiFH/BUVlkl96zJWqnaw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.26.5"
+
+"@babel/plugin-transform-unicode-escapes@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.25.9.tgz#a75ef3947ce15363fccaa38e2dd9bc70b2788b82"
+  integrity sha512-s5EDrE6bW97LtxOcGj1Khcx5AaXwiMmi4toFWRDP9/y0Woo6pXC+iyPu/KuhKtfSrNFd7jJB+/fkOtZy6aIC6Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-unicode-property-regex@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-property-regex/-/plugin-transform-unicode-property-regex-7.25.9.tgz#a901e96f2c1d071b0d1bb5dc0d3c880ce8f53dd3"
+  integrity sha512-Jt2d8Ga+QwRluxRQ307Vlxa6dMrYEMZCgGxoPR8V52rxPyldHu3hdlHspxaqYmE7oID5+kB+UKUB/eWS+DkkWg==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-unicode-regex@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.25.9.tgz#5eae747fe39eacf13a8bd006a4fb0b5d1fa5e9b1"
+  integrity sha512-yoxstj7Rg9dlNn9UQxzk4fcNivwv4nUYz7fYXBaKxvw/lnmPuOm/ikoELygbYq68Bls3D/D+NBPHiLwZdZZ4HA==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-unicode-sets-regex@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.25.9.tgz#65114c17b4ffc20fa5b163c63c70c0d25621fabe"
+  integrity sha512-8BYqO3GeVNHtx69fdPshN3fnzUNLrWdHhk/icSwigksJGczKSizZ+Z6SBCxTs723Fr5VSNorTIK7a+R2tISvwQ==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/preset-env@7.26.7":
+  version "7.26.7"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.26.7.tgz#24d38e211f4570b8d806337035cc3ae798e0c36d"
+  integrity sha512-Ycg2tnXwixaXOVb29rana8HNPgLVBof8qqtNQ9LE22IoyZboQbGSxI6ZySMdW3K5nAe6gu35IaJefUJflhUFTQ==
+  dependencies:
+    "@babel/compat-data" "^7.26.5"
+    "@babel/helper-compilation-targets" "^7.26.5"
+    "@babel/helper-plugin-utils" "^7.26.5"
+    "@babel/helper-validator-option" "^7.25.9"
+    "@babel/plugin-bugfix-firefox-class-in-computed-class-key" "^7.25.9"
+    "@babel/plugin-bugfix-safari-class-field-initializer-scope" "^7.25.9"
+    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression" "^7.25.9"
+    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining" "^7.25.9"
+    "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly" "^7.25.9"
+    "@babel/plugin-proposal-private-property-in-object" "7.21.0-placeholder-for-preset-env.2"
+    "@babel/plugin-syntax-import-assertions" "^7.26.0"
+    "@babel/plugin-syntax-import-attributes" "^7.26.0"
+    "@babel/plugin-syntax-unicode-sets-regex" "^7.18.6"
+    "@babel/plugin-transform-arrow-functions" "^7.25.9"
+    "@babel/plugin-transform-async-generator-functions" "^7.25.9"
+    "@babel/plugin-transform-async-to-generator" "^7.25.9"
+    "@babel/plugin-transform-block-scoped-functions" "^7.26.5"
+    "@babel/plugin-transform-block-scoping" "^7.25.9"
+    "@babel/plugin-transform-class-properties" "^7.25.9"
+    "@babel/plugin-transform-class-static-block" "^7.26.0"
+    "@babel/plugin-transform-classes" "^7.25.9"
+    "@babel/plugin-transform-computed-properties" "^7.25.9"
+    "@babel/plugin-transform-destructuring" "^7.25.9"
+    "@babel/plugin-transform-dotall-regex" "^7.25.9"
+    "@babel/plugin-transform-duplicate-keys" "^7.25.9"
+    "@babel/plugin-transform-duplicate-named-capturing-groups-regex" "^7.25.9"
+    "@babel/plugin-transform-dynamic-import" "^7.25.9"
+    "@babel/plugin-transform-exponentiation-operator" "^7.26.3"
+    "@babel/plugin-transform-export-namespace-from" "^7.25.9"
+    "@babel/plugin-transform-for-of" "^7.25.9"
+    "@babel/plugin-transform-function-name" "^7.25.9"
+    "@babel/plugin-transform-json-strings" "^7.25.9"
+    "@babel/plugin-transform-literals" "^7.25.9"
+    "@babel/plugin-transform-logical-assignment-operators" "^7.25.9"
+    "@babel/plugin-transform-member-expression-literals" "^7.25.9"
+    "@babel/plugin-transform-modules-amd" "^7.25.9"
+    "@babel/plugin-transform-modules-commonjs" "^7.26.3"
+    "@babel/plugin-transform-modules-systemjs" "^7.25.9"
+    "@babel/plugin-transform-modules-umd" "^7.25.9"
+    "@babel/plugin-transform-named-capturing-groups-regex" "^7.25.9"
+    "@babel/plugin-transform-new-target" "^7.25.9"
+    "@babel/plugin-transform-nullish-coalescing-operator" "^7.26.6"
+    "@babel/plugin-transform-numeric-separator" "^7.25.9"
+    "@babel/plugin-transform-object-rest-spread" "^7.25.9"
+    "@babel/plugin-transform-object-super" "^7.25.9"
+    "@babel/plugin-transform-optional-catch-binding" "^7.25.9"
+    "@babel/plugin-transform-optional-chaining" "^7.25.9"
+    "@babel/plugin-transform-parameters" "^7.25.9"
+    "@babel/plugin-transform-private-methods" "^7.25.9"
+    "@babel/plugin-transform-private-property-in-object" "^7.25.9"
+    "@babel/plugin-transform-property-literals" "^7.25.9"
+    "@babel/plugin-transform-regenerator" "^7.25.9"
+    "@babel/plugin-transform-regexp-modifiers" "^7.26.0"
+    "@babel/plugin-transform-reserved-words" "^7.25.9"
+    "@babel/plugin-transform-shorthand-properties" "^7.25.9"
+    "@babel/plugin-transform-spread" "^7.25.9"
+    "@babel/plugin-transform-sticky-regex" "^7.25.9"
+    "@babel/plugin-transform-template-literals" "^7.25.9"
+    "@babel/plugin-transform-typeof-symbol" "^7.26.7"
+    "@babel/plugin-transform-unicode-escapes" "^7.25.9"
+    "@babel/plugin-transform-unicode-property-regex" "^7.25.9"
+    "@babel/plugin-transform-unicode-regex" "^7.25.9"
+    "@babel/plugin-transform-unicode-sets-regex" "^7.25.9"
+    "@babel/preset-modules" "0.1.6-no-external-plugins"
+    babel-plugin-polyfill-corejs2 "^0.4.10"
+    babel-plugin-polyfill-corejs3 "^0.10.6"
+    babel-plugin-polyfill-regenerator "^0.6.1"
+    core-js-compat "^3.38.1"
+    semver "^6.3.1"
+
+"@babel/preset-modules@0.1.6-no-external-plugins":
+  version "0.1.6-no-external-plugins"
+  resolved "https://registry.yarnpkg.com/@babel/preset-modules/-/preset-modules-0.1.6-no-external-plugins.tgz#ccb88a2c49c817236861fee7826080573b8a923a"
+  integrity sha512-HrcgcIESLm9aIR842yhJ5RWan/gebQUJ6E/E5+rf0y9o6oj7w0Br+sWuL6kEQ/o/AdfvR1Je9jG18/gnpwjEyA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-proposal-unicode-property-regex" "^7.4.4"
-    "@babel/plugin-transform-dotall-regex" "^7.4.4"
     "@babel/types" "^7.4.4"
     esutils "^2.0.2"
 
-"@babel/register@7.21.0":
-  version "7.21.0"
-  resolved "https://registry.yarnpkg.com/@babel/register/-/register-7.21.0.tgz#c97bf56c2472e063774f31d344c592ebdcefa132"
-  integrity sha512-9nKsPmYDi5DidAqJaQooxIhsLJiNMkGr8ypQ8Uic7cIox7UCDsM7HuUGxdGT7mSDTYbqzIdsOWzfBton/YJrMw==
+"@babel/register@7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/register/-/register-7.25.9.tgz#1c465acf7dc983d70ccc318eb5b887ecb04f021b"
+  integrity sha512-8D43jXtGsYmEeDvm4MWHYUpWf8iiXgWYx3fW7E7Wb7Oe6FWqJPl5K6TuFW0dOwNZzEE5rjlaSJYH9JjrUKJszA==
   dependencies:
     clone-deep "^4.0.1"
     find-cache-dir "^2.0.0"
     make-dir "^2.1.0"
-    pirates "^4.0.5"
+    pirates "^4.0.6"
     source-map-support "^0.5.16"
 
-"@babel/runtime@7.21.0":
-  version "7.21.0"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.21.0.tgz#5b55c9d394e5fcf304909a8b00c07dc217b56673"
-  integrity sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==
+"@babel/runtime@7.26.7":
+  version "7.26.7"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.26.7.tgz#f4e7fe527cd710f8dc0618610b61b4b060c3c341"
+  integrity sha512-AOPI3D+a8dXnja+iwsUqGRjr1BbZIe771sXdapOtYI531gSqpi92vXivKcq2asu/DFpdl1ceFAKZyRzK2PCVcQ==
   dependencies:
-    regenerator-runtime "^0.13.11"
+    regenerator-runtime "^0.14.0"
 
 "@babel/runtime@^7.8.4":
   version "7.17.7"
@@ -1363,15 +1033,6 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/template@^7.0.0", "@babel/template@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.7.tgz#8d126c8701fde4d66b264b3eba3d96f07666d155"
-  integrity sha512-I8j/x8kHUrbYRTUxXrrMbfCa7jxkE7tZre39x3kjr9hvI82cK1FfqLygotcWN5kdPGWcLdWMHpSBavse5tWw3w==
-  dependencies:
-    "@babel/code-frame" "^7.16.7"
-    "@babel/parser" "^7.16.7"
-    "@babel/types" "^7.16.7"
-
 "@babel/template@^7.18.10":
   version "7.18.10"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.18.10.tgz#6f9134835970d1dbf0835c0d100c9f38de0c5e71"
@@ -1390,30 +1051,14 @@
     "@babel/parser" "^7.18.6"
     "@babel/types" "^7.18.6"
 
-"@babel/template@^7.20.7":
-  version "7.20.7"
-  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.20.7.tgz#a15090c2839a83b02aa996c0b4994005841fd5a8"
-  integrity sha512-8SegXApWe6VoNw0r9JHpSteLKTpTiLZ4rMlGIm9JQ18KiCtyQiAMEazujAHrUS5flrcqYZa75ukev3P6QmUwUw==
+"@babel/template@^7.25.0", "@babel/template@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.25.9.tgz#ecb62d81a8a6f5dc5fe8abfc3901fc52ddf15016"
+  integrity sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==
   dependencies:
-    "@babel/code-frame" "^7.18.6"
-    "@babel/parser" "^7.20.7"
-    "@babel/types" "^7.20.7"
-
-"@babel/traverse@^7.0.0":
-  version "7.17.3"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.17.3.tgz#0ae0f15b27d9a92ba1f2263358ea7c4e7db47b57"
-  integrity sha512-5irClVky7TxRWIRtxlh2WPUUOLhcPN06AGgaQSB8AEwuyEBgJVuJ5imdHm5zxk8w0QS5T+tDfnDxAlhWjpb7cw==
-  dependencies:
-    "@babel/code-frame" "^7.16.7"
-    "@babel/generator" "^7.17.3"
-    "@babel/helper-environment-visitor" "^7.16.7"
-    "@babel/helper-function-name" "^7.16.7"
-    "@babel/helper-hoist-variables" "^7.16.7"
-    "@babel/helper-split-export-declaration" "^7.16.7"
-    "@babel/parser" "^7.17.3"
-    "@babel/types" "^7.17.0"
-    debug "^4.1.0"
-    globals "^11.1.0"
+    "@babel/code-frame" "^7.25.9"
+    "@babel/parser" "^7.25.9"
+    "@babel/types" "^7.25.9"
 
 "@babel/traverse@^7.18.10":
   version "7.18.10"
@@ -1431,22 +1076,6 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
-"@babel/traverse@^7.18.6", "@babel/traverse@^7.18.8":
-  version "7.18.8"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.18.8.tgz#f095e62ab46abf1da35e5a2011f43aee72d8d5b0"
-  integrity sha512-UNg/AcSySJYR/+mIcJQDCv00T+AqRO7j/ZEJLzpaYtgM48rMg5MnkJgyNqkzo88+p4tfRvZJCEiwwfG6h4jkRg==
-  dependencies:
-    "@babel/code-frame" "^7.18.6"
-    "@babel/generator" "^7.18.7"
-    "@babel/helper-environment-visitor" "^7.18.6"
-    "@babel/helper-function-name" "^7.18.6"
-    "@babel/helper-hoist-variables" "^7.18.6"
-    "@babel/helper-split-export-declaration" "^7.18.6"
-    "@babel/parser" "^7.18.8"
-    "@babel/types" "^7.18.8"
-    debug "^4.1.0"
-    globals "^11.1.0"
-
 "@babel/traverse@^7.18.9":
   version "7.18.9"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.18.9.tgz#deeff3e8f1bad9786874cb2feda7a2d77a904f98"
@@ -1463,52 +1092,30 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
-"@babel/traverse@^7.19.6":
-  version "7.20.0"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.20.0.tgz#538c4c6ce6255f5666eba02252a7b59fc2d5ed98"
-  integrity sha512-5+cAXQNARgjRUK0JWu2UBwja4JLSO/rBMPJzpsKb+oBF5xlUuCfljQepS4XypBQoiigL0VQjTZy6WiONtUdScQ==
+"@babel/traverse@^7.25.6", "@babel/traverse@^7.25.9", "@babel/traverse@^7.26.5":
+  version "7.26.5"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.26.5.tgz#6d0be3e772ff786456c1a37538208286f6e79021"
+  integrity sha512-rkOSPOw+AXbgtwUga3U4u8RpoK9FEFWBNAlTpcnkLFjL5CT+oyHNuUUC/xx6XefEJ16r38r8Bc/lfp6rYuHeJQ==
   dependencies:
-    "@babel/code-frame" "^7.18.6"
-    "@babel/generator" "^7.20.0"
-    "@babel/helper-environment-visitor" "^7.18.9"
-    "@babel/helper-function-name" "^7.19.0"
-    "@babel/helper-hoist-variables" "^7.18.6"
-    "@babel/helper-split-export-declaration" "^7.18.6"
-    "@babel/parser" "^7.20.0"
-    "@babel/types" "^7.20.0"
-    debug "^4.1.0"
+    "@babel/code-frame" "^7.26.2"
+    "@babel/generator" "^7.26.5"
+    "@babel/parser" "^7.26.5"
+    "@babel/template" "^7.25.9"
+    "@babel/types" "^7.26.5"
+    debug "^4.3.1"
     globals "^11.1.0"
 
-"@babel/traverse@^7.20.7":
-  version "7.20.8"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.20.8.tgz#e3a23eb04af24f8bbe8a8ba3eef6155b77df0b08"
-  integrity sha512-/RNkaYDeCy4MjyV70+QkSHhxbvj2JO/5Ft2Pa880qJOG8tWrqcT/wXUuCCv43yogfqPzHL77Xu101KQPf4clnQ==
+"@babel/traverse@^7.26.7":
+  version "7.26.7"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.26.7.tgz#99a0a136f6a75e7fb8b0a1ace421e0b25994b8bb"
+  integrity sha512-1x1sgeyRLC3r5fQOM0/xtQKsYjyxmFjaOrLJNtZ81inNjyJHGIolTULPiSc/2qe1/qfpFLisLQYFnnZl7QoedA==
   dependencies:
-    "@babel/code-frame" "^7.18.6"
-    "@babel/generator" "^7.20.7"
-    "@babel/helper-environment-visitor" "^7.18.9"
-    "@babel/helper-function-name" "^7.19.0"
-    "@babel/helper-hoist-variables" "^7.18.6"
-    "@babel/helper-split-export-declaration" "^7.18.6"
-    "@babel/parser" "^7.20.7"
-    "@babel/types" "^7.20.7"
-    debug "^4.1.0"
-    globals "^11.1.0"
-
-"@babel/traverse@^7.21.0":
-  version "7.21.0"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.21.0.tgz#0e1807abd5db98e6a19c204b80ed1e3f5bca0edc"
-  integrity sha512-Xdt2P1H4LKTO8ApPfnO1KmzYMFpp7D/EinoXzLYN/cHcBNrVCAkAtGUcXnHXrl/VGktureU6fkQrHSBE2URfoA==
-  dependencies:
-    "@babel/code-frame" "^7.18.6"
-    "@babel/generator" "^7.21.0"
-    "@babel/helper-environment-visitor" "^7.18.9"
-    "@babel/helper-function-name" "^7.21.0"
-    "@babel/helper-hoist-variables" "^7.18.6"
-    "@babel/helper-split-export-declaration" "^7.18.6"
-    "@babel/parser" "^7.21.0"
-    "@babel/types" "^7.21.0"
-    debug "^4.1.0"
+    "@babel/code-frame" "^7.26.2"
+    "@babel/generator" "^7.26.5"
+    "@babel/parser" "^7.26.7"
+    "@babel/template" "^7.25.9"
+    "@babel/types" "^7.26.7"
+    debug "^4.3.1"
     globals "^11.1.0"
 
 "@babel/types@^7.0.0", "@babel/types@^7.0.0-beta.49":
@@ -1519,14 +1126,6 @@
     lodash "^4.17.10"
     to-fast-properties "^2.0.0"
 
-"@babel/types@^7.16.7", "@babel/types@^7.17.0", "@babel/types@^7.4.4":
-  version "7.17.0"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.17.0.tgz#a826e368bccb6b3d84acd76acad5c0d87342390b"
-  integrity sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw==
-  dependencies:
-    "@babel/helper-validator-identifier" "^7.16.7"
-    to-fast-properties "^2.0.0"
-
 "@babel/types@^7.18.10":
   version "7.18.10"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.18.10.tgz#4908e81b6b339ca7c6b7a555a5fc29446f26dde6"
@@ -1536,7 +1135,7 @@
     "@babel/helper-validator-identifier" "^7.18.6"
     to-fast-properties "^2.0.0"
 
-"@babel/types@^7.18.6", "@babel/types@^7.18.7", "@babel/types@^7.18.8":
+"@babel/types@^7.18.6":
   version "7.18.8"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.18.8.tgz#c5af199951bf41ba4a6a9a6d0d8ad722b30cd42f"
   integrity sha512-qwpdsmraq0aJ3osLJRApsc2ouSJCdnMeZwB0DhbtHAtRpZNZCdlbRnHIgcRKzdE1g0iOGg644fzjOBcdOz9cPw==
@@ -1552,40 +1151,28 @@
     "@babel/helper-validator-identifier" "^7.18.6"
     to-fast-properties "^2.0.0"
 
-"@babel/types@^7.19.0", "@babel/types@^7.19.4", "@babel/types@^7.20.0":
-  version "7.20.0"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.20.0.tgz#52c94cf8a7e24e89d2a194c25c35b17a64871479"
-  integrity sha512-Jlgt3H0TajCW164wkTOTzHkZb075tMQMULzrLUoUeKmO7eFL96GgDxf7/Axhc5CAuKE3KFyVW1p6ysKsi2oXAg==
+"@babel/types@^7.25.6", "@babel/types@^7.25.9", "@babel/types@^7.26.5":
+  version "7.26.5"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.26.5.tgz#7a1e1c01d28e26d1fe7f8ec9567b3b92b9d07747"
+  integrity sha512-L6mZmwFDK6Cjh1nRCLXpa6no13ZIioJDz7mdkzHv399pThrTa/k0nUlNaenOeh2kWu/iaOQYElEpKPUswUa9Vg==
   dependencies:
-    "@babel/helper-string-parser" "^7.19.4"
-    "@babel/helper-validator-identifier" "^7.19.1"
-    to-fast-properties "^2.0.0"
+    "@babel/helper-string-parser" "^7.25.9"
+    "@babel/helper-validator-identifier" "^7.25.9"
 
-"@babel/types@^7.20.2", "@babel/types@^7.20.7":
-  version "7.20.7"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.20.7.tgz#54ec75e252318423fc07fb644dc6a58a64c09b7f"
-  integrity sha512-69OnhBxSSgK0OzTJai4kyPDiKTIe3j+ctaHdIGVbRahTLAT7L3R9oeXHC2aVSuGYt3cVnoAMDmOCgJ2yaiLMvg==
+"@babel/types@^7.26.7":
+  version "7.26.7"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.26.7.tgz#5e2b89c0768e874d4d061961f3a5a153d71dc17a"
+  integrity sha512-t8kDRGrKXyp6+tjUh7hw2RLyclsW4TRoRvRHtSyAX9Bb5ldlFh+90YAYY6awRXrlB4G5G2izNeGySpATlFzmOg==
   dependencies:
-    "@babel/helper-string-parser" "^7.19.4"
-    "@babel/helper-validator-identifier" "^7.19.1"
-    to-fast-properties "^2.0.0"
+    "@babel/helper-string-parser" "^7.25.9"
+    "@babel/helper-validator-identifier" "^7.25.9"
 
-"@babel/types@^7.21.0":
-  version "7.21.0"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.21.0.tgz#1da00d89c2f18b226c9207d96edbeb79316a1819"
-  integrity sha512-uR7NWq2VNFnDi7EYqiRz2Jv/VQIu38tu64Zy8TX2nQFQ6etJ9V/Rr2msW8BS132mum2rL645qpDrLtAJtVpuow==
+"@babel/types@^7.4.4":
+  version "7.17.0"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.17.0.tgz#a826e368bccb6b3d84acd76acad5c0d87342390b"
+  integrity sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw==
   dependencies:
-    "@babel/helper-string-parser" "^7.19.4"
-    "@babel/helper-validator-identifier" "^7.19.1"
-    to-fast-properties "^2.0.0"
-
-"@babel/types@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.7.4.tgz#516570d539e44ddf308c07569c258ff94fde9193"
-  integrity sha512-cz5Ji23KCi4T+YIE/BolWosrJuSmoZeN1EFnRtBwF+KKLi8GG/Z2c2hOJJeCXPk4mwk4QFvTmwIodJowXgttRA==
-  dependencies:
-    esutils "^2.0.2"
-    lodash "^4.17.13"
+    "@babel/helper-validator-identifier" "^7.16.7"
     to-fast-properties "^2.0.0"
 
 "@chenfengyuan/vue-qrcode@2.0.0":
@@ -1603,14 +1190,26 @@
   resolved "https://registry.yarnpkg.com/@csstools/selector-specificity/-/selector-specificity-2.0.2.tgz#1bfafe4b7ed0f3e4105837e056e0a89b108ebe36"
   integrity sha512-IkpVW/ehM1hWKln4fCA3NzJU8KwD+kIOvPZA4cqxoJHtE21CCzjyp+Kxbu0i5I4tBNOlXPL9mjwnWlL0VEG4Fg==
 
-"@eslint/eslintrc@^1.4.1":
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.4.1.tgz#af58772019a2d271b7e2d4c23ff4ddcba3ccfb3e"
-  integrity sha512-XXrH9Uarn0stsyldqDYq8r++mROmWRI1xKMXa640Bb//SY1+ECYX6VzT6Lcx5frD0V30XieqJ0oX9I2Xj5aoMA==
+"@eslint-community/eslint-utils@^4.2.0", "@eslint-community/eslint-utils@^4.4.0":
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.1.tgz#d1145bf2c20132d6400495d6df4bf59362fd9d56"
+  integrity sha512-s3O3waFUrMV8P/XaF/+ZTp1X9XBZW1a4B97ZnjQF2KYWaFD2A8KyFBsrsfSjEmjn3RGWAIuvlneuZm3CUK3jbA==
+  dependencies:
+    eslint-visitor-keys "^3.4.3"
+
+"@eslint-community/regexpp@^4.6.1":
+  version "4.12.1"
+  resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.12.1.tgz#cfc6cffe39df390a3841cde2abccf92eaa7ae0e0"
+  integrity sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==
+
+"@eslint/eslintrc@^2.1.4":
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-2.1.4.tgz#388a269f0f25c1b6adc317b5a2c55714894c70ad"
+  integrity sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==
   dependencies:
     ajv "^6.12.4"
     debug "^4.3.2"
-    espree "^9.4.0"
+    espree "^9.6.0"
     globals "^13.19.0"
     ignore "^5.2.0"
     import-fresh "^3.2.1"
@@ -1618,44 +1217,49 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
-"@fortawesome/fontawesome-common-types@6.3.0":
-  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.3.0.tgz#51f734e64511dbc3674cd347044d02f4dd26e86b"
-  integrity sha512-4BC1NMoacEBzSXRwKjZ/X/gmnbp/HU5Qqat7E8xqorUtBFZS+bwfGH5/wqOC2K6GV0rgEobp3OjGRMa5fK9pFg==
+"@eslint/js@8.57.1":
+  version "8.57.1"
+  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.57.1.tgz#de633db3ec2ef6a3c89e2f19038063e8a122e2c2"
+  integrity sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==
 
-"@fortawesome/fontawesome-svg-core@6.3.0":
-  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.3.0.tgz#b6a17d48d231ac1fad93e43fca7271676bf316cf"
-  integrity sha512-uz9YifyKlixV6AcKlOX8WNdtF7l6nakGyLYxYaCa823bEBqyj/U2ssqtctO38itNEwXb8/lMzjdoJ+aaJuOdrw==
+"@fortawesome/fontawesome-common-types@6.7.2":
+  version "6.7.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.7.2.tgz#7123d74b0c1e726794aed1184795dbce12186470"
+  integrity sha512-Zs+YeHUC5fkt7Mg1l6XTniei3k4bwG/yo3iFUtZWd/pMx9g3fdvkSK9E0FOC+++phXOka78uJcYb8JaFkW52Xg==
+
+"@fortawesome/fontawesome-svg-core@6.7.2":
+  version "6.7.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.7.2.tgz#0ac6013724d5cc327c1eb81335b91300a4fce2f2"
+  integrity sha512-yxtOBWDrdi5DD5o1pmVdq3WMCvnobT0LU6R8RyyVXPvFRd2o79/0NCuQoCjNTeZz9EzA9xS3JxNWfv54RIHFEA==
   dependencies:
-    "@fortawesome/fontawesome-common-types" "6.3.0"
+    "@fortawesome/fontawesome-common-types" "6.7.2"
 
-"@fortawesome/free-regular-svg-icons@6.3.0":
-  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.3.0.tgz#286f87f777e6c96af59151e86647c81083029ee2"
-  integrity sha512-cZnwiVHZ51SVzWHOaNCIA+u9wevZjCuAGSvSYpNlm6A4H4Vhwh8481Bf/5rwheIC3fFKlgXxLKaw8Xeroz8Ntg==
+"@fortawesome/free-regular-svg-icons@6.7.2":
+  version "6.7.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.7.2.tgz#f1651e55e6651a15589b0569516208f9c65f96db"
+  integrity sha512-7Z/ur0gvCMW8G93dXIQOkQqHo2M5HLhYrRVC0//fakJXxcF1VmMPsxnG6Ee8qEylA8b8Q3peQXWMNZ62lYF28g==
   dependencies:
-    "@fortawesome/fontawesome-common-types" "6.3.0"
+    "@fortawesome/fontawesome-common-types" "6.7.2"
 
-"@fortawesome/free-solid-svg-icons@6.3.0":
-  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.3.0.tgz#d3bd33ae18bb15fdfc3ca136e2fea05f32768a65"
-  integrity sha512-x5tMwzF2lTH8pyv8yeZRodItP2IVlzzmBuD1M7BjawWgg9XAvktqJJ91Qjgoaf8qJpHQ8FEU9VxRfOkLhh86QA==
+"@fortawesome/free-solid-svg-icons@6.7.2":
+  version "6.7.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.7.2.tgz#fe25883b5eb8464a82918599950d283c465b57f6"
+  integrity sha512-GsBrnOzU8uj0LECDfD5zomZJIjrPhIlWU82AHwa2s40FKH+kcxQaBvBo3Z4TxyZHIyX8XTDxsyA33/Vx9eFuQA==
   dependencies:
-    "@fortawesome/fontawesome-common-types" "6.3.0"
+    "@fortawesome/fontawesome-common-types" "6.7.2"
 
-"@fortawesome/vue-fontawesome@3.0.3":
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.0.3.tgz#633e2998d11f7d4ed41f0d5ea461a22ec9b9d034"
-  integrity sha512-KCPHi9QemVXGMrfuwf3nNnNo129resAIQWut9QTAMXmXqL2ErABC6ohd2yY5Ipq0CLWNbKHk8TMdTXL/Zf3ZhA==
+"@fortawesome/vue-fontawesome@3.0.8":
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.0.8.tgz#1e8032df151173d8174ac9f5a28da3c0f5a495e4"
+  integrity sha512-yyHHAj4G8pQIDfaIsMvQpwKMboIZtcHTUvPqXjOHyldh1O1vZfH4W03VDPv5RvI9P6DLTzJQlmVgj9wCf7c2Fw==
 
-"@humanwhocodes/config-array@^0.11.8":
-  version "0.11.8"
-  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.8.tgz#03595ac2075a4dc0f191cc2131de14fbd7d410b9"
-  integrity sha512-UybHIJzJnR5Qc/MsD9Kr+RpO2h+/P1GhOwdiLPXK5TWk5sgTdu88bTD9UP+CKbPPh5Rni1u0GjAdYQLemG8g+g==
+"@humanwhocodes/config-array@^0.13.0":
+  version "0.13.0"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.13.0.tgz#fb907624df3256d04b9aa2df50d7aa97ec648748"
+  integrity sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==
   dependencies:
-    "@humanwhocodes/object-schema" "^1.2.1"
-    debug "^4.1.1"
+    "@humanwhocodes/object-schema" "^2.0.3"
+    debug "^4.3.1"
     minimatch "^3.0.5"
 
 "@humanwhocodes/module-importer@^1.0.1":
@@ -1663,10 +1267,10 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz#af5b2691a22b44be847b0ca81641c5fb6ad0172c"
   integrity sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==
 
-"@humanwhocodes/object-schema@^1.2.1":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
-  integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
+"@humanwhocodes/object-schema@^2.0.3":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz#4a2868d75d6d6963e423bcf90b7fd1be343409d3"
+  integrity sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==
 
 "@intlify/bundle-utils@3.4.0":
   version "3.4.0"
@@ -1679,30 +1283,21 @@
     source-map "0.6.1"
     yaml-eslint-parser "^0.3.2"
 
-"@intlify/core-base@9.2.2":
-  version "9.2.2"
-  resolved "https://registry.yarnpkg.com/@intlify/core-base/-/core-base-9.2.2.tgz#5353369b05cc9fe35cab95fe20afeb8a4481f939"
-  integrity sha512-JjUpQtNfn+joMbrXvpR4hTF8iJQ2sEFzzK3KIESOx+f+uwIjgw20igOyaIdhfsVVBCds8ZM64MoeNSx+PHQMkA==
+"@intlify/core-base@10.0.5":
+  version "10.0.5"
+  resolved "https://registry.yarnpkg.com/@intlify/core-base/-/core-base-10.0.5.tgz#c4d992381f8c3a50c79faf67be3404b399c3be28"
+  integrity sha512-F3snDTQs0MdvnnyzTDTVkOYVAZOE/MHwRvF7mn7Jw1yuih4NrFYLNYIymGlLmq4HU2iIdzYsZ7f47bOcwY73XQ==
   dependencies:
-    "@intlify/devtools-if" "9.2.2"
-    "@intlify/message-compiler" "9.2.2"
-    "@intlify/shared" "9.2.2"
-    "@intlify/vue-devtools" "9.2.2"
+    "@intlify/message-compiler" "10.0.5"
+    "@intlify/shared" "10.0.5"
 
-"@intlify/devtools-if@9.2.2":
-  version "9.2.2"
-  resolved "https://registry.yarnpkg.com/@intlify/devtools-if/-/devtools-if-9.2.2.tgz#b13d9ac4b4e2fe6d2e7daa556517a8061fe8bd39"
-  integrity sha512-4ttr/FNO29w+kBbU7HZ/U0Lzuh2cRDhP8UlWOtV9ERcjHzuyXVZmjyleESK6eVP60tGC9QtQW9yZE+JeRhDHkg==
+"@intlify/message-compiler@10.0.5":
+  version "10.0.5"
+  resolved "https://registry.yarnpkg.com/@intlify/message-compiler/-/message-compiler-10.0.5.tgz#4eeace9f4560020d5e5d77f32bed7755e71d8efd"
+  integrity sha512-6GT1BJ852gZ0gItNZN2krX5QAmea+cmdjMvsWohArAZ3GmHdnNANEcF9JjPXAMRtQ6Ux5E269ymamg/+WU6tQA==
   dependencies:
-    "@intlify/shared" "9.2.2"
-
-"@intlify/message-compiler@9.2.2":
-  version "9.2.2"
-  resolved "https://registry.yarnpkg.com/@intlify/message-compiler/-/message-compiler-9.2.2.tgz#e42ab6939b8ae5b3d21faf6a44045667a18bba1c"
-  integrity sha512-IUrQW7byAKN2fMBe8z6sK6riG1pue95e5jfokn8hA5Q3Bqy4MBJ5lJAofUsawQJYHeoPJ7svMDyBaVJ4d0GTtA==
-  dependencies:
-    "@intlify/shared" "9.2.2"
-    source-map "0.6.1"
+    "@intlify/shared" "10.0.5"
+    source-map-js "^1.0.2"
 
 "@intlify/message-compiler@next":
   version "9.2.0-beta.34"
@@ -1712,24 +1307,21 @@
     "@intlify/shared" "9.2.0-beta.34"
     source-map "0.6.1"
 
+"@intlify/shared@10.0.5":
+  version "10.0.5"
+  resolved "https://registry.yarnpkg.com/@intlify/shared/-/shared-10.0.5.tgz#1b46ca8b541f03508fe28da8f34e4bb85506d6bc"
+  integrity sha512-bmsP4L2HqBF6i6uaMqJMcFBONVjKt+siGluRq4Ca4C0q7W2eMaVZr8iCgF9dKbcVXutftkC7D6z2SaSMmLiDyA==
+
 "@intlify/shared@9.2.0-beta.34", "@intlify/shared@next":
   version "9.2.0-beta.34"
   resolved "https://registry.yarnpkg.com/@intlify/shared/-/shared-9.2.0-beta.34.tgz#e8e9a93455eadcc9785fe2e2437fe037fc267f7d"
   integrity sha512-hbUKcVbTOkLVpnlSeZE1OPgEI7FpvhuZF/gb84xECTjXEImIa3u0fIcJKUUffv3dlAx8fMOE5xKgDzngidm0tw==
 
-"@intlify/shared@9.2.2", "@intlify/shared@^9.2.2":
+"@intlify/shared@^9.2.2":
   version "9.2.2"
   resolved "https://registry.yarnpkg.com/@intlify/shared/-/shared-9.2.2.tgz#5011be9ca2b4ab86f8660739286e2707f9abb4a5"
   integrity sha512-wRwTpsslgZS5HNyM7uDQYZtxnbI12aGiBZURX3BTR9RFIKKRWpllTsgzHWvj3HKm3Y2Sh5LPC1r0PDCKEhVn9Q==
 
-"@intlify/vue-devtools@9.2.2":
-  version "9.2.2"
-  resolved "https://registry.yarnpkg.com/@intlify/vue-devtools/-/vue-devtools-9.2.2.tgz#b95701556daf7ebb3a2d45aa3ae9e6415aed8317"
-  integrity sha512-+dUyqyCHWHb/UcvY1MlIpO87munedm3Gn6E9WWYdWrMuYLcoIoOEVDWSS8xSwtlPU+kA+MEQTP6Q1iI/ocusJg==
-  dependencies:
-    "@intlify/core-base" "9.2.2"
-    "@intlify/shared" "9.2.2"
-
 "@intlify/vue-i18n-loader@5.0.1":
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/@intlify/vue-i18n-loader/-/vue-i18n-loader-5.0.1.tgz#af7d32059e32138e91495e5240f7ce2adb71c738"
@@ -1741,6 +1333,18 @@
     json5 "^2.2.0"
     loader-utils "^2.0.0"
 
+"@isaacs/cliui@^8.0.2":
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/@isaacs/cliui/-/cliui-8.0.2.tgz#b37667b7bc181c168782259bab42474fbf52b550"
+  integrity sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==
+  dependencies:
+    string-width "^5.1.2"
+    string-width-cjs "npm:string-width@^4.2.0"
+    strip-ansi "^7.0.1"
+    strip-ansi-cjs "npm:strip-ansi@^6.0.1"
+    wrap-ansi "^8.1.0"
+    wrap-ansi-cjs "npm:wrap-ansi@^7.0.0"
+
 "@istanbuljs/schema@^0.1.2":
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/@istanbuljs/schema/-/schema-0.1.3.tgz#e45e384e4b8ec16bce2fd903af78450f6bf7ec98"
@@ -1782,21 +1386,35 @@
     "@jridgewell/sourcemap-codec" "^1.4.10"
     "@jridgewell/trace-mapping" "^0.3.9"
 
-"@jridgewell/resolve-uri@3.1.0":
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz#2203b118c157721addfe69d47b70465463066d78"
-  integrity sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==
+"@jridgewell/gen-mapping@^0.3.5":
+  version "0.3.5"
+  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz#dcce6aff74bdf6dad1a95802b69b04a2fcb1fb36"
+  integrity sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==
+  dependencies:
+    "@jridgewell/set-array" "^1.2.1"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+    "@jridgewell/trace-mapping" "^0.3.24"
 
 "@jridgewell/resolve-uri@^3.0.3":
   version "3.0.5"
   resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.0.5.tgz#68eb521368db76d040a6315cdb24bf2483037b9c"
   integrity sha512-VPeQ7+wH0itvQxnG+lIzWgkysKIr3L9sslimFW55rHMdGu/qCQ5z5h9zq4gI8uBtqkpHhsF4Z/OwExufUCThew==
 
+"@jridgewell/resolve-uri@^3.1.0":
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz#7a0ee601f60f99a20c7c7c5ff0c80388c1189bd6"
+  integrity sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==
+
 "@jridgewell/set-array@^1.0.0", "@jridgewell/set-array@^1.0.1":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.1.2.tgz#7c6cf998d6d20b914c0a55a91ae928ff25965e72"
   integrity sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==
 
+"@jridgewell/set-array@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.2.1.tgz#558fb6472ed16a4c850b889530e6b36438c49280"
+  integrity sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==
+
 "@jridgewell/source-map@^0.3.2":
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/@jridgewell/source-map/-/source-map-0.3.2.tgz#f45351aaed4527a298512ec72f81040c998580fb"
@@ -1805,16 +1423,21 @@
     "@jridgewell/gen-mapping" "^0.3.0"
     "@jridgewell/trace-mapping" "^0.3.9"
 
-"@jridgewell/sourcemap-codec@1.4.14":
-  version "1.4.14"
-  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz#add4c98d341472a289190b424efbdb096991bb24"
-  integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==
-
 "@jridgewell/sourcemap-codec@^1.4.10":
   version "1.4.11"
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.11.tgz#771a1d8d744eeb71b6adb35808e1a6c7b9b8c8ec"
   integrity sha512-Fg32GrJo61m+VqYSdRSjRXMjQ06j8YIYfcTqndLYVAaHmroZHLJZCydsWBOTDqXS2v+mjxohBWEMfg97GXmYQg==
 
+"@jridgewell/sourcemap-codec@^1.4.14":
+  version "1.4.15"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32"
+  integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
+
+"@jridgewell/sourcemap-codec@^1.5.0":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz#3188bcb273a414b0d215fd22a58540b989b9409a"
+  integrity sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==
+
 "@jridgewell/trace-mapping@^0.3.0":
   version "0.3.4"
   resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.4.tgz#f6a0832dffd5b8a6aaa633b7d9f8e8e94c83a0c3"
@@ -1831,13 +1454,13 @@
     "@jridgewell/resolve-uri" "^3.0.3"
     "@jridgewell/sourcemap-codec" "^1.4.10"
 
-"@jridgewell/trace-mapping@^0.3.17":
-  version "0.3.17"
-  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz#793041277af9073b0951a7fe0f0d8c4c98c36985"
-  integrity sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==
+"@jridgewell/trace-mapping@^0.3.24", "@jridgewell/trace-mapping@^0.3.25":
+  version "0.3.25"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz#15f190e98895f3fc23276ee14bc76b675c2e50f0"
+  integrity sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==
   dependencies:
-    "@jridgewell/resolve-uri" "3.1.0"
-    "@jridgewell/sourcemap-codec" "1.4.14"
+    "@jridgewell/resolve-uri" "^3.1.0"
+    "@jridgewell/sourcemap-codec" "^1.4.14"
 
 "@jridgewell/trace-mapping@^0.3.9":
   version "0.3.14"
@@ -1878,10 +1501,10 @@
     pathval "1.1.1"
     type-detect "4.0.8"
 
-"@nightwatch/html-reporter-template@0.1.4":
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/@nightwatch/html-reporter-template/-/html-reporter-template-0.1.4.tgz#c70db1a13bb2e7e1932e6b10ac1e022e61177c94"
-  integrity sha512-fVylXypRuNJbyFAwY/5H2QM1A1XVoZWis0zhiMwA5LQN0cxHzpG2aUheb+qP1EfkxhFxwSUHOcrvphFLbPA8ow==
+"@nightwatch/html-reporter-template@0.2.1":
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/@nightwatch/html-reporter-template/-/html-reporter-template-0.2.1.tgz#9fa86e8cab6ee703d2e55b47abac92613f97a298"
+  integrity sha512-GEBeGoXVmTYPtNC4Yq34vfgxf6mlFyEagxpsfH18Qe5BvctF2rprX+wI5dKBm9p5IqHo6ZOcXHCufOeP3cjuOw==
 
 "@nodelib/fs.scandir@2.1.3":
   version "2.1.3"
@@ -1925,23 +1548,31 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
-"@ruffle-rs/ruffle@0.1.0-nightly.2022.7.12":
-  version "0.1.0-nightly.2022.7.12"
-  resolved "https://registry.yarnpkg.com/@ruffle-rs/ruffle/-/ruffle-0.1.0-nightly.2022.7.12.tgz#c2d77fce7a0e98d51a6535371550e0bff019d0ea"
-  integrity sha512-DFsiT4kdUuSHsYXzHV97e9Ui3FkcsHEg1GyHJipt/lCpCoZ2uRtP41uEz9eNc9ug8jWd7UyXxJmdkkRvs9UHgQ==
+"@one-ini/wasm@0.1.1":
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/@one-ini/wasm/-/wasm-0.1.1.tgz#6013659736c9dbfccc96e8a9c2b3de317df39323"
+  integrity sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==
+
+"@pkgjs/parseargs@^0.11.0":
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
+  integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==
+
+"@rtsao/scc@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@rtsao/scc/-/scc-1.1.0.tgz#927dd2fae9bc3361403ac2c7a00c32ddce9ad7e8"
+  integrity sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==
+
+"@ruffle-rs/ruffle@0.1.0-nightly.2025.1.13":
+  version "0.1.0-nightly.2025.1.13"
+  resolved "https://registry.yarnpkg.com/@ruffle-rs/ruffle/-/ruffle-0.1.0-nightly.2025.1.13.tgz#0d9c796b6b7f28c524f6ebbc356f3697ca0b7488"
+  integrity sha512-deFf2TE6UscMv5fRo3kjxJtpHCrS1kc2L7Hi8w2QSSbnvODJMqEGDYcp7+VI7R85lDOSze0YPJnDS4S71JHzkg==
 
 "@sinclair/typebox@^0.24.1":
   version "0.24.51"
   resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.24.51.tgz#645f33fe4e02defe26f2f5c0410e1c094eac7f5f"
   integrity sha512-1P1OROm/rdubP5aFDSZQILU0vrLCJ4fvHt6EoqHEM+2D/G5MK3bIaymUKLit8Js9gbns5UyJnkP/TZROLw4tUA==
 
-"@sinonjs/commons@^1.7.0":
-  version "1.8.3"
-  resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.8.3.tgz#3802ddd21a50a949b6721ddd72da36e67e7f1b2d"
-  integrity sha512-xkNcLAn/wZaX14RPlwizcKicDk9G3F8m2nU3L7Ukm5zBgTwiT0wsoFAHx9Jq56fJA1z/7uKGtCRu16sOUCLIHQ==
-  dependencies:
-    type-detect "4.0.8"
-
 "@sinonjs/commons@^2.0.0":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-2.0.0.tgz#fd4ca5b063554307e8327b4564bd56d3b73924a3"
@@ -1949,24 +1580,31 @@
   dependencies:
     type-detect "4.0.8"
 
-"@sinonjs/fake-timers@10.0.2":
+"@sinonjs/commons@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-3.0.0.tgz#beb434fe875d965265e04722ccfc21df7f755d72"
+  integrity sha512-jXBtWAF4vmdNmZgD5FoKsVLv3rPgDnLgPbU84LIJ3otV44vJlDRokVng5v8NFJdCf/da9legHcKaRuZs4L7faA==
+  dependencies:
+    type-detect "4.0.8"
+
+"@sinonjs/fake-timers@^10.0.2":
   version "10.0.2"
   resolved "https://registry.yarnpkg.com/@sinonjs/fake-timers/-/fake-timers-10.0.2.tgz#d10549ed1f423d80639c528b6c7f5a1017747d0c"
   integrity sha512-SwUDyjWnah1AaNl7kxsa7cfLhlTYoiyhDAIgyh+El30YvXs/o7OLXpYH88Zdhyx9JExKrmHDJ+10bwIcY80Jmw==
   dependencies:
     "@sinonjs/commons" "^2.0.0"
 
-"@sinonjs/fake-timers@^7.0.4":
-  version "7.1.2"
-  resolved "https://registry.yarnpkg.com/@sinonjs/fake-timers/-/fake-timers-7.1.2.tgz#2524eae70c4910edccf99b2f4e6efc5894aff7b5"
-  integrity sha512-iQADsW4LBMISqZ6Ci1dupJL9pprqwcVFTcOsEmQOEhW+KLCVn/Y4Jrvg2k19fIHCp+iFprriYPTdRcQR8NbUPg==
+"@sinonjs/fake-timers@^10.3.0":
+  version "10.3.0"
+  resolved "https://registry.yarnpkg.com/@sinonjs/fake-timers/-/fake-timers-10.3.0.tgz#55fdff1ecab9f354019129daf4df0dd4d923ea66"
+  integrity sha512-V4BG07kuYSUkTCSBHG8G8TNhM+F19jXFWnQtzj+we8DrkpSBCee9Z3Ms8yiGer/dlmhe35/Xdgyo3/0rQKg7YA==
   dependencies:
-    "@sinonjs/commons" "^1.7.0"
+    "@sinonjs/commons" "^3.0.0"
 
-"@sinonjs/samsam@^7.0.1":
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/@sinonjs/samsam/-/samsam-7.0.1.tgz#5b5fa31c554636f78308439d220986b9523fc51f"
-  integrity sha512-zsAk2Jkiq89mhZovB2LLOdTCxJF4hqqTToGP0ASWlhp4I1hqOjcfmZGafXntCN7MDC6yySH0mFHrYtHceOeLmw==
+"@sinonjs/samsam@^8.0.0":
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/@sinonjs/samsam/-/samsam-8.0.0.tgz#0d488c91efb3fa1442e26abea81759dfc8b5ac60"
+  integrity sha512-Bp8KUVlLp8ibJZrnvq2foVhP0IVX2CIprMJPK0vqGqgrDa0OHVKeZyBykqskkrdxV6yKBPmGasO8LVjAKR3Gew==
   dependencies:
     "@sinonjs/commons" "^2.0.0"
     lodash.get "^4.4.2"
@@ -1977,10 +1615,10 @@
   resolved "https://registry.yarnpkg.com/@sinonjs/text-encoding/-/text-encoding-0.7.2.tgz#5981a8db18b56ba38ef0efb7d995b12aa7b51918"
   integrity sha512-sXXKG+uL9IrKqViTtao2Ws6dy0znu9sOaP1di/jKGW1M6VssO8vlpXCQcpZ+jisQ1tTFAC5Jo/EOzFbggBagFQ==
 
-"@socket.io/base64-arraybuffer@~1.0.2":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@socket.io/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz#568d9beae00b0d835f4f8c53fd55714986492e61"
-  integrity sha512-dOlCBKnDw4iShaIsH/bxujKTM18+2TOAsYz+KSc11Am38H4q5Xw8Bbz97ZYdrVNM+um3p7w86Bvvmcn9q+5+eQ==
+"@socket.io/component-emitter@~3.1.0":
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz#821f8442f4175d8f0467b9daf26e3a18e2d02af2"
+  integrity sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==
 
 "@testim/chrome-version@^1.1.3":
   version "1.1.3"
@@ -2002,11 +1640,6 @@
   resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
   integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==
 
-"@types/component-emitter@^1.2.10":
-  version "1.2.11"
-  resolved "https://registry.yarnpkg.com/@types/component-emitter/-/component-emitter-1.2.11.tgz#50d47d42b347253817a39709fef03ce66a108506"
-  integrity sha512-SRXjM+tfsSlA9VuG8hGO2nft2p8zjXCK1VcC6N4NXbBbYbSia9kzCChYQajIjzIqOOOuh5Ock6MmV2oux4jDZQ==
-
 "@types/cookie@^0.4.1":
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/@types/cookie/-/cookie-0.4.1.tgz#bfd02c1f2224567676c1545199f87c3a861d878d"
@@ -2128,169 +1761,167 @@
   dependencies:
     "@types/node" "*"
 
-"@ungap/event-target@0.2.3":
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/@ungap/event-target/-/event-target-0.2.3.tgz#be682c681126dca2371c4e1a1721f8e8bb400905"
-  integrity sha512-7Bz0qdvxNGV9n0f+xcMKU7wsEfK6PNzo8IdAcOiBgMNyCuU0Mk9dv0Hbd/Kgr+MFFfn4xLHFbuOt820egT5qEA==
+"@ungap/event-target@0.2.4":
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/@ungap/event-target/-/event-target-0.2.4.tgz#8b083a62ee665228bac08013fa516a3488528bb8"
+  integrity sha512-u9Fd3k2qfMtn+0dxbCn/y0pzQ9Ucw6lWR984CrHcbxc+WzcMkJE4VjWHWSb9At40MjwMyHCkJNXroS55Osshhw==
 
 "@ungap/promise-all-settled@1.1.2":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@ungap/promise-all-settled/-/promise-all-settled-1.1.2.tgz#aa58042711d6e3275dd37dc597e5d31e8c290a44"
   integrity sha512-sL/cEvJWAnClXw0wHk85/2L0G6Sj8UB0Ctc1TEMbKSsmpRosqhwj9gWgFRZSrBr2f9tiXISwNhCPmlfqUqyb9Q==
 
+"@ungap/structured-clone@^1.2.0":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.1.tgz#28fa185f67daaf7b7a1a8c1d445132c5d979f8bd"
+  integrity sha512-fEzPV3hSkSMltkw152tJKNARhOupqbH96MZWyRjNaYZOMIzbrTeQDG+MTc6Mr2pgzFQzFxAfmhGDNP5QK++2ZA==
+
 "@vue/babel-helper-vue-jsx-merge-props@1.4.0":
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.4.0.tgz#8d53a1e21347db8edbe54d339902583176de09f2"
   integrity sha512-JkqXfCkUDp4PIlFdDQ0TdXoIejMtTHP67/pvxlgeY+u5k3LEdKuWZ3LK6xkxo52uDoABIVyRwqVkfLQJhk7VBA==
 
-"@vue/babel-helper-vue-transform-on@^1.0.2":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.0.2.tgz#9b9c691cd06fc855221a2475c3cc831d774bc7dc"
-  integrity sha512-hz4R8tS5jMn8lDq6iD+yWL6XNB699pGIVLk7WSJnn1dbpjaazsjZQkieJoRX6gW5zpYSCFqQ7jUquPNY65tQYA==
+"@vue/babel-helper-vue-transform-on@1.2.5":
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.2.5.tgz#b9e195b92bfa8d15d5aa9581ca01cb702dbcc19d"
+  integrity sha512-lOz4t39ZdmU4DJAa2hwPYmKc8EsuGa2U0L9KaZaOJUt0UwQNjNA3AZTq6uEivhOKhhG1Wvy96SvYBoFmCg3uuw==
 
-"@vue/babel-plugin-jsx@1.1.1":
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@vue/babel-plugin-jsx/-/babel-plugin-jsx-1.1.1.tgz#0c5bac27880d23f89894cd036a37b55ef61ddfc1"
-  integrity sha512-j2uVfZjnB5+zkcbc/zsOc0fSNGCMMjaEXP52wdwdIfn0qjFfEYpYZBFKFg+HHnQeJCVrjOeO0YxgaL7DMrym9w==
+"@vue/babel-plugin-jsx@1.2.5":
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/@vue/babel-plugin-jsx/-/babel-plugin-jsx-1.2.5.tgz#77f4f9f189d00c24ebd587ab84ae615dfa1c3abb"
+  integrity sha512-zTrNmOd4939H9KsRIGmmzn3q2zvv1mjxkYZHgqHZgDrXz5B1Q3WyGEjO2f+JrmKghvl1JIRcvo63LgM1kH5zFg==
   dependencies:
-    "@babel/helper-module-imports" "^7.0.0"
-    "@babel/plugin-syntax-jsx" "^7.0.0"
-    "@babel/template" "^7.0.0"
-    "@babel/traverse" "^7.0.0"
-    "@babel/types" "^7.0.0"
-    "@vue/babel-helper-vue-transform-on" "^1.0.2"
-    camelcase "^6.0.0"
-    html-tags "^3.1.0"
+    "@babel/helper-module-imports" "^7.24.7"
+    "@babel/helper-plugin-utils" "^7.24.8"
+    "@babel/plugin-syntax-jsx" "^7.24.7"
+    "@babel/template" "^7.25.0"
+    "@babel/traverse" "^7.25.6"
+    "@babel/types" "^7.25.6"
+    "@vue/babel-helper-vue-transform-on" "1.2.5"
+    "@vue/babel-plugin-resolve-type" "1.2.5"
+    html-tags "^3.3.1"
     svg-tags "^1.0.0"
 
-"@vue/compiler-core@3.2.45":
-  version "3.2.45"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.2.45.tgz#d9311207d96f6ebd5f4660be129fb99f01ddb41b"
-  integrity sha512-rcMj7H+PYe5wBV3iYeUgbCglC+pbpN8hBLTJvRiK2eKQiWqu+fG9F+8sW99JdL4LQi7Re178UOxn09puSXvn4A==
+"@vue/babel-plugin-resolve-type@1.2.5":
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/@vue/babel-plugin-resolve-type/-/babel-plugin-resolve-type-1.2.5.tgz#f6ed0d39987fe0158370659b73156c55e80d17b5"
+  integrity sha512-U/ibkQrf5sx0XXRnUZD1mo5F7PkpKyTbfXM3a3rC4YnUz6crHEz9Jg09jzzL6QYlXNto/9CePdOg/c87O4Nlfg==
   dependencies:
-    "@babel/parser" "^7.16.4"
-    "@vue/shared" "3.2.45"
+    "@babel/code-frame" "^7.24.7"
+    "@babel/helper-module-imports" "^7.24.7"
+    "@babel/helper-plugin-utils" "^7.24.8"
+    "@babel/parser" "^7.25.6"
+    "@vue/compiler-sfc" "^3.5.3"
+
+"@vue/compiler-core@3.5.13":
+  version "3.5.13"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.5.13.tgz#b0ae6c4347f60c03e849a05d34e5bf747c9bda05"
+  integrity sha512-oOdAkwqUfW1WqpwSYJce06wvt6HljgY3fGeM9NcVA1HaYOij3mZG9Rkysn0OHuyUAGMbEbARIpsG+LPVlBJ5/Q==
+  dependencies:
+    "@babel/parser" "^7.25.3"
+    "@vue/shared" "3.5.13"
+    entities "^4.5.0"
     estree-walker "^2.0.2"
-    source-map "^0.6.1"
+    source-map-js "^1.2.0"
 
-"@vue/compiler-dom@3.2.45":
-  version "3.2.45"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.2.45.tgz#c43cc15e50da62ecc16a42f2622d25dc5fd97dce"
-  integrity sha512-tyYeUEuKqqZO137WrZkpwfPCdiiIeXYCcJ8L4gWz9vqaxzIQRccTSwSWZ/Axx5YR2z+LvpUbmPNXxuBU45lyRw==
+"@vue/compiler-dom@3.5.13":
+  version "3.5.13"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.5.13.tgz#bb1b8758dbc542b3658dda973b98a1c9311a8a58"
+  integrity sha512-ZOJ46sMOKUjO3e94wPdCzQ6P1Lx/vhp2RSvfaab88Ajexs0AHeV0uasYhi99WPaogmBlRHNRuly8xV75cNTMDA==
   dependencies:
-    "@vue/compiler-core" "3.2.45"
-    "@vue/shared" "3.2.45"
+    "@vue/compiler-core" "3.5.13"
+    "@vue/shared" "3.5.13"
 
-"@vue/compiler-sfc@3.2.45":
-  version "3.2.45"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.2.45.tgz#7f7989cc04ec9e7c55acd406827a2c4e96872c70"
-  integrity sha512-1jXDuWah1ggsnSAOGsec8cFjT/K6TMZ0sPL3o3d84Ft2AYZi2jWJgRMjw4iaK0rBfA89L5gw427H4n1RZQBu6Q==
+"@vue/compiler-sfc@3.5.13", "@vue/compiler-sfc@^3.5.3":
+  version "3.5.13"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.5.13.tgz#461f8bd343b5c06fac4189c4fef8af32dea82b46"
+  integrity sha512-6VdaljMpD82w6c2749Zhf5T9u5uLBWKnVue6XWxprDobftnletJ8+oel7sexFfM3qIxNmVE7LSFGTpv6obNyaQ==
   dependencies:
-    "@babel/parser" "^7.16.4"
-    "@vue/compiler-core" "3.2.45"
-    "@vue/compiler-dom" "3.2.45"
-    "@vue/compiler-ssr" "3.2.45"
-    "@vue/reactivity-transform" "3.2.45"
-    "@vue/shared" "3.2.45"
+    "@babel/parser" "^7.25.3"
+    "@vue/compiler-core" "3.5.13"
+    "@vue/compiler-dom" "3.5.13"
+    "@vue/compiler-ssr" "3.5.13"
+    "@vue/shared" "3.5.13"
     estree-walker "^2.0.2"
-    magic-string "^0.25.7"
-    postcss "^8.1.10"
-    source-map "^0.6.1"
+    magic-string "^0.30.11"
+    postcss "^8.4.48"
+    source-map-js "^1.2.0"
 
-"@vue/compiler-ssr@3.2.45":
-  version "3.2.45"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.2.45.tgz#bd20604b6e64ea15344d5b6278c4141191c983b2"
-  integrity sha512-6BRaggEGqhWht3lt24CrIbQSRD5O07MTmd+LjAn5fJj568+R9eUD2F7wMQJjX859seSlrYog7sUtrZSd7feqrQ==
+"@vue/compiler-ssr@3.5.13":
+  version "3.5.13"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.5.13.tgz#e771adcca6d3d000f91a4277c972a996d07f43ba"
+  integrity sha512-wMH6vrYHxQl/IybKJagqbquvxpWCuVYpoUJfCqFZwa/JY1GdATAQ+TgVtgrwwMZ0D07QhA99rs/EAAWfvG6KpA==
   dependencies:
-    "@vue/compiler-dom" "3.2.45"
-    "@vue/shared" "3.2.45"
+    "@vue/compiler-dom" "3.5.13"
+    "@vue/shared" "3.5.13"
 
 "@vue/devtools-api@^6.0.0-beta.11":
   version "6.1.3"
   resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.1.3.tgz#a44c52e8fa6d22f84db3abdcdd0be5135b7dd7cf"
   integrity sha512-79InfO2xHv+WHIrH1bHXQUiQD/wMls9qBk6WVwGCbdwP7/3zINtvqPNMtmSHXsIKjvUAHc8L0ouOj6ZQQRmcXg==
 
-"@vue/devtools-api@^6.2.1":
-  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.2.1.tgz#6f2948ff002ec46df01420dfeff91de16c5b4092"
-  integrity sha512-OEgAMeQXvCoJ+1x8WyQuVZzFo0wcyCmUR3baRVLmKBo1LmYZWMlRiXlux5jd0fqVJu6PfDbOrZItVqUEzLobeQ==
+"@vue/devtools-api@^6.5.0", "@vue/devtools-api@^6.6.4":
+  version "6.6.4"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.6.4.tgz#cbe97fe0162b365edc1dba80e173f90492535343"
+  integrity sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==
 
-"@vue/devtools-api@^6.4.5":
-  version "6.4.5"
-  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.4.5.tgz#d54e844c1adbb1e677c81c665ecef1a2b4bb8380"
-  integrity sha512-JD5fcdIuFxU4fQyXUu3w2KpAJHzTVdN+p4iOX2lMWSHMOoQdMAcpFLZzm9Z/2nmsoZ1a96QEhZ26e50xLBsgOQ==
-
-"@vue/devtools-api@^6.5.0":
-  version "6.5.0"
-  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.5.0.tgz#98b99425edee70b4c992692628fa1ea2c1e57d07"
-  integrity sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==
-
-"@vue/reactivity-transform@3.2.45":
-  version "3.2.45"
-  resolved "https://registry.yarnpkg.com/@vue/reactivity-transform/-/reactivity-transform-3.2.45.tgz#07ac83b8138550c83dfb50db43cde1e0e5e8124d"
-  integrity sha512-BHVmzYAvM7vcU5WmuYqXpwaBHjsS8T63jlKGWVtHxAHIoMIlmaMyurUSEs1Zcg46M4AYT5MtB1U274/2aNzjJQ==
+"@vue/reactivity@3.5.13":
+  version "3.5.13"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.5.13.tgz#b41ff2bb865e093899a22219f5b25f97b6fe155f"
+  integrity sha512-NaCwtw8o48B9I6L1zl2p41OHo/2Z4wqYGGIK1Khu5T7yxrn+ATOixn/Udn2m+6kZKB/J7cuT9DbWWhRxqixACg==
   dependencies:
-    "@babel/parser" "^7.16.4"
-    "@vue/compiler-core" "3.2.45"
-    "@vue/shared" "3.2.45"
-    estree-walker "^2.0.2"
-    magic-string "^0.25.7"
+    "@vue/shared" "3.5.13"
 
-"@vue/reactivity@3.2.45":
-  version "3.2.45"
-  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.2.45.tgz#412a45b574de601be5a4a5d9a8cbd4dee4662ff0"
-  integrity sha512-PRvhCcQcyEVohW0P8iQ7HDcIOXRjZfAsOds3N99X/Dzewy8TVhTCT4uXpAHfoKjVTJRA0O0K+6QNkDIZAxNi3A==
+"@vue/runtime-core@3.5.13":
+  version "3.5.13"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.5.13.tgz#1fafa4bf0b97af0ebdd9dbfe98cd630da363a455"
+  integrity sha512-Fj4YRQ3Az0WTZw1sFe+QDb0aXCerigEpw418pw1HBUKFtnQHWzwojaukAs2X/c9DQz4MQ4bsXTGlcpGxU/RCIw==
   dependencies:
-    "@vue/shared" "3.2.45"
+    "@vue/reactivity" "3.5.13"
+    "@vue/shared" "3.5.13"
 
-"@vue/runtime-core@3.2.45":
-  version "3.2.45"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.2.45.tgz#7ad7ef9b2519d41062a30c6fa001ec43ac549c7f"
-  integrity sha512-gzJiTA3f74cgARptqzYswmoQx0fIA+gGYBfokYVhF8YSXjWTUA2SngRzZRku2HbGbjzB6LBYSbKGIaK8IW+s0A==
+"@vue/runtime-dom@3.5.13":
+  version "3.5.13"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.5.13.tgz#610fc795de9246300e8ae8865930d534e1246215"
+  integrity sha512-dLaj94s93NYLqjLiyFzVs9X6dWhTdAlEAciC3Moq7gzAc13VJUdCnjjRurNM6uTLFATRHexHCTu/Xp3eW6yoog==
   dependencies:
-    "@vue/reactivity" "3.2.45"
-    "@vue/shared" "3.2.45"
+    "@vue/reactivity" "3.5.13"
+    "@vue/runtime-core" "3.5.13"
+    "@vue/shared" "3.5.13"
+    csstype "^3.1.3"
 
-"@vue/runtime-dom@3.2.45":
-  version "3.2.45"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.2.45.tgz#1a2ef6ee2ad876206fbbe2a884554bba2d0faf59"
-  integrity sha512-cy88YpfP5Ue2bDBbj75Cb4bIEZUMM/mAkDMfqDTpUYVgTf/kuQ2VQ8LebuZ8k6EudgH8pYhsGWHlY0lcxlvTwA==
+"@vue/server-renderer@3.5.13":
+  version "3.5.13"
+  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.5.13.tgz#429ead62ee51de789646c22efe908e489aad46f7"
+  integrity sha512-wAi4IRJV/2SAW3htkTlB+dHeRmpTiVIK1OGLWV1yeStVSebSQQOwGwIq0D3ZIoBj2C2qpgz5+vX9iEBkTdk5YA==
   dependencies:
-    "@vue/runtime-core" "3.2.45"
-    "@vue/shared" "3.2.45"
-    csstype "^2.6.8"
+    "@vue/compiler-ssr" "3.5.13"
+    "@vue/shared" "3.5.13"
 
-"@vue/server-renderer@3.2.45":
-  version "3.2.45"
-  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.2.45.tgz#ca9306a0c12b0530a1a250e44f4a0abac6b81f3f"
-  integrity sha512-ebiMq7q24WBU1D6uhPK//2OTR1iRIyxjF5iVq/1a5I1SDMDyDu4Ts6fJaMnjrvD3MqnaiFkKQj+LKAgz5WIK3g==
+"@vue/shared@3.5.13":
+  version "3.5.13"
+  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.5.13.tgz#87b309a6379c22b926e696893237826f64339b6f"
+  integrity sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==
+
+"@vue/test-utils@2.4.6":
+  version "2.4.6"
+  resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-2.4.6.tgz#7d534e70c4319d2a587d6a3b45a39e9695ade03c"
+  integrity sha512-FMxEjOpYNYiFe0GkaHsnJPXFHxQ6m4t8vI/ElPGpMWxZKpmRvQ33OIrvRXemy6yha03RxhOlQuy+gZMC3CQSow==
   dependencies:
-    "@vue/compiler-ssr" "3.2.45"
-    "@vue/shared" "3.2.45"
+    js-beautify "^1.14.9"
+    vue-component-type-helpers "^2.0.0"
 
-"@vue/shared@3.2.45":
-  version "3.2.45"
-  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.45.tgz#a3fffa7489eafff38d984e23d0236e230c818bc2"
-  integrity sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg==
-
-"@vue/test-utils@2.2.8":
-  version "2.2.8"
-  resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-2.2.8.tgz#2002a2b2c90309f66c5c175b735621438832a610"
-  integrity sha512-/R8DKzp41Ip/RqTt1jvOVi5gxby3EwNWiYHNYsG9FAjEvt0gzDvYN55lCKzX7IdnI5zVIOo5tHtts0SLT+JrWw==
-  dependencies:
-    js-beautify "1.14.6"
-
-"@vuelidate/core@2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@vuelidate/core/-/core-2.0.0.tgz#dfe73ba3f997646e07bd4da4f327fe53c29782cb"
-  integrity sha512-xIFgdQlScO0aaSZ0wTGPJh8YcTMNAj5veI8yPgiAyxOT+GV7vNQFiU1vpYWCL4cklkkhYvRRSC2OEX7YOZNmPQ==
+"@vuelidate/core@2.0.3":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@vuelidate/core/-/core-2.0.3.tgz#40468c5ed15b72bde880a026b0699c2f0f1ecede"
+  integrity sha512-AN6l7KF7+mEfyWG0doT96z+47ljwPpZfi9/JrNMkOGLFv27XVZvKzRLXlmDPQjPl/wOB1GNnHuc54jlCLRNqGA==
   dependencies:
     vue-demi "^0.13.11"
 
-"@vuelidate/validators@2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@vuelidate/validators/-/validators-2.0.0.tgz#1ddd86c6c81b2cfbb5720961e951cc53ec0a80be"
-  integrity sha512-fQQcmDWfz7pyH5/JPi0Ng2GEgNK1pUHn/Z/j5rG/Q+HwhgIXvJblTPcZwKOj1ABL7V4UVuGKECvZCDHNGOwdrg==
+"@vuelidate/validators@2.0.4":
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/@vuelidate/validators/-/validators-2.0.4.tgz#0a88a7b2b18f15fd9c384095593f369a6f7384e9"
+  integrity sha512-odTxtUZ2JpwwiQ10t0QWYJkkYrfd0SyFYhdHH44QQ1jDatlZgTh/KRzrWVmn/ib9Gq7H4hFD4e8ahoo5YlUlDw==
   dependencies:
     vue-demi "^0.13.11"
 
@@ -2428,10 +2059,10 @@ abab@^2.0.5, abab@^2.0.6:
   resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.6.tgz#41b80f2c871d19686216b82309231cfd3cb3d291"
   integrity sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==
 
-abbrev@^1.0.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
-  integrity sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==
+abbrev@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-2.0.0.tgz#cf59829b8b4f03f89dda2771cb7f3653828c89bf"
+  integrity sha512-6/mh1E2u2YgEsCHdY0Yx5oW+61gZU+1vXaoiHHrpKeuRNNgFvS+/jrwHiQhB5apAf5oB7UB7E19ol2R2LKH8hQ==
 
 accepts@~1.3.4:
   version "1.3.7"
@@ -2476,11 +2107,16 @@ acorn@^7.1.1, acorn@^7.4.1:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
 
-acorn@^8.5.0, acorn@^8.7.1, acorn@^8.8.0:
+acorn@^8.5.0, acorn@^8.7.1:
   version "8.8.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.0.tgz#88c0187620435c7f6015803f5539dae05a9dbea8"
   integrity sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==
 
+acorn@^8.9.0:
+  version "8.14.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.14.0.tgz#063e2c70cac5fb4f6467f0b11152e04c682795b0"
+  integrity sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==
+
 agent-base@6:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-6.0.2.tgz#49fff58577cfee3f37176feab4c22e00f86d7f77"
@@ -2507,7 +2143,7 @@ ajv-keywords@^5.0.0:
   dependencies:
     fast-deep-equal "^3.1.3"
 
-ajv@^6.10.0, ajv@^6.12.4, ajv@^6.12.5:
+ajv@^6.12.4, ajv@^6.12.5:
   version "6.12.6"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
   integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
@@ -2543,6 +2179,11 @@ ansi-colors@^3.0.0:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-3.2.4.tgz#e3a3da4bfbae6c86a9c285625de124a234026fbf"
 
+ansi-colors@^4.1.3:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-4.1.3.tgz#37611340eb2243e70cc604cad35d63270d48781b"
+  integrity sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==
+
 ansi-html-community@0.0.8:
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/ansi-html-community/-/ansi-html-community-0.0.8.tgz#69fbc4d6ccbe383f9736934ae34c3f8290f1bf41"
@@ -2570,6 +2211,11 @@ ansi-regex@^5.0.1:
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
   integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
 
+ansi-regex@^6.0.1:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-6.1.0.tgz#95ec409c69619d6cb1b8b34f14b660ef28ebd654"
+  integrity sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==
+
 ansi-styles@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
@@ -2595,6 +2241,11 @@ ansi-styles@^4.1.0:
     "@types/color-name" "^1.1.1"
     color-convert "^2.0.1"
 
+ansi-styles@^6.1.0:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-6.2.1.tgz#0e62320cf99c21afff3b3012192546aacbfb05c5"
+  integrity sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==
+
 ansi-to-html@0.7.2:
   version "0.7.2"
   resolved "https://registry.yarnpkg.com/ansi-to-html/-/ansi-to-html-0.7.2.tgz#a92c149e4184b571eb29a0135ca001a8e2d710cb"
@@ -2615,19 +2266,28 @@ argparse@^2.0.1:
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
   integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
 
+array-buffer-byte-length@^1.0.1, array-buffer-byte-length@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz#384d12a37295aec3769ab022ad323a18a51ccf8b"
+  integrity sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==
+  dependencies:
+    call-bound "^1.0.3"
+    is-array-buffer "^3.0.5"
+
 array-flatten@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
 
-array-includes@^3.1.6:
-  version "3.1.6"
-  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.6.tgz#9e9e720e194f198266ba9e18c29e6a9b0e4b225f"
-  integrity sha512-sgTbLvL6cNnw24FnbaDyjmvddQ2ML8arZsgaJhoABMoplz/4QRhtrYS+alr1BUM1Bwp6dhx8vVCBSLG+StwOFw==
+array-includes@^3.1.8:
+  version "3.1.8"
+  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.8.tgz#5e370cbe172fdd5dd6530c1d4aadda25281ba97d"
+  integrity sha512-itaWrbYbqpGXkGhZPGUulwnhVf5Hpy1xiCFsGqyIGglbBxmG5vSjxQen3/WGOjPpNEv1RtBLKxbmVXm8HpJStQ==
   dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.4"
-    es-abstract "^1.20.4"
-    get-intrinsic "^1.1.3"
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.2"
+    es-object-atoms "^1.0.0"
+    get-intrinsic "^1.2.4"
     is-string "^1.0.7"
 
 array-union@^2.1.0:
@@ -2635,25 +2295,50 @@ array-union@^2.1.0:
   resolved "https://registry.yarnpkg.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
   integrity sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==
 
-array.prototype.flat@^1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.3.1.tgz#ffc6576a7ca3efc2f46a143b9d1dda9b4b3cf5e2"
-  integrity sha512-roTU0KWIOmJ4DRLmwKd19Otg0/mT3qPNt0Qb3GWW8iObuZXxrjB/pzn0R3hqpRSWg4HCwqx+0vwOnWnvlOyeIA==
+array.prototype.findlastindex@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.5.tgz#8c35a755c72908719453f87145ca011e39334d0d"
+  integrity sha512-zfETvRFA8o7EiNn++N5f/kaCw221hrpGsDmcpndVupkPzEc1Wuf3VgC0qby1BbHs7f5DVYjgtEU2LLh5bqeGfQ==
   dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.4"
-    es-abstract "^1.20.4"
-    es-shim-unscopables "^1.0.0"
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.2"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
+    es-shim-unscopables "^1.0.2"
 
-array.prototype.flatmap@^1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.3.1.tgz#1aae7903c2100433cb8261cd4ed310aab5c4a183"
-  integrity sha512-8UGn9O1FDVvMNB0UlLv4voxRMze7+FpHyF5mSMRjWHUMlpoDViniy05870VlxhfgTnLbpuwTzvD76MTtWxB/mQ==
+array.prototype.flat@^1.3.2:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.3.3.tgz#534aaf9e6e8dd79fb6b9a9917f839ef1ec63afe5"
+  integrity sha512-rwG/ja1neyLqCuGZ5YYrznA62D4mZXg0i1cIskIUKSiqF3Cje9/wXAls9B9s1Wa2fomMsIv8czB8jZcPmxCXFg==
   dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.4"
-    es-abstract "^1.20.4"
-    es-shim-unscopables "^1.0.0"
+    call-bind "^1.0.8"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.5"
+    es-shim-unscopables "^1.0.2"
+
+array.prototype.flatmap@^1.3.2:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.3.3.tgz#712cc792ae70370ae40586264629e33aab5dd38b"
+  integrity sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg==
+  dependencies:
+    call-bind "^1.0.8"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.5"
+    es-shim-unscopables "^1.0.2"
+
+arraybuffer.prototype.slice@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.4.tgz#9d760d84dbdd06d0cbf92c8849615a1a7ab3183c"
+  integrity sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==
+  dependencies:
+    array-buffer-byte-length "^1.0.1"
+    call-bind "^1.0.8"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.5"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.6"
+    is-array-buffer "^3.0.4"
 
 arrify@^1.0.1:
   version "1.0.1"
@@ -2680,22 +2365,24 @@ asynckit@^0.4.0:
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
   integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
 
-autoprefixer@10.4.13:
-  version "10.4.13"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.13.tgz#b5136b59930209a321e9fa3dca2e7c4d223e83a8"
-  integrity sha512-49vKpMqcZYsJjwotvt4+h/BCjJVnhGwcLpDt5xkcaOG3eLrG/HUYLagrihYsQ+qrIBgIzX1Rw7a6L8I/ZA1Atg==
+autoprefixer@10.4.20:
+  version "10.4.20"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.20.tgz#5caec14d43976ef42e32dcb4bd62878e96be5b3b"
+  integrity sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==
   dependencies:
-    browserslist "^4.21.4"
-    caniuse-lite "^1.0.30001426"
-    fraction.js "^4.2.0"
+    browserslist "^4.23.3"
+    caniuse-lite "^1.0.30001646"
+    fraction.js "^4.3.7"
     normalize-range "^0.1.2"
-    picocolors "^1.0.0"
+    picocolors "^1.0.1"
     postcss-value-parser "^4.2.0"
 
-available-typed-arrays@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz#92f95616501069d07d10edb2fc37d3e1c65123b7"
-  integrity sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==
+available-typed-arrays@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz#a5cc375d6a03c2efc87a553f3e0b1522def14846"
+  integrity sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==
+  dependencies:
+    possible-typed-array-names "^1.0.0"
 
 axe-core@^4.6.1:
   version "4.6.2"
@@ -2711,12 +2398,12 @@ axios@^1.1.3:
     form-data "^4.0.0"
     proxy-from-env "^1.1.0"
 
-babel-loader@9.1.2:
-  version "9.1.2"
-  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-9.1.2.tgz#a16a080de52d08854ee14570469905a5fc00d39c"
-  integrity sha512-mN14niXW43tddohGl8HPu5yfQq70iUThvFL/4QzESA7GcZoC0eVOhvWdQ8+3UlSjaDE9MVtsW9mxDY07W7VpVA==
+babel-loader@9.2.1:
+  version "9.2.1"
+  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-9.2.1.tgz#04c7835db16c246dd19ba0914418f3937797587b"
+  integrity sha512-fqe8naHt46e0yIdkjUZYqddSXfej3AHajX+CSO5X7oy0EmPc6o5Xh+RClNoHjnieWz9AW4kZxW9yyFMhVB1QLA==
   dependencies:
-    find-cache-dir "^3.3.2"
+    find-cache-dir "^4.0.0"
     schema-utils "^4.0.0"
 
 babel-plugin-lodash@3.3.4:
@@ -2730,29 +2417,29 @@ babel-plugin-lodash@3.3.4:
     lodash "^4.17.10"
     require-package-name "^2.0.1"
 
-babel-plugin-polyfill-corejs2@^0.3.3:
-  version "0.3.3"
-  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.3.tgz#5d1bd3836d0a19e1b84bbf2d9640ccb6f951c122"
-  integrity sha512-8hOdmFYFSZhqg2C/JgLUQ+t52o5nirNwaWM2B9LWteozwIvM14VSwdsCAUET10qT+kmySAlseadmfeeSWFCy+Q==
+babel-plugin-polyfill-corejs2@^0.4.10:
+  version "0.4.12"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.12.tgz#ca55bbec8ab0edeeef3d7b8ffd75322e210879a9"
+  integrity sha512-CPWT6BwvhrTO2d8QVorhTCQw9Y43zOu7G9HigcfxvepOU6b8o3tcWad6oVgZIsZCTt42FFv97aA7ZJsbM4+8og==
   dependencies:
-    "@babel/compat-data" "^7.17.7"
-    "@babel/helper-define-polyfill-provider" "^0.3.3"
-    semver "^6.1.1"
+    "@babel/compat-data" "^7.22.6"
+    "@babel/helper-define-polyfill-provider" "^0.6.3"
+    semver "^6.3.1"
 
-babel-plugin-polyfill-corejs3@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.6.0.tgz#56ad88237137eade485a71b52f72dbed57c6230a"
-  integrity sha512-+eHqR6OPcBhJOGgsIar7xoAB1GcSwVUA3XjAd7HJNzOXT4wv6/H7KIdA/Nc60cvUlDbKApmqNvD1B1bzOt4nyA==
+babel-plugin-polyfill-corejs3@^0.10.6:
+  version "0.10.6"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.10.6.tgz#2deda57caef50f59c525aeb4964d3b2f867710c7"
+  integrity sha512-b37+KR2i/khY5sKmWNVQAnitvquQbNdWy6lJdsr0kmquCKEEUgMKK4SboVM3HtfnZilfjr4MMQ7vY58FVWDtIA==
   dependencies:
-    "@babel/helper-define-polyfill-provider" "^0.3.3"
-    core-js-compat "^3.25.1"
+    "@babel/helper-define-polyfill-provider" "^0.6.2"
+    core-js-compat "^3.38.0"
 
-babel-plugin-polyfill-regenerator@^0.4.1:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.4.1.tgz#390f91c38d90473592ed43351e801a9d3e0fd747"
-  integrity sha512-NtQGmyQDXjQqQ+IzRkBVwEOz9lQ4zxAQZgoAYEtU9dJjnl1Oc98qnN7jcp+bE7O7aYzVpavXE3/VKXNzUbh7aw==
+babel-plugin-polyfill-regenerator@^0.6.1:
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.6.3.tgz#abeb1f3f1c762eace37587f42548b08b57789bc8"
+  integrity sha512-LiWSbl4CRSIa5x/JAU6jZiG9eit9w6mz+yVMFwDE83LAWvt0AfGBoZ7HS/mkhrKuh2ZlzfVZYKoLjXdqw6Yt7Q==
   dependencies:
-    "@babel/helper-define-polyfill-provider" "^0.3.3"
+    "@babel/helper-define-polyfill-provider" "^0.6.3"
 
 balanced-match@^1.0.0:
   version "1.0.0"
@@ -2791,21 +2478,21 @@ bl@^4.1.0:
     inherits "^2.0.4"
     readable-stream "^3.4.0"
 
-body-parser@1.20.1:
-  version "1.20.1"
-  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.20.1.tgz#b1812a8912c195cd371a3ee5e66faa2338a5c668"
-  integrity sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==
+body-parser@1.20.3:
+  version "1.20.3"
+  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.20.3.tgz#1953431221c6fb5cd63c4b36d53fab0928e548c6"
+  integrity sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==
   dependencies:
     bytes "3.1.2"
-    content-type "~1.0.4"
+    content-type "~1.0.5"
     debug "2.6.9"
     depd "2.0.0"
     destroy "1.2.0"
     http-errors "2.0.0"
     iconv-lite "0.4.24"
     on-finished "2.4.1"
-    qs "6.11.0"
-    raw-body "2.5.1"
+    qs "6.13.0"
+    raw-body "2.5.2"
     type-is "~1.6.18"
     unpipe "1.0.0"
 
@@ -2875,7 +2562,7 @@ browser-process-hrtime@^1.0.0:
   resolved "https://registry.yarnpkg.com/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz#3c9b4b7d782c8121e56f10106d84c0d0ffc94626"
   integrity sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==
 
-browser-stdout@1.3.1:
+browser-stdout@1.3.1, browser-stdout@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/browser-stdout/-/browser-stdout-1.3.1.tgz#baa559ee14ced73452229bad7326467c61fabd60"
   integrity sha512-qhAVI1+Av2X7qelOfAIYwXONood6XlZE/fXaBSmW/T5SzLAmCgzi+eiWE7fUvbHaeNBQH13UftjpXxsfLkMpgw==
@@ -2900,15 +2587,15 @@ browserslist@^4.20.2:
     node-releases "^2.0.5"
     update-browserslist-db "^1.0.4"
 
-browserslist@^4.21.3, browserslist@^4.21.4:
-  version "4.21.4"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.4.tgz#e7496bbc67b9e39dd0f98565feccdcb0d4ff6987"
-  integrity sha512-CBHJJdDmgjl3daYjN5Cp5kbTf1mUhZoS+beLklHIvkOWscs83YAhLlF3Wsh/lciQYAcbBJgTOD44VtG31ZM4Hw==
+browserslist@^4.23.3, browserslist@^4.24.0, browserslist@^4.24.3:
+  version "4.24.4"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.24.4.tgz#c6b2865a3f08bcb860a0e827389003b9fe686e4b"
+  integrity sha512-KDi1Ny1gSePi1vm0q4oxSF8b4DR44GF4BbmS2YdhPLOEqd8pDviZOGH/GsmRwoWJ2+5Lr085X7naowMwKHDG1A==
   dependencies:
-    caniuse-lite "^1.0.30001400"
-    electron-to-chromium "^1.4.251"
-    node-releases "^2.0.6"
-    update-browserslist-db "^1.0.9"
+    caniuse-lite "^1.0.30001688"
+    electron-to-chromium "^1.5.73"
+    node-releases "^2.0.19"
+    update-browserslist-db "^1.1.1"
 
 buffer-crc32@~0.2.3:
   version "0.2.13"
@@ -2939,7 +2626,15 @@ bytes@3.1.2:
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.2.tgz#8b0beeb98605adf1b128fa4386403c009e0221a5"
   integrity sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==
 
-call-bind@^1.0.0, call-bind@^1.0.2:
+call-bind-apply-helpers@^1.0.0, call-bind-apply-helpers@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.1.tgz#32e5892e6361b29b0b545ba6f7763378daca2840"
+  integrity sha512-BhYE+WDaywFg2TBWYNXAE+8B1ATnThNBqXHP5nQu0jWJdVvY2hvkpyB3qOmtmDePiS5/BDQ8wASEWGMWRG148g==
+  dependencies:
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+
+call-bind@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.2.tgz#b1d4e89e688119c3c9a903ad30abb2f6a919be3c"
   integrity sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==
@@ -2947,6 +2642,24 @@ call-bind@^1.0.0, call-bind@^1.0.2:
     function-bind "^1.1.1"
     get-intrinsic "^1.0.2"
 
+call-bind@^1.0.7, call-bind@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.8.tgz#0736a9660f537e3388826f440d5ec45f744eaa4c"
+  integrity sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==
+  dependencies:
+    call-bind-apply-helpers "^1.0.0"
+    es-define-property "^1.0.0"
+    get-intrinsic "^1.2.4"
+    set-function-length "^1.2.2"
+
+call-bound@^1.0.2, call-bound@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/call-bound/-/call-bound-1.0.3.tgz#41cfd032b593e39176a71533ab4f384aa04fd681"
+  integrity sha512-YTd+6wGlNlPxSuri7Y6X8tY2dmm12UMH66RpKMhiX6rsk5wXXnYgbUcOt8kiS31/AjfoTOvCsE+w8nZQLQnzHA==
+  dependencies:
+    call-bind-apply-helpers "^1.0.1"
+    get-intrinsic "^1.2.6"
+
 callsites@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
@@ -2997,25 +2710,15 @@ caniuse-api@^3.0.0:
     lodash.memoize "^4.1.2"
     lodash.uniq "^4.5.0"
 
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001370:
-  version "1.0.30001376"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001376.tgz#af2450833e5a06873fbb030a9556ca9461a2736d"
-  integrity sha512-I27WhtOQ3X3v3it9gNs/oTpoE5KpwmqKR5oKPA8M0G7uMXh9Ty81Q904HpKUrM30ei7zfcL5jE7AXefgbOfMig==
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001359, caniuse-lite@^1.0.30001370:
+  version "1.0.30001662"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001662.tgz"
+  integrity sha512-sgMUVwLmGseH8ZIrm1d51UbrhqMCH3jvS7gF/M6byuHOnKyLOBL7W8yz5V02OHwgLGA36o/AFhWzzh4uc5aqTA==
 
-caniuse-lite@^1.0.30001359:
-  version "1.0.30001366"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001366.tgz#c73352c83830a9eaf2dea0ff71fb4b9a4bbaa89c"
-  integrity sha512-yy7XLWCubDobokgzudpkKux8e0UOOnLHE6mlNJBzT3lZJz6s5atSEzjoL+fsCPkI0G8MP5uVdDx1ur/fXEWkZA==
-
-caniuse-lite@^1.0.30001400:
-  version "1.0.30001418"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001418.tgz#5f459215192a024c99e3e3a53aac310fc7cf24e6"
-  integrity sha512-oIs7+JL3K9JRQ3jPZjlH6qyYDp+nBTCais7hjh0s+fuBwufc7uZ7hPYMXrDOJhV360KGMTcczMRObk0/iMqZRg==
-
-caniuse-lite@^1.0.30001426:
-  version "1.0.30001439"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001439.tgz#ab7371faeb4adff4b74dad1718a6fd122e45d9cb"
-  integrity sha512-1MgUzEkoMO6gKfXflStpYgZDlFM7M/ck/bgfVCACO5vnAf0fXoNVHdWtqGU+MYca+4bL9Z5bpOVmR33cWW9G2A==
+caniuse-lite@^1.0.30001646, caniuse-lite@^1.0.30001688:
+  version "1.0.30001692"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001692.tgz#4585729d95e6b95be5b439da6ab55250cd125bf9"
+  integrity sha512-A95VKan0kdtrsnMubMKxEKUKImOPSuCpYgxSQBo036P5YYgVIcOYJEgt/txJWqObiRQeISNCfef9nvlQ0vbV7A==
 
 chai-nightwatch@0.5.3:
   version "0.5.3"
@@ -3024,18 +2727,18 @@ chai-nightwatch@0.5.3:
   dependencies:
     assertion-error "1.1.0"
 
-chai@4.3.7:
-  version "4.3.7"
-  resolved "https://registry.yarnpkg.com/chai/-/chai-4.3.7.tgz#ec63f6df01829088e8bf55fca839bcd464a8ec51"
-  integrity sha512-HLnAzZ2iupm25PlN0xFreAlBA5zaBSv3og0DdeGA4Ar6h6rJ3A0rolRUKJhSF2V10GZKDgWF/VmAEsNWjCRB+A==
+chai@4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/chai/-/chai-4.5.0.tgz#707e49923afdd9b13a8b0b47d33d732d13812fd8"
+  integrity sha512-RITGBfijLkBddZvnn8jdqoTypxvqbOLYQkGGxXzeFjVHvudaPw0HNFD9x928/eUwYWd2dPCugVqspGALTZZQKw==
   dependencies:
     assertion-error "^1.1.0"
-    check-error "^1.0.2"
-    deep-eql "^4.1.2"
-    get-func-name "^2.0.0"
-    loupe "^2.3.1"
+    check-error "^1.0.3"
+    deep-eql "^4.1.3"
+    get-func-name "^2.0.2"
+    loupe "^2.3.6"
     pathval "^1.1.1"
-    type-detect "^4.0.5"
+    type-detect "^4.1.0"
 
 chalk@1.1.3, chalk@^1.0.0, chalk@^1.1.1:
   version "1.1.3"
@@ -3071,11 +2774,18 @@ chalk@^4.1.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
-check-error@1.0.2, check-error@^1.0.2:
+check-error@1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/check-error/-/check-error-1.0.2.tgz#574d312edd88bb5dd8912e9286dd6c0aed4aac82"
   integrity sha512-BrgHpW9NURQgzoNyjfq0Wu6VFO6D7IZEmJNdtgNqpzGG8RuNFHt2jQxWlAs4HMe119chBnv+34syEZtc6IhLtA==
 
+check-error@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/check-error/-/check-error-1.0.3.tgz#a6502e4312a7ee969f646e83bb3ddd56281bd694"
+  integrity sha512-iKEoDYaRmd1mxM90a2OEfWhjsjPpYPuQ+lMYsoxB126+t8fw7ySEO48nmDg5COTjxDI65/Y2OWpeEHk3ZOe8zg==
+  dependencies:
+    get-func-name "^2.0.2"
+
 chokidar@3.5.3, "chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.1:
   version "3.5.3"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
@@ -3091,6 +2801,21 @@ chokidar@3.5.3, "chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.1:
   optionalDependencies:
     fsevents "~2.3.2"
 
+chokidar@^3.5.3:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.6.0.tgz#197c6cc669ef2a8dc5e7b4d97ee4e092c3eb0d5b"
+  integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==
+  dependencies:
+    anymatch "~3.1.2"
+    braces "~3.0.2"
+    glob-parent "~5.1.2"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.6.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
 chromatism@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/chromatism/-/chromatism-3.0.0.tgz#a7249d353c1e4f3577e444ac41171c4e2e624b12"
@@ -3243,7 +2968,12 @@ combined-stream@^1.0.8:
   dependencies:
     delayed-stream "~1.0.0"
 
-commander@^2.19.0, commander@^2.20.0:
+commander@^10.0.0:
+  version "10.0.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-10.0.1.tgz#881ee46b4f77d1c1dccc5823433aa39b022cbe06"
+  integrity sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==
+
+commander@^2.20.0:
   version "2.20.3"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
@@ -3258,6 +2988,11 @@ commander@^8.3.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66"
   integrity sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==
 
+common-path-prefix@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/common-path-prefix/-/common-path-prefix-3.0.0.tgz#7d007a7e07c58c4b4d5f433131a19141b29f11e0"
+  integrity sha512-QE33hToZseCH3jS0qN96O/bSh3kaw/h+Tq7ngyY9eWDUnTlTNUyqfqvCXioLe5Na5jFsL78ra/wuBU4iuEgd4w==
+
 commondir@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
@@ -3267,11 +3002,6 @@ compare-versions@^5.0.1:
   resolved "https://registry.yarnpkg.com/compare-versions/-/compare-versions-5.0.3.tgz#a9b34fea217472650ef4a2651d905f42c28ebfd7"
   integrity sha512-4UZlZP8Z99MGEY+Ovg/uJxJuvoXuN4M6B3hKaiackiHrgzQFEe3diJi1mf1PNHbFujM7FvLrK2bpgIaImbtZ1A==
 
-component-emitter@~1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.3.0.tgz#16e4070fba8ae29b679f2215853ee181ab2eabc0"
-  integrity sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==
-
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
@@ -3310,6 +3040,11 @@ content-type@~1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
 
+content-type@~1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.5.tgz#8b773162656d1d1086784c8f23a54ce6d73d7918"
+  integrity sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==
+
 convert-source-map@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442"
@@ -3317,14 +3052,19 @@ convert-source-map@^1.7.0:
   dependencies:
     safe-buffer "~5.1.1"
 
+convert-source-map@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-2.0.0.tgz#4b560f649fc4e918dd0ab75cf4961e8bc882d82a"
+  integrity sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==
+
 cookie-signature@1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
 
-cookie@0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.5.0.tgz#d1f5d71adec6558c58f389987c366aa47e994f8b"
-  integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==
+cookie@0.7.1:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.7.1.tgz#2f73c42142d5d5cf71310a74fc4ae61670e5dbc9"
+  integrity sha512-6DnInpx7SJ2AK3+CTUE/ZM0vWTUboZCegxhC2xiIydHR9jNuTAASBrfEpHhiGOZw/nX51bHt6YQl8jsGo4y/0w==
 
 cookie@~0.4.1:
   version "0.4.2"
@@ -3343,12 +3083,12 @@ copy-webpack-plugin@11.0.0:
     schema-utils "^4.0.0"
     serialize-javascript "^6.0.0"
 
-core-js-compat@^3.25.1:
-  version "3.26.0"
-  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.26.0.tgz#94e2cf8ba3e63800c4956ea298a6473bc9d62b44"
-  integrity sha512-piOX9Go+Z4f9ZiBFLnZ5VrOpBl0h7IGCkiFUN11QTe6LjAvOT3ifL/5TdoizMh99hcGy5SoLyWbapIY/PIb/3A==
+core-js-compat@^3.38.0, core-js-compat@^3.38.1:
+  version "3.40.0"
+  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.40.0.tgz#7485912a5a4a4315c2fdb2cbdc623e6881c88b38"
+  integrity sha512-0XEDpr5y5mijvw8Lbc6E5AkjrHfp7eEoPlu36SWeAbcL8fn1G1ANe8DBlo2XoNN89oVpxWwOjYIPVzR4ZvsKCQ==
   dependencies:
-    browserslist "^4.21.4"
+    browserslist "^4.24.3"
 
 core-util-is@~1.0.0:
   version "1.0.2"
@@ -3384,12 +3124,21 @@ cosmiconfig@^7.1.0:
     path-type "^4.0.0"
     yaml "^1.10.0"
 
-cropperjs@1.5.12:
-  version "1.5.12"
-  resolved "https://registry.yarnpkg.com/cropperjs/-/cropperjs-1.5.12.tgz#d9c0db2bfb8c0d769d51739e8f916bbc44e10f50"
-  integrity sha512-re7UdjE5UnwdrovyhNzZ6gathI4Rs3KGCBSc8HCIjUo5hO42CtzyblmWLj6QWVw7huHyDMfpKxhiO2II77nhDw==
+cropperjs@1.6.2:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/cropperjs/-/cropperjs-1.6.2.tgz#d1a5d627d880581cca41b7901f06923500e4201b"
+  integrity sha512-nhymn9GdnV3CqiEHJVai54TULFAE3VshJTXSqSJKa8yXAKyBKDWdhHarnlIPrshJ0WMFTGuFvG02YjLXfPiuOA==
 
-cross-spawn@7.0.3, cross-spawn@^7.0.2:
+cross-spawn@7.0.6, cross-spawn@^7.0.0:
+  version "7.0.6"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.6.tgz#8a58fe78f00dcd70c370451759dfbfaf03e8ee9f"
+  integrity sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==
+  dependencies:
+    path-key "^3.1.0"
+    shebang-command "^2.0.0"
+    which "^2.0.1"
+
+cross-spawn@^7.0.2:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
   integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
@@ -3408,19 +3157,19 @@ css-functions-list@^3.1.0:
   resolved "https://registry.yarnpkg.com/css-functions-list/-/css-functions-list-3.1.0.tgz#cf5b09f835ad91a00e5959bcfc627cd498e1321b"
   integrity sha512-/9lCvYZaUbBGvYUgYGFJ4dcYiyqdhSjG7IPVluoV8A1ILjkF7ilmhp1OGUz8n+nmBcu0RNrQAzgD8B6FJbrt2w==
 
-css-loader@6.7.3:
-  version "6.7.3"
-  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-6.7.3.tgz#1e8799f3ccc5874fdd55461af51137fcc5befbcd"
-  integrity sha512-qhOH1KlBMnZP8FzRO6YCH9UHXQhVMcEGLyNdb7Hv2cpcmJbW0YrddO+tG1ab5nT41KpHIYGsbeHqxB9xPu1pKQ==
+css-loader@6.11.0:
+  version "6.11.0"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-6.11.0.tgz#33bae3bf6363d0a7c2cf9031c96c744ff54d85ba"
+  integrity sha512-CTJ+AEQJjq5NzLga5pE39qdiSV56F8ywCIsqNIRF0r7BDgWsN25aazToqAFg7ZrtA/U016xudB3ffgweORxX7g==
   dependencies:
     icss-utils "^5.1.0"
-    postcss "^8.4.19"
-    postcss-modules-extract-imports "^3.0.0"
-    postcss-modules-local-by-default "^4.0.0"
-    postcss-modules-scope "^3.0.0"
+    postcss "^8.4.33"
+    postcss-modules-extract-imports "^3.1.0"
+    postcss-modules-local-by-default "^4.0.5"
+    postcss-modules-scope "^3.2.0"
     postcss-modules-values "^4.0.0"
     postcss-value-parser "^4.2.0"
-    semver "^7.3.8"
+    semver "^7.5.4"
 
 css-minimizer-webpack-plugin@4.2.2:
   version "4.2.2"
@@ -3536,10 +3285,10 @@ cssstyle@^2.3.0:
   dependencies:
     cssom "~0.3.6"
 
-csstype@^2.6.8:
-  version "2.6.20"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.20.tgz#9229c65ea0b260cf4d3d997cb06288e36a8d6dda"
-  integrity sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==
+csstype@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
+  integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
 
 custom-event-polyfill@1.0.7:
   version "1.0.7"
@@ -3559,16 +3308,38 @@ data-urls@^3.0.1:
     whatwg-mimetype "^3.0.0"
     whatwg-url "^11.0.0"
 
+data-view-buffer@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/data-view-buffer/-/data-view-buffer-1.0.2.tgz#211a03ba95ecaf7798a8c7198d79536211f88570"
+  integrity sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==
+  dependencies:
+    call-bound "^1.0.3"
+    es-errors "^1.3.0"
+    is-data-view "^1.0.2"
+
+data-view-byte-length@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/data-view-byte-length/-/data-view-byte-length-1.0.2.tgz#9e80f7ca52453ce3e93d25a35318767ea7704735"
+  integrity sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==
+  dependencies:
+    call-bound "^1.0.3"
+    es-errors "^1.3.0"
+    is-data-view "^1.0.2"
+
+data-view-byte-offset@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/data-view-byte-offset/-/data-view-byte-offset-1.0.1.tgz#068307f9b71ab76dbbe10291389e020856606191"
+  integrity sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==
+  dependencies:
+    call-bound "^1.0.2"
+    es-errors "^1.3.0"
+    is-data-view "^1.0.1"
+
 date-format@^4.0.6:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/date-format/-/date-format-4.0.6.tgz#f6138b8f17968df9815b3d101fc06b0523f066c5"
   integrity sha512-B9vvg5rHuQ8cbUXE/RMWMyX2YA5TecT3jKF5fLtGNlzPlU7zblSPmAm2OImDbWL+LDOQ6pUm+4LOFz+ywS41Zw==
 
-de-indent@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
-  integrity sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0=
-
 debug@2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -3595,13 +3366,6 @@ debug@4.3.3:
   dependencies:
     ms "2.1.2"
 
-debug@4.3.4, debug@^4.3.2, debug@^4.3.4, debug@~4.3.1, debug@~4.3.2:
-  version "4.3.4"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
-  integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
-  dependencies:
-    ms "2.1.2"
-
 debug@=3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
@@ -3621,6 +3385,27 @@ debug@^4.1.0, debug@^4.1.1:
   dependencies:
     ms "^2.1.1"
 
+debug@^4.3.1, debug@^4.3.2, debug@^4.3.4, debug@~4.3.1, debug@~4.3.2:
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
+  integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
+  dependencies:
+    ms "2.1.2"
+
+debug@^4.3.5:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.4.0.tgz#2b3f2aea2ffeb776477460267377dc8710faba8a"
+  integrity sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==
+  dependencies:
+    ms "^2.1.3"
+
+debug@~4.3.4:
+  version "4.3.6"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.6.tgz#2ab2c38fbaffebf8aa95fdfe6d88438c7a13c52b"
+  integrity sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==
+  dependencies:
+    ms "2.1.2"
+
 decamelize-keys@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/decamelize-keys/-/decamelize-keys-1.1.0.tgz#d171a87933252807eb3cb61dc1c1445d078df2d9"
@@ -3650,10 +3435,10 @@ deep-eql@4.0.1:
   dependencies:
     type-detect "^4.0.0"
 
-deep-eql@^4.1.2:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/deep-eql/-/deep-eql-4.1.2.tgz#270ceb902f87724077e6f6449aed81463f42fc1c"
-  integrity sha512-gT18+YW4CcW/DBNTwAmqTtkJh7f9qqScu2qFVlx7kCoeY9tlBu9cUcr7+I+Z/noG8INehS3xQgLpTtd/QUTn4w==
+deep-eql@^4.1.3:
+  version "4.1.4"
+  resolved "https://registry.yarnpkg.com/deep-eql/-/deep-eql-4.1.4.tgz#d0d3912865911bb8fac5afb4e3acfa6a28dc72b7"
+  integrity sha512-SUwdGfqdKOwxCPeVYjwSyRpJ7Z+fhpwIAtmCUdZIWZ/YP5R9WAsyuSgpLVDi9bjWoN2LXHNss/dk3urXtdQxGg==
   dependencies:
     type-detect "^4.0.0"
 
@@ -3673,22 +3458,26 @@ defaults@^1.0.3:
   dependencies:
     clone "^1.0.2"
 
+define-data-property@^1.0.1, define-data-property@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/define-data-property/-/define-data-property-1.1.4.tgz#894dc141bb7d3060ae4366f6a0107e68fbe48c5e"
+  integrity sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==
+  dependencies:
+    es-define-property "^1.0.0"
+    es-errors "^1.3.0"
+    gopd "^1.0.1"
+
 define-lazy-prop@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz#3f7ae421129bcaaac9bc74905c98a0009ec9ee7f"
   integrity sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==
 
-define-properties@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.3.tgz#cf88da6cbee26fe6db7094f61d870cbd84cee9f1"
-  dependencies:
-    object-keys "^1.0.12"
-
-define-properties@^1.1.4:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.4.tgz#0b14d7bd7fbeb2f3572c3a7eda80ea5d57fb05b1"
-  integrity sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==
+define-properties@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.2.1.tgz#10781cc616eb951a80a034bafcaa7377f6af2b6c"
+  integrity sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==
   dependencies:
+    define-data-property "^1.0.1"
     has-property-descriptors "^1.0.0"
     object-keys "^1.1.1"
 
@@ -3725,11 +3514,16 @@ diff@5.0.0:
   resolved "https://registry.yarnpkg.com/diff/-/diff-5.0.0.tgz#7ed6ad76d859d030787ec35855f5b1daf31d852b"
   integrity sha512-/VTCrvm5Z0JGty/BWHljh+BAiw3IK+2j87NGMu8Nwc/f48WoDAC395uomO9ZD117ZOBaHmkX1oyLvkVM/aIT3w==
 
-diff@^5.0.0:
+diff@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/diff/-/diff-5.1.0.tgz#bc52d298c5ea8df9194800224445ed43ffc87e40"
   integrity sha512-D+mk+qE8VC/PAUrlAU34N+VfXev0ghe5ywmpqrawphmVZc1bEfn56uo9qpyGp1p4xpzOHkSW4ztBd6L7Xx4ACw==
 
+diff@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/diff/-/diff-5.2.0.tgz#26ded047cd1179b78b9537d5ef725503ce1ae531"
+  integrity sha512-uIFDxqpRZGZ6ThOk84hEfqWoHx2devRFvpTZcTHur85vImfaxUbTW9Ryh4CpCuDnToOP1CEtXKIgytHBPVff5A==
+
 dijkstrajs@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/dijkstrajs/-/dijkstrajs-1.0.2.tgz#2e48c0d3b825462afe75ab4ad5e829c8ece36257"
@@ -3809,7 +3603,7 @@ domhandler@^4.0.0, domhandler@^4.2.0, domhandler@^4.3.1:
   dependencies:
     domelementtype "^2.2.0"
 
-domhandler@^5.0.1, domhandler@^5.0.2:
+domhandler@^5.0.2, domhandler@^5.0.3:
   version "5.0.3"
   resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-5.0.3.tgz#cc385f7f751f1d1fc650c21374804254538c7d31"
   integrity sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==
@@ -3826,13 +3620,13 @@ domutils@^2.5.2, domutils@^2.8.0:
     domhandler "^4.2.0"
 
 domutils@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/domutils/-/domutils-3.0.1.tgz#696b3875238338cb186b6c0612bd4901c89a4f1c"
-  integrity sha512-z08c1l761iKhDFtfXO04C7kTdPBLi41zwOZl00WS8b5eiaebNpY00HKbztwBq+e3vyqWNwWF3mP9YLUeqIrF+Q==
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-3.2.2.tgz#edbfe2b668b0c1d97c24baf0f1062b132221bc78"
+  integrity sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==
   dependencies:
     dom-serializer "^2.0.0"
     domelementtype "^2.3.0"
-    domhandler "^5.0.1"
+    domhandler "^5.0.3"
 
 dot-case@^3.0.4:
   version "3.0.4"
@@ -3847,15 +3641,29 @@ dotenv@10.0.0:
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-10.0.0.tgz#3d4227b8fb95f81096cdd2b66653fb2c7085ba81"
   integrity sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==
 
-editorconfig@^0.15.3:
-  version "0.15.3"
-  resolved "https://registry.yarnpkg.com/editorconfig/-/editorconfig-0.15.3.tgz#bef84c4e75fb8dcb0ce5cee8efd51c15999befc5"
-  integrity sha512-M9wIMFx96vq0R4F+gRpY3o2exzb8hEj/n9S8unZtHSvYjibBp/iMufSzvmOcV/laG0ZtuTVGtiJggPOSW2r93g==
+dunder-proto@^1.0.0, dunder-proto@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/dunder-proto/-/dunder-proto-1.0.1.tgz#d7ae667e1dc83482f8b70fd0f6eefc50da30f58a"
+  integrity sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==
   dependencies:
-    commander "^2.19.0"
-    lru-cache "^4.1.5"
-    semver "^5.6.0"
-    sigmund "^1.0.1"
+    call-bind-apply-helpers "^1.0.1"
+    es-errors "^1.3.0"
+    gopd "^1.2.0"
+
+eastasianwidth@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz#696ce2ec0aa0e6ea93a397ffcf24aa7840c827cb"
+  integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==
+
+editorconfig@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/editorconfig/-/editorconfig-1.0.4.tgz#040c9a8e9a6c5288388b87c2db07028aa89f53a3"
+  integrity sha512-L9Qe08KWTlqYMVvMcTIvMAdl1cDUubzRNYL+WfA4bLDMHe4nemKkpmYzkznE1FwLKu0EEmy6obgQKzMJrg4x9Q==
+  dependencies:
+    "@one-ini/wasm" "0.1.1"
+    commander "^10.0.0"
+    minimatch "9.0.1"
+    semver "^7.5.3"
 
 ee-first@1.1.1:
   version "1.1.1"
@@ -3878,16 +3686,21 @@ electron-to-chromium@^1.4.202:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.219.tgz#a7a672304b6aa4f376918d3f63a47f2c3906009a"
   integrity sha512-zoQJsXOUw0ZA0YxbjkmzBumAJRtr6je5JySuL/bAoFs0DuLiLJ+5FzRF7/ZayihxR2QcewlRZVm5QZdUhwjOgA==
 
-electron-to-chromium@^1.4.251:
-  version "1.4.276"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.276.tgz#17837b19dafcc43aba885c4689358b298c19b520"
-  integrity sha512-EpuHPqu8YhonqLBXHoU6hDJCD98FCe6KDoet3/gY1qsQ6usjJoHqBH2YIVs8FXaAtHwVL8Uqa/fsYao/vq9VWQ==
+electron-to-chromium@^1.5.73:
+  version "1.5.80"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.80.tgz#ca7a8361d7305f0ec9e203ce4e633cbb8a8ef1b1"
+  integrity sha512-LTrKpW0AqIuHwmlVNV+cjFYTnXtM9K37OGhpe0ZI10ScPSxqVSryZHIY3WnCS5NSYbBODRTZyhRMS2h5FAEqAw==
 
 emoji-regex@^8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
   integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
 
+emoji-regex@^9.2.2:
+  version "9.2.2"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
+  integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
+
 emojis-list@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
@@ -3897,32 +3710,30 @@ emojis-list@^3.0.0:
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
   integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
 
-encode-utf8@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/encode-utf8/-/encode-utf8-1.0.3.tgz#f30fdd31da07fb596f281beb2f6b027851994cda"
-  integrity sha512-ucAnuBEhUK4boH2HjVYG5Q2mQyPorvv0u/ocS+zhdw0S8AlHYY+GOFhP1Gio5z4icpP2ivFSvhtFjQi8+T9ppw==
-
 encodeurl@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
 
+encodeurl@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-2.0.0.tgz#7b8ea898077d7e409d3ac45474ea38eaf0857a58"
+  integrity sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==
+
 end-of-stream@^1.1.0:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.1.tgz#ed29634d19baba463b6ce6b80a37213eab71ec43"
   dependencies:
     once "^1.4.0"
 
-engine.io-parser@~5.0.3:
-  version "5.0.3"
-  resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-5.0.3.tgz#ca1f0d7b11e290b4bfda251803baea765ed89c09"
-  integrity sha512-BtQxwF27XUNnSafQLvDi0dQ8s3i6VgzSoQMJacpIcGNrlUdfHSKbgm3jmjCVvQluGzqwujQMPAoMai3oYSTurg==
-  dependencies:
-    "@socket.io/base64-arraybuffer" "~1.0.2"
+engine.io-parser@~5.2.1:
+  version "5.2.3"
+  resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-5.2.3.tgz#00dc5b97b1f233a23c9398d0209504cf5f94d92f"
+  integrity sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==
 
-engine.io@~6.2.0:
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/engine.io/-/engine.io-6.2.0.tgz#003bec48f6815926f2b1b17873e576acd54f41d0"
-  integrity sha512-4KzwW3F3bk+KlzSOY57fj/Jx6LyRQ1nbcyIadehl+AnXjKT7gDO0ORdRi/84ixvMKTym6ZKuxvbzN62HDDU1Lg==
+engine.io@~6.5.2:
+  version "6.5.5"
+  resolved "https://registry.yarnpkg.com/engine.io/-/engine.io-6.5.5.tgz#430b80d8840caab91a50e9e23cb551455195fc93"
+  integrity sha512-C5Pn8Wk+1vKBoHghJODM63yk8MvrO9EWZUfkAt5HAqIgPE4/8FF0PEGHXtEd40l223+cE5ABWuPzm38PHFXfMA==
   dependencies:
     "@types/cookie" "^0.4.1"
     "@types/cors" "^2.8.12"
@@ -3932,8 +3743,8 @@ engine.io@~6.2.0:
     cookie "~0.4.1"
     cors "~2.8.5"
     debug "~4.3.1"
-    engine.io-parser "~5.0.3"
-    ws "~8.2.3"
+    engine.io-parser "~5.2.1"
+    ws "~8.17.1"
 
 enhanced-resolve@^5.10.0:
   version "5.10.0"
@@ -3952,10 +3763,10 @@ entities@^2.0.0, entities@^2.2.0:
   resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
   integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
 
-entities@^4.2.0, entities@^4.3.0:
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/entities/-/entities-4.4.0.tgz#97bdaba170339446495e653cfd2db78962900174"
-  integrity sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA==
+entities@^4.2.0, entities@^4.4.0, entities@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
+  integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
 
 envinfo@7.8.1:
   version "7.8.1"
@@ -3974,106 +3785,121 @@ error-ex@^1.3.1:
   dependencies:
     is-arrayish "^0.2.1"
 
-es-abstract@^1.19.0:
-  version "1.19.1"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.19.1.tgz#d4885796876916959de78edaa0df456627115ec3"
-  integrity sha512-2vJ6tjA/UfqLm2MPs7jxVybLoB8i1t1Jd9R3kISld20sIxPcTbLuggQOUxeWeAvIUkduv/CfMjuh4WmiXr2v9w==
+es-abstract@^1.23.2, es-abstract@^1.23.5, es-abstract@^1.23.9:
+  version "1.23.9"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.23.9.tgz#5b45994b7de78dada5c1bebf1379646b32b9d606"
+  integrity sha512-py07lI0wjxAC/DcfK1S6G7iANonniZwTISvdPzk9hzeH0IZIshbuuFxLIU96OyF89Yb9hiqWn8M/bY83KY5vzA==
   dependencies:
-    call-bind "^1.0.2"
-    es-to-primitive "^1.2.1"
-    function-bind "^1.1.1"
-    get-intrinsic "^1.1.1"
-    get-symbol-description "^1.0.0"
-    has "^1.0.3"
-    has-symbols "^1.0.2"
-    internal-slot "^1.0.3"
-    is-callable "^1.2.4"
-    is-negative-zero "^2.0.1"
-    is-regex "^1.1.4"
-    is-shared-array-buffer "^1.0.1"
-    is-string "^1.0.7"
-    is-weakref "^1.0.1"
-    object-inspect "^1.11.0"
-    object-keys "^1.1.1"
-    object.assign "^4.1.2"
-    string.prototype.trimend "^1.0.4"
-    string.prototype.trimstart "^1.0.4"
-    unbox-primitive "^1.0.1"
-
-es-abstract@^1.20.4:
-  version "1.21.1"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.21.1.tgz#e6105a099967c08377830a0c9cb589d570dd86c6"
-  integrity sha512-QudMsPOz86xYz/1dG1OuGBKOELjCh99IIWHLzy5znUB6j8xG2yMA7bfTV86VSqKF+Y/H08vQPR+9jyXpuC6hfg==
-  dependencies:
-    available-typed-arrays "^1.0.5"
-    call-bind "^1.0.2"
-    es-set-tostringtag "^2.0.1"
-    es-to-primitive "^1.2.1"
-    function-bind "^1.1.1"
-    function.prototype.name "^1.1.5"
-    get-intrinsic "^1.1.3"
-    get-symbol-description "^1.0.0"
-    globalthis "^1.0.3"
-    gopd "^1.0.1"
-    has "^1.0.3"
-    has-property-descriptors "^1.0.0"
-    has-proto "^1.0.1"
-    has-symbols "^1.0.3"
-    internal-slot "^1.0.4"
-    is-array-buffer "^3.0.1"
+    array-buffer-byte-length "^1.0.2"
+    arraybuffer.prototype.slice "^1.0.4"
+    available-typed-arrays "^1.0.7"
+    call-bind "^1.0.8"
+    call-bound "^1.0.3"
+    data-view-buffer "^1.0.2"
+    data-view-byte-length "^1.0.2"
+    data-view-byte-offset "^1.0.1"
+    es-define-property "^1.0.1"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
+    es-set-tostringtag "^2.1.0"
+    es-to-primitive "^1.3.0"
+    function.prototype.name "^1.1.8"
+    get-intrinsic "^1.2.7"
+    get-proto "^1.0.0"
+    get-symbol-description "^1.1.0"
+    globalthis "^1.0.4"
+    gopd "^1.2.0"
+    has-property-descriptors "^1.0.2"
+    has-proto "^1.2.0"
+    has-symbols "^1.1.0"
+    hasown "^2.0.2"
+    internal-slot "^1.1.0"
+    is-array-buffer "^3.0.5"
     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.10"
-    is-weakref "^1.0.2"
-    object-inspect "^1.12.2"
+    is-data-view "^1.0.2"
+    is-regex "^1.2.1"
+    is-shared-array-buffer "^1.0.4"
+    is-string "^1.1.1"
+    is-typed-array "^1.1.15"
+    is-weakref "^1.1.0"
+    math-intrinsics "^1.1.0"
+    object-inspect "^1.13.3"
     object-keys "^1.1.1"
-    object.assign "^4.1.4"
-    regexp.prototype.flags "^1.4.3"
-    safe-regex-test "^1.0.0"
-    string.prototype.trimend "^1.0.6"
-    string.prototype.trimstart "^1.0.6"
-    typed-array-length "^1.0.4"
-    unbox-primitive "^1.0.2"
-    which-typed-array "^1.1.9"
+    object.assign "^4.1.7"
+    own-keys "^1.0.1"
+    regexp.prototype.flags "^1.5.3"
+    safe-array-concat "^1.1.3"
+    safe-push-apply "^1.0.0"
+    safe-regex-test "^1.1.0"
+    set-proto "^1.0.0"
+    string.prototype.trim "^1.2.10"
+    string.prototype.trimend "^1.0.9"
+    string.prototype.trimstart "^1.0.8"
+    typed-array-buffer "^1.0.3"
+    typed-array-byte-length "^1.0.3"
+    typed-array-byte-offset "^1.0.4"
+    typed-array-length "^1.0.7"
+    unbox-primitive "^1.1.0"
+    which-typed-array "^1.1.18"
+
+es-define-property@^1.0.0, es-define-property@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/es-define-property/-/es-define-property-1.0.1.tgz#983eb2f9a6724e9303f61addf011c72e09e0b0fa"
+  integrity sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==
+
+es-errors@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/es-errors/-/es-errors-1.3.0.tgz#05f75a25dab98e4fb1dcd5e1472c0546d5057c8f"
+  integrity sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==
 
 es-module-lexer@^0.9.0:
   version "0.9.3"
   resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-0.9.3.tgz#6f13db00cc38417137daf74366f535c8eb438f19"
   integrity sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==
 
-es-set-tostringtag@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/es-set-tostringtag/-/es-set-tostringtag-2.0.1.tgz#338d502f6f674301d710b80c8592de8a15f09cd8"
-  integrity sha512-g3OMbtlwY3QewlqAiMLI47KywjWZoEytKr8pf6iTC8uJq5bIAH52Z9pnQ8pVL6whrCto53JZDuUIsifGeLorTg==
-  dependencies:
-    get-intrinsic "^1.1.3"
-    has "^1.0.3"
-    has-tostringtag "^1.0.0"
-
-es-shim-unscopables@^1.0.0:
+es-object-atoms@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/es-shim-unscopables/-/es-shim-unscopables-1.0.0.tgz#702e632193201e3edf8713635d083d378e510241"
-  integrity sha512-Jm6GPcCdC30eMLbZ2x8z2WuRwAws3zTBBKuusffYVUrNj/GVSUAZ+xKMaUpfNDR5IbyNA5LJbaecoUVbmUcB1w==
+  resolved "https://registry.yarnpkg.com/es-object-atoms/-/es-object-atoms-1.0.0.tgz#ddb55cd47ac2e240701260bc2a8e31ecb643d941"
+  integrity sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==
   dependencies:
-    has "^1.0.3"
+    es-errors "^1.3.0"
 
-es-to-primitive@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
-  integrity sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==
+es-set-tostringtag@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz#f31dbbe0c183b00a6d26eb6325c810c0fd18bd4d"
+  integrity sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==
   dependencies:
-    is-callable "^1.1.4"
-    is-date-object "^1.0.1"
-    is-symbol "^1.0.2"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.6"
+    has-tostringtag "^1.0.2"
+    hasown "^2.0.2"
+
+es-shim-unscopables@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/es-shim-unscopables/-/es-shim-unscopables-1.0.2.tgz#1f6942e71ecc7835ed1c8a83006d8771a63a3763"
+  integrity sha512-J3yBRXCzDu4ULnQwxyToo/OjdMx6akgVC7K6few0a7F/0wLtmKKN7I73AH5T2836UuXRqN7Qg+IIUw/+YJksRw==
+  dependencies:
+    hasown "^2.0.0"
+
+es-to-primitive@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.3.0.tgz#96c89c82cc49fd8794a24835ba3e1ff87f214e18"
+  integrity sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==
+  dependencies:
+    is-callable "^1.2.7"
+    is-date-object "^1.0.5"
+    is-symbol "^1.0.4"
 
 escalade@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
   integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==
 
+escalade@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.2.0.tgz#011a3f69856ba189dffa7dc8fcce99d2a87903e5"
+  integrity sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==
+
 escape-html@1.0.3, escape-html@~1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
@@ -4100,10 +3926,10 @@ escodegen@^2.0.0:
   optionalDependencies:
     source-map "~0.6.1"
 
-eslint-config-standard@17.0.0:
-  version "17.0.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-standard/-/eslint-config-standard-17.0.0.tgz#fd5b6cf1dcf6ba8d29f200c461de2e19069888cf"
-  integrity sha512-/2ks1GKyqSOkH7JFvXJicu0iMpoojkwB+f5Du/1SC0PtBL+s8v30k9njRZ21pm2drKYm2342jFnGWzttxPmZVg==
+eslint-config-standard@17.1.0:
+  version "17.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-standard/-/eslint-config-standard-17.1.0.tgz#40ffb8595d47a6b242e07cbfd49dc211ed128975"
+  integrity sha512-IwHwmaBNtDK4zDHQukFDW5u/aTb8+meQWZvNFWkiGmbWjD6bqyuSSBxxXKkCftCUzc1zwCH2m/baCNDLGmuO5Q==
 
 eslint-formatter-friendly@7.0.0:
   version "7.0.0"
@@ -4116,19 +3942,19 @@ eslint-formatter-friendly@7.0.0:
     strip-ansi "5.2.0"
     text-table "0.2.0"
 
-eslint-import-resolver-node@^0.3.7:
-  version "0.3.7"
-  resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.7.tgz#83b375187d412324a1963d84fa664377a23eb4d7"
-  integrity sha512-gozW2blMLJCeFpBwugLTGyvVjNoeo1knonXAcatC6bjPBZitotxdWf7Gimr25N4c0AAOo4eOUfaG82IJPDpqCA==
+eslint-import-resolver-node@^0.3.9:
+  version "0.3.9"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz#d4eaac52b8a2e7c3cd1903eb00f7e053356118ac"
+  integrity sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==
   dependencies:
     debug "^3.2.7"
-    is-core-module "^2.11.0"
-    resolve "^1.22.1"
+    is-core-module "^2.13.0"
+    resolve "^1.22.4"
 
-eslint-module-utils@^2.7.4:
-  version "2.7.4"
-  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.7.4.tgz#4f3e41116aaf13a20792261e61d3a2e7e0583974"
-  integrity sha512-j4GT+rqzCoRKHwURX7pddtIPGySnX9Si/cgMI5ztrcqOPtk5dDEeZ34CQVPphnqkJytlc97Vuk05Um2mJ3gEQA==
+eslint-module-utils@^2.12.0:
+  version "2.12.0"
+  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.12.0.tgz#fe4cfb948d61f49203d7b08871982b65b9af0b0b"
+  integrity sha512-wALZ0HFoytlyh/1+4wuZ9FJCD/leWHQzzrxJ8+rebyReSLk7LApMyd3WJaLVoN+D5+WIdJyDK1c6JnE65V4Zyg==
   dependencies:
     debug "^3.2.7"
 
@@ -4140,31 +3966,35 @@ eslint-plugin-es@^4.1.0:
     eslint-utils "^2.0.0"
     regexpp "^3.0.0"
 
-eslint-plugin-import@2.27.5:
-  version "2.27.5"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.27.5.tgz#876a6d03f52608a3e5bb439c2550588e51dd6c65"
-  integrity sha512-LmEt3GVofgiGuiE+ORpnvP+kAm3h6MLZJ4Q5HCyHADofsb4VzXFsRiWj3c0OFiV+3DWFh0qg3v9gcPlfc3zRow==
+eslint-plugin-import@2.31.0:
+  version "2.31.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.31.0.tgz#310ce7e720ca1d9c0bb3f69adfd1c6bdd7d9e0e7"
+  integrity sha512-ixmkI62Rbc2/w8Vfxyh1jQRTdRTF52VxwRVHl/ykPAmqG+Nb7/kNn+byLP0LxPgI7zWA16Jt82SybJInmMia3A==
   dependencies:
-    array-includes "^3.1.6"
-    array.prototype.flat "^1.3.1"
-    array.prototype.flatmap "^1.3.1"
+    "@rtsao/scc" "^1.1.0"
+    array-includes "^3.1.8"
+    array.prototype.findlastindex "^1.2.5"
+    array.prototype.flat "^1.3.2"
+    array.prototype.flatmap "^1.3.2"
     debug "^3.2.7"
     doctrine "^2.1.0"
-    eslint-import-resolver-node "^0.3.7"
-    eslint-module-utils "^2.7.4"
-    has "^1.0.3"
-    is-core-module "^2.11.0"
+    eslint-import-resolver-node "^0.3.9"
+    eslint-module-utils "^2.12.0"
+    hasown "^2.0.2"
+    is-core-module "^2.15.1"
     is-glob "^4.0.3"
     minimatch "^3.1.2"
-    object.values "^1.1.6"
-    resolve "^1.22.1"
-    semver "^6.3.0"
-    tsconfig-paths "^3.14.1"
+    object.fromentries "^2.0.8"
+    object.groupby "^1.0.3"
+    object.values "^1.2.0"
+    semver "^6.3.1"
+    string.prototype.trimend "^1.0.8"
+    tsconfig-paths "^3.15.0"
 
-eslint-plugin-n@15.6.1:
-  version "15.6.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-n/-/eslint-plugin-n-15.6.1.tgz#f7e77f24abb92a550115cf11e29695da122c398c"
-  integrity sha512-R9xw9OtCRxxaxaszTQmQAlPgM+RdGjaL1akWuY/Fv9fRAi8Wj4CUKc6iYVG8QNRjRuo8/BqVYIpfqberJUEacA==
+eslint-plugin-n@15.7.0:
+  version "15.7.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-n/-/eslint-plugin-n-15.7.0.tgz#e29221d8f5174f84d18f2eb94765f2eeea033b90"
+  integrity sha512-jDex9s7D/Qial8AGVIHq4W7NswpUD5DPDL2RH8Lzd9EloWUuvUkHfv4FRLMipH5q2UtyurorBkPeNi1wVWNh3Q==
   dependencies:
     builtins "^5.0.1"
     eslint-plugin-es "^4.1.0"
@@ -4175,22 +4005,23 @@ eslint-plugin-n@15.6.1:
     resolve "^1.22.1"
     semver "^7.3.8"
 
-eslint-plugin-promise@6.1.1:
-  version "6.1.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-promise/-/eslint-plugin-promise-6.1.1.tgz#269a3e2772f62875661220631bd4dafcb4083816"
-  integrity sha512-tjqWDwVZQo7UIPMeDReOpUgHCmCiH+ePnVT+5zVapL0uuHnegBUs2smM13CzOs2Xb5+MHMRFTs9v24yjba4Oig==
+eslint-plugin-promise@6.6.0:
+  version "6.6.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-promise/-/eslint-plugin-promise-6.6.0.tgz#acd3fd7d55cead7a10f92cf698f36c0aafcd717a"
+  integrity sha512-57Zzfw8G6+Gq7axm2Pdo3gW/Rx3h9Yywgn61uE/3elTCOePEHVrn2i5CdfBwA1BLK0Q0WqctICIUSqXZW/VprQ==
 
-eslint-plugin-vue@9.9.0:
-  version "9.9.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-9.9.0.tgz#ac788ebccd2eb94d846a507df55da50693b80c91"
-  integrity sha512-YbubS7eK0J7DCf0U2LxvVP7LMfs6rC6UltihIgval3azO3gyDwEGVgsCMe1TmDiEkl6GdMKfRpaME6QxIYtzDQ==
+eslint-plugin-vue@9.32.0:
+  version "9.32.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-9.32.0.tgz#2b558e827886b567dfaa156cc1cad0f596461fab"
+  integrity sha512-b/Y05HYmnB/32wqVcjxjHZzNpwxj1onBOvqW89W+V+XNG1dRuaFbNd3vT9CLbr2LXjEoq+3vn8DanWf7XU22Ug==
   dependencies:
-    eslint-utils "^3.0.0"
+    "@eslint-community/eslint-utils" "^4.4.0"
+    globals "^13.24.0"
     natural-compare "^1.4.0"
-    nth-check "^2.0.1"
-    postcss-selector-parser "^6.0.9"
-    semver "^7.3.5"
-    vue-eslint-parser "^9.0.1"
+    nth-check "^2.1.1"
+    postcss-selector-parser "^6.0.15"
+    semver "^7.6.3"
+    vue-eslint-parser "^9.4.3"
     xml-name-validator "^4.0.0"
 
 eslint-scope@5.1.1:
@@ -4209,6 +4040,14 @@ eslint-scope@^7.1.1:
     esrecurse "^4.3.0"
     estraverse "^5.2.0"
 
+eslint-scope@^7.2.2:
+  version "7.2.2"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-7.2.2.tgz#deb4f92563390f32006894af62a22dba1c46423f"
+  integrity sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==
+  dependencies:
+    esrecurse "^4.3.0"
+    estraverse "^5.2.0"
+
 eslint-utils@^2.0.0, eslint-utils@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-2.1.0.tgz#d2de5e03424e707dc10c74068ddedae708741b27"
@@ -4238,6 +4077,11 @@ eslint-visitor-keys@^3.3.0:
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz#f6480fa6b1f30efe2d1968aa8ac745b862469826"
   integrity sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==
 
+eslint-visitor-keys@^3.4.1, eslint-visitor-keys@^3.4.3:
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz#0cd72fe8550e3c2eae156a96a4dddcd1c8ac5800"
+  integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==
+
 eslint-webpack-plugin@3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/eslint-webpack-plugin/-/eslint-webpack-plugin-3.2.0.tgz#1978cdb9edc461e4b0195a20da950cf57988347c"
@@ -4249,49 +4093,48 @@ eslint-webpack-plugin@3.2.0:
     normalize-path "^3.0.0"
     schema-utils "^4.0.0"
 
-eslint@8.33.0:
-  version "8.33.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.33.0.tgz#02f110f32998cb598c6461f24f4d306e41ca33d7"
-  integrity sha512-WjOpFQgKK8VrCnAtl8We0SUOy/oVZ5NHykyMiagV1M9r8IFpIJX7DduK6n1mpfhlG7T1NLWm2SuD8QB7KFySaA==
+eslint@8.57.1:
+  version "8.57.1"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.57.1.tgz#7df109654aba7e3bbe5c8eae533c5e461d3c6ca9"
+  integrity sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==
   dependencies:
-    "@eslint/eslintrc" "^1.4.1"
-    "@humanwhocodes/config-array" "^0.11.8"
+    "@eslint-community/eslint-utils" "^4.2.0"
+    "@eslint-community/regexpp" "^4.6.1"
+    "@eslint/eslintrc" "^2.1.4"
+    "@eslint/js" "8.57.1"
+    "@humanwhocodes/config-array" "^0.13.0"
     "@humanwhocodes/module-importer" "^1.0.1"
     "@nodelib/fs.walk" "^1.2.8"
-    ajv "^6.10.0"
+    "@ungap/structured-clone" "^1.2.0"
+    ajv "^6.12.4"
     chalk "^4.0.0"
     cross-spawn "^7.0.2"
     debug "^4.3.2"
     doctrine "^3.0.0"
     escape-string-regexp "^4.0.0"
-    eslint-scope "^7.1.1"
-    eslint-utils "^3.0.0"
-    eslint-visitor-keys "^3.3.0"
-    espree "^9.4.0"
-    esquery "^1.4.0"
+    eslint-scope "^7.2.2"
+    eslint-visitor-keys "^3.4.3"
+    espree "^9.6.1"
+    esquery "^1.4.2"
     esutils "^2.0.2"
     fast-deep-equal "^3.1.3"
     file-entry-cache "^6.0.1"
     find-up "^5.0.0"
     glob-parent "^6.0.2"
     globals "^13.19.0"
-    grapheme-splitter "^1.0.4"
+    graphemer "^1.4.0"
     ignore "^5.2.0"
-    import-fresh "^3.0.0"
     imurmurhash "^0.1.4"
     is-glob "^4.0.0"
     is-path-inside "^3.0.3"
-    js-sdsl "^4.1.4"
     js-yaml "^4.1.0"
     json-stable-stringify-without-jsonify "^1.0.1"
     levn "^0.4.1"
     lodash.merge "^4.6.2"
     minimatch "^3.1.2"
     natural-compare "^1.4.0"
-    optionator "^0.9.1"
-    regexpp "^3.2.0"
+    optionator "^0.9.3"
     strip-ansi "^6.0.1"
-    strip-json-comments "^3.1.0"
     text-table "^0.2.0"
 
 espree@^6.0.0:
@@ -4312,14 +4155,14 @@ espree@^9.3.1:
     acorn-jsx "^5.3.2"
     eslint-visitor-keys "^3.3.0"
 
-espree@^9.4.0:
-  version "9.4.0"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-9.4.0.tgz#cd4bc3d6e9336c433265fc0aa016fc1aaf182f8a"
-  integrity sha512-DQmnRpLj7f6TgN/NYb0MTzJXL+vJF9h3pHy4JhCIs3zwcgez8xmGg3sXHcEO97BrmO2OSvCwMdfdlyl+E9KjOw==
+espree@^9.6.0, espree@^9.6.1:
+  version "9.6.1"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-9.6.1.tgz#a2a17b8e434690a5432f2f8018ce71d331a48c6f"
+  integrity sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==
   dependencies:
-    acorn "^8.8.0"
+    acorn "^8.9.0"
     acorn-jsx "^5.3.2"
-    eslint-visitor-keys "^3.3.0"
+    eslint-visitor-keys "^3.4.1"
 
 esprima@^4.0.1:
   version "4.0.1"
@@ -4333,6 +4176,13 @@ esquery@^1.4.0:
   dependencies:
     estraverse "^5.1.0"
 
+esquery@^1.4.2:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.6.0.tgz#91419234f804d852a82dceec3e16cdc22cf9dae7"
+  integrity sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==
+  dependencies:
+    estraverse "^5.1.0"
+
 esrecurse@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.3.0.tgz#7ad7964d679abb28bee72cec63758b1c5d2c9921"
@@ -4377,37 +4227,37 @@ eventsource-polyfill@0.9.6:
   resolved "https://registry.yarnpkg.com/eventsource-polyfill/-/eventsource-polyfill-0.9.6.tgz#10e0d187f111b167f28fdab918843ce7d818f13c"
   integrity sha1-EODRh/ERsWfyj9q5GIQ859gY8Tw=
 
-express@4.18.2:
-  version "4.18.2"
-  resolved "https://registry.yarnpkg.com/express/-/express-4.18.2.tgz#3fabe08296e930c796c19e3c516979386ba9fd59"
-  integrity sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==
+express@4.21.2:
+  version "4.21.2"
+  resolved "https://registry.yarnpkg.com/express/-/express-4.21.2.tgz#cf250e48362174ead6cea4a566abef0162c1ec32"
+  integrity sha512-28HqgMZAmih1Czt9ny7qr6ek2qddF4FclbMzwhCREB6OFfH+rXAnuNCwo1/wFvrtbgsQDb4kSbX9de9lFbrXnA==
   dependencies:
     accepts "~1.3.8"
     array-flatten "1.1.1"
-    body-parser "1.20.1"
+    body-parser "1.20.3"
     content-disposition "0.5.4"
     content-type "~1.0.4"
-    cookie "0.5.0"
+    cookie "0.7.1"
     cookie-signature "1.0.6"
     debug "2.6.9"
     depd "2.0.0"
-    encodeurl "~1.0.2"
+    encodeurl "~2.0.0"
     escape-html "~1.0.3"
     etag "~1.8.1"
-    finalhandler "1.2.0"
+    finalhandler "1.3.1"
     fresh "0.5.2"
     http-errors "2.0.0"
-    merge-descriptors "1.0.1"
+    merge-descriptors "1.0.3"
     methods "~1.1.2"
     on-finished "2.4.1"
     parseurl "~1.3.3"
-    path-to-regexp "0.1.7"
+    path-to-regexp "0.1.12"
     proxy-addr "~2.0.7"
-    qs "6.11.0"
+    qs "6.13.0"
     range-parser "~1.2.1"
     safe-buffer "5.2.1"
-    send "0.18.0"
-    serve-static "1.15.0"
+    send "0.19.0"
+    serve-static "1.16.2"
     setprototypeof "1.2.0"
     statuses "2.0.1"
     type-is "~1.6.18"
@@ -4519,13 +4369,13 @@ finalhandler@1.1.2:
     statuses "~1.5.0"
     unpipe "~1.0.0"
 
-finalhandler@1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.2.0.tgz#7d23fe5731b207b4640e4fcd00aec1f9207a7b32"
-  integrity sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==
+finalhandler@1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.3.1.tgz#0c575f1d1d324ddd1da35ad7ece3df7d19088019"
+  integrity sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==
   dependencies:
     debug "2.6.9"
-    encodeurl "~1.0.2"
+    encodeurl "~2.0.0"
     escape-html "~1.0.3"
     on-finished "2.4.1"
     parseurl "~1.3.3"
@@ -4540,14 +4390,13 @@ find-cache-dir@^2.0.0:
     make-dir "^2.0.0"
     pkg-dir "^3.0.0"
 
-find-cache-dir@^3.3.2:
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-3.3.2.tgz#b30c5b6eff0730731aea9bbd9dbecbd80256d64b"
-  integrity sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==
+find-cache-dir@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-4.0.0.tgz#a30ee0448f81a3990708f6453633c733e2f6eec2"
+  integrity sha512-9ZonPT4ZAK4a+1pUPVPZJapbi7O5qbbJPdYw/NOQWZZbVLdDTYM3A4R9z/DpAM08IDaFGsvPgiGZ82WEwUDWjg==
   dependencies:
-    commondir "^1.0.1"
-    make-dir "^3.0.2"
-    pkg-dir "^4.1.0"
+    common-path-prefix "^3.0.0"
+    pkg-dir "^7.0.0"
 
 find-up@5.0.0, find-up@^5.0.0:
   version "5.0.0"
@@ -4563,7 +4412,7 @@ find-up@^3.0.0:
   dependencies:
     locate-path "^3.0.0"
 
-find-up@^4.0.0, find-up@^4.1.0:
+find-up@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19"
   integrity sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==
@@ -4571,6 +4420,14 @@ find-up@^4.0.0, find-up@^4.1.0:
     locate-path "^5.0.0"
     path-exists "^4.0.0"
 
+find-up@^6.3.0:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-6.3.0.tgz#2abab3d3280b2dc7ac10199ef324c4e002c8c790"
+  integrity sha512-v2ZsoEuVHYy8ZIlYqwPe/39Cy+cFDzp4dXPaxNvkEuouymu+2Jbz0PxpKarJHYJTmv2HWT3O382qY8l4jMWthw==
+  dependencies:
+    locate-path "^7.1.0"
+    path-exists "^5.0.0"
+
 flat-cache@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-3.0.4.tgz#61b0338302b2fe9f957dcc32fc2a87f1c3048b11"
@@ -4616,6 +4473,14 @@ for-each@^0.3.3:
   dependencies:
     is-callable "^1.1.3"
 
+foreground-child@^3.1.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/foreground-child/-/foreground-child-3.3.0.tgz#0ac8644c06e431439f8561db8ecf29a7b5519c77"
+  integrity sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==
+  dependencies:
+    cross-spawn "^7.0.0"
+    signal-exit "^4.0.1"
+
 form-data@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
@@ -4630,10 +4495,10 @@ forwarded@0.2.0:
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"
   integrity sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==
 
-fraction.js@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.2.0.tgz#448e5109a313a3527f5a3ab2119ec4cf0e0e2950"
-  integrity sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==
+fraction.js@^4.3.7:
+  version "4.3.7"
+  resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.3.7.tgz#06ca0085157e42fda7f9e726e79fefc4068840f7"
+  integrity sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==
 
 fresh@0.5.2:
   version "0.5.2"
@@ -4666,21 +4531,28 @@ fsevents@~2.3.2:
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
   integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
 
-function-bind@1.1.1, function-bind@^1.1.1:
+function-bind@1.1.2, function-bind@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c"
+  integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
+
+function-bind@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
 
-function.prototype.name@^1.1.5:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.5.tgz#cce0505fe1ffb80503e6f9e46cc64e46a12a9621"
-  integrity sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==
+function.prototype.name@^1.1.6, function.prototype.name@^1.1.8:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.8.tgz#e68e1df7b259a5c949eeef95cdbde53edffabb78"
+  integrity sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==
   dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.3"
-    es-abstract "^1.19.0"
-    functions-have-names "^1.2.2"
+    call-bind "^1.0.8"
+    call-bound "^1.0.3"
+    define-properties "^1.2.1"
+    functions-have-names "^1.2.3"
+    hasown "^2.0.2"
+    is-callable "^1.2.7"
 
-functions-have-names@^1.2.2:
+functions-have-names@^1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834"
   integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==
@@ -4700,7 +4572,12 @@ get-func-name@^2.0.0:
   resolved "https://registry.yarnpkg.com/get-func-name/-/get-func-name-2.0.0.tgz#ead774abee72e20409433a066366023dd6887a41"
   integrity sha512-Hm0ixYtaSZ/V7C8FJrtZIuBBI+iSgL+1Aq82zSu8VQNB4S3Gk8e7Qs3VwBDJAhmRZcFqkl3tQu36g/Foh5I5ig==
 
-get-intrinsic@^1.0.2, get-intrinsic@^1.1.0, get-intrinsic@^1.1.1:
+get-func-name@^2.0.1, get-func-name@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/get-func-name/-/get-func-name-2.0.2.tgz#0d7cf20cd13fda808669ffa88f4ffc7a3943fc41"
+  integrity sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==
+
+get-intrinsic@^1.0.2, get-intrinsic@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.1.1.tgz#15f59f376f855c446963948f0d24cd3637b4abc6"
   integrity sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==
@@ -4718,6 +4595,30 @@ get-intrinsic@^1.1.3:
     has "^1.0.3"
     has-symbols "^1.0.3"
 
+get-intrinsic@^1.2.4, get-intrinsic@^1.2.5, get-intrinsic@^1.2.6, get-intrinsic@^1.2.7:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.7.tgz#dcfcb33d3272e15f445d15124bc0a216189b9044"
+  integrity sha512-VW6Pxhsrk0KAOqs3WEd0klDiF/+V7gQOpAvY1jVU/LHmaD/kQO4523aiJuikX/QAKYiW6x8Jh+RJej1almdtCA==
+  dependencies:
+    call-bind-apply-helpers "^1.0.1"
+    es-define-property "^1.0.1"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
+    function-bind "^1.1.2"
+    get-proto "^1.0.0"
+    gopd "^1.2.0"
+    has-symbols "^1.1.0"
+    hasown "^2.0.2"
+    math-intrinsics "^1.1.0"
+
+get-proto@^1.0.0, get-proto@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/get-proto/-/get-proto-1.0.1.tgz#150b3f2743869ef3e851ec0c49d15b1d14d00ee1"
+  integrity sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==
+  dependencies:
+    dunder-proto "^1.0.1"
+    es-object-atoms "^1.0.0"
+
 get-stream@^5.1.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-5.2.0.tgz#4966a1795ee5ace65e706c4b7beb71257d6e22d3"
@@ -4725,13 +4626,14 @@ get-stream@^5.1.0:
   dependencies:
     pump "^3.0.0"
 
-get-symbol-description@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/get-symbol-description/-/get-symbol-description-1.0.0.tgz#7fdb81c900101fbd564dd5f1a30af5aadc1e58d6"
-  integrity sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==
+get-symbol-description@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/get-symbol-description/-/get-symbol-description-1.1.0.tgz#7bdd54e0befe8ffc9f3b4e203220d9f1e881b6ee"
+  integrity sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==
   dependencies:
-    call-bind "^1.0.2"
-    get-intrinsic "^1.1.1"
+    call-bound "^1.0.3"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.6"
 
 glob-parent@^5.1.2, glob-parent@~5.1.2:
   version "5.1.2"
@@ -4764,6 +4666,18 @@ glob@7.2.0, glob@^7.1.7:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
+glob@^10.3.3:
+  version "10.4.5"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-10.4.5.tgz#f4d9f0b90ffdbab09c9d77f5f29b4262517b0956"
+  integrity sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==
+  dependencies:
+    foreground-child "^3.1.0"
+    jackspeak "^3.1.2"
+    minimatch "^9.0.4"
+    minipass "^7.1.2"
+    package-json-from-dist "^1.0.0"
+    path-scurry "^1.11.1"
+
 glob@^7.0.0, glob@^7.1.1, glob@^7.1.3:
   version "7.1.3"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.3.tgz#3960832d3f1574108342dafd3a67b332c0969df1"
@@ -4787,7 +4701,7 @@ glob@^7.2.3:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-glob@^8.0.3:
+glob@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/glob/-/glob-8.1.0.tgz#d388f656593ef708ee3e34640fdfb99a9fd1c33e"
   integrity sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==
@@ -4825,12 +4739,20 @@ globals@^13.19.0:
   dependencies:
     type-fest "^0.20.2"
 
-globalthis@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/globalthis/-/globalthis-1.0.3.tgz#5852882a52b80dc301b0660273e1ed082f0b6ccf"
-  integrity sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==
+globals@^13.24.0:
+  version "13.24.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-13.24.0.tgz#8432a19d78ce0c1e833949c36adb345400bb1171"
+  integrity sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==
   dependencies:
-    define-properties "^1.1.3"
+    type-fest "^0.20.2"
+
+globalthis@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/globalthis/-/globalthis-1.0.4.tgz#7430ed3a975d97bfb59bcce41f5cabbafa651236"
+  integrity sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==
+  dependencies:
+    define-properties "^1.2.1"
+    gopd "^1.0.1"
 
 globby@^11.1.0:
   version "11.1.0"
@@ -4867,6 +4789,11 @@ gopd@^1.0.1:
   dependencies:
     get-intrinsic "^1.1.3"
 
+gopd@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.2.0.tgz#89f56b8217bdbc8802bd299df6d7f1081d7e51a1"
+  integrity sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==
+
 graceful-fs@^4.1.2:
   version "4.1.15"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.15.tgz#ffb703e1066e8a0eeaa4c8b80ba9253eeefbfb00"
@@ -4876,6 +4803,11 @@ graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.6:
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.9.tgz#041b05df45755e587a24942279b9d113146e1c96"
   integrity sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==
 
+graceful-fs@^4.2.10:
+  version "4.2.11"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3"
+  integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
+
 graceful-fs@^4.2.4:
   version "4.2.4"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.4.tgz#2256bde14d3632958c465ebc96dc467ca07a29fb"
@@ -4886,10 +4818,10 @@ graceful-fs@^4.2.9:
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.10.tgz#147d3a006da4ca3ce14728c7aefc287c367d7a6c"
   integrity sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==
 
-grapheme-splitter@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz#9cf3a665c6247479896834af35cf1dbb4400767e"
-  integrity sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==
+graphemer@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/graphemer/-/graphemer-1.4.0.tgz#fb2f1d55e0e3a1849aeffc90c4fa0dd53a0e66c6"
+  integrity sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==
 
 growl@1.10.5:
   version "1.10.5"
@@ -4907,11 +4839,6 @@ has-ansi@^2.0.0:
   dependencies:
     ansi-regex "^2.0.0"
 
-has-bigints@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.1.tgz#64fe6acb020673e3b78db035a5af69aa9d07b113"
-  integrity sha512-LSBS2LjbNBTf6287JEbEzvJgftkF5qFkmCo9hDRpAzKhUOlJ+hx8dd4USs00SgsUNwc4617J9ki5YtEClM2ffA==
-
 has-bigints@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.2.tgz#0871bd3e3d51626f6ca0966668ba35d5602d6eaa"
@@ -4933,20 +4860,30 @@ has-property-descriptors@^1.0.0:
   dependencies:
     get-intrinsic "^1.1.1"
 
-has-proto@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/has-proto/-/has-proto-1.0.1.tgz#1885c1305538958aff469fef37937c22795408e0"
-  integrity sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==
+has-property-descriptors@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz#963ed7d071dc7bf5f084c5bfbe0d1b6222586854"
+  integrity sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==
+  dependencies:
+    es-define-property "^1.0.0"
 
-has-symbols@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.0.tgz#ba1a8f1af2a0fc39650f5c850367704122063b44"
+has-proto@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/has-proto/-/has-proto-1.2.0.tgz#5de5a6eabd95fdffd9818b43055e8065e39fe9d5"
+  integrity sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==
+  dependencies:
+    dunder-proto "^1.0.0"
 
 has-symbols@^1.0.1, has-symbols@^1.0.2, has-symbols@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.3.tgz#bb7b2c4349251dce87b125f7bdf874aa7c8b39f8"
   integrity sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==
 
+has-symbols@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.1.0.tgz#fc9c6a783a084951d0b971fe1018de813707a338"
+  integrity sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==
+
 has-tostringtag@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/has-tostringtag/-/has-tostringtag-1.0.0.tgz#7e133818a7d394734f941e73c3d3f9291e658b25"
@@ -4954,6 +4891,13 @@ has-tostringtag@^1.0.0:
   dependencies:
     has-symbols "^1.0.2"
 
+has-tostringtag@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-tostringtag/-/has-tostringtag-1.0.2.tgz#2cdc42d40bef2e5b4eeab7c01a73c54ce7ab5abc"
+  integrity sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==
+  dependencies:
+    has-symbols "^1.0.3"
+
 has@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
@@ -4969,6 +4913,13 @@ hash-sum@^2.0.0:
   resolved "https://registry.yarnpkg.com/hash-sum/-/hash-sum-2.0.0.tgz#81d01bb5de8ea4a214ad5d6ead1b523460b0b45a"
   integrity sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==
 
+hasown@^2.0.0, hasown@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.2.tgz#003eaf91be7adc372e84ec59dc37252cedb80003"
+  integrity sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==
+  dependencies:
+    function-bind "^1.1.2"
+
 he@1.2.0, he@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
@@ -5015,20 +4966,20 @@ html-minifier-terser@^6.0.2:
     relateurl "^0.2.7"
     terser "^5.10.0"
 
-html-tags@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-3.1.0.tgz#7b5e6f7e665e9fb41f30007ed9e0d41e97fb2140"
-  integrity sha512-1qYz89hW3lFDEazhjW0yVAV87lw8lVkrJocr72XmBkMKsoSVJCQx3W8BXsC7hO2qAt8BoVjYjtAcZ9perqGnNg==
-
 html-tags@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-3.2.0.tgz#dbb3518d20b726524e4dd43de397eb0a95726961"
   integrity sha512-vy7ClnArOZwCnqZgvv+ddgHgJiAFXe3Ge9ML5/mBctVJoUoYPCdxVucOywjDARn6CVoh3dRSFdPHy2sX80L0Wg==
 
-html-webpack-plugin@5.5.0:
-  version "5.5.0"
-  resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-5.5.0.tgz#c3911936f57681c1f9f4d8b68c158cd9dfe52f50"
-  integrity sha512-sy88PC2cRTVxvETRgUHFrL4No3UxvcH8G1NepGhqaTT+GXN2kTamqasot0inS5hXeg1cMbFDt27zzo9p35lZVw==
+html-tags@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-3.3.1.tgz#a04026a18c882e4bba8a01a3d39cfe465d40b5ce"
+  integrity sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==
+
+html-webpack-plugin@5.6.3:
+  version "5.6.3"
+  resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-5.6.3.tgz#a31145f0fee4184d53a794f9513147df1e653685"
+  integrity sha512-QSf1yjtSAsmf7rYBV7XX86uua4W/vkhIt0xNXKbsi2foEeW7vjJQz4bhnpL3xH+l1ryl1680uNv968Z+X6jSYg==
   dependencies:
     "@types/html-minifier-terser" "^6.0.0"
     html-minifier-terser "^6.0.2"
@@ -5047,14 +4998,14 @@ htmlparser2@^6.1.0:
     entities "^2.0.0"
 
 htmlparser2@^8.0.0:
-  version "8.0.1"
-  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-8.0.1.tgz#abaa985474fcefe269bc761a779b544d7196d010"
-  integrity sha512-4lVbmc1diZC7GUJQtRQ5yBAeUCL1exyMwmForWkRLnwyzWBFxN633SALPMGYaWZvKe9j1pRZJpauvmxENSp/EA==
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-8.0.2.tgz#f002151705b383e62433b5cf466f5b716edaec21"
+  integrity sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==
   dependencies:
     domelementtype "^2.3.0"
-    domhandler "^5.0.2"
+    domhandler "^5.0.3"
     domutils "^3.0.1"
-    entities "^4.3.0"
+    entities "^4.4.0"
 
 http-errors@1.8.1:
   version "1.8.1"
@@ -5087,10 +5038,10 @@ http-proxy-agent@^5.0.0:
     agent-base "6"
     debug "4"
 
-http-proxy-middleware@2.0.6:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-2.0.6.tgz#e1a4dd6979572c7ab5a4e4b55095d1f32a74963f"
-  integrity sha512-ya/UeJ6HVBYxrgYotAZo1KvPWlgB48kUJLDePFeneHsVujFaW5WNj2NgWCAE//B1Dl02BIfYlpNgBy8Kf8Rjmw==
+http-proxy-middleware@2.0.7:
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-2.0.7.tgz#915f236d92ae98ef48278a95dedf17e991936ec6"
+  integrity sha512-fgVY8AV7qU7z/MmXJ/rxwbrtQH4jBQ9m7kp3llF0liB7glmFeVZFBepQb32T3y8n8k2+AEYuMPCpinYW+/CuRA==
   dependencies:
     "@types/http-proxy" "^1.17.8"
     http-proxy "^1.18.1"
@@ -5165,13 +5116,6 @@ immutable@^4.0.0:
   resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.1.0.tgz#f795787f0db780183307b9eb2091fcac1f6fafef"
   integrity sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==
 
-import-fresh@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.0.0.tgz#a3d897f420cab0e671236897f75bc14b4885c390"
-  dependencies:
-    parent-module "^1.0.0"
-    resolve-from "^4.0.0"
-
 import-fresh@^3.2.1:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
@@ -5223,23 +5167,14 @@ ini@^1.3.5:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
 
-internal-slot@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.3.tgz#7347e307deeea2faac2ac6205d4bc7d34967f59c"
-  integrity sha512-O0DB1JC/sPyZl7cIo78n5dR7eUSwwpYPiXRhTzNxZVAMUuB8vlnRFyLxdrVToks6XPLVnFfbzaVd5WLjhgg+vA==
+internal-slot@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.1.0.tgz#1eac91762947d2f7056bc838d93e13b2e9604961"
+  integrity sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==
   dependencies:
-    get-intrinsic "^1.1.0"
-    has "^1.0.3"
-    side-channel "^1.0.4"
-
-internal-slot@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.4.tgz#8551e7baf74a7a6ba5f749cfb16aa60722f0d6f3"
-  integrity sha512-tA8URYccNzMo94s5MQZgH8NB/XTa6HsOo0MLfXTKKEnHVVdegzaQoFZ7Jp44bdvLvY2waT5dc+j5ICEswhi7UQ==
-  dependencies:
-    get-intrinsic "^1.1.3"
-    has "^1.0.3"
-    side-channel "^1.0.4"
+    es-errors "^1.3.0"
+    hasown "^2.0.2"
+    side-channel "^1.1.0"
 
 interpret@^1.0.0:
   version "1.2.0"
@@ -5254,25 +5189,35 @@ ipaddr.js@1.9.1:
   resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.1.tgz#bff38543eeb8984825079ff3a2a8e6cbd46781b3"
   integrity sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==
 
-is-array-buffer@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/is-array-buffer/-/is-array-buffer-3.0.1.tgz#deb1db4fcae48308d54ef2442706c0393997052a"
-  integrity sha512-ASfLknmY8Xa2XtB4wmbz13Wu202baeA18cJBCeCy0wXUHZF0IPyVEXqKEcd+t2fNSLLL1vC6k7lxZEojNbISXQ==
+is-array-buffer@^3.0.4, is-array-buffer@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/is-array-buffer/-/is-array-buffer-3.0.5.tgz#65742e1e687bd2cc666253068fd8707fe4d44280"
+  integrity sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==
   dependencies:
-    call-bind "^1.0.2"
-    get-intrinsic "^1.1.3"
-    is-typed-array "^1.1.10"
+    call-bind "^1.0.8"
+    call-bound "^1.0.3"
+    get-intrinsic "^1.2.6"
 
 is-arrayish@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
 
-is-bigint@^1.0.1:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.4.tgz#08147a1875bc2b32005d41ccd8291dffc6691df3"
-  integrity sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==
+is-async-function@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-async-function/-/is-async-function-2.1.0.tgz#1d1080612c493608e93168fc4458c245074c06a6"
+  integrity sha512-GExz9MtyhlZyXYLxzlJRj5WUCE661zhDa1Yna52CN57AJsymh+DvXXjyveSioqSRdxvUrdKdvqB1b5cVKsNpWQ==
   dependencies:
-    has-bigints "^1.0.1"
+    call-bound "^1.0.3"
+    get-proto "^1.0.1"
+    has-tostringtag "^1.0.2"
+    safe-regex-test "^1.1.0"
+
+is-bigint@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.1.0.tgz#dda7a3445df57a42583db4228682eba7c4170672"
+  integrity sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==
+  dependencies:
+    has-bigints "^1.0.2"
 
 is-binary-path@~2.1.0:
   version "2.1.0"
@@ -5281,28 +5226,19 @@ is-binary-path@~2.1.0:
   dependencies:
     binary-extensions "^2.0.0"
 
-is-boolean-object@^1.1.0:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.1.2.tgz#5c6dc200246dd9321ae4b885a114bb1f75f63719"
-  integrity sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==
+is-boolean-object@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.2.1.tgz#c20d0c654be05da4fbc23c562635c019e93daf89"
+  integrity sha512-l9qO6eFlUETHtuihLcYOaLKByJ1f+N4kthcU9YjHy3N+B3hWv0y/2Nd0mu/7lTFnRQHTrSdXF50HQ3bl5fEnng==
   dependencies:
-    call-bind "^1.0.2"
-    has-tostringtag "^1.0.0"
+    call-bound "^1.0.2"
+    has-tostringtag "^1.0.2"
 
 is-callable@^1.1.3, is-callable@^1.2.7:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.7.tgz#3bc2a85ea742d9e36205dcacdd72ca1fdc51b055"
   integrity sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==
 
-is-callable@^1.1.4:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.4.tgz#1e1adf219e1eeb684d691f9d6a05ff0d30a24d75"
-
-is-callable@^1.2.4:
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.4.tgz#47301d58dd0259407865547853df6d61fe471945"
-  integrity sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==
-
 is-core-module@^2.11.0:
   version "2.11.0"
   resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.11.0.tgz#ad4cb3e3863e814523c96f3f58d26cc570ff0144"
@@ -5310,6 +5246,13 @@ is-core-module@^2.11.0:
   dependencies:
     has "^1.0.3"
 
+is-core-module@^2.13.0, is-core-module@^2.15.1, is-core-module@^2.16.0:
+  version "2.16.1"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.16.1.tgz#2a98801a849f43e2add644fbb6bc6229b19a4ef4"
+  integrity sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==
+  dependencies:
+    hasown "^2.0.2"
+
 is-core-module@^2.5.0, is-core-module@^2.9.0:
   version "2.9.0"
   resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.9.0.tgz#e1c34429cd51c6dd9e09e0799e396e27b19a9c69"
@@ -5324,9 +5267,22 @@ is-core-module@^2.8.1:
   dependencies:
     has "^1.0.3"
 
-is-date-object@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.1.tgz#9aa20eb6aeebbff77fbd33e74ca01b33581d3a16"
+is-data-view@^1.0.1, is-data-view@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-data-view/-/is-data-view-1.0.2.tgz#bae0a41b9688986c2188dda6657e56b8f9e63b8e"
+  integrity sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==
+  dependencies:
+    call-bound "^1.0.2"
+    get-intrinsic "^1.2.6"
+    is-typed-array "^1.1.13"
+
+is-date-object@^1.0.5, is-date-object@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.1.0.tgz#ad85541996fc7aa8b2729701d27b7319f95d82f7"
+  integrity sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==
+  dependencies:
+    call-bound "^1.0.2"
+    has-tostringtag "^1.0.2"
 
 is-docker@^2.0.0, is-docker@^2.1.1:
   version "2.2.1"
@@ -5337,11 +5293,28 @@ is-extglob@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
 
+is-finalizationregistry@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/is-finalizationregistry/-/is-finalizationregistry-1.1.1.tgz#eefdcdc6c94ddd0674d9c85887bf93f944a97c90"
+  integrity sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==
+  dependencies:
+    call-bound "^1.0.3"
+
 is-fullwidth-code-point@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
   integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
 
+is-generator-function@^1.0.10:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-generator-function/-/is-generator-function-1.1.0.tgz#bf3eeda931201394f57b5dba2800f91a238309ca"
+  integrity sha512-nPUB5km40q9e8UfN/Zc24eLlzdSf9OfKByBw9CIdw4H1giPMeA0OIJvbchsCu4npfI2QcMVBsGEBHKZ7wLTWmQ==
+  dependencies:
+    call-bound "^1.0.3"
+    get-proto "^1.0.0"
+    has-tostringtag "^1.0.2"
+    safe-regex-test "^1.1.0"
+
 is-glob@^4.0.0, is-glob@^4.0.1, is-glob@~4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.1.tgz#7567dbe9f2f5e2467bc77ab83c4a29482407a5dc"
@@ -5360,17 +5333,18 @@ is-interactive@^1.0.0:
   resolved "https://registry.yarnpkg.com/is-interactive/-/is-interactive-1.0.0.tgz#cea6e6ae5c870a7b0a0004070b7b587e0252912e"
   integrity sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==
 
-is-negative-zero@^2.0.1, is-negative-zero@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.2.tgz#7bf6f03a28003b8b3965de3ac26f664d765f3150"
-  integrity sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==
+is-map@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.3.tgz#ede96b7fe1e270b3c4465e3a465658764926d62e"
+  integrity sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==
 
-is-number-object@^1.0.4:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.6.tgz#6a7aaf838c7f0686a50b4553f7e54a96494e89f0"
-  integrity sha512-bEVOqiRcvo3zO1+G2lVMy+gkkEm9Yh7cDMRusKKu5ZJKPUYSJwICTKZrNKHA2EbSP0Tu0+6B/emsYNHZyn6K8g==
+is-number-object@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.1.1.tgz#144b21e95a1bc148205dcc2814a9134ec41b2541"
+  integrity sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==
   dependencies:
-    has-tostringtag "^1.0.0"
+    call-bound "^1.0.3"
+    has-tostringtag "^1.0.2"
 
 is-number@^7.0.0:
   version "7.0.0"
@@ -5412,56 +5386,58 @@ is-potential-custom-element-name@^1.0.1:
   resolved "https://registry.yarnpkg.com/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz#171ed6f19e3ac554394edf78caa05784a45bebb5"
   integrity sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==
 
-is-regex@^1.1.4:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.4.tgz#eef5663cd59fa4c0ae339505323df6854bb15958"
-  integrity sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==
+is-regex@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.2.1.tgz#76d70a3ed10ef9be48eb577887d74205bf0cad22"
+  integrity sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==
   dependencies:
-    call-bind "^1.0.2"
-    has-tostringtag "^1.0.0"
+    call-bound "^1.0.2"
+    gopd "^1.2.0"
+    has-tostringtag "^1.0.2"
+    hasown "^2.0.2"
 
-is-shared-array-buffer@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.1.tgz#97b0c85fbdacb59c9c446fe653b82cf2b5b7cfe6"
-  integrity sha512-IU0NmyknYZN0rChcKhRO1X8LYz5Isj/Fsqh8NJOSf+N/hCOTwy29F32Ik7a+QszE63IdvmwdTPDd6cZ5pg4cwA==
+is-set@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.3.tgz#8ab209ea424608141372ded6e0cb200ef1d9d01d"
+  integrity sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==
 
-is-shared-array-buffer@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz#8f259c573b60b6a32d4058a1a07430c0a7344c79"
-  integrity sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==
+is-shared-array-buffer@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.4.tgz#9b67844bd9b7f246ba0708c3a93e34269c774f6f"
+  integrity sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==
   dependencies:
-    call-bind "^1.0.2"
+    call-bound "^1.0.3"
 
-is-string@^1.0.5, is-string@^1.0.7:
+is-string@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.7.tgz#0dd12bf2006f255bb58f695110eff7491eebc0fd"
   integrity sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==
   dependencies:
     has-tostringtag "^1.0.0"
 
-is-symbol@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.2.tgz#a055f6ae57192caee329e7a860118b497a950f38"
+is-string@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.1.1.tgz#92ea3f3d5c5b6e039ca8677e5ac8d07ea773cbb9"
+  integrity sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==
   dependencies:
-    has-symbols "^1.0.0"
+    call-bound "^1.0.3"
+    has-tostringtag "^1.0.2"
 
-is-symbol@^1.0.3:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.4.tgz#a6dac93b635b063ca6872236de88910a57af139c"
-  integrity sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==
+is-symbol@^1.0.4, is-symbol@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.1.1.tgz#f47761279f532e2b05a7024a7506dbbedacd0634"
+  integrity sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==
   dependencies:
-    has-symbols "^1.0.2"
+    call-bound "^1.0.2"
+    has-symbols "^1.1.0"
+    safe-regex-test "^1.1.0"
 
-is-typed-array@^1.1.10, is-typed-array@^1.1.9:
-  version "1.1.10"
-  resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.10.tgz#36a5b5cb4189b575d1a3e4b08536bfb485801e3f"
-  integrity sha512-PJqgEHiWZvMpaFZ3uTc8kHPM4+4ADTlDniuQL7cU/UDA0Ql7F70yGfHph3cLNe+c9toaigv+DFzTJKhc2CtO6A==
+is-typed-array@^1.1.13, is-typed-array@^1.1.14, is-typed-array@^1.1.15:
+  version "1.1.15"
+  resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.15.tgz#4bfb4a45b61cee83a5a46fba778e4e8d59c0ce0b"
+  integrity sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==
   dependencies:
-    available-typed-arrays "^1.0.5"
-    call-bind "^1.0.2"
-    for-each "^0.3.3"
-    gopd "^1.0.1"
-    has-tostringtag "^1.0.0"
+    which-typed-array "^1.1.16"
 
 is-unicode-supported@^0.1.0:
   version "0.1.0"
@@ -5472,13 +5448,33 @@ is-url@^1.2.2:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/is-url/-/is-url-1.2.4.tgz#04a4df46d28c4cff3d73d01ff06abeb318a1aa52"
 
-is-weakref@^1.0.1, is-weakref@^1.0.2:
+is-weakmap@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.2.tgz#bf72615d649dfe5f699079c54b83e47d1ae19cfd"
+  integrity sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==
+
+is-weakref@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-weakref/-/is-weakref-1.0.2.tgz#9529f383a9338205e89765e0392efc2f100f06f2"
   integrity sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==
   dependencies:
     call-bind "^1.0.2"
 
+is-weakref@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-weakref/-/is-weakref-1.1.0.tgz#47e3472ae95a63fa9cf25660bcf0c181c39770ef"
+  integrity sha512-SXM8Nwyys6nT5WP6pltOwKytLV7FqQ4UiibxVmW+EIosHcmCqkkjViTb5SNssDlkCiEYRP1/pdWUKVvZBmsR2Q==
+  dependencies:
+    call-bound "^1.0.2"
+
+is-weakset@^2.0.3:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.4.tgz#c9f5deb0bc1906c6d6f1027f284ddf459249daca"
+  integrity sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==
+  dependencies:
+    call-bound "^1.0.3"
+    get-intrinsic "^1.2.6"
+
 is-wsl@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-1.1.0.tgz#1f16e4aa22b04d1336b66188a66af3c600c3a66d"
@@ -5503,6 +5499,11 @@ isarray@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
 
+isarray@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
+  integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
+
 isarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
@@ -5567,6 +5568,15 @@ istanbul-reports@^3.0.5:
     html-escaper "^2.0.0"
     istanbul-lib-report "^3.0.0"
 
+jackspeak@^3.1.2:
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/jackspeak/-/jackspeak-3.4.3.tgz#8833a9d89ab4acde6188942bd1c53b6390ed5a8a"
+  integrity sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==
+  dependencies:
+    "@isaacs/cliui" "^8.0.2"
+  optionalDependencies:
+    "@pkgjs/parseargs" "^0.11.0"
+
 jake@^10.8.5:
   version "10.8.5"
   resolved "https://registry.yarnpkg.com/jake/-/jake-10.8.5.tgz#f2183d2c59382cb274226034543b9c03b8164c46"
@@ -5617,34 +5627,30 @@ jest-worker@^29.1.2:
     merge-stream "^2.0.0"
     supports-color "^8.0.0"
 
-js-beautify@1.14.6:
-  version "1.14.6"
-  resolved "https://registry.yarnpkg.com/js-beautify/-/js-beautify-1.14.6.tgz#b23ca5d74a462c282c7711bb51150bcc97f2b507"
-  integrity sha512-GfofQY5zDp+cuHc+gsEXKPpNw2KbPddreEo35O6jT6i0RVK6LhsoYBhq5TvK4/n74wnA0QbK8gGd+jUZwTMKJw==
+js-beautify@^1.14.9:
+  version "1.15.1"
+  resolved "https://registry.yarnpkg.com/js-beautify/-/js-beautify-1.15.1.tgz#4695afb508c324e1084ee0b952a102023fc65b64"
+  integrity sha512-ESjNzSlt/sWE8sciZH8kBF8BPlwXPwhR6pWKAw8bw4Bwj+iZcnKW6ONWUutJ7eObuBZQpiIb8S7OYspWrKt7rA==
   dependencies:
     config-chain "^1.1.13"
-    editorconfig "^0.15.3"
-    glob "^8.0.3"
-    nopt "^6.0.0"
+    editorconfig "^1.0.4"
+    glob "^10.3.3"
+    js-cookie "^3.0.5"
+    nopt "^7.2.0"
 
-js-cookie@3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-3.0.1.tgz#9e39b4c6c2f56563708d7d31f6f5f21873a92414"
-  integrity sha512-+0rgsUXZu4ncpPxRL+lNEptWMOWl9etvPHc/koSRp6MPwpRYAhmk0dUG00J4bxVV3r9uUzfo24wW0knS07SKSw==
-
-js-sdsl@^4.1.4:
-  version "4.1.5"
-  resolved "https://registry.yarnpkg.com/js-sdsl/-/js-sdsl-4.1.5.tgz#1ff1645e6b4d1b028cd3f862db88c9d887f26e2a"
-  integrity sha512-08bOAKweV2NUC1wqTtf3qZlnpOX/R2DU9ikpjOHs0H+ibQv3zpncVQg6um4uYtRtrwIX8M4Nh3ytK4HGlYAq7Q==
+js-cookie@3.0.5, js-cookie@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-3.0.5.tgz#0b7e2fd0c01552c58ba86e0841f94dc2557dcdbc"
+  integrity sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==
 
 js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
 
-js-tokens@^8.0.0:
-  version "8.0.0"
-  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-8.0.0.tgz#5dbe2cdfa9afc93251d3a77bf18c3ad6fa8a4de4"
-  integrity sha512-PC7MzqInq9OqKyTXfIvQNcjMkODJYC8A17kAaQgeW79yfhqTWSOfjHYQ2mDDcwJ96Iibtwkfh0C7R/OvqPlgVA==
+js-tokens@^9.0.0:
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-9.0.1.tgz#2ec43964658435296f6761b34e10671c2d9527f4"
+  integrity sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==
 
 js-yaml@4.1.0, js-yaml@^4.1.0:
   version "4.1.0"
@@ -5691,10 +5697,20 @@ jsesc@^2.5.1:
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"
   integrity sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==
 
+jsesc@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-3.1.0.tgz#74d335a234f67ed19907fdadfac7ccf9d409825d"
+  integrity sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==
+
 jsesc@~0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
 
+jsesc@~3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-3.0.2.tgz#bb8b09a6597ba426425f2e4a07245c3d00b9343e"
+  integrity sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==
+
 json-loader@0.5.7:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/json-loader/-/json-loader-0.5.7.tgz#dca14a70235ff82f0ac9a3abeb60d337a365185d"
@@ -5728,6 +5744,13 @@ json5@^1.0.1:
   dependencies:
     minimist "^1.2.0"
 
+json5@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.2.tgz#63d98d60f21b313b77c4d6da18bfa69d80e1d593"
+  integrity sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==
+  dependencies:
+    minimist "^1.2.0"
+
 json5@^2.1.2:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.1.3.tgz#c9b0f7fa9233bfe5807fe66fcf3a5617ed597d43"
@@ -5740,7 +5763,7 @@ json5@^2.2.0, json5@^2.2.1:
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.1.tgz#655d50ed1e6f95ad1a3caababd2b0efda10b395c"
   integrity sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==
 
-json5@^2.2.2:
+json5@^2.2.3:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
   integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
@@ -5780,10 +5803,10 @@ just-extend@^4.0.2:
   resolved "https://registry.yarnpkg.com/just-extend/-/just-extend-4.2.1.tgz#ef5e589afb61e5d66b24eca749409a8939a8c744"
   integrity sha512-g3UB796vUFIY90VIv/WX3L2c8CS2MdWUww3CNrYmqza1Fg0DURc2K/O4YrnklBdQarSJ/y8JnJYDGc+1iumQjg==
 
-karma-coverage@2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/karma-coverage/-/karma-coverage-2.2.0.tgz#64f838b66b71327802e7f6f6c39d569b7024e40c"
-  integrity sha512-gPVdoZBNDZ08UCzdMHHhEImKrw1+PAOQOIiffv1YsvxFhBjqvo/SVXNk4tqn1SYqX0BJZT6S/59zgxiBe+9OuA==
+karma-coverage@2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/karma-coverage/-/karma-coverage-2.2.1.tgz#e1cc074f93ace9dc4fb7e7aeca7135879c2e358c"
+  integrity sha512-yj7hbequkQP2qOSb20GuNSIyE//PgJWHwC2IydLE6XRtsnaflv+/OSGNssPjobYUlhVVagy99TQpqUt3vAUG7A==
   dependencies:
     istanbul-lib-coverage "^3.2.0"
     istanbul-lib-instrument "^5.1.0"
@@ -5792,13 +5815,13 @@ karma-coverage@2.2.0:
     istanbul-reports "^3.0.5"
     minimatch "^3.0.4"
 
-karma-firefox-launcher@2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/karma-firefox-launcher/-/karma-firefox-launcher-2.1.2.tgz#9a38cc783c579a50f3ed2a82b7386186385cfc2d"
-  integrity sha512-VV9xDQU1QIboTrjtGVD4NCfzIH7n01ZXqy/qpBhnOeGVOkG5JYPEm8kuSd7psHE6WouZaQ9Ool92g8LFweSNMA==
+karma-firefox-launcher@2.1.3:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/karma-firefox-launcher/-/karma-firefox-launcher-2.1.3.tgz#b278a4cbffa92ab81394b1a398813847b0624a85"
+  integrity sha512-LMM2bseebLbYjODBOVt7TCPP9OI2vZIXCavIXhkO9m+10Uj5l7u/SKoeRmYx8FYHTVGZSpk6peX+3BMHC1WwNw==
   dependencies:
     is-wsl "^2.2.0"
-    which "^2.0.1"
+    which "^3.0.0"
 
 karma-mocha-reporter@2.2.5:
   version "2.2.5"
@@ -5821,12 +5844,12 @@ karma-sinon-chai@2.0.2:
   resolved "https://registry.yarnpkg.com/karma-sinon-chai/-/karma-sinon-chai-2.0.2.tgz#e28c109b989973abafc28a7c9f09ef24a05e07c2"
   integrity sha512-SDgh6V0CUd+7ruL1d3yG6lFzmJNGRNQuEuCYXLaorruNP9nwQfA7hpsp4clx4CbOo5Gsajh3qUOT7CrVStUKMw==
 
-karma-sourcemap-loader@0.3.8:
-  version "0.3.8"
-  resolved "https://registry.yarnpkg.com/karma-sourcemap-loader/-/karma-sourcemap-loader-0.3.8.tgz#d4bae72fb7a8397328a62b75013d2df937bdcf9c"
-  integrity sha512-zorxyAakYZuBcHRJE+vbrK2o2JXLFWK8VVjiT/6P+ltLBUGUvqTEkUiQ119MGdOrK7mrmxXHZF1/pfT6GgIZ6g==
+karma-sourcemap-loader@0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/karma-sourcemap-loader/-/karma-sourcemap-loader-0.4.0.tgz#b01d73f8f688f533bcc8f5d273d43458e13b5488"
+  integrity sha512-xCRL3/pmhAYF3I6qOrcn0uhbQevitc2DERMPH82FMnG+4WReoGcGFZb1pURf2a5apyrOHRdvD+O6K7NljqKHyA==
   dependencies:
-    graceful-fs "^4.1.2"
+    graceful-fs "^4.2.10"
 
 karma-spec-reporter@0.0.36:
   version "0.0.36"
@@ -5835,19 +5858,19 @@ karma-spec-reporter@0.0.36:
   dependencies:
     colors "1.4.0"
 
-karma-webpack@5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/karma-webpack/-/karma-webpack-5.0.0.tgz#2a2c7b80163fe7ffd1010f83f5507f95ef39f840"
-  integrity sha512-+54i/cd3/piZuP3dr54+NcFeKOPnys5QeM1IY+0SPASwrtHsliXUiCL50iW+K9WWA7RvamC4macvvQ86l3KtaA==
+karma-webpack@5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/karma-webpack/-/karma-webpack-5.0.1.tgz#4eafd31bbe684a747a6e8f3e4ad373e53979ced4"
+  integrity sha512-oo38O+P3W2mSPCSUrQdySSPv1LvPpXP+f+bBimNomS5sW+1V4SuhCuW8TfJzV+rDv921w2fDSDw0xJbPe6U+kQ==
   dependencies:
     glob "^7.1.3"
-    minimatch "^3.0.4"
+    minimatch "^9.0.3"
     webpack-merge "^4.1.5"
 
-karma@6.4.1:
-  version "6.4.1"
-  resolved "https://registry.yarnpkg.com/karma/-/karma-6.4.1.tgz#f2253716dd3a41aaa813fa9f54b6ee047e1127d9"
-  integrity sha512-Cj57NKOskK7wtFWSlMvZf459iX+kpYIPXmkNUzP2WAFcA7nhr/ALn5R7sw3w+1udFDcpMx/tuB8d5amgm3ijaA==
+karma@6.4.4:
+  version "6.4.4"
+  resolved "https://registry.yarnpkg.com/karma/-/karma-6.4.4.tgz#dfa5a426cf5a8b53b43cd54ef0d0d09742351492"
+  integrity sha512-LrtUxbdvt1gOpo3gxG+VAJlJAEMhbWlM4YrFQgql98FwF7+K8K12LYO4hnDdUkNjeztYrOXEMqgTajSWgmtI/w==
   dependencies:
     "@colors/colors" "1.5.0"
     body-parser "^1.19.0"
@@ -5868,7 +5891,7 @@ karma@6.4.1:
     qjobs "^1.2.0"
     range-parser "^1.2.1"
     rimraf "^3.0.2"
-    socket.io "^4.4.1"
+    socket.io "^4.7.2"
     source-map "^0.6.1"
     tmp "^0.2.1"
     ua-parser-js "^0.7.30"
@@ -5883,7 +5906,7 @@ kind-of@^6.0.3:
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
   integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
 
-klona@^2.0.4, klona@^2.0.5:
+klona@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.5.tgz#d166574d90076395d9963aa7a928fabb8d76afbc"
   integrity sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ==
@@ -5982,6 +6005,13 @@ locate-path@^6.0.0:
   dependencies:
     p-locate "^5.0.0"
 
+locate-path@^7.1.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-7.2.0.tgz#69cb1779bd90b35ab1e771e1f2f89a202c2a8a8a"
+  integrity sha512-gvVijfZvn7R+2qyPX8mAuKcFGDf6Nc61GdvGafQsHL0sBIxfKzA+usWn4GFC/bk+QdwPUD4kWFJLhElipq+0VA==
+  dependencies:
+    p-locate "^6.0.0"
+
 lodash._arraycopy@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/lodash._arraycopy/-/lodash._arraycopy-3.0.0.tgz#76e7b7c1f1fb92547374878a562ed06a3e50f6e1"
@@ -6217,11 +6247,6 @@ lodash@^4.17.10:
   version "4.17.11"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
 
-lodash@^4.17.13:
-  version "4.17.15"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
-  integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
-
 log-symbols@4.1.0, log-symbols@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-4.1.0.tgz#3fbdbb95b4683ac9fc785111e792e558d4abd503"
@@ -6253,13 +6278,20 @@ log4js@^6.4.1:
     rfdc "^1.3.0"
     streamroller "^3.0.6"
 
-loupe@2.3.4, loupe@^2.3.1:
+loupe@2.3.4:
   version "2.3.4"
   resolved "https://registry.yarnpkg.com/loupe/-/loupe-2.3.4.tgz#7e0b9bffc76f148f9be769cb1321d3dcf3cb25f3"
   integrity sha512-OvKfgCC2Ndby6aSTREl5aCCPTNIzlDfQZvZxNUrBrihDhL3xcrYegTblhmEiCrg2kKQz4XsFIaemE5BF4ybSaQ==
   dependencies:
     get-func-name "^2.0.0"
 
+loupe@^2.3.6:
+  version "2.3.7"
+  resolved "https://registry.yarnpkg.com/loupe/-/loupe-2.3.7.tgz#6e69b7d4db7d3ab436328013d37d1c8c3540c697"
+  integrity sha512-zSMINGVYkdpYSOBmLi0D1Uo7JU9nVdQKrHxC8eYlV+9YKK9WePqAlL7lSlorG/U2Fw1w0hTBmaa/jrQ3UbPHtA==
+  dependencies:
+    get-func-name "^2.0.1"
+
 lower-case@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-2.0.2.tgz#6fa237c63dbdc4a82ca0fd882e4722dc5e634e28"
@@ -6267,13 +6299,10 @@ lower-case@^2.0.2:
   dependencies:
     tslib "^2.0.3"
 
-lru-cache@^4.1.5:
-  version "4.1.5"
-  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd"
-  integrity sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==
-  dependencies:
-    pseudomap "^1.0.2"
-    yallist "^2.1.2"
+lru-cache@^10.2.0:
+  version "10.4.3"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.4.3.tgz#410fc8a17b70e598013df257c2446b7f3383f119"
+  integrity sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==
 
 lru-cache@^5.1.1:
   version "5.1.1"
@@ -6289,12 +6318,12 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
-magic-string@^0.25.7:
-  version "0.25.9"
-  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.9.tgz#de7f9faf91ef8a1c91d02c2e5314c8277dbcdd1c"
-  integrity sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==
+magic-string@^0.30.11:
+  version "0.30.17"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.17.tgz#450a449673d2460e5bbcfba9a61916a1714c7453"
+  integrity sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==
   dependencies:
-    sourcemap-codec "^1.4.8"
+    "@jridgewell/sourcemap-codec" "^1.5.0"
 
 make-dir@^2.0.0, make-dir@^2.1.0:
   version "2.1.0"
@@ -6303,7 +6332,7 @@ make-dir@^2.0.0, make-dir@^2.1.0:
     pify "^4.0.1"
     semver "^5.6.0"
 
-make-dir@^3.0.0, make-dir@^3.0.2:
+make-dir@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
   integrity sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==
@@ -6319,6 +6348,11 @@ map-obj@^4.0.0:
   resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-4.1.0.tgz#b91221b542734b9f14256c0132c897c5d7256fd5"
   integrity sha512-glc9y00wgtwcDmp7GaE/0b0OnxpNJsVf3ael/An6Fe2Q51LLwN1er6sdomLRzz5h0+yMpiYLhWYF5R7HeqVd4g==
 
+math-intrinsics@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/math-intrinsics/-/math-intrinsics-1.1.0.tgz#a0dd74be81e2aa5c2f27e65ce283605ee4e2b7f9"
+  integrity sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==
+
 mathml-tag-names@^2.1.3:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz#4ddadd67308e780cf16a47685878ee27b736a0a3"
@@ -6358,9 +6392,10 @@ meow@^9.0.0:
     type-fest "^0.18.0"
     yargs-parser "^20.2.3"
 
-merge-descriptors@1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
+merge-descriptors@1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.3.tgz#d80319a65f3c7935351e5cfdac8f9318504dbed5"
+  integrity sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==
 
 merge-stream@^2.0.0:
   version "2.0.0"
@@ -6438,12 +6473,13 @@ min-indent@^1.0.0:
   resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
   integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
 
-mini-css-extract-plugin@2.7.2:
-  version "2.7.2"
-  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-2.7.2.tgz#e049d3ea7d3e4e773aad585c6cb329ce0c7b72d7"
-  integrity sha512-EdlUizq13o0Pd+uCp+WO/JpkLvHRVGt97RqfeGhXqAcorYo1ypJSpkV+WDT0vY/kmh/p7wRdJNJtuyK540PXDw==
+mini-css-extract-plugin@2.9.2:
+  version "2.9.2"
+  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-2.9.2.tgz#966031b468917a5446f4c24a80854b2947503c5b"
+  integrity sha512-GJuACcS//jtq4kCtd5ii/M0SZf7OZRH+BxdqXZHaJfb8TJiVl+NgQRPwiYt2EuqeSkNydn/7vP+bcE27C5mb9w==
   dependencies:
     schema-utils "^4.0.0"
+    tapable "^2.2.1"
 
 minimatch@3.1.2, minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
   version "3.1.2"
@@ -6459,10 +6495,10 @@ minimatch@4.2.1:
   dependencies:
     brace-expansion "^1.1.7"
 
-minimatch@5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-5.0.1.tgz#fb9022f7528125187c92bd9e9b6366be1cf3415b"
-  integrity sha512-nLDxIFRyhDblz3qMuq+SoRZED4+miJ/G+tdDrjkkkRnjAsBexeGpgjLEQ0blJy7rHhR2b93rhQY4SvyWu9v03g==
+minimatch@9.0.1:
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.1.tgz#8a555f541cf976c622daf078bb28f29fb927c253"
+  integrity sha512-0jWhJpD/MdhPXwPuiRkCbfYfSKp2qnn2eOc279qI7f+osl/l+prKSrvhg157zSYvx/1nmgn2NqdT6k2Z7zSH9w==
   dependencies:
     brace-expansion "^2.0.1"
 
@@ -6479,6 +6515,20 @@ minimatch@^5.0.1:
   dependencies:
     brace-expansion "^2.0.1"
 
+minimatch@^5.1.6:
+  version "5.1.6"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-5.1.6.tgz#1cfcb8cf5522ea69952cd2af95ae09477f122a96"
+  integrity sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==
+  dependencies:
+    brace-expansion "^2.0.1"
+
+minimatch@^9.0.3, minimatch@^9.0.4:
+  version "9.0.5"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.5.tgz#d74f9dd6b57d83d8e98cfb82133b03978bc929e5"
+  integrity sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==
+  dependencies:
+    brace-expansion "^2.0.1"
+
 minimist-options@4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/minimist-options/-/minimist-options-4.1.0.tgz#c0655713c53a8a2ebd77ffa247d342c40f010619"
@@ -6506,6 +6556,11 @@ minimist@^1.2.5:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
   integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
 
+"minipass@^5.0.0 || ^6.0.2 || ^7.0.0", minipass@^7.1.2:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/minipass/-/minipass-7.1.2.tgz#93a9626ce5e5e66bd4db86849e7515e92340a707"
+  integrity sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==
+
 mitt@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/mitt/-/mitt-2.1.0.tgz#f740577c23176c6205b121b2973514eade1b2230"
@@ -6524,36 +6579,31 @@ mkdirp@^0.5.5:
   dependencies:
     minimist "^1.2.5"
 
-mkpath@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/mkpath/-/mkpath-1.0.0.tgz#ebb3a977e7af1c683ae6fda12b545a6ba6c5853d"
-
-mocha@10.2.0:
-  version "10.2.0"
-  resolved "https://registry.yarnpkg.com/mocha/-/mocha-10.2.0.tgz#1fd4a7c32ba5ac372e03a17eef435bd00e5c68b8"
-  integrity sha512-IDY7fl/BecMwFHzoqF2sg/SHHANeBoMMXFlS9r0OXKDssYE1M5O43wUY/9BVPeIvfH2zmEbBfseqN9gBQZzXkg==
+mocha@10.8.2:
+  version "10.8.2"
+  resolved "https://registry.yarnpkg.com/mocha/-/mocha-10.8.2.tgz#8d8342d016ed411b12a429eb731b825f961afb96"
+  integrity sha512-VZlYo/WE8t1tstuRmqgeyBgCbJc/lEdopaa+axcKzTBJ+UIdlAB9XnmvTCAH4pwR4ElNInaedhEBmZD8iCSVEg==
   dependencies:
-    ansi-colors "4.1.1"
-    browser-stdout "1.3.1"
-    chokidar "3.5.3"
-    debug "4.3.4"
-    diff "5.0.0"
-    escape-string-regexp "4.0.0"
-    find-up "5.0.0"
-    glob "7.2.0"
-    he "1.2.0"
-    js-yaml "4.1.0"
-    log-symbols "4.1.0"
-    minimatch "5.0.1"
-    ms "2.1.3"
-    nanoid "3.3.3"
-    serialize-javascript "6.0.0"
-    strip-json-comments "3.1.1"
-    supports-color "8.1.1"
-    workerpool "6.2.1"
-    yargs "16.2.0"
-    yargs-parser "20.2.4"
-    yargs-unparser "2.0.0"
+    ansi-colors "^4.1.3"
+    browser-stdout "^1.3.1"
+    chokidar "^3.5.3"
+    debug "^4.3.5"
+    diff "^5.2.0"
+    escape-string-regexp "^4.0.0"
+    find-up "^5.0.0"
+    glob "^8.1.0"
+    he "^1.2.0"
+    js-yaml "^4.1.0"
+    log-symbols "^4.1.0"
+    minimatch "^5.1.6"
+    ms "^2.1.3"
+    serialize-javascript "^6.0.2"
+    strip-json-comments "^3.1.1"
+    supports-color "^8.1.1"
+    workerpool "^6.5.1"
+    yargs "^16.2.0"
+    yargs-parser "^20.2.9"
+    yargs-unparser "^2.0.0"
 
 mocha@9.2.2:
   version "9.2.2"
@@ -6594,7 +6644,7 @@ ms@2.1.2:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
-ms@2.1.3:
+ms@2.1.3, ms@^2.1.3:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
@@ -6603,21 +6653,26 @@ ms@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.1.tgz#30a5864eb3ebb0a66f2ebe6d727af06a09d86e0a"
 
-nanoid@3.3.1, nanoid@^3.3.1:
+nanoid@3.3.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.1.tgz#6347a18cac88af88f58af0b3594b723d5e99bb35"
   integrity sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw==
 
-nanoid@3.3.3:
-  version "3.3.3"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.3.tgz#fd8e8b7aa761fe807dba2d1b98fb7241bb724a25"
-  integrity sha512-p1sjXuopFs0xg+fPASzQ28agW1oHD7xDsd9Xkf3T15H3c/cifrFHVwrh74PdoklAPi+i7MdRsE47vm2r6JoB+w==
-
 nanoid@^3.3.4:
   version "3.3.4"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
   integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
 
+nanoid@^3.3.7:
+  version "3.3.7"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
+  integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==
+
+nanoid@^3.3.8:
+  version "3.3.8"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.8.tgz#b1be3030bee36aaff18bacb375e5cce521684baf"
+  integrity sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==
+
 natural-compare@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
@@ -6643,13 +6698,13 @@ nightwatch-axe-verbose@^2.1.0:
   dependencies:
     axe-core "^4.6.1"
 
-nightwatch@2.6.19:
-  version "2.6.19"
-  resolved "https://registry.yarnpkg.com/nightwatch/-/nightwatch-2.6.19.tgz#2c35304eb67e06d24f982cb42cce618c617a3fcb"
-  integrity sha512-AxuPEWlf+MCfo4tZ0BFKkxqUIL0x/jZeFSvxV7Wwp/sBM8XmVA1rEEhNe/pCVsyjL+Q4G97rMKTonFYF/aXsBw==
+nightwatch@2.6.25:
+  version "2.6.25"
+  resolved "https://registry.yarnpkg.com/nightwatch/-/nightwatch-2.6.25.tgz#99c2abdd8a7f1ce8be2882ac5458a776caf1b5ab"
+  integrity sha512-aYc5eA6M/iADdbKbD6dMHlhUsaJm/Y4/VOtSHSC23nimGTXMUKbe1Bb14Iz3/SNyz2joHOkpxaDIPIAZCSlOiQ==
   dependencies:
     "@nightwatch/chai" "5.0.2"
-    "@nightwatch/html-reporter-template" "0.1.4"
+    "@nightwatch/html-reporter-template" "0.2.1"
     ansi-to-html "0.7.2"
     assertion-error "1.1.0"
     boxen "5.1.2"
@@ -6670,7 +6725,6 @@ nightwatch@2.6.19:
     lodash.pick "4.4.0"
     minimatch "3.1.2"
     minimist "1.2.6"
-    mkpath "1.0.0"
     mocha "9.2.2"
     nightwatch-axe-verbose "^2.1.0"
     open "8.4.0"
@@ -6682,13 +6736,13 @@ nightwatch@2.6.19:
     untildify "^4.0.0"
     uuid "8.3.2"
 
-nise@^5.1.2:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/nise/-/nise-5.1.2.tgz#a7b8909c216b3491fd4fc0b124efb69f3939b449"
-  integrity sha512-+gQjFi8v+tkfCuSCxfURHLhRhniE/+IaYbIphxAN2JRR9SHKhY8hgXpaXiYfHdw+gcGe4buxgbprBQFab9FkhA==
+nise@^5.1.4:
+  version "5.1.4"
+  resolved "https://registry.yarnpkg.com/nise/-/nise-5.1.4.tgz#491ce7e7307d4ec546f5a659b2efe94a18b4bbc0"
+  integrity sha512-8+Ib8rRJ4L0o3kfmyVCL7gzrohyDe0cMFTBa2d364yIrEGMEoetznKJx899YxjybU6bL9SQkYPSBBs1gyYs8Xg==
   dependencies:
     "@sinonjs/commons" "^2.0.0"
-    "@sinonjs/fake-timers" "^7.0.4"
+    "@sinonjs/fake-timers" "^10.0.2"
     "@sinonjs/text-encoding" "^0.7.1"
     just-extend "^4.0.2"
     path-to-regexp "^1.7.0"
@@ -6701,17 +6755,22 @@ no-case@^3.0.4:
     lower-case "^2.0.2"
     tslib "^2.0.3"
 
+node-releases@^2.0.19:
+  version "2.0.19"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.19.tgz#9e445a52950951ec4d177d843af370b411caf314"
+  integrity sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==
+
 node-releases@^2.0.5, node-releases@^2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.6.tgz#8a7088c63a55e493845683ebf3c828d8c51c5503"
   integrity sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==
 
-nopt@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/nopt/-/nopt-6.0.0.tgz#245801d8ebf409c6df22ab9d95b65e1309cdb16d"
-  integrity sha512-ZwLpbTgdhuZUnZzjd7nb1ZV+4DoiC6/sfiVKok72ym/4Tlf+DFdlHYmT2JPmcNNWV6Pi3SDf1kT+A4r9RTuT9g==
+nopt@^7.2.0:
+  version "7.2.1"
+  resolved "https://registry.yarnpkg.com/nopt/-/nopt-7.2.1.tgz#1cac0eab9b8e97c9093338446eddd40b2c8ca1e7"
+  integrity sha512-taM24ViiimT/XntxbPyJQzCG+p4EKOpgD3mxFwW38mGjVUrfERQOeY4EDHjdnptttfHuHQXFx+lTP08Q+mLa/w==
   dependencies:
-    abbrev "^1.0.0"
+    abbrev "^2.0.0"
 
 normalize-package-data@^2.5.0:
   version "2.5.0"
@@ -6746,7 +6805,7 @@ normalize-url@^6.0.1:
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-6.1.0.tgz#40d0885b535deffe3f3147bec877d05fe4c5668a"
   integrity sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==
 
-nth-check@^2.0.1:
+nth-check@^2.0.1, nth-check@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-2.1.1.tgz#c9eab428effce36cd6b92c924bdb000ef1f1ed1d"
   integrity sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==
@@ -6762,48 +6821,55 @@ object-assign@^4:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
 
-object-inspect@^1.11.0, object-inspect@^1.9.0:
-  version "1.12.0"
-  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.0.tgz#6e2c120e868fd1fd18cb4f18c31741d0d6e776f0"
-  integrity sha512-Ho2z80bVIvJloH+YzRmpZVQe87+qASmBUKZDWgx9cu+KDrX2ZDH/3tMy+gXbZETVGs2M8YdxObOh7XAtim9Y0g==
+object-inspect@^1.13.3:
+  version "1.13.3"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.13.3.tgz#f14c183de51130243d6d18ae149375ff50ea488a"
+  integrity sha512-kDCGIbxkDSXE3euJZZXzc6to7fCrKHNI/hSRQnRuQ+BWjFNzZwiFF8fj/6o2t2G9/jTj8PSIYTfCLelLZEeRpA==
 
-object-inspect@^1.12.2:
-  version "1.12.3"
-  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.3.tgz#ba62dffd67ee256c8c086dfae69e016cd1f198b9"
-  integrity sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==
-
-object-keys@^1.0.12, object-keys@^1.1.1:
+object-keys@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
 
-object.assign@^4.1.2:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.2.tgz#0ed54a342eceb37b38ff76eb831a0e788cb63940"
-  integrity sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==
+object.assign@^4.1.7:
+  version "4.1.7"
+  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.7.tgz#8c14ca1a424c6a561b0bb2a22f66f5049a945d3d"
+  integrity sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==
   dependencies:
-    call-bind "^1.0.0"
-    define-properties "^1.1.3"
-    has-symbols "^1.0.1"
+    call-bind "^1.0.8"
+    call-bound "^1.0.3"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.0.0"
+    has-symbols "^1.1.0"
     object-keys "^1.1.1"
 
-object.assign@^4.1.4:
-  version "4.1.4"
-  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.4.tgz#9673c7c7c351ab8c4d0b516f4343ebf4dfb7799f"
-  integrity sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==
+object.fromentries@^2.0.8:
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.8.tgz#f7195d8a9b97bd95cbc1999ea939ecd1a2b00c65"
+  integrity sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==
   dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.4"
-    has-symbols "^1.0.3"
-    object-keys "^1.1.1"
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.2"
+    es-object-atoms "^1.0.0"
 
-object.values@^1.1.6:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.6.tgz#4abbaa71eba47d63589d402856f908243eea9b1d"
-  integrity sha512-FVVTkD1vENCsAcwNs9k6jea2uHC/X0+JcjG8YA60FN5CMaJmG95wT9jek/xX9nornqGRrBkKtzuAu2wuHpKqvw==
+object.groupby@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/object.groupby/-/object.groupby-1.0.3.tgz#9b125c36238129f6f7b61954a1e7176148d5002e"
+  integrity sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==
   dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.4"
-    es-abstract "^1.20.4"
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.2"
+
+object.values@^1.2.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.2.1.tgz#deed520a50809ff7f75a7cfd4bc64c7a038c6216"
+  integrity sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.3"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.0.0"
 
 on-finished@2.4.1:
   version "2.4.1"
@@ -6865,17 +6931,17 @@ optionator@^0.8.1:
     type-check "~0.3.2"
     word-wrap "~1.2.3"
 
-optionator@^0.9.1:
-  version "0.9.1"
-  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.1.tgz#4f236a6373dae0566a6d43e1326674f50c291499"
-  integrity sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==
+optionator@^0.9.3:
+  version "0.9.4"
+  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.4.tgz#7ea1c1a5d91d764fb282139c88fe11e182a3a734"
+  integrity sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==
   dependencies:
     deep-is "^0.1.3"
     fast-levenshtein "^2.0.6"
     levn "^0.4.1"
     prelude-ls "^1.2.1"
     type-check "^0.4.0"
-    word-wrap "^1.2.3"
+    word-wrap "^1.2.5"
 
 ora@0.4.1:
   version "0.4.1"
@@ -6902,6 +6968,15 @@ ora@5.4.1:
     strip-ansi "^6.0.0"
     wcwidth "^1.0.1"
 
+own-keys@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/own-keys/-/own-keys-1.0.1.tgz#e4006910a2bf913585289676eebd6f390cf51358"
+  integrity sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==
+  dependencies:
+    get-intrinsic "^1.2.6"
+    object-keys "^1.1.1"
+    safe-push-apply "^1.0.0"
+
 p-limit@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.1.0.tgz#1d5a0d20fb12707c758a655f6bbc4386b5930d68"
@@ -6922,6 +6997,13 @@ p-limit@^3.0.2:
   dependencies:
     yocto-queue "^0.1.0"
 
+p-limit@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-4.0.0.tgz#914af6544ed32bfa54670b061cafcbd04984b644"
+  integrity sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==
+  dependencies:
+    yocto-queue "^1.0.0"
+
 p-locate@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-3.0.0.tgz#322d69a05c0264b25997d9f40cd8a891ab0064a4"
@@ -6942,10 +7024,27 @@ p-locate@^5.0.0:
   dependencies:
     p-limit "^3.0.2"
 
+p-locate@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-6.0.0.tgz#3da9a49d4934b901089dca3302fa65dc5a05c04f"
+  integrity sha512-wPrq66Llhl7/4AGC6I+cqxT07LhXvWL08LNXz1fENOw0Ap4sRZZ/gZpTTJ5jpurzzzfS2W/Ge9BY3LgLjCShcw==
+  dependencies:
+    p-limit "^4.0.0"
+
 p-try@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.0.0.tgz#85080bb87c64688fa47996fe8f7dfbe8211760b1"
 
+package-json-from-dist@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz#4f1471a010827a86f94cfd9b0727e36d267de505"
+  integrity sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==
+
+pako@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-2.1.0.tgz#266cc37f98c7d883545d11335c00fbd4062c9a86"
+  integrity sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==
+
 pako@~1.0.2:
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
@@ -7009,6 +7108,11 @@ path-exists@^4.0.0:
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
   integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
 
+path-exists@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-5.0.0.tgz#a6aad9489200b21fab31e49cf09277e5116fb9e7"
+  integrity sha512-RjhtfwJOxzcFmNOi6ltcbcu4Iu+FL3zEj83dk4kAS+fVpTxXLO1b38RvJgT/0QwvV/L3aY9TAnyv0EOqW4GoMQ==
+
 path-is-absolute@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
@@ -7027,9 +7131,18 @@ path-parse@^1.0.7:
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
   integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
 
-path-to-regexp@0.1.7:
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
+path-scurry@^1.11.1:
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/path-scurry/-/path-scurry-1.11.1.tgz#7960a668888594a0720b12a911d1a742ab9f11d2"
+  integrity sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==
+  dependencies:
+    lru-cache "^10.2.0"
+    minipass "^5.0.0 || ^6.0.2 || ^7.0.0"
+
+path-to-regexp@0.1.12:
+  version "0.1.12"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.12.tgz#d5e1a12e478a976d432ef3c58d534b9923164bb7"
+  integrity sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==
 
 path-to-regexp@^1.7.0:
   version "1.7.0"
@@ -7051,16 +7164,21 @@ pend@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
 
-phoenix@1.6.2:
-  version "1.6.2"
-  resolved "https://registry.yarnpkg.com/phoenix/-/phoenix-1.6.2.tgz#8d1d9f06e51cb893d08059e80488cd0de328e01a"
-  integrity sha512-VjR27NETvrLSj8rI6DlpVAfo7pCYth/9+1OCoTof4LKEbq0141ze/tdxFHHZzVQSok3gqJUo2h/tqbxR3r8eyw==
+phoenix@1.7.18:
+  version "1.7.18"
+  resolved "https://registry.yarnpkg.com/phoenix/-/phoenix-1.7.18.tgz#13b58af5572f9e6ad40d4683b79bee5a0bb84d5b"
+  integrity sha512-Qo+V9+knfEd+R1pzCe+XJlj3GPSxWz4PNwzFl7GgssuTVYPoh/he3mbPQJ+NEDdqulxAbBtWCNYGPB3WplS5Mg==
 
 picocolors@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
   integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
 
+picocolors@^1.0.1, picocolors@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b"
+  integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==
+
 picomatch@^2.0.4:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.3.tgz#465547f359ccc206d3c48e46a1bcb89bf7ee619d"
@@ -7080,18 +7198,10 @@ pify@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
 
-pinia@^2.0.33:
-  version "2.0.33"
-  resolved "https://registry.yarnpkg.com/pinia/-/pinia-2.0.33.tgz#b70065be697874d5824e9792f59bd5d87ddb5e7d"
-  integrity sha512-HOj1yVV2itw6rNIrR2f7+MirGNxhORjrULL8GWgRwXsGSvEqIQ+SE0MYt6cwtpegzCda3i+rVTZM+AM7CG+kRg==
-  dependencies:
-    "@vue/devtools-api" "^6.5.0"
-    vue-demi "*"
-
-pirates@^4.0.5:
-  version "4.0.5"
-  resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.5.tgz#feec352ea5c3268fb23a37c702ab1699f35a5f3b"
-  integrity sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ==
+pirates@^4.0.6:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.6.tgz#3018ae32ecfcff6c29ba2267cbf21166ac1f36b9"
+  integrity sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==
 
 pkg-dir@^3.0.0:
   version "3.0.0"
@@ -7099,12 +7209,12 @@ pkg-dir@^3.0.0:
   dependencies:
     find-up "^3.0.0"
 
-pkg-dir@^4.1.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-4.2.0.tgz#f099133df7ede422e81d1d8448270eeb3e4261f3"
-  integrity sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==
+pkg-dir@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-7.0.0.tgz#8f0c08d6df4476756c5ff29b3282d0bab7517d11"
+  integrity sha512-Ie9z/WINcxxLp27BKOCHGde4ITq9UklYKDzVo1nhk5sqGEXU3FpkwP5GM2voTGJkGd9B3Otl+Q4uwSOeSUtOBA==
   dependencies:
-    find-up "^4.0.0"
+    find-up "^6.3.0"
 
 pngjs@^5.0.0:
   version "5.0.0"
@@ -7116,6 +7226,11 @@ pointer-tracker@^2.0.3:
   resolved "https://registry.yarnpkg.com/pointer-tracker/-/pointer-tracker-2.4.0.tgz#78721c2d2201486db11ec1094377f03023b621b3"
   integrity sha512-pWI2tpaM/XNtc9mUTv42Rmjf6mkHvE8LT5DDEq0G7baPNhxNM9E3CepubPplSoSLk9E5bwQrAMyDcPVmJyTW4g==
 
+possible-typed-array-names@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz#89bb63c6fada2c3e90adc4a647beeeb39cc7bf8f"
+  integrity sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==
+
 postcss-calc@^8.2.3:
   version "8.2.4"
   resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-8.2.4.tgz#77b9c29bfcbe8a07ff6693dc87050828889739a5"
@@ -7163,13 +7278,13 @@ postcss-discard-overridden@^5.1.0:
   integrity sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==
 
 postcss-html@^1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/postcss-html/-/postcss-html-1.5.0.tgz#57a43bc9e336f516ecc448a37d2e8c2290170a6f"
-  integrity sha512-kCMRWJRHKicpA166kc2lAVUGxDZL324bkj/pVOb6RhjB0Z5Krl7mN0AsVkBhVIRZZirY0lyQXG38HCVaoKVNoA==
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/postcss-html/-/postcss-html-1.8.0.tgz#2ea1e9d6c53f04ea994135219d3bd8a9e380e13b"
+  integrity sha512-5mMeb1TgLWoRKxZ0Xh9RZDfwUUIqRrcxO2uXO+Ezl1N5lqpCiSU5Gk6+1kZediBfBHFtPCdopr2UZ2SgUsKcgQ==
   dependencies:
     htmlparser2 "^8.0.0"
-    js-tokens "^8.0.0"
-    postcss "^8.4.0"
+    js-tokens "^9.0.0"
+    postcss "^8.5.0"
     postcss-safe-parser "^6.0.0"
 
 postcss-loader@7.0.2:
@@ -7236,26 +7351,26 @@ postcss-minify-selectors@^5.2.1:
   dependencies:
     postcss-selector-parser "^6.0.5"
 
-postcss-modules-extract-imports@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz#cda1f047c0ae80c97dbe28c3e76a43b88025741d"
-  integrity sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==
+postcss-modules-extract-imports@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.1.0.tgz#b4497cb85a9c0c4b5aabeb759bb25e8d89f15002"
+  integrity sha512-k3kNe0aNFQDAZGbin48pL2VNidTF0w4/eASDsxlyspobzU3wZQLOGj7L9gfRe0Jo9/4uud09DsjFNH7winGv8Q==
 
-postcss-modules-local-by-default@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz#ebbb54fae1598eecfdf691a02b3ff3b390a5a51c"
-  integrity sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==
+postcss-modules-local-by-default@^4.0.5:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.2.0.tgz#d150f43837831dae25e4085596e84f6f5d6ec368"
+  integrity sha512-5kcJm/zk+GJDSfw+V/42fJ5fhjL5YbFDl8nVdXkJPLLW+Vf9mTD5Xe0wqIaDnLuL2U6cDNpTr+UQ+v2HWIBhzw==
   dependencies:
     icss-utils "^5.0.0"
-    postcss-selector-parser "^6.0.2"
+    postcss-selector-parser "^7.0.0"
     postcss-value-parser "^4.1.0"
 
-postcss-modules-scope@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz#9ef3151456d3bbfa120ca44898dfca6f2fa01f06"
-  integrity sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==
+postcss-modules-scope@^3.2.0:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-3.2.1.tgz#1bbccddcb398f1d7a511e0a2d1d047718af4078c"
+  integrity sha512-m9jZstCVaqGjTAuny8MdgE88scJnCiQSlSrOWcTQgM2t32UBe+MUmFSO5t7VMSfAf/FJKImAxBav8ooCHJXCJA==
   dependencies:
-    postcss-selector-parser "^6.0.4"
+    postcss-selector-parser "^7.0.0"
 
 postcss-modules-values@^4.0.0:
   version "4.0.0"
@@ -7361,9 +7476,9 @@ postcss-safe-parser@^6.0.0:
   integrity sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==
 
 postcss-scss@^4.0.2, postcss-scss@^4.0.6:
-  version "4.0.6"
-  resolved "https://registry.yarnpkg.com/postcss-scss/-/postcss-scss-4.0.6.tgz#5d62a574b950a6ae12f2aa89b60d63d9e4432bfd"
-  integrity sha512-rLDPhJY4z/i4nVFZ27j9GqLxj1pwxE80eAzUNRMXtcpipFYIeowerzBgG3yJhMtObGEXidtIgbUpQ3eLDsf5OQ==
+  version "4.0.9"
+  resolved "https://registry.yarnpkg.com/postcss-scss/-/postcss-scss-4.0.9.tgz#a03c773cd4c9623cb04ce142a52afcec74806685"
+  integrity sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==
 
 postcss-selector-parser@2.2.1:
   version "2.2.1"
@@ -7382,7 +7497,15 @@ postcss-selector-parser@^6.0.11, postcss-selector-parser@^6.0.6:
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
 
-postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4, postcss-selector-parser@^6.0.5, postcss-selector-parser@^6.0.9:
+postcss-selector-parser@^6.0.15:
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz#27ecb41fb0e3b6ba7a1ec84fff347f734c7929de"
+  integrity sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
+postcss-selector-parser@^6.0.4, postcss-selector-parser@^6.0.5, postcss-selector-parser@^6.0.9:
   version "6.0.10"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz#79b61e2c0d1bfc2602d549e11d0876256f8df88d"
   integrity sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==
@@ -7390,6 +7513,14 @@ postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4, postcss-selector
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
 
+postcss-selector-parser@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-7.0.0.tgz#41bd8b56f177c093ca49435f65731befe25d6b9c"
+  integrity sha512-9RbEr1Y7FFfptd/1eEdntyjMwLeghW1bHX9GWjXo19vx4ytPQhANltvVxDggzJl7mnWM+dX28kb6cyS/4iQjlQ==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
 postcss-svgo@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-5.1.0.tgz#0a317400ced789f233a28826e77523f15857d80d"
@@ -7415,32 +7546,14 @@ postcss-value-parser@^4.2.0:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
-postcss@8.4.20, postcss@^8.4.19:
-  version "8.4.20"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.20.tgz#64c52f509644cecad8567e949f4081d98349dc56"
-  integrity sha512-6Q04AXR1212bXr5fh03u8aAwbLxAQNGQ/Q1LNa0VfOI06ZAlhPHtQvE4OIdpj4kLThXilalPnmDSOD65DcHt+g==
+postcss@8.5.1:
+  version "8.5.1"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.5.1.tgz#e2272a1f8a807fafa413218245630b5db10a3214"
+  integrity sha512-6oz2beyjc5VMn/KV1pPw8fliQkhBXrVn1Z3TVyqZxU8kZpzEKhBdmCFqI6ZbmGtamQvQGuU1sgPTk8ZrXDD7jQ==
   dependencies:
-    nanoid "^3.3.4"
-    picocolors "^1.0.0"
-    source-map-js "^1.0.2"
-
-postcss@^8.1.10:
-  version "8.4.12"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.12.tgz#1e7de78733b28970fa4743f7da6f3763648b1905"
-  integrity sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg==
-  dependencies:
-    nanoid "^3.3.1"
-    picocolors "^1.0.0"
-    source-map-js "^1.0.2"
-
-postcss@^8.4.0:
-  version "8.4.21"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.21.tgz#c639b719a57efc3187b13a1d765675485f4134f4"
-  integrity sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==
-  dependencies:
-    nanoid "^3.3.4"
-    picocolors "^1.0.0"
-    source-map-js "^1.0.2"
+    nanoid "^3.3.8"
+    picocolors "^1.1.1"
+    source-map-js "^1.2.1"
 
 postcss@^8.4.17:
   version "8.4.18"
@@ -7451,6 +7564,42 @@ postcss@^8.4.17:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+postcss@^8.4.19:
+  version "8.4.20"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.20.tgz#64c52f509644cecad8567e949f4081d98349dc56"
+  integrity sha512-6Q04AXR1212bXr5fh03u8aAwbLxAQNGQ/Q1LNa0VfOI06ZAlhPHtQvE4OIdpj4kLThXilalPnmDSOD65DcHt+g==
+  dependencies:
+    nanoid "^3.3.4"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
+postcss@^8.4.33:
+  version "8.4.33"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.33.tgz#1378e859c9f69bf6f638b990a0212f43e2aaa742"
+  integrity sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==
+  dependencies:
+    nanoid "^3.3.7"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
+postcss@^8.4.48:
+  version "8.4.49"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.49.tgz#4ea479048ab059ab3ae61d082190fabfd994fe19"
+  integrity sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==
+  dependencies:
+    nanoid "^3.3.7"
+    picocolors "^1.1.1"
+    source-map-js "^1.2.1"
+
+postcss@^8.5.0:
+  version "8.5.1"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.5.1.tgz#e2272a1f8a807fafa413218245630b5db10a3214"
+  integrity sha512-6oz2beyjc5VMn/KV1pPw8fliQkhBXrVn1Z3TVyqZxU8kZpzEKhBdmCFqI6ZbmGtamQvQGuU1sgPTk8ZrXDD7jQ==
+  dependencies:
+    nanoid "^3.3.8"
+    picocolors "^1.1.1"
+    source-map-js "^1.2.1"
+
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
@@ -7495,11 +7644,6 @@ prr@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476"
 
-pseudomap@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
-  integrity sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ==
-
 psl@^1.1.33:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/psl/-/psl-1.9.0.tgz#d0df2a137f00794565fcaf3b2c00cd09f8d5a5a7"
@@ -7512,15 +7656,15 @@ pump@^3.0.0:
     end-of-stream "^1.1.0"
     once "^1.3.1"
 
-punycode.js@2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/punycode.js/-/punycode.js-2.3.0.tgz#6aaa35964ffecc676545995ecb65980bd8302f61"
-  integrity sha512-AM9kSplQQCRlRkRZzx2EcqW2AQ9HuYoUzzl/tjJDNJEUeYHFGJ/rGE0a9cE1b41iuFz94pAwcEekC137Dd9Eyw==
+punycode.js@2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/punycode.js/-/punycode.js-2.3.1.tgz#6b53e56ad75588234e79f4affa90972c7dd8cdb7"
+  integrity sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==
 
-punycode@1.3.2:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.3.2.tgz#9653a036fb7c1ee42342f2325cceefea3926c48d"
-  integrity sha512-RofWgt/7fL5wP1Y7fxE7/EmTLzQVnB0ycyibJ0OOHIlJqTNzglYFxVwETOcIoJqJmpDXJ9xImDv+Fq34F/d4Dw==
+punycode@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
+  integrity sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==
 
 punycode@^2.1.0, punycode@^2.1.1:
   version "2.1.1"
@@ -7531,38 +7675,39 @@ qjobs@^1.2.0:
   resolved "https://registry.yarnpkg.com/qjobs/-/qjobs-1.2.0.tgz#c45e9c61800bd087ef88d7e256423bdd49e5d071"
   integrity sha512-8YOJEHtxpySA3fFDyCRxA+UUV+fA+rTWnuWvylOK/NCjhY+b4ocCtmu8TtsWb+mYeU+GCHf/S66KZF/AsteKHg==
 
-qrcode@1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/qrcode/-/qrcode-1.5.0.tgz#95abb8a91fdafd86f8190f2836abbfc500c72d1b"
-  integrity sha512-9MgRpgVc+/+47dFvQeD6U2s0Z92EsKzcHogtum4QB+UNd025WOJSHvn/hjk9xmzj7Stj95CyUAs31mrjxliEsQ==
+qrcode@1.5.4:
+  version "1.5.4"
+  resolved "https://registry.yarnpkg.com/qrcode/-/qrcode-1.5.4.tgz#5cb81d86eb57c675febb08cf007fff963405da88"
+  integrity sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==
   dependencies:
     dijkstrajs "^1.0.1"
-    encode-utf8 "^1.0.3"
     pngjs "^5.0.0"
     yargs "^15.3.1"
 
-qs@6.11.0:
-  version "6.11.0"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.11.0.tgz#fd0d963446f7a65e1367e01abd85429453f0c37a"
-  integrity sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==
+qs@6.13.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.13.0.tgz#6ca3bd58439f7e245655798997787b0d88a51906"
+  integrity sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==
   dependencies:
-    side-channel "^1.0.4"
+    side-channel "^1.0.6"
 
 qs@6.9.7:
   version "6.9.7"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.9.7.tgz#4610846871485e1e048f44ae3b94033f0e675afe"
   integrity sha512-IhMFgUmuNpyRfxA90umL7ByLlgRXu6tIfKPpF5TmcfRLlLCckfP/g3IQmju6jjpu+Hh8rA+2p6A27ZSPOOHdKw==
 
+qs@^6.12.3:
+  version "6.14.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.14.0.tgz#c63fa40680d2c5c941412a0e899c89af60c0a930"
+  integrity sha512-YWWTjgABSKcvs/nWBi9PycY/JiPJqOD4JA6o9Sej2AtvSGarXxKC3OQSk4pAarbdQlKAh5D4FCQkJNkW+GAn3w==
+  dependencies:
+    side-channel "^1.1.0"
+
 querystring-es3@0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
   integrity sha512-773xhDQnZBMFobEiztv8LIl70ch5MSF/jUQVlhwFyBILqq96anmoctVIYz+ZRp0qbCKATTn6ev02M3r7Ga5vqA==
 
-querystring@0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
-  integrity sha512-X/xY82scca2tau62i9mDyU9K+I+djTMUsvwf7xnUX5GLvVzgJybOJf4Y6o9Zx3oJK/LSXg5tTZBjwzqVPaPO2g==
-
 querystringify@^2.1.1:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6"
@@ -7595,10 +7740,10 @@ raw-body@2.4.3:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
-raw-body@2.5.1:
-  version "2.5.1"
-  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.5.1.tgz#fe1b1628b181b700215e5fd42389f98b71392857"
-  integrity sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==
+raw-body@2.5.2:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.5.2.tgz#99febd83b90e08975087e8f1f9419a149366b68a"
+  integrity sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==
   dependencies:
     bytes "3.1.2"
     http-errors "2.0.0"
@@ -7679,6 +7824,20 @@ redent@^3.0.0:
     indent-string "^4.0.0"
     strip-indent "^3.0.0"
 
+reflect.getprototypeof@^1.0.6, reflect.getprototypeof@^1.0.9:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz#c629219e78a3316d8b604c765ef68996964e7bf9"
+  integrity sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==
+  dependencies:
+    call-bind "^1.0.8"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.9"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
+    get-intrinsic "^1.2.7"
+    get-proto "^1.0.1"
+    which-builtin-type "^1.2.1"
+
 regenerate-unicode-properties@^10.0.1:
   version "10.0.1"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.0.1.tgz#7f442732aa7934a3740c779bb9b3340dccc1fb56"
@@ -7686,54 +7845,52 @@ regenerate-unicode-properties@^10.0.1:
   dependencies:
     regenerate "^1.4.2"
 
+regenerate-unicode-properties@^10.2.0:
+  version "10.2.0"
+  resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.2.0.tgz#626e39df8c372338ea9b8028d1f99dc3fd9c3db0"
+  integrity sha512-DqHn3DwbmmPVzeKj9woBadqmXxLvQoQIwu7nopMc72ztvxVmVk2SBhSnx67zuye5TP+lJsb/TBQsjLKhnDf3MA==
+  dependencies:
+    regenerate "^1.4.2"
+
 regenerate@^1.4.2:
   version "1.4.2"
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a"
   integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==
 
-regenerator-runtime@^0.13.11:
-  version "0.13.11"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
-  integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
-
 regenerator-runtime@^0.13.4:
   version "0.13.9"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
   integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==
 
-regenerator-transform@^0.15.0:
-  version "0.15.0"
-  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.15.0.tgz#cbd9ead5d77fae1a48d957cf889ad0586adb6537"
-  integrity sha512-LsrGtPmbYg19bcPHwdtmXwbW+TqNvtY4riE3P83foeHRroMbH6/2ddFBfab3t7kbzc7v7p4wbkIecHImqt0QNg==
+regenerator-runtime@^0.14.0:
+  version "0.14.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz#356ade10263f685dda125100cd862c1db895327f"
+  integrity sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==
+
+regenerator-transform@^0.15.2:
+  version "0.15.2"
+  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.15.2.tgz#5bbae58b522098ebdf09bca2f83838929001c7a4"
+  integrity sha512-hfMp2BoF0qOk3uc5V20ALGDS2ddjQaLrdl7xrGXvAIow7qeWRM2VA2HuCHkUKk9slq3VwEwLNK3DFBqDfPGYtg==
   dependencies:
     "@babel/runtime" "^7.8.4"
 
-regexp.prototype.flags@^1.4.3:
-  version "1.4.3"
-  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz#87cab30f80f66660181a3bb7bf5981a872b367ac"
-  integrity sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==
+regexp.prototype.flags@^1.5.3:
+  version "1.5.4"
+  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz#1ad6c62d44a259007e55b3970e00f746efbcaa19"
+  integrity sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==
   dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.3"
-    functions-have-names "^1.2.2"
+    call-bind "^1.0.8"
+    define-properties "^1.2.1"
+    es-errors "^1.3.0"
+    get-proto "^1.0.1"
+    gopd "^1.2.0"
+    set-function-name "^2.0.2"
 
-regexpp@^3.0.0, regexpp@^3.2.0:
+regexpp@^3.0.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.2.0.tgz#0425a2768d8f23bad70ca4b90461fa2f1213e1b2"
   integrity sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==
 
-regexpu-core@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-5.0.1.tgz#c531122a7840de743dcf9c83e923b5560323ced3"
-  integrity sha512-CriEZlrKK9VJw/xQGJpQM5rY88BtuL8DM+AEwvcThHilbxiTAy8vq4iJnd2tqq8wLmjbGZzP7ZcKFjbGkmEFrw==
-  dependencies:
-    regenerate "^1.4.2"
-    regenerate-unicode-properties "^10.0.1"
-    regjsgen "^0.6.0"
-    regjsparser "^0.8.2"
-    unicode-match-property-ecmascript "^2.0.0"
-    unicode-match-property-value-ecmascript "^2.0.0"
-
 regexpu-core@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-5.1.0.tgz#2f8504c3fd0ebe11215783a41541e21c79942c6d"
@@ -7746,11 +7903,35 @@ regexpu-core@^5.1.0:
     unicode-match-property-ecmascript "^2.0.0"
     unicode-match-property-value-ecmascript "^2.0.0"
 
+regexpu-core@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-6.2.0.tgz#0e5190d79e542bf294955dccabae04d3c7d53826"
+  integrity sha512-H66BPQMrv+V16t8xtmq+UC0CBpiTBA60V8ibS1QVReIp8T1z8hwFxqcGzm9K6lgsN7sB5edVH8a+ze6Fqm4weA==
+  dependencies:
+    regenerate "^1.4.2"
+    regenerate-unicode-properties "^10.2.0"
+    regjsgen "^0.8.0"
+    regjsparser "^0.12.0"
+    unicode-match-property-ecmascript "^2.0.0"
+    unicode-match-property-value-ecmascript "^2.1.0"
+
 regjsgen@^0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.6.0.tgz#83414c5354afd7d6627b16af5f10f41c4e71808d"
   integrity sha512-ozE883Uigtqj3bx7OhL1KNbCzGyW2NQZPl6Hs09WTvCuZD5sTI4JY58bkbQWa/Y9hxIsvJ3M8Nbf7j54IqeZbA==
 
+regjsgen@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.8.0.tgz#df23ff26e0c5b300a6470cad160a9d090c3a37ab"
+  integrity sha512-RvwtGe3d7LvWiDQXeQw8p5asZUmfU1G/l6WbUXeHta7Y2PEIvBTwH6E2EfmYUK8pxcxEdEmaomqyp0vZZ7C+3Q==
+
+regjsparser@^0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.12.0.tgz#0e846df6c6530586429377de56e0475583b088dc"
+  integrity sha512-cnE+y8bz4NhMjISKbgeVJtqNbtf5QpjZP+Bslo+UqkIt9QPnX9q095eiRRASJG1/tz6dlNr6Z5NsBiWYokp6EQ==
+  dependencies:
+    jsesc "~3.0.2"
+
 regjsparser@^0.8.2:
   version "0.8.4"
   resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.8.4.tgz#8a14285ffcc5de78c5b95d62bbf413b6bc132d5f"
@@ -7833,6 +8014,15 @@ resolve@^1.22.1:
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
+resolve@^1.22.4:
+  version "1.22.10"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.10.tgz#b663e83ffb09bbf2386944736baae803029b8b39"
+  integrity sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==
+  dependencies:
+    is-core-module "^2.16.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
 restore-cursor@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-2.0.0.tgz#9f7ee287f82fd326d4fd162923d62129eee0dfaf"
@@ -7870,6 +8060,17 @@ run-parallel@^1.1.9:
   resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.1.9.tgz#c9dd3a7cf9f4b2c4b6244e173a6ed866e61dd679"
   integrity sha512-DEqnSRTDw/Tc3FXf49zedI638Z9onwUotBMiUFKmrO2sdFKIbXamXGQ3Axd4qgphxKB4kw/qP1w5kTxnfU1B9Q==
 
+safe-array-concat@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/safe-array-concat/-/safe-array-concat-1.1.3.tgz#c9e54ec4f603b0bbb8e7e5007a5ee7aecd1538c3"
+  integrity sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.2"
+    get-intrinsic "^1.2.6"
+    has-symbols "^1.1.0"
+    isarray "^2.0.5"
+
 safe-buffer@5.2.1, safe-buffer@~5.2.0:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
@@ -7879,25 +8080,32 @@ safe-buffer@^5.1.0, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
 
-safe-regex-test@^1.0.0:
+safe-push-apply@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/safe-regex-test/-/safe-regex-test-1.0.0.tgz#793b874d524eb3640d1873aad03596db2d4f2295"
-  integrity sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==
+  resolved "https://registry.yarnpkg.com/safe-push-apply/-/safe-push-apply-1.0.0.tgz#01850e981c1602d398c85081f360e4e6d03d27f5"
+  integrity sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==
   dependencies:
-    call-bind "^1.0.2"
-    get-intrinsic "^1.1.3"
-    is-regex "^1.1.4"
+    es-errors "^1.3.0"
+    isarray "^2.0.5"
+
+safe-regex-test@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/safe-regex-test/-/safe-regex-test-1.1.0.tgz#7f87dfb67a3150782eaaf18583ff5d1711ac10c1"
+  integrity sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==
+  dependencies:
+    call-bound "^1.0.2"
+    es-errors "^1.3.0"
+    is-regex "^1.2.1"
 
 "safer-buffer@>= 2.1.2 < 3", "safer-buffer@>= 2.1.2 < 3.0.0":
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
 
-sass-loader@13.2.0:
-  version "13.2.0"
-  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-13.2.0.tgz#80195050f58c9aac63b792fa52acb6f5e0f6bdc3"
-  integrity sha512-JWEp48djQA4nbZxmgC02/Wh0eroSUutulROUusYJO9P9zltRbNN80JCBHqRGzjd4cmZCa/r88xgfkjGD0TXsHg==
+sass-loader@13.3.3:
+  version "13.3.3"
+  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-13.3.3.tgz#60df5e858788cffb1a3215e5b92e9cba61e7e133"
+  integrity sha512-mt5YN2F1MOZr3d/wBRcZxeFgwgkH44wVc2zohO2YF6JiOMkiXe4BYRZpSu2sO1g71mo/j16txzUhsKZlqjVGzA==
   dependencies:
-    klona "^2.0.4"
     neo-async "^2.6.2"
 
 sass@1.60.0:
@@ -7935,9 +8143,10 @@ schema-utils@^4.0.0:
     ajv-formats "^2.1.1"
     ajv-keywords "^5.0.0"
 
-selenium-server@2.53.1:
-  version "2.53.1"
-  resolved "https://registry.yarnpkg.com/selenium-server/-/selenium-server-2.53.1.tgz#d681528812f3c2e0531a6b7e613e23bb02cce8a6"
+selenium-server@3.141.59:
+  version "3.141.59"
+  resolved "https://registry.yarnpkg.com/selenium-server/-/selenium-server-3.141.59.tgz#cbefdf50aae636ee4c67b819532a8233ce3fd6b0"
+  integrity sha512-pL7T1YtAqOEXiBbTx0KdZMkE2U7PYucemd7i0nDLcxcR1APXYZlJfNr5hrvL3mZgwXb7AJEZPINzC6mDU3eP5g==
 
 selenium-webdriver@4.6.1:
   version "4.6.1"
@@ -7959,18 +8168,21 @@ semver@7.3.5:
   dependencies:
     lru-cache "^6.0.0"
 
-semver@7.3.8, semver@^7.3.8:
-  version "7.3.8"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.8.tgz#07a78feafb3f7b32347d725e33de7e2a2df67798"
-  integrity sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==
-  dependencies:
-    lru-cache "^6.0.0"
+semver@7.6.3, semver@^7.5.3, semver@^7.6.3:
+  version "7.6.3"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.3.tgz#980f7b5550bc175fb4dc09403085627f9eb33143"
+  integrity sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==
 
-semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.3.0:
+semver@^6.0.0, semver@^6.3.0:
   version "6.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
 
+semver@^6.3.1:
+  version "6.3.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
+  integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
+
 semver@^7.0.0, semver@^7.3.4, semver@^7.3.5, semver@^7.3.6:
   version "7.3.7"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.7.tgz#12c5b649afdbf9049707796e22a4028814ce523f"
@@ -7978,10 +8190,24 @@ semver@^7.0.0, semver@^7.3.4, semver@^7.3.5, semver@^7.3.6:
   dependencies:
     lru-cache "^6.0.0"
 
-send@0.18.0:
-  version "0.18.0"
-  resolved "https://registry.yarnpkg.com/send/-/send-0.18.0.tgz#670167cc654b05f5aa4a767f9113bb371bc706be"
-  integrity sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==
+semver@^7.3.8:
+  version "7.3.8"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.8.tgz#07a78feafb3f7b32347d725e33de7e2a2df67798"
+  integrity sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==
+  dependencies:
+    lru-cache "^6.0.0"
+
+semver@^7.5.4:
+  version "7.5.4"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e"
+  integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==
+  dependencies:
+    lru-cache "^6.0.0"
+
+send@0.19.0:
+  version "0.19.0"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.19.0.tgz#bbc5a388c8ea6c048967049dbeac0e4a3f09d7f8"
+  integrity sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==
   dependencies:
     debug "2.6.9"
     depd "2.0.0"
@@ -8004,15 +8230,22 @@ serialize-javascript@6.0.0, serialize-javascript@^6.0.0:
   dependencies:
     randombytes "^2.1.0"
 
-serve-static@1.15.0:
-  version "1.15.0"
-  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.15.0.tgz#faaef08cffe0a1a62f60cad0c4e513cff0ac9540"
-  integrity sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==
+serialize-javascript@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-6.0.2.tgz#defa1e055c83bf6d59ea805d8da862254eb6a6c2"
+  integrity sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==
   dependencies:
-    encodeurl "~1.0.2"
+    randombytes "^2.1.0"
+
+serve-static@1.16.2:
+  version "1.16.2"
+  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.16.2.tgz#b6a5343da47f6bdd2673848bf45754941e803296"
+  integrity sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==
+  dependencies:
+    encodeurl "~2.0.0"
     escape-html "~1.0.3"
     parseurl "~1.3.3"
-    send "0.18.0"
+    send "0.19.0"
 
 serviceworker-webpack5-plugin@2.0.0:
   version "2.0.0"
@@ -8025,6 +8258,37 @@ set-blocking@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
 
+set-function-length@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/set-function-length/-/set-function-length-1.2.2.tgz#aac72314198eaed975cf77b2c3b6b880695e5449"
+  integrity sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==
+  dependencies:
+    define-data-property "^1.1.4"
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+    get-intrinsic "^1.2.4"
+    gopd "^1.0.1"
+    has-property-descriptors "^1.0.2"
+
+set-function-name@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/set-function-name/-/set-function-name-2.0.2.tgz#16a705c5a0dc2f5e638ca96d8a8cd4e1c2b90985"
+  integrity sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==
+  dependencies:
+    define-data-property "^1.1.4"
+    es-errors "^1.3.0"
+    functions-have-names "^1.2.3"
+    has-property-descriptors "^1.0.2"
+
+set-proto@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/set-proto/-/set-proto-1.0.0.tgz#0760dbcff30b2d7e801fd6e19983e56da337565e"
+  integrity sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==
+  dependencies:
+    dunder-proto "^1.0.1"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
+
 setimmediate@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
@@ -8062,19 +8326,45 @@ shelljs@0.8.5:
     interpret "^1.0.0"
     rechoir "^0.6.2"
 
-side-channel@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf"
-  integrity sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==
+side-channel-list@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/side-channel-list/-/side-channel-list-1.0.0.tgz#10cb5984263115d3b7a0e336591e290a830af8ad"
+  integrity sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==
   dependencies:
-    call-bind "^1.0.0"
-    get-intrinsic "^1.0.2"
-    object-inspect "^1.9.0"
+    es-errors "^1.3.0"
+    object-inspect "^1.13.3"
 
-sigmund@^1.0.1:
+side-channel-map@^1.0.1:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/sigmund/-/sigmund-1.0.1.tgz#3ff21f198cad2175f9f3b781853fd94d0d19b590"
-  integrity sha512-fCvEXfh6NWpm+YSuY2bpXb/VIihqWA6hLsgboC+0nl71Q7N7o2eaCW8mJa/NLvQhs6jpd3VZV4UiUQlV6+lc8g==
+  resolved "https://registry.yarnpkg.com/side-channel-map/-/side-channel-map-1.0.1.tgz#d6bb6b37902c6fef5174e5f533fab4c732a26f42"
+  integrity sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==
+  dependencies:
+    call-bound "^1.0.2"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.5"
+    object-inspect "^1.13.3"
+
+side-channel-weakmap@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz#11dda19d5368e40ce9ec2bdc1fb0ecbc0790ecea"
+  integrity sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==
+  dependencies:
+    call-bound "^1.0.2"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.5"
+    object-inspect "^1.13.3"
+    side-channel-map "^1.0.1"
+
+side-channel@^1.0.6, side-channel@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.1.0.tgz#c3fcff9c4da932784873335ec9765fa94ff66bc9"
+  integrity sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==
+  dependencies:
+    es-errors "^1.3.0"
+    object-inspect "^1.13.3"
+    side-channel-list "^1.0.0"
+    side-channel-map "^1.0.1"
+    side-channel-weakmap "^1.0.2"
 
 signal-exit@^3.0.2:
   version "3.0.2"
@@ -8085,21 +8375,26 @@ signal-exit@^3.0.7:
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"
   integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
 
+signal-exit@^4.0.1:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-4.1.0.tgz#952188c1cbd546070e2dd20d0f41c0ae0530cb04"
+  integrity sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==
+
 sinon-chai@3.7.0:
   version "3.7.0"
   resolved "https://registry.yarnpkg.com/sinon-chai/-/sinon-chai-3.7.0.tgz#cfb7dec1c50990ed18c153f1840721cf13139783"
   integrity sha512-mf5NURdUaSdnatJx3uhoBOrY9dtL19fiOtAdT1Azxg3+lNJFiuN0uzaU3xX1LeAfL17kHQhTAJgpsfhbMJMY2g==
 
-sinon@15.0.1:
-  version "15.0.1"
-  resolved "https://registry.yarnpkg.com/sinon/-/sinon-15.0.1.tgz#ce062611a0b131892e2c18f03055b8eb6e8dc234"
-  integrity sha512-PZXKc08f/wcA/BMRGBze2Wmw50CWPiAH3E21EOi4B49vJ616vW4DQh4fQrqsYox2aNR/N3kCqLuB0PwwOucQrg==
+sinon@15.2.0:
+  version "15.2.0"
+  resolved "https://registry.yarnpkg.com/sinon/-/sinon-15.2.0.tgz#5e44d4bc5a9b5d993871137fd3560bebfac27565"
+  integrity sha512-nPS85arNqwBXaIsFCkolHjGIkFo+Oxu9vbgmBJizLAhqe6P2o3Qmj3KCUoRkfhHtvgDhZdWD3risLHAUJ8npjw==
   dependencies:
-    "@sinonjs/commons" "^2.0.0"
-    "@sinonjs/fake-timers" "10.0.2"
-    "@sinonjs/samsam" "^7.0.1"
-    diff "^5.0.0"
-    nise "^5.1.2"
+    "@sinonjs/commons" "^3.0.0"
+    "@sinonjs/fake-timers" "^10.3.0"
+    "@sinonjs/samsam" "^8.0.0"
+    diff "^5.1.0"
+    nise "^5.1.4"
     supports-color "^7.2.0"
 
 slash@^3.0.0:
@@ -8121,37 +8416,45 @@ slice-ansi@^4.0.0:
     astral-regex "^2.0.0"
     is-fullwidth-code-point "^3.0.0"
 
-socket.io-adapter@~2.4.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/socket.io-adapter/-/socket.io-adapter-2.4.0.tgz#b50a4a9ecdd00c34d4c8c808224daa1a786152a6"
-  integrity sha512-W4N+o69rkMEGVuk2D/cvca3uYsvGlMwsySWV447y99gUPghxq42BxqLNMndb+a1mm/5/7NeXVQS7RLa2XyXvYg==
-
-socket.io-parser@~4.0.4:
-  version "4.0.4"
-  resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-4.0.4.tgz#9ea21b0d61508d18196ef04a2c6b9ab630f4c2b0"
-  integrity sha512-t+b0SS+IxG7Rxzda2EVvyBZbvFPBCjJoyHuE0P//7OAsN23GItzDRdWa6ALxZI/8R5ygK7jAR6t028/z+7295g==
+socket.io-adapter@~2.5.2:
+  version "2.5.5"
+  resolved "https://registry.yarnpkg.com/socket.io-adapter/-/socket.io-adapter-2.5.5.tgz#c7a1f9c703d7756844751b6ff9abfc1780664082"
+  integrity sha512-eLDQas5dzPgOWCk9GuuJC2lBqItuhKI4uxGgo9aIV7MYbk2h9Q6uULEh8WBzThoI7l+qU9Ast9fVUmkqPP9wYg==
   dependencies:
-    "@types/component-emitter" "^1.2.10"
-    component-emitter "~1.3.0"
+    debug "~4.3.4"
+    ws "~8.17.1"
+
+socket.io-parser@~4.2.4:
+  version "4.2.4"
+  resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-4.2.4.tgz#c806966cf7270601e47469ddeec30fbdfda44c83"
+  integrity sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==
+  dependencies:
+    "@socket.io/component-emitter" "~3.1.0"
     debug "~4.3.1"
 
-socket.io@^4.4.1:
-  version "4.5.1"
-  resolved "https://registry.yarnpkg.com/socket.io/-/socket.io-4.5.1.tgz#aa7e73f8a6ce20ee3c54b2446d321bbb6b1a9029"
-  integrity sha512-0y9pnIso5a9i+lJmsCdtmTTgJFFSvNQKDnPQRz28mGNnxbmqYg2QPtJTLFxhymFZhAIn50eHAKzJeiNaKr+yUQ==
+socket.io@^4.7.2:
+  version "4.7.5"
+  resolved "https://registry.yarnpkg.com/socket.io/-/socket.io-4.7.5.tgz#56eb2d976aef9d1445f373a62d781a41c7add8f8"
+  integrity sha512-DmeAkF6cwM9jSfmp6Dr/5/mfMwb5Z5qRrSXLpo3Fq5SqyU8CMF15jIN4ZhfSwu35ksM1qmHZDQ/DK5XTccSTvA==
   dependencies:
     accepts "~1.3.4"
     base64id "~2.0.0"
+    cors "~2.8.5"
     debug "~4.3.2"
-    engine.io "~6.2.0"
-    socket.io-adapter "~2.4.0"
-    socket.io-parser "~4.0.4"
+    engine.io "~6.5.2"
+    socket.io-adapter "~2.5.2"
+    socket.io-parser "~4.2.4"
 
 "source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
 
+source-map-js@^1.2.0, source-map-js@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
+  integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
+
 source-map-support@^0.5.16:
   version "0.5.16"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.16.tgz#0ae069e7fe3ba7538c64c98515e35339eac5a042"
@@ -8172,15 +8475,6 @@ source-map@0.6.1, source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, sourc
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
 
-source-map@^0.5.0:
-  version "0.5.7"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
-
-sourcemap-codec@^1.4.8:
-  version "1.4.8"
-  resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
-  integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
-
 spdx-correct@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.1.0.tgz#fb83e504445268f154b074e218c87c003cd31df4"
@@ -8234,6 +8528,15 @@ streamroller@^3.0.6:
     debug "^4.3.4"
     fs-extra "^10.0.1"
 
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
 string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.2, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
@@ -8252,39 +8555,46 @@ string-width@^4.2.0:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.0"
 
-string.prototype.trimend@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz#e75ae90c2942c63504686c18b287b4a0b1a45f80"
-  integrity sha512-y9xCjw1P23Awk8EvTpcyL2NIr1j7wJ39f+k6lvRnSMz+mz9CGz9NYPelDk42kOz6+ql8xjfK8oYzy3jAP5QU5A==
+string-width@^5.0.1, string-width@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794"
+  integrity sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==
   dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.3"
+    eastasianwidth "^0.2.0"
+    emoji-regex "^9.2.2"
+    strip-ansi "^7.0.1"
 
-string.prototype.trimend@^1.0.6:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.6.tgz#c4a27fa026d979d79c04f17397f250a462944533"
-  integrity sha512-JySq+4mrPf9EsDBEDYMOb/lM7XQLulwg5R/m1r0PXEFqrV0qHvl58sdTilSXtKOflCsK2E8jxf+GKC0T07RWwQ==
+string.prototype.trim@^1.2.10:
+  version "1.2.10"
+  resolved "https://registry.yarnpkg.com/string.prototype.trim/-/string.prototype.trim-1.2.10.tgz#40b2dd5ee94c959b4dcfb1d65ce72e90da480c81"
+  integrity sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==
   dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.4"
-    es-abstract "^1.20.4"
+    call-bind "^1.0.8"
+    call-bound "^1.0.2"
+    define-data-property "^1.1.4"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.5"
+    es-object-atoms "^1.0.0"
+    has-property-descriptors "^1.0.2"
 
-string.prototype.trimstart@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.4.tgz#b36399af4ab2999b4c9c648bd7a3fb2bb26feeed"
-  integrity sha512-jh6e984OBfvxS50tdY2nRZnoC5/mLFKOREQfw8t5yytkoUsJRNxvI/E39qu1sD0OtWI3OC0XgKSmcWwziwYuZw==
+string.prototype.trimend@^1.0.8, string.prototype.trimend@^1.0.9:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.9.tgz#62e2731272cd285041b36596054e9f66569b6942"
+  integrity sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==
   dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.3"
+    call-bind "^1.0.8"
+    call-bound "^1.0.2"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.0.0"
 
-string.prototype.trimstart@^1.0.6:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.6.tgz#e90ab66aa8e4007d92ef591bbf3cd422c56bdcf4"
-  integrity sha512-omqjMDaY92pbn5HOX7f9IccLA+U1tA9GvtU4JrodiXFfYB7jPzzHpRzpglLAjtUV6bB557zwClJezTqnAiYnQA==
+string.prototype.trimstart@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz#7ee834dda8c7c17eff3118472bb35bfedaa34dde"
+  integrity sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==
   dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.4"
-    es-abstract "^1.20.4"
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.0.0"
 
 string_decoder@^1.1.1:
   version "1.3.0"
@@ -8299,6 +8609,13 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
 strip-ansi@5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-5.2.0.tgz#8c9a536feb6afc962bdfa5b104a5091c1ad9c0ae"
@@ -8332,6 +8649,13 @@ strip-ansi@^6.0.0:
   dependencies:
     ansi-regex "^5.0.0"
 
+strip-ansi@^7.0.1:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
+  integrity sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==
+  dependencies:
+    ansi-regex "^6.0.1"
+
 strip-bom@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
@@ -8343,7 +8667,7 @@ strip-indent@^3.0.0:
   dependencies:
     min-indent "^1.0.0"
 
-strip-json-comments@3.1.1, strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
+strip-json-comments@3.1.1, strip-json-comments@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
@@ -8470,7 +8794,7 @@ stylelint@14.16.1:
     v8-compile-cache "^2.3.0"
     write-file-atomic "^4.0.2"
 
-supports-color@8.1.1, supports-color@^8.0.0:
+supports-color@8.1.1, supports-color@^8.0.0, supports-color@^8.1.1:
   version "8.1.1"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-8.1.1.tgz#cd6fc17e28500cff56c1b86c0a7fd4a54a73005c"
   integrity sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==
@@ -8548,7 +8872,7 @@ table@^6.8.1:
     string-width "^4.2.3"
     strip-ansi "^6.0.1"
 
-tapable@^2.0.0, tapable@^2.1.1, tapable@^2.2.0:
+tapable@^2.0.0, tapable@^2.1.1, tapable@^2.2.0, tapable@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0"
   integrity sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==
@@ -8630,13 +8954,13 @@ trim-newlines@^3.0.0:
   resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-3.0.0.tgz#79726304a6a898aa8373427298d54c2ee8b1cb30"
   integrity sha512-C4+gOpvmxaSMKuEf9Qc134F1ZuOHVXKRbtEflf4NTtuuJDEIJ9p5PXsalL8SkeRw+qit1Mo+yuvMPAKwWg/1hA==
 
-tsconfig-paths@^3.14.1:
-  version "3.14.1"
-  resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz#ba0734599e8ea36c862798e920bcf163277b137a"
-  integrity sha512-fxDhWnFSLt3VuTwtvJt5fpwxBHg5AdKWMsgcPOOIilyjymcYVZoCQF8fvFRezCNfblEXmi+PcM1eYHeOAgXCOQ==
+tsconfig-paths@^3.15.0:
+  version "3.15.0"
+  resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz#5299ec605e55b1abb23ec939ef15edaf483070d4"
+  integrity sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==
   dependencies:
     "@types/json5" "^0.0.29"
-    json5 "^1.0.1"
+    json5 "^1.0.2"
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
@@ -8659,10 +8983,15 @@ type-check@~0.3.2:
   dependencies:
     prelude-ls "~1.1.2"
 
-type-detect@4.0.8, type-detect@^4.0.0, type-detect@^4.0.5, type-detect@^4.0.8:
+type-detect@4.0.8, type-detect@^4.0.0, type-detect@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-4.0.8.tgz#7646fb5f18871cfbb7749e69bd39a6388eb7450c"
 
+type-detect@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-4.1.0.tgz#deb2453e8f08dcae7ae98c626b13dddb0155906c"
+  integrity sha512-Acylog8/luQ8L7il+geoSxhEkazvkslg7PSNKOX59mbB9cOveP5aq9h74Y7YU8yDpJwetzQQrfIwtf4Wp4LKcw==
+
 type-fest@^0.18.0:
   version "0.18.1"
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.18.1.tgz#db4bc151a4a2cf4eebf9add5db75508db6cc841f"
@@ -8696,39 +9025,65 @@ type-is@~1.6.18:
     media-typer "0.3.0"
     mime-types "~2.1.24"
 
-typed-array-length@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/typed-array-length/-/typed-array-length-1.0.4.tgz#89d83785e5c4098bec72e08b319651f0eac9c1bb"
-  integrity sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==
+typed-array-buffer@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz#a72395450a4869ec033fd549371b47af3a2ee536"
+  integrity sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==
   dependencies:
-    call-bind "^1.0.2"
+    call-bound "^1.0.3"
+    es-errors "^1.3.0"
+    is-typed-array "^1.1.14"
+
+typed-array-byte-length@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/typed-array-byte-length/-/typed-array-byte-length-1.0.3.tgz#8407a04f7d78684f3d252aa1a143d2b77b4160ce"
+  integrity sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==
+  dependencies:
+    call-bind "^1.0.8"
     for-each "^0.3.3"
-    is-typed-array "^1.1.9"
+    gopd "^1.2.0"
+    has-proto "^1.2.0"
+    is-typed-array "^1.1.14"
+
+typed-array-byte-offset@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/typed-array-byte-offset/-/typed-array-byte-offset-1.0.4.tgz#ae3698b8ec91a8ab945016108aef00d5bff12355"
+  integrity sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==
+  dependencies:
+    available-typed-arrays "^1.0.7"
+    call-bind "^1.0.8"
+    for-each "^0.3.3"
+    gopd "^1.2.0"
+    has-proto "^1.2.0"
+    is-typed-array "^1.1.15"
+    reflect.getprototypeof "^1.0.9"
+
+typed-array-length@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/typed-array-length/-/typed-array-length-1.0.7.tgz#ee4deff984b64be1e118b0de8c9c877d5ce73d3d"
+  integrity sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==
+  dependencies:
+    call-bind "^1.0.7"
+    for-each "^0.3.3"
+    gopd "^1.0.1"
+    is-typed-array "^1.1.13"
+    possible-typed-array-names "^1.0.0"
+    reflect.getprototypeof "^1.0.6"
 
 ua-parser-js@^0.7.30:
   version "0.7.31"
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.31.tgz#649a656b191dffab4f21d5e053e27ca17cbff5c6"
   integrity sha512-qLK/Xe9E2uzmYI3qLeOmI0tEOt+TBBQyUIAh4aAgU05FVYzeZrKUdkAZfBNVGRaHVgV0TDkdEngJSw/SyQchkQ==
 
-unbox-primitive@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.1.tgz#085e215625ec3162574dc8859abee78a59b14471"
-  integrity sha512-tZU/3NqK3dA5gpE1KtyiJUrEB0lxnGkMFHptJ7q6ewdZ8s12QrODwNbhIJStmJkd1QDXa1NRA8aF2A1zk/Ypyw==
+unbox-primitive@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.1.0.tgz#8d9d2c9edeea8460c7f35033a88867944934d1e2"
+  integrity sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==
   dependencies:
-    function-bind "^1.1.1"
-    has-bigints "^1.0.1"
-    has-symbols "^1.0.2"
-    which-boxed-primitive "^1.0.2"
-
-unbox-primitive@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.2.tgz#29032021057d5e6cdbd08c5129c226dff8ed6f9e"
-  integrity sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==
-  dependencies:
-    call-bind "^1.0.2"
+    call-bound "^1.0.3"
     has-bigints "^1.0.2"
-    has-symbols "^1.0.3"
-    which-boxed-primitive "^1.0.2"
+    has-symbols "^1.1.0"
+    which-boxed-primitive "^1.1.1"
 
 unicode-canonical-property-names-ecmascript@^2.0.0:
   version "2.0.0"
@@ -8748,6 +9103,11 @@ unicode-match-property-value-ecmascript@^2.0.0:
   resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.0.0.tgz#1a01aa57247c14c568b89775a54938788189a714"
   integrity sha512-7Yhkc0Ye+t4PNYzOGKedDhXbYIBe1XEQYQxOPyhcXNMJ0WCABqqj6ckydd6pWRZTHV4GuCPKdBAUiMc60tsKVw==
 
+unicode-match-property-value-ecmascript@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.1.0.tgz#cb5fffdcd16a05124f5a4b0bf7c3770208acbbe0"
+  integrity sha512-qxkjQt6qjg/mYscYMC0XKRn3Rh0wFPlfxB0xkt9CfyTvpX1Ra0+rAmdX2QyAobptSEvuy4RtpPRui6XkV+8wjA==
+
 unicode-property-aliases-ecmascript@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.0.0.tgz#0a36cb9a585c4f6abd51ad1deddb285c165297c8"
@@ -8792,13 +9152,13 @@ update-browserslist-db@^1.0.5:
     escalade "^3.1.1"
     picocolors "^1.0.0"
 
-update-browserslist-db@^1.0.9:
-  version "1.0.10"
-  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.10.tgz#0f54b876545726f17d00cd9a2561e6dade943ff3"
-  integrity sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==
+update-browserslist-db@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.1.2.tgz#97e9c96ab0ae7bcac08e9ae5151d26e6bc6b5580"
+  integrity sha512-PPypAm5qvlD7XMZC3BujecnaOxwhrtoFR+Dqkk5Aa/6DssiH0ibKoketaj9w8LP7Bont1rYeoV5plxD7RTEPRg==
   dependencies:
-    escalade "^3.1.1"
-    picocolors "^1.0.0"
+    escalade "^3.2.0"
+    picocolors "^1.1.1"
 
 uri-js@^4.2.2:
   version "4.2.2"
@@ -8814,13 +9174,13 @@ url-parse@^1.5.3:
     querystringify "^2.1.1"
     requires-port "^1.0.0"
 
-url@0.11.0:
-  version "0.11.0"
-  resolved "https://registry.yarnpkg.com/url/-/url-0.11.0.tgz#3838e97cfc60521eb73c525a8e55bfdd9e2e28f1"
-  integrity sha512-kbailJa29QrtXnxgq+DdCEGlbTeYM2eJUxsz6vjZavrCYPMIFHMKQmSKYAIuUK2i7hgPm28a8piX5NTUtM/LKQ==
+url@0.11.4:
+  version "0.11.4"
+  resolved "https://registry.yarnpkg.com/url/-/url-0.11.4.tgz#adca77b3562d56b72746e76b330b7f27b6721f3c"
+  integrity sha512-oCwdVC7mTuWiPyjLUz/COz5TLk6wgp0RCsN+wHZ2Ekneac9w8uuV0njcbbie2ME+Vs+d6duwmYuR3HgQXs1fOg==
   dependencies:
-    punycode "1.3.2"
-    querystring "0.2.0"
+    punycode "^1.4.1"
+    qs "^6.12.3"
 
 utf8@3.0.0:
   version "3.0.0"
@@ -8868,15 +9228,20 @@ void-elements@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
 
-vue-demi@*, vue-demi@^0.13.11:
+vue-component-type-helpers@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/vue-component-type-helpers/-/vue-component-type-helpers-2.2.0.tgz#de5fa802b6beae7125595ec0d3d5195a22691623"
+  integrity sha512-cYrAnv2me7bPDcg9kIcGwjJiSB6Qyi08+jLDo9yuvoFQjzHiPTzML7RnkJB1+3P6KMsX/KbCD4QE3Tv/knEllw==
+
+vue-demi@^0.13.11:
   version "0.13.11"
   resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.13.11.tgz#7d90369bdae8974d87b1973564ad390182410d99"
   integrity sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==
 
-vue-eslint-parser@^9.0.1:
-  version "9.0.3"
-  resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-9.0.3.tgz#0c17a89e0932cc94fa6a79f0726697e13bfe3c96"
-  integrity sha512-yL+ZDb+9T0ELG4VIFo/2anAOz8SvBdlqEnQnvJ3M7Scq56DvtjY0VY88bByRZB0D4J0u8olBcfrXTVONXsh4og==
+vue-eslint-parser@^9.4.3:
+  version "9.4.3"
+  resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-9.4.3.tgz#9b04b22c71401f1e8bca9be7c3e3416a4bde76a8"
+  integrity sha512-2rYRLWlIpaiN8xbPiDyXZXRgLGOtWxERV7ND5fFAv5qo1D2N9Fu9MNajBNc6o13lZ+24DAWCkQCvj4klgmcITg==
   dependencies:
     debug "^4.3.4"
     eslint-scope "^7.1.1"
@@ -8886,15 +9251,14 @@ vue-eslint-parser@^9.0.1:
     lodash "^4.17.21"
     semver "^7.3.6"
 
-vue-i18n@9.2.2:
-  version "9.2.2"
-  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-9.2.2.tgz#aeb49d9424923c77e0d6441e3f21dafcecd0e666"
-  integrity sha512-yswpwtj89rTBhegUAv9Mu37LNznyu3NpyLQmozF3i1hYOhwpG8RjcjIFIIfnu+2MDZJGSZPXaKWvnQA71Yv9TQ==
+vue-i18n@10:
+  version "10.0.5"
+  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-10.0.5.tgz#fdf4e6c7b669e80cfa3a12ed9625e2b46671cdf0"
+  integrity sha512-9/gmDlCblz3i8ypu/afiIc/SUIfTTE1mr0mZhb9pk70xo2csHAM9mp2gdQ3KD2O0AM3Hz/5ypb+FycTj/lHlPQ==
   dependencies:
-    "@intlify/core-base" "9.2.2"
-    "@intlify/shared" "9.2.2"
-    "@intlify/vue-devtools" "9.2.2"
-    "@vue/devtools-api" "^6.2.1"
+    "@intlify/core-base" "10.0.5"
+    "@intlify/shared" "10.0.5"
+    "@vue/devtools-api" "^6.5.0"
 
 vue-loader@17.0.1:
   version "17.0.1"
@@ -8915,12 +9279,12 @@ vue-resize@^2.0.0-alpha.1:
   resolved "https://registry.yarnpkg.com/vue-resize/-/vue-resize-2.0.0-alpha.1.tgz#43eeb79e74febe932b9b20c5c57e0ebc14e2df3a"
   integrity sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==
 
-vue-router@4.1.6:
-  version "4.1.6"
-  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.1.6.tgz#b70303737e12b4814578d21d68d21618469375a1"
-  integrity sha512-DYWYwsG6xNPmLq/FmZn8Ip+qrhFEzA14EI12MsMgVxvHFDYvlr4NXpVF5hrRH1wVcDP8fGi5F4rxuJSl8/r+EQ==
+vue-router@4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.5.0.tgz#58fc5fe374e10b6018f910328f756c3dae081f14"
+  integrity sha512-HDuk+PuH5monfNuY+ct49mNmkCRK4xJAV9Ts4z9UFc4rzdDnxQLyCMGGc8pKhZhHTVzfanpNwB/lwqevcBwI4w==
   dependencies:
-    "@vue/devtools-api" "^6.4.5"
+    "@vue/devtools-api" "^6.6.4"
 
 vue-style-loader@4.1.3:
   version "4.1.3"
@@ -8930,33 +9294,25 @@ vue-style-loader@4.1.3:
     hash-sum "^1.0.2"
     loader-utils "^1.0.2"
 
-vue-template-compiler@2.7.14:
-  version "2.7.14"
-  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz#4545b7dfb88090744c1577ae5ac3f964e61634b1"
-  integrity sha512-zyA5Y3ArvVG0NacJDkkzJuPQDF8RFeRlzV2vLeSnhSpieO6LK2OVbdLPi5MPPs09Ii+gMO8nY4S3iKQxBxDmWQ==
-  dependencies:
-    de-indent "^1.0.2"
-    he "^1.2.0"
-
 vue-virtual-scroller@^2.0.0-beta.7:
-  version "2.0.0-beta.7"
-  resolved "https://registry.yarnpkg.com/vue-virtual-scroller/-/vue-virtual-scroller-2.0.0-beta.7.tgz#4ea8158638c84b2033b001a8b26c5fcb6896b271"
-  integrity sha512-OrouVj1i2939jaLjVfu8f5fsDlbzhAb4bOsYZYrAkpcVLylAmMoGtIL7eT3hJrdTiaKbwQpRdnv7DKf9Fn+tHg==
+  version "2.0.0-beta.8"
+  resolved "https://registry.yarnpkg.com/vue-virtual-scroller/-/vue-virtual-scroller-2.0.0-beta.8.tgz#eeceda57e4faa5ba1763994c873923e2a956898b"
+  integrity sha512-b8/f5NQ5nIEBRTNi6GcPItE4s7kxNHw2AIHLtDp+2QvqdTjVN0FgONwX9cr53jWRgnu+HRLPaWDOR2JPI5MTfQ==
   dependencies:
     mitt "^2.1.0"
     vue-observe-visibility "^2.0.0-alpha.1"
     vue-resize "^2.0.0-alpha.1"
 
-vue@3.2.45:
-  version "3.2.45"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.45.tgz#94a116784447eb7dbd892167784619fef379b3c8"
-  integrity sha512-9Nx/Mg2b2xWlXykmCwiTUCWHbWIj53bnkizBxKai1g61f2Xit700A1ljowpTIM11e3uipOeiPcSqnmBg6gyiaA==
+vue@3.5.13:
+  version "3.5.13"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-3.5.13.tgz#9f760a1a982b09c0c04a867903fc339c9f29ec0a"
+  integrity sha512-wmeiSMxkZCSc+PM2w2VRsOYAZC8GdipNFRTsLSfodVqI9mbejKeXEGr8SckuLnrQPGe3oJN5c3K0vpoU9q/wCQ==
   dependencies:
-    "@vue/compiler-dom" "3.2.45"
-    "@vue/compiler-sfc" "3.2.45"
-    "@vue/runtime-dom" "3.2.45"
-    "@vue/server-renderer" "3.2.45"
-    "@vue/shared" "3.2.45"
+    "@vue/compiler-dom" "3.5.13"
+    "@vue/compiler-sfc" "3.5.13"
+    "@vue/runtime-dom" "3.5.13"
+    "@vue/server-renderer" "3.5.13"
+    "@vue/shared" "3.5.13"
 
 vuex@4.1.0:
   version "4.1.0"
@@ -9107,33 +9463,62 @@ whatwg-url@^11.0.0:
     tr46 "^3.0.0"
     webidl-conversions "^7.0.0"
 
-which-boxed-primitive@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz#13757bc89b209b049fe5d86430e21cf40a89a8e6"
-  integrity sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==
+which-boxed-primitive@^1.1.0, which-boxed-primitive@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.1.1.tgz#d76ec27df7fa165f18d5808374a5fe23c29b176e"
+  integrity sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==
   dependencies:
-    is-bigint "^1.0.1"
-    is-boolean-object "^1.1.0"
-    is-number-object "^1.0.4"
-    is-string "^1.0.5"
-    is-symbol "^1.0.3"
+    is-bigint "^1.1.0"
+    is-boolean-object "^1.2.1"
+    is-number-object "^1.1.1"
+    is-string "^1.1.1"
+    is-symbol "^1.1.1"
+
+which-builtin-type@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/which-builtin-type/-/which-builtin-type-1.2.1.tgz#89183da1b4907ab089a6b02029cc5d8d6574270e"
+  integrity sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==
+  dependencies:
+    call-bound "^1.0.2"
+    function.prototype.name "^1.1.6"
+    has-tostringtag "^1.0.2"
+    is-async-function "^2.0.0"
+    is-date-object "^1.1.0"
+    is-finalizationregistry "^1.1.0"
+    is-generator-function "^1.0.10"
+    is-regex "^1.2.1"
+    is-weakref "^1.0.2"
+    isarray "^2.0.5"
+    which-boxed-primitive "^1.1.0"
+    which-collection "^1.0.2"
+    which-typed-array "^1.1.16"
+
+which-collection@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.2.tgz#627ef76243920a107e7ce8e96191debe4b16c2a0"
+  integrity sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==
+  dependencies:
+    is-map "^2.0.3"
+    is-set "^2.0.3"
+    is-weakmap "^2.0.2"
+    is-weakset "^2.0.3"
 
 which-module@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
   integrity sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=
 
-which-typed-array@^1.1.9:
-  version "1.1.9"
-  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.9.tgz#307cf898025848cf995e795e8423c7f337efbde6"
-  integrity sha512-w9c4xkx6mPidwp7180ckYWfMmvxpjlZuIudNtDf4N/tTAUB8VJbX25qZoAsrtGuYNnGw3pa0AXgbGKRB8/EceA==
+which-typed-array@^1.1.16, which-typed-array@^1.1.18:
+  version "1.1.18"
+  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.18.tgz#df2389ebf3fbb246a71390e90730a9edb6ce17ad"
+  integrity sha512-qEcY+KJYlWyLH9vNbsr6/5j59AXk5ni5aakf8ldzBvGde6Iz4sxZGkJyWSAueTG7QhOvNRYb1lDdFmL5Td0QKA==
   dependencies:
-    available-typed-arrays "^1.0.5"
-    call-bind "^1.0.2"
+    available-typed-arrays "^1.0.7"
+    call-bind "^1.0.8"
+    call-bound "^1.0.3"
     for-each "^0.3.3"
-    gopd "^1.0.1"
-    has-tostringtag "^1.0.0"
-    is-typed-array "^1.1.10"
+    gopd "^1.2.0"
+    has-tostringtag "^1.0.2"
 
 which@2.0.2, which@^2.0.1:
   version "2.0.2"
@@ -9148,6 +9533,13 @@ which@^1.3.1:
   dependencies:
     isexe "^2.0.0"
 
+which@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/which/-/which-3.0.1.tgz#89f1cd0c23f629a8105ffe69b8172791c87b4be1"
+  integrity sha512-XA1b62dzQzLfaEOSQFTCOd5KFf/1VSzZo7/7TUjnya6u0vGGKzU96UQBZTAThCb2j4/xjBAyii1OhRLJEivHvg==
+  dependencies:
+    isexe "^2.0.0"
+
 widest-line@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/widest-line/-/widest-line-3.1.0.tgz#8292333bbf66cb45ff0de1603b136b7ae1496eca"
@@ -9155,7 +9547,12 @@ widest-line@^3.1.0:
   dependencies:
     string-width "^4.0.0"
 
-word-wrap@^1.2.3, word-wrap@~1.2.3:
+word-wrap@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
+  integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
+
+word-wrap@~1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"
   integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==
@@ -9165,10 +9562,19 @@ workerpool@6.2.0:
   resolved "https://registry.yarnpkg.com/workerpool/-/workerpool-6.2.0.tgz#827d93c9ba23ee2019c3ffaff5c27fccea289e8b"
   integrity sha512-Rsk5qQHJ9eowMH28Jwhe8HEbmdYDX4lwoMWshiCXugjtHqMD9ZbiqSDLxcsfdqsETPzVUtX5s1Z5kStiIM6l4A==
 
-workerpool@6.2.1:
-  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/workerpool/-/workerpool-6.2.1.tgz#46fc150c17d826b86a008e5a4508656777e9c343"
-  integrity sha512-ILEIE97kDZvF9Wb9f6h5aXK4swSlKGUcOEGiIYb2OOu/IrDU9iwj0fD//SsA6E5ibwJxpEvhullJY4Sl4GcpAw==
+workerpool@^6.5.1:
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/workerpool/-/workerpool-6.5.1.tgz#060f73b39d0caf97c6db64da004cd01b4c099544"
+  integrity sha512-Fs4dNYcsdpYSAfVxhnl1L5zTksjvOJxtC5hzMNl+1t9B8hTJTdKDyZ5ju7ztgPy+ft9tBFXoOlDNiOT9WUXZlA==
+
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
 
 wrap-ansi@^6.2.0:
   version "6.2.0"
@@ -9188,6 +9594,15 @@ wrap-ansi@^7.0.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
+wrap-ansi@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"
+  integrity sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==
+  dependencies:
+    ansi-styles "^6.1.0"
+    string-width "^5.0.1"
+    strip-ansi "^7.0.1"
+
 wrappy@1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
@@ -9210,10 +9625,10 @@ ws@^8.2.3:
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.11.0.tgz#6a0d36b8edfd9f96d8b25683db2f8d7de6e8e143"
   integrity sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==
 
-ws@~8.2.3:
-  version "8.2.3"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-8.2.3.tgz#63a56456db1b04367d0b721a0b80cae6d8becbba"
-  integrity sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==
+ws@~8.17.1:
+  version "8.17.1"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-8.17.1.tgz#9293da530bb548febc95371d90f9c878727d919b"
+  integrity sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==
 
 xml-name-validator@^4.0.0:
   version "4.0.0"
@@ -9238,11 +9653,6 @@ y18n@^5.0.5:
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.8.tgz#7f4934d0f7ca8c56f95314939ddcd2dd91ce1d55"
   integrity sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==
 
-yallist@^2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
-  integrity sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==
-
 yallist@^3.0.2:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
@@ -9280,12 +9690,12 @@ yargs-parser@^18.1.2:
     camelcase "^5.0.0"
     decamelize "^1.2.0"
 
-yargs-parser@^20.2.2, yargs-parser@^20.2.3:
+yargs-parser@^20.2.2, yargs-parser@^20.2.3, yargs-parser@^20.2.9:
   version "20.2.9"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.9.tgz#2eb7dc3b0289718fc295f362753845c41a0c94ee"
   integrity sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==
 
-yargs-unparser@2.0.0:
+yargs-unparser@2.0.0, yargs-unparser@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/yargs-unparser/-/yargs-unparser-2.0.0.tgz#f131f9226911ae5d9ad38c432fe809366c2325eb"
   integrity sha512-7pRTIA9Qc1caZ0bZ6RYRGbHJthJWuakf+WmHK0rVeLkNrrGhfoabBNdue6kdINI6r4if7ocq9aD/n7xwKOdzOA==
@@ -9295,7 +9705,7 @@ yargs-unparser@2.0.0:
     flat "^5.0.2"
     is-plain-obj "^2.1.0"
 
-yargs@16.2.0, yargs@^16.1.1:
+yargs@16.2.0, yargs@^16.1.1, yargs@^16.2.0:
   version "16.2.0"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-16.2.0.tgz#1c82bf0f6b6a66eafce7ef30e376f49a12477f66"
   integrity sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==
@@ -9337,3 +9747,8 @@ yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+
+yocto-queue@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-1.0.0.tgz#7f816433fb2cbc511ec8bf7d263c3b58a1a3c251"
+  integrity sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==