Merge branch 'nightly' into release

260 files changed, 5381 insertions, 2252 deletions

diff --git a/src/I18n.js b/src/I18n.js
index 6fb4cdc61..2a50050ee 100644
--- a/src/I18n.js
+++ b/src/I18n.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 import { IntlProvider } from 'react-intl';
diff --git a/src/actions/index.ts b/src/actions/index.ts
index aecdac675..983afa64b 100644
--- a/src/actions/index.ts
+++ b/src/actions/index.ts
@@ -7,7 +7,6 @@ import recipePreview from './recipePreview';
 import ui from './ui';
 import app from './app';
 import user from './user';
-import news from './news';
 import settings from './settings';
 import requests from './requests';
 import workspaces from '../features/workspaces/actions';
@@ -20,7 +19,6 @@ const actions = {
   ui,
   app,
   user,
-  news,
   settings,
   requests,
 };
diff --git a/src/actions/news.ts b/src/actions/news.ts
deleted file mode 100644
index db106e84f..000000000
--- a/src/actions/news.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import PropTypes from 'prop-types';
-
-export default {
-  hide: {
-    newsId: PropTypes.string.isRequired,
-  },
-};
diff --git a/src/actions/user.ts b/src/actions/user.ts
index 20d27ee53..15a9216bd 100644
--- a/src/actions/user.ts
+++ b/src/actions/user.ts
@@ -25,8 +25,10 @@ export default {
     userData: PropTypes.object.isRequired,
   },
   resetStatus: {},
-  importLegacyServices: PropTypes.arrayOf(PropTypes.shape({
-    recipe: PropTypes.string.isRequired,
-  })).isRequired,
+  importLegacyServices: PropTypes.arrayOf(
+    PropTypes.shape({
+      recipe: PropTypes.string.isRequired,
+    }),
+  ).isRequired,
   delete: {},
 };
diff --git a/src/api/NewsApi.ts b/src/api/NewsApi.ts
deleted file mode 100644
index 31d3d903b..000000000
--- a/src/api/NewsApi.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-export default class NewsApi {
-  server: any;
-
-  local: any;
-
-  constructor(server: any, local: any) {
-    this.server = server;
-    this.local = local;
-  }
-
-  latest() {
-    return this.server.getLatestNews();
-  }
-
-  hide(id: any) {
-    return this.server.hideNews(id);
-  }
-}
diff --git a/src/api/index.ts b/src/api/index.ts
index 73f613da1..59fad194a 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -4,7 +4,6 @@ import RecipePreviewsApi from './RecipePreviewsApi';
 import RecipesApi from './RecipesApi';
 import UserApi from './UserApi';
 import LocalApi from './LocalApi';
-import NewsApi from './NewsApi';
 import FeaturesApi from './FeaturesApi';
 
 export default (server: any, local: any) => ({
@@ -15,5 +14,4 @@ export default (server: any, local: any) => ({
   features: new FeaturesApi(server),
   user: new UserApi(server, local),
   local: new LocalApi(server, local),
-  news: new NewsApi(server, local),
 });
diff --git a/src/api/server/LocalApi.ts b/src/api/server/LocalApi.ts
index 19eacf9ff..1a46aaefe 100644
--- a/src/api/server/LocalApi.ts
+++ b/src/api/server/LocalApi.ts
@@ -1,5 +1,6 @@
+import { ExecException } from 'child_process';
 import { ipcRenderer } from 'electron';
-import du from 'du';
+import fastFolderSize from 'fast-folder-size';
 
 import { getServicePartitionsDirectory } from '../../helpers/service-helpers';
 
@@ -29,13 +30,19 @@ export default class LocalApi {
   // Services
   async getAppCacheSize() {
     const partitionsDir = getServicePartitionsDirectory();
+
     return new Promise((resolve, reject) => {
-      du(partitionsDir, {}, (err: Error | null, size?: number | undefined) => {
-        if (err) reject(err);
+      fastFolderSize(
+        partitionsDir,
+        (err: ExecException | null, bytes: number | undefined) => {
+          if (err) {
+            reject(err);
+          }
 
-        debug('LocalApi::getAppCacheSize resolves', size);
-        resolve(size);
-      });
+          debug('LocalApi::getAppCacheSize resolves', bytes);
+          resolve(bytes);
+        },
+      );
     });
   }
 
diff --git a/src/api/server/ServerApi.js b/src/api/server/ServerApi.js
index e321f9372..6bbf572fa 100644
--- a/src/api/server/ServerApi.js
+++ b/src/api/server/ServerApi.js
@@ -16,14 +16,12 @@ import fetch from 'electron-fetch';
 import ServiceModel from '../../models/Service';
 import RecipePreviewModel from '../../models/RecipePreview';
 import RecipeModel from '../../models/Recipe';
-import NewsModel from '../../models/News';
 import UserModel from '../../models/User';
 
 import { sleep } from '../../helpers/async-helpers';
 
 import { SERVER_NOT_LOADED } from '../../config';
-import { osArch, osPlatform } from '../../environment';
-import { userDataRecipesPath, userDataPath, ferdiVersion } from '../../environment-remote';
+import { userDataRecipesPath, userDataPath } from '../../environment-remote';
 import { asarRecipesPath } from '../../helpers/asar-helpers';
 import apiBase from '../apiBase';
 import { prepareAuthRequest, sendAuthRequest } from '../utils/auth';
@@ -442,25 +440,6 @@ export default class ServerApi {
     }
   }
 
-  // News
-  async getLatestNews() {
-    const url = `${apiBase(
-      true,
-    )}/news?platform=${osPlatform}&arch=${osArch}&version=${ferdiVersion}`;
-    const request = await sendAuthRequest(url);
-    if (!request.ok) throw request;
-    const data = await request.json();
-    const news = this._mapNewsModels(data);
-    debug('ServerApi::getLatestNews resolves', news);
-    return news;
-  }
-
-  async hideNews(id) {
-    const request = await sendAuthRequest(`${apiBase()}/news/${id}/read`);
-    if (!request.ok) throw request;
-    debug('ServerApi::hideNews resolves', id);
-  }
-
   // Health Check
   async healthCheck() {
     if (apiBase() === SERVER_NOT_LOADED) {
@@ -587,19 +566,6 @@ export default class ServerApi {
       .filter(recipe => recipe !== null);
   }
 
-  _mapNewsModels(news) {
-    return news
-      .map(newsItem => {
-        try {
-          return new NewsModel(newsItem);
-        } catch (error) {
-          console.error(error);
-          return null;
-        }
-      })
-      .filter(newsItem => newsItem !== null);
-  }
-
   _getDevRecipes() {
     const recipesDirectory = getDevRecipeDirectory();
     try {
diff --git a/src/app.js b/src/app.js
index 8a1f99320..aea57a673 100644
--- a/src/app.js
+++ b/src/app.js
@@ -1,6 +1,5 @@
 import { webFrame } from 'electron';
 
-import React from 'react';
 import { render } from 'react-dom';
 import { Provider } from 'mobx-react';
 import { syncHistoryWithStore, RouterStore } from 'mobx-react-router';
diff --git a/src/components/AppUpdateInfoBar.js b/src/components/AppUpdateInfoBar.js
deleted file mode 100644
index 47b730bde..000000000
--- a/src/components/AppUpdateInfoBar.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { defineMessages, injectIntl } from 'react-intl';
-
-import InfoBar from './ui/InfoBar';
-import { GITHUB_FERDI_URL } from '../config';
-import { openExternalUrl } from '../helpers/url-helpers';
-
-const messages = defineMessages({
-  updateAvailable: {
-    id: 'infobar.updateAvailable',
-    defaultMessage: 'A new update for Ferdi is available.',
-  },
-  changelog: {
-    id: 'infobar.buttonChangelog',
-    defaultMessage: 'What is new?',
-  },
-  buttonInstallUpdate: {
-    id: 'infobar.buttonInstallUpdate',
-    defaultMessage: 'Restart & install update',
-  },
-});
-
-class AppUpdateInfoBar extends Component {
-  static propTypes = {
-    onInstallUpdate: PropTypes.func.isRequired,
-    onHide: PropTypes.func.isRequired,
-  };
-
-  render() {
-    const { intl } = this.props;
-    const { onInstallUpdate, onHide } = this.props;
-
-    return (
-      <InfoBar
-        type="primary"
-        ctaLabel={intl.formatMessage(messages.buttonInstallUpdate)}
-        onClick={onInstallUpdate}
-        onHide={onHide}
-      >
-        <span className="mdi mdi-information" />
-        {intl.formatMessage(messages.updateAvailable)}{' '}
-        <button
-          className="info-bar__inline-button"
-          type="button"
-          onClick={() =>
-            openExternalUrl(
-              `${GITHUB_FERDI_URL}/ferdi/blob/develop/CHANGELOG.md`,
-              true,
-            )
-          }
-        >
-          <u>{intl.formatMessage(messages.changelog)}</u>
-        </button>
-      </InfoBar>
-    );
-  }
-}
-
-export default injectIntl(AppUpdateInfoBar);
diff --git a/src/components/AppUpdateInfoBar.tsx b/src/components/AppUpdateInfoBar.tsx
new file mode 100644
index 000000000..1dd3723cc
--- /dev/null
+++ b/src/components/AppUpdateInfoBar.tsx
@@ -0,0 +1,55 @@
+import { defineMessages, useIntl } from 'react-intl';
+
+import InfoBar from './ui/InfoBar';
+import { GITHUB_FERDI_URL } from '../config';
+import { openExternalUrl } from '../helpers/url-helpers';
+
+const messages = defineMessages({
+  updateAvailable: {
+    id: 'infobar.updateAvailable',
+    defaultMessage: 'A new update for Ferdi is available.',
+  },
+  changelog: {
+    id: 'infobar.buttonChangelog',
+    defaultMessage: 'What is new?',
+  },
+  buttonInstallUpdate: {
+    id: 'infobar.buttonInstallUpdate',
+    defaultMessage: 'Restart & install update',
+  },
+});
+
+type Props = {
+  onInstallUpdate: () => void;
+  onHide: () => void;
+};
+
+const AppUpdateInfoBar = ({ onInstallUpdate, onHide }: Props) => {
+  const intl = useIntl();
+
+  return (
+    <InfoBar
+      type="primary"
+      ctaLabel={intl.formatMessage(messages.buttonInstallUpdate)}
+      onClick={onInstallUpdate}
+      onHide={onHide}
+    >
+      <span className="mdi mdi-information" />
+      {intl.formatMessage(messages.updateAvailable)}{' '}
+      <button
+        className="info-bar__inline-button"
+        type="button"
+        onClick={() =>
+          openExternalUrl(
+            `${GITHUB_FERDI_URL}/ferdi/blob/develop/CHANGELOG.md`,
+            true,
+          )
+        }
+      >
+        <u>{intl.formatMessage(messages.changelog)}</u>
+      </button>
+    </InfoBar>
+  );
+};
+
+export default AppUpdateInfoBar;
diff --git a/src/components/auth/AuthLayout.js b/src/components/auth/AuthLayout.js
index 17ac221a2..00eded728 100644
--- a/src/components/auth/AuthLayout.js
+++ b/src/components/auth/AuthLayout.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { cloneElement, Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { TitleBar } from 'electron-react-titlebar/renderer';
@@ -87,7 +87,7 @@ class AuthLayout extends Component {
           )}
           <div className="auth__layout">
             {/* Inject globalError into children  */}
-            {React.cloneElement(children, {
+            {cloneElement(children, {
               error,
             })}
           </div>
diff --git a/src/components/auth/ChangeServer.js b/src/components/auth/ChangeServer.js
index b98fb50f7..9aeebc5c8 100644
--- a/src/components/auth/ChangeServer.js
+++ b/src/components/auth/ChangeServer.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
diff --git a/src/components/auth/Import.js b/src/components/auth/Import.js
index 44cb7e791..fe2fe9872 100644
--- a/src/components/auth/Import.js
+++ b/src/components/auth/Import.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
diff --git a/src/components/auth/Invite.js b/src/components/auth/Invite.js
index df8980314..dd71c2450 100644
--- a/src/components/auth/Invite.js
+++ b/src/components/auth/Invite.js
@@ -1,4 +1,4 @@
-import React, { Component, Fragment } from 'react';
+import { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
diff --git a/src/components/auth/Locked.js b/src/components/auth/Locked.js
index a507ba140..5b36b9fc2 100644
--- a/src/components/auth/Locked.js
+++ b/src/components/auth/Locked.js
@@ -1,5 +1,5 @@
 import { systemPreferences } from '@electron/remote';
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
diff --git a/src/components/auth/Login.js b/src/components/auth/Login.js
index 2f9986858..9f3f636e3 100644
--- a/src/components/auth/Login.js
+++ b/src/components/auth/Login.js
@@ -1,5 +1,5 @@
 /* eslint jsx-a11y/anchor-is-valid: 0 */
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, inject } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
diff --git a/src/components/auth/Password.js b/src/components/auth/Password.js
index 3e678f638..d5bc7fa80 100644
--- a/src/components/auth/Password.js
+++ b/src/components/auth/Password.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
diff --git a/src/components/auth/SetupAssistant.js b/src/components/auth/SetupAssistant.js
index 299c40c63..1665bf837 100644
--- a/src/components/auth/SetupAssistant.js
+++ b/src/components/auth/SetupAssistant.js
@@ -1,12 +1,13 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
 import injectSheet from 'react-jss';
 import classnames from 'classnames';
 
-import { Input, Button } from '@meetfranz/forms';
-import { Badge } from '@meetfranz/ui';
+import { Input } from '../ui/input/index';
+import { Button } from '../ui/button/index';
+import { Badge } from '../ui/badge';
 import Modal from '../ui/Modal';
 import Infobox from '../ui/Infobox';
 import Appear from '../ui/effects/Appear';
diff --git a/src/components/auth/Signup.js b/src/components/auth/Signup.js
index 816a49669..00625a3ac 100644
--- a/src/components/auth/Signup.js
+++ b/src/components/auth/Signup.js
@@ -1,5 +1,5 @@
 /* eslint jsx-a11y/anchor-is-valid: 0 */
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, inject } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
diff --git a/src/components/auth/Welcome.js b/src/components/auth/Welcome.js
index 2d2e2ab28..809ec67a7 100644
--- a/src/components/auth/Welcome.js
+++ b/src/components/auth/Welcome.js
@@ -1,5 +1,5 @@
 /* eslint jsx-a11y/anchor-is-valid: 0 */
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes, inject } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js
index 0a65dcffa..4bacc547b 100644
--- a/src/components/layout/AppLayout.js
+++ b/src/components/layout/AppLayout.js
@@ -1,6 +1,6 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
-import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
+import { observer } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
 import { TitleBar } from 'electron-react-titlebar/renderer';
 import injectSheet from 'react-jss';
@@ -20,10 +20,6 @@ import { workspaceStore } from '../../features/workspaces';
 import AppUpdateInfoBar from '../AppUpdateInfoBar';
 import Todos from '../../features/todos/containers/TodosScreen';
 
-function createMarkup(HTMLString) {
-  return { __html: HTMLString };
-}
-
 const messages = defineMessages({
   servicesUpdated: {
     id: 'infobar.servicesUpdated',
@@ -73,11 +69,9 @@ class AppLayout extends Component {
     workspacesDrawer: PropTypes.element.isRequired,
     services: PropTypes.element.isRequired,
     children: PropTypes.element,
-    news: MobxPropTypes.arrayOrObservableArray.isRequired,
     showServicesUpdatedInfoBar: PropTypes.bool.isRequired,
     appUpdateIsDownloaded: PropTypes.bool.isRequired,
     authRequestFailed: PropTypes.bool.isRequired,
-    removeNewsItem: PropTypes.func.isRequired,
     reloadServicesAfterUpdate: PropTypes.func.isRequired,
     installAppUpdate: PropTypes.func.isRequired,
     showRequiredRequestsError: PropTypes.bool.isRequired,
@@ -103,11 +97,9 @@ class AppLayout extends Component {
       sidebar,
       services,
       children,
-      news,
       showServicesUpdatedInfoBar,
       appUpdateIsDownloaded,
       authRequestFailed,
-      removeNewsItem,
       reloadServicesAfterUpdate,
       installAppUpdate,
       showRequiredRequestsError,
@@ -132,26 +124,6 @@ class AppLayout extends Component {
             {sidebar}
             <div className="app__service">
               <WorkspaceSwitchingIndicator />
-              {news.length > 0 &&
-                news.map(item => (
-                  <InfoBar
-                    key={item.id}
-                    position="top"
-                    type={item.type}
-                    sticky={item.sticky}
-                    onHide={() => removeNewsItem({ newsId: item.id })}
-                  >
-                    <span
-                      dangerouslySetInnerHTML={createMarkup(item.message)}
-                      onClick={event => {
-                        const { target } = event;
-                        if (target && target.hasAttribute('data-is-news-cta')) {
-                          removeNewsItem({ newsId: item.id });
-                        }
-                      }}
-                    />
-                  </InfoBar>
-                ))}
               {!areRequiredRequestsSuccessful && showRequiredRequestsError && (
                 <InfoBar
                   type="danger"
@@ -176,19 +148,22 @@ class AppLayout extends Component {
                   {intl.formatMessage(messages.authRequestFailed)}
                 </InfoBar>
               )}
-              {showServicesUpdatedInfoBar && this.state.shouldShowServicesUpdatedInfoBar && (
-                <InfoBar
-                  type="primary"
-                  ctaLabel={intl.formatMessage(messages.buttonReloadServices)}
-                  onClick={reloadServicesAfterUpdate}
-                  onHide={() => {
-                    this.setState({ shouldShowServicesUpdatedInfoBar: false });
-                  }}
-                >
-                  <span className="mdi mdi-power-plug" />
-                  {intl.formatMessage(messages.servicesUpdated)}
-                </InfoBar>
-              )}
+              {showServicesUpdatedInfoBar &&
+                this.state.shouldShowServicesUpdatedInfoBar && (
+                  <InfoBar
+                    type="primary"
+                    ctaLabel={intl.formatMessage(messages.buttonReloadServices)}
+                    onClick={reloadServicesAfterUpdate}
+                    onHide={() => {
+                      this.setState({
+                        shouldShowServicesUpdatedInfoBar: false,
+                      });
+                    }}
+                  >
+                    <span className="mdi mdi-power-plug" />
+                    {intl.formatMessage(messages.servicesUpdated)}
+                  </InfoBar>
+                )}
               {appUpdateIsDownloaded && this.state.shouldShowAppUpdateInfoBar && (
                 <AppUpdateInfoBar
                   onInstallUpdate={installAppUpdate}
diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.js
index 87233f7ca..fc33a3c58 100644
--- a/src/components/layout/Sidebar.js
+++ b/src/components/layout/Sidebar.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import ReactTooltip from 'react-tooltip';
 import { defineMessages, injectIntl } from 'react-intl';
@@ -177,7 +177,7 @@ class Sidebar extends Component {
               >
                 <i className="mdi mdi-check-all" />
               </button>
-              ) : null}
+            ) : null}
             {workspaceStore.isFeatureEnabled ? (
               <button
                 type="button"
@@ -243,7 +243,7 @@ class Sidebar extends Component {
             this.props.stores.app.updateStatusTypes.AVAILABLE ||
             this.props.stores.app.updateStatus ===
               this.props.stores.app.updateStatusTypes.DOWNLOADED) && (
-              <span className="update-available">•</span>
+            <span className="update-available">•</span>
           )}
         </button>
         {this.state.tooltipEnabled && (
diff --git a/src/components/services/content/ConnectionLostBanner.js b/src/components/services/content/ConnectionLostBanner.js
index 423edb3c7..5111a081a 100644
--- a/src/components/services/content/ConnectionLostBanner.js
+++ b/src/components/services/content/ConnectionLostBanner.js
@@ -1,13 +1,12 @@
-import React, { Component } from 'react';
+import { createRef, Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import injectSheet from 'react-jss';
-import { Icon } from '@meetfranz/ui';
 import { defineMessages, injectIntl } from 'react-intl';
 
 import { mdiAlert } from '@mdi/js';
 import { LIVE_API_FERDI_WEBSITE } from '../../../config';
-// import { Button } from '@meetfranz/forms';
+import { Icon } from '../../ui/icon';
 
 const messages = defineMessages({
   text: {
@@ -78,7 +77,7 @@ class ConnectionLostBanner extends Component {
     reload: PropTypes.func.isRequired,
   };
 
-  inputRef = React.createRef();
+  inputRef = createRef();
 
   render() {
     const { classes, name, reload } = this.props;
diff --git a/src/components/services/content/ErrorHandlers/WebviewErrorHandler.js b/src/components/services/content/ErrorHandlers/WebviewErrorHandler.js
index b00db8c3f..5c93de80f 100644
--- a/src/components/services/content/ErrorHandlers/WebviewErrorHandler.js
+++ b/src/components/services/content/ErrorHandlers/WebviewErrorHandler.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
diff --git a/src/components/services/content/ErrorHandlers/styles.js b/src/components/services/content/ErrorHandlers/styles.ts
index 72d62f5e3..9e2509ee5 100644
--- a/src/components/services/content/ErrorHandlers/styles.js
+++ b/src/components/services/content/ErrorHandlers/styles.ts
@@ -1,4 +1,4 @@
-export default (theme) => ({
+export default theme => ({
   component: {
     left: 0,
     position: 'absolute',
diff --git a/src/components/services/content/ServiceDisabled.js b/src/components/services/content/ServiceDisabled.js
index e59ed58bd..476b23235 100644
--- a/src/components/services/content/ServiceDisabled.js
+++ b/src/components/services/content/ServiceDisabled.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
diff --git a/src/components/services/content/ServiceView.js b/src/components/services/content/ServiceView.js
index 81401b1d2..1bc1fbf5f 100644
--- a/src/components/services/content/ServiceView.js
+++ b/src/components/services/content/ServiceView.js
@@ -1,4 +1,4 @@
-import React, { Component, Fragment } from 'react';
+import { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { autorun } from 'mobx';
 import { observer, inject } from 'mobx-react';
@@ -123,7 +123,7 @@ class ServiceView extends Component {
               service.isFirstLoad &&
               !service.isServiceAccessRestricted && (
                 <WebviewLoader loaded={false} name={service.name} />
-            )}
+              )}
             {service.isError && (
               <WebviewErrorHandler
                 name={service.recipe.name}
diff --git a/src/components/services/content/ServiceWebview.js b/src/components/services/content/ServiceWebview.js
index d3170be53..185d41175 100644
--- a/src/components/services/content/ServiceWebview.js
+++ b/src/components/services/content/ServiceWebview.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { observable, reaction } from 'mobx';
@@ -24,12 +24,10 @@ class ServiceWebview extends Component {
     super(props);
 
     reaction(
-      () => (
-        this.webview
-      ),
+      () => this.webview,
       () => {
         if (this.webview && this.webview.view) {
-          this.webview.view.addEventListener('console-message', (e) => {
+          this.webview.view.addEventListener('console-message', e => {
             debug('Service logged a message:', e.message);
           });
         }
@@ -55,20 +53,26 @@ class ServiceWebview extends Component {
   };
 
   render() {
-    const {
-      service,
-      setWebviewReference,
-      isSpellcheckerEnabled,
-    } = this.props;
+    const { service, setWebviewReference, isSpellcheckerEnabled } = this.props;
 
-    const preloadScript = join(__dirname, '..', '..', '..', 'webview', 'recipe.js');
+    const preloadScript = join(
+      __dirname,
+      '..',
+      '..',
+      '..',
+      'webview',
+      'recipe.js',
+    );
 
     return (
       <ElectronWebView
-        ref={(webview) => {
+        ref={webview => {
           this.webview = webview;
           if (webview && webview.view) {
-            webview.view.addEventListener('did-stop-loading', this.refocusWebview);
+            webview.view.addEventListener(
+              'did-stop-loading',
+              this.refocusWebview,
+            );
           }
         }}
         autosize
@@ -83,10 +87,14 @@ class ServiceWebview extends Component {
         }}
         onUpdateTargetUrl={this.updateTargetUrl}
         useragent={service.userAgent}
-        disablewebsecurity={service.recipe.disablewebsecurity ? true : undefined}
+        disablewebsecurity={
+          service.recipe.disablewebsecurity ? true : undefined
+        }
         allowpopups
         nodeintegration
-        webpreferences={`spellcheck=${isSpellcheckerEnabled ? 1 : 0}, contextIsolation=1, enableRemoteModule=1`}
+        webpreferences={`spellcheck=${
+          isSpellcheckerEnabled ? 1 : 0
+        }, contextIsolation=1, enableRemoteModule=1`}
       />
     );
   }
diff --git a/src/components/services/content/Services.js b/src/components/services/content/Services.js
index fb43fb816..1edf31bd3 100644
--- a/src/components/services/content/Services.js
+++ b/src/components/services/content/Services.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes, inject } from 'mobx-react';
 import { Link } from 'react-router';
diff --git a/src/components/services/content/WebviewCrashHandler.js b/src/components/services/content/WebviewCrashHandler.js
index a332602be..3607435b3 100644
--- a/src/components/services/content/WebviewCrashHandler.js
+++ b/src/components/services/content/WebviewCrashHandler.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
diff --git a/src/components/services/tabs/TabBarSortableList.js b/src/components/services/tabs/TabBarSortableList.js
index 1a389991d..69a12e982 100644
--- a/src/components/services/tabs/TabBarSortableList.js
+++ b/src/components/services/tabs/TabBarSortableList.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 import PropTypes from 'prop-types';
 import { SortableContainer } from 'react-sortable-hoc';
@@ -22,7 +22,7 @@ class TabBarSortableList extends Component {
     wakeUpService: PropTypes.func.isRequired,
     showMessageBadgeWhenMutedSetting: PropTypes.bool.isRequired,
     showMessageBadgesEvenWhenMuted: PropTypes.bool.isRequired,
-  }
+  };
 
   render() {
     const {
@@ -43,9 +43,7 @@ class TabBarSortableList extends Component {
     } = this.props;
 
     return (
-      <ul
-        className="tabs"
-      >
+      <ul className="tabs">
         {services.map((service, index) => (
           <TabItem
             key={service.id}
@@ -54,7 +52,9 @@ class TabBarSortableList extends Component {
             index={index}
             shortcutIndex={index + 1}
             reload={() => reload({ serviceId: service.id })}
-            toggleNotifications={() => toggleNotifications({ serviceId: service.id })}
+            toggleNotifications={() =>
+              toggleNotifications({ serviceId: service.id })
+            }
             toggleAudio={() => toggleAudio({ serviceId: service.id })}
             toggleDarkMode={() => toggleDarkMode({ serviceId: service.id })}
             deleteService={() => deleteService({ serviceId: service.id })}
diff --git a/src/components/services/tabs/TabItem.js b/src/components/services/tabs/TabItem.js
index 2474682df..ed8430b89 100644
--- a/src/components/services/tabs/TabItem.js
+++ b/src/components/services/tabs/TabItem.js
@@ -1,17 +1,18 @@
 import { Menu, dialog, app } from '@electron/remote';
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { defineMessages, injectIntl } from 'react-intl';
 import PropTypes from 'prop-types';
-import { observer } from 'mobx-react';
+import { inject, observer } from 'mobx-react';
 import classnames from 'classnames';
 import { SortableElement } from 'react-sortable-hoc';
 import injectSheet from 'react-jss';
 import ms from 'ms';
 
-import { observable, autorun } from 'mobx';
+import { observable, autorun, reaction } from 'mobx';
 import ServiceModel from '../../../models/Service';
 import { cmdOrCtrlShortcutKey } from '../../../environment';
 import globalMessages from '../../../i18n/globalMessages';
+import SettingsStore from '../../../stores/SettingsStore';
 
 const IS_SERVICE_DEBUGGING_ENABLED = (
   localStorage.getItem('debug') || ''
@@ -112,6 +113,7 @@ const styles = {
 };
 
 @injectSheet(styles)
+@inject('stores')
 @observer
 class TabItem extends Component {
   static propTypes = {
@@ -131,6 +133,9 @@ class TabItem extends Component {
     wakeUpService: PropTypes.func.isRequired,
     showMessageBadgeWhenMutedSetting: PropTypes.bool.isRequired,
     showMessageBadgesEvenWhenMuted: PropTypes.bool.isRequired,
+    stores: PropTypes.shape({
+      settings: PropTypes.instanceOf(SettingsStore).isRequired,
+    }).isRequired,
   };
 
   @observable isPolled = false;
@@ -142,37 +147,37 @@ class TabItem extends Component {
     this.state = {
       showShortcutIndex: false,
     };
+
+    reaction(
+      () => this.props.stores.settings.app.enableLongPressServiceHint,
+      () => {
+        this.checkForLongPress(
+          this.props.stores.settings.app.enableLongPressServiceHint,
+        );
+      },
+    );
   }
 
-  handleShowShortcutIndex = () => {
-    this.setState({ showShortcutIndex: true });
+  handleShortcutIndex = (event, showShortcutIndex = true) => {
+    if (event.key === 'Shift') {
+      this.setState({ showShortcutIndex });
+    }
   };
 
-  checkForLongPress = () => {
-    let longpressDelay = null;
-    const longpressDelayDuration = 1000;
-
-    document.addEventListener(
-      'keydown',
-      e => {
-        if (e.ctrlKey || e.metaKey) {
-          longpressDelay = setTimeout(
-            this.handleShowShortcutIndex,
-            longpressDelayDuration,
-          );
-        }
-      },
-      { capture: true },
-    );
+  checkForLongPress = enableLongPressServiceHint => {
+    if (enableLongPressServiceHint) {
+      document.addEventListener('keydown', e => {
+        this.handleShortcutIndex(e);
+      });
 
-    document.addEventListener('keyup', () => {
-      clearTimeout(longpressDelay);
-      this.setState({ showShortcutIndex: false });
-    });
+      document.addEventListener('keyup', e => {
+        this.handleShortcutIndex(e, false);
+      });
+    }
   };
 
   componentDidMount() {
-    const { service } = this.props;
+    const { service, stores } = this.props;
 
     if (IS_SERVICE_DEBUGGING_ENABLED) {
       autorun(() => {
@@ -194,7 +199,7 @@ class TabItem extends Component {
       });
     }
 
-    this.checkForLongPress();
+    this.checkForLongPress(stores.settings.app.enableLongPressServiceHint);
   }
 
   render() {
@@ -364,7 +369,7 @@ class TabItem extends Component {
             />
           </>
         )}
-        {shortcutIndex && this.state.showShortcutIndex && (
+        {shortcutIndex <= 9 && this.state.showShortcutIndex && (
           <span className="tab-item__shortcut-index">{shortcutIndex}</span>
         )}
       </li>
diff --git a/src/components/services/tabs/Tabbar.js b/src/components/services/tabs/Tabbar.js
index a77799819..4ab0e8611 100644
--- a/src/components/services/tabs/Tabbar.js
+++ b/src/components/services/tabs/Tabbar.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 
diff --git a/src/components/settings/SettingsLayout.js b/src/components/settings/SettingsLayout.js
index 71250bd4d..be11fdb8e 100644
--- a/src/components/settings/SettingsLayout.js
+++ b/src/components/settings/SettingsLayout.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js
index 544821e9a..6c489e64b 100644
--- a/src/components/settings/account/AccountDashboard.js
+++ b/src/components/settings/account/AccountDashboard.js
@@ -1,9 +1,9 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
 import ReactTooltip from 'react-tooltip';
-import { H1, H2 } from '@meetfranz/ui';
+import { H1, H2 } from '../../ui/headline';
 
 import Loader from '../../ui/Loader';
 import Button from '../../ui/Button';
diff --git a/src/components/settings/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.js
index 72c7faa66..18a71fdeb 100644
--- a/src/components/settings/navigation/SettingsNavigation.js
+++ b/src/components/settings/navigation/SettingsNavigation.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { defineMessages, injectIntl } from 'react-intl';
 import { inject, observer } from 'mobx-react';
diff --git a/src/components/settings/recipes/RecipeItem.js b/src/components/settings/recipes/RecipeItem.js
index ca188aa99..1e910e6dc 100644
--- a/src/components/settings/recipes/RecipeItem.js
+++ b/src/components/settings/recipes/RecipeItem.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 
diff --git a/src/components/settings/recipes/RecipesDashboard.js b/src/components/settings/recipes/RecipesDashboard.js
index 44f5bc39a..bdb6f3ca0 100644
--- a/src/components/settings/recipes/RecipesDashboard.js
+++ b/src/components/settings/recipes/RecipesDashboard.js
@@ -1,12 +1,14 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
 import { Link } from 'react-router';
 
-import { Button, Input } from '@meetfranz/forms';
 import injectSheet from 'react-jss';
-import { H3, H2 } from '@meetfranz/ui';
+
+import { Button } from '../../ui/button/index';
+import { Input } from '../../ui/input/index';
+import { H3, H2 } from '../../ui/headline';
 import SearchInput from '../../ui/SearchInput';
 import Infobox from '../../ui/Infobox';
 import RecipeItem from './RecipeItem';
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index 22089ec45..b040e6cc2 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { Link } from 'react-router';
@@ -356,6 +356,7 @@ class EditServiceForm extends Component {
                   <p className="settings__help indented__help">
                     {intl.formatMessage(messages.isHibernationEnabledInfo)}
                   </p>
+                  <Toggle field={form.$('isWakeUpEnabled')} />
                   <Toggle field={form.$('isDarkModeEnabled')} />
                   {form.$('isDarkModeEnabled').value && (
                     <>
diff --git a/src/components/settings/services/ServiceError.js b/src/components/settings/services/ServiceError.js
index d16d76db2..6dd53a102 100644
--- a/src/components/settings/services/ServiceError.js
+++ b/src/components/settings/services/ServiceError.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { observer } from 'mobx-react';
 import { Link } from 'react-router';
 import { defineMessages, injectIntl } from 'react-intl';
diff --git a/src/components/settings/services/ServiceItem.js b/src/components/settings/services/ServiceItem.js
index 4916e4ecc..e08b9af1f 100644
--- a/src/components/settings/services/ServiceItem.js
+++ b/src/components/settings/services/ServiceItem.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { defineMessages, injectIntl } from 'react-intl';
 import ReactTooltip from 'react-tooltip';
diff --git a/src/components/settings/services/ServicesDashboard.js b/src/components/settings/services/ServicesDashboard.js
index bb52db97f..aae6eb855 100644
--- a/src/components/settings/services/ServicesDashboard.js
+++ b/src/components/settings/services/ServicesDashboard.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 import { Link } from 'react-router';
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index 123ab4c2d..948e9ccd5 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -1,5 +1,5 @@
 import { systemPreferences } from '@electron/remote';
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import prettyBytes from 'pretty-bytes';
@@ -12,13 +12,17 @@ import ToggleRaw from '../../ui/ToggleRaw';
 import Select from '../../ui/Select';
 import Input from '../../ui/Input';
 
-import { DEFAULT_APP_SETTINGS, FRANZ_TRANSLATION, GITHUB_FRANZ_URL } from '../../../config';
 import {
-  isMac,
-  isWindows,
-  lockFerdiShortcutKey,
-} from '../../../environment';
-import { ferdiVersion, userDataPath, userDataRecipesPath } from '../../../environment-remote';
+  DEFAULT_APP_SETTINGS,
+  FRANZ_TRANSLATION,
+  GITHUB_FRANZ_URL,
+} from '../../../config';
+import { isMac, isWindows, lockFerdiShortcutKey } from '../../../environment';
+import {
+  ferdiVersion,
+  userDataPath,
+  userDataRecipesPath,
+} from '../../../environment-remote';
 import { openPath } from '../../../helpers/url-helpers';
 import globalMessages from '../../../i18n/globalMessages';
 
@@ -550,6 +554,7 @@ class EditSettingsForm extends Component {
 
                 <Hr />
                 <Select field={form.$('iconSize')} />
+                <Toggle field={form.$('enableLongPressServiceHint')} />
 
                 <Hr />
 
@@ -673,6 +678,7 @@ class EditSettingsForm extends Component {
             {this.state.activeSetttingsTab === 'advanced' && (
               <div>
                 <Toggle field={form.$('enableGPUAcceleration')} />
+                <Toggle field={form.$('enableGlobalHideShortcut')} />
                 <p className="settings__help indented__help">
                   {intl.formatMessage(messages.appRestartRequired)}
                 </p>
diff --git a/src/components/settings/supportFerdi/SupportFerdiDashboard.js b/src/components/settings/supportFerdi/SupportFerdiDashboard.js
deleted file mode 100644
index f24e4bd62..000000000
--- a/src/components/settings/supportFerdi/SupportFerdiDashboard.js
+++ /dev/null
@@ -1,234 +0,0 @@
-import React, { Component } from 'react';
-import { defineMessages, injectIntl } from 'react-intl';
-import { BrowserWindow } from '@electron/remote';
-import InfoBar from '../../ui/InfoBar';
-
-const messages = defineMessages({
-  headline: {
-    id: 'settings.supportFerdi.headline',
-    defaultMessage: 'About Ferdi',
-  },
-  title: {
-    id: 'settings.supportFerdi.title',
-    defaultMessage: 'Do you like Ferdi?',
-  },
-  aboutIntro: {
-    id: 'settings.supportFerdi.aboutIntro',
-    defaultMessage:
-      '<p>Ferdi is an open-source and a community-lead application.</p><p>Thanks to the people who make this possbile:</p>',
-  },
-  textListContributors: {
-    id: 'settings.supportFerdi.textListContributors',
-    defaultMessage: 'Full list of contributors',
-  },
-  textListContributorsHere: {
-    id: 'settings.supportFerdi.textListContributorsHere',
-    defaultMessage: 'here',
-  },
-  textVolunteers: {
-    id: 'settings.supportFerdi.textVolunteers',
-    defaultMessage:
-      'The development of Ferdi is done by volunteers. People who use Ferdi like you. They maintain, fix, and improve Ferdi in their spare time.',
-  },
-  textSupportWelcome: {
-    id: 'settings.supportFerdi.textSupportWelcome',
-    defaultMessage:
-      'Support is always welcome. You can find a list of the help we need',
-  },
-  textSupportWelcomeHere: {
-    id: 'settings.supportFerdi.textSupportWelcomeHere',
-    defaultMessage: 'here',
-  },
-  textExpenses: {
-    id: 'settings.supportFerdi.textExpenses',
-    defaultMessage:
-      'While volunteers do most of the work, we still need to pay for servers and certificates. As a community, we are fully transparent on funds we collect and spend - see our',
-  },
-  textOpenCollective: {
-    id: 'settings.supportFerdi.textOpenCollective',
-    defaultMessage: 'Open Collective',
-  },
-  textDonation: {
-    id: 'settings.supportFerdi.textDonation',
-    defaultMessage:
-      'If you feel like supporting Ferdi development with a donation, you can do so on both,',
-  },
-  textDonationAnd: {
-    id: 'settings.supportFerdi.textDonationAnd',
-    defaultMessage: 'and',
-  },
-  textGitHubSponsors: {
-    id: 'settings.supportFerdi.textGitHubSponsors',
-    defaultMessage: 'GitHub Sponsors',
-  },
-  openSurvey: {
-    id: 'settings.supportFerdi.openSurvey',
-    defaultMessage: 'Open survey',
-  },
-  bannerText: {
-    id: 'settings.supportFerdi.bannerText',
-    defaultMessage: 'Do you want to help us improve Ferdi?',
-  },
-});
-
-class SupportFerdiDashboard extends Component {
-  openSurveyWindow() {
-    let win = new BrowserWindow({ width: 670, height: 400 });
-    win.on('closed', () => {
-      win = null;
-    });
-
-    win.loadURL('https://rp28.typeform.com/to/E3phJT');
-  }
-
-  render() {
-    const { intl } = this.props;
-
-    const aboutIntro = intl.formatMessage(messages.aboutIntro);
-
-    return (
-      <div className="settings__main">
-        <div className="settings__header">
-          <span className="settings__header-item">
-            {intl.formatMessage(messages.headline)}
-          </span>
-        </div>
-        <div className="settings__body">
-          <h1>{intl.formatMessage(messages.title)}</h1>
-          <div>
-            <p className="settings__support-badges">
-              <a
-                href="https://github.com/getferdi/ferdi"
-                target="_blank"
-                rel="noreferrer"
-              >
-                <img
-                  alt="GitHub Stars"
-                  src="https://img.shields.io/github/stars/getferdi/ferdi?style=social"
-                />
-              </a>
-              <a
-                href="https://twitter.com/getferdi/"
-                target="_blank"
-                rel="noreferrer"
-              >
-                <img
-                  alt="Twitter Follow"
-                  src="https://img.shields.io/twitter/follow/getferdi?label=Follow&style=social"
-                />
-              </a>
-              <a
-                href="https://opencollective.com/getferdi#section-contributors"
-                target="_blank"
-                rel="noreferrer"
-              >
-                <img
-                  alt="Open Collective backers"
-                  src="https://img.shields.io/opencollective/backers/getferdi?logo=open-collective"
-                />
-              </a>
-              <a
-                href="https://opencollective.com/getferdi#section-contributors"
-                target="_blank"
-                rel="noreferrer"
-              >
-                <img
-                  alt="Open Collective sponsors"
-                  src="https://img.shields.io/opencollective/sponsors/getferdi?logo=open-collective"
-                />
-              </a>
-            </p>
-            <span dangerouslySetInnerHTML={{ __html: aboutIntro }} />
-            <br />
-            <br />
-            <p>
-              <a href="#contributors-via-opencollective">
-                <img
-                  alt="GitHub contributors (non-exhaustive)"
-                  width="100%"
-                  src="https://opencollective.com/getferdi/contributors.svg?width=642&button=false"
-                />
-              </a>
-            </p>
-            <p>
-              {intl.formatMessage(messages.textListContributors)}
-              <a
-                href="https://github.com/getferdi/ferdi#contributors-"
-                target="_blank"
-                className="link"
-                rel="noreferrer"
-              >
-                {' '}
-                {intl.formatMessage(messages.textListContributorsHere)}
-                <i className="mdi mdi-open-in-new" />
-              </a>
-              <br />
-              <br />
-            </p>
-            <p>{intl.formatMessage(messages.textVolunteers)}</p>
-            <p>
-              {intl.formatMessage(messages.textSupportWelcome)}
-              <a
-                href="https://help.getferdi.com/general/support"
-                target="_blank"
-                className="link"
-                rel="noreferrer"
-              >
-                {' '}
-                {intl.formatMessage(messages.textSupportWelcomeHere)}
-                <i className="mdi mdi-open-in-new" />
-              </a>
-            </p>
-            <p>
-              {intl.formatMessage(messages.textExpenses)}
-              <a
-                href="https://opencollective.com/getferdi#section-budget"
-                target="_blank"
-                className="link"
-                rel="noreferrer"
-              >
-                {' '}
-                {intl.formatMessage(messages.textOpenCollective)}
-                <i className="mdi mdi-open-in-new" />
-              </a>
-            </p>
-            <p>
-              {intl.formatMessage(messages.textDonation)}
-              <a
-                href="https://opencollective.com/getferdi#section-contribute"
-                target="_blank"
-                className="link"
-                rel="noreferrer"
-              >
-                {' '}
-                {intl.formatMessage(messages.textOpenCollective)}
-                <i className="mdi mdi-open-in-new" />
-              </a>{' '}
-              {intl.formatMessage(messages.textDonationAnd)}
-              <a
-                href="https://github.com/sponsors/getferdi"
-                target="_blank"
-                className="link"
-                rel="noreferrer"
-              >
-                {' '}
-                {intl.formatMessage(messages.textGitHubSponsors)}
-                <i className="mdi mdi-open-in-new" />
-              </a>
-            </p>
-          </div>
-        </div>
-        <InfoBar
-          sticky
-          type="primary"
-          ctaLabel={intl.formatMessage(messages.openSurvey)}
-          onClick={this.openSurveyWindow}
-        >
-          {intl.formatMessage(messages.bannerText)}
-        </InfoBar>
-      </div>
-    );
-  }
-}
-
-export default injectIntl(SupportFerdiDashboard);
diff --git a/src/components/settings/supportFerdi/SupportFerdiDashboard.tsx b/src/components/settings/supportFerdi/SupportFerdiDashboard.tsx
new file mode 100644
index 000000000..505c49812
--- /dev/null
+++ b/src/components/settings/supportFerdi/SupportFerdiDashboard.tsx
@@ -0,0 +1,232 @@
+import { defineMessages, useIntl } from 'react-intl';
+import { BrowserWindow } from '@electron/remote';
+import InfoBar from '../../ui/InfoBar';
+
+const messages = defineMessages({
+  headline: {
+    id: 'settings.supportFerdi.headline',
+    defaultMessage: 'About Ferdi',
+  },
+  title: {
+    id: 'settings.supportFerdi.title',
+    defaultMessage: 'Do you like Ferdi?',
+  },
+  aboutIntro: {
+    id: 'settings.supportFerdi.aboutIntro',
+    defaultMessage:
+      '<p>Ferdi is an open-source and a community-lead application.</p><p>Thanks to the people who make this possbile:</p>',
+  },
+  textListContributors: {
+    id: 'settings.supportFerdi.textListContributors',
+    defaultMessage: 'Full list of contributors',
+  },
+  textListContributorsHere: {
+    id: 'settings.supportFerdi.textListContributorsHere',
+    defaultMessage: 'here',
+  },
+  textVolunteers: {
+    id: 'settings.supportFerdi.textVolunteers',
+    defaultMessage:
+      'The development of Ferdi is done by volunteers. People who use Ferdi like you. They maintain, fix, and improve Ferdi in their spare time.',
+  },
+  textSupportWelcome: {
+    id: 'settings.supportFerdi.textSupportWelcome',
+    defaultMessage:
+      'Support is always welcome. You can find a list of the help we need',
+  },
+  textSupportWelcomeHere: {
+    id: 'settings.supportFerdi.textSupportWelcomeHere',
+    defaultMessage: 'here',
+  },
+  textExpenses: {
+    id: 'settings.supportFerdi.textExpenses',
+    defaultMessage:
+      'While volunteers do most of the work, we still need to pay for servers and certificates. As a community, we are fully transparent on funds we collect and spend - see our',
+  },
+  textOpenCollective: {
+    id: 'settings.supportFerdi.textOpenCollective',
+    defaultMessage: 'Open Collective',
+  },
+  textDonation: {
+    id: 'settings.supportFerdi.textDonation',
+    defaultMessage:
+      'If you feel like supporting Ferdi development with a donation, you can do so on both,',
+  },
+  textDonationAnd: {
+    id: 'settings.supportFerdi.textDonationAnd',
+    defaultMessage: 'and',
+  },
+  textGitHubSponsors: {
+    id: 'settings.supportFerdi.textGitHubSponsors',
+    defaultMessage: 'GitHub Sponsors',
+  },
+  openSurvey: {
+    id: 'settings.supportFerdi.openSurvey',
+    defaultMessage: 'Open survey',
+  },
+  bannerText: {
+    id: 'settings.supportFerdi.bannerText',
+    defaultMessage: 'Do you want to help us improve Ferdi?',
+  },
+});
+
+const openSurveyWindow = () => {
+  let win = new BrowserWindow({ width: 670, height: 400 });
+  win.on('closed', () => {
+    // @ts-expect-error Type 'null' is not assignable to type 'BrowserWindow'.
+    win = null;
+  });
+
+  win.loadURL('https://rp28.typeform.com/to/E3phJT');
+};
+
+const SupportFerdiDashboard = () => {
+  const intl = useIntl();
+
+  const aboutIntro = intl.formatMessage(messages.aboutIntro);
+
+  return (
+    <div className="settings__main">
+      <div className="settings__header">
+        <span className="settings__header-item">
+          {intl.formatMessage(messages.headline)}
+        </span>
+      </div>
+      <div className="settings__body">
+        <h1>{intl.formatMessage(messages.title)}</h1>
+        <div>
+          <p className="settings__support-badges">
+            <a
+              href="https://github.com/getferdi/ferdi"
+              target="_blank"
+              rel="noreferrer"
+            >
+              <img
+                alt="GitHub Stars"
+                src="https://img.shields.io/github/stars/getferdi/ferdi?style=social"
+              />
+            </a>
+            <a
+              href="https://twitter.com/getferdi/"
+              target="_blank"
+              rel="noreferrer"
+            >
+              <img
+                alt="Twitter Follow"
+                src="https://img.shields.io/twitter/follow/getferdi?label=Follow&style=social"
+              />
+            </a>
+            <a
+              href="https://opencollective.com/getferdi#section-contributors"
+              target="_blank"
+              rel="noreferrer"
+            >
+              <img
+                alt="Open Collective backers"
+                src="https://img.shields.io/opencollective/backers/getferdi?logo=open-collective"
+              />
+            </a>
+            <a
+              href="https://opencollective.com/getferdi#section-contributors"
+              target="_blank"
+              rel="noreferrer"
+            >
+              <img
+                alt="Open Collective sponsors"
+                src="https://img.shields.io/opencollective/sponsors/getferdi?logo=open-collective"
+              />
+            </a>
+          </p>
+          <span dangerouslySetInnerHTML={{ __html: aboutIntro }} />
+          <br />
+          <br />
+          <p>
+            <a href="#contributors-via-opencollective">
+              <img
+                alt="GitHub contributors (non-exhaustive)"
+                width="100%"
+                src="https://opencollective.com/getferdi/contributors.svg?width=642&button=false"
+              />
+            </a>
+          </p>
+          <p>
+            {intl.formatMessage(messages.textListContributors)}
+            <a
+              href="https://github.com/getferdi/ferdi#contributors-"
+              target="_blank"
+              className="link"
+              rel="noreferrer"
+            >
+              {' '}
+              {intl.formatMessage(messages.textListContributorsHere)}
+              <i className="mdi mdi-open-in-new" />
+            </a>
+            <br />
+            <br />
+          </p>
+          <p>{intl.formatMessage(messages.textVolunteers)}</p>
+          <p>
+            {intl.formatMessage(messages.textSupportWelcome)}
+            <a
+              href="https://help.getferdi.com/general/support"
+              target="_blank"
+              className="link"
+              rel="noreferrer"
+            >
+              {' '}
+              {intl.formatMessage(messages.textSupportWelcomeHere)}
+              <i className="mdi mdi-open-in-new" />
+            </a>
+          </p>
+          <p>
+            {intl.formatMessage(messages.textExpenses)}
+            <a
+              href="https://opencollective.com/getferdi#section-budget"
+              target="_blank"
+              className="link"
+              rel="noreferrer"
+            >
+              {' '}
+              {intl.formatMessage(messages.textOpenCollective)}
+              <i className="mdi mdi-open-in-new" />
+            </a>
+          </p>
+          <p>
+            {intl.formatMessage(messages.textDonation)}
+            <a
+              href="https://opencollective.com/getferdi#section-contribute"
+              target="_blank"
+              className="link"
+              rel="noreferrer"
+            >
+              {' '}
+              {intl.formatMessage(messages.textOpenCollective)}
+              <i className="mdi mdi-open-in-new" />
+            </a>{' '}
+            {intl.formatMessage(messages.textDonationAnd)}
+            <a
+              href="https://github.com/sponsors/getferdi"
+              target="_blank"
+              className="link"
+              rel="noreferrer"
+            >
+              {' '}
+              {intl.formatMessage(messages.textGitHubSponsors)}
+              <i className="mdi mdi-open-in-new" />
+            </a>
+          </p>
+        </div>
+      </div>
+      <InfoBar
+        sticky
+        type="primary"
+        ctaLabel={intl.formatMessage(messages.openSurvey)}
+        onClick={openSurveyWindow}
+      >
+        {intl.formatMessage(messages.bannerText)}
+      </InfoBar>
+    </div>
+  );
+};
+
+export default SupportFerdiDashboard;
diff --git a/src/components/settings/team/TeamDashboard.js b/src/components/settings/team/TeamDashboard.js
index 06f244997..4a1a02571 100644
--- a/src/components/settings/team/TeamDashboard.js
+++ b/src/components/settings/team/TeamDashboard.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
diff --git a/src/components/settings/user/EditUserForm.js b/src/components/settings/user/EditUserForm.js
index adc107ccc..1b8a4f25a 100644
--- a/src/components/settings/user/EditUserForm.js
+++ b/src/components/settings/user/EditUserForm.js
@@ -1,12 +1,11 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
 import { Link } from 'react-router';
-import { Input } from '@meetfranz/forms';
 
+import { Input } from '../../ui/input/index';
 import Form from '../../../lib/Form';
-// import Input from '../../ui/Input';
 import Button from '../../ui/Button';
 import Radio from '../../ui/Radio';
 import Infobox from '../../ui/Infobox';
diff --git a/src/components/ui/AppLoader/index.js b/src/components/ui/AppLoader/index.tsx
index fa4a719ab..c7c290a57 100644
--- a/src/components/ui/AppLoader/index.js
+++ b/src/components/ui/AppLoader/index.tsx
@@ -1,5 +1,4 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import { Component } from 'react';
 import injectSheet, { withTheme } from 'react-jss';
 import classnames from 'classnames';
 
@@ -19,15 +18,15 @@ const textList = shuffleArray([
   'Fixing bugs',
 ]);
 
+type Props = {
+  classes: typeof styles;
+  theme: any;
+  texts: string[];
+};
+
 @injectSheet(styles)
 @withTheme
-class AppLoader extends Component {
-  static propTypes = {
-    classes: PropTypes.object.isRequired,
-    theme: PropTypes.object.isRequired,
-    texts: PropTypes.array,
-  };
-
+class AppLoader extends Component<Props> {
   static defaultProps = {
     texts: textList,
   };
@@ -36,18 +35,20 @@ class AppLoader extends Component {
     step: 0,
   };
 
-  interval = null;
+  interval: NodeJS.Timeout | null = null;
 
   componentDidMount() {
     this.interval = setInterval(() => {
-      this.setState(prevState => ({
+      this.setState((prevState: { step: number }) => ({
         step: prevState.step === textList.length - 1 ? 0 : prevState.step + 1,
       }));
     }, 2500);
   }
 
   componentWillUnmount() {
-    clearInterval(this.interval);
+    if (this.interval) {
+      clearInterval(this.interval);
+    }
   }
 
   render() {
diff --git a/src/components/ui/AppLoader/styles.js b/src/components/ui/AppLoader/styles.ts
index 9891e0387..9891e0387 100644
--- a/src/components/ui/AppLoader/styles.js
+++ b/src/components/ui/AppLoader/styles.ts
diff --git a/src/components/ui/Button.js b/src/components/ui/Button.js
deleted file mode 100644
index f6c9fd3d3..000000000
--- a/src/components/ui/Button.js
+++ /dev/null
@@ -1,95 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { observer, inject } from 'mobx-react';
-import Loader from 'react-loader';
-import classnames from 'classnames';
-
-@inject('stores')
-@observer
-class Button extends Component {
-  static propTypes = {
-    className: PropTypes.string,
-    label: PropTypes.string.isRequired,
-    disabled: PropTypes.bool,
-    onClick: PropTypes.func,
-    type: PropTypes.string,
-    buttonType: PropTypes.string,
-    loaded: PropTypes.bool,
-    htmlForm: PropTypes.string,
-    stores: PropTypes.shape({
-      settings: PropTypes.shape({
-        app: PropTypes.shape({
-          accentColor: PropTypes.string.isRequired,
-        }).isRequired,
-      }).isRequired,
-    }).isRequired,
-  };
-
-  static defaultProps = {
-    className: null,
-    disabled: false,
-    onClick: () => {},
-    type: 'button',
-    buttonType: '',
-    loaded: true,
-    htmlForm: '',
-  };
-
-  element = null;
-
-  render() {
-    const {
-      label,
-      className,
-      disabled,
-      onClick,
-      type,
-      buttonType,
-      loaded,
-      htmlForm,
-    } = this.props;
-
-    const buttonProps = {
-      className: classnames({
-        'franz-form__button': true,
-        [`franz-form__button--${buttonType}`]: buttonType,
-        [`${className}`]: className,
-      }),
-      type,
-    };
-
-    if (disabled) {
-      buttonProps.disabled = true;
-    }
-
-    if (onClick) {
-      buttonProps.onClick = onClick;
-    }
-
-    if (htmlForm) {
-      buttonProps.form = htmlForm;
-    }
-
-    return (
-      // disabling rule as button has type defined in `buttonProps`
-      /* eslint-disable react/button-has-type */
-      <button {...buttonProps}>
-        <Loader
-          loaded={loaded}
-          lines={10}
-          scale={0.4}
-          color={
-            buttonType !== 'secondary'
-              ? '#FFF'
-              : this.props.stores.settings.app.accentColor
-          }
-          component="span"
-        />
-        {label}
-      </button>
-      /* eslint-enable react/button-has-type */
-    );
-  }
-}
-
-export default Button;
diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
new file mode 100644
index 000000000..aac080fda
--- /dev/null
+++ b/src/components/ui/Button.tsx
@@ -0,0 +1,73 @@
+import { Component } from 'react';
+import { observer, inject } from 'mobx-react';
+import Loader from 'react-loader';
+import classnames from 'classnames';
+import { FerdiStores } from '../../stores.types';
+
+type Props = {
+  className: string;
+  label: string;
+  disabled: boolean;
+  onClick: () => void;
+  type: 'button' | 'submit' | 'reset';
+  buttonType: string;
+  loaded: boolean;
+  htmlForm: string;
+  stores: FerdiStores;
+};
+
+@inject('stores')
+@observer
+class Button extends Component<Props> {
+  static defaultProps = {
+    className: null,
+    disabled: false,
+    onClick: () => {},
+    type: 'button',
+    buttonType: '',
+    loaded: true,
+    htmlForm: '',
+  };
+
+  render() {
+    const {
+      label,
+      className,
+      disabled,
+      onClick,
+      type,
+      buttonType,
+      loaded,
+      htmlForm,
+    } = this.props;
+
+    return (
+      <button
+        className={classnames({
+          'franz-form__button': true,
+          [`franz-form__button--${buttonType}`]: buttonType,
+          [`${className}`]: className,
+        })}
+        disabled={disabled}
+        type={type}
+        onClick={onClick}
+        form={htmlForm}
+      >
+        <Loader
+          loaded={loaded}
+          lines={10}
+          scale={0.4}
+          color={
+            buttonType !== 'secondary'
+              ? '#FFF'
+              : this.props.stores.settings.app.accentColor
+          }
+          component="span"
+        />
+        {label}
+      </button>
+    );
+  }
+}
+
+export default Button;
diff --git a/src/components/ui/FAB.js b/src/components/ui/FAB.js
deleted file mode 100644
index a3aa06bc9..000000000
--- a/src/components/ui/FAB.js
+++ /dev/null
@@ -1,65 +0,0 @@
-/**
- * Floating Action Button (FAB)
- */
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { observer } from 'mobx-react';
-import classnames from 'classnames';
-
-import { oneOrManyChildElements } from '../../prop-types';
-
-@observer
-class Button extends Component {
-  static propTypes = {
-    className: PropTypes.string,
-    disabled: PropTypes.bool,
-    onClick: PropTypes.func,
-    type: PropTypes.string,
-    children: oneOrManyChildElements.isRequired,
-    htmlForm: PropTypes.string,
-  };
-
-  static defaultProps = {
-    className: null,
-    disabled: false,
-    onClick: () => {},
-    type: 'button',
-    htmlForm: '',
-  };
-
-  element = null;
-
-  render() {
-    const { className, disabled, onClick, type, children, htmlForm } =
-      this.props;
-
-    const buttonProps = {
-      className: classnames({
-        ferdi__fab: true,
-        [`${className}`]: className,
-      }),
-      type,
-    };
-
-    if (disabled) {
-      buttonProps.disabled = true;
-    }
-
-    if (onClick) {
-      buttonProps.onClick = onClick;
-    }
-
-    if (htmlForm) {
-      buttonProps.form = htmlForm;
-    }
-
-    return (
-      // disabling rule as button has type defined in `buttonProps`
-      <button {...buttonProps} type="button">
-        {children}
-      </button>
-    );
-  }
-}
-
-export default Button;
diff --git a/src/components/ui/FAB.tsx b/src/components/ui/FAB.tsx
new file mode 100644
index 000000000..583c9d556
--- /dev/null
+++ b/src/components/ui/FAB.tsx
@@ -0,0 +1,51 @@
+/**
+ * Floating Action Button (FAB)
+ */
+import { Component, ReactChildren } from 'react';
+import { observer } from 'mobx-react';
+import classnames from 'classnames';
+
+type Props = {
+  className: string;
+  disabled: boolean;
+  onClick: () => void;
+  type: string;
+  children: ReactChildren;
+  htmlForm: string;
+};
+
+@observer
+class Button extends Component<Props> {
+  static defaultProps = {
+    disabled: false,
+    onClick: () => {},
+    type: 'button',
+    htmlForm: '',
+  };
+
+  element = null;
+
+  render() {
+    const { className, disabled, onClick, type, children, htmlForm } =
+      this.props;
+
+    const buttonProps = {
+      className: classnames({
+        ferdi__fab: true,
+        [`${className}`]: className,
+      }),
+      type,
+      disabled,
+      onClick,
+      form: htmlForm,
+    };
+
+    return (
+      <button {...buttonProps} type="button">
+        {children}
+      </button>
+    );
+  }
+}
+
+export default Button;
diff --git a/src/components/ui/FullscreenLoader/index.js b/src/components/ui/FullscreenLoader/index.js
index ab5e2f365..f5943f3f3 100644
--- a/src/components/ui/FullscreenLoader/index.js
+++ b/src/components/ui/FullscreenLoader/index.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import injectSheet, { withTheme } from 'react-jss';
diff --git a/src/components/ui/FullscreenLoader/styles.js b/src/components/ui/FullscreenLoader/styles.ts
index 64d24e4ce..64d24e4ce 100644
--- a/src/components/ui/FullscreenLoader/styles.js
+++ b/src/components/ui/FullscreenLoader/styles.ts
diff --git a/src/components/ui/ImageUpload.js b/src/components/ui/ImageUpload.tsx
index 49aff389b..4b25be502 100644
--- a/src/components/ui/ImageUpload.js
+++ b/src/components/ui/ImageUpload.tsx
@@ -1,23 +1,21 @@
-import React, { Component, Fragment } from 'react';
-import PropTypes from 'prop-types';
+import { Component } from 'react';
 import { observer } from 'mobx-react';
 import { Field } from 'mobx-react-form';
 import classnames from 'classnames';
-import Dropzone from 'react-dropzone';
+import Dropzone, { DropzoneRef } from 'react-dropzone';
 import { isWindows } from '../../environment';
 
-@observer
-class ImageUpload extends Component {
-  static propTypes = {
-    field: PropTypes.instanceOf(Field).isRequired,
-    className: PropTypes.string,
-    multiple: PropTypes.bool,
-    textDelete: PropTypes.string.isRequired,
-    textUpload: PropTypes.string.isRequired,
-  };
+type Props = {
+  field: typeof Field;
+  className: string;
+  multiple: boolean;
+  textDelete: string;
+  textUpload: string;
+};
 
+@observer
+class ImageUpload extends Component<Props> {
   static defaultProps = {
-    className: null,
     multiple: false,
   };
 
@@ -25,7 +23,7 @@ class ImageUpload extends Component {
     path: null,
   };
 
-  dropzoneRef = null;
+  dropzoneRef: DropzoneRef | null = null;
 
   onDrop(acceptedFiles) {
     const { field } = this.props;
diff --git a/src/components/ui/InfoBar.js b/src/components/ui/InfoBar.js
index dc6be10da..3311a949f 100644
--- a/src/components/ui/InfoBar.js
+++ b/src/components/ui/InfoBar.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
diff --git a/src/components/ui/Infobox.js b/src/components/ui/Infobox.js
index 9e34bf110..b88b01bd8 100644
--- a/src/components/ui/Infobox.js
+++ b/src/components/ui/Infobox.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
diff --git a/src/components/ui/Input.js b/src/components/ui/Input.js
index 43fab10ee..8d37d7a05 100644
--- a/src/components/ui/Input.js
+++ b/src/components/ui/Input.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { Field } from 'mobx-react-form';
diff --git a/src/components/ui/Link.js b/src/components/ui/Link.js
index 94db3f842..40766c984 100644
--- a/src/components/ui/Link.js
+++ b/src/components/ui/Link.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 import { RouterStore } from 'mobx-react-router';
diff --git a/src/components/ui/Loader.js b/src/components/ui/Loader.tsx
index 46c1390bf..1173c11e7 100644
--- a/src/components/ui/Loader.js
+++ b/src/components/ui/Loader.tsx
@@ -1,31 +1,22 @@
-import React, { Component } from 'react';
+import { Component, ReactChildren } from 'react';
 import { observer, inject } from 'mobx-react';
-import PropTypes from 'prop-types';
 import Loader from 'react-loader';
 
-import { oneOrManyChildElements } from '../../prop-types';
+import { FerdiStores } from '../../stores.types';
+
+type Props = {
+  children: ReactChildren;
+  loaded: boolean;
+  className: string;
+  color: string;
+  stores: FerdiStores;
+};
 
 @inject('stores')
 @observer
-class LoaderComponent extends Component {
-  static propTypes = {
-    children: oneOrManyChildElements,
-    loaded: PropTypes.bool,
-    className: PropTypes.string,
-    color: PropTypes.string,
-    stores: PropTypes.shape({
-      settings: PropTypes.shape({
-        app: PropTypes.shape({
-          accentColor: PropTypes.string.isRequired,
-        }).isRequired,
-      }).isRequired,
-    }).isRequired,
-  };
-
+class LoaderComponent extends Component<Props> {
   static defaultProps = {
-    children: null,
     loaded: false,
-    className: '',
     color: 'ACCENT',
   };
 
@@ -40,7 +31,6 @@ class LoaderComponent extends Component {
     return (
       <Loader
         loaded={loaded}
-        // lines={10}
         width={4}
         scale={0.6}
         color={color}
diff --git a/src/components/ui/Modal/index.js b/src/components/ui/Modal/index.tsx
index 3c7c66c59..f2f4461b8 100644
--- a/src/components/ui/Modal/index.js
+++ b/src/components/ui/Modal/index.tsx
@@ -1,28 +1,25 @@
-import React, { Component } from 'react';
+import { Component, ReactChildren } from 'react';
 import ReactModal from 'react-modal';
-import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import injectCSS from 'react-jss';
-import { Icon } from '@meetfranz/ui';
-
 import { mdiClose } from '@mdi/js';
+
+import { Icon } from '../icon';
 import styles from './styles';
 
-// ReactModal.setAppElement('#root');
+type Props = {
+  children: ReactChildren;
+  className: string;
+  classes: any;
+  isOpen: boolean;
+  portal: string;
+  close: () => void;
+  shouldCloseOnOverlayClick: boolean;
+  showClose: boolean;
+};
 
 @injectCSS(styles)
-class Modal extends Component {
-  static propTypes = {
-    children: PropTypes.node.isRequired,
-    className: PropTypes.string,
-    classes: PropTypes.object.isRequired,
-    isOpen: PropTypes.bool.isRequired,
-    portal: PropTypes.string,
-    close: PropTypes.func.isRequired,
-    shouldCloseOnOverlayClick: PropTypes.bool,
-    showClose: PropTypes.bool,
-  };
-
+class Modal extends Component<Props> {
   static defaultProps = {
     className: null,
     portal: 'modal-portal',
diff --git a/src/components/ui/Modal/styles.js b/src/components/ui/Modal/styles.ts
index f32c075ce..c2bebf9bb 100644
--- a/src/components/ui/Modal/styles.js
+++ b/src/components/ui/Modal/styles.ts
@@ -1,4 +1,4 @@
-export default (theme) => ({
+export default theme => ({
   component: {
     zIndex: 500,
     position: 'absolute',
diff --git a/src/components/ui/Radio.js b/src/components/ui/Radio.tsx
index 65a777ff1..594ea70e4 100644
--- a/src/components/ui/Radio.js
+++ b/src/components/ui/Radio.tsx
@@ -1,20 +1,18 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import { Component } from 'react';
 import { observer } from 'mobx-react';
 import { Field } from 'mobx-react-form';
 import classnames from 'classnames';
 
-@observer
-class Radio extends Component {
-  static propTypes = {
-    field: PropTypes.instanceOf(Field).isRequired,
-    className: PropTypes.string,
-    focus: PropTypes.bool,
-    showLabel: PropTypes.bool,
-  };
+type Props = {
+  field: typeof Field;
+  className: string;
+  focus: boolean;
+  showLabel: boolean;
+};
 
+@observer
+class Radio extends Component<Props> {
   static defaultProps = {
-    className: null,
     focus: false,
     showLabel: true,
   };
@@ -28,6 +26,7 @@ class Radio extends Component {
   }
 
   focus() {
+    // @ts-expect-error Object is possibly 'null'.
     this.inputElement.focus();
   }
 
diff --git a/src/components/ui/SearchInput.js b/src/components/ui/SearchInput.tsx
index 2d760beab..af55b0e11 100644
--- a/src/components/ui/SearchInput.js
+++ b/src/components/ui/SearchInput.tsx
@@ -1,23 +1,22 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import { ChangeEvent, Component } from 'react';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
 import { debounce } from 'lodash';
 
-@observer
-class SearchInput extends Component {
-  static propTypes = {
-    value: PropTypes.string,
-    placeholder: PropTypes.string,
-    className: PropTypes.string,
-    onChange: PropTypes.func,
-    onReset: PropTypes.func,
-    name: PropTypes.string,
-    throttle: PropTypes.bool,
-    throttleDelay: PropTypes.number,
-    autoFocus: PropTypes.bool,
-  };
+type Props = {
+  value: string;
+  placeholder: string;
+  className: string;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  onReset: () => void;
+  name: string;
+  throttle: boolean;
+  throttleDelay: number;
+  autoFocus: boolean;
+};
 
+@observer
+class SearchInput extends Component<Props> {
   static defaultProps = {
     value: '',
     placeholder: '',
@@ -32,7 +31,7 @@ class SearchInput extends Component {
 
   input = null;
 
-  constructor(props) {
+  constructor(props: Props) {
     super(props);
 
     this.state = {
@@ -49,24 +48,27 @@ class SearchInput extends Component {
     const { autoFocus } = this.props;
 
     if (autoFocus) {
+      // @ts-expect-error Object is possibly 'null'.
       this.input.focus();
     }
   }
 
-  onChange(e) {
+  onChange(e: ChangeEvent<HTMLInputElement>) {
     const { throttle, onChange } = this.props;
     const { value } = e.target;
     this.setState({ value });
 
     if (throttle) {
       e.persist();
+      // @ts-expect-error Argument of type 'string' is not assignable to parameter of type 'ChangeEvent<HTMLInputElement>'.
       this.throttledOnChange(value);
     } else {
+      // @ts-expect-error Argument of type 'string' is not assignable to parameter of type 'ChangeEvent<HTMLInputElement>'.
       onChange(value);
     }
   }
 
-  throttledOnChange(e) {
+  throttledOnChange(e: ChangeEvent<HTMLInputElement>) {
     const { onChange } = this.props;
 
     onChange(e);
@@ -81,6 +83,7 @@ class SearchInput extends Component {
 
   render() {
     const { className, name, placeholder } = this.props;
+    // @ts-expect-error Property 'value' does not exist on type 'Readonly<{}>'.
     const { value } = this.state;
 
     return (
@@ -94,6 +97,7 @@ class SearchInput extends Component {
             value={value}
             onChange={e => this.onChange(e)}
             ref={ref => {
+              // @ts-expect-error Type 'HTMLInputElement | null' is not assignable to type 'null'.
               this.input = ref;
             }}
           />
diff --git a/src/components/ui/Select.js b/src/components/ui/Select.js
index 5ac7ddd6d..a560da332 100644
--- a/src/components/ui/Select.js
+++ b/src/components/ui/Select.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { createRef, Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { Field } from 'mobx-react-form';
@@ -24,7 +24,7 @@ class Select extends Component {
   constructor(props) {
     super(props);
 
-    this.element = React.createRef();
+    this.element = createRef();
   }
 
   multipleChange() {
diff --git a/src/components/ui/ServiceIcon.js b/src/components/ui/ServiceIcon.js
index b2dadeac3..f067f8955 100644
--- a/src/components/ui/ServiceIcon.js
+++ b/src/components/ui/ServiceIcon.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import injectSheet from 'react-jss';
@@ -6,7 +6,7 @@ import classnames from 'classnames';
 
 import ServiceModel from '../../models/Service';
 
-const styles = (theme) => ({
+const styles = theme => ({
   root: {
     height: 'auto',
   },
@@ -24,7 +24,8 @@ const styles = (theme) => ({
   },
 });
 
-@injectSheet(styles) @observer
+@injectSheet(styles)
+@observer
 class ServiceIcon extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
@@ -37,19 +38,10 @@ class ServiceIcon extends Component {
   };
 
   render() {
-    const {
-      classes,
-      className,
-      service,
-    } = this.props;
+    const { classes, className, service } = this.props;
 
     return (
-      <div
-        className={classnames([
-          classes.root,
-          className,
-        ])}
-      >
+      <div className={classnames([classes.root, className])}>
         <img
           src={service.icon}
           className={classnames([
diff --git a/src/components/ui/Slider.js b/src/components/ui/Slider.js
index 6f17eae00..dea6e0563 100644
--- a/src/components/ui/Slider.js
+++ b/src/components/ui/Slider.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
diff --git a/src/components/ui/StatusBarTargetUrl.js b/src/components/ui/StatusBarTargetUrl.js
index ff4e8c795..38b436742 100644
--- a/src/components/ui/StatusBarTargetUrl.js
+++ b/src/components/ui/StatusBarTargetUrl.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
diff --git a/src/components/ui/Tabs/TabItem.tsx b/src/components/ui/Tabs/TabItem.tsx
index bd613ddc7..9fcc3c41e 100644
--- a/src/components/ui/Tabs/TabItem.tsx
+++ b/src/components/ui/Tabs/TabItem.tsx
@@ -1,3 +1 @@
-import React from 'react';
-
 export const TabItem = ({ children }) => <>{children}</>;
diff --git a/src/components/ui/Tabs/Tabs.js b/src/components/ui/Tabs/Tabs.js
index 195398708..77803974b 100644
--- a/src/components/ui/Tabs/Tabs.js
+++ b/src/components/ui/Tabs/Tabs.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Children, Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
@@ -36,7 +36,7 @@ class Tab extends Component {
     return (
       <div className="content-tabs">
         <div className="content-tabs__tabs">
-          {React.Children.map(children, (child, i) => (
+          {Children.map(children, (child, i) => (
             <button
               key="{i}"
               className={classnames({
@@ -51,7 +51,7 @@ class Tab extends Component {
           ))}
         </div>
         <div className="content-tabs__content">
-          {React.Children.map(children, (child, i) => (
+          {Children.map(children, (child, i) => (
             <div
               key="{i}"
               className={classnames({
diff --git a/src/components/ui/Toggle.js b/src/components/ui/Toggle.js
index bd7bc242d..dfc319735 100644
--- a/src/components/ui/Toggle.js
+++ b/src/components/ui/Toggle.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
diff --git a/src/components/ui/ToggleRaw.js b/src/components/ui/ToggleRaw.js
index 1fde879ac..74292a870 100644
--- a/src/components/ui/ToggleRaw.js
+++ b/src/components/ui/ToggleRaw.js
@@ -1,7 +1,7 @@
 /**
  * "Raw" Toggle - for usage without a MobX Form element
  */
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
diff --git a/src/components/ui/WebviewLoader/index.js b/src/components/ui/WebviewLoader/index.js
index 8f4499e7b..8d4513172 100644
--- a/src/components/ui/WebviewLoader/index.js
+++ b/src/components/ui/WebviewLoader/index.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import injectSheet from 'react-jss';
diff --git a/src/components/ui/WebviewLoader/styles.js b/src/components/ui/WebviewLoader/styles.ts
index 5d58011fe..dbd75db8a 100644
--- a/src/components/ui/WebviewLoader/styles.js
+++ b/src/components/ui/WebviewLoader/styles.ts
@@ -1,4 +1,4 @@
-export default (theme) => ({
+export default theme => ({
   component: {
     background: theme.colorWebviewLoaderBackground,
     padding: 20,
diff --git a/src/components/ui/badge/ProBadge.tsx b/src/components/ui/badge/ProBadge.tsx
new file mode 100644
index 000000000..dc1e76f7f
--- /dev/null
+++ b/src/components/ui/badge/ProBadge.tsx
@@ -0,0 +1,64 @@
+import { mdiStar } from '@mdi/js';
+import classnames from 'classnames';
+import { Component } from 'react';
+import injectStyle from 'react-jss';
+
+import { Theme } from '../../../themes';
+import { Icon } from '../icon';
+import { Badge } from './index';
+import { IWithStyle } from '../typings/generic';
+
+interface IProps extends IWithStyle {
+  badgeClasses?: string;
+  iconClasses?: string;
+  inverted?: boolean;
+  className?: string;
+}
+
+const styles = (theme: Theme) => ({
+  badge: {
+    height: 'auto',
+    padding: [4, 6, 2, 7],
+    borderRadius: theme.borderRadiusSmall,
+  },
+  invertedBadge: {
+    background: theme.styleTypes.primary.contrast,
+    color: theme.styleTypes.primary.accent,
+  },
+  icon: {
+    fill: theme.styleTypes.primary.contrast,
+  },
+  invertedIcon: {
+    fill: theme.styleTypes.primary.accent,
+  },
+});
+
+class ProBadgeComponent extends Component<IProps> {
+  render() {
+    const { classes, badgeClasses, iconClasses, inverted, className } =
+      this.props;
+
+    return (
+      <Badge
+        type="primary"
+        className={classnames([
+          classes.badge,
+          inverted && classes.invertedBadge,
+          badgeClasses,
+          className,
+        ])}
+      >
+        <Icon
+          icon={mdiStar}
+          className={classnames([
+            classes.icon,
+            inverted && classes.invertedIcon,
+            iconClasses,
+          ])}
+        />
+      </Badge>
+    );
+  }
+}
+
+export const ProBadge = injectStyle(styles)(ProBadgeComponent);
diff --git a/src/components/ui/badge/index.tsx b/src/components/ui/badge/index.tsx
new file mode 100644
index 000000000..61bede937
--- /dev/null
+++ b/src/components/ui/badge/index.tsx
@@ -0,0 +1,71 @@
+import classnames from 'classnames';
+import { Component, ReactNode } from 'react';
+import injectStyle from 'react-jss';
+
+import { Theme } from '../../../themes';
+import { IWithStyle } from '../typings/generic';
+
+interface IProps extends IWithStyle {
+  type: string;
+  className?: string;
+  children: ReactNode;
+}
+
+const badgeStyles = (theme: Theme) => {
+  const styles = {};
+  Object.keys(theme.styleTypes).map(style => {
+    Object.assign(styles, {
+      [style]: {
+        background: theme.styleTypes[style].accent,
+        color: theme.styleTypes[style].contrast,
+        border: theme.styleTypes[style].border,
+      },
+    });
+  });
+
+  return styles;
+};
+
+const styles = (theme: Theme) => ({
+  badge: {
+    display: 'inline-block',
+    padding: [3, 8, 4],
+    fontSize: theme.badgeFontSize,
+    borderRadius: theme.badgeBorderRadius,
+    margin: [0, 4],
+
+    '&:first-child': {
+      marginLeft: 0,
+    },
+
+    '&:last-child': {
+      marginRight: 0,
+    },
+  },
+  ...badgeStyles(theme),
+});
+
+class BadgeComponent extends Component<IProps> {
+  public static defaultProps = {
+    type: 'primary',
+  };
+
+  render() {
+    const { classes, children, type, className } = this.props;
+
+    return (
+      <div
+        className={classnames({
+          [classes.badge]: true,
+          [classes[type]]: true,
+          [`${className}`]: className,
+        })}
+        data-type="franz-badge"
+      >
+        {children}
+      </div>
+    );
+  }
+}
+
+export const Badge = injectStyle(styles)(BadgeComponent);
diff --git a/src/components/ui/button/index.tsx b/src/components/ui/button/index.tsx
new file mode 100644
index 000000000..12e5e4449
--- /dev/null
+++ b/src/components/ui/button/index.tsx
@@ -0,0 +1,265 @@
+import Icon from '@mdi/react';
+import classnames from 'classnames';
+import { Property } from 'csstype';
+import { Component, MouseEvent } from 'react';
+import injectStyle, { withTheme } from 'react-jss';
+import Loader from 'react-loader';
+
+import { Theme } from '../../../themes';
+import { IFormField, IWithStyle } from '../typings/generic';
+
+type ButtonType =
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'danger'
+  | 'warning'
+  | 'inverted';
+
+interface IProps extends IFormField, IWithStyle {
+  className?: string;
+  disabled?: boolean;
+  id?: string;
+  type?: 'button' | 'reset' | 'submit' | undefined;
+  onClick: (
+    event: MouseEvent<HTMLButtonElement> | MouseEvent<HTMLAnchorElement>,
+  ) => void;
+  buttonType?: ButtonType;
+  stretch?: boolean;
+  loaded?: boolean;
+  busy?: boolean;
+  icon?: string;
+  href?: string;
+  target?: string;
+}
+
+let buttonTransition: string = 'none';
+let loaderContainerTransition: string = 'none';
+
+if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) {
+  buttonTransition = 'background .5s, opacity 0.3s';
+  loaderContainerTransition = 'all 0.3s';
+}
+
+const styles = (theme: Theme) => ({
+  button: {
+    borderRadius: theme.borderRadiusSmall,
+    border: 'none',
+    display: 'inline-flex',
+    position: 'relative' as Property.Position,
+    transition: buttonTransition,
+    textAlign: 'center' as Property.TextAlign,
+    outline: 'none',
+    alignItems: 'center',
+    padding: 0,
+    width: (props: IProps) =>
+      (props.stretch ? '100%' : 'auto') as Property.Width<string>,
+    fontSize: theme.uiFontSize,
+    textDecoration: 'none',
+
+    '&:hover': {
+      opacity: 0.8,
+    },
+    '&:active': {
+      opacity: 0.5,
+      transition: 'none',
+    },
+  },
+  label: {
+    margin: '10px 20px',
+    width: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  primary: {
+    background: theme.buttonPrimaryBackground,
+    color: theme.buttonPrimaryTextColor,
+
+    '& svg': {
+      fill: theme.buttonPrimaryTextColor,
+    },
+  },
+  secondary: {
+    background: theme.buttonSecondaryBackground,
+    color: theme.buttonSecondaryTextColor,
+
+    '& svg': {
+      fill: theme.buttonSecondaryTextColor,
+    },
+  },
+  success: {
+    background: theme.buttonSuccessBackground,
+    color: theme.buttonSuccessTextColor,
+
+    '& svg': {
+      fill: theme.buttonSuccessTextColor,
+    },
+  },
+  danger: {
+    background: theme.buttonDangerBackground,
+    color: theme.buttonDangerTextColor,
+
+    '& svg': {
+      fill: theme.buttonDangerTextColor,
+    },
+  },
+  warning: {
+    background: theme.buttonWarningBackground,
+    color: theme.buttonWarningTextColor,
+
+    '& svg': {
+      fill: theme.buttonWarningTextColor,
+    },
+  },
+  inverted: {
+    background: theme.buttonInvertedBackground,
+    color: theme.buttonInvertedTextColor,
+    border: theme.buttonInvertedBorder,
+
+    '& svg': {
+      fill: theme.buttonInvertedTextColor,
+    },
+  },
+  disabled: {
+    opacity: theme.inputDisabledOpacity,
+  },
+  loader: {
+    position: 'relative' as Property.Position,
+    width: 20,
+    height: 18,
+    zIndex: 9999,
+  },
+  loaderContainer: {
+    width: (props: IProps): string => (!props.busy ? '0' : '40px'),
+    height: 20,
+    overflow: 'hidden',
+    transition: loaderContainerTransition,
+    marginLeft: (props: IProps): number => (!props.busy ? 10 : 20),
+    marginRight: (props: IProps): number => (!props.busy ? -10 : -20),
+    position: (props: IProps): Property.Position =>
+      props.stretch ? 'absolute' : 'inherit',
+  },
+  icon: {
+    margin: [1, 10, 0, -5],
+  },
+});
+
+class ButtonComponent extends Component<IProps> {
+  public static defaultProps = {
+    type: 'button',
+    disabled: false,
+    onClick: () => null,
+    buttonType: 'primary' as ButtonType,
+    stretch: false,
+    busy: false,
+  };
+
+  state = {
+    busy: false,
+  };
+
+  componentWillMount() {
+    this.setState({ busy: this.props.busy });
+  }
+
+  componentWillReceiveProps(nextProps: IProps) {
+    if (nextProps.busy !== this.props.busy) {
+      if (this.props.busy) {
+        setTimeout(() => {
+          this.setState({ busy: nextProps.busy });
+        }, 300);
+      } else {
+        this.setState({ busy: nextProps.busy });
+      }
+    }
+  }
+
+  render() {
+    const {
+      classes,
+      className,
+      theme,
+      disabled,
+      id,
+      label,
+      type,
+      onClick,
+      buttonType,
+      loaded,
+      icon,
+      href,
+      target,
+    } = this.props;
+
+    const { busy } = this.state;
+
+    let showLoader = false;
+    if (loaded) {
+      showLoader = !loaded;
+      console.warn(
+        'Ferdi Button prop `loaded` will be deprecated in the future. Please use `busy` instead',
+      );
+    }
+    if (busy) {
+      showLoader = busy;
+    }
+
+    const content = (
+      <>
+        <div className={classes.loaderContainer}>
+          {showLoader && (
+            <Loader
+              loaded={false}
+              width={4}
+              scale={0.45}
+              color={theme.buttonLoaderColor[buttonType!]}
+              parentClassName={classes.loader}
+            />
+          )}
+        </div>
+        <div className={classes.label}>
+          {icon && <Icon path={icon} size={0.8} className={classes.icon} />}
+          {label}
+        </div>
+      </>
+    );
+
+    const wrapperComponent = !href ? (
+      <button
+        id={id}
+        type={type}
+        onClick={onClick}
+        className={classnames({
+          [`${classes.button}`]: true,
+          [`${classes[buttonType as ButtonType]}`]: true,
+          [`${classes.disabled}`]: disabled,
+          [`${className}`]: className,
+        })}
+        disabled={disabled}
+        data-type="franz-button"
+      >
+        {content}
+      </button>
+    ) : (
+      <a
+        href={href}
+        target={target}
+        onClick={onClick}
+        className={classnames({
+          [`${classes.button}`]: true,
+          [`${classes[buttonType as ButtonType]}`]: true,
+          [`${className}`]: className,
+        })}
+        rel={target === '_blank' ? 'noopener' : ''}
+        data-type="franz-button"
+      >
+        {content}
+      </a>
+    );
+
+    return wrapperComponent;
+  }
+}
+
+export const Button = injectStyle(styles)(withTheme(ButtonComponent));
diff --git a/src/components/ui/effects/Appear.js b/src/components/ui/effects/Appear.js
deleted file mode 100644
index 183181f8f..000000000
--- a/src/components/ui/effects/Appear.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
-
-export default class Appear extends Component {
-  static propTypes = {
-    // eslint-disable-next-line react/forbid-prop-types
-    children: PropTypes.any.isRequired,
-    transitionName: PropTypes.string,
-    className: PropTypes.string,
-  };
-
-  static defaultProps = {
-    transitionName: 'fadeIn',
-    className: '',
-  };
-
-  state = {
-    mounted: false,
-  };
-
-  componentDidMount() {
-    this.setState({ mounted: true });
-  }
-
-  render() {
-    const { children, transitionName, className } = this.props;
-
-    if (!this.state.mounted) {
-      return null;
-    }
-
-    return (
-      <ReactCSSTransitionGroup
-        transitionName={transitionName}
-        transitionAppear
-        transitionLeave
-        transitionAppearTimeout={1500}
-        transitionEnterTimeout={1500}
-        transitionLeaveTimeout={1500}
-        className={className}
-      >
-        {children}
-      </ReactCSSTransitionGroup>
-    );
-  }
-}
diff --git a/src/components/ui/effects/Appear.tsx b/src/components/ui/effects/Appear.tsx
new file mode 100644
index 000000000..117c02f97
--- /dev/null
+++ b/src/components/ui/effects/Appear.tsx
@@ -0,0 +1,39 @@
+import { ReactChildren, useEffect, useState } from 'react';
+import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
+
+type Props = {
+  children: ReactChildren;
+  transitionName: string;
+  className: string;
+};
+const Appear = ({
+  children,
+  transitionName = 'fadeIn',
+  className = '',
+}: Props) => {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return null;
+  }
+
+  return (
+    <ReactCSSTransitionGroup
+      transitionName={transitionName}
+      transitionAppear
+      transitionLeave
+      transitionAppearTimeout={1500}
+      transitionEnterTimeout={1500}
+      transitionLeaveTimeout={1500}
+      className={className}
+    >
+      {children}
+    </ReactCSSTransitionGroup>
+  );
+};
+
+export default Appear;
diff --git a/src/components/ui/error/index.tsx b/src/components/ui/error/index.tsx
new file mode 100644
index 000000000..8439bfc8b
--- /dev/null
+++ b/src/components/ui/error/index.tsx
@@ -0,0 +1,20 @@
+import { Classes } from 'jss';
+import { Component } from 'react';
+import injectSheet from 'react-jss';
+
+import styles from './styles';
+
+interface IProps {
+  classes: Classes;
+  message: string;
+}
+
+class ErrorComponent extends Component<IProps> {
+  render() {
+    const { classes, message } = this.props;
+
+    return <p className={classes.message}>{message}</p>;
+  }
+}
+
+export const Error = injectSheet(styles)(ErrorComponent);
diff --git a/src/components/ui/error/styles.ts b/src/components/ui/error/styles.ts
new file mode 100644
index 000000000..9da95705a
--- /dev/null
+++ b/src/components/ui/error/styles.ts
@@ -0,0 +1,9 @@
+import { Theme } from '../../../themes';
+
+export default (theme: Theme) => ({
+  message: {
+    color: theme.brandDanger,
+    margin: '5px 0 0',
+    fontSize: theme.uiFontSize,
+  },
+});
diff --git a/src/components/ui/headline/index.tsx b/src/components/ui/headline/index.tsx
new file mode 100644
index 000000000..ea2949102
--- /dev/null
+++ b/src/components/ui/headline/index.tsx
@@ -0,0 +1,70 @@
+import classnames from 'classnames';
+import { Component, createElement, ReactNode } from 'react';
+import injectStyle from 'react-jss';
+
+import { Theme } from '../../../themes';
+import { IWithStyle, Omit } from '../typings/generic';
+
+interface IProps extends IWithStyle {
+  level?: number;
+  className?: string;
+  children: string | ReactNode;
+  id?: string;
+}
+
+const styles = (theme: Theme) => ({
+  headline: {
+    fontWeight: 'lighter',
+    color: theme.colorText,
+    marginTop: 0,
+    marginBottom: 10,
+    textAlign: 'left',
+  },
+  h1: {
+    fontSize: 30,
+    marginTop: 0,
+  },
+  h2: {
+    fontSize: 20,
+  },
+  h3: {
+    fontSize: 18,
+  },
+  h4: {
+    fontSize: theme.uiFontSize,
+  },
+});
+
+class HeadlineComponent extends Component<IProps> {
+  render() {
+    const { classes, level, className, children, id } = this.props;
+
+    return createElement(
+      `h${level}`,
+      {
+        id,
+        className: classnames({
+          [classes.headline]: true,
+          [classes[level ? `h${level}` : 'h1']]: true,
+          [`${className}`]: className,
+        }),
+        'data-type': 'franz-headline',
+      },
+      children,
+    );
+  }
+}
+
+const Headline = injectStyle(styles)(HeadlineComponent);
+
+const createH = (level: number) => (props: Omit<IProps, 'classes' | 'theme'>) =>
+  (
+    <Headline level={level} {...props}>
+      {props.children}
+    </Headline>
+  );
+
+export const H1 = createH(1);
+export const H2 = createH(2);
+export const H3 = createH(3);
+export const H4 = createH(4);
diff --git a/src/components/ui/icon/index.tsx b/src/components/ui/icon/index.tsx
new file mode 100644
index 000000000..85bb61d13
--- /dev/null
+++ b/src/components/ui/icon/index.tsx
@@ -0,0 +1,46 @@
+import MdiIcon from '@mdi/react';
+import classnames from 'classnames';
+import { Component } from 'react';
+import injectStyle from 'react-jss';
+
+import { Theme } from '../../../themes';
+import { IWithStyle } from '../typings/generic';
+
+interface IProps extends IWithStyle {
+  icon: string;
+  size?: number;
+  className?: string;
+}
+
+const styles = (theme: Theme) => ({
+  icon: {
+    fill: theme.colorText,
+  },
+});
+
+class IconComponent extends Component<IProps> {
+  public static defaultProps = {
+    size: 1,
+  };
+
+  render() {
+    const { classes, icon, size, className } = this.props;
+
+    if (!icon) {
+      console.warn('No Icon specified');
+    }
+
+    return (
+      <MdiIcon
+        path={icon}
+        size={size}
+        className={classnames({
+          [classes.icon]: true,
+          [`${className}`]: className,
+        })}
+      />
+    );
+  }
+}
+
+export const Icon = injectStyle(styles)(IconComponent);
diff --git a/src/components/ui/infobox/index.tsx b/src/components/ui/infobox/index.tsx
new file mode 100644
index 000000000..87940c4d4
--- /dev/null
+++ b/src/components/ui/infobox/index.tsx
@@ -0,0 +1,205 @@
+import { mdiClose } from '@mdi/js';
+import classnames from 'classnames';
+import { Component, ReactNode } from 'react';
+import injectStyle from 'react-jss';
+
+import { Theme } from '../../../themes';
+import { Icon } from '../icon';
+import { IWithStyle } from '../typings/generic';
+
+interface IProps extends IWithStyle {
+  icon?: string;
+  type?: string;
+  dismissable?: boolean;
+  onDismiss?: () => void;
+  onUnmount?: () => void;
+  ctaOnClick?: () => void;
+  ctaLabel?: string;
+  ctaLoading?: boolean;
+  children: ReactNode;
+  className: string;
+}
+
+interface IState {
+  isDismissing: boolean;
+  dismissed: boolean;
+}
+
+const buttonStyles = (theme: Theme) => {
+  const styles = {};
+  Object.keys(theme.styleTypes).map(style => {
+    Object.assign(styles, {
+      [style]: {
+        background: theme.styleTypes[style].accent,
+        color: theme.styleTypes[style].contrast,
+        border: theme.styleTypes[style].border,
+
+        '& svg': {
+          fill: theme.styleTypes[style].contrast,
+        },
+      },
+    });
+  });
+
+  return styles;
+};
+
+const infoBoxTransition: string = 'none';
+const ctaTransition: string = 'none';
+
+// TODO: Not sure why, but this location alone, the `dinwo` is not defined - and it throws an error thus aborting the startup sequence of ferdi
+// if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) {
+//   infoBoxTransition = 'all 0.5s';
+//   ctaTransition = 'opacity 0.3s';
+// }
+
+const styles = (theme: Theme) => ({
+  wrapper: {
+    position: 'relative',
+    overflow: 'hidden',
+    height: 'auto',
+    marginBottom: 30,
+  },
+  infobox: {
+    alignItems: 'center',
+    borderRadius: theme.borderRadiusSmall,
+    display: 'flex',
+    height: 'auto',
+    padding: '15px 20px',
+    top: 0,
+    transition: infoBoxTransition,
+    opacity: 1,
+  },
+  dismissing: {
+    // position: 'absolute',
+    marginTop: -100,
+    opacity: 0,
+  },
+  content: {
+    flex: 1,
+  },
+  icon: {
+    marginRight: 10,
+  },
+  close: {
+    color: (props: IProps) =>
+      theme.styleTypes[props.type ? props.type : 'primary'].contrast,
+    marginRight: -5,
+    border: 0,
+    background: 'none',
+  },
+  cta: {
+    borderColor: (props: IProps) =>
+      theme.styleTypes[props.type ? props.type : 'primary'].contrast,
+    borderRadius: theme.borderRadiusSmall,
+    borderStyle: 'solid',
+    borderWidth: 1,
+    background: 'none',
+    color: (props: IProps) =>
+      theme.styleTypes[props.type ? props.type : 'primary'].contrast,
+    marginLeft: 15,
+    padding: [4, 10],
+    fontSize: theme.uiFontSize,
+    transition: ctaTransition,
+
+    '&:hover': {
+      opacity: 0.6,
+    },
+  },
+  ...buttonStyles(theme),
+});
+
+class InfoboxComponent extends Component<IProps, IState> {
+  public static defaultProps = {
+    type: 'primary',
+    dismissable: false,
+    ctaOnClick: () => {},
+    onDismiss: () => {},
+    ctaLabel: '',
+    ctaLoading: false,
+  };
+
+  state = {
+    isDismissing: false,
+    dismissed: false,
+  };
+
+  dismiss() {
+    const { onDismiss } = this.props;
+
+    this.setState({
+      isDismissing: true,
+    });
+
+    if (onDismiss) {
+      onDismiss();
+    }
+
+    setTimeout(() => {
+      this.setState({
+        dismissed: true,
+      });
+    }, 3000);
+  }
+
+  componentWillUnmount(): void {
+    const { onUnmount } = this.props;
+    if (onUnmount) onUnmount();
+  }
+
+  render() {
+    const {
+      classes,
+      children,
+      icon,
+      type,
+      ctaLabel,
+      ctaOnClick,
+      dismissable,
+      className,
+    } = this.props;
+
+    const { isDismissing, dismissed } = this.state;
+
+    if (dismissed) {
+      return null;
+    }
+
+    return (
+      <div
+        className={classnames({
+          [classes.wrapper]: true,
+          [`${className}`]: className,
+        })}
+      >
+        <div
+          className={classnames({
+            [classes.infobox]: true,
+            [classes[`${type}`]]: type,
+            [classes.dismissing]: isDismissing,
+          })}
+          data-type="franz-infobox"
+        >
+          {icon && <Icon icon={icon} className={classes.icon} />}
+          <div className={classes.content}>{children}</div>
+          {ctaLabel && (
+            <button className={classes.cta} onClick={ctaOnClick} type="button">
+              {ctaLabel}
+            </button>
+          )}
+          {dismissable && (
+            <button
+              type="button"
+              onClick={this.dismiss.bind(this)}
+              className={classes.close}
+            >
+              <Icon icon={mdiClose} />
+            </button>
+          )}
+        </div>
+      </div>
+    );
+  }
+}
+
+export const Infobox = injectStyle(styles)(InfoboxComponent);
diff --git a/src/components/ui/input/index.tsx b/src/components/ui/input/index.tsx
new file mode 100644
index 000000000..0b16fe688
--- /dev/null
+++ b/src/components/ui/input/index.tsx
@@ -0,0 +1,208 @@
+import { mdiEye, mdiEyeOff } from '@mdi/js';
+import Icon from '@mdi/react';
+import classnames from 'classnames';
+import { Component, createRef, InputHTMLAttributes } from 'react';
+import injectSheet from 'react-jss';
+
+import { IFormField, IWithStyle } from '../typings/generic';
+
+import { Error } from '../error';
+import { Label } from '../label';
+import { Wrapper } from '../wrapper';
+import { scorePasswordFunc } from './scorePassword';
+
+import styles from './styles';
+
+interface IData {
+  [index: string]: string;
+}
+
+interface IProps
+  extends InputHTMLAttributes<HTMLInputElement>,
+    IFormField,
+    IWithStyle {
+  focus?: boolean;
+  prefix?: string;
+  suffix?: string;
+  scorePassword?: boolean;
+  showPasswordToggle?: boolean;
+  data: IData;
+  inputClassName?: string;
+  onEnterKey?: Function;
+}
+
+interface IState {
+  showPassword: boolean;
+  passwordScore: number;
+}
+
+class InputComponent extends Component<IProps, IState> {
+  static defaultProps = {
+    focus: false,
+    onChange: () => {},
+    onBlur: () => {},
+    onFocus: () => {},
+    scorePassword: false,
+    showLabel: true,
+    showPasswordToggle: false,
+    type: 'text',
+    disabled: false,
+  };
+
+  state = {
+    passwordScore: 0,
+    showPassword: false,
+  };
+
+  private inputRef = createRef<HTMLInputElement>();
+
+  componentDidMount() {
+    const { focus, data } = this.props;
+
+    if (this.inputRef && this.inputRef.current) {
+      if (focus) {
+        this.inputRef.current.focus();
+      }
+
+      if (data) {
+        Object.keys(data).map(
+          key => (this.inputRef.current!.dataset[key] = data[key]),
+        );
+      }
+    }
+  }
+
+  onChange(e: React.ChangeEvent<HTMLInputElement>) {
+    const { scorePassword, onChange } = this.props;
+
+    if (onChange) {
+      onChange(e);
+    }
+
+    if (this.inputRef && this.inputRef.current && scorePassword) {
+      this.setState({
+        passwordScore: scorePasswordFunc(this.inputRef.current.value),
+      });
+    }
+  }
+
+  onInputKeyPress(e: React.KeyboardEvent) {
+    if (e.key === 'Enter') {
+      const { onEnterKey } = this.props;
+      onEnterKey && onEnterKey();
+    }
+  }
+
+  render() {
+    const {
+      classes,
+      className,
+      disabled,
+      error,
+      id,
+      inputClassName,
+      label,
+      prefix,
+      scorePassword,
+      suffix,
+      showLabel,
+      showPasswordToggle,
+      type,
+      value,
+      name,
+      placeholder,
+      spellCheck,
+      onBlur,
+      onFocus,
+      min,
+      max,
+      step,
+      required,
+      noMargin,
+    } = this.props;
+
+    const { showPassword, passwordScore } = this.state;
+
+    const inputType = type === 'password' && showPassword ? 'text' : type;
+
+    return (
+      <Wrapper
+        className={className}
+        identifier="franz-input"
+        noMargin={noMargin}
+      >
+        <Label
+          title={label}
+          showLabel={showLabel}
+          htmlFor={id}
+          className={classes.label}
+          isRequired={required}
+        >
+          <div
+            className={classnames({
+              [`${inputClassName}`]: inputClassName,
+              [`${classes.hasPasswordScore}`]: scorePassword,
+              [`${classes.wrapper}`]: true,
+              [`${classes.disabled}`]: disabled,
+              [`${classes.hasError}`]: error,
+            })}
+          >
+            {prefix && <span className={classes.prefix}>{prefix}</span>}
+            <input
+              id={id}
+              type={inputType}
+              name={name}
+              value={value as string}
+              placeholder={placeholder}
+              spellCheck={spellCheck}
+              className={classes.input}
+              ref={this.inputRef}
+              onChange={this.onChange.bind(this)}
+              onFocus={onFocus}
+              onBlur={onBlur}
+              disabled={disabled}
+              onKeyPress={this.onInputKeyPress.bind(this)}
+              min={min}
+              max={max}
+              step={step}
+            />
+            {suffix && <span className={classes.suffix}>{suffix}</span>}
+            {showPasswordToggle && (
+              <button
+                type="button"
+                className={classes.formModifier}
+                onClick={() =>
+                  this.setState(prevState => ({
+                    showPassword: !prevState.showPassword,
+                  }))
+                }
+                tabIndex={-1}
+              >
+                <Icon path={!showPassword ? mdiEye : mdiEyeOff} size={1} />
+              </button>
+            )}
+          </div>
+          {scorePassword && (
+            <div
+              className={classnames({
+                [`${classes.passwordScore}`]: true,
+                [`${classes.hasError}`]: error,
+              })}
+            >
+              <meter
+                value={passwordScore < 5 ? 5 : passwordScore}
+                low={30}
+                high={75}
+                optimum={100}
+                max={100}
+              />
+            </div>
+          )}
+        </Label>
+        {error && <Error message={error} />}
+      </Wrapper>
+    );
+  }
+}
+
+export const Input = injectSheet(styles)(InputComponent);
diff --git a/src/components/ui/input/scorePassword.ts b/src/components/ui/input/scorePassword.ts
new file mode 100644
index 000000000..59502e2b0
--- /dev/null
+++ b/src/components/ui/input/scorePassword.ts
@@ -0,0 +1,42 @@
+interface ILetters {
+  [key: string]: number;
+}
+
+interface IVariations {
+  [index: string]: boolean;
+  digits: boolean;
+  lower: boolean;
+  nonWords: boolean;
+  upper: boolean;
+}
+
+export function scorePasswordFunc(password: string): number {
+  let score = 0;
+  if (!password) {
+    return score;
+  }
+
+  // award every unique letter until 5 repetitions
+  const letters: ILetters = {};
+  for (const element of password) {
+    letters[element] = (letters[element] || 0) + 1;
+    score += 5 / letters[element];
+  }
+
+  // bonus points for mixing it up
+  const variations: IVariations = {
+    digits: /\d/.test(password),
+    lower: /[a-z]/.test(password),
+    nonWords: /\W/.test(password),
+    upper: /[A-Z]/.test(password),
+  };
+
+  let variationCount = 0;
+  for (const key of Object.keys(variations)) {
+    variationCount += variations[key] === true ? 1 : 0;
+  }
+
+  score += (variationCount - 1) * 10;
+
+  return Math.round(score);
+}
diff --git a/src/components/ui/input/styles.ts b/src/components/ui/input/styles.ts
new file mode 100644
index 000000000..04c1b3991
--- /dev/null
+++ b/src/components/ui/input/styles.ts
@@ -0,0 +1,102 @@
+import { Property } from 'csstype';
+
+import { Theme } from '../../../themes';
+
+const prefixStyles = (theme: Theme) => ({
+  background: theme.inputPrefixBackground,
+  color: theme.inputPrefixColor,
+  lineHeight: `${theme.inputHeight}px`,
+  padding: '0 10px',
+  fontSize: theme.uiFontSize,
+});
+
+export default (theme: Theme) => ({
+  label: {
+    '& > div': {
+      marginTop: 5,
+    },
+  },
+  disabled: {
+    opacity: theme.inputDisabledOpacity,
+  },
+  formModifier: {
+    background: 'none',
+    border: 0,
+    borderLeft: theme.inputBorder,
+    padding: '4px 20px 0',
+    outline: 'none',
+
+    '&:active': {
+      opacity: 0.5,
+    },
+
+    '& svg': {
+      fill: theme.inputModifierColor,
+    },
+  },
+  input: {
+    background: 'none',
+    border: 0,
+    fontSize: theme.uiFontSize,
+    outline: 'none',
+    padding: 8,
+    width: '100%',
+    color: theme.inputColor,
+
+    '&::placeholder': {
+      color: theme.inputPlaceholderColor,
+    },
+  },
+  passwordScore: {
+    background: theme.inputScorePasswordBackground,
+    border: theme.inputBorder,
+    borderTopWidth: 0,
+    borderBottomLeftRadius: theme.borderRadiusSmall,
+    borderBottomRightRadius: theme.borderRadiusSmall,
+    display: 'block',
+    flexBasis: '100%',
+    height: 5,
+    overflow: 'hidden',
+
+    '& meter': {
+      display: 'block',
+      height: '100%',
+      width: '100%',
+
+      '&::-webkit-meter-bar': {
+        background: 'none',
+      },
+
+      '&::-webkit-meter-even-less-good-value': {
+        background: theme.brandDanger,
+      },
+
+      '&::-webkit-meter-suboptimum-value': {
+        background: theme.brandWarning,
+      },
+
+      '&::-webkit-meter-optimum-value': {
+        background: theme.brandSuccess,
+      },
+    },
+  },
+  prefix: prefixStyles(theme),
+  suffix: prefixStyles(theme),
+  wrapper: {
+    background: theme.inputBackground,
+    border: theme.inputBorder,
+    borderRadius: theme.borderRadiusSmall,
+    boxSizing: 'border-box' as Property.BoxSizing,
+    display: 'flex',
+    height: theme.inputHeight,
+    order: 1,
+    width: '100%',
+  },
+  hasPasswordScore: {
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+  },
+  hasError: {
+    borderColor: theme.brandDanger,
+  },
+});
diff --git a/src/components/ui/label/index.tsx b/src/components/ui/label/index.tsx
new file mode 100644
index 000000000..4d86f23f7
--- /dev/null
+++ b/src/components/ui/label/index.tsx
@@ -0,0 +1,52 @@
+import classnames from 'classnames';
+import { Classes } from 'jss';
+import { Component, LabelHTMLAttributes } from 'react';
+import injectSheet from 'react-jss';
+
+import { IFormField } from '../typings/generic';
+
+import styles from './styles';
+
+interface ILabel extends IFormField, LabelHTMLAttributes<HTMLLabelElement> {
+  classes: Classes;
+  isRequired: boolean;
+}
+
+class LabelComponent extends Component<ILabel> {
+  static defaultProps = {
+    showLabel: true,
+  };
+
+  render() {
+    const {
+      title,
+      showLabel,
+      classes,
+      className,
+      children,
+      htmlFor,
+      isRequired,
+    } = this.props;
+
+    if (!showLabel) return children;
+
+    return (
+      <label
+        className={classnames({
+          [`${className}`]: className,
+        })}
+        htmlFor={htmlFor}
+      >
+        {showLabel && (
+          <span className={classes.label}>
+            {title}
+            {isRequired && ' *'}
+          </span>
+        )}
+        <div className={classes.content}>{children}</div>
+      </label>
+    );
+  }
+}
+
+export const Label = injectSheet(styles)(LabelComponent);
diff --git a/src/components/ui/label/styles.ts b/src/components/ui/label/styles.ts
new file mode 100644
index 000000000..faa44ae5b
--- /dev/null
+++ b/src/components/ui/label/styles.ts
@@ -0,0 +1,12 @@
+import { Theme } from '../../../themes';
+
+export default (theme: Theme) => ({
+  content: {},
+  label: {
+    color: theme.labelColor,
+    fontSize: theme.uiFontSize,
+  },
+  hasError: {
+    color: theme.brandDanger,
+  },
+});
diff --git a/src/components/ui/loader/index.tsx b/src/components/ui/loader/index.tsx
new file mode 100644
index 000000000..0607bd48b
--- /dev/null
+++ b/src/components/ui/loader/index.tsx
@@ -0,0 +1,44 @@
+import classnames from 'classnames';
+import { Component } from 'react';
+import injectStyle, { withTheme } from 'react-jss';
+import ReactLoader from 'react-loader';
+
+import { IWithStyle } from '../typings/generic';
+
+interface IProps extends IWithStyle {
+  className?: string;
+  color?: string;
+}
+
+const styles = () => ({
+  container: {
+    position: 'relative',
+    height: 60,
+  },
+});
+
+class LoaderComponent extends Component<IProps> {
+  render() {
+    const { classes, className, color, theme } = this.props;
+
+    return (
+      <div
+        className={classnames({
+          [classes.container]: true,
+          [`${className}`]: className,
+        })}
+        data-type="franz-loader"
+      >
+        <ReactLoader
+          loaded={false}
+          width={4}
+          scale={0.75}
+          color={color || theme.colorText}
+          parentClassName={classes.loader}
+        />
+      </div>
+    );
+  }
+}
+
+export const Loader = injectStyle(styles)(withTheme(LoaderComponent));
diff --git a/src/components/ui/select/index.tsx b/src/components/ui/select/index.tsx
new file mode 100644
index 000000000..2605503a3
--- /dev/null
+++ b/src/components/ui/select/index.tsx
@@ -0,0 +1,460 @@
+import {
+  mdiArrowRightDropCircleOutline,
+  mdiCloseCircle,
+  mdiMagnify,
+} from '@mdi/js';
+import Icon from '@mdi/react';
+import classnames from 'classnames';
+import { ChangeEvent, Component, createRef } from 'react';
+import injectStyle from 'react-jss';
+
+import { Theme } from '../../../themes';
+import { IFormField, IWithStyle } from '../typings/generic';
+
+import { Error } from '../error';
+import { Label } from '../label';
+import { Wrapper } from '../wrapper';
+
+interface IOptions {
+  [index: string]: string;
+}
+
+interface IData {
+  [index: string]: string;
+}
+
+interface IProps extends IFormField, IWithStyle {
+  actionText: string;
+  className?: string;
+  inputClassName?: string;
+  defaultValue?: string;
+  disabled?: boolean;
+  id?: string;
+  name: string;
+  options: IOptions;
+  value: string;
+  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+  showSearch: boolean;
+  data: IData;
+}
+
+interface IState {
+  open: boolean;
+  value: string;
+  needle: string;
+  selected: number;
+  options: IOptions;
+}
+
+let popupTransition: string = 'none';
+let toggleTransition: string = 'none';
+
+if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) {
+  popupTransition = 'all 0.3s';
+  toggleTransition = 'transform 0.3s';
+}
+
+const styles = (theme: Theme) => ({
+  select: {
+    background: theme.selectBackground,
+    border: theme.selectBorder,
+    borderRadius: theme.borderRadiusSmall,
+    height: theme.selectHeight,
+    fontSize: theme.uiFontSize,
+    width: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    textAlign: 'left',
+    color: theme.selectColor,
+  },
+  label: {
+    '& > div': {
+      marginTop: 5,
+    },
+  },
+  popup: {
+    opacity: 0,
+    height: 0,
+    overflowX: 'scroll',
+    border: theme.selectBorder,
+    borderTop: 0,
+    transition: popupTransition,
+  },
+  open: {
+    opacity: 1,
+    height: 350,
+    background: theme.selectPopupBackground,
+  },
+  option: {
+    padding: 10,
+    borderBottom: theme.selectOptionBorder,
+    color: theme.selectOptionColor,
+
+    '&:hover': {
+      background: theme.selectOptionItemHover,
+      color: theme.selectOptionItemHoverColor,
+    },
+    '&:active': {
+      background: theme.selectOptionItemActive,
+      color: theme.selectOptionItemActiveColor,
+    },
+  },
+  selected: {
+    background: theme.selectOptionItemActive,
+    color: theme.selectOptionItemActiveColor,
+  },
+  toggle: {
+    marginLeft: 'auto',
+    fill: theme.selectToggleColor,
+    transition: toggleTransition,
+  },
+  toggleOpened: {
+    transform: 'rotateZ(90deg)',
+  },
+  searchContainer: {
+    display: 'flex',
+    background: theme.selectSearchBackground,
+    alignItems: 'center',
+    paddingLeft: 10,
+    color: theme.selectColor,
+
+    '& svg': {
+      fill: theme.selectSearchColor,
+    },
+  },
+  search: {
+    border: 0,
+    width: '100%',
+    fontSize: theme.uiFontSize,
+    background: 'none',
+    marginLeft: 10,
+    padding: [10, 0],
+    color: theme.selectSearchColor,
+  },
+  clearNeedle: {
+    background: 'none',
+    border: 0,
+  },
+  focused: {
+    fontWeight: 'bold',
+    background: theme.selectOptionItemHover,
+    color: theme.selectOptionItemHoverColor,
+  },
+  hasError: {
+    borderColor: theme.brandDanger,
+  },
+  disabled: {
+    opacity: theme.selectDisabledOpacity,
+  },
+});
+
+class SelectComponent extends Component<IProps> {
+  public static defaultProps = {
+    onChange: () => {},
+    showLabel: true,
+    disabled: false,
+    error: '',
+  };
+
+  state = {
+    open: false,
+    value: '',
+    needle: '',
+    selected: 0,
+    options: null,
+  };
+
+  private componentRef = createRef<HTMLDivElement>();
+
+  private inputRef = createRef<HTMLInputElement>();
+
+  private searchInputRef = createRef<HTMLInputElement>();
+
+  private scrollContainerRef = createRef<HTMLDivElement>();
+
+  private activeOptionRef = createRef<HTMLDivElement>();
+
+  private keyListener: any;
+
+  componentWillReceiveProps(nextProps: IProps) {
+    if (nextProps.value && nextProps.value !== this.props.value) {
+      this.setState({
+        value: nextProps.value,
+      });
+    }
+  }
+
+  componentDidUpdate() {
+    const { open } = this.state;
+
+    if (this.searchInputRef && this.searchInputRef.current && open) {
+      this.searchInputRef.current.focus();
+    }
+  }
+
+  componentDidMount() {
+    if (this.inputRef && this.inputRef.current) {
+      const { data } = this.props;
+
+      if (data) {
+        Object.keys(data).map(
+          key => (this.inputRef.current!.dataset[key] = data[key]),
+        );
+      }
+    }
+
+    window.addEventListener('keydown', this.arrowKeysHandler.bind(this), false);
+  }
+
+  componentWillMount() {
+    const { value } = this.props;
+
+    if (this.componentRef && this.componentRef.current) {
+      this.componentRef.current.removeEventListener(
+        'keydown',
+        this.keyListener,
+      );
+    }
+
+    if (value) {
+      this.setState({
+        value,
+      });
+    }
+
+    this.setFilter();
+  }
+
+  componentWillUnmount() {
+    // eslint-disable-next-line unicorn/no-invalid-remove-event-listener
+    window.removeEventListener('keydown', this.arrowKeysHandler.bind(this));
+  }
+
+  setFilter(needle = '') {
+    const { options } = this.props;
+
+    let filteredOptions = {};
+    if (needle) {
+      Object.keys(options).map(key => {
+        if (
+          key.toLocaleLowerCase().startsWith(needle.toLocaleLowerCase()) ||
+          options[key]
+            .toLocaleLowerCase()
+            .startsWith(needle.toLocaleLowerCase())
+        ) {
+          Object.assign(filteredOptions, {
+            [`${key}`]: options[key],
+          });
+        }
+      });
+    } else {
+      filteredOptions = options;
+    }
+
+    this.setState({
+      needle,
+      options: filteredOptions,
+      selected: 0,
+    });
+  }
+
+  select(key: string) {
+    this.setState(() => ({
+      value: key,
+      open: false,
+    }));
+
+    this.setFilter();
+
+    if (this.props.onChange) {
+      this.props.onChange(key as any);
+    }
+  }
+
+  arrowKeysHandler(e: KeyboardEvent) {
+    const { selected, open, options } = this.state;
+
+    if (!open) return;
+
+    if (e.keyCode === 38 || e.keyCode === 40) {
+      e.preventDefault();
+    }
+
+    if (this.componentRef && this.componentRef.current) {
+      if (e.keyCode === 38 && selected > 0) {
+        this.setState((state: IState) => ({
+          selected: state.selected - 1,
+        }));
+      } else if (
+        e.keyCode === 40 &&
+        selected < Object.keys(options!).length - 1
+      ) {
+        this.setState((state: IState) => ({
+          selected: state.selected + 1,
+        }));
+      } else if (e.keyCode === 13) {
+        this.select(Object.keys(options!)[selected]);
+      }
+
+      if (
+        this.activeOptionRef &&
+        this.activeOptionRef.current &&
+        this.scrollContainerRef &&
+        this.scrollContainerRef.current
+      ) {
+        const containerTopOffset = this.scrollContainerRef.current.offsetTop;
+        const optionTopOffset = this.activeOptionRef.current.offsetTop;
+
+        const topOffset = optionTopOffset - containerTopOffset;
+
+        this.scrollContainerRef.current.scrollTop = topOffset - 35;
+      }
+    }
+
+    switch (e.keyCode) {
+      case 37:
+      case 39:
+      case 38:
+      case 40: // Arrow keys
+      case 32:
+        break; // Space
+      default:
+        break; // do not block other keys
+    }
+  }
+
+  render() {
+    const {
+      actionText,
+      classes,
+      className,
+      defaultValue,
+      disabled,
+      error,
+      id,
+      inputClassName,
+      name,
+      label,
+      showLabel,
+      showSearch,
+      onChange,
+      required,
+    } = this.props;
+
+    const { open, needle, value, selected, options } = this.state;
+
+    let selection = '';
+    if (!value && defaultValue && options![defaultValue]) {
+      selection = options![defaultValue];
+    } else if (value && options![value]) {
+      selection = options![value];
+    } else {
+      selection = actionText;
+    }
+
+    return (
+      <Wrapper className={className} identifier="franz-select">
+        <Label
+          title={label}
+          showLabel={showLabel}
+          htmlFor={id}
+          className={classes.label}
+          isRequired={required}
+        >
+          <div
+            className={classnames({
+              [`${classes.hasError}`]: error,
+              [`${classes.disabled}`]: disabled,
+            })}
+            ref={this.componentRef}
+          >
+            <button
+              type="button"
+              className={classnames({
+                [`${inputClassName}`]: inputClassName,
+                [`${classes.select}`]: true,
+                [`${classes.hasError}`]: error,
+              })}
+              onClick={
+                !disabled
+                  ? () =>
+                      this.setState((state: IState) => ({
+                        open: !state.open,
+                      }))
+                  : () => {}
+              }
+            >
+              {selection}
+              <Icon
+                path={mdiArrowRightDropCircleOutline}
+                size={0.8}
+                className={classnames({
+                  [`${classes.toggle}`]: true,
+                  [`${classes.toggleOpened}`]: open,
+                })}
+              />
+            </button>
+            {showSearch && open && (
+              <div className={classes.searchContainer}>
+                <Icon path={mdiMagnify} size={0.8} />
+                <input
+                  type="text"
+                  value={needle}
+                  onChange={e => this.setFilter(e.currentTarget.value)}
+                  placeholder="Search"
+                  className={classes.search}
+                  ref={this.searchInputRef}
+                />
+                {needle && (
+                  <button
+                    type="button"
+                    className={classes.clearNeedle}
+                    onClick={() => this.setFilter()}
+                  >
+                    <Icon path={mdiCloseCircle} size={0.7} />
+                  </button>
+                )}
+              </div>
+            )}
+            <div
+              className={classnames({
+                [`${classes.popup}`]: true,
+                [`${classes.open}`]: open,
+              })}
+              ref={this.scrollContainerRef}
+            >
+              {Object.keys(options!).map((key, i) => (
+                <div
+                  key={key}
+                  onClick={() => this.select(key)}
+                  className={classnames({
+                    [`${classes.option}`]: true,
+                    [`${classes.selected}`]: options![key] === selection,
+                    [`${classes.focused}`]: selected === i,
+                  })}
+                  onMouseOver={() => this.setState({ selected: i })}
+                  ref={selected === i ? this.activeOptionRef : null}
+                >
+                  {options![key]}
+                </div>
+              ))}
+            </div>
+          </div>
+          <input
+            className={classes.input}
+            id={id}
+            name={name}
+            type="hidden"
+            defaultValue={value}
+            onChange={onChange}
+            disabled={disabled}
+            ref={this.inputRef}
+          />
+        </Label>
+        {error && <Error message={error} />}
+      </Wrapper>
+    );
+  }
+}
+
+export const Select = injectStyle(styles)(SelectComponent);
diff --git a/src/components/ui/textarea/index.tsx b/src/components/ui/textarea/index.tsx
new file mode 100644
index 000000000..1b16698eb
--- /dev/null
+++ b/src/components/ui/textarea/index.tsx
@@ -0,0 +1,126 @@
+import classnames from 'classnames';
+import { Component, createRef, TextareaHTMLAttributes } from 'react';
+import injectSheet from 'react-jss';
+
+import { IFormField, IWithStyle } from '../typings/generic';
+
+import { Error } from '../error';
+import { Label } from '../label';
+import { Wrapper } from '../wrapper';
+
+import styles from './styles';
+
+interface IData {
+  [index: string]: string;
+}
+
+interface IProps
+  extends TextareaHTMLAttributes<HTMLTextAreaElement>,
+    IFormField,
+    IWithStyle {
+  focus?: boolean;
+  data: IData;
+  textareaClassName?: string;
+}
+
+class TextareaComponent extends Component<IProps> {
+  static defaultProps = {
+    focus: false,
+    onChange: () => {},
+    onBlur: () => {},
+    onFocus: () => {},
+    showLabel: true,
+    disabled: false,
+    rows: 5,
+  };
+
+  private textareaRef = createRef<HTMLTextAreaElement>();
+
+  componentDidMount() {
+    const { data } = this.props;
+
+    if (this.textareaRef && this.textareaRef.current && data) {
+      Object.keys(data).map(
+        key => (this.textareaRef.current!.dataset[key] = data[key]),
+      );
+    }
+  }
+
+  onChange(e: React.ChangeEvent<HTMLTextAreaElement>) {
+    const { onChange } = this.props;
+
+    if (onChange) {
+      onChange(e);
+    }
+  }
+
+  render() {
+    const {
+      classes,
+      className,
+      disabled,
+      error,
+      id,
+      textareaClassName,
+      label,
+      showLabel,
+      value,
+      name,
+      placeholder,
+      spellCheck,
+      onBlur,
+      onFocus,
+      minLength,
+      maxLength,
+      required,
+      rows,
+      noMargin,
+    } = this.props;
+
+    return (
+      <Wrapper
+        className={className}
+        identifier="franz-textarea"
+        noMargin={noMargin}
+      >
+        <Label
+          title={label}
+          showLabel={showLabel}
+          htmlFor={id}
+          className={classes.label}
+          isRequired={required}
+        >
+          <div
+            className={classnames({
+              [`${textareaClassName}`]: textareaClassName,
+              [`${classes.wrapper}`]: true,
+              [`${classes.disabled}`]: disabled,
+              [`${classes.hasError}`]: error,
+            })}
+          >
+            <textarea
+              id={id}
+              name={name}
+              placeholder={placeholder}
+              spellCheck={spellCheck}
+              className={classes.textarea}
+              ref={this.textareaRef}
+              onChange={this.onChange.bind(this)}
+              onFocus={onFocus}
+              onBlur={onBlur}
+              disabled={disabled}
+              minLength={minLength}
+              maxLength={maxLength}
+              rows={rows}
+            >
+              {value}
+            </textarea>
+          </div>
+        </Label>
+        {error && <Error message={error} />}
+      </Wrapper>
+    );
+  }
+}
+
+export const Textarea = injectSheet(styles)(TextareaComponent);
diff --git a/src/components/ui/textarea/styles.ts b/src/components/ui/textarea/styles.ts
new file mode 100644
index 000000000..36fc2a82e
--- /dev/null
+++ b/src/components/ui/textarea/styles.ts
@@ -0,0 +1,54 @@
+import { Property } from 'csstype';
+
+import { Theme } from '../../../themes';
+
+export default (theme: Theme) => ({
+  label: {
+    '& > div': {
+      marginTop: 5,
+    },
+  },
+  disabled: {
+    opacity: theme.inputDisabledOpacity,
+  },
+  formModifier: {
+    background: 'none',
+    border: 0,
+    borderLeft: theme.inputBorder,
+    padding: '4px 20px 0',
+    outline: 'none',
+
+    '&:active': {
+      opacity: 0.5,
+    },
+
+    '& svg': {
+      fill: theme.inputModifierColor,
+    },
+  },
+  textarea: {
+    background: 'none',
+    border: 0,
+    fontSize: theme.uiFontSize,
+    outline: 'none',
+    padding: 8,
+    width: '100%',
+    color: theme.inputColor,
+
+    '&::placeholder': {
+      color: theme.inputPlaceholderColor,
+    },
+  },
+  wrapper: {
+    background: theme.inputBackground,
+    border: theme.inputBorder,
+    borderRadius: theme.borderRadiusSmall,
+    boxSizing: 'border-box' as Property.BoxSizing,
+    display: 'flex',
+    order: 1,
+    width: '100%',
+  },
+  hasError: {
+    borderColor: theme.brandDanger,
+  },
+});
diff --git a/src/components/ui/toggle/index.tsx b/src/components/ui/toggle/index.tsx
new file mode 100644
index 000000000..7b6ba147f
--- /dev/null
+++ b/src/components/ui/toggle/index.tsx
@@ -0,0 +1,125 @@
+import classnames from 'classnames';
+import { Property } from 'csstype';
+import { Component, InputHTMLAttributes } from 'react';
+import injectStyle from 'react-jss';
+
+import { Theme } from '../../../themes';
+import { IFormField, IWithStyle } from '../typings/generic';
+
+import { Error } from '../error';
+import { Label } from '../label';
+import { Wrapper } from '../wrapper';
+
+interface IProps
+  extends InputHTMLAttributes<HTMLInputElement>,
+    IFormField,
+    IWithStyle {
+  className?: string;
+}
+
+let buttonTransition: string = 'none';
+
+if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) {
+  buttonTransition = 'all .5s';
+}
+
+const styles = (theme: Theme) => ({
+  toggle: {
+    background: theme.toggleBackground,
+    borderRadius: theme.borderRadius,
+    height: theme.toggleHeight,
+    position: 'relative' as Property.Position,
+    width: theme.toggleWidth,
+  },
+  button: {
+    background: theme.toggleButton,
+    borderRadius: '100%',
+    boxShadow: '0 1px 4px rgba(0, 0, 0, .3)',
+    width: theme.toggleHeight - 2,
+    height: theme.toggleHeight - 2,
+    left: 1,
+    top: 1,
+    position: 'absolute' as Property.Position,
+    transition: buttonTransition,
+  },
+  buttonActive: {
+    background: theme.toggleButtonActive,
+    left: theme.toggleWidth - theme.toggleHeight + 1,
+  },
+  input: {
+    visibility: 'hidden' as any,
+  },
+  disabled: {
+    opacity: theme.inputDisabledOpacity,
+  },
+  toggleLabel: {
+    display: 'flex',
+    alignItems: 'center',
+
+    '& > span': {
+      order: 1,
+      marginLeft: 15,
+    },
+  },
+});
+
+class ToggleComponent extends Component<IProps> {
+  public static defaultProps = {
+    onChange: () => {},
+    showLabel: true,
+    disabled: false,
+    error: '',
+  };
+
+  render() {
+    const {
+      classes,
+      className,
+      disabled,
+      error,
+      id,
+      label,
+      showLabel,
+      checked,
+      value,
+      onChange,
+    } = this.props;
+
+    return (
+      <Wrapper className={className} identifier="franz-toggle">
+        <Label
+          title={label}
+          showLabel={showLabel}
+          htmlFor={id}
+          className={classes.toggleLabel}
+        >
+          <div
+            className={classnames({
+              [`${classes.toggle}`]: true,
+              [`${classes.disabled}`]: disabled,
+            })}
+          >
+            <div
+              className={classnames({
+                [`${classes.button}`]: true,
+                [`${classes.buttonActive}`]: checked,
+              })}
+            />
+            <input
+              className={classes.input}
+              id={id}
+              type="checkbox"
+              checked={checked}
+              value={value}
+              onChange={onChange}
+              disabled={disabled}
+            />
+          </div>
+        </Label>
+        {error && <Error message={error} />}
+      </Wrapper>
+    );
+  }
+}
+
+export const Toggle = injectStyle(styles)(ToggleComponent);
diff --git a/src/components/ui/typings/generic.ts b/src/components/ui/typings/generic.ts
new file mode 100644
index 000000000..65b996d59
--- /dev/null
+++ b/src/components/ui/typings/generic.ts
@@ -0,0 +1,19 @@
+import { Classes } from 'jss';
+
+import { Theme } from '../../../themes';
+
+export interface IFormField {
+  showLabel?: boolean;
+  label?: string;
+  error?: string;
+  required?: boolean;
+  noMargin?: boolean;
+}
+
+export interface IWithStyle {
+  classes: Classes;
+  theme: Theme;
+}
+
+export type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N;
+export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
diff --git a/src/components/ui/wrapper/index.tsx b/src/components/ui/wrapper/index.tsx
new file mode 100644
index 000000000..ffcd6fe0b
--- /dev/null
+++ b/src/components/ui/wrapper/index.tsx
@@ -0,0 +1,37 @@
+import classnames from 'classnames';
+import { Component, ReactNode } from 'react';
+import injectStyle from 'react-jss';
+import { IWithStyle } from '../typings/generic';
+
+interface IProps extends IWithStyle {
+  children: ReactNode;
+  className?: string;
+  identifier: string;
+  noMargin?: boolean;
+}
+
+const styles = {
+  container: {
+    marginBottom: (props: IProps) => (props.noMargin ? 0 : 20),
+  },
+};
+
+class WrapperComponent extends Component<IProps> {
+  render() {
+    const { children, classes, className, identifier } = this.props;
+
+    return (
+      <div
+        className={classnames({
+          [`${classes.container}`]: true,
+          [`${className}`]: className,
+        })}
+        data-type={identifier}
+      >
+        {children}
+      </div>
+    );
+  }
+}
+
+export const Wrapper = injectStyle(styles)(WrapperComponent);
diff --git a/src/components/util/ErrorBoundary/index.js b/src/components/util/ErrorBoundary/index.js
index 9c789e981..cddcd91c2 100644
--- a/src/components/util/ErrorBoundary/index.js
+++ b/src/components/util/ErrorBoundary/index.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import injectSheet from 'react-jss';
 import { defineMessages, injectIntl } from 'react-intl';
diff --git a/src/components/util/ErrorBoundary/styles.js b/src/components/util/ErrorBoundary/styles.js
index 51b36fdf3..0960546ff 100644
--- a/src/components/util/ErrorBoundary/styles.js
+++ b/src/components/util/ErrorBoundary/styles.js
@@ -1,4 +1,4 @@
-export default (theme) => ({
+export default theme => ({
   component: {
     display: 'flex',
     width: '100%',
diff --git a/src/config.ts b/src/config.ts
index fe9145021..dfedbe6f5 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -2,7 +2,7 @@
 
 import ms from 'ms';
 
-import { DEFAULT_ACCENT_COLOR } from '@meetfranz/theme';
+export const DEFAULT_ACCENT_COLOR = '#7266F0';
 
 export const CHECK_INTERVAL = ms('1h'); // How often should we perform checks
 
@@ -180,6 +180,7 @@ export const CUSTOM_WEBSITE_RECIPE_ID = 'franz-custom-website';
 export const DEFAULT_SERVICE_ORDER = 99; // something high enough that it gets added to the end of the already-added services on the left sidebar
 
 export const DEFAULT_APP_SETTINGS = {
+  autoLaunchOnStart: false,
   autoLaunchInBackground: false,
   runInBackground: true,
   reloadAfterResume: true,
@@ -198,11 +199,11 @@ export const DEFAULT_APP_SETTINGS = {
   spellcheckerLanguage: 'en-us',
   darkMode: false,
   splitMode: false,
-  locale: '',
   fallbackLocale: 'en-US',
   beta: false,
   isAppMuted: false,
   enableGPUAcceleration: true,
+  enableGlobalHideShortcut: false,
 
   // Ferdi specific options
   server: LIVE_FERDI_API,
@@ -233,4 +234,28 @@ export const DEFAULT_APP_SETTINGS = {
   useVerticalStyle: false,
   alwaysShowWorkspaces: false,
   liftSingleInstanceLock: false,
+  enableLongPressServiceHint: false,
+  proxyFeatureEnabled: false,
+  onlyShowFavoritesInUnreadCount: false
+};
+
+export const DEFAULT_SERVICE_SETTINGS = {
+  isEnabled: true,
+  isHibernationEnabled: false,
+  isWakeUpEnabled: true,
+  isNotificationEnabled: true,
+  isBadgeEnabled: true,
+  isMuted: false,
+  customIcon: false,
+  isDarkModeEnabled: false,
+  // Note: Do NOT change these default values. If they change, then the corresponding changes in the recipes needs to be done
+  hasDirectMessages: true,
+  hasIndirectMessages: false,
+  hasNotificationSound: false,
+  hasTeamId: false,
+  hasCustomUrl: false,
+  hasHostedOption: false,
+  allowFavoritesDelineationInUnreadCount: false,
+  disablewebsecurity: false,
+  autoHibernate: false,
 };
diff --git a/src/containers/auth/AuthLayoutContainer.js b/src/containers/auth/AuthLayoutContainer.js
index 7673ab9c7..aa36e3969 100644
--- a/src/containers/auth/AuthLayoutContainer.js
+++ b/src/containers/auth/AuthLayoutContainer.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 import { ThemeProvider } from 'react-jss';
diff --git a/src/containers/auth/ChangeServerScreen.js b/src/containers/auth/ChangeServerScreen.js
index a8910e7b1..dcc913c39 100644
--- a/src/containers/auth/ChangeServerScreen.js
+++ b/src/containers/auth/ChangeServerScreen.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 import { RouterStore } from 'mobx-react-router';
diff --git a/src/containers/auth/ImportScreen.js b/src/containers/auth/ImportScreen.js
index ce786bdb8..46e2d41f0 100644
--- a/src/containers/auth/ImportScreen.js
+++ b/src/containers/auth/ImportScreen.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 import { RouterStore } from 'mobx-react-router';
diff --git a/src/containers/auth/InviteScreen.js b/src/containers/auth/InviteScreen.js
index d9d52a57c..e252242ae 100644
--- a/src/containers/auth/InviteScreen.js
+++ b/src/containers/auth/InviteScreen.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 import Invite from '../../components/auth/Invite';
diff --git a/src/containers/auth/LockedScreen.js b/src/containers/auth/LockedScreen.js
index a49549731..945e41284 100644
--- a/src/containers/auth/LockedScreen.js
+++ b/src/containers/auth/LockedScreen.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 import Locked from '../../components/auth/Locked';
diff --git a/src/containers/auth/LoginScreen.js b/src/containers/auth/LoginScreen.js
index cab73316b..3f8c67fa8 100644
--- a/src/containers/auth/LoginScreen.js
+++ b/src/containers/auth/LoginScreen.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 import Login from '../../components/auth/Login';
diff --git a/src/containers/auth/PasswordScreen.js b/src/containers/auth/PasswordScreen.js
index 86a746b9b..836d4cc88 100644
--- a/src/containers/auth/PasswordScreen.js
+++ b/src/containers/auth/PasswordScreen.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 import Password from '../../components/auth/Password';
diff --git a/src/containers/auth/SetupAssistantScreen.js b/src/containers/auth/SetupAssistantScreen.js
index efda2e9d2..8cdd95a88 100644
--- a/src/containers/auth/SetupAssistantScreen.js
+++ b/src/containers/auth/SetupAssistantScreen.js
@@ -1,5 +1,5 @@
 /* eslint-disable no-await-in-loop */
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 
diff --git a/src/containers/auth/SignupScreen.js b/src/containers/auth/SignupScreen.js
index b20a7fd62..3b19f3c50 100644
--- a/src/containers/auth/SignupScreen.js
+++ b/src/containers/auth/SignupScreen.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 
diff --git a/src/containers/auth/WelcomeScreen.js b/src/containers/auth/WelcomeScreen.js
index d169e5f0f..7a23d9ba9 100644
--- a/src/containers/auth/WelcomeScreen.js
+++ b/src/containers/auth/WelcomeScreen.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 
diff --git a/src/containers/layout/AppLayoutContainer.js b/src/containers/layout/AppLayoutContainer.js
index 3e92b0610..0d566525d 100644
--- a/src/containers/layout/AppLayoutContainer.js
+++ b/src/containers/layout/AppLayoutContainer.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Children, Component } from 'react';
 import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 import { ThemeProvider } from 'react-jss';
@@ -8,7 +8,6 @@ import RecipesStore from '../../stores/RecipesStore';
 import ServicesStore from '../../stores/ServicesStore';
 import FeaturesStore from '../../stores/FeaturesStore';
 import UIStore from '../../stores/UIStore';
-import NewsStore from '../../stores/NewsStore';
 import SettingsStore from '../../stores/SettingsStore';
 import UserStore from '../../stores/UserStore';
 import RequestStore from '../../stores/RequestStore';
@@ -38,7 +37,6 @@ class AppLayoutContainer extends Component {
       features,
       services,
       ui,
-      news,
       settings,
       globalError,
       requests,
@@ -63,8 +61,6 @@ class AppLayoutContainer extends Component {
       awake,
     } = this.props.actions.service;
 
-    const { hide } = this.props.actions.news;
-
     const { retryRequiredRequests } = this.props.actions.requests;
 
     const { installUpdate, toggleMuteApp } = this.props.actions.app;
@@ -95,10 +91,11 @@ class AppLayoutContainer extends Component {
 
     const workspacesDrawer = (
       <WorkspaceDrawer
+        // eslint-disable-next-line no-confusing-arrow
         getServicesForWorkspace={workspace =>
-          (workspace
+          workspace
             ? workspaceStore.getWorkspaceServices(workspace).map(s => s.name)
-            : services.all.map(s => s.name))
+            : services.all.map(s => s.name)
         }
       />
     );
@@ -158,8 +155,6 @@ class AppLayoutContainer extends Component {
           sidebar={sidebar}
           workspacesDrawer={workspacesDrawer}
           services={servicesContainer}
-          news={news.latest}
-          removeNewsItem={hide}
           reloadServicesAfterUpdate={() => window.location.reload()}
           installAppUpdate={installUpdate}
           globalError={globalError.error}
@@ -168,7 +163,7 @@ class AppLayoutContainer extends Component {
           retryRequiredRequests={retryRequiredRequests}
           areRequiredRequestsLoading={requests.areRequiredRequestsLoading}
         >
-          {React.Children.count(children) > 0 ? children : null}
+          {Children.count(children) > 0 ? children : null}
         </AppLayout>
       </ThemeProvider>
     );
@@ -182,7 +177,6 @@ AppLayoutContainer.wrappedComponent.propTypes = {
     recipes: PropTypes.instanceOf(RecipesStore).isRequired,
     app: PropTypes.instanceOf(AppStore).isRequired,
     ui: PropTypes.instanceOf(UIStore).isRequired,
-    news: PropTypes.instanceOf(NewsStore).isRequired,
     settings: PropTypes.instanceOf(SettingsStore).isRequired,
     user: PropTypes.instanceOf(UserStore).isRequired,
     requests: PropTypes.instanceOf(RequestStore).isRequired,
@@ -191,7 +185,6 @@ AppLayoutContainer.wrappedComponent.propTypes = {
   }).isRequired,
   actions: PropTypes.shape({
     service: PropTypes.instanceOf(ServicesStore).isRequired,
-    news: PropTypes.instanceOf(NewsStore).isRequired,
     ui: PropTypes.instanceOf(UIStore).isRequired,
     app: PropTypes.instanceOf(AppStore).isRequired,
     requests: PropTypes.instanceOf(RequestStore).isRequired,
diff --git a/src/containers/settings/AccountScreen.js b/src/containers/settings/AccountScreen.js
index 1515fc22b..f7c9b8164 100644
--- a/src/containers/settings/AccountScreen.js
+++ b/src/containers/settings/AccountScreen.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 
diff --git a/src/containers/settings/EditServiceScreen.js b/src/containers/settings/EditServiceScreen.js
index dee7e7cff..b84c0d5bb 100644
--- a/src/containers/settings/EditServiceScreen.js
+++ b/src/containers/settings/EditServiceScreen.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
@@ -23,6 +23,7 @@ import { config as proxyFeature } from '../../features/serviceProxy';
 import { SPELLCHECKER_LOCALES } from '../../i18n/languages';
 
 import globalMessages from '../../i18n/globalMessages';
+import { DEFAULT_APP_SETTINGS, DEFAULT_SERVICE_SETTINGS } from '../../config';
 
 const messages = defineMessages({
   name: {
@@ -37,6 +38,10 @@ const messages = defineMessages({
     id: 'settings.service.form.enableHibernation',
     defaultMessage: 'Enable hibernation',
   },
+  enableWakeUp: {
+    id: 'settings.service.form.enableWakeUp',
+    defaultMessage: 'Enable wake up',
+  },
   enableNotification: {
     id: 'settings.service.form.enableNotification',
     defaultMessage: 'Enable notifications',
@@ -171,7 +176,7 @@ class EditServiceScreen extends Component {
         isEnabled: {
           label: intl.formatMessage(messages.enableService),
           value: service.isEnabled,
-          default: true,
+          default: DEFAULT_SERVICE_SETTINGS.isEnabled,
         },
         isHibernationEnabled: {
           label: intl.formatMessage(messages.enableHibernation),
@@ -179,22 +184,27 @@ class EditServiceScreen extends Component {
             action !== 'edit'
               ? recipe.autoHibernate
               : service.isHibernationEnabled,
-          default: true,
+          default: DEFAULT_SERVICE_SETTINGS.isHibernationEnabled,
+        },
+        isWakeUpEnabled: {
+          label: intl.formatMessage(messages.enableWakeUp),
+          value: service.isWakeUpEnabled,
+          default: DEFAULT_SERVICE_SETTINGS.isWakeUpEnabled,
         },
         isNotificationEnabled: {
           label: intl.formatMessage(messages.enableNotification),
           value: service.isNotificationEnabled,
-          default: true,
+          default: DEFAULT_SERVICE_SETTINGS.isNotificationEnabled,
         },
         isBadgeEnabled: {
           label: intl.formatMessage(messages.enableBadge),
           value: service.isBadgeEnabled,
-          default: true,
+          default: DEFAULT_SERVICE_SETTINGS.isBadgeEnabled,
         },
         isMuted: {
           label: intl.formatMessage(messages.enableAudio),
           value: !service.isMuted,
-          default: true,
+          default: DEFAULT_SERVICE_SETTINGS.isMuted,
         },
         customIcon: {
           label: intl.formatMessage(messages.icon),
@@ -288,7 +298,7 @@ class EditServiceScreen extends Component {
         isIndirectMessageBadgeEnabled: {
           label: intl.formatMessage(messages.indirectMessages),
           value: service.isIndirectMessageBadgeEnabled,
-          default: true,
+          default: DEFAULT_SERVICE_SETTINGS.hasIndirectMessages,
         },
       });
     }
@@ -298,7 +308,7 @@ class EditServiceScreen extends Component {
         onlyShowFavoritesInUnreadCount: {
           label: intl.formatMessage(messages.onlyShowFavoritesInUnreadCount),
           value: service.onlyShowFavoritesInUnreadCount,
-          default: false,
+          default: DEFAULT_APP_SETTINGS.onlyShowFavoritesInUnreadCount,
         },
       });
     }
@@ -314,7 +324,7 @@ class EditServiceScreen extends Component {
             isEnabled: {
               label: intl.formatMessage(messages.enableProxy),
               value: serviceProxyConfig.isEnabled,
-              default: false,
+              default: DEFAULT_APP_SETTINGS.proxyFeatureEnabled,
             },
             host: {
               label: intl.formatMessage(messages.proxyHost),
diff --git a/src/containers/settings/EditSettingsScreen.js b/src/containers/settings/EditSettingsScreen.js
index 1b05644f9..de0714870 100644
--- a/src/containers/settings/EditSettingsScreen.js
+++ b/src/containers/settings/EditSettingsScreen.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
@@ -177,6 +177,10 @@ const messages = defineMessages({
     id: 'settings.app.form.iconSize',
     defaultMessage: 'Service icon size',
   },
+  enableLongPressServiceHint: {
+    id: 'settings.app.form.enableLongPressServiceHint',
+    defaultMessage: 'Enable service shortcut hint on long press',
+  },
   useVerticalStyle: {
     id: 'settings.app.form.useVerticalStyle',
     defaultMessage: 'Use horizontal style',
@@ -209,6 +213,10 @@ const messages = defineMessages({
     id: 'settings.app.form.enableGPUAcceleration',
     defaultMessage: 'Enable GPU Acceleration',
   },
+  enableGlobalHideShortcut: {
+    id: 'settings.app.form.enableGlobalHideShortcut',
+    defaultMessage: 'Enable Global shortcut to hide Ferdi',
+  },
   beta: {
     id: 'settings.app.form.beta',
     defaultMessage: 'Include beta versions',
@@ -289,6 +297,9 @@ class EditSettingsScreen extends Component {
         scheduledDNDStart: settingsData.scheduledDNDStart,
         scheduledDNDEnd: settingsData.scheduledDNDEnd,
         enableGPUAcceleration: Boolean(settingsData.enableGPUAcceleration),
+        enableGlobalHideShortcut: Boolean(
+          settingsData.enableGlobalHideShortcut,
+        ),
         showDisabledServices: Boolean(settingsData.showDisabledServices),
         darkMode: Boolean(settingsData.darkMode),
         adaptableDarkMode: Boolean(settingsData.adaptableDarkMode),
@@ -296,6 +307,9 @@ class EditSettingsScreen extends Component {
         splitMode: Boolean(settingsData.splitMode),
         serviceRibbonWidth: Number(settingsData.serviceRibbonWidth),
         iconSize: Number(settingsData.iconSize),
+        enableLongPressServiceHint: Boolean(
+          settingsData.enableLongPressServiceHint,
+        ),
         useVerticalStyle: Boolean(settingsData.useVerticalStyle),
         alwaysShowWorkspaces: Boolean(settingsData.alwaysShowWorkspaces),
         accentColor: settingsData.accentColor,
@@ -503,7 +517,7 @@ class EditSettingsScreen extends Component {
         lockingFeatureEnabled: {
           label: intl.formatMessage(messages.enableLock),
           value: settings.all.app.lockingFeatureEnabled || false,
-          default: false,
+          default: DEFAULT_APP_SETTINGS.lockingFeatureEnabled,
         },
         lockedPassword: {
           label: intl.formatMessage(messages.lockPassword),
@@ -525,7 +539,7 @@ class EditSettingsScreen extends Component {
         scheduledDNDEnabled: {
           label: intl.formatMessage(messages.scheduledDNDEnabled),
           value: settings.all.app.scheduledDNDEnabled || false,
-          default: false,
+          default: DEFAULT_APP_SETTINGS.scheduledDNDEnabled,
         },
         scheduledDNDStart: {
           label: intl.formatMessage(messages.scheduledDNDStart),
@@ -603,6 +617,11 @@ class EditSettingsScreen extends Component {
           default: DEFAULT_APP_SETTINGS.iconSize,
           options: iconSizes,
         },
+        enableLongPressServiceHint: {
+          label: intl.formatMessage(messages.enableLongPressServiceHint),
+          value: settings.all.app.enableLongPressServiceHint,
+          default: DEFAULT_APP_SETTINGS.enableLongPressServiceHint,
+        },
         useVerticalStyle: {
           label: intl.formatMessage(messages.useVerticalStyle),
           value: settings.all.app.useVerticalStyle,
@@ -623,6 +642,11 @@ class EditSettingsScreen extends Component {
           value: settings.all.app.enableGPUAcceleration,
           default: DEFAULT_APP_SETTINGS.enableGPUAcceleration,
         },
+        enableGlobalHideShortcut: {
+          label: intl.formatMessage(messages.enableGlobalHideShortcut),
+          value: settings.all.app.enableGlobalHideShortcut,
+          default: DEFAULT_APP_SETTINGS.enableGlobalHideShortcut,
+        },
         locale: {
           label: intl.formatMessage(messages.language),
           value: app.locale,
diff --git a/src/containers/settings/EditUserScreen.js b/src/containers/settings/EditUserScreen.js
index ca1363c59..1dc0aa8e6 100644
--- a/src/containers/settings/EditUserScreen.js
+++ b/src/containers/settings/EditUserScreen.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
diff --git a/src/containers/settings/InviteScreen.js b/src/containers/settings/InviteScreen.js
index bf393f42f..592b4b11c 100644
--- a/src/containers/settings/InviteScreen.js
+++ b/src/containers/settings/InviteScreen.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 
diff --git a/src/containers/settings/RecipesScreen.js b/src/containers/settings/RecipesScreen.js
index 2e60ceefa..7f55e54c5 100644
--- a/src/containers/settings/RecipesScreen.js
+++ b/src/containers/settings/RecipesScreen.js
@@ -1,5 +1,5 @@
 import { readJsonSync } from 'fs-extra';
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { autorun } from 'mobx';
 import { inject, observer } from 'mobx-react';
@@ -130,21 +130,21 @@ class RecipesScreen extends Component {
 
     const allRecipes = this.state.needle
       ? this.prepareRecipes([
-        // All search recipes from server
-        ...recipePreviews.searchResults,
-        // All search recipes from local recipes
-        ...this.createPreviews(
-          this.customRecipes.filter(
-            service =>
-              service.name
-                .toLowerCase()
-                .includes(this.state.needle.toLowerCase()) ||
+          // All search recipes from server
+          ...recipePreviews.searchResults,
+          // All search recipes from local recipes
+          ...this.createPreviews(
+            this.customRecipes.filter(
+              service =>
+                service.name
+                  .toLowerCase()
+                  .includes(this.state.needle.toLowerCase()) ||
                 (service.aliases || []).some(alias =>
                   alias.toLowerCase().includes(this.state.needle.toLowerCase()),
                 ),
+            ),
           ),
-        ),
-      ]).sort(this._sortByName)
+        ]).sort(this._sortByName)
       : recipeFilter;
 
     const customWebsiteRecipe = recipePreviews.all.find(
diff --git a/src/containers/settings/ServicesScreen.js b/src/containers/settings/ServicesScreen.js
index c9dfc68d0..a657b6e6c 100644
--- a/src/containers/settings/ServicesScreen.js
+++ b/src/containers/settings/ServicesScreen.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 import { RouterStore } from 'mobx-react-router';
diff --git a/src/containers/settings/SettingsWindow.js b/src/containers/settings/SettingsWindow.js
index e03c4c1d2..35db3a434 100644
--- a/src/containers/settings/SettingsWindow.js
+++ b/src/containers/settings/SettingsWindow.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import { observer, inject } from 'mobx-react';
diff --git a/src/containers/settings/SupportScreen.js b/src/containers/settings/SupportScreen.js
index 646f672ce..d3600f8ea 100644
--- a/src/containers/settings/SupportScreen.js
+++ b/src/containers/settings/SupportScreen.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { inject } from 'mobx-react';
 import PropTypes from 'prop-types';
 
diff --git a/src/containers/settings/TeamScreen.js b/src/containers/settings/TeamScreen.js
index ea447469b..928262a59 100644
--- a/src/containers/settings/TeamScreen.js
+++ b/src/containers/settings/TeamScreen.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 
diff --git a/src/electron-util.ts b/src/electron-util.ts
index f4b26cb10..3c395ab10 100644
--- a/src/electron-util.ts
+++ b/src/electron-util.ts
@@ -1,23 +1,28 @@
 // Enhanced from: https://github.com/dertieran/electron-util/blob/replace-remote/source/api.js
 
-import electron from 'electron';
+import * as electron from 'electron';
 import { initialize } from '@electron/remote/main';
 
 export const initializeRemote = () => {
   if (process.type !== 'browser') {
-    throw new Error('The remote api must be initialized from the main process.');
+    throw new Error(
+      'The remote api must be initialized from the main process.',
+    );
   }
 
   initialize();
 };
 
-export const remote = new Proxy({}, {
-  get: (_target, property) => {
-    // eslint-disable-next-line global-require
-    const remote = require('@electron/remote');
-    return remote[property];
+export const remote = new Proxy(
+  {},
+  {
+    get: (_target, property) => {
+      // eslint-disable-next-line global-require
+      const remote = require('@electron/remote');
+      return remote[property];
+    },
   },
-});
+);
 
 export const api = new Proxy(electron, {
   get: (target, property) => {
diff --git a/src/electron/exception.ts b/src/electron/exception.ts
index 0065e2604..ada98d17b 100644
--- a/src/electron/exception.ts
+++ b/src/electron/exception.ts
@@ -1,4 +1,4 @@
-process.on('uncaughtException', (err) => {
+process.on('uncaughtException', err => {
   // handle the error safely
   console.error(err);
 });
diff --git a/src/electron/ipc-api/appIndicator.ts b/src/electron/ipc-api/appIndicator.ts
index a51ed8161..bd5f6a68f 100644
--- a/src/electron/ipc-api/appIndicator.ts
+++ b/src/electron/ipc-api/appIndicator.ts
@@ -1,4 +1,4 @@
-import { app, ipcMain } from 'electron';
+import { app, ipcMain, BrowserWindow, Tray } from 'electron';
 import { join } from 'path';
 import { autorun } from 'mobx';
 import { isMac, isWindows, isLinux } from '../../environment';
@@ -21,29 +21,38 @@ function getAsset(type: 'tray' | 'taskbar', asset: string) {
   );
 }
 
-export default params => {
+export default (params: {
+  mainWindow: BrowserWindow;
+  settings: any;
+  trayIcon: Tray;
+}) => {
   autorun(() => {
     isTrayIconEnabled = params.settings.app.get('enableSystemTray');
 
     if (!isTrayIconEnabled) {
+      // @ts-expect-error Property 'hide' does not exist on type 'Tray'.
       params.trayIcon.hide();
     } else if (isTrayIconEnabled) {
+      // @ts-expect-error Property 'show' does not exist on type 'Tray'.
       params.trayIcon.show();
     }
   });
 
   ipcMain.on('updateAppIndicator', (_event, args) => {
     // Flash TaskBar for windows, bounce Dock on Mac
-    if (!(app as any).mainWindow.isFocused() && params.settings.app.get('notifyTaskBarOnMessage')) {
-        if (isWindows) {
-          (app as any).mainWindow.flashFrame(true);
-          (app as any).mainWindow.once('focus', () =>
-            (app as any).mainWindow.flashFrame(false),
-          );
-        } else if (isMac) {
-          app.dock.bounce('informational');
-        }
+    if (
+      !params.mainWindow.isFocused() &&
+      params.settings.app.get('notifyTaskBarOnMessage')
+    ) {
+      if (isWindows) {
+        params.mainWindow.flashFrame(true);
+        params.mainWindow.once('focus', () =>
+          params.mainWindow.flashFrame(false),
+        );
+      } else if (isMac) {
+        app.dock.bounce('informational');
       }
+    }
 
     // Update badge
     if (isMac && typeof args.indicator === 'string') {
@@ -57,6 +66,7 @@ export default params => {
     if (isWindows) {
       if (typeof args.indicator === 'number' && args.indicator !== 0) {
         params.mainWindow.setOverlayIcon(
+          // @ts-expect-error Argument of type 'string' is not assignable to parameter of type 'NativeImage | null'.
           getAsset(
             'taskbar',
             `${INDICATOR_TASKBAR}-${
@@ -67,6 +77,7 @@ export default params => {
         );
       } else if (typeof args.indicator === 'string') {
         params.mainWindow.setOverlayIcon(
+          // @ts-expect-error Argument of type 'string' is not assignable to parameter of type 'NativeImage | null'.
           getAsset('taskbar', `${INDICATOR_TASKBAR}-alert`),
           '',
         );
@@ -76,6 +87,7 @@ export default params => {
     }
 
     // Update Tray
+    // @ts-expect-error Property 'setIndicator' does not exist on type 'Tray'.
     params.trayIcon.setIndicator(args.indicator);
   });
 };
diff --git a/src/electron/ipc-api/index.ts b/src/electron/ipc-api/index.ts
index f03f61517..1f69c04ee 100644
--- a/src/electron/ipc-api/index.ts
+++ b/src/electron/ipc-api/index.ts
@@ -12,7 +12,7 @@ import focusState from './focusState';
 export default (params: {
   mainWindow: BrowserWindow;
   settings: any;
-  tray: Tray;
+  trayIcon: Tray;
 }) => {
   settings(params);
   sessionStorage();
diff --git a/src/electron/ipc-api/localServer.ts b/src/electron/ipc-api/localServer.ts
index 7ee642101..04ddc976a 100644
--- a/src/electron/ipc-api/localServer.ts
+++ b/src/electron/ipc-api/localServer.ts
@@ -1,12 +1,12 @@
 import { ipcMain, BrowserWindow } from 'electron';
-import net from 'net';
+import { createServer } from 'net';
 import { LOCAL_HOSTNAME, LOCAL_PORT } from '../../config';
 import { userDataPath } from '../../environment-remote';
 import { server } from '../../internal-server/start';
 
 const portInUse = (port: number): Promise<boolean> =>
   new Promise(resolve => {
-    const server = net.createServer(socket => {
+    const server = createServer(socket => {
       socket.write('Echo server\r\n');
       socket.pipe(socket);
     });
diff --git a/src/electron/ipc-api/sessionStorage.ts b/src/electron/ipc-api/sessionStorage.ts
index 3eda568a1..1ff0a51ea 100644
--- a/src/electron/ipc-api/sessionStorage.ts
+++ b/src/electron/ipc-api/sessionStorage.ts
@@ -6,7 +6,11 @@ const debug = require('debug')('Ferdi:ipcApi:sessionStorage');
 
 function deduceSession(serviceId: string | undefined | null): Session {
   if (serviceId) {
-    return session.fromPartition(serviceId === TODOS_PARTITION_ID ? TODOS_PARTITION_ID : `persist:service-${serviceId}`);
+    return session.fromPartition(
+      serviceId === TODOS_PARTITION_ID
+        ? TODOS_PARTITION_ID
+        : `persist:service-${serviceId}`,
+    );
   }
   return session.defaultSession;
 }
diff --git a/src/enforce-macos-app-location.ts b/src/enforce-macos-app-location.ts
index 0f858013d..0e6bf9ecc 100644
--- a/src/enforce-macos-app-location.ts
+++ b/src/enforce-macos-app-location.ts
@@ -12,11 +12,9 @@ export function enforceMacOSAppLocation() {
   const clickedButtonIndex = api.dialog.showMessageBoxSync({
     type: 'error',
     message: 'Move to Applications folder?',
-    detail: 'Ferdi must live in the Applications folder to be able to run correctly.',
-    buttons: [
-      'Move to Applications folder',
-      'Quit Ferdi',
-    ],
+    detail:
+      'Ferdi must live in the Applications folder to be able to run correctly.',
+    buttons: ['Move to Applications folder', 'Quit Ferdi'],
     defaultId: 0,
     cancelId: 1,
   });
@@ -28,13 +26,13 @@ export function enforceMacOSAppLocation() {
 
   api.app.moveToApplicationsFolder({
     conflictHandler: conflict => {
-      if (conflict === 'existsAndRunning') { // Can't replace the active version of the app
+      if (conflict === 'existsAndRunning') {
+        // Can't replace the active version of the app
         api.dialog.showMessageBoxSync({
           type: 'error',
-          message: 'Another version of Ferdi is currently running. Quit it, then launch this version of the app again.',
-          buttons: [
-            'OK',
-          ],
+          message:
+            'Another version of Ferdi is currently running. Quit it, then launch this version of the app again.',
+          buttons: ['OK'],
         });
 
         api.app.quit();
diff --git a/src/environment-remote.ts b/src/environment-remote.ts
index 192510f37..c87e89772 100644
--- a/src/environment-remote.ts
+++ b/src/environment-remote.ts
@@ -14,7 +14,13 @@ import {
   LOCAL_TODOS_FRONTEND_URL,
   PRODUCTION_TODOS_FRONTEND_URL,
 } from './config';
-import { chromeVersion, electronVersion, isWindows, nodeVersion, osArch } from './environment';
+import {
+  chromeVersion,
+  electronVersion,
+  isWindows,
+  nodeVersion,
+  osArch,
+} from './environment';
 
 // @ts-expect-error Cannot find module './buildInfo.json' or its corresponding type declarations.
 import * as buildInfo from './buildInfo.json';
@@ -28,14 +34,20 @@ if (process.env.FERDI_APPDATA_DIR != null) {
   app.setPath('appData', process.env.FERDI_APPDATA_DIR);
   app.setPath('userData', app.getPath('appData'));
 } else if (process.env.PORTABLE_EXECUTABLE_DIR != null) {
-  app.setPath('appData', join(process.env.PORTABLE_EXECUTABLE_DIR, `${app.name}AppData`));
+  app.setPath(
+    'appData',
+    join(process.env.PORTABLE_EXECUTABLE_DIR, `${app.name}AppData`),
+  );
   app.setPath('userData', join(app.getPath('appData'), `${app.name}AppData`));
 } else if (isWindows && process.env.APPDATA != null) {
   app.setPath('appData', process.env.APPDATA);
   app.setPath('userData', join(app.getPath('appData'), app.name));
 }
 
-export const isDevMode = process.env.ELECTRON_IS_DEV !== undefined ? Number.parseInt(process.env.ELECTRON_IS_DEV, 10) === 1 : !app.isPackaged;
+export const isDevMode =
+  process.env.ELECTRON_IS_DEV !== undefined
+    ? Number.parseInt(process.env.ELECTRON_IS_DEV, 10) === 1
+    : !app.isPackaged;
 if (isDevMode) {
   app.setPath('userData', join(app.getPath('appData'), `${app.name}Dev`));
 }
diff --git a/src/environment.ts b/src/environment.ts
index ce2a77e7a..9b727a607 100644
--- a/src/environment.ts
+++ b/src/environment.ts
@@ -1,6 +1,6 @@
 // Note: This file has now become devoid of all references to values deduced from the remote process - all those now live in the `environment-remote.js` file
 
-import os from 'os';
+import { arch, release } from 'os';
 
 export const isMac = process.platform === 'darwin';
 export const isWindows = process.platform === 'win32';
@@ -10,9 +10,8 @@ export const electronVersion = process.versions.electron;
 export const chromeVersion = process.versions.chrome;
 export const nodeVersion = process.versions.node;
 
-export const osPlatform = os.platform();
-export const osArch = os.arch();
-export const osRelease = os.release();
+export const osArch = arch();
+export const osRelease = release();
 export const is64Bit = osArch.match(/64/);
 
 // for accelerator, show the shortform that electron/OS understands
diff --git a/src/features/basicAuth/Component.js b/src/features/basicAuth/Component.js
index 3cf937f98..652233e55 100644
--- a/src/features/basicAuth/Component.js
+++ b/src/features/basicAuth/Component.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import injectSheet from 'react-jss';
 import { observer } from 'mobx-react';
diff --git a/src/features/basicAuth/index.js b/src/features/basicAuth/index.ts
index e43d51d15..149ab6c19 100644
--- a/src/features/basicAuth/index.js
+++ b/src/features/basicAuth/index.ts
@@ -1,4 +1,4 @@
-import { ipcRenderer } from 'electron';
+import { AuthInfo, BrowserWindow, ipcRenderer } from 'electron';
 
 import BasicAuthComponent from './Component';
 
@@ -11,7 +11,7 @@ const state = ModalState;
 export default function initialize() {
   debug('Initialize basicAuth feature');
 
-  window.ferdi.features.basicAuth = {
+  window['ferdi'].features.basicAuth = {
     state,
   };
 
@@ -23,7 +23,7 @@ export default function initialize() {
   });
 }
 
-export function mainIpcHandler(mainWindow, authInfo) {
+export function mainIpcHandler(mainWindow: BrowserWindow, authInfo: AuthInfo) {
   debug('Sending basic auth call', authInfo);
 
   mainWindow.webContents.send('feature:basic-auth-request', {
diff --git a/src/features/nightlyBuilds/Component.js b/src/features/nightlyBuilds/Component.js
index 814d529d9..64f782c8f 100644
--- a/src/features/nightlyBuilds/Component.js
+++ b/src/features/nightlyBuilds/Component.js
@@ -1,9 +1,9 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, inject } from 'mobx-react';
 import injectSheet from 'react-jss';
 import { defineMessages, injectIntl } from 'react-intl';
-import { H1 } from '@meetfranz/ui';
+import { H1 } from '../../components/ui/headline';
 
 import Modal from '../../components/ui/Modal';
 import Button from '../../components/ui/Button';
diff --git a/src/features/nightlyBuilds/index.js b/src/features/nightlyBuilds/index.ts
index 89bcb5cb3..14afbaf1b 100644
--- a/src/features/nightlyBuilds/index.js
+++ b/src/features/nightlyBuilds/index.ts
@@ -14,26 +14,26 @@ export default function initialize() {
   }
 
   function toggleFeature() {
-    if (window.ferdi.stores.settings.app.nightly) {
-      window.ferdi.actions.settings.update({
+    if (window['ferdi'].stores.settings.app.nightly) {
+      window['ferdi'].actions.settings.update({
         type: 'app',
         data: {
           nightly: false,
         },
       });
-      window.ferdi.actions.user.update({
+      window['ferdi'].actions.user.update({
         userData: {
           nightly: false,
         },
       });
     } else {
       // We need to close the settings, otherwise the modal will be drawn under the settings window
-      window.ferdi.actions.ui.closeSettings();
+      window['ferdi'].actions.ui.closeSettings();
       showModal();
     }
   }
 
-  window.ferdi.features.nightlyBuilds = {
+  window['ferdi'].features.nightlyBuilds = {
     state,
     showModal,
     toggleFeature,
diff --git a/src/features/publishDebugInfo/Component.js b/src/features/publishDebugInfo/Component.js
index 5b5036752..30bdc13b6 100644
--- a/src/features/publishDebugInfo/Component.js
+++ b/src/features/publishDebugInfo/Component.js
@@ -1,10 +1,11 @@
-import { H1 } from '@meetfranz/ui';
 import { inject, observer } from 'mobx-react';
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { defineMessages, injectIntl } from 'react-intl';
 import injectSheet from 'react-jss';
 import { state as ModalState } from './store';
+
+import { H1 } from '../../components/ui/headline';
 import { sendAuthRequest } from '../../api/utils/auth';
 import Button from '../../components/ui/Button';
 import Input from '../../components/ui/Input';
diff --git a/src/features/quickSwitch/Component.js b/src/features/quickSwitch/Component.js
index f21db0ebd..d5cb9179f 100644
--- a/src/features/quickSwitch/Component.js
+++ b/src/features/quickSwitch/Component.js
@@ -1,14 +1,14 @@
-import React, { Component, createRef } from 'react';
+import { Component, createRef } from 'react';
 import { getCurrentWindow } from '@electron/remote';
 import PropTypes from 'prop-types';
 import { observer, inject } from 'mobx-react';
 import { reaction } from 'mobx';
 import injectSheet from 'react-jss';
 import { defineMessages, injectIntl } from 'react-intl';
-import { Input } from '@meetfranz/forms';
-import { H1 } from '@meetfranz/ui';
-
 import { compact, invoke } from 'lodash';
+
+import { Input } from '../../components/ui/input/index';
+import { H1 } from '../../components/ui/headline';
 import Modal from '../../components/ui/Modal';
 import { state as ModalState } from './store';
 import ServicesStore from '../../stores/ServicesStore';
diff --git a/src/features/quickSwitch/index.js b/src/features/quickSwitch/index.ts
index a16017219..e9cc36b2a 100644
--- a/src/features/quickSwitch/index.js
+++ b/src/features/quickSwitch/index.ts
@@ -12,7 +12,7 @@ export default function initialize() {
     state.isModalVisible = true;
   }
 
-  window.ferdi.features.quickSwitch = {
+  window['ferdi'].features.quickSwitch = {
     state,
     showModal,
   };
diff --git a/src/features/settingsWS/actions.ts b/src/features/settingsWS/actions.ts
index 631670c8a..03a398eb5 100755
--- a/src/features/settingsWS/actions.ts
+++ b/src/features/settingsWS/actions.ts
@@ -1,10 +1,13 @@
 import PropTypes from 'prop-types';
 import { createActionsFromDefinitions } from '../../actions/lib/actions';
 
-export const settingsWSActions = createActionsFromDefinitions({
-  greet: {
-    name: PropTypes.string.isRequired,
+export const settingsWSActions = createActionsFromDefinitions(
+  {
+    greet: {
+      name: PropTypes.string.isRequired,
+    },
   },
-}, PropTypes.checkPropTypes);
+  PropTypes.checkPropTypes,
+);
 
 export default settingsWSActions;
diff --git a/src/features/todos/components/TodosWebview.js b/src/features/todos/components/TodosWebview.js
index 2dc30cdf2..1d423544b 100644
--- a/src/features/todos/components/TodosWebview.js
+++ b/src/features/todos/components/TodosWebview.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import injectSheet from 'react-jss';
@@ -7,14 +7,15 @@ import classnames from 'classnames';
 
 import { TODOS_PARTITION_ID } from '../../../config';
 
-const styles = (theme) => ({
+const styles = theme => ({
   root: {
     background: theme.colorBackground,
     position: 'relative',
     borderLeft: [1, 'solid', theme.todos.todosLayer.borderLeftColor],
     zIndex: 300,
 
-    transform: ({ isVisible, width, isTodosServiceActive }) => `translateX(${isVisible || isTodosServiceActive ? 0 : width}px)`,
+    transform: ({ isVisible, width, isTodosServiceActive }) =>
+      `translateX(${isVisible || isTodosServiceActive ? 0 : width}px)`,
 
     '& webview': {
       height: '100%',
@@ -79,7 +80,7 @@ class TodosWebview extends Component {
     this.node.addEventListener('mouseleave', this.stopResize.bind(this));
   }
 
-  startResize = (event) => {
+  startResize = event => {
     this.setState({
       isDragging: true,
       initialPos: event.clientX,
@@ -126,7 +127,7 @@ class TodosWebview extends Component {
   startListeningToIpcMessages() {
     const { handleClientMessage } = this.props;
     if (!this.webview) return;
-    this.webview.addEventListener('ipc-message', (e) => {
+    this.webview.addEventListener('ipc-message', e => {
       // console.log(e);
       handleClientMessage({ channel: e.channel, message: e.args[0] });
     });
@@ -159,7 +160,7 @@ class TodosWebview extends Component {
         })}
         style={{ width: displayedWidth }}
         onMouseUp={() => this.stopResize()}
-        ref={(node) => {
+        ref={node => {
           this.node = node;
         }}
         id="todos-panel"
@@ -170,7 +171,7 @@ class TodosWebview extends Component {
             left: delta,
             ...(isDragging ? { width: 600, marginLeft: -200 } : {}),
           }} // This hack is required as resizing with webviews beneath behaves quite bad
-          onMouseDown={(e) => this.startResize(e)}
+          onMouseDown={e => this.startResize(e)}
         />
         {isDragging && (
           <div
@@ -188,7 +189,7 @@ class TodosWebview extends Component {
             }}
             partition={TODOS_PARTITION_ID}
             preload="./features/todos/preload.js"
-            ref={(webview) => {
+            ref={webview => {
               this.webview = webview ? webview.view : null;
             }}
             useragent={userAgent}
diff --git a/src/features/todos/containers/TodosScreen.js b/src/features/todos/containers/TodosScreen.js
index d05e24e56..536810d2d 100644
--- a/src/features/todos/containers/TodosScreen.js
+++ b/src/features/todos/containers/TodosScreen.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { observer, inject } from 'mobx-react';
 import PropTypes from 'prop-types';
 
@@ -10,24 +10,31 @@ import { TODOS_MIN_WIDTH } from '../../../config';
 import { todoActions } from '../actions';
 import ServicesStore from '../../../stores/ServicesStore';
 
-@inject('stores', 'actions') @observer
+@inject('stores', 'actions')
+@observer
 class TodosScreen extends Component {
   render() {
-    if (!todosStore || !todosStore.isFeatureActive || todosStore.isTodosPanelForceHidden) {
+    if (
+      !todosStore ||
+      !todosStore.isFeatureActive ||
+      todosStore.isTodosPanelForceHidden
+    ) {
       return null;
     }
 
     return (
       <ErrorBoundary>
         <TodosWebview
-          isTodosServiceActive={this.props.stores.services.isTodosServiceActive || false}
+          isTodosServiceActive={
+            this.props.stores.services.isTodosServiceActive || false
+          }
           isVisible={todosStore.isTodosPanelVisible}
           togglePanel={todoActions.toggleTodosPanel}
           handleClientMessage={todoActions.handleClientMessage}
-          setTodosWebview={(webview) => todoActions.setTodosWebview({ webview })}
+          setTodosWebview={webview => todoActions.setTodosWebview({ webview })}
           width={todosStore.width}
           minWidth={TODOS_MIN_WIDTH}
-          resize={(width) => todoActions.resize({ width })}
+          resize={width => todoActions.resize({ width })}
           userAgent={todosStore.userAgent}
           todoUrl={todosStore.todoUrl}
           isTodoUrlValid={todosStore.isTodoUrlValid}
diff --git a/src/features/todos/preload.js b/src/features/todos/preload.ts
index 3b86ddbc5..31d473051 100644
--- a/src/features/todos/preload.js
+++ b/src/features/todos/preload.ts
@@ -14,7 +14,7 @@ let hostMessageListener = ({ action }) => {
   }
 };
 
-window.ferdi = {
+window['ferdi'] = {
   onInitialize(ipcHostMessageListener) {
     hostMessageListener = ipcHostMessageListener;
     ipcRenderer.sendToHost(IPC.TODOS_CLIENT_CHANNEL, {
diff --git a/src/features/todos/store.js b/src/features/todos/store.js
index ec06c279d..010a029ff 100644
--- a/src/features/todos/store.js
+++ b/src/features/todos/store.js
@@ -1,7 +1,7 @@
-import { ThemeType } from '@meetfranz/theme';
 import { computed, action, observable } from 'mobx';
 import localStorage from 'mobx-localstorage';
 
+import { ThemeType } from '../../themes';
 import { todoActions } from './actions';
 import {
   CUSTOM_TODO_SERVICE,
diff --git a/src/features/utils/ActionBinding.ts b/src/features/utils/ActionBinding.ts
index 787166d44..16308fae4 100644
--- a/src/features/utils/ActionBinding.ts
+++ b/src/features/utils/ActionBinding.ts
@@ -24,6 +24,5 @@ export default class ActionBinding {
   }
 }
 
-export const createActionBindings = (actions) => (
-  actions.map((a) => new ActionBinding(a))
-);
+export const createActionBindings = actions =>
+  actions.map(a => new ActionBinding(a));
diff --git a/src/features/utils/FeatureStore.test.js b/src/features/utils/FeatureStore.test.js
index 92308bf52..1995431bd 100644
--- a/src/features/utils/FeatureStore.test.js
+++ b/src/features/utils/FeatureStore.test.js
@@ -5,9 +5,12 @@ import { createActionsFromDefinitions } from '../../actions/lib/actions';
 import { createActionBindings } from './ActionBinding';
 import { createReactions } from '../../stores/lib/Reaction';
 
-const actions = createActionsFromDefinitions({
-  countUp: {},
-}, PropTypes.checkPropTypes);
+const actions = createActionsFromDefinitions(
+  {
+    countUp: {},
+  },
+  PropTypes.checkPropTypes,
+);
 
 class TestFeatureStore extends FeatureStore {
   @observable count = 0;
@@ -15,12 +18,10 @@ class TestFeatureStore extends FeatureStore {
   reactionInvokedCount = 0;
 
   start() {
-    this._registerActions(createActionBindings([
-      [actions.countUp, this._countUp],
-    ]));
-    this._registerReactions(createReactions([
-      this._countReaction,
-    ]));
+    this._registerActions(
+      createActionBindings([[actions.countUp, this._countUp]]),
+    );
+    this._registerReactions(createReactions([this._countReaction]));
   }
 
   _countUp = () => {
@@ -29,7 +30,7 @@ class TestFeatureStore extends FeatureStore {
 
   _countReaction = () => {
     this.reactionInvokedCount += 1;
-  }
+  };
 }
 
 describe('FeatureStore', () => {
diff --git a/src/features/webControls/components/WebControls.js b/src/features/webControls/components/WebControls.js
index 97fa20dcc..5650d4cd1 100644
--- a/src/features/webControls/components/WebControls.js
+++ b/src/features/webControls/components/WebControls.js
@@ -1,8 +1,7 @@
-import React, { Component } from 'react';
+import { createRef, Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import injectSheet from 'react-jss';
-import { Icon } from '@meetfranz/ui';
 import { defineMessages, injectIntl } from 'react-intl';
 
 import {
@@ -13,6 +12,8 @@ import {
   mdiEarth,
 } from '@mdi/js';
 
+import { Icon } from '../../../components/ui/icon';
+
 const messages = defineMessages({
   goHome: {
     id: 'webControls.goHome',
@@ -121,7 +122,7 @@ class WebControls extends Component {
     }
   }
 
-  inputRef = React.createRef();
+  inputRef = createRef();
 
   state = {
     inputUrl: '',
diff --git a/src/features/webControls/containers/WebControlsScreen.js b/src/features/webControls/containers/WebControlsScreen.js
index 0273bb13e..6fba5db86 100644
--- a/src/features/webControls/containers/WebControlsScreen.js
+++ b/src/features/webControls/containers/WebControlsScreen.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { observer, inject } from 'mobx-react';
 import PropTypes from 'prop-types';
 
diff --git a/src/features/workspaces/components/CreateWorkspaceForm.js b/src/features/workspaces/components/CreateWorkspaceForm.js
index c9b05b87f..75f6d9f4a 100644
--- a/src/features/workspaces/components/CreateWorkspaceForm.js
+++ b/src/features/workspaces/components/CreateWorkspaceForm.js
@@ -1,9 +1,11 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
-import { Input, Button } from '@meetfranz/forms';
 import injectSheet from 'react-jss';
+
+import { Input } from '../../../components/ui/input/index';
+import { Button } from '../../../components/ui/button/index';
 import Form from '../../../lib/Form';
 import { required } from '../../../helpers/validation-helpers';
 import { workspaceStore } from '../index';
diff --git a/src/features/workspaces/components/EditWorkspaceForm.js b/src/features/workspaces/components/EditWorkspaceForm.js
index f562733dd..fa3ea4289 100644
--- a/src/features/workspaces/components/EditWorkspaceForm.js
+++ b/src/features/workspaces/components/EditWorkspaceForm.js
@@ -1,11 +1,12 @@
-import React, { Component, Fragment } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
 import { Link } from 'react-router';
-import { Input, Button } from '@meetfranz/forms';
 import injectSheet from 'react-jss';
 
+import { Input } from '../../../components/ui/input/index';
+import { Button } from '../../../components/ui/button/index';
 import Workspace from '../models/Workspace';
 import Service from '../../../models/Service';
 import Form from '../../../lib/Form';
diff --git a/src/features/workspaces/components/WorkspaceDrawer.js b/src/features/workspaces/components/WorkspaceDrawer.js
index 3dac77bc2..590efacd0 100644
--- a/src/features/workspaces/components/WorkspaceDrawer.js
+++ b/src/features/workspaces/components/WorkspaceDrawer.js
@@ -1,12 +1,14 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import injectSheet from 'react-jss';
 import { defineMessages, injectIntl } from 'react-intl';
-import { H1, Icon } from '@meetfranz/ui';
 import ReactTooltip from 'react-tooltip';
 
 import { mdiPlusBox, mdiCog } from '@mdi/js';
+
+import { H1 } from '../../../components/ui/headline';
+import { Icon } from '../../../components/ui/icon';
 import WorkspaceDrawerItem from './WorkspaceDrawerItem';
 import { workspaceActions } from '../actions';
 import { workspaceStore } from '../index';
diff --git a/src/features/workspaces/components/WorkspaceDrawerItem.js b/src/features/workspaces/components/WorkspaceDrawerItem.js
index 4afb9c108..d3c9fa767 100644
--- a/src/features/workspaces/components/WorkspaceDrawerItem.js
+++ b/src/features/workspaces/components/WorkspaceDrawerItem.js
@@ -1,5 +1,5 @@
 import { Menu } from '@electron/remote';
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import injectSheet from 'react-jss';
@@ -118,14 +118,12 @@ class WorkspaceDrawerItem extends Component {
           isActive ? classes.isActiveItem : null,
         ])}
         onClick={onClick}
-        onContextMenu={() =>
-          onContextMenuEditClick && contextMenu.popup()
-        }
+        onContextMenu={() => onContextMenuEditClick && contextMenu.popup()}
         data-tip={`${
           shortcutIndex <= 9
             ? `(${cmdOrCtrlShortcutKey(false)}+${altKey(
-              false,
-            )}+${shortcutIndex})`
+                false,
+              )}+${shortcutIndex})`
             : ''
         }`}
       >
diff --git a/src/features/workspaces/components/WorkspaceItem.js b/src/features/workspaces/components/WorkspaceItem.tsx
index ec7b19add..6fb02d2f5 100644
--- a/src/features/workspaces/components/WorkspaceItem.js
+++ b/src/features/workspaces/components/WorkspaceItem.tsx
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import injectSheet from 'react-jss';
@@ -16,9 +16,15 @@ const styles = theme => ({
   columnName: {},
 });
 
+type Props = {
+  classes: any;
+  workspace: any;
+  onItemClick: (workspace) => void;
+};
+
 @injectSheet(styles)
 @observer
-class WorkspaceItem extends Component {
+class WorkspaceItem extends Component<Props> {
   static propTypes = {
     classes: PropTypes.object.isRequired,
     workspace: PropTypes.instanceOf(Workspace).isRequired,
diff --git a/src/features/workspaces/components/WorkspaceServiceListItem.js b/src/features/workspaces/components/WorkspaceServiceListItem.tsx
index f6e2a2786..6e012eb1e 100644
--- a/src/features/workspaces/components/WorkspaceServiceListItem.js
+++ b/src/features/workspaces/components/WorkspaceServiceListItem.tsx
@@ -1,14 +1,12 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import { Component } from 'react';
 import { observer } from 'mobx-react';
 import injectSheet from 'react-jss';
 import classnames from 'classnames';
-import { Toggle } from '@meetfranz/forms';
 
-import Service from '../../../models/Service';
+import { Toggle } from '../../../components/ui/toggle/index';
 import ServiceIcon from '../../../components/ui/ServiceIcon';
 
-const styles = (theme) => ({
+const styles = theme => ({
   listItem: {
     height: theme.workspaces.settings.listItems.height,
     borderBottom: `1px solid ${theme.workspaces.settings.listItems.borderColor}`,
@@ -31,29 +29,22 @@ const styles = (theme) => ({
   },
 });
 
-@injectSheet(styles) @observer
-class WorkspaceServiceListItem extends Component {
-  static propTypes = {
-    classes: PropTypes.object.isRequired,
-    isInWorkspace: PropTypes.bool.isRequired,
-    onToggle: PropTypes.func.isRequired,
-    service: PropTypes.instanceOf(Service).isRequired,
-  };
+type Props = {
+  classes: any;
+  isInWorkspace: boolean;
+  onToggle: () => void;
+  service: any;
+};
 
+@injectSheet(styles)
+@observer
+class WorkspaceServiceListItem extends Component<Props> {
   render() {
-    const {
-      classes,
-      isInWorkspace,
-      onToggle,
-      service,
-    } = this.props;
+    const { classes, isInWorkspace, onToggle, service } = this.props;
 
     return (
       <div className={classes.listItem}>
-        <ServiceIcon
-          className={classes.serviceIcon}
-          service={service}
-        />
+        <ServiceIcon className={classes.serviceIcon} service={service} />
         <span
           className={classnames([
             classes.label,
diff --git a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
index 33a82cf4b..ff4e9475a 100644
--- a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
+++ b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
@@ -1,11 +1,11 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import injectSheet from 'react-jss';
 import classnames from 'classnames';
-import { Loader } from '@meetfranz/ui';
 import { defineMessages, injectIntl } from 'react-intl';
 
+import { Loader } from '../../../components/ui/loader/index';
 import { workspaceStore } from '../index';
 
 const messages = defineMessages({
diff --git a/src/features/workspaces/components/WorkspacesDashboard.js b/src/features/workspaces/components/WorkspacesDashboard.js
index 49552df6b..6e0d98ffb 100644
--- a/src/features/workspaces/components/WorkspacesDashboard.js
+++ b/src/features/workspaces/components/WorkspacesDashboard.js
@@ -1,11 +1,12 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes, inject } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
 import injectSheet from 'react-jss';
-import { Infobox } from '@meetfranz/ui';
 
 import { mdiCheckboxMarkedCircleOutline } from '@mdi/js';
+
+import { Infobox } from '../../../components/ui/infobox/index';
 import Loader from '../../../components/ui/Loader';
 import WorkspaceItem from './WorkspaceItem';
 import CreateWorkspaceForm from './CreateWorkspaceForm';
@@ -40,7 +41,8 @@ const messages = defineMessages({
   },
   workspaceFeatureInfo: {
     id: 'settings.workspaces.workspaceFeatureInfo',
-    defaultMessage: 'Ferdi Workspaces let you focus on what’s important right now. Set up different sets of services and easily switch between them at any time. You decide which services you need when and where, so we can help you stay on top of your game - or easily switch off from work whenever you want.',
+    defaultMessage:
+      'Ferdi Workspaces let you focus on what’s important right now. Set up different sets of services and easily switch between them at any time. You decide which services you need when and where, so we can help you stay on top of your game - or easily switch off from work whenever you want.',
   },
   workspaceFeatureHeadline: {
     id: 'settings.workspaces.workspaceFeatureHeadline',
diff --git a/src/features/workspaces/containers/EditWorkspaceScreen.js b/src/features/workspaces/containers/EditWorkspaceScreen.tsx
index ba7606031..8e8f8179d 100644
--- a/src/features/workspaces/containers/EditWorkspaceScreen.js
+++ b/src/features/workspaces/containers/EditWorkspaceScreen.tsx
@@ -1,26 +1,26 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { inject, observer } from 'mobx-react';
-import PropTypes from 'prop-types';
 
 import ErrorBoundary from '../../../components/util/ErrorBoundary';
 import EditWorkspaceForm from '../components/EditWorkspaceForm';
-import ServicesStore from '../../../stores/ServicesStore';
 import Workspace from '../models/Workspace';
 import { workspaceStore } from '../index';
 import { deleteWorkspaceRequest, updateWorkspaceRequest } from '../api';
-import WorkspacesStore from '../store';
+import { ServicesStore, WorkspacesStore } from '../../../stores.types';
 
-@inject('stores', 'actions') @observer
-class EditWorkspaceScreen extends Component {
-  static propTypes = {
-    actions: PropTypes.shape({
-      workspaces: PropTypes.instanceOf(WorkspacesStore),
-    }).isRequired,
-    stores: PropTypes.shape({
-      services: PropTypes.instanceOf(ServicesStore).isRequired,
-    }).isRequired,
+type Props = {
+  actions: {
+    workspaces: WorkspacesStore;
   };
+  stores: {
+    services: ServicesStore;
+  };
+};
 
+@inject('stores', 'actions')
+@observer
+class EditWorkspaceScreen extends Component<Props> {
+  // @ts-expect-error Not all code paths return a value.
   onDelete = () => {
     const { workspaceBeingEdited } = workspaceStore;
     const { actions } = this.props;
@@ -28,12 +28,14 @@ class EditWorkspaceScreen extends Component {
     actions.workspaces.delete({ workspace: workspaceBeingEdited });
   };
 
-  onSave = (values) => {
+  onSave = values => {
     const { workspaceBeingEdited } = workspaceStore;
     const { actions } = this.props;
-    const workspace = new Workspace(
-      ({ saving: true, ...workspaceBeingEdited, ...values }),
-    );
+    const workspace = new Workspace({
+      saving: true,
+      ...workspaceBeingEdited,
+      ...values,
+    });
     actions.workspaces.update({ workspace });
   };
 
diff --git a/src/features/workspaces/containers/WorkspacesScreen.js b/src/features/workspaces/containers/WorkspacesScreen.tsx
index 4828658f9..a07e92439 100644
--- a/src/features/workspaces/containers/WorkspacesScreen.js
+++ b/src/features/workspaces/containers/WorkspacesScreen.tsx
@@ -1,6 +1,5 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { inject, observer } from 'mobx-react';
-import PropTypes from 'prop-types';
 import WorkspacesDashboard from '../components/WorkspacesDashboard';
 import ErrorBoundary from '../../../components/util/ErrorBoundary';
 import { workspaceStore } from '../index';
@@ -10,16 +9,17 @@ import {
   getUserWorkspacesRequest,
   updateWorkspaceRequest,
 } from '../api';
-import WorkspacesStore from '../store';
+import { WorkspacesStore } from '../../../stores.types';
 
-@inject('stores', 'actions') @observer
-class WorkspacesScreen extends Component {
-  static propTypes = {
-    actions: PropTypes.shape({
-      workspaces: PropTypes.instanceOf(WorkspacesStore),
-    }).isRequired,
+type Props = {
+  actions: {
+    workspaces: WorkspacesStore;
   };
+};
 
+@inject('stores', 'actions')
+@observer
+class WorkspacesScreen extends Component<Props> {
   render() {
     const { actions } = this.props;
     return (
@@ -30,8 +30,8 @@ class WorkspacesScreen extends Component {
           createWorkspaceRequest={createWorkspaceRequest}
           deleteWorkspaceRequest={deleteWorkspaceRequest}
           updateWorkspaceRequest={updateWorkspaceRequest}
-          onCreateWorkspaceSubmit={(data) => actions.workspaces.create(data)}
-          onWorkspaceClick={(w) => actions.workspaces.edit({ workspace: w })}
+          onCreateWorkspaceSubmit={data => actions.workspaces.create(data)}
+          onWorkspaceClick={w => actions.workspaces.edit({ workspace: w })}
         />
       </ErrorBoundary>
     );
diff --git a/src/features/workspaces/store.js b/src/features/workspaces/store.js
index db2b69f99..0fa43b723 100644
--- a/src/features/workspaces/store.js
+++ b/src/features/workspaces/store.js
@@ -124,7 +124,7 @@ export default class WorkspacesStore extends FeatureStore {
     this.isFeatureActive = false;
   }
 
-  filterServicesByActiveWorkspace = (services) => {
+  filterServicesByActiveWorkspace = services => {
     const { activeWorkspace, isFeatureActive } = this;
     if (isFeatureActive && activeWorkspace) {
       return this.getWorkspaceServices(activeWorkspace);
@@ -134,14 +134,14 @@ export default class WorkspacesStore extends FeatureStore {
 
   getWorkspaceServices(workspace) {
     const { services } = this.stores;
-    return workspace.services.map((id) => services.one(id)).filter((s) => !!s);
+    return workspace.services.map(id => services.one(id)).filter(s => !!s);
   }
 
   // ========== PRIVATE METHODS ========= //
 
-  _getWorkspaceById = (id) => this.workspaces.find((w) => w.id === id);
+  _getWorkspaceById = id => this.workspaces.find(w => w.id === id);
 
-  _updateSettings = (changes) => {
+  _updateSettings = changes => {
     localStorage.setItem('workspaces', {
       ...this.settings,
       ...changes,
@@ -191,9 +191,15 @@ export default class WorkspacesStore extends FeatureStore {
       this.isSwitchingWorkspace = false;
       this.nextWorkspace = null;
       if (this.stores.settings.app.splitMode) {
-        const serviceNames = new Set(this.getWorkspaceServices(workspace).map(service => service.name));
-        for (const wrapper of document.querySelectorAll('.services__webview-wrapper')) {
-          wrapper.style.display = serviceNames.has(wrapper.dataset.name) ? '' : 'none';
+        const serviceNames = new Set(
+          this.getWorkspaceServices(workspace).map(service => service.name),
+        );
+        for (const wrapper of document.querySelectorAll(
+          '.services__webview-wrapper',
+        )) {
+          wrapper.style.display = serviceNames.has(wrapper.dataset.name)
+            ? ''
+            : 'none';
         }
       }
     }, 1000);
@@ -212,7 +218,9 @@ export default class WorkspacesStore extends FeatureStore {
     setTimeout(() => {
       this.isSwitchingWorkspace = false;
       if (this.stores.settings.app.splitMode) {
-        for (const wrapper of document.querySelectorAll('.services__webview-wrapper')) {
+        for (const wrapper of document.querySelectorAll(
+          '.services__webview-wrapper',
+        )) {
           wrapper.style.display = '';
         }
       }
@@ -262,7 +270,8 @@ export default class WorkspacesStore extends FeatureStore {
       const activeService = this.stores.services.active;
       const workspaceServices = this.getWorkspaceServices(this.activeWorkspace);
       if (workspaceServices.length <= 0) return;
-      const isActiveServiceInWorkspace = workspaceServices.includes(activeService);
+      const isActiveServiceInWorkspace =
+        workspaceServices.includes(activeService);
       if (!isActiveServiceInWorkspace) {
         this.actions.service.setActive({
           serviceId: workspaceServices[0].id,
@@ -288,8 +297,10 @@ export default class WorkspacesStore extends FeatureStore {
     const isWorkspaceSettingsRoute = router.location.pathname.includes(
       WORKSPACES_ROUTES.ROOT,
     );
-    const isSwitchingToSettingsRoute = !this.isSettingsRouteActive && isWorkspaceSettingsRoute;
-    const isLeavingSettingsRoute = !isWorkspaceSettingsRoute && this.isSettingsRouteActive;
+    const isSwitchingToSettingsRoute =
+      !this.isSettingsRouteActive && isWorkspaceSettingsRoute;
+    const isLeavingSettingsRoute =
+      !isWorkspaceSettingsRoute && this.isSettingsRouteActive;
 
     if (isSwitchingToSettingsRoute) {
       this.isSettingsRouteActive = true;
@@ -300,8 +311,8 @@ export default class WorkspacesStore extends FeatureStore {
     } else if (isLeavingSettingsRoute) {
       this.isSettingsRouteActive = false;
       if (
-        !this._wasDrawerOpenBeforeSettingsRoute
-        && this.isWorkspaceDrawerOpen
+        !this._wasDrawerOpenBeforeSettingsRoute &&
+        this.isWorkspaceDrawerOpen
       ) {
         workspaceActions.toggleWorkspaceDrawer();
       }
@@ -311,14 +322,15 @@ export default class WorkspacesStore extends FeatureStore {
   _cleanupInvalidServiceReferences = () => {
     const { services } = this.stores;
     const { allServicesRequest } = services;
-    const servicesHaveBeenLoaded = allServicesRequest.wasExecuted && !allServicesRequest.isError;
+    const servicesHaveBeenLoaded =
+      allServicesRequest.wasExecuted && !allServicesRequest.isError;
     // Loop through all workspaces and remove invalid service ids (locally)
     for (const workspace of this.workspaces) {
       for (const serviceId of workspace.services) {
         if (
-          servicesHaveBeenLoaded
-          && !services.one(serviceId)
-          && serviceId !== KEEP_WS_LOADED_USID
+          servicesHaveBeenLoaded &&
+          !services.one(serviceId) &&
+          serviceId !== KEEP_WS_LOADED_USID
         ) {
           workspace.services.remove(serviceId);
         }
diff --git a/src/helpers/array-helpers.ts b/src/helpers/array-helpers.ts
index ae5d8d99f..3f8806176 100644
--- a/src/helpers/array-helpers.ts
+++ b/src/helpers/array-helpers.ts
@@ -1,4 +1,5 @@
-export const shuffleArray = (arr: any[]) => arr
-  .map((a) => [Math.random(), a])
-  .sort((a, b) => a[0] - b[0])
-  .map((a) => a[1]);
+export const shuffleArray = (arr: any[]) =>
+  arr
+    .map(a => [Math.random(), a])
+    .sort((a, b) => a[0] - b[0])
+    .map(a => a[1]);
diff --git a/src/helpers/async-helpers.ts b/src/helpers/async-helpers.ts
index aae3c3928..6b1f24b5a 100644
--- a/src/helpers/async-helpers.ts
+++ b/src/helpers/async-helpers.ts
@@ -1,5 +1,3 @@
-/* eslint-disable import/prefer-default-export */
-
 export function sleep(ms: number = 0) {
-  return new Promise((r) => setTimeout(r, ms));
+  return new Promise(r => setTimeout(r, ms));
 }
diff --git a/src/helpers/i18n-helpers.ts b/src/helpers/i18n-helpers.ts
index ec7dc8e98..e6c66c7d3 100644
--- a/src/helpers/i18n-helpers.ts
+++ b/src/helpers/i18n-helpers.ts
@@ -1,52 +1,44 @@
-export function getLocale({
-  locale, locales, defaultLocale, fallbackLocale,
-}) {
-  let localeStr = locale;
-  if (locales[locale] === undefined) {
+export function getLocale({ locale, locales, fallbackLocale }) {
+  if (!locale) {
+    return fallbackLocale;
+  }
+
+  if (!locales[locale]) {
     let localeFuzzy: string | undefined;
     for (const localStr of Object.keys(locales)) {
-      if (locales && Object.hasOwnProperty.call(locales, localStr) && locale.slice(0, 2) === localStr.slice(0, 2)) {
-          localeFuzzy = localStr;
-        }
+      if (locale.slice(0, 2) === localStr.slice(0, 2)) {
+        localeFuzzy = localStr;
+      }
     }
 
-    if (localeFuzzy !== undefined) {
-      localeStr = localeFuzzy;
+    if (localeFuzzy) {
+      return localeFuzzy;
     }
   }
 
-  if (locales[localeStr] === undefined) {
-    localeStr = defaultLocale;
-  }
-
-  if (!localeStr) {
-    localeStr = fallbackLocale;
-  }
-
-  return localeStr;
+  return locale;
 }
 
 export function getSelectOptions({
-  locales, resetToDefaultText = '', automaticDetectionText = '', sort = true,
+  locales,
+  resetToDefaultText = '',
+  automaticDetectionText = '',
+  sort = true,
 }) {
   const options: object[] = [];
 
   if (resetToDefaultText) {
-    options.push(
-      {
-        value: '',
-        label: resetToDefaultText,
-      },
-    );
+    options.push({
+      value: '',
+      label: resetToDefaultText,
+    });
   }
 
   if (automaticDetectionText) {
-    options.push(
-      {
-        value: 'automatic',
-        label: automaticDetectionText,
-      },
-    );
+    options.push({
+      value: 'automatic',
+      label: automaticDetectionText,
+    });
   }
 
   options.push({
diff --git a/src/helpers/password-helpers.ts b/src/helpers/password-helpers.ts
index e5d9a4a25..053321bbf 100644
--- a/src/helpers/password-helpers.ts
+++ b/src/helpers/password-helpers.ts
@@ -1,7 +1,7 @@
-import crypto from 'crypto';
+import { createHash, BinaryLike } from 'crypto';
 
-export function hash(password: crypto.BinaryLike) {
-  return crypto.createHash('sha256').update(password).digest('base64');
+export function hash(password: BinaryLike) {
+  return createHash('sha256').update(password).digest('base64');
 }
 
 export function scorePassword(password: string) {
diff --git a/src/helpers/routing-helpers.ts b/src/helpers/routing-helpers.ts
index 18169f01b..46895aa6b 100644
--- a/src/helpers/routing-helpers.ts
+++ b/src/helpers/routing-helpers.ts
@@ -1,3 +1,4 @@
 import RouteParser from 'route-parser';
 
-export const matchRoute = (pattern: string, path: string) => new RouteParser(pattern).match(path);
+export const matchRoute = (pattern: string, path: string) =>
+  new RouteParser(pattern).match(path);
diff --git a/src/helpers/schedule-helpers.ts b/src/helpers/schedule-helpers.ts
index 55b7c1e6f..37caffd79 100644
--- a/src/helpers/schedule-helpers.ts
+++ b/src/helpers/schedule-helpers.ts
@@ -1,17 +1,9 @@
-/* eslint-disable import/prefer-default-export */
-
 export function isInTimeframe(start: string, end: string) {
-  const [
-    startHourStr,
-    startMinuteStr,
-  ] = start.split(':');
+  const [startHourStr, startMinuteStr] = start.split(':');
   const startHour = Number.parseInt(startHourStr, 10);
   const startMinute = Number.parseInt(startMinuteStr, 10);
 
-  const [
-    endHourStr,
-    endMinuteStr,
-  ] = end.split(':');
+  const [endHourStr, endMinuteStr] = end.split(':');
   const endHour = Number.parseInt(endHourStr, 10);
   const endMinute = Number.parseInt(endMinuteStr, 10);
 
@@ -20,46 +12,31 @@ export function isInTimeframe(start: string, end: string) {
 
   // Check if the end time is before the start time (scheduled overnight)
   // as we need to change our checks based on this
-  const endBeforeStart = (startHour > endHour || (startHour === endHour && startMinute > endMinute));
+  const endBeforeStart =
+    startHour > endHour || (startHour === endHour && startMinute > endMinute);
 
   if (
     // End is after start (e.g. 09:00-17:00)
-    !endBeforeStart
+    !endBeforeStart &&
     // Check if past start
-    && ((currentHour > startHour
-        || (
-          currentHour === startHour
-          && currentMinute >= startMinute
-        )
-    )
-      // Check that not past end
-      && (currentHour < endHour
-        || (
-          currentHour === endHour
-          && currentMinute < endMinute
-        )
-      ))
+    (currentHour > startHour ||
+      (currentHour === startHour && currentMinute >= startMinute)) &&
+    // Check that not past end
+    (currentHour < endHour ||
+      (currentHour === endHour && currentMinute < endMinute))
   ) {
     // We are in scheduled timeframe
     return true;
   }
   if (
     // End is before start (e.g. 17:00-09:00)
-    endBeforeStart
+    endBeforeStart &&
     // Check if past start
-    && ((currentHour > startHour
-        || (
-          currentHour === startHour
-          && currentMinute >= startMinute
-        )
-    )
+    (currentHour > startHour ||
+      (currentHour === startHour && currentMinute >= startMinute) ||
       // Check that we are not past end
-      || (currentHour < endHour
-        || (
-          currentHour === endHour
-          && currentMinute < endMinute
-        )
-      ))
+      currentHour < endHour ||
+      (currentHour === endHour && currentMinute < endMinute))
   ) {
     // We are also in scheduled timeframe
     return true;
diff --git a/src/helpers/url-helpers.ts b/src/helpers/url-helpers.ts
index 1e87ecabb..135f06cbf 100644
--- a/src/helpers/url-helpers.ts
+++ b/src/helpers/url-helpers.ts
@@ -29,7 +29,10 @@ export async function openPath(folderName: string) {
 }
 
 // TODO: Need to verify and fix/remove the skipping logic. Ideally, we should never skip this check
-export function openExternalUrl(url: string | URL, skipValidityCheck: boolean = false) {
+export function openExternalUrl(
+  url: string | URL,
+  skipValidityCheck: boolean = false,
+) {
   debug('Open url:', url, 'with skipValidityCheck:', skipValidityCheck);
   if (skipValidityCheck || isValidExternalURL(url)) {
     shell.openExternal(url.toString());
diff --git a/src/helpers/userAgent-helpers.ts b/src/helpers/userAgent-helpers.ts
index 091a76400..c1e8e02da 100644
--- a/src/helpers/userAgent-helpers.ts
+++ b/src/helpers/userAgent-helpers.ts
@@ -1,13 +1,18 @@
-import os from 'os';
+import { cpus } from 'os';
 import macosVersion from 'macos-version';
 import { chrome } from 'useragent-generator';
 import {
-  chromeVersion, isMac, isWindows, is64Bit, osArch, osRelease,
+  chromeVersion,
+  isMac,
+  isWindows,
+  is64Bit,
+  osArch,
+  osRelease,
 } from '../environment';
 
 function macOS() {
   const version = macosVersion() || '';
-  let cpuName = os.cpus()[0].model.split(' ')[0];
+  let cpuName = cpus()[0].model.split(' ')[0];
   if (cpuName && /\(/.test(cpuName)) {
     cpuName = cpuName.split('(')[0];
   }
diff --git a/src/i18n/apply-branding.ts b/src/i18n/apply-branding.ts
index 801a4a525..7943c099d 100644
--- a/src/i18n/apply-branding.ts
+++ b/src/i18n/apply-branding.ts
@@ -1,8 +1,8 @@
 /**
  * Apply Ferdi branding to i18n translations
  */
-import fs from 'fs-extra';
-import path from 'path';
+import { readdirSync, readJson, writeJson } from 'fs-extra';
+import { join } from 'path';
 
 console.log('Applying Ferdi branding to translations...');
 
@@ -31,13 +31,13 @@ const replace = {
   '!!!': '',
 };
 
-const locales = path.join(__dirname, 'locales');
-const files = fs.readdirSync(locales);
+const locales = join(__dirname, 'locales');
+const files = readdirSync(locales);
 
 const replaceFind = Object.keys(replace);
 const replaceReplaceWith = Object.values(replace);
 
-const replaceStr = (str, find, replaceWith) => {
+const replaceStr = (str: string, find: any[], replaceWith: string[]) => {
   for (const [i, element] of find.entries()) {
     str = str.replace(new RegExp(element, 'gi'), replaceWith[i]);
   }
@@ -49,8 +49,8 @@ files.forEach(async file => {
   if (ignoreFiles.has(file)) return;
 
   // Read locale data
-  const filePath = path.join(locales, file);
-  const locale = await fs.readJson(filePath);
+  const filePath = join(locales, file);
+  const locale = await readJson(filePath);
 
   // Replace branding
   for (const key in locale) {
@@ -59,7 +59,7 @@ files.forEach(async file => {
     }
   }
 
-  await fs.writeJson(filePath, locale, {
+  await writeJson(filePath, locale, {
     spaces: 2,
     EOL: '\n',
   });
diff --git a/src/i18n/locales/af.json b/src/i18n/locales/af.json
index 041b02632..ff10978c4 100644
--- a/src/i18n/locales/af.json
+++ b/src/i18n/locales/af.json
@@ -210,7 +210,9 @@
   "settings.app.form.customTodoServer": "Custom Todo Server",
   "settings.app.form.darkMode": "Enable Dark Mode",
   "settings.app.form.enableGPUAcceleration": "Enable GPU Acceleration",
+  "settings.app.form.enableGlobalHideShortcut": "Enable Global shortcut to hide Ferdi",
   "settings.app.form.enableLock": "Enable Password Lock",
+  "settings.app.form.enableLongPressServiceHint": "Enable service shortcut hint on long press",
   "settings.app.form.enableMenuBar": "Always show Ferdi in Menu Bar",
   "settings.app.form.enableSpellchecking": "Enable spell checking",
   "settings.app.form.enableSystemTray": "Always show Ferdi in System Tray",
@@ -309,6 +311,7 @@
   "settings.service.form.enableHibernation": "Enable hibernation",
   "settings.service.form.enableNotification": "Enable notifications",
   "settings.service.form.enableService": "Enable service",
+  "settings.service.form.enableWakeUp": "Enable wake up",
   "settings.service.form.headlineBadges": "Unread message badges",
   "settings.service.form.headlineDarkReaderSettings": "Dark Reader Settings",
   "settings.service.form.headlineGeneral": "General",
diff --git a/src/i18n/locales/ar.json b/src/i18n/locales/ar.json
index 2ab80e865..8183d193f 100644
--- a/src/i18n/locales/ar.json
+++ b/src/i18n/locales/ar.json
@@ -210,7 +210,9 @@
   "settings.app.form.customTodoServer": "Custom Todo Server",
   "settings.app.form.darkMode": "تمكين الوضع المظلم",
   "settings.app.form.enableGPUAcceleration": "ت�عيل التسريع بوحدة معالجة الرسومات",
+  "settings.app.form.enableGlobalHideShortcut": "Enable Global shortcut to hide Ferdi",
   "settings.app.form.enableLock": "ت�عيل الق�ل بكلمة المرور",
+  "settings.app.form.enableLongPressServiceHint": "Enable service shortcut hint on long press",
   "settings.app.form.enableMenuBar": "Always show Ferdi in Menu Bar",
   "settings.app.form.enableSpellchecking": "ت�عيل التصحيح الإملائي",
   "settings.app.form.enableSystemTray": "Always show Ferdi in System Tray",
@@ -309,6 +311,7 @@
   "settings.service.form.enableHibernation": "Enable hibernation",
   "settings.service.form.enableNotification": "ت�عيل الإشعارات",
   "settings.service.form.enableService": "ت�عيل الخدمة",
+  "settings.service.form.enableWakeUp": "Enable wake up",
   "settings.service.form.headlineBadges": "شارات الرسائل غير المقروءة",
   "settings.service.form.headlineDarkReaderSettings": "إعدادات وضع القارئ المظلم",
   "settings.service.form.headlineGeneral": "عام",
diff --git a/src/i18n/locales/be.json b/src/i18n/locales/be.json
index 8caf73fe6..5e5b594fe 100644
--- a/src/i18n/locales/be.json
+++ b/src/i18n/locales/be.json
@@ -210,7 +210,9 @@
   "settings.app.form.customTodoServer": "Custom Todo Server",
   "settings.app.form.darkMode": "Enable Dark Mode",
   "settings.app.form.enableGPUAcceleration": "Enable GPU Acceleration",
+  "settings.app.form.enableGlobalHideShortcut": "Enable Global shortcut to hide Ferdi",
   "settings.app.form.enableLock": "Enable Password Lock",
+  "settings.app.form.enableLongPressServiceHint": "Enable service shortcut hint on long press",
   "settings.app.form.enableMenuBar": "Always show Ferdi in Menu Bar",
   "settings.app.form.enableSpellchecking": "Enable spell checking",
   "settings.app.form.enableSystemTray": "Always show Ferdi in System Tray",
@@ -309,6 +311,7 @@
   "settings.service.form.enableHibernation": "Enable hibernation",
   "settings.service.form.enableNotification": "Enable notifications",
   "settings.service.form.enableService": "Enable service",
+  "settings.service.form.enableWakeUp": "Enable wake up",
   "settings.service.form.headlineBadges": "Unread message badges",
   "settings.service.form.headlineDarkReaderSettings": "Dark Reader Settings",
   "settings.service.form.headlineGeneral": "General",
diff --git a/src/i18n/locales/bs.json b/src/i18n/locales/bs.json
index 041b02632..ff10978c4 100644
--- a/src/i18n/locales/bs.json
+++ b/src/i18n/locales/bs.json
@@ -210,7 +210,9 @@
   "settings.app.form.customTodoServer": "Custom Todo Server",
   "settings.app.form.darkMode": "Enable Dark Mode",
   "settings.app.form.enableGPUAcceleration": "Enable GPU Acceleration",
+  "settings.app.form.enableGlobalHideShortcut": "Enable Global shortcut to hide Ferdi",
   "settings.app.form.enableLock": "Enable Password Lock",
+  "settings.app.form.enableLongPressServiceHint": "Enable service shortcut hint on long press",
   "settings.app.form.enableMenuBar": "Always show Ferdi in Menu Bar",
   "settings.app.form.enableSpellchecking": "Enable spell checking",
   "settings.app.form.enableSystemTray": "Always show Ferdi in System Tray",
@@ -309,6 +311,7 @@
   "settings.service.form.enableHibernation": "Enable hibernation",
   "settings.service.form.enableNotification": "Enable notifications",
   "settings.service.form.enableService": "Enable service",
+  "settings.service.form.enableWakeUp": "Enable wake up",
   "settings.service.form.headlineBadges": "Unread message badges",
   "settings.service.form.headlineDarkReaderSettings": "Dark Reader Settings",
   "settings.service.form.headlineGeneral": "General",
diff --git a/src/i18n/locales/ca.json b/src/i18n/locales/ca.json
index 6e33be919..b04591bee 100644
--- a/src/i18n/locales/ca.json
+++ b/src/i18n/locales/ca.json
@@ -210,7 +210,9 @@
   "settings.app.form.customTodoServer": "Custom Todo Server",
   "settings.app.form.darkMode": "Activar el Mode Fosc",
   "settings.app.form.enableGPUAcceleration": "Activar acceleració GPU",
+  "settings.app.form.enableGlobalHideShortcut": "Enable Global shortcut to hide Ferdi",
   "settings.app.form.enableLock": "Enable Password Lock",
+  "settings.app.form.enableLongPressServiceHint": "Enable service shortcut hint on long press",
   "settings.app.form.enableMenuBar": "Always show Ferdi in Menu Bar",
   "settings.app.form.enableSpellchecking": "Habilita la comprobació ortogràfica",
   "settings.app.form.enableSystemTray": "Always show Ferdi in System Tray",
@@ -309,6 +311,7 @@
   "settings.service.form.enableHibernation": "Enable hibernation",
   "settings.service.form.enableNotification": "Activa les notificacions",
   "settings.service.form.enableService": "Activa el servei",
+  "settings.service.form.enableWakeUp": "Enable wake up",
   "settings.service.form.headlineBadges": "Insígnies de missatges no llegits",
   "settings.service.form.headlineDarkReaderSettings": "Dark Reader Settings",
   "settings.service.form.headlineGeneral": "General",
diff --git a/src/i18n/locales/cs.json b/src/i18n/locales/cs.json
index 08468e307..edb840722 100644
--- a/src/i18n/locales/cs.json
+++ b/src/i18n/locales/cs.json
@@ -210,7 +210,9 @@
   "settings.app.form.customTodoServer": "Custom Todo Server",
   "settings.app.form.darkMode": "Povolit Tmavý vzhled",
   "settings.app.form.enableGPUAcceleration": "Aktivovat GPU zrychlení",
+  "settings.app.form.enableGlobalHideShortcut": "Enable Global shortcut to hide Ferdi",
   "settings.app.form.enableLock": "Enable Password Lock",
+  "settings.app.form.enableLongPressServiceHint": "Enable service shortcut hint on long press",
   "settings.app.form.enableMenuBar": "Always show Ferdi in Menu Bar",
   "settings.app.form.enableSpellchecking": "Zapnout kontrolu pravopisu",
   "settings.app.form.enableSystemTray": "Always show Ferdi in System Tray",
@@ -309,6 +311,7 @@
   "settings.service.form.enableHibernation": "Enable hibernation",
   "settings.service.form.enableNotification": "Povolit upozornění",
   "settings.service.form.enableService": "Povolit službu",
+  "settings.service.form.enableWakeUp": "Enable wake up",
   "settings.service.form.headlineBadges": "Odznaky nepře�tených zpráv",
   "settings.service.form.headlineDarkReaderSettings": "Dark Reader Settings",
   "settings.service.form.headlineGeneral": "Obecné",
diff --git a/src/i18n/locales/da.json b/src/i18n/locales/da.json
index 9a6d0cf7e..fbe907f10 100644
--- a/src/i18n/locales/da.json
+++ b/src/i18n/locales/da.json
@@ -210,7 +210,9 @@
   "settings.app.form.customTodoServer": "Custom Todo Server",
   "settings.app.form.darkMode": "Aktiver mørk tilstand",
   "settings.app.form.enableGPUAcceleration": "Aktiver GPU-acceleration",
+  "settings.app.form.enableGlobalHideShortcut": "Enable Global shortcut to hide Ferdi",
   "settings.app.form.enableLock": "Aktiver adgangskodelås",
+  "settings.app.form.enableLongPressServiceHint": "Enable service shortcut hint on long press",
   "settings.app.form.enableMenuBar": "Always show Ferdi in Menu Bar",
   "settings.app.form.enableSpellchecking": "Aktiver stavekontrol",
   "settings.app.form.enableSystemTray": "Always show Ferdi in System Tray",
@@ -309,6 +311,7 @@
   "settings.service.form.enableHibernation": "Enable hibernation",
   "settings.service.form.enableNotification": "Aktiver notifikationer",
   "settings.service.form.enableService": "Aktiverede tjenester",
+  "settings.service.form.enableWakeUp": "Enable wake up",
   "settings.service.form.headlineBadges": "Ulæste beskedbadges",
   "settings.service.form.headlineDarkReaderSettings": "Mørk læser indstillinger",
   "settings.service.form.headlineGeneral": "Generelt",
diff --git a/src/i18n/locales/de.json b/src/i18n/locales/de.json
index 0baa4cf5e..a5498fcc9 100644
--- a/src/i18n/locales/de.json
+++ b/src/i18n/locales/de.json
@@ -210,7 +210,9 @@
   "settings.app.form.customTodoServer": "Custom Todo Server",
   "settings.app.form.darkMode": "Dark Mode aktivieren",
   "settings.app.form.enableGPUAcceleration": "Hardwarebeschleunigung aktivieren",
+  "settings.app.form.enableGlobalHideShortcut": "Enable Global shortcut to hide Ferdi",
   "settings.app.form.enableLock": "Passwort-Sperre aktivieren",
+  "settings.app.form.enableLongPressServiceHint": "Enable service shortcut hint on long press",
   "settings.app.form.enableMenuBar": "Ferdi immer in der Menüleiste anzeigen",
   "settings.app.form.enableSpellchecking": "Rechtschreibprüfung aktivieren",
   "settings.app.form.enableSystemTray": "Always show Ferdi in System Tray",
@@ -309,6 +311,7 @@
   "settings.service.form.enableHibernation": "Ruhezustand aktivieren",
   "settings.service.form.enableNotification": "Benachrichtigungen aktivieren",
   "settings.service.form.enableService": "Dienst aktivieren",
+  "settings.service.form.enableWakeUp": "Enable wake up",
   "settings.service.form.headlineBadges": "Nachrichten-Badge",
   "settings.service.form.headlineDarkReaderSettings": "Dark Reader Einstellungen",
   "settings.service.form.headlineGeneral": "Allgemeines",
diff --git a/src/i18n/locales/el.json b/src/i18n/locales/el.json
index 4c658297e..22a3a0bc5 100644
--- a/src/i18n/locales/el.json
+++ b/src/i18n/locales/el.json
@@ -210,7 +210,9 @@
   "settings.app.form.customTodoServer": "Custom Todo Server",
   "settings.app.form.darkMode": "Enable Dark Mode",
   "settings.app.form.enableGPUAcceleration": "Ενε�γοποιήση Ενίσχυσης GPU ",
+  "settings.app.form.enableGlobalHideShortcut": "Enable Global shortcut to hide Ferdi",
   "settings.app.form.enableLock": "Enable Password Lock",
+  "settings.app.form.enableLongPressServiceHint": "Enable service shortcut hint on long press",
   "settings.app.form.enableMenuBar": "Always show Ferdi in Menu Bar",
   "settings.app.form.enableSpellchecking": "Ενε�γοποίηση ο�θογ�αφικο� ελέγχου",
   "settings.app.form.enableSystemTray": "Always show Ferdi in System Tray",
@@ -309,6 +311,7 @@
   "settings.service.form.enableHibernation": "Enable hibernation",
   "settings.service.form.enableNotification": "Ενε�γοποίηση ειδοποιήσεων",
   "settings.service.form.enableService": "Ενε�γοποίηση υπη�εσίας",
+  "settings.service.form.enableWakeUp": "Enable wake up",
   "settings.service.form.headlineBadges": "Εικονίδια μη αναγνωσμένου μην�ματος",
   "settings.service.form.headlineDarkReaderSettings": "Dark Reader Settings",
   "settings.service.form.headlineGeneral": "Γενικά",
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 812ec8c4c..d5cf072f6 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -210,7 +210,9 @@
   "settings.app.form.customTodoServer": "Custom Todo Server",
   "settings.app.form.darkMode": "Enable Dark Mode",
   "settings.app.form.enableGPUAcceleration": "Enable GPU Acceleration",
+  "settings.app.form.enableGlobalHideShortcut": "Enable Global shortcut to hide Ferdi",
   "settings.app.form.enableLock": "Enable Password Lock",
+  "settings.app.form.enableLongPressServiceHint": "Enable service shortcut hint on long press",
   "settings.app.form.enableMenuBar": "Always show Ferdi in Menu Bar",
   "settings.app.form.enableSpellchecking": "Enable spell checking",
   "settings.app.form.enableSystemTray": "Always show Ferdi in System Tray",
@@ -309,6 +311,7 @@
   "settings.service.form.enableHibernation": "Enable hibernation",
   "settings.service.form.enableNotification": "Enable notifications",
   "settings.service.form.enableService": "Enable service",
+  "settings.service.form.enableWakeUp": "Enable wake up",
   "settings.service.form.headlineBadges": "Unread message badges",
   "settings.service.form.headlineDarkReaderSettings": "Dark Reader Settings",
   "settings.service.form.headlineGeneral": "General",
diff --git a/src/i18n/locales/es.json b/src/i18n/locales/es.json
index 518e862ba..8f3f05c2c 100644
--- a/src/i18n/locales/es.json
+++ b/src/i18n/locales/es.json
@@ -210,7 +210,9 @@
   "settings.app.form.customTodoServer": "Servidor de TODO personalizado",
   "settings.app.form.darkMode": "Habilitar modo oscuro",
   "settings.app.form.enableGPUAcceleration": "Habilitar aceleración de GPU",
+  "settings.app.form.enableGlobalHideShortcut": "Habilitar acceso directo global para ocultar Ferdi",
   "settings.app.form.enableLock": "Activar bloqueo por contraseña",
+  "settings.app.form.enableLongPressServiceHint": "Habilitar sugerencia de acceso directo al servicio con pulsación larga",
   "settings.app.form.enableMenuBar": "Mostrar a Ferdi en la barra de menús",
   "settings.app.form.enableSpellchecking": "Activar corrección ortográfica",
   "settings.app.form.enableSystemTray": "Mostrar siempre icono de Ferdi en la bandeja del sistema",
@@ -309,6 +311,7 @@
   "settings.service.form.enableHibernation": "Habilitar hibernación",
   "settings.service.form.enableNotification": "Activar notificaciones",
   "settings.service.form.enableService": "Activar servicio",
+  "settings.service.form.enableWakeUp": "Enable wake up",
   "settings.service.form.headlineBadges": "Insignias de mensaje no leídos",
   "settings.service.form.headlineDarkReaderSettings": "Configuración del Lector Oscuro",
   "settings.service.form.headlineGeneral": "General",
diff --git a/src/i18n/locales/fi.json b/src/i18n/locales/fi.json
index e6c756935..dbac3aa59 100644
--- a/src/i18n/locales/fi.json
+++ b/src/i18n/locales/fi.json
@@ -186,7 +186,7 @@
   "settings.account.tryReloadServices": "Yritä uudelleen",
   "settings.account.tryReloadUserInfoRequest": "Yritä uudelleen",
   "settings.account.userInfoRequestFailed": "Käyttäjätietoja ei voitu ladata",
-  "settings.account.yourLicense": "Your Ferdi License:",
+  "settings.account.yourLicense": "Ferdi-lisenssisi:",
   "settings.app.accentColorInfo": "Write your accent color in a CSS-compatible format. (Default: {defaultAccentColor})",
   "settings.app.buttonClearAllCache": "Tyhjennä välimuisti",
   "settings.app.buttonInstallUpdate": "Käynnistä uudelleen ja asenna päivitys",
@@ -210,7 +210,9 @@
   "settings.app.form.customTodoServer": "Custom Todo Server",
   "settings.app.form.darkMode": "Ota tumma tila käyttöön",
   "settings.app.form.enableGPUAcceleration": "Ota Gpu-kiihdytys käyttöön",
+  "settings.app.form.enableGlobalHideShortcut": "Enable Global shortcut to hide Ferdi",
   "settings.app.form.enableLock": "Ota Salasanan lukitus käyttöön",
+  "settings.app.form.enableLongPressServiceHint": "Enable service shortcut hint on long press",
   "settings.app.form.enableMenuBar": "Always show Ferdi in Menu Bar",
   "settings.app.form.enableSpellchecking": "Ota oikoluku käyttöön",
   "settings.app.form.enableSystemTray": "Always show Ferdi in System Tray",
@@ -309,6 +311,7 @@
   "settings.service.form.enableHibernation": "Enable hibernation",
   "settings.service.form.enableNotification": "Ota ilmoitukset käyttöön",
   "settings.service.form.enableService": "Ota palvelu käyttöön",
+  "settings.service.form.enableWakeUp": "Enable wake up",
   "settings.service.form.headlineBadges": "Lukemattomat viestit",
   "settings.service.form.headlineDarkReaderSettings": "Tumman tilan asetukset",
   "settings.service.form.headlineGeneral": "Yleinen",
diff --git a/src/i18n/locales/fr.json b/src/i18n/locales/fr.json
index 80b32f495..7e2c591e2 100644
--- a/src/i18n/locales/fr.json
+++ b/src/i18n/locales/fr.json
@@ -53,7 +53,7 @@
   "infobar.requiredRequestsFailed": "Impossible d'accéder aux services et informations de l'utilisateur",
   "infobar.servicesUpdated": "Vos services ont été mis à jour.",
   "infobar.updateAvailable": "Une nouvelle mise à jour de Ferdi est disponible.",
-  "infobox.dismiss": "Dismiss",
+  "infobox.dismiss": "Abandonner",
   "invite.email.label": "Adresse Email",
   "invite.headline.friends": "Invitez 3 amis ou collègues",
   "invite.name.label": "Nom",
@@ -74,7 +74,7 @@
   "login.email.label": "Adresse Email",
   "login.headline": "S'identifier",
   "login.invalidCredentials": "Email ou mot de passe invalide",
-  "login.link.password": "Reset password",
+  "login.link.password": "Réinitialiser le mot de passe",
   "login.link.signup": "Créer un compte gratuit",
   "login.password.label": "Mot de passe",
   "login.serverLogout": "Votre session a expiré. Reconnectez-vous s'il vous plaît.",
@@ -86,40 +86,40 @@
   "menu.app.autohideMenuBar": "Cacher automatiquement la barre de menu",
   "menu.app.checkForUpdates": "Vérifier les mises à jour",
   "menu.app.hide": "Masquer",
-  "menu.app.hideOthers": "Hide Others",
-  "menu.app.unhide": "Unhide",
+  "menu.app.hideOthers": "Masquer les autres",
+  "menu.app.unhide": "Afficher l’élément masqué",
   "menu.edit": "Éditer",
-  "menu.edit.copy": "Copy",
-  "menu.edit.cut": "Cut",
+  "menu.edit.copy": "Copier",
+  "menu.edit.cut": "Couper",
   "menu.edit.delete": "Supprimer",
   "menu.edit.emojiSymbols": "Emoji & Symboles",
   "menu.edit.findInPage": "Rechercher dans la page",
-  "menu.edit.paste": "Paste",
-  "menu.edit.pasteAndMatchStyle": "Paste And Match Style",
-  "menu.edit.redo": "Redo",
-  "menu.edit.selectAll": "Select All",
+  "menu.edit.paste": "Coller",
+  "menu.edit.pasteAndMatchStyle": "Coller en conservant la mise en forme",
+  "menu.edit.redo": "Rétablir",
+  "menu.edit.selectAll": "Sélectionner tout",
   "menu.edit.speech": "Synthèse vocale",
   "menu.edit.startDictation": "Démarrer la dictée",
   "menu.edit.startSpeaking": "Démarrer la synthèse vocale",
   "menu.edit.stopSpeaking": "Arrêter la synthèse vocale",
-  "menu.edit.undo": "Undo",
+  "menu.edit.undo": "Annuler",
   "menu.file": "Fichier",
-  "menu.help": "Help",
+  "menu.help": "Aide",
   "menu.help.changelog": "Liste des modifications",
   "menu.help.debugInfo": "Copier les informations de Debug",
   "menu.help.debugInfoCopiedBody": "Les informations de Debug ont été copié dans votre presse-papier.",
   "menu.help.debugInfoCopiedHeadline": "Information de Debug de Ferdi",
-  "menu.help.importExportData": "Import/Export Configuration Data",
+  "menu.help.importExportData": "Importer/Exporter les données de configuration",
   "menu.help.learnMore": "En savoir plus",
   "menu.help.privacy": "Déclaration de confidentialité",
   "menu.help.publishDebugInfo": "Publier les informations de débogage",
   "menu.help.support": "Assistance",
   "menu.help.tos": "Conditions d'utilisation",
   "menu.services": "Services",
-  "menu.services.activatePreviousService": "Activate previous service",
-  "menu.services.addNewService": "Add New Service...",
+  "menu.services.activatePreviousService": "Activer le service précédent",
+  "menu.services.addNewService": "Ajouter un nouveau service...",
   "menu.services.goHome": "Accueil",
-  "menu.services.setNextServiceActive": "Activate next service",
+  "menu.services.setNextServiceActive": "Activer le service suivant",
   "menu.todos": "Todos",
   "menu.todos.enableTodos": "Activer Todos",
   "menu.view": "Aperçu",
@@ -127,7 +127,7 @@
   "menu.view.forward": "Avancer",
   "menu.view.lockFerdi": "Verrouiller Ferdi",
   "menu.view.openQuickSwitch": "Ouvrir le changement rapide",
-  "menu.view.reloadFerdi": "Reload Ferdi",
+  "menu.view.reloadFerdi": "Recharger Ferdi",
   "menu.view.reloadService": "Redémarrer le service",
   "menu.view.reloadTodos": "Recharger les Todos",
   "menu.view.resetZoom": "Taille actuelle",
@@ -147,11 +147,11 @@
   "menu.workspaces.defaultWorkspace": "Tous les services",
   "menu.workspaces.openWorkspaceDrawer": "Ouvrir l'espace de travail",
   "password.email.label": "Adresse Email",
-  "password.headline": "Reset password",
+  "password.headline": "Réinitialiser le mot de passe",
   "password.link.login": "Connectez-vous à votre compte",
   "password.link.signup": "Créer un compte gratuit",
-  "password.noUser": "Aucun utilisateur n'a été trouvé avec cette adresse email",
-  "password.successInfo": "Your new password was sent to your email address",
+  "password.noUser": "Aucun utilisateur n'a été trouvé avec cette adresse de courriel",
+  "password.successInfo": "Votre nouveau mot de passe a été envoyé à votre adresse de courriel",
   "service.crashHandler.action": "Recharger {name}",
   "service.crashHandler.autoReload": "Tentative de restauration automatique de {name} dans {seconds} secondes",
   "service.crashHandler.headline": "Oh non!",
@@ -166,7 +166,7 @@
   "service.webviewLoader.loading": "Chargement de {service}",
   "services.getStarted": "Commencer",
   "services.login": "Veuillez vous connecter pour utiliser Ferdi.",
-  "services.serverInfo": "Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner. If you are switching over (from one of the hosted servers) to using Ferdi without an account, please be informed that you can export your data from that server and subsequently import it using the Help menu to resurrect all your workspaces and configured services!",
+  "services.serverInfo": "Optionnellement, vous pouvez changer de serveur Ferdi en cliquant sur le contrôle dans le coin inférieur gauche. Si vous basculez d'un serveur hébergé à une utilisation de Ferdi sans compte, vous pouvez exporter vos données depuis ce serveur et ensuite l'importer en utilisant le menu Aide pour ressusciter tous vos espaces de travail et services configurés !",
   "services.serverless": "Utiliser Ferdi sans compte",
   "services.welcome": "Bienvenue dans Ferdi",
   "settings.account.account.editButton": "Modifier le compte",
@@ -187,11 +187,11 @@
   "settings.account.tryReloadUserInfoRequest": "Réessayer",
   "settings.account.userInfoRequestFailed": "Impossible de charger les informations de l'utilisateur",
   "settings.account.yourLicense": "Votre licence Ferdi :",
-  "settings.app.accentColorInfo": "Write your accent color in a CSS-compatible format. (Default: {defaultAccentColor})",
+  "settings.app.accentColorInfo": "Écrivez votre couleur d'accentuation dans un format compatible avec CSS. (Par défaut: {defaultAccentColor})",
   "settings.app.buttonClearAllCache": "Vider le cache",
   "settings.app.buttonInstallUpdate": "Redémarrer et installer la mise à jour",
   "settings.app.buttonOpenFerdiProfileFolder": "Afficher le dossier du profil",
-  "settings.app.buttonOpenFerdiServiceRecipesFolder": "Open Service Recipes folder",
+  "settings.app.buttonOpenFerdiServiceRecipesFolder": "Ouvrir le dossier des recettes de service (Recipes)",
   "settings.app.buttonSearchForUpdate": "Vérifier les mises à jour",
   "settings.app.cacheInfo": "Le cache de Ferdi occupe actuellement {size} en espace disque.",
   "settings.app.cacheNotCleared": "Impossible de vider toute la cache",
@@ -204,16 +204,18 @@
   "settings.app.form.autoLaunchOnStart": "Lancer Ferdi au démarrage",
   "settings.app.form.automaticUpdates": "Activer les mises à jour",
   "settings.app.form.beta": "Accepter les versions bêta",
-  "settings.app.form.clipboardNotifications": "Don't show notifications for clipboard events",
-  "settings.app.form.closeToSystemTray": "Afficher Ferdi dans la barre d'état système",
-  "settings.app.form.confirmOnQuit": "Confirm when quitting Ferdi",
-  "settings.app.form.customTodoServer": "Custom Todo Server",
+  "settings.app.form.clipboardNotifications": "Ne pas afficher les notifications pour les événements du presse-papiers",
+  "settings.app.form.closeToSystemTray": "Lors de la fermeture, laisser Ferdi actif dans la barre d'état système",
+  "settings.app.form.confirmOnQuit": "Confirmer lorsque vous quittez Ferdi",
+  "settings.app.form.customTodoServer": "Serveur Todo personnalisé",
   "settings.app.form.darkMode": "Activer le mode sombre",
   "settings.app.form.enableGPUAcceleration": "Activer l'accélération GPU",
+  "settings.app.form.enableGlobalHideShortcut": "Activer le raccourci global pour masquer Ferdi",
   "settings.app.form.enableLock": "Activer le verrouillage par mot de passe",
-  "settings.app.form.enableMenuBar": "Always show Ferdi in Menu Bar",
+  "settings.app.form.enableLongPressServiceHint": "Activer le service lors d'un appui long sur son raccourci",
+  "settings.app.form.enableMenuBar": "Toujours afficher Ferdi dans la barre de menu",
   "settings.app.form.enableSpellchecking": "Activer la vérification orthographique",
-  "settings.app.form.enableSystemTray": "Always show Ferdi in System Tray",
+  "settings.app.form.enableSystemTray": "Toujours afficher l'icône Ferdi dans la zone de notification",
   "settings.app.form.enableTodos": "Activer Ferdi Todos",
   "settings.app.form.hibernateOnStartup": "Garder les services en veille prolongée au démarrage",
   "settings.app.form.hibernationStrategy": "Stratégie d'hibernation",
@@ -225,7 +227,7 @@
   "settings.app.form.minimizeToSystemTray": "Minimiser Ferdi dans la zone de notification",
   "settings.app.form.navigationBarBehaviour": "Comportement de la barre de navigation",
   "settings.app.form.notifyTaskBarOnMessage": "Notification sur la barre des tâches/le dock lors d'un nouveau message",
-  "settings.app.form.passwordToggle": "Password toggle",
+  "settings.app.form.passwordToggle": "Afficher le mot de passe",
   "settings.app.form.predefinedTodoServer": "Serveur Todo",
   "settings.app.form.privateNotifications": "Ne pas afficher le contenu des notifications",
   "settings.app.form.reloadAfterResume": "Recharger Ferdi après la reprise du système",
@@ -233,38 +235,38 @@
   "settings.app.form.scheduledDNDEnabled": "Activer Ne-pas-Déranger",
   "settings.app.form.scheduledDNDEnd": "À",
   "settings.app.form.scheduledDNDStart": "De",
-  "settings.app.form.searchEngine": "Search engine",
+  "settings.app.form.searchEngine": "Moteur de recherche",
   "settings.app.form.sentry": "Envoyer des données de télémétrie",
   "settings.app.form.serviceRibbonWidth": "Largeur du menu",
   "settings.app.form.showDisabledServices": "Afficher les onglets des services désactivés",
   "settings.app.form.showDragArea": "Afficher les zones de glisser-déposer dans la fenêtre",
   "settings.app.form.showMessagesBadgesWhenMuted": "Afficher les badges de messages non lus quand les notifications sont désactivées",
-  "settings.app.form.splitMode": "Enable Split View Mode",
+  "settings.app.form.splitMode": "Activer le Mode Vue Divisée",
   "settings.app.form.startMinimized": "Démarrage minimisé",
   "settings.app.form.universalDarkMode": "Activer le mode sombre universel",
-  "settings.app.form.useTouchIdToUnlock": "Allow using TouchID to unlock Ferdi",
-  "settings.app.form.useVerticalStyle": "Use horizontal style",
-  "settings.app.form.wakeUpStrategy": "Wake up strategy",
+  "settings.app.form.useTouchIdToUnlock": "Autoriser l'utilisation du système de lecture d'empreinte digitale pour déverrouiller Ferdi",
+  "settings.app.form.useVerticalStyle": "Utiliser un style horizontal",
+  "settings.app.form.wakeUpStrategy": "Stratégie de réveil",
   "settings.app.headlineAdvanced": "Paramètres avancés",
   "settings.app.headlineAppearance": "Apparence",
   "settings.app.headlineGeneral": "Général",
   "settings.app.headlineLanguage": "Langue",
-  "settings.app.headlinePrivacy": "Privacy",
+  "settings.app.headlinePrivacy": "Confidentialité",
   "settings.app.headlineUpdates": "Mises à jour",
   "settings.app.hibernateInfo": "Par défaut, Ferdi gardera tous vos services ouverts et chargés en arrière-plan afin qu'ils soient prêts lorsque vous voulez les utiliser. Le service d'hibernation déchargera vos services après un montant spécifié. Ceci est utile pour sauver de la RAM ou garder les services de ralentir votre ordinateur.",
   "settings.app.inactivityLockInfo": "Minutes d'inactivité, après lesquelles Ferdi devrait se verrouiller automatiquement. Utilisez 0 pour désactiver",
   "settings.app.languageDisclaimer": "Les traductions officielles sont l'anglais et l'allemand. Toutes les autres langues sont des traductions faites par la communauté.",
-  "settings.app.lockInfo": "Password Lock allows you to keep your messages protected.\nUsing Password Lock, you will be prompted to enter your password everytime you start Ferdi or lock Ferdi yourself using the lock symbol in the bottom left corner or the shortcut {lockShortcut}.",
+  "settings.app.lockInfo": "Le verrouillage par mot de passe vous permet de garder vos messages protégés.\nPour l'utilisation du verrouillage par mot de passe, vous serez invité à entrer votre mot de passe chaque fois que vous démarrez Ferdi ou que vous verrouillerez Ferdi vous-même en utilisant le symbole de verrouillage en bas à gauche ou le raccourci {lockShortcut}.",
   "settings.app.lockedPassword": "Mot de passe",
-  "settings.app.lockedPasswordInfo": "Please make sure to set a password you'll remember.\nIf you loose this password, you will have to reinstall Ferdi.",
+  "settings.app.lockedPasswordInfo": "Veuillez vous assurer de définir un mot de passe dont vous vous souviendrez.\nSi vous perdez ce mot de passe, vous devrez réinstaller Ferdi.",
   "settings.app.restartRequired": "Les modifications nécessitent un redémarrage",
   "settings.app.scheduledDNDInfo": "Planifier le Ne-pas-Déranger vous permet de définir une période de temps dans lequel vous ne voulez pas de notifications de Ferdi.",
   "settings.app.scheduledDNDTimeInfo": "Le temps est en format 24 heures. La fin du temps peut être avant le début du temps (ex: début 17:00, fin 09:00) pour activer le Ne-pas-Déranger durant la nuit.",
-  "settings.app.sentryInfo": "Sending telemetry data allows us to find errors in Ferdi - we will not send any personal information like your message data!",
+  "settings.app.sentryInfo": "L'envoi de données de télémétrie nous permet de trouver des erreurs dans Ferdi - nous n'enverrons aucune information personnelle comme vos données de message!",
   "settings.app.spellCheckerLanguageInfo": "Ferdi utilise le correcteur orthographique intégré de votre Mac pour vérifier les fautes de frappe. Si vous voulez changer les langues pour lesquelles le correcteur vérifie l'orthographe, vous pouvez le faire dans les préférences système de votre Mac.",
   "settings.app.subheadlineCache": "Cache",
-  "settings.app.subheadlineFerdiProfile": "Ferdi Profile",
-  "settings.app.todoServerInfo": "This server will be used for the \"Ferdi Todo\" feature.",
+  "settings.app.subheadlineFerdiProfile": "Profil Ferdi",
+  "settings.app.todoServerInfo": "Ce serveur sera utilisé pour la fonctionnalité \"Ferdi Todo\".",
   "settings.app.translationHelp": "Aidez-nous à traduire Ferdi dans votre langue.",
   "settings.app.universalDarkModeInfo": "Le mode sombre universel tente de générer dynamiquement des styles de mode sombre pour les services qui ne sont pas encore supportés.",
   "settings.app.updateStatusAvailable": "Mise à jour disponible, téléchargement en cours...",
@@ -283,12 +285,12 @@
   "settings.recipes.customService.headline.communityRecipes": "Recettes tiers communautaire",
   "settings.recipes.customService.headline.customRecipes": "Recettes tiers modifiées",
   "settings.recipes.customService.headline.devRecipes": "Vos recettes de service de développement",
-  "settings.recipes.customService.intro": "To add a custom service, copy the service recipe to:",
+  "settings.recipes.customService.intro": "Pour ajouter un service personnalisé, copiez la recette du service à:",
   "settings.recipes.customService.openDevDocs": "Documentation de Développeur",
-  "settings.recipes.customService.openFolder": "Open folder",
+  "settings.recipes.customService.openFolder": "Ouvrir le dossier",
   "settings.recipes.headline": "Services disponibles",
   "settings.recipes.missingService": "Un service est manquant?",
-  "settings.recipes.nothingFound": "Sorry, but no service matched your search term - but you can still probably add it using the \"Custom Website\" option. Please note that the website might show more services that have been added to Ferdi since the version that you are currently on. To get those new services, please consider upgrading to a newer version of Ferdi.",
+  "settings.recipes.nothingFound": "Désolé, mais aucun service ne correspond à votre recherche - mais vous pouvez toujours l'ajouter en utilisant l'option \"Custom Website\". Veuillez noter que le site Web pourrait afficher plus de services qui ont été ajoutés à Ferdi depuis la version sur laquelle vous êtes actuellement. Pour obtenir ces nouveaux services, veuillez envisager la mise à niveau vers une version plus récente de Ferdi.",
   "settings.recipes.servicesSuccessfulAddedInfo": "Le service a été ajouté avec succès",
   "settings.searchService": "Chercher un service",
   "settings.service.error.goBack": "Retour aux services",
@@ -301,14 +303,15 @@
   "settings.service.form.darkReaderBrightness": "Luminosité de Dark Reader",
   "settings.service.form.darkReaderContrast": "Contraste de Dark Reader",
   "settings.service.form.darkReaderSepia": "Sepia de Dark Reader",
-  "settings.service.form.deleteButton": "Delete service",
+  "settings.service.form.deleteButton": "Supprimer le service",
   "settings.service.form.editServiceHeadline": "Modifier {name}",
   "settings.service.form.enableAudio": "Activer l'audio",
   "settings.service.form.enableBadge": "Afficher le badge des messages non lus",
   "settings.service.form.enableDarkMode": "Activer le mode sombre",
-  "settings.service.form.enableHibernation": "Activer l'hibernation",
+  "settings.service.form.enableHibernation": "Activer la veille prolongée",
   "settings.service.form.enableNotification": "Activer les notifications",
   "settings.service.form.enableService": "Activer le service",
+  "settings.service.form.enableWakeUp": "Enable wake up",
   "settings.service.form.headlineBadges": "Badge des messages non lus",
   "settings.service.form.headlineDarkReaderSettings": "Paramètre de Dark Reader",
   "settings.service.form.headlineGeneral": "Général",
@@ -321,18 +324,18 @@
   "settings.service.form.isHibernatedEnabledInfo": "Quand activé, les services seront éteints après un moment pour économiser les ressources systèmes.",
   "settings.service.form.isMutedInfo": "Lorsque désactivé, tous les sons de notifications ainsi que l'audio sont coupés",
   "settings.service.form.name": "Nom",
-  "settings.service.form.onlyShowFavoritesInUnreadCount": "Only show Favorites in unread count",
+  "settings.service.form.onlyShowFavoritesInUnreadCount": "Afficher uniquement les Favoris dans le nombre de non-lus",
   "settings.service.form.openDarkmodeCss": "Ouvrir darkmode.css",
   "settings.service.form.openUserCss": "Ouvrir user.css",
   "settings.service.form.openUserJs": "Ouvrir user.js",
   "settings.service.form.proxy.headline": "Paramètres proxy HTTP/HTTPS",
   "settings.service.form.proxy.host": "Hôte/IP du proxy",
-  "settings.service.form.proxy.info": "Proxy settings will not be synchronized with the Ferdi servers.",
+  "settings.service.form.proxy.info": "Les paramètres du proxy ne seront pas synchronisés avec les serveurs Ferdi.",
   "settings.service.form.proxy.isEnabled": "Utiliser un proxy",
-  "settings.service.form.proxy.password": "Password (optional)",
+  "settings.service.form.proxy.password": "Mot de passe (facultatif)",
   "settings.service.form.proxy.port": "Port",
   "settings.service.form.proxy.restartInfo": "Veuillez redémarrer Ferdi après avoir modifié les paramètres proxy.",
-  "settings.service.form.proxy.user": "User (optional)",
+  "settings.service.form.proxy.user": "Utilisateur (facultatif)",
   "settings.service.form.recipeFileInfo": "Vos fichiers utilisateur seront insérés dans la page Web afin que vous puissiez personnaliser les services comme vous le souhaitez. Les fichiers utilisateurs sont stockés localement et ne sont pas transférés à d'autres ordinateurs en utilisant le même compte.",
   "settings.service.form.saveButton": "Enregistrer le service",
   "settings.service.form.tabHosted": "Hébergé",
@@ -344,7 +347,7 @@
   "settings.services.discoverServices": "Découvrir les services",
   "settings.services.headline": "Vos services",
   "settings.services.noServicesAdded": "Commencez par ajouter un service.",
-  "settings.services.nothingFound": "Sorry, but no service matched your search term - but you can still probably add it using the \"Custom Website\" option. Please note that the website might show more services that have been added to Ferdi since the version that you are currently on. To get those new services, please consider upgrading to a newer version of Ferdi.",
+  "settings.services.nothingFound": "Désolé, mais aucun service ne correspond à votre recherche - mais vous pouvez toujours l'ajouter en utilisant l'option \"Custom Website\". Veuillez noter que le site Web pourrait afficher plus de services qui ont été ajoutés à Ferdi depuis la version sur laquelle vous êtes actuellement. Pour obtenir ces nouveaux services, veuillez envisager la mise à niveau vers une version plus récente de Ferdi.",
   "settings.services.servicesRequestFailed": "Impossible de charger vos services",
   "settings.services.tooltip.isDisabled": "Ce service est désactivé",
   "settings.services.tooltip.isMuted": "Tous les sons sont coupés",
@@ -353,22 +356,22 @@
   "settings.supportFerdi.aboutIntro": "<p>Ferdi est une application open-source et dirigée par la communauté.</p><p>Merci à toutes les personnes qui rendent cela possible :</p>",
   "settings.supportFerdi.bannerText": "Voulez-vous nous aider à améliorer Ferdi ?",
   "settings.supportFerdi.headline": "À propos de Ferdi",
-  "settings.supportFerdi.openSurvey": "Open survey",
+  "settings.supportFerdi.openSurvey": "Ouvrir l'enquête",
   "settings.supportFerdi.textDonation": "Si vous avez envie de soutenir le développement de Ferdi par un don, vous pouvez le faire via",
   "settings.supportFerdi.textDonationAnd": "et",
   "settings.supportFerdi.textExpenses": "Bien que les bénévoles fassent la majeure partie du travail, nous avons besoin de payer pour les serveurs et les certificats. En tant que communauté, nous sommes totalement transparents sur les fonds que nous collectons et dépensons - voir nos",
   "settings.supportFerdi.textGitHubSponsors": "Sponsors sur GitHub",
-  "settings.supportFerdi.textListContributors": "Full list of contributors",
+  "settings.supportFerdi.textListContributors": "Liste complète des contributeurs",
   "settings.supportFerdi.textListContributorsHere": "ici",
   "settings.supportFerdi.textOpenCollective": "Open Collective",
   "settings.supportFerdi.textSupportWelcome": "Toute aide est toujours la bienvenue. Vous pouvez trouver une liste de l'aide dont nous avons besoin",
   "settings.supportFerdi.textSupportWelcomeHere": "ici",
-  "settings.supportFerdi.textVolunteers": "Le développement de Ferdi est fait par des bénévoles. Des gens qui utilisent Ferdi comme vous maintiennent, réparent et améliorent Ferdi pendant leur temps libre.",
+  "settings.supportFerdi.textVolunteers": "Le développement de Ferdi est fait par des bénévoles. Des gens qui utilisent Ferdi comme vous. Ils maintiennent, réparent et améliorent Ferdi pendant leur temps libre.",
   "settings.supportFerdi.title": "Vous aimez Ferdi ?",
   "settings.team.contentHeadline": "Gestion d'équipe Franz",
   "settings.team.copy": "La gestion d'équipe de Franz vous permet de gérer les abonnements Franz pour plusieurs utilisateurs. N’oubliez pas que le fait d’avoir un abonnement Franz Premium ne vous donnera aucun avantage dans l'utilisation de Ferdi : la seule raison pour laquelle vous avez encore accès à la gestion d’équipe est que vous pouvez gérer vos équipes Franz héritées et que vous ne perdez donc aucune fonctionnalité dans la gestion de votre compte.",
   "settings.team.headline": "Équipe",
-  "settings.team.intro": "You are currently using Franz Servers, which is why you have access to Team Management.",
+  "settings.team.intro": "Vous utilisez actuellement les serveurs Franz, c'est pourquoi vous avez accès à la gestion d'équipe.",
   "settings.team.manageAction": "Gérez votre équipe sur meetfranz.com",
   "settings.team.teamsUnavailable": "Les équipes sont indisponibles",
   "settings.team.teamsUnavailableInfo": "Les équipes sont actuellement disponibles uniquement lorsque vous utilisez le serveur de Franz et après avoir payé pour Franz Professionnel. Veuillez changer votre serveur à https://api.franzinfra.com pour utiliser des équipes.",
@@ -378,8 +381,8 @@
   "settings.user.form.accountType.non-profit": "Non-lucratif",
   "settings.user.form.currentPassword": "Mot de passe actuel",
   "settings.user.form.email": "Email",
-  "settings.user.form.firstname": "First Name",
-  "settings.user.form.lastname": "Last Name",
+  "settings.user.form.firstname": "Prénom",
+  "settings.user.form.lastname": "Nom",
   "settings.user.form.newPassword": "Nouveau mot de passe",
   "settings.workspace.add.form.name": "Nom",
   "settings.workspace.add.form.submitButton": "Créer l'espace de travail",
@@ -396,7 +399,7 @@
   "settings.workspaces.tryReloadWorkspaces": "Réessayer",
   "settings.workspaces.updatedInfo": "Vos modifications ont été enregistrées",
   "settings.workspaces.workspaceFeatureHeadline": "Présentation des Espaces de travail de Ferdi",
-  "settings.workspaces.workspaceFeatureInfo": "Ferdi Workspaces let you focus on what’s important right now. Set up different sets of services and easily switch between them at any time. You decide which services you need when and where, so we can help you stay on top of your game - or easily switch off from work whenever you want.",
+  "settings.workspaces.workspaceFeatureInfo": "Les Espaces de travail de Ferdi vous permettant de rester concentré sur ce qui est important. Créez différents groupes de services et naviguez facilement entre eux à n'importe quel moment. Vous décidez de quels services vous avez besoin, où et quand, ainsi nous pouvons vous aider à rester concentré sur votre travail - ou à le quitter dès que vous le souhaitez.",
   "settings.workspaces.workspacesRequestFailed": "Impossible de charger vos espaces de travail",
   "setupAssistant.headline": "Commençons",
   "setupAssistant.subheadline": "Choisissez parmi nos services les plus utilisés et revenez maintenant sur votre messagerie.",
@@ -411,33 +414,33 @@
   "sidebar.unmuteApp": "Activer les notifications et les sons",
   "signup.email.label": "Adresse Email",
   "signup.emailDuplicate": "Cette adresse email est déjà utilisée",
-  "signup.firstname.label": "First Name",
+  "signup.firstname.label": "Prénom",
   "signup.headline": "S'inscrire",
-  "signup.lastname.label": "Last Name",
+  "signup.lastname.label": "Nom",
   "signup.legal.info": "En créant un compte Ferdi, vous acceptez la",
   "signup.legal.privacy": "Déclaration de confidentialité",
   "signup.legal.terms": "Conditions d'utilisation",
   "signup.link.login": "Vous avez déjà un compte? Connectez-vous",
   "signup.password.label": "Mot de passe",
   "signup.submit.label": "Créer un compte",
-  "tabs.item.confirmDeleteService": "Do you really want to delete the {serviceName} service?",
-  "tabs.item.deleteService": "Delete service",
+  "tabs.item.confirmDeleteService": "Voulez-vous vraiment supprimer le service {serviceName}?",
+  "tabs.item.deleteService": "Supprimer le service",
   "tabs.item.disableAudio": "Désactiver l'audio",
-  "tabs.item.disableDarkMode": "Disable Dark mode",
+  "tabs.item.disableDarkMode": "Désactiver le mode sombre",
   "tabs.item.disableNotifications": "Désactiver les notifications",
-  "tabs.item.disableService": "Disable service",
+  "tabs.item.disableService": "Désactiver le service",
   "tabs.item.enableAudio": "Activer l'audio",
-  "tabs.item.enableDarkMode": "Enable Dark mode",
+  "tabs.item.enableDarkMode": "Activer le mode sombre",
   "tabs.item.enableNotification": "Activer les notifications",
   "tabs.item.enableService": "Activer le service",
-  "tabs.item.hibernateService": "Hibernate service",
+  "tabs.item.hibernateService": "Service de mise en veille prolongée",
   "tabs.item.reload": "Actualiser",
-  "tabs.item.wakeUpService": "Wake up service",
-  "validation.email": "{field} is not valid",
-  "validation.minLength": "{field} should be at least {length} characters long",
+  "tabs.item.wakeUpService": "Service de réveil",
+  "validation.email": "{field} n'est pas valide",
+  "validation.minLength": "{field} doit comporter au moins {length} caractère(s)",
   "validation.oneRequired": "Au moins un de ces champs est requis",
-  "validation.required": "{field} is required",
-  "validation.url": "{field} is not a valid URL",
+  "validation.required": "{field} est requis",
+  "validation.url": "{field} n'est pas une URL valide",
   "webControls.back": "Revenir",
   "webControls.forward": "Avancer",
   "webControls.goHome": "Accueil",
@@ -445,12 +448,12 @@
   "webControls.reload": "Actualiser",
   "welcome.loginButton": "Se connecter sur son compte",
   "welcome.signupButton": "Créer un compte gratuit",
-  "workspaceDrawer.addNewWorkspaceLabel": "Add new workspace",
+  "workspaceDrawer.addNewWorkspaceLabel": "Ajouter un nouvel espace de travail",
   "workspaceDrawer.allServices": "Tous les services",
   "workspaceDrawer.headline": "Espace de travail",
   "workspaceDrawer.item.contextMenuEdit": "Modifier",
   "workspaceDrawer.item.noServicesAddedYet": "Aucun services ajoutés pour l'instant",
-  "workspaceDrawer.workspaceFeatureInfo": "<p>Ferdi Workspaces let you focus on what’s important right now. Set up different sets of services and easily switch between them at any time.</p><p>You decide which services you need when and where, so we can help you stay on top of your game - or easily switch off from work whenever you want.</p>",
-  "workspaceDrawer.workspacesSettingsTooltip": "Edit workspaces settings",
+  "workspaceDrawer.workspaceFeatureInfo": "<p>Les Espaces de travail de Ferdi vous permettant de rester concentré sur ce qui est important. Créez différents groupes de services et naviguez facilement entre eux à n'importe quel moment.</p><p>Vous décidez de quels services vous avez besoin, où et quand, ainsi nous pouvons vous aider à rester concentré sur votre travail - ou à le quitter dès que vous le souhaitez.</p>",
+  "workspaceDrawer.workspacesSettingsTooltip": "Éditer les paramètres de l'espace de travail",
   "workspaces.switchingIndicator.switchingTo": "Changement vers"
 }
diff --git a/src/i18n/locales/ga.json b/src/i18n/locales/ga.json
index 46dc1acc4..ed893c943 100644
--- a/src/i18n/locales/ga.json
+++ b/src/i18n/locales/ga.json
@@ -210,7 +210,9 @@
   "settings.app.form.customTodoServer": "Custom Todo Server",
   "settings.app.form.darkMode": "Enable Dark Mode",
   "settings.app.form.enableGPUAcceleration": "Cumasaigh luasghéarú APG",
+  "settings.app.form.enableGlobalHideShortcut": "Enable Global shortcut to hide Ferdi",
   "settings.app.form.enableLock": "Enable Password Lock",
+  "settings.app.form.enableLongPressServiceHint": "Enable service shortcut hint on long press",
   "settings.app.form.enableMenuBar": "Always show Ferdi in Menu Bar",
   "settings.app.form.enableSpellchecking": "Cumasaigh seiceáil litrithe",
   "settings.app.form.enableSystemTray": "Always show Ferdi in System Tray",
@@ -309,6 +311,7 @@
   "settings.service.form.enableHibernation": "Enable hibernation",
   "settings.service.form.enableNotification": "Cumasaigh fógraí",
   "settings.service.form.enableService": "Cumasaigh seirbhís",
+  "settings.service.form.enableWakeUp": "Enable wake up",
   "settings.service.form.headlineBadges": "Comhartha do theachtaireachtaí neamhléite",
   "settings.service.form.headlineDarkReaderSettings": "Dark Reader Settings",
   "settings.service.form.headlineGeneral": "Ginearálta",
diff --git a/src/i18n/locales/he.json b/src/i18n/locales/he.json
index 5bec0bf13..1ba7c5ada 100644
--- a/src/i18n/locales/he.json
+++ b/src/i18n/locales/he.json
@@ -210,7 +210,9 @@
   "settings.app.form.customTodoServer": "Custom Todo Server",
   "settings.app.form.darkMode": "�פשר מצב לילה",
   "settings.app.form.enableGPUAcceleration": "�פשר ה�צת חומרה (GPU)",
+  "settings.app.form.enableGlobalHideShortcut": "Enable Global shortcut to hide Ferdi",
   "settings.app.form.enableLock": "�פשר נעילה ב�מצעות סיסמ�",
+  "settings.app.form.enableLongPressServiceHint": "Enable service shortcut hint on long press",
   "settings.app.form.enableMenuBar": "Always show Ferdi in Menu Bar",
   "settings.app.form.enableSpellchecking": "הפעל בדיקת �יות",
   "settings.app.form.enableSystemTray": "Always show Ferdi in System Tray",
@@ -309,6 +311,7 @@
   "settings.service.form.enableHibernation": "Enable hibernation",
   "settings.service.form.enableNotification": "�פשר התר�ות",
   "settings.service.form.enableService": "�פשר שירות",
+  "settings.service.form.enableWakeUp": "Enable wake up",
   "settings.service.form.headlineBadges": "חיווי על הודעות של� נקר�ו",
   "settings.service.form.headlineDarkReaderSettings": "הגדרות מצב לילה",
   "settings.service.form.headlineGeneral": "כללי",
diff --git a/src/i18n/locales/hi.json b/src/i18n/locales/hi.json
index 812ec8c4c..d5cf072f6 100644
--- a/src/i18n/locales/hi.json
+++ b/src/i18n/locales/hi.json
@@ -210,7 +210,9 @@
   "settings.app.form.customTodoServer": "Custom Todo Server",
   "settings.app.form.darkMode": "Enable Dark Mode",
   "settings.app.form.enableGPUAcceleration": "Enable GPU Acceleration",
+  "settings.app.form.enableGlobalHideShortcut": "Enable Global shortcut to hide Ferdi",
   "settings.app.form.enableLock": "Enable Password Lock",
+  "settings.app.form.enableLongPressServiceHint": "Enable service shortcut hint on long press",
   "settings.app.form.enableMenuBar": "Always show Ferdi in Menu Bar",
   "settings.app.form.enableSpellchecking": "Enable spell checking",
   "settings.app.form.enableSystemTray": "Always show Ferdi in System Tray",
@@ -309,6 +311,7 @@
   "settings.service.form.enableHibernation": "Enable hibernation",
   "settings.service.form.enableNotification": "Enable notifications",
   "settings.service.form.enableService": "Enable service",
+  "settings.service.form.enableWakeUp": "Enable wake up",
   "settings.service.form.headlineBadges": "Unread message badges",
   "settings.service.form.headlineDarkReaderSettings": "Dark Reader Settings",
   "settings.service.form.headlineGeneral": "General",
diff --git a/src/i18n/locales/hr.json b/src/i18n/locales/hr.json
index 6dcd65032..6f0677e16 100644
--- a/src/i18n/locales/hr.json
+++ b/src/i18n/locales/hr.json
@@ -210,7 +210,9 @@
   "settings.app.form.customTodoServer": "Custom Todo Server",
   "settings.app.form.darkMode": "Enable Dark Mode",
   "settings.app.form.enableGPUAcceleration": "Enable GPU Acceleration",
+  "settings.app.form.enableGlobalHideShortcut": "Enable Global shortcut to hide Ferdi",
   "settings.app.form.enableLock": "Enable Password Lock",
+  "settings.app.form.enableLongPressServiceHint": "Enable service shortcut hint on long press",
   "settings.app.form.enableMenuBar": "Always show Ferdi in Menu Bar",
   "settings.app.form.enableSpellchecking": "Omogući provjeru pravopisa",
   "settings.app.form.enableSystemTray": "Always show Ferdi in System Tray",
@@ -309,6 +311,7 @@
   "settings.service.form.enableHibernation": "Enable hibernation",
   "settings.service.form.enableNotification": "Omogućite obavijesti",
   "settings.service.form.enableService": "Omogućite usluge",
+  "settings.service.form.enableWakeUp": "Enable wake up",
   "settings.service.form.headlineBadges": "Unread message badges",
   "settings.service.form.headlineDarkReaderSettings": "Dark Reader Settings",
   "settings.service.form.headlineGeneral": "Općenito",
diff --git a/src/i18n/locales/hu.json b/src/i18n/locales/hu.json
index 8d83fea42..8a9c1a441 100644
--- a/src/i18n/locales/hu.json
+++ b/src/i18n/locales/hu.json
@@ -210,7 +210,9 @@
   "settings.app.form.customTodoServer": "Custom Todo Server",
   "settings.app.form.darkMode": "Sötét mód engedélyezése",
   "settings.app.form.enableGPUAcceleration": "Hardveres gyorsítás engedélyezése",
+  "settings.app.form.enableGlobalHideShortcut": "Enable Global shortcut to hide Ferdi",
   "settings.app.form.enableLock": "Jelszavas zár engedélyezése",
+  "settings.app.form.enableLongPressServiceHint": "Enable service shortcut hint on long press",
   "settings.app.form.enableMenuBar": "Always show Ferdi in Menu Bar",
   "settings.app.form.enableSpellchecking": "Helyesírás-ellenőrzés engedélyezése",
   "settings.app.form.enableSystemTray": "Always show Ferdi in System Tray",
@@ -309,6 +311,7 @@
   "settings.service.form.enableHibernation": "Enable hibernation",
   "settings.service.form.enableNotification": "Értesítések engedélyezése",
   "settings.service.form.enableService": "Szolgáltatás engedélyezése",
+  "settings.service.form.enableWakeUp": "Enable wake up",
   "settings.service.form.headlineBadges": "Olvasatlan üzenet jelzések",
   "settings.service.form.headlineDarkReaderSettings": "Dark Reader Settings",
   "settings.service.form.headlineGeneral": "�ltalános",
diff --git a/src/i18n/locales/id.json b/src/i18n/locales/id.json
index 5a2aa1ea7..a57b60247 100644
--- a/src/i18n/locales/id.json
+++ b/src/i18n/locales/id.json
@@ -210,7 +210,9 @@
   "settings.app.form.customTodoServer": "Custom Todo Server",
   "settings.app.form.darkMode": "Aktifkan Mode Gelap",
   "settings.app.form.enableGPUAcceleration": "Aktifkan Akselerasi GPU",
+  "settings.app.form.enableGlobalHideShortcut": "Enable Global shortcut to hide Ferdi",
   "settings.app.form.enableLock": "Enable Password Lock",
+  "settings.app.form.enableLongPressServiceHint": "Enable service shortcut hint on long press",
   "settings.app.form.enableMenuBar": "Always show Ferdi in Menu Bar",
   "settings.app.form.enableSpellchecking": "Aktifkan pemeriksaan ejaan",
   "settings.app.form.enableSystemTray": "Always show Ferdi in System Tray",
@@ -309,6 +311,7 @@
   "settings.service.form.enableHibernation": "Enable hibernation",
   "settings.service.form.enableNotification": "Aktifkan pemberitahuan",
   "settings.service.form.enableService": "Aktifkan layanan",
+  "settings.service.form.enableWakeUp": "Enable wake up",
   "settings.service.form.headlineBadges": "Lencana pesan belum dibaca",
   "settings.service.form.headlineDarkReaderSettings": "Dark Reader Settings",
   "settings.service.form.headlineGeneral": "Umum",
diff --git a/src/i18n/locales/it.json b/src/i18n/locales/it.json
index 004bd2d26..09cfaaf25 100644
--- a/src/i18n/locales/it.json
+++ b/src/i18n/locales/it.json
@@ -210,7 +210,9 @@
   "settings.app.form.customTodoServer": "Server Todo personalizzato",
   "settings.app.form.darkMode": "Attiva la modalità scura.",
   "settings.app.form.enableGPUAcceleration": "Attiva Accelerazione GPU",
+  "settings.app.form.enableGlobalHideShortcut": "Enable Global shortcut to hide Ferdi",
   "settings.app.form.enableLock": "Abilita blocco con password",
+  "settings.app.form.enableLongPressServiceHint": "Enable service shortcut hint on long press",
   "settings.app.form.enableMenuBar": "Mostra sempre Ferdi nella barra dei menù",
   "settings.app.form.enableSpellchecking": "Attiva controllo ortografico",
   "settings.app.form.enableSystemTray": "Mostra sempre icona Ferdi in area di notifica",
@@ -309,6 +311,7 @@
   "settings.service.form.enableHibernation": "Abilita ibernazione",
   "settings.service.form.enableNotification": "Attiva le notifiche",
   "settings.service.form.enableService": "Attiva il servizio",
+  "settings.service.form.enableWakeUp": "Enable wake up",
   "settings.service.form.headlineBadges": "Etichetta dei messaggi non letti",
   "settings.service.form.headlineDarkReaderSettings": "Impostazioni della Modalità Scura",
   "settings.service.form.headlineGeneral": "Generale",
diff --git a/src/i18n/locales/ja.json b/src/i18n/locales/ja.json
index d07ed53af..54257c599 100644
--- a/src/i18n/locales/ja.json
+++ b/src/i18n/locales/ja.json
@@ -210,7 +210,9 @@
   "settings.app.form.customTodoServer": "カスタムToDoサー�ー",
   "settings.app.form.darkMode": "ダークモードを有効��る",
   "settings.app.form.enableGPUAcceleration": "GPUアクセラレーションを有効��る",
+  "settings.app.form.enableGlobalHideShortcut": "Enable Global shortcut to hide Ferdi",
   "settings.app.form.enableLock": "パスワードロックを有効��る",
+  "settings.app.form.enableLongPressServiceHint": "Enable service shortcut hint on long press",
   "settings.app.form.enableMenuBar": "Ferdi内�メニュー�ーを常時表示�る",
   "settings.app.form.enableSpellchecking": "スペル�ェックを有効��る",
   "settings.app.form.enableSystemTray": "Ferdiを常時システムトレイ�表示�る",
@@ -309,6 +311,7 @@
   "settings.service.form.enableHibernation": "休止を有効��る",
   "settings.service.form.enableNotification": "通知を有効��る",
   "settings.service.form.enableService": "サービスを有効��る",
+  "settings.service.form.enableWakeUp": "Enable wake up",
   "settings.service.form.headlineBadges": "未読件数�通知�ッジ",
   "settings.service.form.headlineDarkReaderSettings": "ダークリーダー設定",
   "settings.service.form.headlineGeneral": "一般",
diff --git a/src/i18n/locales/ka.json b/src/i18n/locales/ka.json
index f327c1e51..fee1f6668 100644
--- a/src/i18n/locales/ka.json
+++ b/src/i18n/locales/ka.json
@@ -210,7 +210,9 @@
   "settings.app.form.customTodoServer": "Custom Todo Server",
   "settings.app.form.darkMode": "Enable Dark Mode",
   "settings.app.form.enableGPUAcceleration": "Enable GPU Acceleration",
+  "settings.app.form.enableGlobalHideShortcut": "Enable Global shortcut to hide Ferdi",
   "settings.app.form.enableLock": "Enable Password Lock",
+  "settings.app.form.enableLongPressServiceHint": "Enable service shortcut hint on long press",
   "settings.app.form.enableMenuBar": "Always show Ferdi in Menu Bar",
   "settings.app.form.enableSpellchecking": "Enable spell checking",
   "settings.app.form.enableSystemTray": "Always show Ferdi in System Tray",
@@ -309,6 +311,7 @@
   "settings.service.form.enableHibernation": "Enable hibernation",
   "settings.service.form.enableNotification": "შეტყ�ბინებების ჩ�რთვ�",
   "settings.service.form.enableService": "სერვისის ჩ�რთვ�",
+  "settings.service.form.enableWakeUp": "Enable wake up",
   "settings.service.form.headlineBadges": "Unread message badges",
   "settings.service.form.headlineDarkReaderSettings": "Dark Reader Settings",
   "settings.service.form.headlineGeneral": "მთ�ვ�რი",
diff --git a/src/i18n/locales/ko.json b/src/i18n/locales/ko.json
index 3be2b27ff..c66313751 100644
--- a/src/i18n/locales/ko.json
+++ b/src/i18n/locales/ko.json
@@ -210,7 +210,9 @@
   "settings.app.form.customTodoServer": "Custom Todo Server",
   "settings.app.form.darkMode": "다� 모드 활성화",
   "settings.app.form.enableGPUAcceleration": "GPU 가� 사용",
+  "settings.app.form.enableGlobalHideShortcut": "Enable Global shortcut to hide Ferdi",
   "settings.app.form.enableLock": "암호 잠금 활성화",
+  "settings.app.form.enableLongPressServiceHint": "Enable service shortcut hint on long press",
   "settings.app.form.enableMenuBar": "Always show Ferdi in Menu Bar",
   "settings.app.form.enableSpellchecking": "맞춤법 검사 활성화",
   "settings.app.form.enableSystemTray": "Always show Ferdi in System Tray",
@@ -309,6 +311,7 @@
   "settings.service.form.enableHibernation": "절전모드 활성화",
   "settings.service.form.enableNotification": "알림 허용",
   "settings.service.form.enableService": "서비스 활성화",
+  "settings.service.form.enableWakeUp": "Enable wake up",
   "settings.service.form.headlineBadges": "�지 않� 메세지 배지 표시",
   "settings.service.form.headlineDarkReaderSettings": "Dark Reader Settings",
   "settings.service.form.headlineGeneral": "�반",
diff --git a/src/i18n/locales/nl-BE.json b/src/i18n/locales/nl-BE.json
index 5104d1bc2..1cd2cdc42 100644
--- a/src/i18n/locales/nl-BE.json
+++ b/src/i18n/locales/nl-BE.json
@@ -210,7 +210,9 @@
   "settings.app.form.customTodoServer": "Custom Todo Server",
   "settings.app.form.darkMode": "Dark Mode aanzetten",
   "settings.app.form.enableGPUAcceleration": "GPU Acceleratie Activeren",
+  "settings.app.form.enableGlobalHideShortcut": "Enable Global shortcut to hide Ferdi",
   "settings.app.form.enableLock": "Enable Password Lock",
+  "settings.app.form.enableLongPressServiceHint": "Enable service shortcut hint on long press",
   "settings.app.form.enableMenuBar": "Always show Ferdi in Menu Bar",
   "settings.app.form.enableSpellchecking": "Spellingcontrole inschakelen",
   "settings.app.form.enableSystemTray": "Always show Ferdi in System Tray",
@@ -309,6 +311,7 @@
   "settings.service.form.enableHibernation": "Enable hibernation",
   "settings.service.form.enableNotification": "Notificaties aanzetten",
   "settings.service.form.enableService": "Service aanzetten",
+  "settings.service.form.enableWakeUp": "Enable wake up",
   "settings.service.form.headlineBadges": "Ongelezen berichten badges",
   "settings.service.form.headlineDarkReaderSettings": "Dark Reader Settings",
   "settings.service.form.headlineGeneral": "Algemeen",
diff --git a/src/i18n/locales/nl.json b/src/i18n/locales/nl.json
index 6899e02ee..4d58e5611 100644
--- a/src/i18n/locales/nl.json
+++ b/src/i18n/locales/nl.json
@@ -210,7 +210,9 @@
   "settings.app.form.customTodoServer": "Aangepaste Todo Server",
   "settings.app.form.darkMode": "Dark mode aanzetten",
   "settings.app.form.enableGPUAcceleration": "Schakel videokaart-acceleratie in ",
+  "settings.app.form.enableGlobalHideShortcut": "Enable Global shortcut to hide Ferdi",
   "settings.app.form.enableLock": "Wachtwoordvergrendeling inschakelen",
+  "settings.app.form.enableLongPressServiceHint": "Enable service shortcut hint on long press",
   "settings.app.form.enableMenuBar": "Altijd Ferdi weergeven in de menubalk",
   "settings.app.form.enableSpellchecking": "Zet spellingcontrole aan",
   "settings.app.form.enableSystemTray": "Laat Ferdi altijd in systeembalk zien",
@@ -309,6 +311,7 @@
   "settings.service.form.enableHibernation": "Enable hibernation",
   "settings.service.form.enableNotification": "Meldingen inschakelen",
   "settings.service.form.enableService": "Service inschakelen",
+  "settings.service.form.enableWakeUp": "Enable wake up",
   "settings.service.form.headlineBadges": "Ongelezen berichten badges",
   "settings.service.form.headlineDarkReaderSettings": "Dark Reader Settings",
   "settings.service.form.headlineGeneral": "Algemeen",
diff --git a/src/i18n/locales/no.json b/src/i18n/locales/no.json
index cfa523a35..0d927a6cd 100644
--- a/src/i18n/locales/no.json
+++ b/src/i18n/locales/no.json
@@ -210,7 +210,9 @@
   "settings.app.form.customTodoServer": "Custom Todo Server",
   "settings.app.form.darkMode": "Aktiver mørkt tema",
   "settings.app.form.enableGPUAcceleration": "Aktiver GPU-akselerasjon",
+  "settings.app.form.enableGlobalHideShortcut": "Enable Global shortcut to hide Ferdi",
   "settings.app.form.enableLock": "Aktiver passordlås",
+  "settings.app.form.enableLongPressServiceHint": "Enable service shortcut hint on long press",
   "settings.app.form.enableMenuBar": "Always show Ferdi in Menu Bar",
   "settings.app.form.enableSpellchecking": "Aktiver stavekontroll",
   "settings.app.form.enableSystemTray": "Always show Ferdi in System Tray",
@@ -309,6 +311,7 @@
   "settings.service.form.enableHibernation": "Enable hibernation",
   "settings.service.form.enableNotification": "Aktiver varsler",
   "settings.service.form.enableService": "Aktivere tjenesten",
+  "settings.service.form.enableWakeUp": "Enable wake up",
   "settings.service.form.headlineBadges": "Uleste meldingsetiketter",
   "settings.service.form.headlineDarkReaderSettings": "Innstillinger for lesing i mørket",
   "settings.service.form.headlineGeneral": "Generelt",
diff --git a/src/i18n/locales/pl.json b/src/i18n/locales/pl.json
index a19c7c444..b6c3bc98c 100644
--- a/src/i18n/locales/pl.json
+++ b/src/i18n/locales/pl.json
@@ -1,6 +1,6 @@
 {
   "app.errorHandler.action": "Odśwież",
-  "app.errorHandler.headline": "Coś poszło nie tak.",
+  "app.errorHandler.headline": "Something went wrong.",
   "changeserver.customServerLabel": "Spersonalizowany serwer",
   "changeserver.headline": "Zmień serwer",
   "changeserver.label": "Serwer",
@@ -22,15 +22,15 @@
   "feature.publishDebugInfo.title": "Opublikuj dane diagnostyczne",
   "feature.quickSwitch.info": "Wybierz usługę naciskając TAB, ↑ oraz ↓. Otwórz usługę naciskając ENTER.",
   "feature.quickSwitch.search": "Szukaj...",
-  "feature.quickSwitch.title": "Szybkie przełączenie",
-  "global.api.unhealthy": "Nie można połączyć z usługami Ferdi",
+  "feature.quickSwitch.title": "QuickSwitch",
+  "global.api.unhealthy": "Can't connect to Ferdi online services",
   "global.cancel": "Anuluj",
   "global.edit": "Edytuj",
   "global.no": "Nie",
   "global.notConnectedToTheInternet": "Nie masz połączenia z Internetem.",
   "global.ok": "Ok",
   "global.quit": "Wyjdź",
-  "global.quitConfirmation": "Czy chcesz wyjść z Ferdi?",
+  "global.quitConfirmation": "Czy napewno chcesz wyjść z Ferdi?",
   "global.save": "Zapisz",
   "global.settings": "Ustawienia",
   "global.spellchecker.useDefault": "Użyj domyślnego dla systemu ({default})",
@@ -44,9 +44,9 @@
   "import.headline": "Importuj usługi Ferdi 4",
   "import.notSupportedHeadline": "Usługi, które nie są jeszcze obsługiwane w Ferdi 5",
   "import.skip.label": "Chcę dodać usługi samodzielnie",
-  "import.submit.label": "Importuj {count} usług",
+  "import.submit.label": "Import {count} services",
   "infobar.authRequestFailed": "Pojawiły się błędy podczas próby uwierzytelniania. Proszę spróbuj się wylogować i zalogować ponownie, jeśli ten błąd będzie się powtarzał.",
-  "infobar.buttonChangelog": "Co nowego?",
+  "infobar.buttonChangelog": "What is new?",
   "infobar.buttonInstallUpdate": "Uruchom ponownie i zainstaluj aktualizacjÄ™",
   "infobar.buttonReloadServices": "Odśwież usługi",
   "infobar.hide": "Ukryj",
@@ -69,13 +69,13 @@
   "locked.touchIdPrompt": "odblokuj przez Touch ID",
   "locked.unlockWithPassword": "Odblokuj hasłem",
   "login.changeServer": "Zmień serwer",
-  "login.customServerQuestion": "Używasz niestandardowego serwera Ferdi?",
-  "login.customServerSuggestion": "Spróbuj zaimportować konto Franz",
+  "login.customServerQuestion": "Using a custom Ferdi server?",
+  "login.customServerSuggestion": "Try importing your Franz account",
   "login.email.label": "Adres email",
   "login.headline": "Zaloguj siÄ™",
   "login.invalidCredentials": "Adres email lub hasło są błędne",
-  "login.link.password": "Resetuj hasło",
-  "login.link.signup": "Załóż konto",
+  "login.link.password": "Reset password",
+  "login.link.signup": "Załóż darmowe konto",
   "login.password.label": "Hasło",
   "login.serverLogout": "Twoja sesja wygasła, zaloguj się ponownie.",
   "login.submit.label": "Zaloguj siÄ™",
@@ -116,17 +116,17 @@
   "menu.help.support": "Wsparcie",
   "menu.help.tos": "Warunki użytkowania",
   "menu.services": "Usługi",
-  "menu.services.activatePreviousService": "Aktywuj poprzednią usługę",
-  "menu.services.addNewService": "Dodaj nową usługę...",
+  "menu.services.activatePreviousService": "Activate previous service",
+  "menu.services.addNewService": "Add New Service...",
   "menu.services.goHome": "Strona główna",
-  "menu.services.setNextServiceActive": "Aktywuj następną usługę",
+  "menu.services.setNextServiceActive": "Activate next service",
   "menu.todos": "Lista zadań",
   "menu.todos.enableTodos": "Włącz listę zadań",
   "menu.view": "Widok",
   "menu.view.back": "Wstecz",
   "menu.view.forward": "Prześlij dalej",
   "menu.view.lockFerdi": "Zablokuj Ferdi",
-  "menu.view.openQuickSwitch": "Otwórz szybki wybór",
+  "menu.view.openQuickSwitch": "Otwórz Quick Switch",
   "menu.view.reloadFerdi": "Przeładuj Ferdi",
   "menu.view.reloadService": "Przeładuj usługę",
   "menu.view.reloadTodos": "Odśwież Zadania",
@@ -147,11 +147,11 @@
   "menu.workspaces.defaultWorkspace": "Wszystkie usługi",
   "menu.workspaces.openWorkspaceDrawer": "Otwórz edytor obszaru roboczego",
   "password.email.label": "Adres email",
-  "password.headline": "Resetuj hasło",
+  "password.headline": "Reset password",
   "password.link.login": "Zaloguj siÄ™ na swoje konto",
   "password.link.signup": "Załóż darmowe konto",
-  "password.noUser": "Użytkownik z podanym adresem email nie istnieje",
-  "password.successInfo": "Twoje nowe hasło zostało wysłane na Twoją skrzynkę mailową",
+  "password.noUser": "No user with that email address was found",
+  "password.successInfo": "Your new password was sent to your email address",
   "service.crashHandler.action": "Przeładuj {name}",
   "service.crashHandler.autoReload": "Próba automatycznego odnowienia {name} za {seconds} sekund/y",
   "service.crashHandler.headline": "O nie!",
@@ -166,10 +166,10 @@
   "service.webviewLoader.loading": "Wczytywanie {service}",
   "services.getStarted": "Zacznij",
   "services.login": "Zaloguj się, aby używać Ferdi.",
-  "services.serverInfo": "Opcjonalnie możesz zmienić swój serwer Ferdi klikając zębatkę w lewym dolnym rogu. Jeżeli przełączasz się (z jednego z hostowanych serwerów) do serwerów Ferdi bez konta, pamiętaj, że możesz wyeksportować swoje dane z tego serwera a następnie zaimportować je używając opcji Pomoc w menu aby przywrócić swoje obszary robocze i skonfigurowane usługi!",
+  "services.serverInfo": "Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner. If you are switching over (from one of the hosted servers) to using Ferdi without an account, please be informed that you can export your data from that server and subsequently import it using the Help menu to resurrect all your workspaces and configured services!",
   "services.serverless": "Używaj Ferdi bez konta",
   "services.welcome": "Witaj w programie Ferdi",
-  "settings.account.account.editButton": "Edytuj konto",
+  "settings.account.account.editButton": "Edit account",
   "settings.account.accountUnavailable": "Konto jest niedostępne",
   "settings.account.accountUnavailableInfo": "Używasz Ferdi bez konta. Jeśli chcesz używać Ferdi z kontem i synchronizować swoje usługi pomiędzy klientami, wybierz serwer w zakładce Ustawienia i zaloguj się.",
   "settings.account.buttonSave": "Uaktualnij profil",
@@ -177,21 +177,21 @@
   "settings.account.deleteEmailSent": "Wysłaliśmy email z linkiem do potwierdzenia usunięcia konta. Konto oraz dane są usuwane trwale i nie można tego cofnąć!",
   "settings.account.deleteInfo": "Jeżeli nie potrzebujesz już konta Ferdi, możesz je usunąć oraz wszystkie dane na nim zapisane.",
   "settings.account.headline": "Konto",
-  "settings.account.headlineAccount": "Informacje o koncie",
-  "settings.account.headlineDangerZone": "Strefa niebezpieczna",
-  "settings.account.headlineInvoices": "Faktury",
-  "settings.account.headlinePassword": "Zmień hasło",
+  "settings.account.headlineAccount": "Account information",
+  "settings.account.headlineDangerZone": "Danger Zone",
+  "settings.account.headlineInvoices": "Invoices",
+  "settings.account.headlinePassword": "Change password",
   "settings.account.headlineProfile": "Uaktualnij profil",
   "settings.account.successInfo": "Twoje zmiany zostały zapisane",
   "settings.account.tryReloadServices": "Spróbuj ponownie",
   "settings.account.tryReloadUserInfoRequest": "Spróbuj ponownie",
   "settings.account.userInfoRequestFailed": "Nie można wczytać informacji o użytkowniku",
-  "settings.account.yourLicense": " Twoja licencja Ferdi:",
+  "settings.account.yourLicense": "Your Ferdi License:",
   "settings.app.accentColorInfo": "Zdefiniuj kolor akcentu w formacie zgodnym z CSS. (Domyślnie: {defaultAccentColor})",
   "settings.app.buttonClearAllCache": "Wyczyść pamięć podręczną (cache)",
   "settings.app.buttonInstallUpdate": "Uruchom ponownie i zainstaluj aktualizacjÄ™",
   "settings.app.buttonOpenFerdiProfileFolder": "Pokaż folder z profilami",
-  "settings.app.buttonOpenFerdiServiceRecipesFolder": "Otwórz folder usług",
+  "settings.app.buttonOpenFerdiServiceRecipesFolder": "Open Service Recipes folder",
   "settings.app.buttonSearchForUpdate": "Sprawdź aktualizacje",
   "settings.app.cacheInfo": "Pamięć podręczna zajmuje obecnie {size} przestrzeni dyskowej",
   "settings.app.cacheNotCleared": "Błąd czyszczenia pamięci podręcznej",
@@ -207,24 +207,26 @@
   "settings.app.form.clipboardNotifications": "Nie wyświetlaj powiadomień dla schowka",
   "settings.app.form.closeToSystemTray": "Zminimalizuj Ferdi do paska zadań",
   "settings.app.form.confirmOnQuit": "Potwierdź podczas opuszczania Ferdi",
-  "settings.app.form.customTodoServer": "Niestandardowy serwer Todo",
+  "settings.app.form.customTodoServer": "Custom Todo Server",
   "settings.app.form.darkMode": "WÅ‚Ä…cz Ciemny motyw",
   "settings.app.form.enableGPUAcceleration": "WÅ‚Ä…cz akceleracjÄ™ GPU",
+  "settings.app.form.enableGlobalHideShortcut": "Enable Global shortcut to hide Ferdi",
   "settings.app.form.enableLock": "Włącz blokadę hasłem",
+  "settings.app.form.enableLongPressServiceHint": "Enable service shortcut hint on long press",
   "settings.app.form.enableMenuBar": "Zawsze wyświetlaj Ferdi na pasku zadań",
   "settings.app.form.enableSpellchecking": "WÅ‚Ä…cz sprawdzanie pisowni",
-  "settings.app.form.enableSystemTray": "Zawsze pokazuj Ferdi na pasku zadań",
+  "settings.app.form.enableSystemTray": "Always show Ferdi in System Tray",
   "settings.app.form.enableTodos": "WÅ‚Ä…cz Zadania Ferdi",
   "settings.app.form.hibernateOnStartup": "Hibernacja usług po starcie systemu",
   "settings.app.form.hibernationStrategy": "Strategia hibernacji",
   "settings.app.form.iconSize": "Rozmiar ikony usługi",
   "settings.app.form.inactivityLock": "Zablokuj przy braku aktywności",
-  "settings.app.form.keepAllWorkspacesLoaded": "Trzymaj wszystkie pola robocze załadowane",
+  "settings.app.form.keepAllWorkspacesLoaded": "Keep all workspaces loaded",
   "settings.app.form.language": "Język",
   "settings.app.form.lockPassword": "Hasło",
   "settings.app.form.minimizeToSystemTray": "Zminimalizuj aplikacjÄ™ Ferdi",
   "settings.app.form.navigationBarBehaviour": "Zachowanie paska nawigacji",
-  "settings.app.form.notifyTaskBarOnMessage": "Powiadom na pasku zadań o nowej wiadomości",
+  "settings.app.form.notifyTaskBarOnMessage": "Notify TaskBar/Dock on new message",
   "settings.app.form.passwordToggle": "Przełącznik hasła",
   "settings.app.form.predefinedTodoServer": "Serwer Todo",
   "settings.app.form.privateNotifications": "Nie pokazuj treści wiadomości w powiadomieniach",
@@ -237,12 +239,12 @@
   "settings.app.form.sentry": "Wysyłaj dane telemetrii",
   "settings.app.form.serviceRibbonWidth": "Szerokość paska bocznego",
   "settings.app.form.showDisabledServices": "Wyświetlaj karty wyłączonych usług",
-  "settings.app.form.showDragArea": "Pokaż obszar do przeciągania w oknie",
+  "settings.app.form.showDragArea": "Show draggable area on window",
   "settings.app.form.showMessagesBadgesWhenMuted": "Pokaż licznik nieprzeczytanych wiadomości gdy powiadomienia są wyłączone",
-  "settings.app.form.splitMode": "Aktywuj tryb podzielonego widoku",
+  "settings.app.form.splitMode": "Enable Split View Mode",
   "settings.app.form.startMinimized": "Uruchom zminimalizowany",
   "settings.app.form.universalDarkMode": "WÅ‚Ä…cz uniwersalny tryb ciemny",
-  "settings.app.form.useTouchIdToUnlock": "Zawsze używaj TouchID do odblokowania Ferdi",
+  "settings.app.form.useTouchIdToUnlock": "Allow using TouchID to unlock Ferdi",
   "settings.app.form.useVerticalStyle": "Użyj stylu poziomego",
   "settings.app.form.wakeUpStrategy": "Strategia wybudzania",
   "settings.app.headlineAdvanced": "Zaawansowane",
@@ -251,8 +253,8 @@
   "settings.app.headlineLanguage": "Język",
   "settings.app.headlinePrivacy": "Prywatność",
   "settings.app.headlineUpdates": "Aktualizacje",
-  "settings.app.hibernateInfo": "Domyślnie, Ferdi trzyma wszystkie Twoje usługi włączone w tle, aby były gotowe w momencie kiedy będziesz ich potrzebował. Hibernacja usług odłączy Twoje usługi po określonym czasie. Dzięki temu zachowasz pamięć RAM lub zachowasz usługi od spowolnienia komputera.",
-  "settings.app.inactivityLockInfo": "Minut do dezaktywacji, po których Ferdi automatycznie zablokuje. Wybierz 0 aby dezaktywować",
+  "settings.app.hibernateInfo": "By default, Ferdi will keep all your services open and loaded in the background so they are ready when you want to use them. Service Hibernation will unload your services after a specified amount. This is useful to save RAM or keeping services from slowing down your computer.",
+  "settings.app.inactivityLockInfo": "Minutes of inactivity, after which Ferdi should automatically lock. Use 0 to disable",
   "settings.app.languageDisclaimer": "Oficjalnymi językami są Angielski i Niemiecki. Inne języki są tłumaczone przez społeczność Ferdi.",
   "settings.app.lockInfo": "Password Lock allows you to keep your messages protected.\nUsing Password Lock, you will be prompted to enter your password everytime you start Ferdi or lock Ferdi yourself using the lock symbol in the bottom left corner or the shortcut {lockShortcut}.",
   "settings.app.lockedPassword": "Hasło",
@@ -309,6 +311,7 @@
   "settings.service.form.enableHibernation": "WÅ‚Ä…cz hibernacjÄ™",
   "settings.service.form.enableNotification": "Aktywuj powiadomienia",
   "settings.service.form.enableService": "Aktywuj usługę",
+  "settings.service.form.enableWakeUp": "Enable wake up",
   "settings.service.form.headlineBadges": "Znaczniki nieprzeczytanych wiadomości",
   "settings.service.form.headlineDarkReaderSettings": "Dark Reader Settings",
   "settings.service.form.headlineGeneral": "Ogólne",
diff --git a/src/i18n/locales/pt-BR.json b/src/i18n/locales/pt-BR.json
index 1d068e87e..08a631c9a 100644
--- a/src/i18n/locales/pt-BR.json
+++ b/src/i18n/locales/pt-BR.json
@@ -210,7 +210,9 @@
   "settings.app.form.customTodoServer": "Servidor de Tarefas Personalizado",
   "settings.app.form.darkMode": "Ativar o Tema Escuro",
   "settings.app.form.enableGPUAcceleration": "Ativar Aceleração de GPU",
+  "settings.app.form.enableGlobalHideShortcut": "Enable Global shortcut to hide Ferdi",
   "settings.app.form.enableLock": "Habilitar bloqueio por senha",
+  "settings.app.form.enableLongPressServiceHint": "Enable service shortcut hint on long press",
   "settings.app.form.enableMenuBar": "Sempre exibir Ferdi na Barra de Menu",
   "settings.app.form.enableSpellchecking": "Ativar verificação ortográfica",
   "settings.app.form.enableSystemTray": "Sempre mostrar o ícone na Bandeja de Sistema",
@@ -309,6 +311,7 @@
   "settings.service.form.enableHibernation": "Ativer hibernação",
   "settings.service.form.enableNotification": "Ativar notificações",
   "settings.service.form.enableService": "Ativar serviço",
+  "settings.service.form.enableWakeUp": "Enable wake up",
   "settings.service.form.headlineBadges": "Emblema de mensagem não lida",
   "settings.service.form.headlineDarkReaderSettings": "Configurações do Dark Reader",
   "settings.service.form.headlineGeneral": "Geral",
diff --git a/src/i18n/locales/pt.json b/src/i18n/locales/pt.json
index 9675d5d77..b0411578b 100644
--- a/src/i18n/locales/pt.json
+++ b/src/i18n/locales/pt.json
@@ -210,7 +210,9 @@
   "settings.app.form.customTodoServer": "Custom Todo Server",
   "settings.app.form.darkMode": "Ativar modo noturno",
   "settings.app.form.enableGPUAcceleration": "Ativar Aceleração de GPU",
+  "settings.app.form.enableGlobalHideShortcut": "Enable Global shortcut to hide Ferdi",
   "settings.app.form.enableLock": "Ativar palavra-passe",
+  "settings.app.form.enableLongPressServiceHint": "Enable service shortcut hint on long press",
   "settings.app.form.enableMenuBar": "Always show Ferdi in Menu Bar",
   "settings.app.form.enableSpellchecking": "Ativar correção ortográfica",
   "settings.app.form.enableSystemTray": "Always show Ferdi in System Tray",
@@ -309,6 +311,7 @@
   "settings.service.form.enableHibernation": "Enable hibernation",
   "settings.service.form.enableNotification": "Ativar notificações",
   "settings.service.form.enableService": "Ativar serviço",
+  "settings.service.form.enableWakeUp": "Enable wake up",
   "settings.service.form.headlineBadges": "Notificações de Mensagens não lidas",
   "settings.service.form.headlineDarkReaderSettings": "Configurações do Leitor Noturno",
   "settings.service.form.headlineGeneral": "Geral",
diff --git a/src/i18n/locales/ro.json b/src/i18n/locales/ro.json
index fad6dae82..e6c8f6262 100644
--- a/src/i18n/locales/ro.json
+++ b/src/i18n/locales/ro.json
@@ -210,7 +210,9 @@
   "settings.app.form.customTodoServer": "Custom Todo Server",
   "settings.app.form.darkMode": "Enable Dark Mode",
   "settings.app.form.enableGPUAcceleration": "Enable GPU Acceleration",
+  "settings.app.form.enableGlobalHideShortcut": "Enable Global shortcut to hide Ferdi",
   "settings.app.form.enableLock": "Enable Password Lock",
+  "settings.app.form.enableLongPressServiceHint": "Enable service shortcut hint on long press",
   "settings.app.form.enableMenuBar": "Always show Ferdi in Menu Bar",
   "settings.app.form.enableSpellchecking": "Enable spell checking",
   "settings.app.form.enableSystemTray": "Always show Ferdi in System Tray",
@@ -309,6 +311,7 @@
   "settings.service.form.enableHibernation": "Enable hibernation",
   "settings.service.form.enableNotification": "Enable notifications",
   "settings.service.form.enableService": "Enable service",
+  "settings.service.form.enableWakeUp": "Enable wake up",
   "settings.service.form.headlineBadges": "Unread message badges",
   "settings.service.form.headlineDarkReaderSettings": "Dark Reader Settings",
   "settings.service.form.headlineGeneral": "General",
diff --git a/src/i18n/locales/ru.json b/src/i18n/locales/ru.json
index f7d25e08b..3d9bd13b1 100644
--- a/src/i18n/locales/ru.json
+++ b/src/i18n/locales/ru.json
@@ -210,7 +210,9 @@
   "settings.app.form.customTodoServer": "Custom Todo Server",
   "settings.app.form.darkMode": "Включить Тёмный режим",
   "settings.app.form.enableGPUAcceleration": "Включить у�корение GPU",
+  "settings.app.form.enableGlobalHideShortcut": "Enable Global shortcut to hide Ferdi",
   "settings.app.form.enableLock": "Enable Password Lock",
+  "settings.app.form.enableLongPressServiceHint": "Enable service shortcut hint on long press",
   "settings.app.form.enableMenuBar": "Always show Ferdi in Menu Bar",
   "settings.app.form.enableSpellchecking": "Включить проверку правопи�ани�",
   "settings.app.form.enableSystemTray": "Always show Ferdi in System Tray",
@@ -309,6 +311,7 @@
   "settings.service.form.enableHibernation": "Enable hibernation",
   "settings.service.form.enableNotification": "Включить уведомлени�",
   "settings.service.form.enableService": "Включить �ерви�",
+  "settings.service.form.enableWakeUp": "Enable wake up",
   "settings.service.form.headlineBadges": "Значки непрочитанных �ообщений",
   "settings.service.form.headlineDarkReaderSettings": "Dark Reader Settings",
   "settings.service.form.headlineGeneral": "Общие",
diff --git a/src/i18n/locales/sk.json b/src/i18n/locales/sk.json
index 02d325afd..08fb905cf 100644
--- a/src/i18n/locales/sk.json
+++ b/src/i18n/locales/sk.json
@@ -210,7 +210,9 @@
   "settings.app.form.customTodoServer": "Custom Todo Server",
   "settings.app.form.darkMode": "Zapnúť Dark Mode",
   "settings.app.form.enableGPUAcceleration": "Zapnúť GPU zrýchlenie",
+  "settings.app.form.enableGlobalHideShortcut": "Enable Global shortcut to hide Ferdi",
   "settings.app.form.enableLock": "Enable Password Lock",
+  "settings.app.form.enableLongPressServiceHint": "Enable service shortcut hint on long press",
   "settings.app.form.enableMenuBar": "Always show Ferdi in Menu Bar",
   "settings.app.form.enableSpellchecking": "Zapnúť kontrolu pravopisu",
   "settings.app.form.enableSystemTray": "Always show Ferdi in System Tray",
@@ -309,6 +311,7 @@
   "settings.service.form.enableHibernation": "Enable hibernation",
   "settings.service.form.enableNotification": "Povoliť oznámenia",
   "settings.service.form.enableService": "Povoliť službu",
+  "settings.service.form.enableWakeUp": "Enable wake up",
   "settings.service.form.headlineBadges": "Symboly nepre�ítaných správ",
   "settings.service.form.headlineDarkReaderSettings": "Dark Reader Settings",
   "settings.service.form.headlineGeneral": "Všeobecné",
diff --git a/src/i18n/locales/sl.json b/src/i18n/locales/sl.json
index 041b02632..ff10978c4 100644
--- a/src/i18n/locales/sl.json
+++ b/src/i18n/locales/sl.json
@@ -210,7 +210,9 @@
   "settings.app.form.customTodoServer": "Custom Todo Server",
   "settings.app.form.darkMode": "Enable Dark Mode",
   "settings.app.form.enableGPUAcceleration": "Enable GPU Acceleration",
+  "settings.app.form.enableGlobalHideShortcut": "Enable Global shortcut to hide Ferdi",
   "settings.app.form.enableLock": "Enable Password Lock",
+  "settings.app.form.enableLongPressServiceHint": "Enable service shortcut hint on long press",
   "settings.app.form.enableMenuBar": "Always show Ferdi in Menu Bar",
   "settings.app.form.enableSpellchecking": "Enable spell checking",
   "settings.app.form.enableSystemTray": "Always show Ferdi in System Tray",
@@ -309,6 +311,7 @@
   "settings.service.form.enableHibernation": "Enable hibernation",
   "settings.service.form.enableNotification": "Enable notifications",
   "settings.service.form.enableService": "Enable service",
+  "settings.service.form.enableWakeUp": "Enable wake up",
   "settings.service.form.headlineBadges": "Unread message badges",
   "settings.service.form.headlineDarkReaderSettings": "Dark Reader Settings",
   "settings.service.form.headlineGeneral": "General",
diff --git a/src/i18n/locales/sr.json b/src/i18n/locales/sr.json
index 85068ee5c..a058a81ed 100644
--- a/src/i18n/locales/sr.json
+++ b/src/i18n/locales/sr.json
@@ -210,7 +210,9 @@
   "settings.app.form.customTodoServer": "Custom Todo Server",
   "settings.app.form.darkMode": "Enable Dark Mode",
   "settings.app.form.enableGPUAcceleration": "Омогући убрзање графичке јединице",
+  "settings.app.form.enableGlobalHideShortcut": "Enable Global shortcut to hide Ferdi",
   "settings.app.form.enableLock": "Enable Password Lock",
+  "settings.app.form.enableLongPressServiceHint": "Enable service shortcut hint on long press",
   "settings.app.form.enableMenuBar": "Always show Ferdi in Menu Bar",
   "settings.app.form.enableSpellchecking": "Omogući provjeru pravopisa",
   "settings.app.form.enableSystemTray": "Always show Ferdi in System Tray",
@@ -309,6 +311,7 @@
   "settings.service.form.enableHibernation": "Enable hibernation",
   "settings.service.form.enableNotification": "Omogućite obavijesti",
   "settings.service.form.enableService": "Omogućite usluge",
+  "settings.service.form.enableWakeUp": "Enable wake up",
   "settings.service.form.headlineBadges": "Беџеви за непрочитане поруке",
   "settings.service.form.headlineDarkReaderSettings": "Dark Reader Settings",
   "settings.service.form.headlineGeneral": "Općenito",
diff --git a/src/i18n/locales/sv.json b/src/i18n/locales/sv.json
index ef254fc5d..c3491f720 100644
--- a/src/i18n/locales/sv.json
+++ b/src/i18n/locales/sv.json
@@ -1,6 +1,6 @@
 {
   "app.errorHandler.action": "Ladda om",
-  "app.errorHandler.headline": "Something went wrong.",
+  "app.errorHandler.headline": "NÃ¥gonting gick fel.",
   "changeserver.customServerLabel": "Anpassad server",
   "changeserver.headline": "Byt server",
   "changeserver.label": "Server",
@@ -9,7 +9,7 @@
   "connectionLostBanner.cta": "Ladda om tjänst",
   "connectionLostBanner.informationLink": "Vad hände?",
   "connectionLostBanner.message": "Åh nej! Ferdi förlorade anslutningen till {name}.",
-  "feature.basicAuth.signIn": "Sign In",
+  "feature.basicAuth.signIn": "Logga in",
   "feature.nightlyBuilds.activate": "Aktivera",
   "feature.nightlyBuilds.info": "Nattliga kompileringar är väldigt experimentella versioner av Ferdi som kan innehålla ofärdiga och ännu ej testade funktioner. Nattliga kompilering är i första hand tänkt för utvecklare för att kunna testa hur nya funktioner fungerar och presterar. Är du osäker på vad detta innebär rekommenderas du att inte aktivera nattliga kompileringar.",
   "feature.nightlyBuilds.title": "Nattlig kompilering",
@@ -23,37 +23,37 @@
   "feature.quickSwitch.info": "Välj en tjänst med TAB, ↑ and ↓. Öppna en tjänst med ENTER.",
   "feature.quickSwitch.search": "Sök...",
   "feature.quickSwitch.title": "Snabbväxling",
-  "global.api.unhealthy": "Can't connect to Ferdi online services",
-  "global.cancel": "Cancel",
+  "global.api.unhealthy": "Kan inte ansluta till Ferdis onlinetjänster",
+  "global.cancel": "Avbryt",
   "global.edit": "Redigera",
-  "global.no": "No",
+  "global.no": "Nej",
   "global.notConnectedToTheInternet": "Du är inte ansluten till Internet.",
   "global.ok": "Ok",
-  "global.quit": "Quit",
-  "global.quitConfirmation": "Do you really want to quit Ferdi?",
-  "global.save": "Save",
-  "global.settings": "Settings",
+  "global.quit": "Avsluta",
+  "global.quitConfirmation": "Vill du verkligen avsluta?",
+  "global.save": "Spara",
+  "global.settings": "Inställningar",
   "global.spellchecker.useDefault": "Använd systemstandard ({default})",
   "global.spellchecking.autodetect": "Identifiera språk automatiskt",
   "global.spellchecking.autodetect.short": "Automatisk",
   "global.spellchecking.language": "Rättstavningsspråk",
-  "global.submit": "Submit",
-  "global.userAgentHelp": "Use 'https://whatmyuseragent.com/' (to discover) or 'https://developers.whatismybrowser.com/useragents/explore/' (to choose) your desired user agent and copy-paste it here.",
-  "global.userAgentPref": "User Agent",
-  "global.yes": "Yes",
+  "global.submit": "Skicka",
+  "global.userAgentHelp": "Använd 'https://whatmyuseragent.com/' (för att upptäcka) eller 'https://developers.whatismybrowser.com/useragents/explore/' (för att välja) din önskade användaragent och kopiera-klistra in den här.",
+  "global.userAgentPref": "Användaragent",
+  "global.yes": "Ja",
   "import.headline": "Importera dina Ferdi 4-tjänster",
   "import.notSupportedHeadline": "Tjänster som ännu inte stöds i Ferdi 5",
   "import.skip.label": "Jag vill lägga till tjänster manuellt",
-  "import.submit.label": "Import {count} services",
+  "import.submit.label": "Importera {count} tjänster",
   "infobar.authRequestFailed": "Det uppstod fel vid försök då en autentiserad begäran utfördes. Prova att logga ut och in igen om felet kvarstår.",
-  "infobar.buttonChangelog": "What is new?",
+  "infobar.buttonChangelog": "Vad är nytt?",
   "infobar.buttonInstallUpdate": "Starta om & installera uppdatering",
   "infobar.buttonReloadServices": "Ladda om tjänster",
   "infobar.hide": "Dölj",
   "infobar.requiredRequestsFailed": "Kunde inte ladda tjänster och användarinformation",
   "infobar.servicesUpdated": "Dina tjänster har uppdaterats.",
   "infobar.updateAvailable": "En ny uppdatering för Ferdi finns tillgänglig.",
-  "infobox.dismiss": "Dismiss",
+  "infobox.dismiss": "Avfärda",
   "invite.email.label": "E-postadress",
   "invite.headline.friends": "Bjud in 3 av dina vänner eller kollegor",
   "invite.name.label": "Namn",
@@ -74,7 +74,7 @@
   "login.email.label": "E-postadress",
   "login.headline": "Logga in",
   "login.invalidCredentials": "E-post eller lösenord är felaktigt",
-  "login.link.password": "Reset password",
+  "login.link.password": "Återställ lösenord",
   "login.link.signup": "Skapa ett gratis konto",
   "login.password.label": "Lösenord",
   "login.serverLogout": "Din session har gått ut. Vänligen logga in på nytt.",
@@ -86,40 +86,40 @@
   "menu.app.autohideMenuBar": "Dölj menyraden automatiskt",
   "menu.app.checkForUpdates": "Sök efter uppdateringar",
   "menu.app.hide": "Dölj",
-  "menu.app.hideOthers": "Hide Others",
-  "menu.app.unhide": "Unhide",
+  "menu.app.hideOthers": "Dölj övriga",
+  "menu.app.unhide": "Visa",
   "menu.edit": "Redigera",
-  "menu.edit.copy": "Copy",
-  "menu.edit.cut": "Cut",
+  "menu.edit.copy": "Kopiera",
+  "menu.edit.cut": "Klipp ut",
   "menu.edit.delete": "Radera",
   "menu.edit.emojiSymbols": "Emojis & symboler",
   "menu.edit.findInPage": "Hitta på sidan",
-  "menu.edit.paste": "Paste",
-  "menu.edit.pasteAndMatchStyle": "Paste And Match Style",
-  "menu.edit.redo": "Redo",
-  "menu.edit.selectAll": "Select All",
+  "menu.edit.paste": "Klistra in",
+  "menu.edit.pasteAndMatchStyle": "Klistra in och matcha stil",
+  "menu.edit.redo": "Gör om",
+  "menu.edit.selectAll": "Markera allt",
   "menu.edit.speech": "Tal",
   "menu.edit.startDictation": "Börja diktera",
   "menu.edit.startSpeaking": "Börja tala",
   "menu.edit.stopSpeaking": "Sluta prata",
-  "menu.edit.undo": "Undo",
+  "menu.edit.undo": "Ã…ngra",
   "menu.file": "Fil",
-  "menu.help": "Help",
+  "menu.help": "Hjälp",
   "menu.help.changelog": "Ändringslogg",
   "menu.help.debugInfo": "Kopiera felsökningsinformation",
   "menu.help.debugInfoCopiedBody": "Din felsökningsinformation har kopierats till ditt urklipp.",
   "menu.help.debugInfoCopiedHeadline": "Ferdi felsökningsinformation",
-  "menu.help.importExportData": "Import/Export Configuration Data",
+  "menu.help.importExportData": "Importera/Exportera konfigurationsdata",
   "menu.help.learnMore": "Läs mer",
   "menu.help.privacy": "Integritetspolicy",
   "menu.help.publishDebugInfo": "Skicka felsökningsinformation",
   "menu.help.support": "Support",
   "menu.help.tos": "Användarvillkor",
   "menu.services": "Tjänster",
-  "menu.services.activatePreviousService": "Activate previous service",
-  "menu.services.addNewService": "Add New Service...",
+  "menu.services.activatePreviousService": "Aktivera föregående tjänst",
+  "menu.services.addNewService": "Lägg till ny tjänst...",
   "menu.services.goHome": "Hem",
-  "menu.services.setNextServiceActive": "Activate next service",
+  "menu.services.setNextServiceActive": "Aktivera nästa tjänst",
   "menu.todos": "Todos",
   "menu.todos.enableTodos": "Aktivera Todos",
   "menu.view": "Visa",
@@ -127,31 +127,31 @@
   "menu.view.forward": "Framåt",
   "menu.view.lockFerdi": "LÃ¥s Ferdi",
   "menu.view.openQuickSwitch": "Öppna snabbväxling",
-  "menu.view.reloadFerdi": "Reload Ferdi",
+  "menu.view.reloadFerdi": "Ladda om Ferdi",
   "menu.view.reloadService": "Ladda om tjänst",
   "menu.view.reloadTodos": "Ladda om: AttGöra",
-  "menu.view.resetZoom": "Actual Size",
+  "menu.view.resetZoom": "Originalstorlek",
   "menu.view.toggleDarkMode": "Växla mörkt läge",
   "menu.view.toggleDevTools": "Växla utvecklarverktyg",
-  "menu.view.toggleFullScreen": "Toggle Full Screen",
+  "menu.view.toggleFullScreen": "Växla till/från helskärm",
   "menu.view.toggleServiceDevTools": "Växla tjänsteverktyg för utvecklare",
   "menu.view.toggleTodosDevTools": "Växla Todos utvecklarverktyg",
-  "menu.view.zoomIn": "Zoom In",
-  "menu.view.zoomOut": "Zoom Out",
-  "menu.window": "Window",
-  "menu.window.close": "Close",
-  "menu.window.minimize": "Minimize",
+  "menu.view.zoomIn": "Zooma in",
+  "menu.view.zoomOut": "Zooma ut",
+  "menu.window": "Fönster",
+  "menu.window.close": "Stäng",
+  "menu.window.minimize": "Minimera",
   "menu.workspaces": "Arbetsytor",
   "menu.workspaces.addNewWorkspace": "Skapa ny arbetsyta...",
   "menu.workspaces.closeWorkspaceDrawer": "Stäng arbetsytan",
   "menu.workspaces.defaultWorkspace": "Alla tjänster",
   "menu.workspaces.openWorkspaceDrawer": "Öppna arbetsytan",
   "password.email.label": "E-postadress",
-  "password.headline": "Reset password",
+  "password.headline": "Återställ lösenord",
   "password.link.login": "Logga in på ditt konto",
   "password.link.signup": "Skapa ett gratis konto",
-  "password.noUser": "No user with that email address was found",
-  "password.successInfo": "Your new password was sent to your email address",
+  "password.noUser": "Ingen användare med den e-postadressen hittades",
+  "password.successInfo": "Ett nytt lösenord har skickats till din e-postadress",
   "service.crashHandler.action": "Ladda om {name}",
   "service.crashHandler.autoReload": "Försöker automatiskt återställa {name} om {seconds} sekunder",
   "service.crashHandler.headline": "Ã…h nej!",
@@ -166,10 +166,10 @@
   "service.webviewLoader.loading": "Laddar {service}",
   "services.getStarted": "Kom igång",
   "services.login": "Logga in för att använda Ferdi.",
-  "services.serverInfo": "Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner. If you are switching over (from one of the hosted servers) to using Ferdi without an account, please be informed that you can export your data from that server and subsequently import it using the Help menu to resurrect all your workspaces and configured services!",
+  "services.serverInfo": "Alternativt kan du ändra din Ferdi server genom att klicka på kuggen i det nedre vänstra hörnet. Om du byter över (från en av de hostade servrarna) till att använda Ferdi utan ett konto, informeras om att du kan exportera dina data från den servern och därefter importera den med hjälp av Hjälpmenyn för att återuppliva alla dina arbetsytor och konfigurerade tjänster!",
   "services.serverless": "Använd Ferdi utan ett konto",
   "services.welcome": "Välkommen till Ferdi",
-  "settings.account.account.editButton": "Edit account",
+  "settings.account.account.editButton": "Redigera konto",
   "settings.account.accountUnavailable": "Kontot är inte tillgängligt",
   "settings.account.accountUnavailableInfo": "Du använder Ferdi utan ett konto. Om du vill använda Ferdi med ett konto och hålla dina tjänster synkroniserade mellan installationer, välj en server i fliken Inställningar och logga in.",
   "settings.account.buttonSave": "Uppdatera profil",
@@ -177,25 +177,25 @@
   "settings.account.deleteEmailSent": "Du har fått ett e-postmeddelande med en länk för att bekräfta raderingen av ditt konto. Ditt konto och data kan inte återställas!",
   "settings.account.deleteInfo": "Om du inte behöver ditt Ferdi-konto längre, kan du ta bort ditt konto och all anknuten information här.",
   "settings.account.headline": "Konto",
-  "settings.account.headlineAccount": "Account information",
-  "settings.account.headlineDangerZone": "Danger Zone",
-  "settings.account.headlineInvoices": "Invoices",
-  "settings.account.headlinePassword": "Change password",
+  "settings.account.headlineAccount": "Kontoinformation",
+  "settings.account.headlineDangerZone": "Högrisksområde",
+  "settings.account.headlineInvoices": "Fakturor",
+  "settings.account.headlinePassword": "Ändra lösenord",
   "settings.account.headlineProfile": "Uppdatera profil",
   "settings.account.successInfo": "Dina ändringar har sparats",
   "settings.account.tryReloadServices": "Försök igen",
   "settings.account.tryReloadUserInfoRequest": "Försök igen",
   "settings.account.userInfoRequestFailed": "Kunde inte ladda användarinformation",
-  "settings.account.yourLicense": "Your Ferdi License:",
-  "settings.app.accentColorInfo": "Write your accent color in a CSS-compatible format. (Default: {defaultAccentColor})",
+  "settings.account.yourLicense": "Din Ferdi-licens:",
+  "settings.app.accentColorInfo": "Skriv din accentfärg i ett CSS-kompatibelt format. (Standard: {defaultAccentColor})",
   "settings.app.buttonClearAllCache": "Rensa cache",
   "settings.app.buttonInstallUpdate": "Starta om & installera uppdatering",
-  "settings.app.buttonOpenFerdiProfileFolder": "Open Profile folder",
-  "settings.app.buttonOpenFerdiServiceRecipesFolder": "Open Service Recipes folder",
+  "settings.app.buttonOpenFerdiProfileFolder": "Öppna profilmapp",
+  "settings.app.buttonOpenFerdiServiceRecipesFolder": "Öppna Service Recept mapp",
   "settings.app.buttonSearchForUpdate": "Sök efter uppdateringar",
   "settings.app.cacheInfo": "Ferdis cache använder för närvarande {size} diskutrymme.",
   "settings.app.cacheNotCleared": "Kunde inte rensa alla temporära filer",
-  "settings.app.closeSettings": "Close settings",
+  "settings.app.closeSettings": "Stäng inställningarna",
   "settings.app.currentVersion": "Nuvarande version:",
   "settings.app.form.accentColor": "Accentfärg",
   "settings.app.form.adaptableDarkMode": "Synkronisera det mörka läget med operativsystemets inställning för mörkt läge",
@@ -204,18 +204,20 @@
   "settings.app.form.autoLaunchOnStart": "Starta Ferdi vid uppstart",
   "settings.app.form.automaticUpdates": "Aktivera uppdateringar",
   "settings.app.form.beta": "Inkludera betaversioner",
-  "settings.app.form.clipboardNotifications": "Don't show notifications for clipboard events",
-  "settings.app.form.closeToSystemTray": "Close Ferdi to system tray",
-  "settings.app.form.confirmOnQuit": "Confirm when quitting Ferdi",
-  "settings.app.form.customTodoServer": "Custom Todo Server",
+  "settings.app.form.clipboardNotifications": "Visa inte aviseringar för urklipp händelser",
+  "settings.app.form.closeToSystemTray": "Stäng Ferdi till systemfältet",
+  "settings.app.form.confirmOnQuit": "Bekräfta när du avslutar Ferdi",
+  "settings.app.form.customTodoServer": "Anpassad Todo-server",
   "settings.app.form.darkMode": "Aktivera mörkt läge",
   "settings.app.form.enableGPUAcceleration": "Aktivera GPU-hårdvaruacceleration",
+  "settings.app.form.enableGlobalHideShortcut": "Aktivera Global genväg för att dölja Ferdi",
   "settings.app.form.enableLock": "Aktivera lösenordslås",
-  "settings.app.form.enableMenuBar": "Always show Ferdi in Menu Bar",
+  "settings.app.form.enableLongPressServiceHint": "Aktivera servicegenvägledningstips vid långt tryck",
+  "settings.app.form.enableMenuBar": "Visa alltid Ferdi i menyraden",
   "settings.app.form.enableSpellchecking": "Aktivera stavningskontroll",
-  "settings.app.form.enableSystemTray": "Always show Ferdi in System Tray",
+  "settings.app.form.enableSystemTray": "Visa alltid ikon i systemfältet",
   "settings.app.form.enableTodos": "Aktivera Ferdi Todos",
-  "settings.app.form.hibernateOnStartup": "Keep services in hibernation on startup",
+  "settings.app.form.hibernateOnStartup": "Håll tjänster i viloläge vid start",
   "settings.app.form.hibernationStrategy": "Strategi för vila",
   "settings.app.form.iconSize": "Ikonstorlek för tjänster",
   "settings.app.form.inactivityLock": "LÃ¥s efter inaktivitet",
@@ -224,8 +226,8 @@
   "settings.app.form.lockPassword": "Lösenord",
   "settings.app.form.minimizeToSystemTray": "Minimera Ferdi till systemfältet",
   "settings.app.form.navigationBarBehaviour": "Navigeringsfältets beteende",
-  "settings.app.form.notifyTaskBarOnMessage": "Notify TaskBar/Dock on new message",
-  "settings.app.form.passwordToggle": "Password toggle",
+  "settings.app.form.notifyTaskBarOnMessage": "Meddela Aktivitetsfält/Docka på nytt meddelande",
+  "settings.app.form.passwordToggle": "Växla lösenord",
   "settings.app.form.predefinedTodoServer": "Todo-server",
   "settings.app.form.privateNotifications": "Visa inte meddelandeinnehåll i aviseringar",
   "settings.app.form.reloadAfterResume": "Ladda om Ferdi efter datorn väckts från vila",
@@ -233,38 +235,38 @@
   "settings.app.form.scheduledDNDEnabled": "Aktivera schemalagt Stör ej-läge",
   "settings.app.form.scheduledDNDEnd": "Till",
   "settings.app.form.scheduledDNDStart": "Från",
-  "settings.app.form.searchEngine": "Search engine",
+  "settings.app.form.searchEngine": "Sökmotor",
   "settings.app.form.sentry": "Skicka telemetridata",
   "settings.app.form.serviceRibbonWidth": "Sidofältets bredd",
   "settings.app.form.showDisabledServices": "Visa flikar för inaktiverade tjänster",
   "settings.app.form.showDragArea": "Visa dragbart område i fönstret",
   "settings.app.form.showMessagesBadgesWhenMuted": "Visa antal olästa meddelanden när aviseringar är inaktiverade",
-  "settings.app.form.splitMode": "Enable Split View Mode",
+  "settings.app.form.splitMode": "Aktivera delat visningsläge",
   "settings.app.form.startMinimized": "Starta i minimerat läge",
   "settings.app.form.universalDarkMode": "Aktivera globalt mörkt läge",
-  "settings.app.form.useTouchIdToUnlock": "Allow using TouchID to unlock Ferdi",
-  "settings.app.form.useVerticalStyle": "Use horizontal style",
-  "settings.app.form.wakeUpStrategy": "Wake up strategy",
+  "settings.app.form.useTouchIdToUnlock": "Tillåt att TouchID används för att låsa upp Ferdi",
+  "settings.app.form.useVerticalStyle": "Använd horisontell stil",
+  "settings.app.form.wakeUpStrategy": "Vakna strategi",
   "settings.app.headlineAdvanced": "Avancerat",
   "settings.app.headlineAppearance": "Utseende",
   "settings.app.headlineGeneral": "Allmänt",
   "settings.app.headlineLanguage": "Språk",
-  "settings.app.headlinePrivacy": "Privacy",
+  "settings.app.headlinePrivacy": "Sekretess",
   "settings.app.headlineUpdates": "Uppdateringar",
   "settings.app.hibernateInfo": "Som standard kommer Ferdi att hålla alla dina tjänster öppna och laddade i bakgrunden så att de är redo när du vill använda dem. Viloläget kommer att stänga dina tjänster efter ett angivet belopp. Detta är användbart för att spara på arbetsminne eller se till att tjänster inte saktar ner datorn.",
   "settings.app.inactivityLockInfo": "Antal minuter av inaktivitet, varefter Ferdi låses automatiskt. Ange 0 för att inaktivera",
   "settings.app.languageDisclaimer": "Engelska och tyska är officella översättningar. Övriga språk har översatts av gemenskapen.",
-  "settings.app.lockInfo": "Password Lock allows you to keep your messages protected.\nUsing Password Lock, you will be prompted to enter your password everytime you start Ferdi or lock Ferdi yourself using the lock symbol in the bottom left corner or the shortcut {lockShortcut}.",
+  "settings.app.lockInfo": "Lösenordslås låter dig skydda dina meddelanden.\nAnvända lösenordsblock, du kommer att bli ombedd att ange ditt lösenord varje gång du startar Ferdi eller låsa Ferdi själv med hjälp av låssymbolen i det nedre vänstra hörnet eller genvägen {lockShortcut}.",
   "settings.app.lockedPassword": "Lösenord",
-  "settings.app.lockedPasswordInfo": "Please make sure to set a password you'll remember.\nIf you loose this password, you will have to reinstall Ferdi.",
+  "settings.app.lockedPasswordInfo": "Se till att du anger ett lösenord du kommer att komma ihåg.\nOm du tappar bort detta lösenord måste du installera om Ferdi.",
   "settings.app.restartRequired": "Ändringar kräver omstart",
   "settings.app.scheduledDNDInfo": "Schemalagd \"Stör ej\" låter dig definiera en tidsperiod inom vilken du inte vill få meddelanden från Ferdi.",
   "settings.app.scheduledDNDTimeInfo": "Tid i 24-timmarsformat. Sluttid kan vara före starttid (t.ex. start 17:00, slut 09:00) för att aktivera \"Stör ej\" över natten.",
-  "settings.app.sentryInfo": "Sending telemetry data allows us to find errors in Ferdi - we will not send any personal information like your message data!",
-  "settings.app.spellCheckerLanguageInfo": "Ferdi uses your Mac's build-in spellchecker to check for typos. If you want to change the languages the spellchecker checks for, you can do so in your Mac's System Preferences.",
+  "settings.app.sentryInfo": "Genom att skicka telemetri data kan vi hitta fel i Ferdi - vi kommer inte att skicka någon personlig information som dina meddelandedata!",
+  "settings.app.spellCheckerLanguageInfo": "Ferdi använder Mac's inbyggda stavningskontroll för att kontrollera skrivfel. Om du vill ändra de språk som stavningskontrollen kontrollerar efter kan du göra det i din Macs Systeminställningar.",
   "settings.app.subheadlineCache": "Cache",
   "settings.app.subheadlineFerdiProfile": "Ferdi Profile",
-  "settings.app.todoServerInfo": "This server will be used for the \"Ferdi Todo\" feature.",
+  "settings.app.todoServerInfo": "Denna server kommer att användas för \"Ferdi Todo\"-funktionen.",
   "settings.app.translationHelp": "Hjälp oss att översätta Ferdi till ditt språk.",
   "settings.app.universalDarkModeInfo": "Globalt mörkt läge försöker att dynamiskt generera en mörk stil för tjänster som ännu inte stöds.",
   "settings.app.updateStatusAvailable": "Uppdatering tillgänglig, laddar ner...",
@@ -283,12 +285,12 @@
   "settings.recipes.customService.headline.communityRecipes": "Tredjepartsrecept från gemenskapen",
   "settings.recipes.customService.headline.customRecipes": "Egna tredjepartsrecept",
   "settings.recipes.customService.headline.devRecipes": "Dina recept för utvecklingsservice",
-  "settings.recipes.customService.intro": "To add a custom service, copy the service recipe to:",
+  "settings.recipes.customService.intro": "För att lägga till en anpassad tjänst, kopiera receptet för tjänsten till:",
   "settings.recipes.customService.openDevDocs": "Dokumentation för utvecklare",
-  "settings.recipes.customService.openFolder": "Open folder",
+  "settings.recipes.customService.openFolder": "Öppna mapp",
   "settings.recipes.headline": "Tillgängliga tjänster",
   "settings.recipes.missingService": "Saknar du en tjänst?",
-  "settings.recipes.nothingFound": "Sorry, but no service matched your search term - but you can still probably add it using the \"Custom Website\" option. Please note that the website might show more services that have been added to Ferdi since the version that you are currently on. To get those new services, please consider upgrading to a newer version of Ferdi.",
+  "settings.recipes.nothingFound": "Tyvärr, men ingen tjänst matchade ditt sökord - men du kan fortfarande förmodligen lägga till det med \"Anpassad webbplats\" alternativet. Observera att webbplatsen kan visa fler tjänster som har lagts till Ferdi sedan den version som du för närvarande är på. För att få dessa nya tjänster, överväg att uppgradera till en nyare version av Ferdi.",
   "settings.recipes.servicesSuccessfulAddedInfo": "Tjänsten har lagts till",
   "settings.searchService": "Sök efter tjänst",
   "settings.service.error.goBack": "Tillbaka till tjänster",
@@ -298,19 +300,20 @@
   "settings.service.form.availableServices": "Tillgängliga tjänster",
   "settings.service.form.customUrl": "Anpassad server",
   "settings.service.form.customUrlValidationError": "Kunde inte validera anpassad {name} -server.",
-  "settings.service.form.darkReaderBrightness": "Dark Reader Brightness",
-  "settings.service.form.darkReaderContrast": "Dark Reader Contrast",
-  "settings.service.form.darkReaderSepia": "Dark Reader Sepia",
-  "settings.service.form.deleteButton": "Delete service",
+  "settings.service.form.darkReaderBrightness": "Mörk läsare ljusstyrka",
+  "settings.service.form.darkReaderContrast": "Mörk Läsare kontrast",
+  "settings.service.form.darkReaderSepia": "Mörk Läsare Sepia",
+  "settings.service.form.deleteButton": "Ta bort tjänst",
   "settings.service.form.editServiceHeadline": "Redigera {name}",
   "settings.service.form.enableAudio": "Aktivera ljud",
   "settings.service.form.enableBadge": "Visa olästa meddelandemärken",
   "settings.service.form.enableDarkMode": "Aktivera mörkt läge",
-  "settings.service.form.enableHibernation": "Enable hibernation",
+  "settings.service.form.enableHibernation": "Aktivera hibernation",
   "settings.service.form.enableNotification": "Aktivera aviseringar",
   "settings.service.form.enableService": "Aktivera tjänst",
+  "settings.service.form.enableWakeUp": "Aktivera vakna",
   "settings.service.form.headlineBadges": "Olästa meddelandemärken",
-  "settings.service.form.headlineDarkReaderSettings": "Dark Reader Settings",
+  "settings.service.form.headlineDarkReaderSettings": "Mörk läsare inställningar",
   "settings.service.form.headlineGeneral": "Allmänt",
   "settings.service.form.headlineNotifications": "Aviseringar",
   "settings.service.form.icon": "Anpassad ikon",
@@ -318,21 +321,21 @@
   "settings.service.form.iconUpload": "Släpp din bild, eller klicka här",
   "settings.service.form.indirectMessageInfo": "Du kommer att aviseras om alla nya meddelanden i en kanal, inte bara @username, @channel, @here, ...",
   "settings.service.form.indirectMessages": "Visa meddelandemärke för alla nya meddelanden",
-  "settings.service.form.isHibernatedEnabledInfo": "When enabled, a service will be shut down after a period of time to save system resources.",
+  "settings.service.form.isHibernatedEnabledInfo": "När den är aktiverad kommer en tjänst att stängas av efter en tidsperiod för att spara systemresurser.",
   "settings.service.form.isMutedInfo": "Om inaktiverad kommer alla aviseringsljud och ljuduppspelning att tystas",
   "settings.service.form.name": "Namn",
-  "settings.service.form.onlyShowFavoritesInUnreadCount": "Only show Favorites in unread count",
+  "settings.service.form.onlyShowFavoritesInUnreadCount": "Visa endast favoriter i olästa antal",
   "settings.service.form.openDarkmodeCss": "Öppna darkmode.css",
   "settings.service.form.openUserCss": "Öppna user.css",
   "settings.service.form.openUserJs": "Öppna user.js",
   "settings.service.form.proxy.headline": "Inställningar för HTTP/HTTPS-proxy",
   "settings.service.form.proxy.host": "Proxy-värd/IP",
-  "settings.service.form.proxy.info": "Proxy settings will not be synchronized with the Ferdi servers.",
+  "settings.service.form.proxy.info": "Proxyinställningarna kommer inte att synkroniseras med Ferdi servrarna.",
   "settings.service.form.proxy.isEnabled": "Använd proxy",
-  "settings.service.form.proxy.password": "Password (optional)",
+  "settings.service.form.proxy.password": "Lösenord (frivilligt)",
   "settings.service.form.proxy.port": "Port",
   "settings.service.form.proxy.restartInfo": "Vänligen starta om Ferdi efter att du ändrat proxyinställningar.",
-  "settings.service.form.proxy.user": "User (optional)",
+  "settings.service.form.proxy.user": "Användare (valfritt)",
   "settings.service.form.recipeFileInfo": "Dina användarfiler kommer att infogas i webbsidan så att du kan anpassa tjänsterna hur du vill. Användarfiler lagras endast lokalt och överförs inte till andra datorer som använer samma konto.",
   "settings.service.form.saveButton": "Spara tjänst",
   "settings.service.form.tabHosted": "Värd",
@@ -343,32 +346,32 @@
   "settings.services.deletedInfo": "Tjänsten har tagits bort",
   "settings.services.discoverServices": "Upptäck tjänster",
   "settings.services.headline": "Dina tjänster",
-  "settings.services.noServicesAdded": "Start by adding a service.",
-  "settings.services.nothingFound": "Sorry, but no service matched your search term - but you can still probably add it using the \"Custom Website\" option. Please note that the website might show more services that have been added to Ferdi since the version that you are currently on. To get those new services, please consider upgrading to a newer version of Ferdi.",
+  "settings.services.noServicesAdded": "Börja med att lägga till en tjänst.",
+  "settings.services.nothingFound": "Tyvärr, men ingen tjänst matchade ditt sökord - men du kan fortfarande förmodligen lägga till det med \"Anpassad webbplats\" alternativet. Observera att webbplatsen kan visa fler tjänster som har lagts till Ferdi sedan den version som du för närvarande är på. För att få dessa nya tjänster, överväg att uppgradera till en nyare version av Ferdi.",
   "settings.services.servicesRequestFailed": "Kunde inte ladda dina tjänster",
   "settings.services.tooltip.isDisabled": "Tjänsten är inaktiverad",
   "settings.services.tooltip.isMuted": "Alla ljud är avstängda",
   "settings.services.tooltip.notificationsDisabled": "Aviseringar är inaktiverade",
   "settings.services.updatedInfo": "Dina ändringar har sparats",
-  "settings.supportFerdi.aboutIntro": "<p>Ferdi is an open-source and a community-lead application.</p><p>Thanks to the people who make this possbile:</p>",
-  "settings.supportFerdi.bannerText": "Do you want to help us improve Ferdi?",
+  "settings.supportFerdi.aboutIntro": "<p>Ferdi är en öppen källkod och en community-ledd applikation.</p><p>Tack till de personer som gör detta besitter:</p>",
+  "settings.supportFerdi.bannerText": "Vill du hjälpa oss att förbättra Ferdi?",
   "settings.supportFerdi.headline": "Om Ferdi",
-  "settings.supportFerdi.openSurvey": "Open survey",
-  "settings.supportFerdi.textDonation": "If you feel like supporting Ferdi development with a donation, you can do so on both,",
-  "settings.supportFerdi.textDonationAnd": "and",
-  "settings.supportFerdi.textExpenses": "While volunteers do most of the work, we still need to pay for servers and certificates. As a community, we are fully transparent on funds we collect and spend - see our",
+  "settings.supportFerdi.openSurvey": "Öppna enkäten",
+  "settings.supportFerdi.textDonation": "Om du känner för att stödja Ferdi utveckling med en donation, kan du göra det på båda,",
+  "settings.supportFerdi.textDonationAnd": "och",
+  "settings.supportFerdi.textExpenses": "Medan volontärer gör det mesta av arbetet, måste vi fortfarande betala för servrar och certifikat. Som ett samhälle är vi helt öppna för medel som vi samlar in och spenderar - se vår",
   "settings.supportFerdi.textGitHubSponsors": "GitHub Sponsors",
-  "settings.supportFerdi.textListContributors": "Full list of contributors",
-  "settings.supportFerdi.textListContributorsHere": "here",
+  "settings.supportFerdi.textListContributors": "Fullständig lista över bidragsgivare",
+  "settings.supportFerdi.textListContributorsHere": "här",
   "settings.supportFerdi.textOpenCollective": "Open Collective",
-  "settings.supportFerdi.textSupportWelcome": "Support is always welcome. You can find a list of the help we need",
-  "settings.supportFerdi.textSupportWelcomeHere": "here",
-  "settings.supportFerdi.textVolunteers": "The development of Ferdi is done by volunteers. People who use Ferdi like you. They maintain, fix, and improve Ferdi in their spare time.",
-  "settings.supportFerdi.title": "Do you like Ferdi?",
+  "settings.supportFerdi.textSupportWelcome": "Stöd är alltid välkommet. Du hittar en lista över den hjälp vi behöver",
+  "settings.supportFerdi.textSupportWelcomeHere": "här",
+  "settings.supportFerdi.textVolunteers": "Utvecklingen av Ferdi görs av volontärer. Människor som använder Ferdi som du. De underhåller, fixar och förbättrar Ferdi på sin fritid.",
+  "settings.supportFerdi.title": "Tycker du om Ferdi?",
   "settings.team.contentHeadline": "Hantera Franz-grupp",
   "settings.team.copy": "Grupphanteringen i Franz låter dig hantera Franz-abonnemang för flera användare. Observera att ett Franz Premium-abonnemang inte ger dig några extra funktioner i Ferdi: Den enda anledningen till att du fortfarande har tillgång till grupphanteringen är att du kan hantera dina äldre Franz-grupper så att du inte förlorar någon funktionalitet i hanteringen av ditt konto.",
   "settings.team.headline": "Grupp",
-  "settings.team.intro": "You are currently using Franz Servers, which is why you have access to Team Management.",
+  "settings.team.intro": "Du använder för närvarande Franz servrar, vilket är anledningen till att du har tillgång till Team Management.",
   "settings.team.manageAction": "Hantera din grupp på meetfranz.com",
   "settings.team.teamsUnavailable": "Grupper är inte tillgängliga",
   "settings.team.teamsUnavailableInfo": "Grupper är för närvarande endast tillgängliga när du använder Franz Server och har betalat för Franz Professional. Vänligen ändra din server till https://api.franzinfra.com för att använda gruppfunktionalitet.",
@@ -378,8 +381,8 @@
   "settings.user.form.accountType.non-profit": "Ideell organisation",
   "settings.user.form.currentPassword": "Nuvarande lösenord",
   "settings.user.form.email": "E-post",
-  "settings.user.form.firstname": "First Name",
-  "settings.user.form.lastname": "Last Name",
+  "settings.user.form.firstname": "Förnamn",
+  "settings.user.form.lastname": "Efternamn",
   "settings.user.form.newPassword": "Nytt lösenord",
   "settings.workspace.add.form.name": "Namn",
   "settings.workspace.add.form.submitButton": "Skapa arbetsyta",
@@ -392,15 +395,15 @@
   "settings.workspace.form.yourWorkspaces": "Dina arbetsytor",
   "settings.workspaces.deletedInfo": "Arbetsytan har tagits bort",
   "settings.workspaces.headline": "Dina arbetsytor",
-  "settings.workspaces.noWorkspacesAdded": "You haven't created any workspaces yet.",
+  "settings.workspaces.noWorkspacesAdded": "Du har inte lagt till några arbetsytor än.",
   "settings.workspaces.tryReloadWorkspaces": "Försök igen",
   "settings.workspaces.updatedInfo": "Dina ändringar har sparats",
   "settings.workspaces.workspaceFeatureHeadline": "\"Less is more\": Vi presenterar Ferdi-arbetsytor",
-  "settings.workspaces.workspaceFeatureInfo": "Ferdi Workspaces let you focus on what’s important right now. Set up different sets of services and easily switch between them at any time. You decide which services you need when and where, so we can help you stay on top of your game - or easily switch off from work whenever you want.",
+  "settings.workspaces.workspaceFeatureInfo": "Ferdi Workspaces låter dig fokusera på vad som är viktigt just nu. Konfigurera olika uppsättningar av tjänster och växla enkelt mellan dem när som helst. Du bestämmer vilka tjänster du behöver när och var, så att vi kan hjälpa dig att hålla koll på ditt spel - eller enkelt stänga av från jobbet när du vill.",
   "settings.workspaces.workspacesRequestFailed": "Kunde inte ladda dina arbetsytor",
-  "setupAssistant.headline": "Let's get started",
-  "setupAssistant.subheadline": "Choose from our most used services and get back on top of your messaging now.",
-  "setupAssistant.submit.label": "Let's go",
+  "setupAssistant.headline": "Kom igång",
+  "setupAssistant.subheadline": "Välj bland våra mest använda tjänster och kom tillbaka på toppen av dina meddelanden nu.",
+  "setupAssistant.submit.label": "Sätt igång",
   "sidebar.addNewService": "Lägg till ny tjänst",
   "sidebar.closeTodosDrawer": "Stäng Ferdi Todos",
   "sidebar.closeWorkspaceDrawer": "Stäng arbetsytan",
@@ -411,33 +414,33 @@
   "sidebar.unmuteApp": "Aktivera aviseringar och ljud",
   "signup.email.label": "E-postadress",
   "signup.emailDuplicate": "En användare med den e-postadressen finns redan",
-  "signup.firstname.label": "First Name",
+  "signup.firstname.label": "Förnamn",
   "signup.headline": "Registrera dig",
-  "signup.lastname.label": "Last Name",
+  "signup.lastname.label": "Efternamn",
   "signup.legal.info": "Genom att skapa ett Ferdi konto accepterar du",
   "signup.legal.privacy": "Integritetspolicy",
   "signup.legal.terms": "Användarvillkor",
   "signup.link.login": "Har du redan ett konto? Logga in",
   "signup.password.label": "Lösenord",
   "signup.submit.label": "Skapa konto",
-  "tabs.item.confirmDeleteService": "Do you really want to delete the {serviceName} service?",
-  "tabs.item.deleteService": "Delete service",
+  "tabs.item.confirmDeleteService": "Vill du verkligen ta bort tjänsten {serviceName}?",
+  "tabs.item.deleteService": "Ta bort tjänst",
   "tabs.item.disableAudio": "Inaktivera ljud",
-  "tabs.item.disableDarkMode": "Disable Dark mode",
+  "tabs.item.disableDarkMode": "Inaktivera mörkt läge",
   "tabs.item.disableNotifications": "Inaktivera aviseringar",
-  "tabs.item.disableService": "Disable service",
+  "tabs.item.disableService": "Inaktivera tjänst",
   "tabs.item.enableAudio": "Aktivera ljud",
-  "tabs.item.enableDarkMode": "Enable Dark mode",
+  "tabs.item.enableDarkMode": "Aktivera mörkt läge",
   "tabs.item.enableNotification": "Aktivera aviseringar",
   "tabs.item.enableService": "Aktivera tjänst",
   "tabs.item.hibernateService": "Hibernate service",
   "tabs.item.reload": "Ladda om",
-  "tabs.item.wakeUpService": "Wake up service",
-  "validation.email": "{field} is not valid",
-  "validation.minLength": "{field} should be at least {length} characters long",
+  "tabs.item.wakeUpService": "Väck enhet",
+  "validation.email": "{field} är felaktig",
+  "validation.minLength": "{field} bör vara minst {length} tecken lång",
   "validation.oneRequired": "Minst en krävs",
-  "validation.required": "{field} is required",
-  "validation.url": "{field} is not a valid URL",
+  "validation.required": "{field} krävs",
+  "validation.url": "{field} är inte en giltig URL",
   "webControls.back": "Tillbaka",
   "webControls.forward": "Framåt",
   "webControls.goHome": "Hem",
@@ -445,12 +448,12 @@
   "webControls.reload": "Ladda om",
   "welcome.loginButton": "Logga in på ditt konto",
   "welcome.signupButton": "Skapa ett gratis konto",
-  "workspaceDrawer.addNewWorkspaceLabel": "Add new workspace",
+  "workspaceDrawer.addNewWorkspaceLabel": "Skapa ny arbetsyta",
   "workspaceDrawer.allServices": "Alla tjänster",
   "workspaceDrawer.headline": "Arbetsytor",
   "workspaceDrawer.item.contextMenuEdit": "redigera",
   "workspaceDrawer.item.noServicesAddedYet": "Inga tjänster har lagts till",
-  "workspaceDrawer.workspaceFeatureInfo": "<p>Ferdi Workspaces let you focus on what’s important right now. Set up different sets of services and easily switch between them at any time.</p><p>You decide which services you need when and where, so we can help you stay on top of your game - or easily switch off from work whenever you want.</p>",
-  "workspaceDrawer.workspacesSettingsTooltip": "Edit workspaces settings",
+  "workspaceDrawer.workspaceFeatureInfo": "<p>Ferdi-arbetsytor låter dig fokusera på det som är viktigt just nu. Konfigurera olika uppsättningar av tjänster och växla enkelt mellan dem när som helst.</p><p>Du bestämmer vilka tjänster du behöver när och var, så att vi kan hjälpa dig att hålla koll på läget - eller enkelt koppla bort från jobbet när du vill.</p>",
+  "workspaceDrawer.workspacesSettingsTooltip": "Redigera inställningar för arbetsytor",
   "workspaces.switchingIndicator.switchingTo": "Byter till"
 }
diff --git a/src/i18n/locales/te.json b/src/i18n/locales/te.json
index 812ec8c4c..d5cf072f6 100644
--- a/src/i18n/locales/te.json
+++ b/src/i18n/locales/te.json
@@ -210,7 +210,9 @@
   "settings.app.form.customTodoServer": "Custom Todo Server",
   "settings.app.form.darkMode": "Enable Dark Mode",
   "settings.app.form.enableGPUAcceleration": "Enable GPU Acceleration",
+  "settings.app.form.enableGlobalHideShortcut": "Enable Global shortcut to hide Ferdi",
   "settings.app.form.enableLock": "Enable Password Lock",
+  "settings.app.form.enableLongPressServiceHint": "Enable service shortcut hint on long press",
   "settings.app.form.enableMenuBar": "Always show Ferdi in Menu Bar",
   "settings.app.form.enableSpellchecking": "Enable spell checking",
   "settings.app.form.enableSystemTray": "Always show Ferdi in System Tray",
@@ -309,6 +311,7 @@
   "settings.service.form.enableHibernation": "Enable hibernation",
   "settings.service.form.enableNotification": "Enable notifications",
   "settings.service.form.enableService": "Enable service",
+  "settings.service.form.enableWakeUp": "Enable wake up",
   "settings.service.form.headlineBadges": "Unread message badges",
   "settings.service.form.headlineDarkReaderSettings": "Dark Reader Settings",
   "settings.service.form.headlineGeneral": "General",
diff --git a/src/i18n/locales/tr.json b/src/i18n/locales/tr.json
index b0368a18a..99e4d4358 100644
--- a/src/i18n/locales/tr.json
+++ b/src/i18n/locales/tr.json
@@ -210,7 +210,9 @@
   "settings.app.form.customTodoServer": "Custom Todo Server",
   "settings.app.form.darkMode": "Karanlık modu aç",
   "settings.app.form.enableGPUAcceleration": "Grafik İşlemci Ünitesi (GPU) Hızlandırıcısını Aktif et",
+  "settings.app.form.enableGlobalHideShortcut": "Enable Global shortcut to hide Ferdi",
   "settings.app.form.enableLock": "Enable Password Lock",
+  "settings.app.form.enableLongPressServiceHint": "Enable service shortcut hint on long press",
   "settings.app.form.enableMenuBar": "Always show Ferdi in Menu Bar",
   "settings.app.form.enableSpellchecking": "Yazım denetimini etkinleştir",
   "settings.app.form.enableSystemTray": "Always show Ferdi in System Tray",
@@ -309,6 +311,7 @@
   "settings.service.form.enableHibernation": "Enable hibernation",
   "settings.service.form.enableNotification": "Bildirimleri etkinleÅŸtir",
   "settings.service.form.enableService": "Servisi etkinleÅŸtir",
+  "settings.service.form.enableWakeUp": "Enable wake up",
   "settings.service.form.headlineBadges": "Okunmamış mesajlar",
   "settings.service.form.headlineDarkReaderSettings": "Dark Reader Settings",
   "settings.service.form.headlineGeneral": "Genel",
diff --git a/src/i18n/locales/uk.json b/src/i18n/locales/uk.json
index b03bf9072..d1cf6f9c7 100644
--- a/src/i18n/locales/uk.json
+++ b/src/i18n/locales/uk.json
@@ -210,7 +210,9 @@
   "settings.app.form.customTodoServer": "Custom Todo Server",
   "settings.app.form.darkMode": "Переходь на Темну Сторону",
   "settings.app.form.enableGPUAcceleration": "Ввімкнути при�коренн� GPU",
+  "settings.app.form.enableGlobalHideShortcut": "Enable Global shortcut to hide Ferdi",
   "settings.app.form.enableLock": "Enable Password Lock",
+  "settings.app.form.enableLongPressServiceHint": "Enable service shortcut hint on long press",
   "settings.app.form.enableMenuBar": "Always show Ferdi in Menu Bar",
   "settings.app.form.enableSpellchecking": "Увімкнути перевірку орфографії",
   "settings.app.form.enableSystemTray": "Always show Ferdi in System Tray",
@@ -309,6 +311,7 @@
   "settings.service.form.enableHibernation": "Enable hibernation",
   "settings.service.form.enableNotification": "Увімкнути �повіщенн�",
   "settings.service.form.enableService": "Увімкнути �ерві�",
+  "settings.service.form.enableWakeUp": "Enable wake up",
   "settings.service.form.headlineBadges": "Значки непрочитаних повідомлень",
   "settings.service.form.headlineDarkReaderSettings": "Dark Reader Settings",
   "settings.service.form.headlineGeneral": "Загальні",
diff --git a/src/i18n/locales/vi.json b/src/i18n/locales/vi.json
index 668b75127..e658b959c 100644
--- a/src/i18n/locales/vi.json
+++ b/src/i18n/locales/vi.json
@@ -210,7 +210,9 @@
   "settings.app.form.customTodoServer": "Custom Todo Server",
   "settings.app.form.darkMode": "Cho phép chế độ n�n tối",
   "settings.app.form.enableGPUAcceleration": "Bật Tăng tốc GPU",
+  "settings.app.form.enableGlobalHideShortcut": "Enable Global shortcut to hide Ferdi",
   "settings.app.form.enableLock": "Cho phép khóa bằng mật khẩu",
+  "settings.app.form.enableLongPressServiceHint": "Enable service shortcut hint on long press",
   "settings.app.form.enableMenuBar": "Luôn hiển thị Ferdi trong Menu Bar",
   "settings.app.form.enableSpellchecking": "Kích hoạt tính năng kiểm tra chính tả",
   "settings.app.form.enableSystemTray": "Always show Ferdi in System Tray",
@@ -309,6 +311,7 @@
   "settings.service.form.enableHibernation": "Kích hoạt ngủ đông",
   "settings.service.form.enableNotification": "Kích hoạt thông báo",
   "settings.service.form.enableService": "Kích hoạt dịch vụ",
+  "settings.service.form.enableWakeUp": "Enable wake up",
   "settings.service.form.headlineBadges": "Huy hiệu tin nhắn chưa đ�c",
   "settings.service.form.headlineDarkReaderSettings": "Cài đặt trình đ�c tối",
   "settings.service.form.headlineGeneral": "Chung",
diff --git a/src/i18n/locales/zh-HANT.json b/src/i18n/locales/zh-HANT.json
index ec6d9085b..30c81436d 100644
--- a/src/i18n/locales/zh-HANT.json
+++ b/src/i18n/locales/zh-HANT.json
@@ -9,8 +9,8 @@
   "connectionLostBanner.cta": "�新載入",
   "connectionLostBanner.informationLink": "What happened?",
   "connectionLostBanner.message": "Oh no! Ferdi lost the connection to {name}.",
-  "feature.basicAuth.signIn": "Sign In",
-  "feature.nightlyBuilds.activate": "Activate",
+  "feature.basicAuth.signIn": "登入",
+  "feature.nightlyBuilds.activate": "å•Ÿå‹•",
   "feature.nightlyBuilds.info": "Nightly builds are highly experimental versions of Ferdi that may contain unpolished or uncompleted features. These nightly builds are mainly used by developers to test their newly developed features and how they will perform in the final build. If you don't know what you are doing, we suggest not activating nightly builds.",
   "feature.nightlyBuilds.title": "Nightly Builds",
   "feature.publishDebugInfo.error": "There was an error while trying to publish the debug information. Please try again later or view the console for more information.",
@@ -22,25 +22,25 @@
   "feature.publishDebugInfo.title": "Publish debug information",
   "feature.quickSwitch.info": "Select a service with TAB, ↑ and ↓. Open a service with ENTER.",
   "feature.quickSwitch.search": "�尋...",
-  "feature.quickSwitch.title": "QuickSwitch",
+  "feature.quickSwitch.title": "快速切�",
   "global.api.unhealthy": "Can't connect to Ferdi online services",
-  "global.cancel": "Cancel",
+  "global.cancel": "�消",
   "global.edit": "編輯",
-  "global.no": "No",
+  "global.no": "�",
   "global.notConnectedToTheInternet": "您未連上網際網路",
-  "global.ok": "Ok",
-  "global.quit": "Quit",
+  "global.ok": "好",
+  "global.quit": "退出",
   "global.quitConfirmation": "Do you really want to quit Ferdi?",
-  "global.save": "Save",
-  "global.settings": "Settings",
+  "global.save": "儲存",
+  "global.settings": "設定",
   "global.spellchecker.useDefault": "使用系統�設值({default})",
   "global.spellchecking.autodetect": "自動檢測語言",
   "global.spellchecking.autodetect.short": "自動",
   "global.spellchecking.language": "拼字檢查語言",
-  "global.submit": "Submit",
+  "global.submit": "�出",
   "global.userAgentHelp": "Use 'https://whatmyuseragent.com/' (to discover) or 'https://developers.whatismybrowser.com/useragents/explore/' (to choose) your desired user agent and copy-paste it here.",
   "global.userAgentPref": "User Agent",
-  "global.yes": "Yes",
+  "global.yes": "是",
   "import.headline": "匯入您的 Ferdi 4 �務",
   "import.notSupportedHeadline": "此�務�被 Ferdi 5 支�",
   "import.skip.label": "我想手動匯入",
@@ -56,7 +56,7 @@
   "infobox.dismiss": "Dismiss",
   "invite.email.label": "電�郵件信箱",
   "invite.headline.friends": "邀請三個人",
-  "invite.name.label": "��",
+  "invite.name.label": "�字",
   "invite.skip.label": "我想晚點進行",
   "invite.submit.label": "發�邀請",
   "invite.successInfo": "已�功發�邀請",
@@ -89,20 +89,20 @@
   "menu.app.hideOthers": "Hide Others",
   "menu.app.unhide": "Unhide",
   "menu.edit": "編輯",
-  "menu.edit.copy": "Copy",
-  "menu.edit.cut": "Cut",
+  "menu.edit.copy": "複製",
+  "menu.edit.cut": "剪下",
   "menu.edit.delete": "刪除",
   "menu.edit.emojiSymbols": "Emoji & Symbols",
-  "menu.edit.findInPage": "Find in Page",
-  "menu.edit.paste": "Paste",
+  "menu.edit.findInPage": "在��中尋找",
+  "menu.edit.paste": "貼上",
   "menu.edit.pasteAndMatchStyle": "Paste And Match Style",
   "menu.edit.redo": "Redo",
-  "menu.edit.selectAll": "Select All",
+  "menu.edit.selectAll": "全�",
   "menu.edit.speech": "語音",
   "menu.edit.startDictation": "開始�寫",
   "menu.edit.startSpeaking": "開始朗讀",
   "menu.edit.stopSpeaking": "�止朗讀",
-  "menu.edit.undo": "Undo",
+  "menu.edit.undo": "復原",
   "menu.file": "檔案",
   "menu.help": "Help",
   "menu.help.changelog": "更新日誌",
@@ -127,20 +127,20 @@
   "menu.view.forward": "�進",
   "menu.view.lockFerdi": "Lock Ferdi",
   "menu.view.openQuickSwitch": "Open Quick Switch",
-  "menu.view.reloadFerdi": "Reload Ferdi",
+  "menu.view.reloadFerdi": "�新載入 Ferdi",
   "menu.view.reloadService": "�新載入",
   "menu.view.reloadTodos": "Reload ToDos",
-  "menu.view.resetZoom": "Actual Size",
+  "menu.view.resetZoom": "實際大�",
   "menu.view.toggleDarkMode": "Toggle Dark Mode",
   "menu.view.toggleDevTools": "切�開發人員工具",
   "menu.view.toggleFullScreen": "Toggle Full Screen",
   "menu.view.toggleServiceDevTools": "切�開發人員�務工具",
   "menu.view.toggleTodosDevTools": "Toggle Todos Developer Tools",
-  "menu.view.zoomIn": "Zoom In",
-  "menu.view.zoomOut": "Zoom Out",
-  "menu.window": "Window",
-  "menu.window.close": "Close",
-  "menu.window.minimize": "Minimize",
+  "menu.view.zoomIn": "放大",
+  "menu.view.zoomOut": "縮�",
+  "menu.window": "視窗",
+  "menu.window.close": "關閉",
+  "menu.window.minimize": "最�化",
   "menu.workspaces": "工作�",
   "menu.workspaces.addNewWorkspace": "新增工作�…",
   "menu.workspaces.closeWorkspaceDrawer": "關閉工作�",
@@ -152,13 +152,13 @@
   "password.link.signup": "建立一個�費帳戶",
   "password.noUser": "No user with that email address was found",
   "password.successInfo": "Your new password was sent to your email address",
-  "service.crashHandler.action": "Reload {name}",
+  "service.crashHandler.action": "�新載入 {name}",
   "service.crashHandler.autoReload": "Trying to automatically restore {name} in {seconds} seconds",
   "service.crashHandler.headline": "唉呀 糟糕!",
   "service.crashHandler.text": "{name} 造�了�題",
   "service.disabledHandler.action": "啟用 {name}",
   "service.disabledHandler.headline": "{name} 已�用",
-  "service.errorHandler.action": "Reload {name}",
+  "service.errorHandler.action": "�新載入 {name}",
   "service.errorHandler.editAction": "編輯 {name}",
   "service.errorHandler.headline": "唉呀 糟糕!",
   "service.errorHandler.message": "錯誤",
@@ -169,7 +169,7 @@
   "services.serverInfo": "Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner. If you are switching over (from one of the hosted servers) to using Ferdi without an account, please be informed that you can export your data from that server and subsequently import it using the Help menu to resurrect all your workspaces and configured services!",
   "services.serverless": "Use Ferdi without an Account",
   "services.welcome": "歡迎使用 Ferdi",
-  "settings.account.account.editButton": "Edit account",
+  "settings.account.account.editButton": "更改帳戶資訊",
   "settings.account.accountUnavailable": "帳號無法使用",
   "settings.account.accountUnavailableInfo": "You are using Ferdi without an account. If you want to use Ferdi with an account and keep your services synchronized across installations, please select a server in the Settings tab then login.",
   "settings.account.buttonSave": "更新帳戶資訊",
@@ -177,10 +177,10 @@
   "settings.account.deleteEmailSent": "You have received an email with a link to confirm your account deletion. Your account and data cannot be restored!",
   "settings.account.deleteInfo": "If you don't need your Ferdi account any longer, you can delete your account and all related data here.",
   "settings.account.headline": "帳戶",
-  "settings.account.headlineAccount": "Account information",
+  "settings.account.headlineAccount": "帳戶資訊",
   "settings.account.headlineDangerZone": "Danger Zone",
   "settings.account.headlineInvoices": "Invoices",
-  "settings.account.headlinePassword": "Change password",
+  "settings.account.headlinePassword": "更改密碼",
   "settings.account.headlineProfile": "更新帳戶資訊",
   "settings.account.successInfo": "您的更改已經儲存",
   "settings.account.tryReloadServices": "�試一次",
@@ -195,14 +195,14 @@
   "settings.app.buttonSearchForUpdate": "檢查更新",
   "settings.app.cacheInfo": "Ferdi cache is currently using {size} of disk space.",
   "settings.app.cacheNotCleared": "Couldn't clear all cache",
-  "settings.app.closeSettings": "Close settings",
+  "settings.app.closeSettings": "關閉設定",
   "settings.app.currentVersion": "當�版本：",
   "settings.app.form.accentColor": "強調�色",
   "settings.app.form.adaptableDarkMode": "Synchronize dark mode with my OS's dark mode setting",
   "settings.app.form.alwaysShowWorkspaces": "Always show workspace drawer",
   "settings.app.form.autoLaunchInBackground": "背景啟動",
   "settings.app.form.autoLaunchOnStart": "開機時啟動",
-  "settings.app.form.automaticUpdates": "Enable updates",
+  "settings.app.form.automaticUpdates": "啟用更新",
   "settings.app.form.beta": "包�開發中版本",
   "settings.app.form.clipboardNotifications": "Don't show notifications for clipboard events",
   "settings.app.form.closeToSystemTray": "Close Ferdi to system tray",
@@ -210,7 +210,9 @@
   "settings.app.form.customTodoServer": "Custom Todo Server",
   "settings.app.form.darkMode": "啟用夜間模�",
   "settings.app.form.enableGPUAcceleration": "開啟顯示�（GPU）加速",
+  "settings.app.form.enableGlobalHideShortcut": "Enable Global shortcut to hide Ferdi",
   "settings.app.form.enableLock": "Enable Password Lock",
+  "settings.app.form.enableLongPressServiceHint": "Enable service shortcut hint on long press",
   "settings.app.form.enableMenuBar": "Always show Ferdi in Menu Bar",
   "settings.app.form.enableSpellchecking": "Enable spell checking",
   "settings.app.form.enableSystemTray": "Always show Ferdi in System Tray",
@@ -233,9 +235,9 @@
   "settings.app.form.scheduledDNDEnabled": "Enable scheduled Do-not-Disturb",
   "settings.app.form.scheduledDNDEnd": "至",
   "settings.app.form.scheduledDNDStart": "從",
-  "settings.app.form.searchEngine": "Search engine",
+  "settings.app.form.searchEngine": "�尋引擎",
   "settings.app.form.sentry": "Send telemetry data",
-  "settings.app.form.serviceRibbonWidth": "Sidebar width",
+  "settings.app.form.serviceRibbonWidth": "�邊欄寬度",
   "settings.app.form.showDisabledServices": "Display disabled services tabs",
   "settings.app.form.showDragArea": "Show draggable area on window",
   "settings.app.form.showMessagesBadgesWhenMuted": "Show unread message badge when notifications are disabled",
@@ -249,7 +251,7 @@
   "settings.app.headlineAppearance": "外觀",
   "settings.app.headlineGeneral": "一般",
   "settings.app.headlineLanguage": "語言",
-  "settings.app.headlinePrivacy": "Privacy",
+  "settings.app.headlinePrivacy": "隱�",
   "settings.app.headlineUpdates": "æ›´æ–°",
   "settings.app.hibernateInfo": "By default, Ferdi will keep all your services open and loaded in the background so they are ready when you want to use them. Service Hibernation will unload your services after a specified amount. This is useful to save RAM or keeping services from slowing down your computer.",
   "settings.app.inactivityLockInfo": "Minutes of inactivity, after which Ferdi should automatically lock. Use 0 to disable",
@@ -262,7 +264,7 @@
   "settings.app.scheduledDNDTimeInfo": "Times in 24-Hour-Format. End time can be before start time (e.g. start 17:00, end 09:00) to enable Do-not-Disturb overnight.",
   "settings.app.sentryInfo": "Sending telemetry data allows us to find errors in Ferdi - we will not send any personal information like your message data!",
   "settings.app.spellCheckerLanguageInfo": "Ferdi uses your Mac's build-in spellchecker to check for typos. If you want to change the languages the spellchecker checks for, you can do so in your Mac's System Preferences.",
-  "settings.app.subheadlineCache": "Cache",
+  "settings.app.subheadlineCache": "快�",
   "settings.app.subheadlineFerdiProfile": "Ferdi Profile",
   "settings.app.todoServerInfo": "This server will be used for the \"Ferdi Todo\" feature.",
   "settings.app.translationHelp": "Help us to translate Ferdi into your language.",
@@ -270,14 +272,14 @@
   "settings.app.updateStatusAvailable": "有�用更新，下載中...",
   "settings.app.updateStatusSearching": "檢查更新中...",
   "settings.app.updateStatusUpToDate": "已經是最新版本了",
-  "settings.invite.headline": "Invite Friends",
+  "settings.invite.headline": "邀請好�",
   "settings.navigation.account": "帳戶",
   "settings.navigation.availableServices": "�用�務",
   "settings.navigation.logout": "登出",
   "settings.navigation.supportFerdi": "關於 Ferdi",
   "settings.navigation.team": "管�團隊",
   "settings.navigation.yourServices": "您的�務",
-  "settings.navigation.yourWorkspaces": "Your workspaces",
+  "settings.navigation.yourWorkspaces": "您的工作�",
   "settings.recipes.all": "所有�務",
   "settings.recipes.custom": "Custom Services",
   "settings.recipes.customService.headline.communityRecipes": "Community 3rd Party Recipes",
@@ -285,12 +287,12 @@
   "settings.recipes.customService.headline.devRecipes": "Your Development Service Recipes",
   "settings.recipes.customService.intro": "To add a custom service, copy the service recipe to:",
   "settings.recipes.customService.openDevDocs": "Developer Documentation",
-  "settings.recipes.customService.openFolder": "Open folder",
+  "settings.recipes.customService.openFolder": "開啟資料夾",
   "settings.recipes.headline": "�用�務",
   "settings.recipes.missingService": "Missing a service?",
   "settings.recipes.nothingFound": "Sorry, but no service matched your search term - but you can still probably add it using the \"Custom Website\" option. Please note that the website might show more services that have been added to Ferdi since the version that you are currently on. To get those new services, please consider upgrading to a newer version of Ferdi.",
   "settings.recipes.servicesSuccessfulAddedInfo": "新增�務�功",
-  "settings.searchService": "Search service",
+  "settings.searchService": "�尋�務",
   "settings.service.error.goBack": "返回",
   "settings.service.error.headline": "錯誤",
   "settings.service.error.message": "無法載入�務元件",
@@ -301,14 +303,15 @@
   "settings.service.form.darkReaderBrightness": "Dark Reader Brightness",
   "settings.service.form.darkReaderContrast": "Dark Reader Contrast",
   "settings.service.form.darkReaderSepia": "Dark Reader Sepia",
-  "settings.service.form.deleteButton": "Delete service",
+  "settings.service.form.deleteButton": "刪除�務",
   "settings.service.form.editServiceHeadline": "編輯 {name}",
   "settings.service.form.enableAudio": "啟用音效",
   "settings.service.form.enableBadge": "Show unread message badges",
   "settings.service.form.enableDarkMode": "啟用夜間模�",
-  "settings.service.form.enableHibernation": "Enable hibernation",
+  "settings.service.form.enableHibernation": "啓用休眠",
   "settings.service.form.enableNotification": "啟用通知",
   "settings.service.form.enableService": "啟用�務",
+  "settings.service.form.enableWakeUp": "Enable wake up",
   "settings.service.form.headlineBadges": "Unread message badges",
   "settings.service.form.headlineDarkReaderSettings": "Dark Reader Settings",
   "settings.service.form.headlineGeneral": "一般",
@@ -320,19 +323,19 @@
   "settings.service.form.indirectMessages": "��全部訊�顯示通知",
   "settings.service.form.isHibernatedEnabledInfo": "When enabled, a service will be shut down after a period of time to save system resources.",
   "settings.service.form.isMutedInfo": "When disabled, all notification sounds and audio playback are muted",
-  "settings.service.form.name": "��",
+  "settings.service.form.name": "�字",
   "settings.service.form.onlyShowFavoritesInUnreadCount": "Only show Favorites in unread count",
-  "settings.service.form.openDarkmodeCss": "Open darkmode.css",
-  "settings.service.form.openUserCss": "Open user.css",
-  "settings.service.form.openUserJs": "Open user.js",
+  "settings.service.form.openDarkmodeCss": "é–‹å•Ÿ darkmode.css",
+  "settings.service.form.openUserCss": "é–‹å•Ÿ user.css",
+  "settings.service.form.openUserJs": "é–‹å•Ÿ user.js",
   "settings.service.form.proxy.headline": "HTTP/HTTPS Proxy Settings",
   "settings.service.form.proxy.host": "Proxy Host/IP",
   "settings.service.form.proxy.info": "Proxy settings will not be synchronized with the Ferdi servers.",
   "settings.service.form.proxy.isEnabled": "使用代�",
-  "settings.service.form.proxy.password": "Password (optional)",
+  "settings.service.form.proxy.password": "密碼 (�填)",
   "settings.service.form.proxy.port": "連接埠",
   "settings.service.form.proxy.restartInfo": "Please restart Ferdi after changing proxy Settings.",
-  "settings.service.form.proxy.user": "User (optional)",
+  "settings.service.form.proxy.user": "使用者 (�填)",
   "settings.service.form.recipeFileInfo": "Your user files will be inserted into the webpage so you can customize services in any way you like. User files are only stored locally and are not transferred to other computers using the same account.",
   "settings.service.form.saveButton": "儲存",
   "settings.service.form.tabHosted": "Hosted",
@@ -355,14 +358,14 @@
   "settings.supportFerdi.headline": "關於 Ferdi",
   "settings.supportFerdi.openSurvey": "Open survey",
   "settings.supportFerdi.textDonation": "If you feel like supporting Ferdi development with a donation, you can do so on both,",
-  "settings.supportFerdi.textDonationAnd": "and",
+  "settings.supportFerdi.textDonationAnd": "和",
   "settings.supportFerdi.textExpenses": "While volunteers do most of the work, we still need to pay for servers and certificates. As a community, we are fully transparent on funds we collect and spend - see our",
   "settings.supportFerdi.textGitHubSponsors": "GitHub Sponsors",
   "settings.supportFerdi.textListContributors": "Full list of contributors",
-  "settings.supportFerdi.textListContributorsHere": "here",
+  "settings.supportFerdi.textListContributorsHere": "這裡",
   "settings.supportFerdi.textOpenCollective": "Open Collective",
   "settings.supportFerdi.textSupportWelcome": "Support is always welcome. You can find a list of the help we need",
-  "settings.supportFerdi.textSupportWelcomeHere": "here",
+  "settings.supportFerdi.textSupportWelcomeHere": "這裡",
   "settings.supportFerdi.textVolunteers": "The development of Ferdi is done by volunteers. People who use Ferdi like you. They maintain, fix, and improve Ferdi in their spare time.",
   "settings.supportFerdi.title": "Do you like Ferdi?",
   "settings.team.contentHeadline": "Franz Team Management",
@@ -378,20 +381,20 @@
   "settings.user.form.accountType.non-profit": "�營利",
   "settings.user.form.currentPassword": "舊密碼",
   "settings.user.form.email": "電�郵件信箱",
-  "settings.user.form.firstname": "First Name",
-  "settings.user.form.lastname": "Last Name",
+  "settings.user.form.firstname": "�字",
+  "settings.user.form.lastname": "姓�",
   "settings.user.form.newPassword": "新密碼",
-  "settings.workspace.add.form.name": "��",
+  "settings.workspace.add.form.name": "�字",
   "settings.workspace.add.form.submitButton": "建立工作�",
   "settings.workspace.form.buttonDelete": "刪除工作�",
   "settings.workspace.form.buttonSave": "儲存工作�域",
   "settings.workspace.form.keepLoaded": "Keep this workspace loaded*",
   "settings.workspace.form.keepLoadedInfo": "*This option will be overwritten by the global \"Keep all workspaces loaded\" option.",
-  "settings.workspace.form.name": "��",
+  "settings.workspace.form.name": "�字",
   "settings.workspace.form.servicesInWorkspaceHeadline": "Services in this Workspace",
-  "settings.workspace.form.yourWorkspaces": "Your workspaces",
+  "settings.workspace.form.yourWorkspaces": "您的工作�",
   "settings.workspaces.deletedInfo": "Workspace has been deleted",
-  "settings.workspaces.headline": "Your workspaces",
+  "settings.workspaces.headline": "您的工作�",
   "settings.workspaces.noWorkspacesAdded": "You haven't created any workspaces yet.",
   "settings.workspaces.tryReloadWorkspaces": "�試一次",
   "settings.workspaces.updatedInfo": "您的更改已經儲存",
@@ -400,7 +403,7 @@
   "settings.workspaces.workspacesRequestFailed": "Could not load your workspaces",
   "setupAssistant.headline": "Let's get started",
   "setupAssistant.subheadline": "Choose from our most used services and get back on top of your messaging now.",
-  "setupAssistant.submit.label": "Let's go",
+  "setupAssistant.submit.label": "讓我們開始�",
   "sidebar.addNewService": "添加新�務",
   "sidebar.closeTodosDrawer": "Close Ferdi Todos",
   "sidebar.closeWorkspaceDrawer": "關閉工作�",
@@ -411,9 +414,9 @@
   "sidebar.unmuteApp": "啟用通知",
   "signup.email.label": "電�郵件信箱",
   "signup.emailDuplicate": "此電�郵件信箱已被註冊",
-  "signup.firstname.label": "First Name",
+  "signup.firstname.label": "�字",
   "signup.headline": "註冊",
-  "signup.lastname.label": "Last Name",
+  "signup.lastname.label": "姓�",
   "signup.legal.info": "在建立帳戶�時，您��：",
   "signup.legal.privacy": "隱��明",
   "signup.legal.terms": "�務�款",
@@ -421,13 +424,13 @@
   "signup.password.label": "密碼",
   "signup.submit.label": "建立帳戶",
   "tabs.item.confirmDeleteService": "Do you really want to delete the {serviceName} service?",
-  "tabs.item.deleteService": "Delete service",
+  "tabs.item.deleteService": "刪除�務",
   "tabs.item.disableAudio": "�用音效",
-  "tabs.item.disableDarkMode": "Disable Dark mode",
+  "tabs.item.disableDarkMode": "�用深色模�",
   "tabs.item.disableNotifications": "�用通知",
-  "tabs.item.disableService": "Disable service",
+  "tabs.item.disableService": "�用�務",
   "tabs.item.enableAudio": "啟用音效",
-  "tabs.item.enableDarkMode": "Enable Dark mode",
+  "tabs.item.enableDarkMode": "啟用深色模�",
   "tabs.item.enableNotification": "啟用通知",
   "tabs.item.enableService": "啟用�務",
   "tabs.item.hibernateService": "Hibernate service",
diff --git a/src/i18n/locales/zh.json b/src/i18n/locales/zh.json
index 648d75a6d..836a067f5 100644
--- a/src/i18n/locales/zh.json
+++ b/src/i18n/locales/zh.json
@@ -1,15 +1,15 @@
 {
   "app.errorHandler.action": "�新加载",
-  "app.errorHandler.headline": "Something went wrong.",
-  "changeserver.customServerLabel": "Custom server",
-  "changeserver.headline": "Change server",
+  "app.errorHandler.headline": "�生未知错误。",
+  "changeserver.customServerLabel": "自定义�务器",
+  "changeserver.headline": "更改�务器",
   "changeserver.label": "�务器：",
   "changeserver.urlError": "输入有效的URL",
   "changeserver.warning": "Ferdi�供的�外设置将�会被�存",
   "connectionLostBanner.cta": "�新加载�务",
   "connectionLostBanner.informationLink": "�生了什么？",
   "connectionLostBanner.message": "哦��Ferdi失去了与 {name} 的连接。",
-  "feature.basicAuth.signIn": "Sign In",
+  "feature.basicAuth.signIn": "登录",
   "feature.nightlyBuilds.activate": "激活",
   "feature.nightlyBuilds.info": "�夜版(Nightly builds) 是Ferdi的实验性版本，�能包�未完善或未完�的功能。这些�夜版主�由开�人员�测试他们新开�的功能�它们在最终版本的的表现。如果您�知�自己在�什么，我们建议您��激活�夜版。",
   "feature.nightlyBuilds.title": "�夜版",
@@ -18,35 +18,35 @@
   "feature.publishDebugInfo.privacy": "���政策",
   "feature.publishDebugInfo.publish": "接�并�布",
   "feature.publishDebugInfo.published": "您的调试日志已��布，现在�用于",
-  "feature.publishDebugInfo.terms": "Terms of service",
+  "feature.publishDebugInfo.terms": "�务�款",
   "feature.publishDebugInfo.title": "�布调试信�",
   "feature.quickSwitch.info": "使用 TAB ，↑ 和 ↓ 选择�务。使用回车键（ENTER）打开�务",
   "feature.quickSwitch.search": "�索...",
   "feature.quickSwitch.title": "快速切�",
-  "global.api.unhealthy": "Can't connect to Ferdi online services",
-  "global.cancel": "Cancel",
+  "global.api.unhealthy": "无法链接到 Ferdi 在线�务",
+  "global.cancel": "�消",
   "global.edit": "编辑",
-  "global.no": "No",
+  "global.no": "�",
   "global.notConnectedToTheInternet": "您没有连接到互�网。",
-  "global.ok": "Ok",
-  "global.quit": "Quit",
-  "global.quitConfirmation": "Do you really want to quit Ferdi?",
-  "global.save": "Save",
-  "global.settings": "Settings",
+  "global.ok": "确定",
+  "global.quit": "退出",
+  "global.quitConfirmation": "确定�退出�？",
+  "global.save": "�存",
+  "global.settings": "设置",
   "global.spellchecker.useDefault": "使用系统默认值 ({default})",
   "global.spellchecking.autodetect": "自动检测语言",
   "global.spellchecking.autodetect.short": "自动",
   "global.spellchecking.language": "拼写检查语言",
-  "global.submit": "Submit",
+  "global.submit": "�交",
   "global.userAgentHelp": "使用 'https://whatmyuseragent.com/' (以�现)或 'https://developers.whatismybrowser.com/useragents/explore/' (以选择) 你所需�的用户代�并�制粘贴到这里。",
   "global.userAgentPref": "�览器标识（用户代�）",
-  "global.yes": "Yes",
+  "global.yes": "是",
   "import.headline": "导入你的 Ferdi 4 �务",
   "import.notSupportedHeadline": "Ferdi 5尚未支�的�务",
   "import.skip.label": "我想手动添加�务",
-  "import.submit.label": "Import {count} services",
+  "import.submit.label": "导入 {count} �务",
   "infobar.authRequestFailed": "�试进行身份验�时出错。如果此错误�存在，请�试注销并�新登录。",
-  "infobar.buttonChangelog": "What is new?",
+  "infobar.buttonChangelog": "新功能",
   "infobar.buttonInstallUpdate": "��并安装更新",
   "infobar.buttonReloadServices": "�载�务",
   "infobar.hide": "��",
@@ -59,398 +59,401 @@
   "invite.name.label": "�称",
   "invite.skip.label": "����",
   "invite.submit.label": "��邀请",
-  "invite.successInfo": "Invitations sent successfully",
+  "invite.successInfo": "已�功��邀请。",
   "locked.headline": "已�定",
-  "locked.info": "Ferdi is currently locked. Please unlock Ferdi with your password to see your messages.",
-  "locked.invalidCredentials": "Password invalid",
-  "locked.password.label": "Password",
-  "locked.submit.label": "Unlock",
-  "locked.touchId": "Unlock with Touch ID",
-  "locked.touchIdPrompt": "unlock via Touch ID",
-  "locked.unlockWithPassword": "Unlock with Password",
-  "login.changeServer": "Change server",
+  "locked.info": "Ferdi目�被�定。请使用密�解�Ferdi以查看您的消�。",
+  "locked.invalidCredentials": "密�无效",
+  "locked.password.label": "密�",
+  "locked.submit.label": "解�",
+  "locked.touchId": "使用 Touch ID 解�",
+  "locked.touchIdPrompt": "使用 Touch ID 解�",
+  "locked.unlockWithPassword": "使用密�解�",
+  "login.changeServer": "更改�务器",
   "login.customServerQuestion": "Using a custom Ferdi server?",
   "login.customServerSuggestion": "Try importing your Franz account",
   "login.email.label": "电�邮箱地�",
-  "login.headline": "Sign in",
-  "login.invalidCredentials": "Email or password not valid",
-  "login.link.password": "Reset password",
-  "login.link.signup": "Create a free account",
-  "login.password.label": "Password",
-  "login.serverLogout": "Your session expired, please login again.",
-  "login.submit.label": "Sign in",
-  "login.tokenExpired": "Your session expired, please login again.",
-  "menu.Todoss.closeTodosDrawer": "Close Todos drawer",
-  "menu.Todoss.openTodosDrawer": "Open Todos drawer",
-  "menu.app.about": "About Ferdi",
-  "menu.app.autohideMenuBar": "Auto-hide menu bar",
-  "menu.app.checkForUpdates": "Check for updates",
+  "login.headline": "登录",
+  "login.invalidCredentials": "电�邮件或密�无效",
+  "login.link.password": "修改密�",
+  "login.link.signup": "创建�费账户",
+  "login.password.label": "密�",
+  "login.serverLogout": "您的登录信�已过期，请�新登录。",
+  "login.submit.label": "登录",
+  "login.tokenExpired": "您的登录信�已过期，请�新登录。",
+  "menu.Todoss.closeTodosDrawer": "关闭Todos抽屉�",
+  "menu.Todoss.openTodosDrawer": "打开Todos抽屉�",
+  "menu.app.about": "关于 Ferdi",
+  "menu.app.autohideMenuBar": "自动�����",
+  "menu.app.checkForUpdates": "检查更新",
   "menu.app.hide": "��",
-  "menu.app.hideOthers": "Hide Others",
-  "menu.app.unhide": "Unhide",
+  "menu.app.hideOthers": "��其它",
+  "menu.app.unhide": "�消��",
   "menu.edit": "编辑",
-  "menu.edit.copy": "Copy",
-  "menu.edit.cut": "Cut",
+  "menu.edit.copy": "�制",
+  "menu.edit.cut": "剪切",
   "menu.edit.delete": "删除",
   "menu.edit.emojiSymbols": "Emoji 和符�",
   "menu.edit.findInPage": "页内�索",
-  "menu.edit.paste": "Paste",
-  "menu.edit.pasteAndMatchStyle": "Paste And Match Style",
-  "menu.edit.redo": "Redo",
-  "menu.edit.selectAll": "Select All",
+  "menu.edit.paste": "粘贴",
+  "menu.edit.pasteAndMatchStyle": "粘贴并匹�样�",
+  "menu.edit.redo": "��",
+  "menu.edit.selectAll": "全选",
   "menu.edit.speech": "语音",
   "menu.edit.startDictation": "Start Dictation",
   "menu.edit.startSpeaking": "开始说�",
   "menu.edit.stopSpeaking": "�止说�",
-  "menu.edit.undo": "Undo",
+  "menu.edit.undo": "撤销",
   "menu.file": "文件",
-  "menu.help": "Help",
+  "menu.help": "帮助",
   "menu.help.changelog": "更新日志",
   "menu.help.debugInfo": "�制调试信�",
-  "menu.help.debugInfoCopiedBody": "Your Debug Information has been copied to your clipboard.",
-  "menu.help.debugInfoCopiedHeadline": "Ferdi Debug Information",
-  "menu.help.importExportData": "Import/Export Configuration Data",
-  "menu.help.learnMore": "Learn More",
-  "menu.help.privacy": "Privacy Statement",
+  "menu.help.debugInfoCopiedBody": "您的调试信�已�制到剪贴�。",
+  "menu.help.debugInfoCopiedHeadline": "�制调试信�",
+  "menu.help.importExportData": "导入/导出�置数�",
+  "menu.help.learnMore": "了解更多",
+  "menu.help.privacy": "��声明",
   "menu.help.publishDebugInfo": "�布调试信�",
   "menu.help.support": "支�",
   "menu.help.tos": "�务�款",
   "menu.services": "�务",
-  "menu.services.activatePreviousService": "Activate previous service",
-  "menu.services.addNewService": "Add New Service...",
+  "menu.services.activatePreviousService": "激活上一个�务",
+  "menu.services.addNewService": "添加新�务",
   "menu.services.goHome": "主页",
-  "menu.services.setNextServiceActive": "Activate next service",
+  "menu.services.setNextServiceActive": "激活下一个�务",
   "menu.todos": "待办事项",
   "menu.todos.enableTodos": "�用待办事项",
   "menu.view": "查看",
   "menu.view.back": "返回",
-  "menu.view.forward": "Forward",
-  "menu.view.lockFerdi": "Lock Ferdi",
-  "menu.view.openQuickSwitch": "Open Quick Switch",
-  "menu.view.reloadFerdi": "Reload Ferdi",
+  "menu.view.forward": "��",
+  "menu.view.lockFerdi": "�定Ferdi",
+  "menu.view.openQuickSwitch": "打开快速切�",
+  "menu.view.reloadFerdi": "��Ferdi",
   "menu.view.reloadService": "�新加载�务",
-  "menu.view.reloadTodos": "Reload ToDos",
-  "menu.view.resetZoom": "Actual Size",
-  "menu.view.toggleDarkMode": "Toggle Dark Mode",
-  "menu.view.toggleDevTools": "Toggle Developer Tools",
-  "menu.view.toggleFullScreen": "Toggle Full Screen",
-  "menu.view.toggleServiceDevTools": "Toggle Service Developer Tools",
-  "menu.view.toggleTodosDevTools": "Toggle Todos Developer Tools",
-  "menu.view.zoomIn": "Zoom In",
-  "menu.view.zoomOut": "Zoom Out",
-  "menu.window": "Window",
-  "menu.window.close": "Close",
-  "menu.window.minimize": "Minimize",
-  "menu.workspaces": "Workspaces",
-  "menu.workspaces.addNewWorkspace": "Add New Workspace...",
-  "menu.workspaces.closeWorkspaceDrawer": "Close workspace drawer",
-  "menu.workspaces.defaultWorkspace": "All services",
-  "menu.workspaces.openWorkspaceDrawer": "Open workspace drawer",
+  "menu.view.reloadTodos": "��ToDos",
+  "menu.view.resetZoom": "实际尺寸",
+  "menu.view.toggleDarkMode": "切�暗色主题",
+  "menu.view.toggleDevTools": "切�开�人员工具",
+  "menu.view.toggleFullScreen": "切�全�",
+  "menu.view.toggleServiceDevTools": "切��务开�工具",
+  "menu.view.toggleTodosDevTools": "切�Todos开�工具",
+  "menu.view.zoomIn": "放大",
+  "menu.view.zoomOut": "缩�",
+  "menu.window": "窗�",
+  "menu.window.close": "关闭",
+  "menu.window.minimize": "最�化",
+  "menu.workspaces": "工作区",
+  "menu.workspaces.addNewWorkspace": "新建工作区…",
+  "menu.workspaces.closeWorkspaceDrawer": "关闭工作区抽屉�",
+  "menu.workspaces.defaultWorkspace": "所有�务",
+  "menu.workspaces.openWorkspaceDrawer": "打开工作区抽屉�",
   "password.email.label": "电�邮箱地�",
-  "password.headline": "Reset password",
-  "password.link.login": "Sign in to your account",
-  "password.link.signup": "Create a free account",
-  "password.noUser": "No user with that email address was found",
-  "password.successInfo": "Your new password was sent to your email address",
-  "service.crashHandler.action": "Reload {name}",
-  "service.crashHandler.autoReload": "Trying to automatically restore {name} in {seconds} seconds",
-  "service.crashHandler.headline": "Oh no!",
-  "service.crashHandler.text": "{name} has caused an error.",
-  "service.disabledHandler.action": "Enable {name}",
-  "service.disabledHandler.headline": "{name} is disabled",
-  "service.errorHandler.action": "Reload {name}",
-  "service.errorHandler.editAction": "Edit {name}",
-  "service.errorHandler.headline": "Oh no!",
-  "service.errorHandler.message": "Error",
-  "service.errorHandler.text": "{name} has failed to load.",
-  "service.webviewLoader.loading": "Loading {service}",
-  "services.getStarted": "Get started",
-  "services.login": "Please login to use Ferdi.",
-  "services.serverInfo": "Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner. If you are switching over (from one of the hosted servers) to using Ferdi without an account, please be informed that you can export your data from that server and subsequently import it using the Help menu to resurrect all your workspaces and configured services!",
-  "services.serverless": "Use Ferdi without an Account",
-  "services.welcome": "Welcome to Ferdi",
-  "settings.account.account.editButton": "Edit account",
-  "settings.account.accountUnavailable": "Account is unavailable",
+  "password.headline": "修改密�",
+  "password.link.login": "登录到您的�户",
+  "password.link.signup": "创建�费账户",
+  "password.noUser": "找�到该电�邮件地�的用户",
+  "password.successInfo": "新密�已��到您的邮箱",
+  "service.crashHandler.action": "�新加载{name}",
+  "service.crashHandler.autoReload": "�试在 {name} 秒�自动�� {seconds}",
+  "service.crashHandler.headline": "糟糕�",
+  "service.crashHandler.text": "{name} 造�了一个错误。",
+  "service.disabledHandler.action": "�用 {name}",
+  "service.disabledHandler.headline": "{name} 已�用",
+  "service.errorHandler.action": "�新加载{name}",
+  "service.errorHandler.editAction": "编辑 {name}",
+  "service.errorHandler.headline": "糟糕�",
+  "service.errorHandler.message": "错误",
+  "service.errorHandler.text": "{name} 加载失败。",
+  "service.webviewLoader.loading": "正在加载 {service}",
+  "services.getStarted": "马上体验",
+  "services.login": "请登录�使用 Ferdi。",
+  "services.serverInfo": "或者，您�以通过�击左下角的齿轮�更改您的 Ferdi �务器。 如果您�（从一�托管�务器）切�到没有�户的 Ferdi，请注�，您�以从该�务器导出数�，然�使用“帮助���将其导入，以��所有工作区和�置的�务�",
+  "services.serverless": "使用�带账户的Ferdi",
+  "services.welcome": "欢迎使用 Ferdi",
+  "settings.account.account.editButton": "编辑�户",
+  "settings.account.accountUnavailable": "账户��用",
   "settings.account.accountUnavailableInfo": "You are using Ferdi without an account. If you want to use Ferdi with an account and keep your services synchronized across installations, please select a server in the Settings tab then login.",
-  "settings.account.buttonSave": "Update profile",
-  "settings.account.deleteAccount": "Delete account",
-  "settings.account.deleteEmailSent": "You have received an email with a link to confirm your account deletion. Your account and data cannot be restored!",
-  "settings.account.deleteInfo": "If you don't need your Ferdi account any longer, you can delete your account and all related data here.",
-  "settings.account.headline": "Account",
-  "settings.account.headlineAccount": "Account information",
-  "settings.account.headlineDangerZone": "Danger Zone",
+  "settings.account.buttonSave": "更新�置文件",
+  "settings.account.deleteAccount": "删除账户",
+  "settings.account.deleteEmailSent": "您会收到一��有确认删除�户的电�邮件。您的�户和数�将无法���",
+  "settings.account.deleteInfo": "如果您��需�您的 Ferdi �户，您�以在这里删除您的�户和所有相关数�。",
+  "settings.account.headline": "账户",
+  "settings.account.headlineAccount": "账户信�",
+  "settings.account.headlineDangerZone": "�险�作",
   "settings.account.headlineInvoices": "Invoices",
-  "settings.account.headlinePassword": "Change password",
-  "settings.account.headlineProfile": "Update profile",
-  "settings.account.successInfo": "Your changes have been saved",
-  "settings.account.tryReloadServices": "Try again",
-  "settings.account.tryReloadUserInfoRequest": "Try again",
-  "settings.account.userInfoRequestFailed": "Could not load user information",
-  "settings.account.yourLicense": "Your Ferdi License:",
-  "settings.app.accentColorInfo": "Write your accent color in a CSS-compatible format. (Default: {defaultAccentColor})",
-  "settings.app.buttonClearAllCache": "Clear cache",
+  "settings.account.headlinePassword": "更改密�",
+  "settings.account.headlineProfile": "更新�置文件",
+  "settings.account.successInfo": "您的更改已�存",
+  "settings.account.tryReloadServices": "�新�试",
+  "settings.account.tryReloadUserInfoRequest": "�新�试",
+  "settings.account.userInfoRequestFailed": "无法加载用户信�。",
+  "settings.account.yourLicense": "您的 Ferdi 许��：",
+  "settings.app.accentColorInfo": "你�以写入一个CSS格�所支�的强调色。(默认： {defaultAccentColor})",
+  "settings.app.buttonClearAllCache": "清除缓存",
   "settings.app.buttonInstallUpdate": "��并安装更新",
-  "settings.app.buttonOpenFerdiProfileFolder": "Open Profile folder",
+  "settings.app.buttonOpenFerdiProfileFolder": "打开�置文件所在目录",
   "settings.app.buttonOpenFerdiServiceRecipesFolder": "Open Service Recipes folder",
-  "settings.app.buttonSearchForUpdate": "Check for updates",
-  "settings.app.cacheInfo": "Ferdi cache is currently using {size} of disk space.",
-  "settings.app.cacheNotCleared": "Couldn't clear all cache",
-  "settings.app.closeSettings": "Close settings",
-  "settings.app.currentVersion": "Current version:",
-  "settings.app.form.accentColor": "Accent color",
-  "settings.app.form.adaptableDarkMode": "Synchronize dark mode with my OS's dark mode setting",
-  "settings.app.form.alwaysShowWorkspaces": "Always show workspace drawer",
-  "settings.app.form.autoLaunchInBackground": "Open in background",
-  "settings.app.form.autoLaunchOnStart": "Launch Ferdi on start",
-  "settings.app.form.automaticUpdates": "Enable updates",
-  "settings.app.form.beta": "Include beta versions",
-  "settings.app.form.clipboardNotifications": "Don't show notifications for clipboard events",
-  "settings.app.form.closeToSystemTray": "Close Ferdi to system tray",
-  "settings.app.form.confirmOnQuit": "Confirm when quitting Ferdi",
-  "settings.app.form.customTodoServer": "Custom Todo Server",
-  "settings.app.form.darkMode": "Enable Dark Mode",
-  "settings.app.form.enableGPUAcceleration": "Enable GPU Acceleration",
-  "settings.app.form.enableLock": "Enable Password Lock",
-  "settings.app.form.enableMenuBar": "Always show Ferdi in Menu Bar",
-  "settings.app.form.enableSpellchecking": "Enable spell checking",
-  "settings.app.form.enableSystemTray": "Always show Ferdi in System Tray",
-  "settings.app.form.enableTodos": "Enable Ferdi Todos",
-  "settings.app.form.hibernateOnStartup": "Keep services in hibernation on startup",
-  "settings.app.form.hibernationStrategy": "Hibernation strategy",
-  "settings.app.form.iconSize": "Service icon size",
-  "settings.app.form.inactivityLock": "Lock after inactivity",
-  "settings.app.form.keepAllWorkspacesLoaded": "Keep all workspaces loaded",
-  "settings.app.form.language": "Language",
-  "settings.app.form.lockPassword": "Password",
-  "settings.app.form.minimizeToSystemTray": "Minimize Ferdi to system tray",
+  "settings.app.buttonSearchForUpdate": "检查更新",
+  "settings.app.cacheInfo": "Ferdi 缓存目��用了 {size} �盘空间。",
+  "settings.app.cacheNotCleared": "无法清除所有缓存",
+  "settings.app.closeSettings": "关闭设置",
+  "settings.app.currentVersion": "当�版本：",
+  "settings.app.form.accentColor": "强调色",
+  "settings.app.form.adaptableDarkMode": "�步系统暗色模�",
+  "settings.app.form.alwaysShowWorkspaces": "总是显示工作区抽屉�",
+  "settings.app.form.autoLaunchInBackground": "在��打开",
+  "settings.app.form.autoLaunchOnStart": "开机�动Ferdi\n",
+  "settings.app.form.automaticUpdates": "�用更新",
+  "settings.app.form.beta": "包�测试版",
+  "settings.app.form.clipboardNotifications": "�显示剪贴�事件的通知",
+  "settings.app.form.closeToSystemTray": "关闭Ferdi到系统托盘",
+  "settings.app.form.confirmOnQuit": "退出Ferdi 时确认",
+  "settings.app.form.customTodoServer": "自定义Todo�务器",
+  "settings.app.form.darkMode": "开�深色主题",
+  "settings.app.form.enableGPUAcceleration": "�用 GPU 加速",
+  "settings.app.form.enableGlobalHideShortcut": "�用全局快�键以��Ferdi",
+  "settings.app.form.enableLock": "�用密��",
+  "settings.app.form.enableLongPressServiceHint": "Enable service shortcut hint on long press",
+  "settings.app.form.enableMenuBar": "总是在���中显示 Ferdi",
+  "settings.app.form.enableSpellchecking": "�用拼写检查",
+  "settings.app.form.enableSystemTray": "总是在系统托盘中显示 Ferdi",
+  "settings.app.form.enableTodos": "�用 Ferdi Todos",
+  "settings.app.form.hibernateOnStartup": "�动时��休眠�务",
+  "settings.app.form.hibernationStrategy": "休眠策略",
+  "settings.app.form.iconSize": "�务图标大�",
+  "settings.app.form.inactivityLock": "自动�定",
+  "settings.app.form.keepAllWorkspacesLoaded": "��所有工作区加载",
+  "settings.app.form.language": "语言(Language)",
+  "settings.app.form.lockPassword": "密�",
+  "settings.app.form.minimizeToSystemTray": "最�化Ferdi到系统托盘",
   "settings.app.form.navigationBarBehaviour": "Navigation bar behaviour",
   "settings.app.form.notifyTaskBarOnMessage": "Notify TaskBar/Dock on new message",
   "settings.app.form.passwordToggle": "Password toggle",
-  "settings.app.form.predefinedTodoServer": "Todo Server",
-  "settings.app.form.privateNotifications": "Don't show message content in notifications",
-  "settings.app.form.reloadAfterResume": "Reload Ferdi after system resume",
-  "settings.app.form.runInBackground": "Keep Ferdi in background when closing the window",
+  "settings.app.form.predefinedTodoServer": "Todo�务器",
+  "settings.app.form.privateNotifications": "�在通知中显示消�内容",
+  "settings.app.form.reloadAfterResume": "系统����新加载 Ferdi",
+  "settings.app.form.runInBackground": "关闭窗�时��Ferdi��状�",
   "settings.app.form.scheduledDNDEnabled": "Enable scheduled Do-not-Disturb",
-  "settings.app.form.scheduledDNDEnd": "To",
-  "settings.app.form.scheduledDNDStart": "From",
-  "settings.app.form.searchEngine": "Search engine",
-  "settings.app.form.sentry": "Send telemetry data",
-  "settings.app.form.serviceRibbonWidth": "Sidebar width",
-  "settings.app.form.showDisabledServices": "Display disabled services tabs",
-  "settings.app.form.showDragArea": "Show draggable area on window",
-  "settings.app.form.showMessagesBadgesWhenMuted": "Show unread message badge when notifications are disabled",
-  "settings.app.form.splitMode": "Enable Split View Mode",
-  "settings.app.form.startMinimized": "Start minimized",
+  "settings.app.form.scheduledDNDEnd": "至",
+  "settings.app.form.scheduledDNDStart": "从",
+  "settings.app.form.searchEngine": "�索引擎",
+  "settings.app.form.sentry": "���测数�",
+  "settings.app.form.serviceRibbonWidth": "侧边�宽度",
+  "settings.app.form.showDisabledServices": "显示�用的�务标签",
+  "settings.app.form.showDragArea": "在窗�上显示�拖动区域",
+  "settings.app.form.showMessagesBadgesWhenMuted": "�用通知时显示未读消�徽章",
+  "settings.app.form.splitMode": "�用分割视图模�",
+  "settings.app.form.startMinimized": "�动时最�化",
   "settings.app.form.universalDarkMode": "Enable universal Dark Mode",
-  "settings.app.form.useTouchIdToUnlock": "Allow using TouchID to unlock Ferdi",
-  "settings.app.form.useVerticalStyle": "Use horizontal style",
-  "settings.app.form.wakeUpStrategy": "Wake up strategy",
-  "settings.app.headlineAdvanced": "Advanced",
-  "settings.app.headlineAppearance": "Appearance",
-  "settings.app.headlineGeneral": "General",
-  "settings.app.headlineLanguage": "Language",
-  "settings.app.headlinePrivacy": "Privacy",
-  "settings.app.headlineUpdates": "Updates",
-  "settings.app.hibernateInfo": "By default, Ferdi will keep all your services open and loaded in the background so they are ready when you want to use them. Service Hibernation will unload your services after a specified amount. This is useful to save RAM or keeping services from slowing down your computer.",
+  "settings.app.form.useTouchIdToUnlock": "�许使用 TouchID 解�Ferdi",
+  "settings.app.form.useVerticalStyle": "使用水平样�",
+  "settings.app.form.wakeUpStrategy": "唤醒策略",
+  "settings.app.headlineAdvanced": "高级",
+  "settings.app.headlineAppearance": "外观",
+  "settings.app.headlineGeneral": "一般信�",
+  "settings.app.headlineLanguage": "语言(Language)",
+  "settings.app.headlinePrivacy": "��政策",
+  "settings.app.headlineUpdates": "æ›´æ–°",
+  "settings.app.hibernateInfo": "默认情况下，Ferdi将��您所有的�务在��打开并加载，这样当您想�使用它们时他们就�以了。 �务休眠将在指定数���载您的�务。这有助于�存内存或���务以�慢您的计算机速度。",
   "settings.app.inactivityLockInfo": "Minutes of inactivity, after which Ferdi should automatically lock. Use 0 to disable",
-  "settings.app.languageDisclaimer": "Official translations are English & German. All other languages are community based translations.",
+  "settings.app.languageDisclaimer": "官方翻译为英语和德语，所有其他语言都是基于社区的翻译。",
   "settings.app.lockInfo": "Password Lock allows you to keep your messages protected.\nUsing Password Lock, you will be prompted to enter your password everytime you start Ferdi or lock Ferdi yourself using the lock symbol in the bottom left corner or the shortcut {lockShortcut}.",
-  "settings.app.lockedPassword": "Password",
-  "settings.app.lockedPasswordInfo": "Please make sure to set a password you'll remember.\nIf you loose this password, you will have to reinstall Ferdi.",
-  "settings.app.restartRequired": "Changes require restart",
+  "settings.app.lockedPassword": "密�",
+  "settings.app.lockedPasswordInfo": "请务必设置您将记�的密�。\n如果您丢失了这个密�，您将�得��新安装Ferdi。",
+  "settings.app.restartRequired": "当�的�更需��新�动",
   "settings.app.scheduledDNDInfo": "Scheduled Do-not-Disturb allows you to define a period of time in which you do not want to get Notifications from Ferdi.",
   "settings.app.scheduledDNDTimeInfo": "Times in 24-Hour-Format. End time can be before start time (e.g. start 17:00, end 09:00) to enable Do-not-Disturb overnight.",
-  "settings.app.sentryInfo": "Sending telemetry data allows us to find errors in Ferdi - we will not send any personal information like your message data!",
+  "settings.app.sentryInfo": "���测数�使我们能够找到Ferdi错误——我们�会��任何个人信�，如您的消�数��",
   "settings.app.spellCheckerLanguageInfo": "Ferdi uses your Mac's build-in spellchecker to check for typos. If you want to change the languages the spellchecker checks for, you can do so in your Mac's System Preferences.",
-  "settings.app.subheadlineCache": "Cache",
+  "settings.app.subheadlineCache": "缓存",
   "settings.app.subheadlineFerdiProfile": "Ferdi Profile",
-  "settings.app.todoServerInfo": "This server will be used for the \"Ferdi Todo\" feature.",
-  "settings.app.translationHelp": "Help us to translate Ferdi into your language.",
+  "settings.app.todoServerInfo": "此�务器将用于\"Ferdi Todo\"功能。",
+  "settings.app.translationHelp": "帮助我们翻译 Ferdi �您的语言",
   "settings.app.universalDarkModeInfo": "Universal Dark Mode tries to dynamically generate dark mode styles for services that are otherwise not currently supported.",
-  "settings.app.updateStatusAvailable": "Update available, downloading...",
-  "settings.app.updateStatusSearching": "Is searching for update",
-  "settings.app.updateStatusUpToDate": "You are using the latest version of Ferdi",
-  "settings.invite.headline": "Invite Friends",
-  "settings.navigation.account": "Account",
-  "settings.navigation.availableServices": "Available services",
-  "settings.navigation.logout": "Logout",
-  "settings.navigation.supportFerdi": "About Ferdi",
+  "settings.app.updateStatusAvailable": "更新�用，正在下载...",
+  "settings.app.updateStatusSearching": "正在�索更新",
+  "settings.app.updateStatusUpToDate": "您正在使用最新版本的Ferdi",
+  "settings.invite.headline": "邀请好�",
+  "settings.navigation.account": "账户",
+  "settings.navigation.availableServices": "�用的�务",
+  "settings.navigation.logout": "注销",
+  "settings.navigation.supportFerdi": "关于 Ferdi",
   "settings.navigation.team": "Manage Team",
-  "settings.navigation.yourServices": "Your services",
-  "settings.navigation.yourWorkspaces": "Your workspaces",
-  "settings.recipes.all": "All services",
-  "settings.recipes.custom": "Custom Services",
+  "settings.navigation.yourServices": "您的�务",
+  "settings.navigation.yourWorkspaces": "您的工作区",
+  "settings.recipes.all": "所有�务",
+  "settings.recipes.custom": "自定义�务",
   "settings.recipes.customService.headline.communityRecipes": "Community 3rd Party Recipes",
   "settings.recipes.customService.headline.customRecipes": "Custom 3rd Party Recipes",
   "settings.recipes.customService.headline.devRecipes": "Your Development Service Recipes",
   "settings.recipes.customService.intro": "To add a custom service, copy the service recipe to:",
-  "settings.recipes.customService.openDevDocs": "Developer Documentation",
-  "settings.recipes.customService.openFolder": "Open folder",
-  "settings.recipes.headline": "Available services",
-  "settings.recipes.missingService": "Missing a service?",
-  "settings.recipes.nothingFound": "Sorry, but no service matched your search term - but you can still probably add it using the \"Custom Website\" option. Please note that the website might show more services that have been added to Ferdi since the version that you are currently on. To get those new services, please consider upgrading to a newer version of Ferdi.",
-  "settings.recipes.servicesSuccessfulAddedInfo": "Service successfully added",
-  "settings.searchService": "Search service",
-  "settings.service.error.goBack": "Back to services",
-  "settings.service.error.headline": "Error",
+  "settings.recipes.customService.openDevDocs": "开�者文档",
+  "settings.recipes.customService.openFolder": "打开文件夹",
+  "settings.recipes.headline": "�用的�务",
+  "settings.recipes.missingService": "找�到�务？",
+  "settings.recipes.nothingFound": "对�起，没有任何�务匹�您的�索� - 但您�然�以使用“自定义网站�选项添加它。 请注�，网站�能会显示自您当�使用的版本以�添加到Ferdi的更多�务。 为了获得这些新�务，请考虑�级为较新版本的费尔迪。",
+  "settings.recipes.servicesSuccessfulAddedInfo": "�务添加�功",
+  "settings.searchService": "�索�务",
+  "settings.service.error.goBack": "返回�务列表",
+  "settings.service.error.headline": "错误",
   "settings.service.error.message": "Could not load service recipe.",
-  "settings.service.form.addServiceHeadline": "Add {name}",
-  "settings.service.form.availableServices": "Available services",
-  "settings.service.form.customUrl": "Custom server",
-  "settings.service.form.customUrlValidationError": "Could not validate custom {name} server.",
+  "settings.service.form.addServiceHeadline": "添加 {name}",
+  "settings.service.form.availableServices": "�用的�务",
+  "settings.service.form.customUrl": "自定义�务器",
+  "settings.service.form.customUrlValidationError": "无法验�自定义 {name} �务器。",
   "settings.service.form.darkReaderBrightness": "Dark Reader Brightness",
   "settings.service.form.darkReaderContrast": "Dark Reader Contrast",
   "settings.service.form.darkReaderSepia": "Dark Reader Sepia",
-  "settings.service.form.deleteButton": "Delete service",
-  "settings.service.form.editServiceHeadline": "Edit {name}",
-  "settings.service.form.enableAudio": "Enable audio",
+  "settings.service.form.deleteButton": "删除�务",
+  "settings.service.form.editServiceHeadline": "编辑 {name}",
+  "settings.service.form.enableAudio": "�用音频",
   "settings.service.form.enableBadge": "Show unread message badges",
-  "settings.service.form.enableDarkMode": "Enable Dark Mode",
-  "settings.service.form.enableHibernation": "Enable hibernation",
-  "settings.service.form.enableNotification": "Enable notifications",
-  "settings.service.form.enableService": "Enable service",
+  "settings.service.form.enableDarkMode": "开�深色主题",
+  "settings.service.form.enableHibernation": "�用休眠",
+  "settings.service.form.enableNotification": "开�通知",
+  "settings.service.form.enableService": "�用�务",
+  "settings.service.form.enableWakeUp": "Enable wake up",
   "settings.service.form.headlineBadges": "Unread message badges",
-  "settings.service.form.headlineDarkReaderSettings": "Dark Reader Settings",
-  "settings.service.form.headlineGeneral": "General",
-  "settings.service.form.headlineNotifications": "Notifications",
-  "settings.service.form.icon": "Custom icon",
+  "settings.service.form.headlineDarkReaderSettings": "暗色阅读器设置",
+  "settings.service.form.headlineGeneral": "一般信�",
+  "settings.service.form.headlineNotifications": "通知消�",
+  "settings.service.form.icon": "自定义图标",
   "settings.service.form.iconDelete": "删除",
-  "settings.service.form.iconUpload": "Drop your image, or click here",
-  "settings.service.form.indirectMessageInfo": "You will be notified about all new messages in a channel, not just @username, @channel, @here, ...",
+  "settings.service.form.iconUpload": "拖入图�或点击这里",
+  "settings.service.form.indirectMessageInfo": "您将收到一个频�中所有新消�的通知，而�仅仅是@username, @channel, @here...",
   "settings.service.form.indirectMessages": "Show message badge for all new messages",
-  "settings.service.form.isHibernatedEnabledInfo": "When enabled, a service will be shut down after a period of time to save system resources.",
-  "settings.service.form.isMutedInfo": "When disabled, all notification sounds and audio playback are muted",
+  "settings.service.form.isHibernatedEnabledInfo": "�用时，�务将在一段时间�关闭，以节�系统资�。",
+  "settings.service.form.isMutedInfo": "�用时，所有通知声音和音频将被�音",
   "settings.service.form.name": "�称",
   "settings.service.form.onlyShowFavoritesInUnreadCount": "Only show Favorites in unread count",
-  "settings.service.form.openDarkmodeCss": "Open darkmode.css",
-  "settings.service.form.openUserCss": "Open user.css",
-  "settings.service.form.openUserJs": "Open user.js",
-  "settings.service.form.proxy.headline": "HTTP/HTTPS Proxy Settings",
-  "settings.service.form.proxy.host": "Proxy Host/IP",
-  "settings.service.form.proxy.info": "Proxy settings will not be synchronized with the Ferdi servers.",
-  "settings.service.form.proxy.isEnabled": "Use Proxy",
-  "settings.service.form.proxy.password": "Password (optional)",
-  "settings.service.form.proxy.port": "Port",
-  "settings.service.form.proxy.restartInfo": "Please restart Ferdi after changing proxy Settings.",
-  "settings.service.form.proxy.user": "User (optional)",
-  "settings.service.form.recipeFileInfo": "Your user files will be inserted into the webpage so you can customize services in any way you like. User files are only stored locally and are not transferred to other computers using the same account.",
-  "settings.service.form.saveButton": "Save service",
-  "settings.service.form.tabHosted": "Hosted",
-  "settings.service.form.tabOnPremise": "Self hosted ��",
-  "settings.service.form.team": "Team",
-  "settings.service.form.useHostedService": "Use the hosted {name} service.",
-  "settings.service.form.yourServices": "Your services",
-  "settings.services.deletedInfo": "Service has been deleted",
-  "settings.services.discoverServices": "Discover services",
-  "settings.services.headline": "Your services",
-  "settings.services.noServicesAdded": "Start by adding a service.",
-  "settings.services.nothingFound": "Sorry, but no service matched your search term - but you can still probably add it using the \"Custom Website\" option. Please note that the website might show more services that have been added to Ferdi since the version that you are currently on. To get those new services, please consider upgrading to a newer version of Ferdi.",
-  "settings.services.servicesRequestFailed": "Could not load your services",
-  "settings.services.tooltip.isDisabled": "Service is disabled",
-  "settings.services.tooltip.isMuted": "All sounds are muted",
-  "settings.services.tooltip.notificationsDisabled": "Notifications are disabled",
-  "settings.services.updatedInfo": "Your changes have been saved",
-  "settings.supportFerdi.aboutIntro": "<p>Ferdi is an open-source and a community-lead application.</p><p>Thanks to the people who make this possbile:</p>",
-  "settings.supportFerdi.bannerText": "Do you want to help us improve Ferdi?",
-  "settings.supportFerdi.headline": "About Ferdi",
-  "settings.supportFerdi.openSurvey": "Open survey",
-  "settings.supportFerdi.textDonation": "If you feel like supporting Ferdi development with a donation, you can do so on both,",
-  "settings.supportFerdi.textDonationAnd": "and",
-  "settings.supportFerdi.textExpenses": "While volunteers do most of the work, we still need to pay for servers and certificates. As a community, we are fully transparent on funds we collect and spend - see our",
+  "settings.service.form.openDarkmodeCss": "打开 darkmode.css",
+  "settings.service.form.openUserCss": "打开 user.css",
+  "settings.service.form.openUserJs": "打开user.js",
+  "settings.service.form.proxy.headline": "HTTP/HTTPS 代�设置",
+  "settings.service.form.proxy.host": "代�主机/IP",
+  "settings.service.form.proxy.info": "代�设置将�会与 Ferdi �务器�步。",
+  "settings.service.form.proxy.isEnabled": "使用代�",
+  "settings.service.form.proxy.password": "密� (�选)",
+  "settings.service.form.proxy.port": "端�",
+  "settings.service.form.proxy.restartInfo": "更改代�设置�，请�� Ferdi。",
+  "settings.service.form.proxy.user": "用户 (�选)",
+  "settings.service.form.recipeFileInfo": "您的用户文件将被�入网页，以便您�以以任何方�自定义�务。 用户文件�存储在本地，�会被�一账户�步到其他计算机。",
+  "settings.service.form.saveButton": "�存�务",
+  "settings.service.form.tabHosted": "托管的",
+  "settings.service.form.tabOnPremise": "自我托管 ��",
+  "settings.service.form.team": "团队",
+  "settings.service.form.useHostedService": "使用托管的 {name} �务。",
+  "settings.service.form.yourServices": "您的�务",
+  "settings.services.deletedInfo": "�务已被删除",
+  "settings.services.discoverServices": "�现�务",
+  "settings.services.headline": "您的�务",
+  "settings.services.noServicesAdded": "从添加�务开始。",
+  "settings.services.nothingFound": "对�起，没有任何�务匹�您的�索� - 但您�然�以使用“自定义网站�选项添加它。 请注�，网站�能会显示自您当�使用的版本以�添加到Ferdi的更多�务。 为了获得这些新�务，请考虑�级为较新版本的费尔迪。",
+  "settings.services.servicesRequestFailed": "无法加载您的�务",
+  "settings.services.tooltip.isDisabled": "�务已�用",
+  "settings.services.tooltip.isMuted": "所有声音被�音",
+  "settings.services.tooltip.notificationsDisabled": "通知已�用",
+  "settings.services.updatedInfo": "您的更改已�存",
+  "settings.supportFerdi.aboutIntro": "<p>Ferdi是一个开�的软件。</p><p>感谢那些使Ferdi�为�能的人：</p>",
+  "settings.supportFerdi.bannerText": "你想�帮助我们改进Ferdi�？",
+  "settings.supportFerdi.headline": "关于 Ferdi",
+  "settings.supportFerdi.openSurvey": "打开调查",
+  "settings.supportFerdi.textDonation": "如果你想��赠Ferdi的开�，你�以通过：",
+  "settings.supportFerdi.textDonationAnd": "和",
+  "settings.supportFerdi.textExpenses": "虽然是志愿者�大部分工作，但我们�然需�用钱�购买�务器和�书。 作为一个社区应用，我们在募集和花费的资金上是完全公开的—— 看看我们的",
   "settings.supportFerdi.textGitHubSponsors": "GitHub Sponsors",
-  "settings.supportFerdi.textListContributors": "Full list of contributors",
-  "settings.supportFerdi.textListContributorsHere": "here",
+  "settings.supportFerdi.textListContributors": "贡献者列表",
+  "settings.supportFerdi.textListContributorsHere": "这里",
   "settings.supportFerdi.textOpenCollective": "Open Collective",
-  "settings.supportFerdi.textSupportWelcome": "Support is always welcome. You can find a list of the help we need",
-  "settings.supportFerdi.textSupportWelcomeHere": "here",
-  "settings.supportFerdi.textVolunteers": "The development of Ferdi is done by volunteers. People who use Ferdi like you. They maintain, fix, and improve Ferdi in their spare time.",
-  "settings.supportFerdi.title": "Do you like Ferdi?",
+  "settings.supportFerdi.textSupportWelcome": "支�总是�欢迎的。您�以找到我们需�的帮助列表",
+  "settings.supportFerdi.textSupportWelcomeHere": "这里",
+  "settings.supportFerdi.textVolunteers": "Ferdi是由志愿者开�而�。他们用空闲时间维护�修�和改进Ferdi。",
+  "settings.supportFerdi.title": "你喜欢Ferdi�？",
   "settings.team.contentHeadline": "Franz Team Management",
   "settings.team.copy": "Franz's Team Management allows you to manage Franz Subscriptions for multiple users. Please keep in mind that having a Franz Premium subscription will give you no advantages in using Ferdi: The only reason you still have access to Team Management is so you can manage your legacy Franz Teams and so that you don't loose any functionality in managing your account.",
-  "settings.team.headline": "Team",
+  "settings.team.headline": "团队",
   "settings.team.intro": "You are currently using Franz Servers, which is why you have access to Team Management.",
   "settings.team.manageAction": "Manage your Team on meetfranz.com",
   "settings.team.teamsUnavailable": "Teams are unavailable",
   "settings.team.teamsUnavailableInfo": "Teams are currently only available when using the Franz Server and after paying for Franz Professional. Please change your server to https://api.franzinfra.com to use teams.",
-  "settings.user.form.accountType.company": "Company",
-  "settings.user.form.accountType.individual": "Individual",
-  "settings.user.form.accountType.label": "Account type",
-  "settings.user.form.accountType.non-profit": "Non-Profit",
-  "settings.user.form.currentPassword": "Current password",
+  "settings.user.form.accountType.company": "公�",
+  "settings.user.form.accountType.individual": "个人",
+  "settings.user.form.accountType.label": "账�类型",
+  "settings.user.form.accountType.non-profit": "�盈利的",
+  "settings.user.form.currentPassword": "当�密�",
   "settings.user.form.email": "Email",
-  "settings.user.form.firstname": "First Name",
-  "settings.user.form.lastname": "Last Name",
-  "settings.user.form.newPassword": "New password",
+  "settings.user.form.firstname": "�字",
+  "settings.user.form.lastname": "姓�",
+  "settings.user.form.newPassword": "新密�",
   "settings.workspace.add.form.name": "�称",
-  "settings.workspace.add.form.submitButton": "Create workspace",
-  "settings.workspace.form.buttonDelete": "Delete workspace",
-  "settings.workspace.form.buttonSave": "Save workspace",
-  "settings.workspace.form.keepLoaded": "Keep this workspace loaded*",
-  "settings.workspace.form.keepLoadedInfo": "*This option will be overwritten by the global \"Keep all workspaces loaded\" option.",
+  "settings.workspace.add.form.submitButton": "创建工作区",
+  "settings.workspace.form.buttonDelete": "删除工作区",
+  "settings.workspace.form.buttonSave": "�存工作区",
+  "settings.workspace.form.keepLoaded": "��此工作区加载*",
+  "settings.workspace.form.keepLoadedInfo": "*此选项将被全局选项“��所有工作区加载�所覆盖。",
   "settings.workspace.form.name": "�称",
-  "settings.workspace.form.servicesInWorkspaceHeadline": "Services in this Workspace",
-  "settings.workspace.form.yourWorkspaces": "Your workspaces",
-  "settings.workspaces.deletedInfo": "Workspace has been deleted",
-  "settings.workspaces.headline": "Your workspaces",
-  "settings.workspaces.noWorkspacesAdded": "You haven't created any workspaces yet.",
-  "settings.workspaces.tryReloadWorkspaces": "Try again",
-  "settings.workspaces.updatedInfo": "Your changes have been saved",
+  "settings.workspace.form.servicesInWorkspaceHeadline": "此工作区中的�务",
+  "settings.workspace.form.yourWorkspaces": "您的工作区",
+  "settings.workspaces.deletedInfo": "工作区已被删除",
+  "settings.workspaces.headline": "您的工作区",
+  "settings.workspaces.noWorkspacesAdded": "您尚未创建任何工作区。",
+  "settings.workspaces.tryReloadWorkspaces": "�新�试",
+  "settings.workspaces.updatedInfo": "您的更改已�存",
   "settings.workspaces.workspaceFeatureHeadline": "Less is More: Introducing Ferdi Workspaces",
-  "settings.workspaces.workspaceFeatureInfo": "Ferdi Workspaces let you focus on what’s important right now. Set up different sets of services and easily switch between them at any time. You decide which services you need when and where, so we can help you stay on top of your game - or easily switch off from work whenever you want.",
-  "settings.workspaces.workspacesRequestFailed": "Could not load your workspaces",
-  "setupAssistant.headline": "Let's get started",
+  "settings.workspaces.workspaceFeatureInfo": "Ferdi工作区�以让您专注于当下最��的事情。 设置��的�务集�，让您�时�以的在它们之间轻�的切�。 ",
+  "settings.workspaces.workspacesRequestFailed": "无法加载您的工作区",
+  "setupAssistant.headline": "我们开始��",
   "setupAssistant.subheadline": "Choose from our most used services and get back on top of your messaging now.",
-  "setupAssistant.submit.label": "Let's go",
-  "sidebar.addNewService": "Add new service",
-  "sidebar.closeTodosDrawer": "Close Ferdi Todos",
-  "sidebar.closeWorkspaceDrawer": "Close workspace drawer",
-  "sidebar.lockFerdi": "Lock Ferdi",
-  "sidebar.muteApp": "Disable notifications & audio",
-  "sidebar.openTodosDrawer": "Open Ferdi Todos",
-  "sidebar.openWorkspaceDrawer": "Open workspace drawer",
-  "sidebar.unmuteApp": "Enable notifications & audio",
+  "setupAssistant.submit.label": "让我们开始�",
+  "sidebar.addNewService": "添加�务",
+  "sidebar.closeTodosDrawer": "关闭Ferdi Todos",
+  "sidebar.closeWorkspaceDrawer": "关闭工作区抽屉�",
+  "sidebar.lockFerdi": "�定Ferdi",
+  "sidebar.muteApp": "�用通知和音频",
+  "sidebar.openTodosDrawer": "开�Ferdi Todos",
+  "sidebar.openWorkspaceDrawer": "打开工作区抽屉�",
+  "sidebar.unmuteApp": "�用通知和音频",
   "signup.email.label": "电�邮箱地�",
-  "signup.emailDuplicate": "A user with that email address already exists",
-  "signup.firstname.label": "First Name",
-  "signup.headline": "Sign up",
-  "signup.lastname.label": "Last Name",
-  "signup.legal.info": "By creating a Ferdi account you accept the",
-  "signup.legal.privacy": "Privacy Statement",
-  "signup.legal.terms": "Terms of service",
-  "signup.link.login": "Already have an account, sign in?",
-  "signup.password.label": "Password",
-  "signup.submit.label": "Create account",
-  "tabs.item.confirmDeleteService": "Do you really want to delete the {serviceName} service?",
-  "tabs.item.deleteService": "Delete service",
-  "tabs.item.disableAudio": "Disable audio",
-  "tabs.item.disableDarkMode": "Disable Dark mode",
-  "tabs.item.disableNotifications": "Disable notifications",
-  "tabs.item.disableService": "Disable service",
-  "tabs.item.enableAudio": "Enable audio",
-  "tabs.item.enableDarkMode": "Enable Dark mode",
-  "tabs.item.enableNotification": "Enable notifications",
-  "tabs.item.enableService": "Enable service",
-  "tabs.item.hibernateService": "Hibernate service",
+  "signup.emailDuplicate": "该电�邮件地�的用户已�存在",
+  "signup.firstname.label": "�字",
+  "signup.headline": "登录",
+  "signup.lastname.label": "姓�",
+  "signup.legal.info": "创建�户则表明您接�我们的",
+  "signup.legal.privacy": "��声明",
+  "signup.legal.terms": "�务�款",
+  "signup.link.login": "已有账户？请登录",
+  "signup.password.label": "密�",
+  "signup.submit.label": "创建账户",
+  "tabs.item.confirmDeleteService": "你真的�删除 {serviceName} �务么？",
+  "tabs.item.deleteService": "删除�务",
+  "tabs.item.disableAudio": "�用音频",
+  "tabs.item.disableDarkMode": "�用暗色模�",
+  "tabs.item.disableNotifications": "�用通知",
+  "tabs.item.disableService": "�用�务",
+  "tabs.item.enableAudio": "�用音频",
+  "tabs.item.enableDarkMode": "开�深色主题",
+  "tabs.item.enableNotification": "开�通知",
+  "tabs.item.enableService": "�用�务",
+  "tabs.item.hibernateService": "休眠�务",
   "tabs.item.reload": "�新加载",
-  "tabs.item.wakeUpService": "Wake up service",
-  "validation.email": "{field} is not valid",
-  "validation.minLength": "{field} should be at least {length} characters long",
-  "validation.oneRequired": "At least one is required",
-  "validation.required": "{field} is required",
-  "validation.url": "{field} is not a valid URL",
+  "tabs.item.wakeUpService": "唤醒�务",
+  "validation.email": "{field} 无效",
+  "validation.minLength": "{field} 的长度应该大于 {length} 个字符",
+  "validation.oneRequired": "至少需�一个",
+  "validation.required": "{field} 为必填字段",
+  "validation.url": "{field} �是一个有效的 URL",
   "webControls.back": "返回",
-  "webControls.forward": "Forward",
+  "webControls.forward": "��",
   "webControls.goHome": "主页",
-  "webControls.openInBrowser": "Open in Browser",
+  "webControls.openInBrowser": "在�览器中打开",
   "webControls.reload": "�新加载",
-  "welcome.loginButton": "Login to your account",
-  "welcome.signupButton": "Create a free account",
-  "workspaceDrawer.addNewWorkspaceLabel": "Add new workspace",
-  "workspaceDrawer.allServices": "All services",
-  "workspaceDrawer.headline": "Workspaces",
-  "workspaceDrawer.item.contextMenuEdit": "edit",
-  "workspaceDrawer.item.noServicesAddedYet": "No services added yet",
+  "welcome.loginButton": "登录您的账�",
+  "welcome.signupButton": "创建�费账户",
+  "workspaceDrawer.addNewWorkspaceLabel": "新建工作区…",
+  "workspaceDrawer.allServices": "所有�务",
+  "workspaceDrawer.headline": "工作区",
+  "workspaceDrawer.item.contextMenuEdit": "编辑",
+  "workspaceDrawer.item.noServicesAddedYet": "尚未添加任何�务",
   "workspaceDrawer.workspaceFeatureInfo": "<p>Ferdi Workspaces let you focus on what’s important right now. Set up different sets of services and easily switch between them at any time.</p><p>You decide which services you need when and where, so we can help you stay on top of your game - or easily switch off from work whenever you want.</p>",
-  "workspaceDrawer.workspacesSettingsTooltip": "Edit workspaces settings",
-  "workspaces.switchingIndicator.switchingTo": "Switching to"
+  "workspaceDrawer.workspacesSettingsTooltip": "工作区设置",
+  "workspaces.switchingIndicator.switchingTo": "切�到"
 }
diff --git a/src/index.js b/src/index.ts
index 9f384f5fa..b4a754289 100644
--- a/src/index.js
+++ b/src/index.ts
@@ -1,6 +1,13 @@
 /* eslint-disable import/first */
 
-import { app, BrowserWindow, globalShortcut, ipcMain, session, dialog } from 'electron';
+import {
+  app,
+  BrowserWindow,
+  globalShortcut,
+  ipcMain,
+  session,
+  dialog,
+} from 'electron';
 
 import { emptyDirSync, ensureFileSync } from 'fs-extra';
 import { join } from 'path';
@@ -13,12 +20,7 @@ initializeRemote();
 
 import { DEFAULT_APP_SETTINGS, DEFAULT_WINDOW_OPTIONS } from './config';
 
-import {
-  isMac,
-  isWindows,
-  isLinux,
-  altKey,
-} from './environment';
+import { isMac, isWindows, isLinux, altKey } from './environment';
 import {
   isDevMode,
   aboutAppDetails,
@@ -34,7 +36,8 @@ import DBus from './lib/DBus';
 import Settings from './electron/Settings';
 import handleDeepLink from './electron/deepLinking';
 import { isPositionValid } from './electron/windowUtils';
-import { appId } from './package.json'; // eslint-disable-line import/no-unresolved
+// @ts-expect-error Cannot find module './package.json' or its corresponding type declarations.
+import { appId } from './package.json';
 import './electron/exception';
 
 import { asarPath } from './helpers/asar-helpers';
@@ -49,13 +52,18 @@ app.userAgentFallback = userAgent();
 
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
-let mainWindow;
+let mainWindow: BrowserWindow | undefined;
 let willQuitApp = false;
 
 // Register methods to be called once the window has been loaded.
-let onDidLoadFns = [];
-
-function onDidLoad(fn) {
+let onDidLoadFns: any[] | null = [];
+
+function onDidLoad(fn: {
+  (window: BrowserWindow): void;
+  (window: BrowserWindow): void;
+  (window: BrowserWindow): void;
+  (arg0: BrowserWindow): void;
+}) {
   if (onDidLoadFns) {
     onDidLoadFns.push(fn);
   } else if (mainWindow) {
@@ -76,10 +84,10 @@ if (isWindows) {
 const settings = new Settings('app', DEFAULT_APP_SETTINGS);
 const proxySettings = new Settings('proxy');
 
-const retrieveSettingValue = (key, defaultValue = true) =>
+const retrieveSettingValue = (key: string, defaultValue: boolean) =>
   ifUndefinedBoolean(settings.get(key), defaultValue);
 
-if (retrieveSettingValue('sentry')) {
+if (retrieveSettingValue('sentry', DEFAULT_APP_SETTINGS.sentry)) {
   // eslint-disable-next-line global-require
   require('./sentry');
 }
@@ -96,7 +104,7 @@ const gotTheLock = liftSingleInstanceLock
 if (!gotTheLock) {
   app.quit();
 } else {
-  app.on('second-instance', (event, argv) => {
+  app.on('second-instance', (_event, argv) => {
     // Someone tried to run a second instance, we should focus our window.
     if (mainWindow) {
       if (!mainWindow.isVisible()) {
@@ -108,7 +116,7 @@ if (!gotTheLock) {
       mainWindow.focus();
 
       if (isWindows) {
-        onDidLoad(window => {
+        onDidLoad((window: BrowserWindow) => {
           // Keep only command line / deep linked arguments
           const url = argv.slice(1);
           if (url) {
@@ -145,6 +153,7 @@ if (!gotTheLock) {
 // https://github.com/electron/electron/issues/9046
 if (
   isLinux &&
+  process.env.XDG_CURRENT_DESKTOP &&
   ['Pantheon', 'Unity:Unity7'].includes(process.env.XDG_CURRENT_DESKTOP)
 ) {
   process.env.XDG_CURRENT_DESKTOP = 'Unity';
@@ -196,16 +205,20 @@ const createWindow = () => {
     frame: isLinux,
     backgroundColor,
     webPreferences: {
-      spellcheck: retrieveSettingValue('enableSpellchecking'),
+      spellcheck: retrieveSettingValue(
+        'enableSpellchecking',
+        DEFAULT_APP_SETTINGS.enableSpellchecking,
+      ),
       nodeIntegration: true,
       contextIsolation: false,
       webviewTag: true,
       preload: join(__dirname, 'sentry.js'),
+      // @ts-expect-error Object literal may only specify known properties, and 'enableRemoteModule' does not exist in type 'WebPreferences'.
       enableRemoteModule: true,
     },
   });
 
-  app.on('web-contents-created', (e, contents) => {
+  app.on('web-contents-created', (_e, contents) => {
     if (contents.getType() === 'webview') {
       contents.on('new-window', event => {
         event.preventDefault();
@@ -225,7 +238,7 @@ const createWindow = () => {
   });
 
   // Initialize System Tray
-  const trayIcon = new Tray();
+  const trayIcon: Tray = new Tray();
 
   // Initialize DBus interface
   const dbus = new DBus(trayIcon);
@@ -256,7 +269,7 @@ const createWindow = () => {
 
   // Windows deep linking handling on app launch
   if (isWindows) {
-    onDidLoad(window => {
+    onDidLoad((window: BrowserWindow) => {
       const url = process.argv.slice(1);
       if (url) {
         handleDeepLink(window, url.toString());
@@ -270,24 +283,35 @@ const createWindow = () => {
     // Dereference the window object, usually you would store windows
     // in an array if your app supports multi windows, this is the time
     // when you should delete the corresponding element.
-    if (!willQuitApp && retrieveSettingValue('runInBackground')) {
+    if (
+      !willQuitApp &&
+      retrieveSettingValue(
+        'runInBackground',
+        DEFAULT_APP_SETTINGS.runInBackground,
+      )
+    ) {
       e.preventDefault();
       if (isWindows) {
         debug('Window: minimize');
-        mainWindow.minimize();
-
-        if (retrieveSettingValue('closeToSystemTray')) {
+        mainWindow?.minimize();
+
+        if (
+          retrieveSettingValue(
+            'closeToSystemTray',
+            DEFAULT_APP_SETTINGS.closeToSystemTray,
+          )
+        ) {
           debug('Skip taskbar: true');
-          mainWindow.setSkipTaskbar(true);
+          mainWindow?.setSkipTaskbar(true);
         }
-      } else if (isMac && mainWindow.isFullScreen()) {
+      } else if (isMac && mainWindow?.isFullScreen()) {
         debug('Window: leaveFullScreen and hide');
-        mainWindow.once('show', () => mainWindow.setFullScreen(true));
-        mainWindow.once('leave-full-screen', () => mainWindow.hide());
+        mainWindow.once('show', () => mainWindow?.setFullScreen(true));
+        mainWindow.once('leave-full-screen', () => mainWindow?.hide());
         mainWindow.setFullScreen(false);
       } else {
         debug('Window: hide');
-        mainWindow.hide();
+        mainWindow?.hide();
       }
     } else {
       dbus.stop();
@@ -298,35 +322,49 @@ const createWindow = () => {
   // For Windows we need to store a flag to properly restore the window
   // if the window was maximized before minimizing it so system tray
   mainWindow.on('minimize', () => {
+    // @ts-expect-error Property 'wasMaximized' does not exist on type 'App'.
     app.wasMaximized = app.isMaximized;
 
-    if (retrieveSettingValue('minimizeToSystemTray')) {
+    if (
+      retrieveSettingValue(
+        'minimizeToSystemTray',
+        DEFAULT_APP_SETTINGS.minimizeToSystemTray,
+      )
+    ) {
       debug('Skip taskbar: true');
-      mainWindow.setSkipTaskbar(true);
+      mainWindow?.setSkipTaskbar(true);
       trayIcon.show();
     }
   });
 
   mainWindow.on('maximize', () => {
     debug('Window: maximize');
+    // @ts-expect-error Property 'isMaximized' does not exist on type 'App'.
     app.isMaximized = true;
   });
 
   mainWindow.on('unmaximize', () => {
     debug('Window: unmaximize');
+    // @ts-expect-error Property 'isMaximized' does not exist on type 'App'.
     app.isMaximized = false;
   });
 
   mainWindow.on('restore', () => {
     debug('Window: restore');
-    mainWindow.setSkipTaskbar(false);
+    mainWindow?.setSkipTaskbar(false);
 
+    // @ts-expect-error Property 'wasMaximized' does not exist on type 'App'.
     if (app.wasMaximized) {
       debug('Window: was maximized before, maximize window');
-      mainWindow.maximize();
+      mainWindow?.maximize();
     }
 
-    if (!retrieveSettingValue('enableSystemTray')) {
+    if (
+      !retrieveSettingValue(
+        'enableSystemTray',
+        DEFAULT_APP_SETTINGS.enableSystemTray,
+      )
+    ) {
       debug('Tray: hiding tray icon');
       trayIcon.hide();
     }
@@ -340,10 +378,10 @@ const createWindow = () => {
 
   mainWindow.on('show', () => {
     debug('Skip taskbar: true');
-    mainWindow.setSkipTaskbar(false);
+    mainWindow?.setSkipTaskbar(false);
   });
 
-  app.mainWindow = mainWindow;
+  // @ts-expect-error Property 'isMaximized' does not exist on type 'App'.
   app.isMaximized = mainWindow.isMaximized();
 
   mainWindow.webContents.on('new-window', (e, url) => {
@@ -351,17 +389,26 @@ const createWindow = () => {
     openExternalUrl(url);
   });
 
-  if (retrieveSettingValue('startMinimized', false)) {
+  if (
+    retrieveSettingValue('startMinimized', DEFAULT_APP_SETTINGS.startMinimized)
+  ) {
     mainWindow.hide();
   } else {
     mainWindow.show();
   }
 
   app.whenReady().then(() => {
-    // Toggle the window on 'Alt+X'
-    globalShortcut.register(`${altKey()}+X`, () => {
-      trayIcon.trayMenuTemplate[0].click();
-    });
+    if (
+      retrieveSettingValue(
+        'enableGlobalHideShortcut',
+        DEFAULT_APP_SETTINGS.enableGlobalHideShortcut,
+      )
+    ) {
+      // Toggle the window on 'Alt+X'
+      globalShortcut.register(`${altKey()}+X`, () => {
+        trayIcon.trayMenuTemplate[0].click();
+      });
+    }
   });
 };
 
@@ -401,18 +448,18 @@ app.on('ready', () => {
 
   // Register App URL
   const protocolClient = isDevMode ? 'ferdi-dev' : 'ferdi';
-  if (!app.isDefaultProtocolClient(protocolClient)) {
-    app.setAsDefaultProtocolClient(protocolClient);
+  if (!app.isDefaultProtocolClient(protocolClient, process.execPath)) {
+    app.setAsDefaultProtocolClient(protocolClient, process.execPath);
   }
 
   if (isWindows) {
     const extraArgs = isDevMode ? `${__dirname} ` : '';
     const iconPath = asarPath(
-          join(
-            isDevMode ? `${__dirname}../src/` : __dirname,
-            'assets/images/taskbar/win32/display.ico',
-          ),
-        );
+      join(
+        isDevMode ? `${__dirname}../src/` : __dirname,
+        'assets/images/taskbar/win32/display.ico',
+      ),
+    );
     app.setUserTasks([
       {
         program: process.execPath,
@@ -428,7 +475,7 @@ app.on('ready', () => {
         iconPath,
         iconIndex: 0,
         title: 'Quit Ferdi',
-        description: null,
+        description: '',
       },
     ]);
   }
@@ -444,26 +491,28 @@ app.on('ready', () => {
 const noop = () => null;
 let authCallback = noop;
 
-app.on('login', (event, webContents, request, authInfo, callback) => {
+app.on('login', (event, _webContents, _request, authInfo, callback) => {
+  // @ts-expect-error Type '(username?: string | undefined, password?: string | undefined) => void' is not assignable to type '() => null'.
   authCallback = callback;
   debug('browser login event', authInfo);
   event.preventDefault();
 
   if (!authInfo.isProxy && authInfo.scheme === 'basic') {
     debug('basic auth handler', authInfo);
-    basicAuthHandler(mainWindow, authInfo);
+    basicAuthHandler(mainWindow!, authInfo);
   }
 });
 
 // TODO: evaluate if we need to store the authCallback for every service
-ipcMain.on('feature-basic-auth-credentials', (e, { user, password }) => {
+ipcMain.on('feature-basic-auth-credentials', (_e, { user, password }) => {
   debug('Received basic auth credentials', user, '********');
 
+  // @ts-expect-error Expected 0 arguments, but got 2.
   authCallback(user, password);
   authCallback = noop;
 });
 
-ipcMain.on('open-browser-window', (e, { url, serviceId }) => {
+ipcMain.on('open-browser-window', (_e, { url, serviceId }) => {
   const serviceSession = session.fromPartition(`persist:service-${serviceId}`);
   const child = new BrowserWindow({
     parent: mainWindow,
@@ -481,7 +530,7 @@ ipcMain.on('open-browser-window', (e, { url, serviceId }) => {
 
 ipcMain.on(
   'modifyRequestHeaders',
-  (e, { modifiedRequestHeaders, serviceId }) => {
+  (_e, { modifiedRequestHeaders, serviceId }) => {
     debug(
       `Received modifyRequestHeaders ${modifiedRequestHeaders} for serviceId ${serviceId}`,
     );
@@ -502,7 +551,7 @@ ipcMain.on(
   },
 );
 
-ipcMain.on('knownCertificateHosts', (e, { knownHosts, serviceId }) => {
+ipcMain.on('knownCertificateHosts', (_e, { knownHosts, serviceId }) => {
   debug(
     `Received knownCertificateHosts ${knownHosts} for serviceId ${serviceId}`,
   );
@@ -511,7 +560,10 @@ ipcMain.on('knownCertificateHosts', (e, { knownHosts, serviceId }) => {
     .setCertificateVerifyProc((request, callback) => {
       // To know more about these callbacks: https://www.electronjs.org/docs/api/session#sessetcertificateverifyprocproc
       const { hostname } = request;
-      if (knownHosts.find(item => item.includes(hostname)).length > 0) {
+      if (
+        knownHosts.find((item: string | string[]) => item.includes(hostname))
+          .length > 0
+      ) {
         callback(0);
       } else {
         callback(-2);
@@ -522,6 +574,7 @@ ipcMain.on('knownCertificateHosts', (e, { knownHosts, serviceId }) => {
 ipcMain.on('feature-basic-auth-cancel', () => {
   debug('Cancel basic auth');
 
+  // @ts-expect-error Expected 0 arguments, but got 2.
   authCallback(null);
   authCallback = noop;
 });
@@ -530,7 +583,7 @@ ipcMain.on('feature-basic-auth-cancel', () => {
 
 ipcMain.on('find-in-page', (e, text, options) => {
   const { sender: webContents } = e;
-  if (webContents !== mainWindow.webContents && typeof text === 'string') {
+  if (webContents !== mainWindow?.webContents && typeof text === 'string') {
     const sanitizedOptions = {};
     for (const option of ['forward', 'findNext', 'matchCase']) {
       if (option in options) {
@@ -547,7 +600,7 @@ ipcMain.on('find-in-page', (e, text, options) => {
 
 ipcMain.on('stop-find-in-page', (e, action) => {
   const { sender: webContents } = e;
-  if (webContents !== mainWindow.webContents) {
+  if (webContents !== mainWindow?.webContents) {
     const validActions = [
       'clearSelection',
       'keepSelection',
@@ -560,7 +613,7 @@ ipcMain.on('stop-find-in-page', (e, action) => {
   e.returnValue = null;
 });
 
-ipcMain.on('set-spellchecker-locales', (e, { locale, serviceId }) => {
+ipcMain.on('set-spellchecker-locales', (_e, { locale, serviceId }) => {
   if (serviceId === undefined) {
     return;
   }
@@ -578,7 +631,12 @@ ipcMain.on('set-spellchecker-locales', (e, { locale, serviceId }) => {
 app.on('window-all-closed', () => {
   // On OS X it is common for applications and their menu bar
   // to stay active until the user quits explicitly with Cmd + Q
-  if (retrieveSettingValue('runInBackground')) {
+  if (
+    retrieveSettingValue(
+      'runInBackground',
+      DEFAULT_APP_SETTINGS.runInBackground,
+    )
+  ) {
     debug('Window: all windows closed, quit app');
     app.quit();
   } else {
@@ -589,8 +647,10 @@ app.on('window-all-closed', () => {
 app.on('before-quit', event => {
   const yesButtonIndex = 0;
   let selection = yesButtonIndex;
-  if (retrieveSettingValue('confirmOnQuit')) {
-    selection = dialog.showMessageBoxSync(app.mainWindow, {
+  if (
+    retrieveSettingValue('confirmOnQuit', DEFAULT_APP_SETTINGS.confirmOnQuit)
+  ) {
+    selection = dialog.showMessageBoxSync(mainWindow!, {
       type: 'question',
       message: 'Quit',
       detail: 'Do you really want to quit Ferdi?',
@@ -610,12 +670,12 @@ app.on('activate', () => {
   if (mainWindow === null) {
     createWindow();
   } else {
-    mainWindow.show();
+    mainWindow?.show();
   }
 });
 
-app.on('web-contents-created', (createdEvent, contents) => {
-  contents.on('new-window', (event, url, frameNme, disposition) => {
+app.on('web-contents-created', (_createdEvent, contents) => {
+  contents.on('new-window', (event, _url, _frameNme, disposition) => {
     if (disposition === 'foreground-tab') event.preventDefault();
   });
 });
@@ -625,7 +685,7 @@ app.on('will-finish-launching', () => {
   app.on('open-url', (event, url) => {
     event.preventDefault();
 
-    onDidLoad(window => {
+    onDidLoad((window: BrowserWindow) => {
       debug('open-url event', url);
       handleDeepLink(window, url);
     });
diff --git a/src/internal-server/app/Controllers/Http/RecipeController.js b/src/internal-server/app/Controllers/Http/RecipeController.js
index d44839db1..1b0ac7035 100644
--- a/src/internal-server/app/Controllers/Http/RecipeController.js
+++ b/src/internal-server/app/Controllers/Http/RecipeController.js
@@ -56,7 +56,6 @@ class RecipeController {
       let remoteResults = [];
       // eslint-disable-next-line eqeqeq
       if (Env.get('CONNECT_WITH_FRANZ') == 'true') {
-        // eslint-disable-line eqeqeq
         remoteResults = JSON.parse(
           await (
             await fetch(
@@ -112,7 +111,6 @@ class RecipeController {
     }
     // eslint-disable-next-line eqeqeq
     if (Env.get('CONNECT_WITH_FRANZ') == 'true') {
-      // eslint-disable-line eqeqeq
       return response.redirect(`${RECIPES_URL}/download/${service}`);
     }
     return response.status(400).send({
diff --git a/src/internal-server/app/Controllers/Http/ServiceController.js b/src/internal-server/app/Controllers/Http/ServiceController.js
index 133473b68..dedb5a12b 100644
--- a/src/internal-server/app/Controllers/Http/ServiceController.js
+++ b/src/internal-server/app/Controllers/Http/ServiceController.js
@@ -36,7 +36,7 @@ class ServiceController {
     } while (
       (await Service.query().where('serviceId', serviceId).fetch()).rows
         .length > 0
-    ); // eslint-disable-line no-await-in-loop
+    );
 
     await Service.create({
       serviceId,
diff --git a/src/internal-server/app/Controllers/Http/UserController.js b/src/internal-server/app/Controllers/Http/UserController.js
index 25b5277bd..2ecc8241c 100644
--- a/src/internal-server/app/Controllers/Http/UserController.js
+++ b/src/internal-server/app/Controllers/Http/UserController.js
@@ -171,7 +171,6 @@ class UserController {
         return response.status(401).send(errorMessage);
       }
 
-      // eslint-disable-next-line prefer-destructuring
       token = content.token;
     } catch (error) {
       return response.status(401).send({
@@ -300,7 +299,7 @@ class UserController {
     } while (
       (await Workspace.query().where('workspaceId', newWorkspaceId).fetch())
         .rows.length > 0
-    ); // eslint-disable-line no-await-in-loop
+    );
 
     if (
       workspace.services &&
@@ -340,7 +339,7 @@ class UserController {
     } while (
       (await Service.query().where('serviceId', newServiceId).fetch()).rows
         .length > 0
-    ); // eslint-disable-line no-await-in-loop
+    );
 
     // store the old serviceId as the key for future lookup
     serviceIdTranslation[service.serviceId] = newServiceId;
diff --git a/src/internal-server/app/Controllers/Http/WorkspaceController.js b/src/internal-server/app/Controllers/Http/WorkspaceController.js
index 9d461135e..528721f13 100644
--- a/src/internal-server/app/Controllers/Http/WorkspaceController.js
+++ b/src/internal-server/app/Controllers/Http/WorkspaceController.js
@@ -27,7 +27,7 @@ class WorkspaceController {
     } while (
       (await Workspace.query().where('workspaceId', workspaceId).fetch()).rows
         .length > 0
-    ); // eslint-disable-line no-await-in-loop
+    );
 
     const order = (await Workspace.all()).rows.length;
     const { name } = data;
diff --git a/src/internal-server/config/app.js b/src/internal-server/config/app.js
index 0a1644932..379190734 100644
--- a/src/internal-server/config/app.js
+++ b/src/internal-server/config/app.js
@@ -2,7 +2,6 @@
 const Env = use('Env');
 
 module.exports = {
-
   /*
   |--------------------------------------------------------------------------
   | Application Name
diff --git a/src/internal-server/config/bodyParser.js b/src/internal-server/config/bodyParser.js
index 8a5406f9e..ef2eedf40 100644
--- a/src/internal-server/config/bodyParser.js
+++ b/src/internal-server/config/bodyParser.js
@@ -58,9 +58,7 @@ module.exports = {
   |
   */
   raw: {
-    types: [
-      'text/*',
-    ],
+    types: ['text/*'],
   },
 
   /*
@@ -72,9 +70,7 @@ module.exports = {
   |
   */
   form: {
-    types: [
-      'application/x-www-form-urlencoded',
-    ],
+    types: ['application/x-www-form-urlencoded'],
   },
 
   /*
@@ -86,9 +82,7 @@ module.exports = {
   |
   */
   files: {
-    types: [
-      'multipart/form-data',
-    ],
+    types: ['multipart/form-data'],
 
     /*
     |--------------------------------------------------------------------------
diff --git a/src/internal-server/database/migrations/1503250034279_user.js b/src/internal-server/database/migrations/1503250034279_user.js
index 80b49020a..d502e4fa0 100644
--- a/src/internal-server/database/migrations/1503250034279_user.js
+++ b/src/internal-server/database/migrations/1503250034279_user.js
@@ -3,7 +3,7 @@ const Schema = use('Schema');
 
 class UserSchema extends Schema {
   up() {
-    this.create('users', (table) => {
+    this.create('users', table => {
       table.increments();
       table.json('settings');
       table.timestamps();
diff --git a/src/internal-server/database/migrations/1566385379883_service_schema.js b/src/internal-server/database/migrations/1566385379883_service_schema.js
index d887ef193..d8087248f 100644
--- a/src/internal-server/database/migrations/1566385379883_service_schema.js
+++ b/src/internal-server/database/migrations/1566385379883_service_schema.js
@@ -3,7 +3,7 @@ const Schema = use('Schema');
 
 class ServiceSchema extends Schema {
   up() {
-    this.create('services', (table) => {
+    this.create('services', table => {
       table.increments();
       table.string('serviceId', 80).notNullable();
       table.string('name', 80).notNullable();
diff --git a/src/internal-server/database/migrations/1566554231482_recipe_schema.js b/src/internal-server/database/migrations/1566554231482_recipe_schema.js
index 514d57600..41bebdacb 100644
--- a/src/internal-server/database/migrations/1566554231482_recipe_schema.js
+++ b/src/internal-server/database/migrations/1566554231482_recipe_schema.js
@@ -3,7 +3,7 @@ const Schema = use('Schema');
 
 class RecipeSchema extends Schema {
   up() {
-    this.create('recipes', (table) => {
+    this.create('recipes', table => {
       table.increments();
       table.string('name', 80).notNullable();
       table.string('recipeId', 254).notNullable().unique();
diff --git a/src/internal-server/database/migrations/1566554359294_workspace_schema.js b/src/internal-server/database/migrations/1566554359294_workspace_schema.js
index 421a406b5..3e5385f45 100644
--- a/src/internal-server/database/migrations/1566554359294_workspace_schema.js
+++ b/src/internal-server/database/migrations/1566554359294_workspace_schema.js
@@ -3,7 +3,7 @@ const Schema = use('Schema');
 
 class WorkspaceSchema extends Schema {
   up() {
-    this.create('workspaces', (table) => {
+    this.create('workspaces', table => {
       table.increments();
       table.string('workspaceId', 80).notNullable().unique();
       table.string('name', 80).notNullable();
diff --git a/src/internal-server/start.ts b/src/internal-server/start.ts
index 392f7cf41..62311b21e 100644
--- a/src/internal-server/start.ts
+++ b/src/internal-server/start.ts
@@ -17,27 +17,27 @@
 
 import fold from '@adonisjs/fold';
 import { Ignitor } from '@adonisjs/ignitor';
-import fs from 'fs-extra';
-import path from 'path';
+import { existsSync, readFile, statSync, chmodSync, writeFile } from 'fs-extra';
+import { join } from 'path';
 import { LOCAL_HOSTNAME } from '../config';
 import { isWindows } from '../environment';
 
-process.env.ENV_PATH = path.join(__dirname, 'env.ini');
+process.env.ENV_PATH = join(__dirname, 'env.ini');
 
 export const server = async (userPath: string, port: number) => {
-  const dbPath = path.join(userPath, 'server.sqlite');
-  const dbTemplatePath = path.join(__dirname, 'database', 'template.sqlite');
+  const dbPath = join(userPath, 'server.sqlite');
+  const dbTemplatePath = join(__dirname, 'database', 'template.sqlite');
 
-  if (!fs.existsSync(dbPath)) {
+  if (!existsSync(dbPath)) {
     // Manually copy file
     // We can't use copyFile here as it will cause the file to be readonly on Windows
-    const dbTemplate = await fs.readFile(dbTemplatePath);
-    await fs.writeFile(dbPath, dbTemplate);
+    const dbTemplate = await readFile(dbTemplatePath);
+    await writeFile(dbPath, dbTemplate);
 
     // Change permissions to ensure to file is not read-only
     if (isWindows) {
       // eslint-disable-next-line no-bitwise
-      fs.chmodSync(dbPath, fs.statSync(dbPath).mode | 146);
+      chmodSync(dbPath, statSync(dbPath).mode | 146);
     }
   }
 
diff --git a/src/internal-server/start/app.js b/src/internal-server/start/app.js
index 8b1a49f57..7ca544085 100644
--- a/src/internal-server/start/app.js
+++ b/src/internal-server/start/app.js
@@ -28,9 +28,7 @@ const providers = [
 | Providers for migrations, tests etc.
 |
 */
-const aceProviders = [
-  '@adonisjs/lucid/providers/MigrationsProvider',
-];
+const aceProviders = ['@adonisjs/lucid/providers/MigrationsProvider'];
 
 /*
 |--------------------------------------------------------------------------
@@ -57,5 +55,8 @@ const aliases = {};
 const commands = [];
 
 module.exports = {
-  providers, aceProviders, aliases, commands,
+  providers,
+  aceProviders,
+  aliases,
+  commands,
 };
diff --git a/src/internal-server/start/routes.js b/src/internal-server/start/routes.js
index db74479c9..50b9448cf 100644
--- a/src/internal-server/start/routes.js
+++ b/src/internal-server/start/routes.js
@@ -66,7 +66,6 @@ Route.group(() => {
   // Static responses
   Route.get('features/:mode?', 'StaticController.features');
   Route.get('services', 'StaticController.emptyArray');
-  Route.get('news', 'StaticController.emptyArray');
 })
   .prefix(API_VERSION)
   .middleware(OnlyAllowFerdi);
diff --git a/src/internal-server/test.ts b/src/internal-server/test.ts
index 437a2813b..46d1b1e4a 100644
--- a/src/internal-server/test.ts
+++ b/src/internal-server/test.ts
@@ -1,9 +1,9 @@
-import path from 'path';
-import fs from 'fs-extra';
+import { join } from 'path';
+import { ensureDirSync } from 'fs-extra';
 import { server } from './start';
 
-const dummyUserFolder = path.join(__dirname, 'user_data');
+const dummyUserFolder = join(__dirname, 'user_data');
 
-fs.ensureDirSync(dummyUserFolder);
+ensureDirSync(dummyUserFolder);
 
 server(dummyUserFolder, 45_568);
diff --git a/src/jsUtils.ts b/src/jsUtils.ts
index b1baad7c5..d7ea4eb40 100644
--- a/src/jsUtils.ts
+++ b/src/jsUtils.ts
@@ -1,3 +1,14 @@
-export const ifUndefinedString = (source: string | undefined | null, defaultValue: string): string => (source !== undefined && source !== null ? source : defaultValue);
-export const ifUndefinedBoolean = (source: boolean | undefined | null, defaultValue: boolean): boolean => Boolean(source !== undefined && source !== null ? source : defaultValue);
-export const ifUndefinedNumber = (source: number | undefined | null, defaultValue: number): number => Number(source !== undefined && source !== null ? source : defaultValue);
+export const ifUndefinedString = (
+  source: string | undefined | null,
+  defaultValue: string,
+): string => (source !== undefined && source !== null ? source : defaultValue);
+export const ifUndefinedBoolean = (
+  source: boolean | undefined | null,
+  defaultValue: boolean,
+): boolean =>
+  Boolean(source !== undefined && source !== null ? source : defaultValue);
+export const ifUndefinedNumber = (
+  source: number | undefined | null,
+  defaultValue: number,
+): number =>
+  Number(source !== undefined && source !== null ? source : defaultValue);
diff --git a/src/lib/Menu.js b/src/lib/Menu.js
index cd86f1669..b1cbaf992 100644
--- a/src/lib/Menu.js
+++ b/src/lib/Menu.js
@@ -20,7 +20,7 @@ import {
   addNewServiceShortcutKey,
   muteFerdiShortcutKey,
 } from '../environment';
-import { aboutAppDetails } from '../environment-remote';
+import { aboutAppDetails, ferdiVersion } from '../environment-remote';
 import { todosStore } from '../features/todos';
 import { todoActions } from '../features/todos/actions';
 import { workspaceActions } from '../features/workspaces/actions';
@@ -515,7 +515,7 @@ const _titleBarTemplateFactory = (intl, locked) => [
         label: intl.formatMessage(menuItems.changelog),
         click() {
           openExternalUrl(
-            `${GITHUB_FERDI_URL}/ferdi/blob/develop/CHANGELOG.md`,
+            `${GITHUB_FERDI_URL}/ferdi/releases/tag/v${ferdiVersion}`,
             true,
           );
         },
diff --git a/src/lib/Tray.js b/src/lib/Tray.js
index 7360611cd..e7afc3552 100644
--- a/src/lib/Tray.js
+++ b/src/lib/Tray.js
@@ -1,5 +1,11 @@
 import {
-  app, Menu, nativeImage, nativeTheme, systemPreferences, Tray, ipcMain,
+  app,
+  Menu,
+  nativeImage,
+  nativeTheme,
+  systemPreferences,
+  Tray,
+  ipcMain,
 } from 'electron';
 import { join } from 'path';
 import macosVersion from 'macos-version';
@@ -65,7 +71,9 @@ export default class TrayIcon {
 
     if (appSettings.type === 'app') {
       const { isAppMuted } = appSettings.data;
-      this.trayMenuTemplate[1].label = isAppMuted ? 'Enable Notifications && Audio' : 'Disable Notifications && Audio';
+      this.trayMenuTemplate[1].label = isAppMuted
+        ? 'Enable Notifications && Audio'
+        : 'Disable Notifications && Audio';
       this.trayMenu = Menu.buildFromTemplate(this.trayMenuTemplate);
       if (isLinux) {
         this.trayIcon.setContextMenu(this.trayMenu);
@@ -108,9 +116,12 @@ export default class TrayIcon {
     }
 
     if (isMac) {
-      this.themeChangeSubscriberId = systemPreferences.subscribeNotification('AppleInterfaceThemeChangedNotification', () => {
-        this._refreshIcon();
-      });
+      this.themeChangeSubscriberId = systemPreferences.subscribeNotification(
+        'AppleInterfaceThemeChangedNotification',
+        () => {
+          this._refreshIcon();
+        },
+      );
     }
   }
 
@@ -150,7 +161,8 @@ export default class TrayIcon {
   _getAssetFromIndicator(indicator) {
     if (indicator === '•') {
       return INDICATOR_TRAY_INDIRECT;
-    } if (indicator !== 0) {
+    }
+    if (indicator !== 0) {
       return INDICATOR_TRAY_UNREAD;
     }
     return INDICATOR_TRAY_PLAIN;
@@ -159,11 +171,16 @@ export default class TrayIcon {
   _refreshIcon() {
     if (!this.trayIcon) return;
 
-    this.trayIcon.setImage(this._getAsset('tray', this._getAssetFromIndicator(this.indicator)));
+    this.trayIcon.setImage(
+      this._getAsset('tray', this._getAssetFromIndicator(this.indicator)),
+    );
 
     if (isMac) {
       this.trayIcon.setPressedImage(
-        this._getAsset('tray', `${this._getAssetFromIndicator(this.indicator)}-active`),
+        this._getAsset(
+          'tray',
+          `${this._getAssetFromIndicator(this.indicator)}-active`,
+        ),
       );
     }
   }
@@ -171,12 +188,24 @@ export default class TrayIcon {
   _getAsset(type, asset) {
     let { platform } = process;
 
-    if (isMac && (nativeTheme.shouldUseDarkColors || macosVersion.isGreaterThanOrEqualTo('11'))) {
+    if (
+      isMac &&
+      (nativeTheme.shouldUseDarkColors ||
+        macosVersion.isGreaterThanOrEqualTo('11'))
+    ) {
       platform = `${platform}-dark`;
     }
 
-    return nativeImage.createFromPath(join(
-      __dirname, '..', 'assets', 'images', type, platform, `${asset}.${FILE_EXTENSION}`,
-    ));
+    return nativeImage.createFromPath(
+      join(
+        __dirname,
+        '..',
+        'assets',
+        'images',
+        type,
+        platform,
+        `${asset}.${FILE_EXTENSION}`,
+      ),
+    );
   }
 }
diff --git a/src/models/News.ts b/src/models/News.ts
deleted file mode 100644
index 4fc21f590..000000000
--- a/src/models/News.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { ifUndefinedString, ifUndefinedBoolean } from '../jsUtils';
-
-interface INews {
-  id: string;
-  message: string;
-  type: string;
-  sticky: boolean | undefined;
-}
-
-export default class News {
-  id: string = '';
-
-  message: string = '';
-
-  type: string = 'primary';
-
-  sticky: boolean = false;
-
-  constructor(data: INews) {
-    if (!data) {
-      throw new Error('News config not valid');
-    }
-
-    if (!data.id) {
-      throw new Error('News requires Id');
-    }
-
-    this.id = data.id;
-    this.message = ifUndefinedString(data.message, this.message);
-    this.type = ifUndefinedString(data.type, this.type);
-    this.sticky = ifUndefinedBoolean(data.sticky, this.sticky);
-  }
-}
diff --git a/src/models/Recipe.ts b/src/models/Recipe.ts
index 859c75df0..959b43fd9 100644
--- a/src/models/Recipe.ts
+++ b/src/models/Recipe.ts
@@ -1,10 +1,8 @@
 import semver from 'semver';
 import { pathExistsSync } from 'fs-extra';
 import { join } from 'path';
-import {
-  ifUndefinedString,
-  ifUndefinedBoolean,
-} from '../jsUtils';
+import { DEFAULT_SERVICE_SETTINGS } from '../config';
+import { ifUndefinedString, ifUndefinedBoolean } from '../jsUtils';
 
 interface IRecipe {
   id: string;
@@ -30,20 +28,6 @@ interface IRecipe {
   };
 }
 
-// Note: Do NOT change these default values. If they change, then the corresponding changes in the recipes needs to be done
-// TODO: Need to reconcile other properties
-const DEFAULT_RECIPE_SETTINGS = {
-  hasDirectMessages: true,
-  hasIndirectMessages: false,
-  hasNotificationSound: false,
-  hasTeamId: false,
-  hasCustomUrl: false,
-  hasHostedOption: false,
-  allowFavoritesDelineationInUnreadCount: false,
-  disablewebsecurity: false,
-  autoHibernate: false,
-};
-
 export default class Recipe {
   id: string = '';
 
@@ -57,17 +41,17 @@ export default class Recipe {
 
   serviceURL: string = '';
 
-  hasDirectMessages: boolean = DEFAULT_RECIPE_SETTINGS.hasDirectMessages;
+  hasDirectMessages: boolean = DEFAULT_SERVICE_SETTINGS.hasDirectMessages;
 
-  hasIndirectMessages: boolean = DEFAULT_RECIPE_SETTINGS.hasIndirectMessages;
+  hasIndirectMessages: boolean = DEFAULT_SERVICE_SETTINGS.hasIndirectMessages;
 
-  hasNotificationSound: boolean = DEFAULT_RECIPE_SETTINGS.hasNotificationSound;
+  hasNotificationSound: boolean = DEFAULT_SERVICE_SETTINGS.hasNotificationSound;
 
-  hasTeamId: boolean = DEFAULT_RECIPE_SETTINGS.hasTeamId;
+  hasTeamId: boolean = DEFAULT_SERVICE_SETTINGS.hasTeamId;
 
-  hasCustomUrl: boolean = DEFAULT_RECIPE_SETTINGS.hasCustomUrl;
+  hasCustomUrl: boolean = DEFAULT_SERVICE_SETTINGS.hasCustomUrl;
 
-  hasHostedOption: boolean = DEFAULT_RECIPE_SETTINGS.hasHostedOption;
+  hasHostedOption: boolean = DEFAULT_SERVICE_SETTINGS.hasHostedOption;
 
   urlInputPrefix: string = '';
 
@@ -75,12 +59,13 @@ export default class Recipe {
 
   message: string = '';
 
-  allowFavoritesDelineationInUnreadCount: boolean = DEFAULT_RECIPE_SETTINGS.allowFavoritesDelineationInUnreadCount;
+  allowFavoritesDelineationInUnreadCount: boolean =
+    DEFAULT_SERVICE_SETTINGS.allowFavoritesDelineationInUnreadCount;
 
-  disablewebsecurity: boolean = DEFAULT_RECIPE_SETTINGS.disablewebsecurity;
+  disablewebsecurity: boolean = DEFAULT_SERVICE_SETTINGS.disablewebsecurity;
 
   // TODO: Is this even used?
-  autoHibernate: boolean = DEFAULT_RECIPE_SETTINGS.autoHibernate;
+  autoHibernate: boolean = DEFAULT_SERVICE_SETTINGS.autoHibernate;
 
   path: string = '';
 
@@ -98,7 +83,9 @@ export default class Recipe {
     }
 
     if (!semver.valid(data.version)) {
-      throw new Error(`Version ${data.version} of recipe '${data.name}' is not a valid semver version`);
+      throw new Error(
+        `Version ${data.version} of recipe '${data.name}' is not a valid semver version`,
+      );
     }
 
     // from the recipe
@@ -106,19 +93,52 @@ export default class Recipe {
     this.name = ifUndefinedString(data.name, this.name);
     this.version = ifUndefinedString(data.version, this.version);
     this.aliases = data.aliases || this.aliases;
-    this.serviceURL = ifUndefinedString(data.config.serviceURL, this.serviceURL);
-    this.hasDirectMessages = ifUndefinedBoolean(data.config.hasDirectMessages, this.hasDirectMessages);
-    this.hasIndirectMessages = ifUndefinedBoolean(data.config.hasIndirectMessages, this.hasIndirectMessages);
-    this.hasNotificationSound = ifUndefinedBoolean(data.config.hasNotificationSound, this.hasNotificationSound);
+    this.serviceURL = ifUndefinedString(
+      data.config.serviceURL,
+      this.serviceURL,
+    );
+    this.hasDirectMessages = ifUndefinedBoolean(
+      data.config.hasDirectMessages,
+      this.hasDirectMessages,
+    );
+    this.hasIndirectMessages = ifUndefinedBoolean(
+      data.config.hasIndirectMessages,
+      this.hasIndirectMessages,
+    );
+    this.hasNotificationSound = ifUndefinedBoolean(
+      data.config.hasNotificationSound,
+      this.hasNotificationSound,
+    );
     this.hasTeamId = ifUndefinedBoolean(data.config.hasTeamId, this.hasTeamId);
-    this.hasCustomUrl = ifUndefinedBoolean(data.config.hasCustomUrl, this.hasCustomUrl);
-    this.hasHostedOption = ifUndefinedBoolean(data.config.hasHostedOption, this.hasHostedOption);
-    this.urlInputPrefix = ifUndefinedString(data.config.urlInputPrefix, this.urlInputPrefix);
-    this.urlInputSuffix = ifUndefinedString(data.config.urlInputSuffix, this.urlInputSuffix);
-    this.disablewebsecurity = ifUndefinedBoolean(data.config.disablewebsecurity, this.disablewebsecurity);
-    this.autoHibernate = ifUndefinedBoolean(data.config.autoHibernate, this.autoHibernate);
+    this.hasCustomUrl = ifUndefinedBoolean(
+      data.config.hasCustomUrl,
+      this.hasCustomUrl,
+    );
+    this.hasHostedOption = ifUndefinedBoolean(
+      data.config.hasHostedOption,
+      this.hasHostedOption,
+    );
+    this.urlInputPrefix = ifUndefinedString(
+      data.config.urlInputPrefix,
+      this.urlInputPrefix,
+    );
+    this.urlInputSuffix = ifUndefinedString(
+      data.config.urlInputSuffix,
+      this.urlInputSuffix,
+    );
+    this.disablewebsecurity = ifUndefinedBoolean(
+      data.config.disablewebsecurity,
+      this.disablewebsecurity,
+    );
+    this.autoHibernate = ifUndefinedBoolean(
+      data.config.autoHibernate,
+      this.autoHibernate,
+    );
     this.message = ifUndefinedString(data.config.message, this.message);
-    this.allowFavoritesDelineationInUnreadCount = ifUndefinedBoolean(data.config.allowFavoritesDelineationInUnreadCount, this.allowFavoritesDelineationInUnreadCount);
+    this.allowFavoritesDelineationInUnreadCount = ifUndefinedBoolean(
+      data.config.allowFavoritesDelineationInUnreadCount,
+      this.allowFavoritesDelineationInUnreadCount,
+    );
 
     // computed
     this.path = data.path;
diff --git a/src/models/Service.js b/src/models/Service.js
index 75dfde027..12109fb0a 100644
--- a/src/models/Service.js
+++ b/src/models/Service.js
@@ -81,6 +81,8 @@ export default class Service {
 
   @observable isHibernationEnabled = false;
 
+  @observable isWakeUpEnabled = true;
+
   @observable isHibernationRequested = false;
 
   @observable onlyShowFavoritesInUnreadCount = false;
@@ -163,6 +165,10 @@ export default class Service {
       data.isHibernationEnabled,
       this.isHibernationEnabled,
     );
+    this.isWakeUpEnabled = ifUndefinedBoolean(
+      data.isWakeUpEnabled,
+      this.isWakeUpEnabled,
+    );
 
     // Check if "Hibernate on Startup" is enabled and hibernate all services except active one
     const { hibernateOnStartup } = window.ferdi.stores.settings.app;
diff --git a/src/models/User.ts b/src/models/User.ts
index a04d46d3c..571f1f847 100644
--- a/src/models/User.ts
+++ b/src/models/User.ts
@@ -59,7 +59,8 @@ export default class User {
     this.beta = data.beta || this.beta;
     this.locale = data.locale || this.locale;
 
-    this.isSubscriptionOwner = data.isSubscriptionOwner || this.isSubscriptionOwner;
+    this.isSubscriptionOwner =
+      data.isSubscriptionOwner || this.isSubscriptionOwner;
 
     this.team = data.team || this.team;
   }
diff --git a/src/models/UserAgent.js b/src/models/UserAgent.js
index 33bf9d072..02ff97db1 100644
--- a/src/models/UserAgent.js
+++ b/src/models/UserAgent.js
@@ -63,8 +63,12 @@ export default class UserAgent {
   }
 
   @computed get userAgent() {
-    return this.serviceUserAgentPref
-      || (this.chromelessUserAgent ? this.userAgentWithoutChromeVersion : this.defaultUserAgent);
+    return (
+      this.serviceUserAgentPref ||
+      (this.chromelessUserAgent
+        ? this.userAgentWithoutChromeVersion
+        : this.defaultUserAgent)
+    );
   }
 
   @action setWebviewReference(webview) {
diff --git a/src/routes.js b/src/routes.js
index 502ea86f5..9891e5d43 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 import { Router, Route, IndexRedirect } from 'react-router';
diff --git a/src/stores.types.ts b/src/stores.types.ts
new file mode 100644
index 000000000..e5978a392
--- /dev/null
+++ b/src/stores.types.ts
@@ -0,0 +1,367 @@
+export interface FerdiStores {
+  app: AppStore;
+  communityRecipes: CommunityRecipesStore;
+  features: FeaturesStore;
+  globalError: GlobalErrorStore;
+  recipePreviews: RecipePreviewsStore;
+  recipes: RecipeStore;
+  requests: RequestsStore;
+  router: RouterStore;
+  services: ServicesStore;
+  settings: SettingsStore;
+  todos: TodosStore;
+  ui: UIStore;
+  user: UserStore;
+  workspaces: WorkspacesStore;
+}
+
+interface Stores {
+  app: AppStore;
+  communityRecipes: CommunityRecipesStore;
+  features: FeaturesStore;
+  globalError: GlobalErrorStore;
+  recipePreviews: RecipePreviewsStore;
+  recipes: RecipeStore;
+  requests: RequestsStore;
+  router: RouterStore;
+  services: ServicesStore;
+  settings: SettingsStore;
+  todos: TodosStore;
+  ui: UIStore;
+  user: UserStore;
+  workspaces: WorkspacesStore;
+}
+
+interface Actions {
+  app: AppStore;
+  recipePreviews: RecipePreviewsStore;
+  recipes: RecipeStore;
+  requests: RequestsStore;
+  services: ServicesStore;
+  settings: SettingsStore;
+  todos: TodosStore;
+  ui: UIStore;
+  user: UserStore;
+  workspaces: WorkspacesStore;
+}
+
+interface Api {
+  app: AppStore;
+  features: FeaturesStore;
+  local: {};
+  recipePreviews: RecipePreviewsStore;
+  recipes: RecipeStore;
+  services: ServicesStore;
+  user: UserStore;
+}
+
+interface AppStore {
+  actions: Actions;
+  accentColor: string;
+  api: Api;
+  authRequestFailed: () => void;
+  autoLaunchOnStart: () => void;
+  clearAppCacheRequest: () => void;
+  dictionaries: [];
+  fetchDataInterval: 4;
+  getAppCacheSizeRequest: () => void;
+  healthCheckRequest: () => void;
+  isClearingAllCache: () => void;
+  isFocused: () => void;
+  isFullScreen: () => void;
+  isOnline: () => void;
+  isSystemDarkModeEnabled: () => void;
+  isSystemMuteOverridden: () => void;
+  locale: () => void;
+  stores: Stores;
+  timeOfflineStart: () => void;
+  timeSuspensionStart: () => void;
+  updateStatus: () => void;
+  updateStatusTypes: {
+    CHECKING: 'CHECKING';
+    AVAILABLE: 'AVAILABLE';
+    NOT_AVAILABLE: 'NOT_AVAILABLE';
+    DOWNLOADED: 'DOWNLOADED';
+    FAILED: 'FAILED';
+  };
+  _reactions: any[];
+  _status: () => void;
+  actionStatus: () => void;
+  cacheSize: () => void;
+  debugInfo: () => void;
+}
+
+interface CommunityRecipesStore {
+  actions: Actions;
+  stores: Stores;
+  _actions: [];
+  _reactions: [];
+  communityRecipes: () => void;
+}
+
+interface FeaturesStore {
+  actions: Actions;
+  api: Api;
+  defaultFeaturesRequest: () => void;
+  features: () => void;
+  featuresRequest: () => void;
+  stores: Stores;
+  _reactions: any[];
+  _status: () => void;
+  _updateFeatures: () => void;
+  actionStatus: () => void;
+  anonymousFeatures: () => void;
+}
+
+interface GlobalErrorStore {
+  actions: Actions;
+  api: Api;
+  error: () => void;
+  messages: () => void;
+  response: () => void;
+  stores: Stores;
+  _handleRequests: () => void;
+  _reactions: [];
+  _status: () => void;
+  actionStatus: () => void;
+}
+
+interface RecipePreviewsStore {
+  actions: Actions;
+  allRecipePreviewsRequest: () => void;
+  api: Api;
+  searchRecipePreviewsRequest: () => void;
+  stores: Stores;
+  _reactions: [];
+  _status: () => void;
+  actionStatus: () => void;
+  all: () => void;
+  dev: () => void;
+  searchResults: () => void;
+}
+
+interface RecipeStore {
+  actions: Actions;
+  allRecipesRequest: () => void;
+  api: Api;
+  getRecipeUpdatesRequest: () => void;
+  installRecipeRequest: () => void;
+  stores: Stores;
+  _reactions: any[];
+  _status: () => void;
+  actionStatus: () => void;
+  active: () => void;
+  all: () => void;
+  recipeIdForServices: () => void;
+}
+
+interface RequestsStore {
+  actions: Actions;
+  api: Api;
+  localServerPort: () => void;
+  retries: number;
+  retryDelay: number;
+  servicesRequest: () => void;
+  showRequiredRequestsError: () => void;
+  stores: Stores;
+  userInfoRequest: () => void;
+  _reactions: any[];
+  _status: () => void;
+  actionStatus: () => void;
+  areRequiredRequestsLoading: () => void;
+  areRequiredRequestsSuccessful: () => void;
+}
+
+interface RouterStore {
+  go: () => void;
+  goBack: () => void;
+  goForward: () => void;
+  history: () => void;
+  location: () => void;
+  push: () => void;
+  replace: () => void;
+}
+
+export interface ServicesStore {
+  actions: Actions;
+  api: Api;
+  clearCacheRequest: () => void;
+  createServiceRequest: () => void;
+  deleteServiceRequest: () => void;
+  filterNeedle: () => void;
+  lastUsedServices: () => void;
+  reorderServicesRequest: () => void;
+  serviceMaintenanceTick: () => void;
+  stores: Stores;
+  updateServiceRequest: () => void;
+  _reactions: any[];
+  _status: () => void;
+  actionStatus: () => void;
+  active: () => void;
+  activeSettings: () => void;
+  all: () => void;
+  allDisplayed: () => void;
+  allDisplayedUnordered: () => void;
+  enabled: () => void;
+  filtered: () => void;
+  isTodosServiceActive: () => void;
+  isTodosServiceAdded: () => void;
+}
+
+interface SettingsStore {
+  actions: Actions;
+  api: Api;
+  fileSystemSettingsTypes: any[];
+  startup: boolean;
+  stores: Stores;
+  updateAppSettingsRequest: () => void;
+  _fileSystemSettingsCache: () => void;
+  _reactions: [];
+  _status: () => void;
+  actionStatus: () => void;
+  all: () => void;
+  app: AppStore;
+  migration: () => void;
+  proxy: () => void;
+  service: ServicesStore;
+  stats: () => void;
+}
+
+interface TodosStore {
+  actions: Actions;
+  api: Api;
+  isFeatureActive: () => void;
+  isFeatureEnabled: () => void;
+  isInitialized: true;
+  stores: Stores;
+  userAgentModel: () => void;
+  webview: () => void;
+  _actions: any[];
+  _allReactions: any[];
+  _firstLaunchReaction: () => void;
+  _goToService: () => void;
+  _handleNewWindowEvent: () => void;
+  _onTodosClientInitialized: () => void;
+  _openDevTools: () => void;
+  _reactions: any[];
+  _reload: () => void;
+  _routeCheckReaction: () => void;
+  _setFeatureEnabledReaction: () => void;
+  _updateSettings: () => void;
+  _updateTodosConfig: () => void;
+  isFeatureEnabledByUser: () => void;
+  isTodoUrlValid: () => void;
+  isTodosPanelForceHidden: () => void;
+  isTodosPanelVisible: () => void;
+  isUsingPredefinedTodoServer: () => void;
+  settings: () => void;
+  todoRecipeId: () => void;
+  todoUrl: () => void;
+  userAgent: () => void;
+  width: () => void;
+  _handleClientMessage: () => void;
+  _handleHostMessage: () => void;
+  _resize: () => void;
+  _setTodosWebview: () => void;
+  _toggleTodosFeatureVisibility: () => void;
+  _toggleTodosPanel: () => void;
+}
+
+interface UIStore {
+  actions: Actions;
+  api: Api;
+  isOsDarkThemeActive: () => void;
+  showServicesUpdatedInfoBar: () => void;
+  stores: Stores;
+  _reactions: [];
+  _status: () => void;
+  actionStatus: () => void;
+  isDarkThemeActive: () => void;
+  isSplitModeActive: () => void;
+  showMessageBadgesEvenWhenMuted: () => void;
+  theme: () => void;
+}
+
+interface UserStore {
+  BASE_ROUTE: '/auth';
+  CHANGE_SERVER_ROUTE: '/auth/server';
+  IMPORT_ROUTE: '/auth/signup/import';
+  INVITE_ROUTE: '/auth/signup/invite';
+  LOGIN_ROUTE: '/auth/login';
+  LOGOUT_ROUTE: '/auth/logout';
+  PASSWORD_ROUTE: '/auth/password';
+  SETUP_ROUTE: '/auth/signup/setup';
+  SIGNUP_ROUTE: '/auth/signup';
+  WELCOME_ROUTE: '/auth/welcome';
+  accountType: () => void;
+  actionStatus: () => void;
+  actions: Actions;
+  api: Api;
+  authToken: () => void;
+  deleteAccountRequest: () => void;
+  fetchUserInfoInterval: null;
+  getLegacyServicesRequest: () => void;
+  getUserInfoRequest: () => void;
+  hasCompletedSignup: () => void;
+  id: () => void;
+  inviteRequest: () => void;
+  isImportLegacyServicesCompleted: () => void;
+  isImportLegacyServicesExecuting: () => void;
+  isLoggingOut: () => void;
+  loginRequest: () => void;
+  logoutReason: () => void;
+  logoutReasonTypes: { SERVER: 'SERVER' };
+  passwordRequest: () => void;
+  signupRequest: () => void;
+  stores: Stores;
+  updateUserInfoRequest: () => void;
+  userData: () => void;
+  _reactions: any[];
+  _requireAuthenticatedUser: () => void;
+  _status: () => void;
+  changeServerRoute: () => void;
+  data: () => void;
+  importRoute: () => void;
+  inviteRoute: () => void;
+  isLoggedIn: () => void;
+  isTokenExpired: () => void;
+  legacyServices: () => void;
+  loginRoute: () => void;
+  logoutRoute: () => void;
+  passwordRoute: () => void;
+  setupRoute: () => void;
+  signupRoute: () => void;
+  team: () => void;
+}
+
+export interface WorkspacesStore {
+  activeWorkspace: () => void;
+  delete: ({ workspace }) => void;
+  update: ({ workspace }) => void;
+  create: ({ workspace }) => void;
+  edit: ({ workspace }) => void;
+  saving: boolean;
+  filterServicesByActiveWorkspace: () => void;
+  isFeatureActive: () => void;
+  isFeatureEnabled: () => void;
+  isSettingsRouteActive: () => void;
+  isSwitchingWorkspace: () => void;
+  isWorkspaceDrawerOpen: () => void;
+  nextWorkspace: () => void;
+  stores: Stores;
+  workspaceBeingEdited: () => void;
+  _actions: any[];
+  _activateLastUsedWorkspaceReaction: () => void;
+  _allActions: any[];
+  _allReactions: any[];
+  _cleanupInvalidServiceReferences: () => void;
+  _getWorkspaceById: () => void;
+  _openDrawerWithSettingsReaction: () => void;
+  _reactions: any[];
+  _setActiveServiceOnWorkspaceSwitchReaction: () => void;
+  _setFeatureEnabledReaction: () => void;
+  _setWorkspaceBeingEditedReaction: () => void;
+  _toggleKeepAllWorkspacesLoadedSetting: () => void;
+  _updateSettings: () => void;
+  _wasDrawerOpenBeforeSettingsRoute: null;
+}
diff --git a/src/stores/AppStore.js b/src/stores/AppStore.js
index 3d9d2b551..81cef3775 100644
--- a/src/stores/AppStore.js
+++ b/src/stores/AppStore.js
@@ -17,16 +17,8 @@ import { readJsonSync } from 'fs-extra';
 import Store from './lib/Store';
 import Request from './lib/Request';
 import { CHECK_INTERVAL, DEFAULT_APP_SETTINGS } from '../config';
-import {
-  isMac,
-  electronVersion,
-  osRelease,
-} from '../environment';
-import {
-  ferdiVersion,
-  userDataPath,
-  ferdiLocale,
-} from '../environment-remote';
+import { isMac, electronVersion, osRelease } from '../environment';
+import { ferdiVersion, userDataPath, ferdiLocale } from '../environment-remote';
 import locales from '../i18n/translations';
 import { getLocale } from '../helpers/i18n-helpers';
 
@@ -41,8 +33,6 @@ const debug = require('debug')('Ferdi:AppStore');
 
 const mainWindow = getCurrentWindow();
 
-const defaultLocale = DEFAULT_APP_SETTINGS.locale;
-
 const executablePath = isMac ? remoteProcess.execPath : process.execPath;
 const autoLauncher = new AutoLaunch({
   name: 'Ferdi',
@@ -80,9 +70,9 @@ export default class AppStore extends Store {
 
   @observable timeOfflineStart;
 
-  @observable updateStatus = null;
+  @observable updateStatus = '';
 
-  @observable locale = defaultLocale;
+  @observable locale = ferdiLocale;
 
   @observable isSystemMuteOverridden = false;
 
@@ -163,9 +153,6 @@ export default class AppStore extends Store {
       this.stores.features.featuresRequest.invalidate({
         immediately: true,
       });
-      this.stores.news.latestNewsRequest.invalidate({
-        immediately: true,
-      });
     }, ms('60m'));
 
     // Check for updates once every 4 hours
@@ -408,7 +395,7 @@ export default class AppStore extends Store {
   }
 
   @action _resetUpdateStatus() {
-    this.updateStatus = null;
+    this.updateStatus = '';
   }
 
   @action _healthCheck() {
@@ -480,23 +467,13 @@ export default class AppStore extends Store {
   }
 
   _setLocale() {
-    let locale;
-    if (this.stores.user.isLoggedIn) {
-      locale = this.stores.user.data.locale;
-    }
-
-    if (
-      locale &&
-      Object.prototype.hasOwnProperty.call(locales, locale) &&
-      locale !== this.locale
-    ) {
-      this.locale = locale;
-    } else if (!locale) {
+    if (this.stores.user.isLoggedIn && this.stores.user.data.locale) {
+      this.locale = this.stores.user.data.locale;
+    } else if (!this.locale) {
       this.locale = this._getDefaultLocale();
     }
 
     moment.locale(this.locale);
-
     debug(`Set locale to "${this.locale}"`);
   }
 
@@ -504,7 +481,6 @@ export default class AppStore extends Store {
     return getLocale({
       locale: ferdiLocale,
       locales,
-      defaultLocale,
       fallbackLocale: DEFAULT_APP_SETTINGS.fallbackLocale,
     });
   }
@@ -523,10 +499,12 @@ export default class AppStore extends Store {
   _handleFullScreen() {
     const body = document.querySelector('body');
 
-    if (this.isFullScreen) {
-      body.classList.add('isFullScreen');
-    } else {
-      body.classList.remove('isFullScreen');
+    if (body) {
+      if (this.isFullScreen) {
+        body.classList.add('isFullScreen');
+      } else {
+        body.classList.remove('isFullScreen');
+      }
     }
   }
 
diff --git a/src/stores/NewsStore.js b/src/stores/NewsStore.js
deleted file mode 100644
index 66a17cb29..000000000
--- a/src/stores/NewsStore.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import { computed, observable } from 'mobx';
-import { remove } from 'lodash';
-
-import Store from './lib/Store';
-import CachedRequest from './lib/CachedRequest';
-import Request from './lib/Request';
-import { CHECK_INTERVAL } from '../config';
-
-export default class NewsStore extends Store {
-  @observable latestNewsRequest = new CachedRequest(this.api.news, 'latest');
-
-  @observable hideNewsRequest = new Request(this.api.news, 'hide');
-
-  constructor(...args) {
-    super(...args);
-
-    // Register action handlers
-    this.actions.news.hide.listen(this._hide.bind(this));
-    this.actions.user.logout.listen(this._resetNewsRequest.bind(this));
-  }
-
-  setup() {
-    // Check for news updates every couple of hours
-    setInterval(() => {
-      if (this.latestNewsRequest.wasExecuted && this.stores.user.isLoggedIn) {
-        this.latestNewsRequest.invalidate({ immediately: true });
-      }
-    }, CHECK_INTERVAL);
-  }
-
-  @computed get latest() {
-    return this.latestNewsRequest.execute().result || [];
-  }
-
-  // Actions
-  _hide({ newsId }) {
-    this.hideNewsRequest.execute(newsId);
-
-    this.latestNewsRequest.invalidate().patch((result) => {
-      // TODO: check if we can use mobx.array remove
-      remove(result, (n) => n.id === newsId);
-    });
-  }
-
-  /**
-   * Reset the news request when current user logs out so that when another user
-   * logs in again without an app restart, the request will be fetched again and
-   * the news will be shown to the user.
-   *
-   * @private
-   */
-  _resetNewsRequest() {
-    this.latestNewsRequest.reset();
-  }
-}
diff --git a/src/stores/RecipePreviewsStore.js b/src/stores/RecipePreviewsStore.js
index f4e39306c..e01e8fc6f 100644
--- a/src/stores/RecipePreviewsStore.js
+++ b/src/stores/RecipePreviewsStore.js
@@ -5,9 +5,15 @@ import CachedRequest from './lib/CachedRequest';
 import Request from './lib/Request';
 
 export default class RecipePreviewsStore extends Store {
-  @observable allRecipePreviewsRequest = new CachedRequest(this.api.recipePreviews, 'all');
+  @observable allRecipePreviewsRequest = new CachedRequest(
+    this.api.recipePreviews,
+    'all',
+  );
 
-  @observable searchRecipePreviewsRequest = new Request(this.api.recipePreviews, 'search');
+  @observable searchRecipePreviewsRequest = new Request(
+    this.api.recipePreviews,
+    'search',
+  );
 
   constructor(...args) {
     super(...args);
@@ -25,7 +31,7 @@ export default class RecipePreviewsStore extends Store {
   }
 
   @computed get dev() {
-    return this.stores.recipes.all.filter((r) => r.local);
+    return this.stores.recipes.all.filter(r => r.local);
   }
 
   // Actions
diff --git a/src/stores/ServicesStore.js b/src/stores/ServicesStore.js
index ce6675866..4f7ad7442 100644
--- a/src/stores/ServicesStore.js
+++ b/src/stores/ServicesStore.js
@@ -15,7 +15,7 @@ import {
   getDevRecipeDirectory,
 } from '../helpers/recipe-helpers';
 import { workspaceStore } from '../features/workspaces';
-import { KEEP_WS_LOADED_USID } from '../config';
+import { DEFAULT_SERVICE_SETTINGS, KEEP_WS_LOADED_USID } from '../config';
 import { SPELLCHECKER_LOCALES } from '../i18n/languages';
 import { ferdiVersion } from '../environment-remote';
 
@@ -224,6 +224,7 @@ export default class ServicesStore extends Store {
         }
 
         if (
+          service.isWakeUpEnabled &&
           service.lastHibernated &&
           Number(this.stores.settings.all.app.wakeUpStrategy) > 0 &&
           Date.now() - service.lastHibernated >
@@ -394,16 +395,15 @@ export default class ServicesStore extends Store {
     }
 
     // set default values for serviceData
-    // eslint-disable-next-line prefer-object-spread
-    // TODO: How is this different from the defaults of the recipe in 'src/models/Recipe' file?
     serviceData = {
-      isEnabled: true,
-      isHibernationEnabled: false,
-      isNotificationEnabled: true,
-      isBadgeEnabled: true,
-      isMuted: false,
-      customIcon: false,
-      isDarkModeEnabled: false,
+      isEnabled: DEFAULT_SERVICE_SETTINGS.isEnabled,
+      isHibernationEnabled: DEFAULT_SERVICE_SETTINGS.isHibernationEnabled,
+      isWakeUpEnabled: DEFAULT_SERVICE_SETTINGS.isWakeUpEnabled,
+      isNotificationEnabled: DEFAULT_SERVICE_SETTINGS.isNotificationEnabled,
+      isBadgeEnabled: DEFAULT_SERVICE_SETTINGS.isBadgeEnabled,
+      isMuted: DEFAULT_SERVICE_SETTINGS.isMuted,
+      customIcon: DEFAULT_SERVICE_SETTINGS.customIcon,
+      isDarkModeEnabled: DEFAULT_SERVICE_SETTINGS.isDarkModeEnabled,
       spellcheckerLanguage:
         SPELLCHECKER_LOCALES[this.stores.settings.app.spellcheckerLanguage],
       userAgentPref: '',
@@ -888,6 +888,7 @@ export default class ServicesStore extends Store {
       return this.actions.todos.reload();
     }
 
+    if (!service.webview) return;
     return service.webview.loadURL(service.url);
   }
 
@@ -995,7 +996,7 @@ export default class ServicesStore extends Store {
     const service = this.one(serviceId);
     if (service.isTodosService) {
       this.actions.todos.openDevTools();
-    } else {
+    } else if (service.webview) {
       service.webview.openDevTools();
     }
   }
@@ -1147,7 +1148,7 @@ export default class ServicesStore extends Store {
       const { isAttached } = service;
       const isMuted = isAppMuted || service.isMuted;
 
-      if (isAttached) {
+      if (isAttached && service.webview) {
         service.webview.audioMuted = isMuted;
       }
     }
diff --git a/src/stores/SettingsStore.js b/src/stores/SettingsStore.js
index ec80fee7c..ac9356404 100644
--- a/src/stores/SettingsStore.js
+++ b/src/stores/SettingsStore.js
@@ -2,7 +2,11 @@ import { ipcRenderer } from 'electron';
 import { getCurrentWindow } from '@electron/remote';
 import { action, computed, observable, reaction } from 'mobx';
 import localStorage from 'mobx-localstorage';
-import { DEFAULT_APP_SETTINGS, FILE_SYSTEM_SETTINGS_TYPES, LOCAL_SERVER } from '../config';
+import {
+  DEFAULT_APP_SETTINGS,
+  FILE_SYSTEM_SETTINGS_TYPES,
+  LOCAL_SERVER,
+} from '../config';
 import { hash } from '../helpers/password-helpers';
 import Request from './lib/Request';
 import Store from './lib/Store';
diff --git a/src/stores/UIStore.ts b/src/stores/UIStore.ts
index 6ab63c2ee..6a9597006 100644
--- a/src/stores/UIStore.ts
+++ b/src/stores/UIStore.ts
@@ -1,7 +1,7 @@
 import { action, observable, computed, reaction } from 'mobx';
-import { theme, ThemeType } from '@meetfranz/theme';
 import { nativeTheme, systemPreferences } from '@electron/remote';
 
+import { theme, ThemeType } from '../themes';
 import Store from './lib/Store';
 import { isMac, isWindows } from '../environment';
 
diff --git a/src/stores/UserStore.js b/src/stores/UserStore.js
index 9f222d2d3..9a5d8cb30 100644
--- a/src/stores/UserStore.js
+++ b/src/stores/UserStore.js
@@ -273,13 +273,11 @@ export default class UserStore extends Store {
 
     // Install recipes
     for (const recipe of recipes) {
-      // eslint-disable-line no-unused-vars
       // eslint-disable-next-line no-await-in-loop
       await this.stores.recipes._install({ recipeId: recipe });
     }
 
     for (const service of services) {
-      // eslint-disable-line no-unused-vars
       this.actions.service.createFromLegacyService({
         data: service,
       });
diff --git a/src/stores/index.ts b/src/stores/index.ts
index 1760ddfa2..6ad898d85 100644
--- a/src/stores/index.ts
+++ b/src/stores/index.ts
@@ -6,7 +6,6 @@ import ServicesStore from './ServicesStore';
 import RecipesStore from './RecipesStore';
 import RecipePreviewsStore from './RecipePreviewsStore';
 import UIStore from './UIStore';
-import NewsStore from './NewsStore';
 import RequestStore from './RequestStore';
 import GlobalErrorStore from './GlobalErrorStore';
 import { workspaceStore } from '../features/workspaces';
@@ -25,7 +24,6 @@ export default (api, actions, router) => {
     recipes: new RecipesStore(stores, api, actions),
     recipePreviews: new RecipePreviewsStore(stores, api, actions),
     ui: new UIStore(stores, api, actions),
-    news: new NewsStore(stores, api, actions),
     requests: new RequestStore(stores, api, actions),
     globalError: new GlobalErrorStore(stores, api, actions),
     workspaces: workspaceStore,
diff --git a/src/stores/lib/Reaction.js b/src/stores/lib/Reaction.ts
index 7e1bc685e..0ca24a6fa 100644
--- a/src/stores/lib/Reaction.js
+++ b/src/stores/lib/Reaction.ts
@@ -20,12 +20,10 @@ export default class Reaction {
 
   stop() {
     if (this.isRunning) {
-      this.dispose();
+      this.dispose?.();
       this.isRunning = false;
     }
   }
 }
 
-export const createReactions = (reactions) => (
-  reactions.map((r) => new Reaction(r))
-);
+export const createReactions = reactions => reactions.map(r => new Reaction(r));
diff --git a/src/stores/lib/Request.js b/src/stores/lib/Request.js
index 39f32729a..65871ea17 100644
--- a/src/stores/lib/Request.js
+++ b/src/stores/lib/Request.js
@@ -38,42 +38,56 @@ export default class Request {
     if (this._isWaitingForResponse) return this;
 
     if (!this._api[this._method]) {
-      throw new Error(`Missing method <${this._method}> on api object:`, this._api);
+      throw new Error(
+        `Missing method <${this._method}> on api object:`,
+        this._api,
+      );
     }
 
     // This timeout is necessary to avoid warnings from mobx
     // regarding triggering actions as side-effect of getters
-    setTimeout(action(() => {
-      this.isExecuting = true;
-    }), 0);
+    setTimeout(
+      action(() => {
+        this.isExecuting = true;
+      }),
+      0,
+    );
 
     // Issue api call & save it as promise that is handled to update the results of the operation
     this._promise = new Promise((resolve, reject) => {
       this._api[this._method](...callArgs)
-        .then((result) => {
-          setTimeout(action(() => {
-            this.result = result;
-            if (this._currentApiCall) this._currentApiCall.result = result;
-            this.isExecuting = false;
-            this.isError = false;
-            this.wasExecuted = true;
-            this._isWaitingForResponse = false;
-            this._triggerHooks();
-            resolve(result);
-          }), 1);
+        .then(result => {
+          setTimeout(
+            action(() => {
+              this.result = result;
+              if (this._currentApiCall) this._currentApiCall.result = result;
+              this.isExecuting = false;
+              this.isError = false;
+              this.wasExecuted = true;
+              this._isWaitingForResponse = false;
+              this._triggerHooks();
+              resolve(result);
+            }),
+            1,
+          );
           return result;
         })
-        .catch(action((error) => {
-          setTimeout(action(() => {
-            this.error = error;
-            this.isExecuting = false;
-            this.isError = true;
-            this.wasExecuted = true;
-            this._isWaitingForResponse = false;
-            this._triggerHooks();
-            reject(error);
-          }), 1);
-        }));
+        .catch(
+          action(error => {
+            setTimeout(
+              action(() => {
+                this.error = error;
+                this.isExecuting = false;
+                this.isError = true;
+                this.wasExecuted = true;
+                this._isWaitingForResponse = false;
+                this._triggerHooks();
+                reject(error);
+              }),
+              1,
+            );
+          }),
+        );
     });
 
     this._isWaitingForResponse = true;
@@ -89,7 +103,11 @@ export default class Request {
   retry = () => this.reload();
 
   isExecutingWithArgs(...args) {
-    return this.isExecuting && this._currentApiCall && isEqual(this._currentApiCall.args, args);
+    return (
+      this.isExecuting &&
+      this._currentApiCall &&
+      isEqual(this._currentApiCall.args, args)
+    );
   }
 
   @computed get isExecutingFirstTime() {
@@ -97,12 +115,18 @@ export default class Request {
   }
 
   then(...args) {
-    if (!this._promise) throw new Error('You have to call Request::execute before you can access it as promise');
+    if (!this._promise)
+      throw new Error(
+        'You have to call Request::execute before you can access it as promise',
+      );
     return this._promise.then(...args);
   }
 
   catch(...args) {
-    if (!this._promise) throw new Error('You have to call Request::execute before you can access it as promise');
+    if (!this._promise)
+      throw new Error(
+        'You have to call Request::execute before you can access it as promise',
+      );
     return this._promise.catch(...args);
   }
 
diff --git a/src/stores/lib/Store.js b/src/stores/lib/Store.js
index b39070ce8..a867c3a46 100644
--- a/src/stores/lib/Store.js
+++ b/src/stores/lib/Store.js
@@ -28,7 +28,8 @@ export default class Store {
   }
 
   registerReactions(reactions) {
-    for (const reaction of reactions) this._reactions.push(new Reaction(reaction));
+    for (const reaction of reactions)
+      this._reactions.push(new Reaction(reaction));
   }
 
   setup() {}
diff --git a/src/themes/IStyleTypes.ts b/src/themes/IStyleTypes.ts
new file mode 100644
index 000000000..48f52daf2
--- /dev/null
+++ b/src/themes/IStyleTypes.ts
@@ -0,0 +1,7 @@
+export interface IStyleTypes {
+  [index: string]: {
+    accent: string;
+    contrast: string;
+    border?: string;
+  };
+}
diff --git a/src/themes/dark/index.ts b/src/themes/dark/index.ts
new file mode 100644
index 000000000..aa132c743
--- /dev/null
+++ b/src/themes/dark/index.ts
@@ -0,0 +1,171 @@
+import color from 'color';
+import { cloneDeep, merge } from 'lodash';
+
+import makeDefaultThemeConfig from '../default';
+import * as legacyStyles from '../legacy';
+
+export default (brandPrimary: string) => {
+  const defaultStyles = makeDefaultThemeConfig(brandPrimary);
+  let brandPrimaryColor = color(legacyStyles.themeBrandPrimary);
+  try {
+    brandPrimaryColor = color(defaultStyles.brandPrimary);
+  } catch {
+    // Ignore invalid color and fall back to default.
+  }
+
+  const colorBackground = legacyStyles.darkThemeGrayDarkest;
+  const colorText = legacyStyles.darkThemeTextColor;
+  const inputColor = legacyStyles.darkThemeGrayLightest;
+  const inputBackground = legacyStyles.themeGrayDark;
+  const inputBorder = `1px solid ${legacyStyles.darkThemeGrayLight}`;
+  const inputPrefixColor = color(legacyStyles.darkThemeGrayLighter)
+    .lighten(0.3)
+    .hex();
+  const buttonSecondaryTextColor = legacyStyles.darkThemeTextColor;
+  const selectColor = inputColor;
+  const drawerBg = color(colorBackground).lighten(0.3).hex();
+
+  const services = merge({}, defaultStyles.services, {
+    listItems: {
+      borderColor: legacyStyles.darkThemeGrayDarker,
+      hoverBgColor: legacyStyles.darkThemeGrayDarker,
+      disabled: {
+        color: legacyStyles.darkThemeGray,
+      },
+    },
+  });
+
+  return {
+    ...defaultStyles,
+
+    colorBackground,
+    colorContentBackground: legacyStyles.darkThemeGrayDarkest,
+    colorBackgroundSubscriptionContainer: legacyStyles.themeBrandInfo,
+
+    colorHeadline: legacyStyles.darkThemeTextColor,
+    colorText: legacyStyles.darkThemeTextColor,
+
+    defaultContentBorder: legacyStyles.themeGrayDark,
+
+    // Loader
+    colorFullscreenLoaderSpinner: '#FFF',
+    colorWebviewLoaderBackground: color(legacyStyles.darkThemeGrayDarkest)
+      .alpha(0.5)
+      .rgb()
+      .string(),
+
+    // Input
+    labelColor: legacyStyles.darkThemeTextColor,
+    inputColor,
+    inputBackground,
+    inputBorder,
+    inputPrefixColor,
+    inputPrefixBackground: legacyStyles.darkThemeGray,
+    inputDisabledOpacity: 0.5,
+    inputScorePasswordBackground: legacyStyles.darkThemeGrayDark,
+    inputModifierColor: color(legacyStyles.darkThemeGrayLighter)
+      .lighten(0.3)
+      .hex(),
+    inputPlaceholderColor: color(legacyStyles.darkThemeGrayLighter)
+      .darken(0.1)
+      .hex(),
+
+    // Toggle
+    toggleBackground: legacyStyles.darkThemeGray,
+    toggleButton: legacyStyles.darkThemeGrayLighter,
+
+    // Button
+    buttonPrimaryTextColor: legacyStyles.darkThemeTextColor,
+
+    buttonSecondaryBackground: legacyStyles.darkThemeGrayLighter,
+    buttonSecondaryTextColor,
+
+    buttonDangerTextColor: legacyStyles.darkThemeTextColor,
+
+    buttonWarningTextColor: legacyStyles.darkThemeTextColor,
+
+    buttonLoaderColor: {
+      primary: '#FFF',
+      secondary: buttonSecondaryTextColor,
+      success: '#FFF',
+      warning: '#FFF',
+      danger: '#FFF',
+      inverted: defaultStyles.brandPrimary,
+    },
+
+    // Select
+    selectBackground: inputBackground,
+    selectBorder: inputBorder,
+    selectColor,
+    selectToggleColor: inputPrefixColor,
+    selectPopupBackground: legacyStyles.darkThemeGrayLight,
+    selectOptionColor: '#FFF',
+    selectOptionBorder: `1px solid ${color(legacyStyles.darkThemeGrayLight)
+      .darken(0.2)
+      .hex()}`,
+    selectOptionItemHover: color(legacyStyles.darkThemeGrayLight)
+      .darken(0.2)
+      .hex(),
+    selectOptionItemHoverColor: selectColor,
+    selectSearchColor: inputBackground,
+
+    // Modal
+    colorModalOverlayBackground: color(legacyStyles.darkThemeBlack)
+      .alpha(0.9)
+      .rgb()
+      .string(),
+    colorModalBackground: legacyStyles.darkThemeGrayDark,
+
+    // Services
+    services,
+
+    // Service Icon
+    serviceIcon: merge({}, defaultStyles.serviceIcon, {
+      isCustom: {
+        border: `1px solid ${legacyStyles.darkThemeGrayDark}`,
+      },
+    }),
+
+    // Workspaces
+    workspaces: merge({}, defaultStyles.workspaces, {
+      settings: {
+        listItems: cloneDeep(services.listItems),
+      },
+      drawer: {
+        background: drawerBg,
+        addButton: {
+          color: legacyStyles.darkThemeGrayLighter,
+          hoverColor: legacyStyles.darkThemeGraySmoke,
+        },
+        listItem: {
+          border: color(drawerBg).lighten(0.2).hex(),
+          hoverBackground: color(drawerBg).lighten(0.2).hex(),
+          activeBackground: defaultStyles.brandPrimary,
+          name: {
+            color: colorText,
+            activeColor: 'white',
+          },
+          services: {
+            color: color(colorText).darken(0.5).hex(),
+            active: brandPrimaryColor.lighten(0.5).hex(),
+          },
+        },
+      },
+    }),
+
+    // Todos
+    todos: merge({}, defaultStyles.todos, {
+      todosLayer: {
+        borderLeftColor: legacyStyles.darkThemeGrayDarker,
+      },
+      toggleButton: {
+        background: defaultStyles.styleTypes.primary.accent,
+        textColor: defaultStyles.styleTypes.primary.contrast,
+        shadowColor: 'rgba(0, 0, 0, 0.2)',
+      },
+      dragIndicator: {
+        background: legacyStyles.themeGrayLight,
+      },
+    }),
+  };
+};
diff --git a/src/themes/default/index.ts b/src/themes/default/index.ts
new file mode 100644
index 000000000..80bcba766
--- /dev/null
+++ b/src/themes/default/index.ts
@@ -0,0 +1,251 @@
+import color from 'color';
+import { cloneDeep } from 'lodash';
+
+import * as legacyStyles from '../legacy';
+import type { IStyleTypes } from '../IStyleTypes';
+
+export default (brandPrimary: string) => {
+  const brandSuccess = '#5cb85c';
+  const brandInfo = '#5bc0de';
+  const brandWarning = '#FF9F00';
+  const brandDanger = '#d9534f';
+  const uiFontSize = 14;
+  const colorBackground = legacyStyles.themeGrayLighter;
+  const colorContentBackground = '#FFFFFF';
+  const colorText = legacyStyles.themeTextColor;
+  const inputColor = legacyStyles.themeGray;
+  const inputBackground = legacyStyles.themeGrayLightest;
+  const inputHeight = 40;
+  const inputBorder = `1px solid ${legacyStyles.themeGrayLighter}`;
+  const inputPrefixColor = legacyStyles.themeGrayLight;
+  const inputDisabledOpacity = 0.5;
+  const buttonSecondaryTextColor = legacyStyles.themeGray;
+  const selectColor = inputColor;
+  const drawerBg = color(colorBackground).lighten(0.1).hex();
+
+  const styleTypes: IStyleTypes = {
+    primary: {
+      accent: brandPrimary,
+      contrast: '#FFF',
+    },
+    secondary: {
+      accent: legacyStyles.themeGrayLighter,
+      contrast: legacyStyles.themeGray,
+    },
+    success: {
+      accent: brandSuccess,
+      contrast: '#FFF',
+    },
+    warning: {
+      accent: brandWarning,
+      contrast: '#FFF',
+    },
+    danger: {
+      accent: brandDanger,
+      contrast: '#FFF',
+    },
+    inverted: {
+      accent: 'none',
+      contrast: brandPrimary,
+      border: `1px solid ${brandPrimary}`,
+    },
+  };
+
+  const services = {
+    listItems: {
+      padding: 10,
+      height: 57,
+      borderColor: legacyStyles.themeGrayLightest,
+      hoverBgColor: legacyStyles.themeGrayLightest,
+      disabled: {
+        color: legacyStyles.themeGrayLight,
+      },
+    },
+  };
+
+  return {
+    brandPrimary,
+    brandSuccess,
+    brandInfo,
+    brandWarning,
+    brandDanger,
+
+    uiFontSize,
+
+    borderRadius: legacyStyles.themeBorderRadius,
+    borderRadiusSmall: legacyStyles.themeBorderRadiusSmall,
+
+    colorBackground,
+
+    colorContentBackground,
+    colorHeadline: legacyStyles.themeGrayDark,
+
+    colorText,
+
+    defaultContentBorder: color(legacyStyles.themeGrayLighter)
+      .darken(0.1)
+      .rgb()
+      .string(),
+
+    // Subscription Container Component
+    colorSubscriptionContainerBackground: 'none',
+    colorSubscriptionContainerBorder: `1px solid ${brandPrimary}`,
+    colorSubscriptionContainerTitle: brandPrimary,
+    colorSubscriptionContainerActionButtonBackground: brandPrimary,
+    colorSubscriptionContainerActionButtonColor: '#FFF',
+
+    // Loader
+    colorAppLoaderSpinner: '#FFF',
+    colorFullscreenLoaderSpinner: legacyStyles.themeGrayDark,
+    colorWebviewLoaderBackground: color(legacyStyles.themeGrayLighter)
+      .alpha(0.8)
+      .rgb()
+      .string(),
+
+    // Input
+    labelColor: legacyStyles.themeGrayLight,
+    inputColor,
+    inputHeight,
+    inputBackground,
+    inputBorder,
+    inputModifierColor: legacyStyles.themeGrayLight,
+    inputPlaceholderColor: color(legacyStyles.themeGrayLight)
+      .lighten(0.3)
+      .hex(),
+    inputPrefixColor,
+    inputPrefixBackground: legacyStyles.themeGrayLighter,
+    inputDisabledOpacity,
+    inputScorePasswordBackground: legacyStyles.themeGrayLighter,
+
+    // Toggle
+    toggleBackground: legacyStyles.themeGrayLighter,
+    toggleButton: legacyStyles.themeGrayLight,
+    toggleButtonActive: brandPrimary,
+    toggleWidth: 40,
+    toggleHeight: 14,
+
+    // Style Types
+    styleTypes,
+
+    // Button
+    buttonPrimaryBackground: brandPrimary,
+    buttonPrimaryTextColor: '#FFF',
+
+    buttonSecondaryBackground: legacyStyles.themeGrayLighter,
+    buttonSecondaryTextColor,
+
+    buttonSuccessBackground: brandSuccess,
+    buttonSuccessTextColor: '#FFF',
+
+    buttonDangerBackground: brandDanger,
+    buttonDangerTextColor: '#FFF',
+
+    buttonWarningBackground: brandWarning,
+    buttonWarningTextColor: '#FFF',
+
+    buttonInvertedBackground: 'none',
+    buttonInvertedTextColor: brandPrimary,
+    buttonInvertedBorder: `1px solid ${brandPrimary}`,
+
+    buttonHeight: inputHeight,
+
+    buttonLoaderColor: {
+      primary: '#FFF',
+      secondary: buttonSecondaryTextColor,
+      success: '#FFF',
+      warning: '#FFF',
+      danger: '#FFF',
+      inverted: brandPrimary,
+    },
+
+    // Select
+    selectBackground: inputBackground,
+    selectBorder: inputBorder,
+    selectHeight: inputHeight,
+    selectColor,
+    selectToggleColor: inputPrefixColor,
+    selectPopupBackground: '#FFF',
+    selectOptionColor: inputColor,
+    selectOptionBorder: `1px solid ${legacyStyles.themeGrayLightest}`,
+    selectOptionItemHover: legacyStyles.themeGrayLighter,
+    selectOptionItemHoverColor: selectColor,
+    selectOptionItemActive: brandPrimary,
+    selectOptionItemActiveColor: '#FFF',
+    selectSearchBackground: legacyStyles.themeGrayLighter,
+    selectSearchColor: inputColor,
+    selectDisabledOpacity: inputDisabledOpacity,
+
+    // Badge
+    badgeFontSize: uiFontSize - 2,
+    badgeBorderRadius: 50,
+
+    // Modal
+    colorModalOverlayBackground: color('#000').alpha(0.8).rgb().string(),
+    colorModalBackground: colorContentBackground,
+
+    // Services
+    services,
+
+    // Service Icon
+    serviceIcon: {
+      width: 35,
+      isCustom: {
+        border: `1px solid ${legacyStyles.themeGrayLighter}`,
+        borderRadius: legacyStyles.themeBorderRadius,
+        width: 37,
+      },
+    },
+
+    // Workspaces
+    workspaces: {
+      settings: {
+        listItems: cloneDeep(services.listItems),
+      },
+      drawer: {
+        width: 300,
+        padding: 20,
+        background: drawerBg,
+        buttons: {
+          color: color(legacyStyles.themeGrayLight).lighten(0.1).hex(),
+          hoverColor: legacyStyles.themeGrayLight,
+        },
+        listItem: {
+          hoverBackground: color(drawerBg).darken(0.01).hex(),
+          activeBackground: legacyStyles.themeGrayLightest,
+          border: color(drawerBg).darken(0.05).hex(),
+          name: {
+            color: colorText,
+            activeColor: colorText,
+          },
+          services: {
+            color: color(colorText).lighten(1.5).hex(),
+            active: color(colorText).lighten(1.5).hex(),
+          },
+        },
+      },
+      switchingIndicator: {
+        spinnerColor: 'white',
+      },
+    },
+
+    // Todos
+    todos: {
+      todosLayer: {
+        borderLeftColor: color(legacyStyles.themeGrayLighter).darken(0.1).hex(),
+      },
+      toggleButton: {
+        background: styleTypes.primary.accent,
+        textColor: styleTypes.primary.contrast,
+        shadowColor: 'rgba(0, 0, 0, 0.2)',
+      },
+      dragIndicator: {
+        background: legacyStyles.themeGrayLight,
+      },
+      resizeHandler: {
+        backgroundHover: styleTypes.primary.accent,
+      },
+    },
+
+    legacyStyles,
+  };
+};
diff --git a/src/themes/index.ts b/src/themes/index.ts
new file mode 100644
index 000000000..27be4d04b
--- /dev/null
+++ b/src/themes/index.ts
@@ -0,0 +1,21 @@
+import makeDarkThemeConfig from './dark';
+import makeDefaultThemeConfig from './default';
+import { themeBrandPrimary } from './legacy';
+
+export enum ThemeType {
+  default = 'default',
+  dark = 'dark',
+}
+
+export function theme(
+  themeId: ThemeType,
+  brandColor: string = themeBrandPrimary,
+) {
+  return themeId === ThemeType.dark
+    ? makeDarkThemeConfig(brandColor)
+    : makeDefaultThemeConfig(brandColor);
+}
+
+const defaultThemeConfigWithDefaultAccentColor = makeDefaultThemeConfig(themeBrandPrimary);
+
+export type Theme = typeof defaultThemeConfigWithDefaultAccentColor;
diff --git a/src/themes/legacy/index.ts b/src/themes/legacy/index.ts
new file mode 100644
index 000000000..c6105a4e2
--- /dev/null
+++ b/src/themes/legacy/index.ts
@@ -0,0 +1,40 @@
+import { DEFAULT_ACCENT_COLOR } from '../../config';
+
+/* legacy config, injected into sass */
+export const themeBrandPrimary = DEFAULT_ACCENT_COLOR;
+export const themeBrandSuccess = '#5cb85c';
+export const themeBrandInfo = '#5bc0de';
+export const themeBrandWarning = '#FF9F00';
+export const themeBrandDanger = '#d9534f';
+
+export const themeGrayDark = '#373a3c';
+export const themeGray = '#55595c';
+export const themeGrayLight = '#818a91';
+export const themeGrayLighter = '#eceeef';
+export const themeGrayLightest = '#f7f7f9';
+
+export const themeBorderRadius = '6px';
+export const themeBorderRadiusSmall = '3px';
+
+export const themeSidebarWidth = '68px';
+
+export const themeTextColor = themeGrayDark;
+
+export const themeTransitionTime = '.5s';
+
+export const themeInsetShadow = 'inset 0 2px 5px rgba(0, 0, 0, .03)';
+
+export const darkThemeBlack = '#1A1A1A';
+
+export const darkThemeGrayDarkest = '#1E1E1E';
+export const darkThemeGrayDarker = '#2D2F31';
+export const darkThemeGrayDark = '#383A3B';
+
+export const darkThemeGray = '#47494B';
+
+export const darkThemeGrayLight = '#515355';
+export const darkThemeGrayLighter = '#8a8b8b';
+export const darkThemeGrayLightest = '#FFFFFF';
+
+export const darkThemeGraySmoke = '#CED0D1';
+export const darkThemeTextColor = '#FFFFFF';
diff --git a/src/webview/badge.ts b/src/webview/badge.ts
index 8e8b66c0c..fb696723d 100644
--- a/src/webview/badge.ts
+++ b/src/webview/badge.ts
@@ -3,7 +3,7 @@ import { ipcRenderer } from 'electron';
 const debug = require('debug')('Ferdi:Plugin:BadgeHandler');
 
 export class BadgeHandler {
-  countCache: { direct: number; indirect: number; };
+  countCache: { direct: number; indirect: number };
 
   constructor() {
     this.countCache = {
@@ -26,14 +26,19 @@ export class BadgeHandler {
     return Math.max(adjustedNumber, 0);
   }
 
-  setBadge(direct: string | number | undefined | null, indirect: string | number | undefined | null) {
+  setBadge(
+    direct: string | number | undefined | null,
+    indirect: string | number | undefined | null,
+  ) {
     const count = {
       direct: this.safeParseInt(direct),
       indirect: this.safeParseInt(indirect),
     };
 
-    if (this.countCache.direct.toString() === count.direct.toString()
-        && this.countCache.indirect.toString() === count.indirect.toString()) {
+    if (
+      this.countCache.direct.toString() === count.direct.toString() &&
+      this.countCache.indirect.toString() === count.indirect.toString()
+    ) {
       return;
     }
 
diff --git a/src/webview/contextMenu.js b/src/webview/contextMenu.js
deleted file mode 100644
index 567a2d470..000000000
--- a/src/webview/contextMenu.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import { getCurrentWebContents } from '@electron/remote';
-import ContextMenuBuilder from './contextMenuBuilder';
-
-const webContents = getCurrentWebContents();
-
-export default async function setupContextMenu(isSpellcheckEnabled, getDefaultSpellcheckerLanguage, getSpellcheckerLanguage, getSearchEngine, getClipboardNotifications) {
-  const contextMenuBuilder = new ContextMenuBuilder(
-    webContents,
-  );
-
-  webContents.on('context-menu', (e, props) => {
-    // TODO?: e.preventDefault();
-    contextMenuBuilder.showPopupMenu(
-      { ...props, searchEngine: getSearchEngine(), clipboardNotifications: getClipboardNotifications() },
-      isSpellcheckEnabled(),
-      getDefaultSpellcheckerLanguage(),
-      getSpellcheckerLanguage(),
-    );
-  });
-}
diff --git a/src/webview/contextMenu.ts b/src/webview/contextMenu.ts
new file mode 100644
index 000000000..72f927ef4
--- /dev/null
+++ b/src/webview/contextMenu.ts
@@ -0,0 +1,29 @@
+import { getCurrentWebContents } from '@electron/remote';
+import { ContextMenuBuilder } from './contextMenuBuilder';
+
+const webContents = getCurrentWebContents();
+
+export default async function setupContextMenu(
+  isSpellcheckEnabled: () => void,
+  getDefaultSpellcheckerLanguage: () => void,
+  getSpellcheckerLanguage: () => void,
+  getSearchEngine: () => void,
+  getClipboardNotifications: () => void,
+) {
+  const contextMenuBuilder = new ContextMenuBuilder(webContents);
+
+  webContents.on('context-menu', (_e, props) => {
+    // TODO?: e.preventDefault();
+    contextMenuBuilder.showPopupMenu(
+      {
+        ...props,
+        searchEngine: getSearchEngine(),
+        clipboardNotifications: getClipboardNotifications(),
+      },
+      // @ts-expect-error Expected 1 arguments, but got 4.
+      isSpellcheckEnabled(),
+      getDefaultSpellcheckerLanguage(),
+      getSpellcheckerLanguage(),
+    );
+  });
+}
diff --git a/src/webview/contextMenuBuilder.js b/src/webview/contextMenuBuilder.ts
index 938eade1e..7b8c6cb2d 100644
--- a/src/webview/contextMenuBuilder.js
+++ b/src/webview/contextMenuBuilder.ts
@@ -6,7 +6,7 @@
  *
  * Source: https://github.com/electron-userland/electron-spellchecker/blob/master/src/context-menu-builder.js
  */
-// eslint-disable-next-line no-unused-vars
+
 import { clipboard, ipcRenderer, nativeImage, WebContents } from 'electron';
 import { Menu, MenuItem } from '@electron/remote';
 import { cmdOrCtrlShortcutKey, isMac } from '../environment';
@@ -14,17 +14,38 @@ import { cmdOrCtrlShortcutKey, isMac } from '../environment';
 import { SEARCH_ENGINE_NAMES, SEARCH_ENGINE_URLS } from '../config';
 import { openExternalUrl } from '../helpers/url-helpers';
 
-const { URL } = require('url');
-
-function matchesWord(string) {
+function matchesWord(string: string) {
   const regex =
     /[A-Za-z\u00AA\u00B5\u00BA\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02C1\u02C6-\u02D1\u02E0-\u02E4\u02EC\u02EE\u0370-\u0374\u0376\u0377\u037A-\u037D\u0386\u0388-\u038A\u038C\u038E-\u03A1\u03A3-\u03F5\u03F7-\u0481\u048A-\u0527\u0531-\u0556\u0559\u0561-\u0587\u05D0-\u05EA\u05F0-\u05F2\u0620-\u064A\u066E\u066F\u0671-\u06D3\u06D5\u06E5\u06E6\u06EE\u06EF\u06FA-\u06FC\u06FF\u0710\u0712-\u072F\u074D-\u07A5\u07B1\u07CA-\u07EA\u07F4\u07F5\u07FA\u0800-\u0815\u081A\u0824\u0828\u0840-\u0858\u08A0\u08A2-\u08AC\u0904-\u0939\u093D\u0950\u0958-\u0961\u0971-\u0977\u0979-\u097F\u0985-\u098C\u098F\u0990\u0993-\u09A8\u09AA-\u09B0\u09B2\u09B6-\u09B9\u09BD\u09CE\u09DC\u09DD\u09DF-\u09E1\u09F0\u09F1\u0A05-\u0A0A\u0A0F\u0A10\u0A13-\u0A28\u0A2A-\u0A30\u0A32\u0A33\u0A35\u0A36\u0A38\u0A39\u0A59-\u0A5C\u0A5E\u0A72-\u0A74\u0A85-\u0A8D\u0A8F-\u0A91\u0A93-\u0AA8\u0AAA-\u0AB0\u0AB2\u0AB3\u0AB5-\u0AB9\u0ABD\u0AD0\u0AE0\u0AE1\u0B05-\u0B0C\u0B0F\u0B10\u0B13-\u0B28\u0B2A-\u0B30\u0B32\u0B33\u0B35-\u0B39\u0B3D\u0B5C\u0B5D\u0B5F-\u0B61\u0B71\u0B83\u0B85-\u0B8A\u0B8E-\u0B90\u0B92-\u0B95\u0B99\u0B9A\u0B9C\u0B9E\u0B9F\u0BA3\u0BA4\u0BA8-\u0BAA\u0BAE-\u0BB9\u0BD0\u0C05-\u0C0C\u0C0E-\u0C10\u0C12-\u0C28\u0C2A-\u0C33\u0C35-\u0C39\u0C3D\u0C58\u0C59\u0C60\u0C61\u0C85-\u0C8C\u0C8E-\u0C90\u0C92-\u0CA8\u0CAA-\u0CB3\u0CB5-\u0CB9\u0CBD\u0CDE\u0CE0\u0CE1\u0CF1\u0CF2\u0D05-\u0D0C\u0D0E-\u0D10\u0D12-\u0D3A\u0D3D\u0D4E\u0D60\u0D61\u0D7A-\u0D7F\u0D85-\u0D96\u0D9A-\u0DB1\u0DB3-\u0DBB\u0DBD\u0DC0-\u0DC6\u0E01-\u0E30\u0E32\u0E33\u0E40-\u0E46\u0E81\u0E82\u0E84\u0E87\u0E88\u0E8A\u0E8D\u0E94-\u0E97\u0E99-\u0E9F\u0EA1-\u0EA3\u0EA5\u0EA7\u0EAA\u0EAB\u0EAD-\u0EB0\u0EB2\u0EB3\u0EBD\u0EC0-\u0EC4\u0EC6\u0EDC-\u0EDF\u0F00\u0F40-\u0F47\u0F49-\u0F6C\u0F88-\u0F8C\u1000-\u102A\u103F\u1050-\u1055\u105A-\u105D\u1061\u1065\u1066\u106E-\u1070\u1075-\u1081\u108E\u10A0-\u10C5\u10C7\u10CD\u10D0-\u10FA\u10FC-\u1248\u124A-\u124D\u1250-\u1256\u1258\u125A-\u125D\u1260-\u1288\u128A-\u128D\u1290-\u12B0\u12B2-\u12B5\u12B8-\u12BE\u12C0\u12C2-\u12C5\u12C8-\u12D6\u12D8-\u1310\u1312-\u1315\u1318-\u135A\u1380-\u138F\u13A0-\u13F4\u1401-\u166C\u166F-\u167F\u1681-\u169A\u16A0-\u16EA\u1700-\u170C\u170E-\u1711\u1720-\u1731\u1740-\u1751\u1760-\u176C\u176E-\u1770\u1780-\u17B3\u17D7\u17DC\u1820-\u1877\u1880-\u18A8\u18AA\u18B0-\u18F5\u1900-\u191C\u1950-\u196D\u1970-\u1974\u1980-\u19AB\u19C1-\u19C7\u1A00-\u1A16\u1A20-\u1A54\u1AA7\u1B05-\u1B33\u1B45-\u1B4B\u1B83-\u1BA0\u1BAE\u1BAF\u1BBA-\u1BE5\u1C00-\u1C23\u1C4D-\u1C4F\u1C5A-\u1C7D\u1CE9-\u1CEC\u1CEE-\u1CF1\u1CF5\u1CF6\u1D00-\u1DBF\u1E00-\u1F15\u1F18-\u1F1D\u1F20-\u1F45\u1F48-\u1F4D\u1F50-\u1F57\u1F59\u1F5B\u1F5D\u1F5F-\u1F7D\u1F80-\u1FB4\u1FB6-\u1FBC\u1FBE\u1FC2-\u1FC4\u1FC6-\u1FCC\u1FD0-\u1FD3\u1FD6-\u1FDB\u1FE0-\u1FEC\u1FF2-\u1FF4\u1FF6-\u1FFC\u2071\u207F\u2090-\u209C\u2102\u2107\u210A-\u2113\u2115\u2119-\u211D\u2124\u2126\u2128\u212A-\u212D\u212F-\u2139\u213C-\u213F\u2145-\u2149\u214E\u2183\u2184\u2C00-\u2C2E\u2C30-\u2C5E\u2C60-\u2CE4\u2CEB-\u2CEE\u2CF2\u2CF3\u2D00-\u2D25\u2D27\u2D2D\u2D30-\u2D67\u2D6F\u2D80-\u2D96\u2DA0-\u2DA6\u2DA8-\u2DAE\u2DB0-\u2DB6\u2DB8-\u2DBE\u2DC0-\u2DC6\u2DC8-\u2DCE\u2DD0-\u2DD6\u2DD8-\u2DDE\u2E2F\u3005\u3006\u3031-\u3035\u303B\u303C\u3041-\u3096\u309D-\u309F\u30A1-\u30FA\u30FC-\u30FF\u3105-\u312D\u3131-\u318E\u31A0-\u31BA\u31F0-\u31FF\u3400-\u4DB5\u4E00-\u9FCC\uA000-\uA48C\uA4D0-\uA4FD\uA500-\uA60C\uA610-\uA61F\uA62A\uA62B\uA640-\uA66E\uA67F-\uA697\uA6A0-\uA6E5\uA717-\uA71F\uA722-\uA788\uA78B-\uA78E\uA790-\uA793\uA7A0-\uA7AA\uA7F8-\uA801\uA803-\uA805\uA807-\uA80A\uA80C-\uA822\uA840-\uA873\uA882-\uA8B3\uA8F2-\uA8F7\uA8FB\uA90A-\uA925\uA930-\uA946\uA960-\uA97C\uA984-\uA9B2\uA9CF\uAA00-\uAA28\uAA40-\uAA42\uAA44-\uAA4B\uAA60-\uAA76\uAA7A\uAA80-\uAAAF\uAAB1\uAAB5\uAAB6\uAAB9-\uAABD\uAAC0\uAAC2\uAADB-\uAADD\uAAE0-\uAAEA\uAAF2-\uAAF4\uAB01-\uAB06\uAB09-\uAB0E\uAB11-\uAB16\uAB20-\uAB26\uAB28-\uAB2E\uABC0-\uABE2\uAC00-\uD7A3\uD7B0-\uD7C6\uD7CB-\uD7FB\uF900-\uFA6D\uFA70-\uFAD9\uFB00-\uFB06\uFB13-\uFB17\uFB1D\uFB1F-\uFB28\uFB2A-\uFB36\uFB38-\uFB3C\uFB3E\uFB40\uFB41\uFB43\uFB44\uFB46-\uFBB1\uFBD3-\uFD3D\uFD50-\uFD8F\uFD92-\uFDC7\uFDF0-\uFDFB\uFE70-\uFE74\uFE76-\uFEFC\uFF21-\uFF3A\uFF41-\uFF5A\uFF66-\uFFBE\uFFC2-\uFFC7\uFFCA-\uFFCF\uFFD2-\uFFD7\uFFDA-\uFFDC]+/g;
 
   return string.match(regex);
 }
 
+interface ContextMenuStringTable {
+  lookUpDefinition: ({ word }: { word: string }) => string;
+  cut: () => string;
+  copy: () => string;
+  paste: () => string;
+  pasteAndMatchStyle: () => string;
+  searchWith: ({ searchEngine }: { searchEngine: string }) => string;
+  openLinkUrl: () => string;
+  openLinkInFerdiUrl: () => string;
+  openInBrowser: () => string;
+  copyLinkUrl: () => string;
+  copyImageUrl: () => string;
+  copyImage: () => string;
+  downloadImage: () => string;
+  addToDictionary: () => string;
+  goBack: () => string;
+  goForward: () => string;
+  copyPageUrl: () => string;
+  goToHomePage: () => string;
+  copyMail: () => string;
+  inspectElement: () => string;
+}
+
 // TODO: Need to externalize for i18n
-const contextMenuStringTable = {
+const contextMenuStringTable: ContextMenuStringTable = {
   lookUpDefinition: ({ word }) => `Look Up "${word}"`,
   cut: () => 'Cut',
   copy: () => 'Copy',
@@ -54,16 +75,31 @@ const contextMenuStringTable = {
  * which we use to generate the menu. We also use the spell-check information to
  * generate suggestions.
  */
-module.exports = class ContextMenuBuilder {
+export class ContextMenuBuilder {
+  debugMode: boolean;
+
+  processMenu: (
+    menu: Electron.CrossProcessExports.Menu,
+  ) => Electron.CrossProcessExports.Menu;
+
+  menu: Electron.CrossProcessExports.Menu | null;
+
+  stringTable: ContextMenuStringTable;
+
+  getWebContents: () => Electron.WebContents;
+
   /**
    * Creates an instance of ContextMenuBuilder
    *
-   * @param  {WebContents} webContents  Current webContents
-   * @param  {Boolean} debugMode    If true, display the "Inspect Element" menu item.
-   * @param  {function} processMenu If passed, this method will be passed the menu to change
-   *                                it prior to display. Signature: (menu, info) => menu
+   * @param webContents Current webContents
+   * @param debugMode If true, display the "Inspect Element" menu item.
+   * @param processMenu If passed, this method will be passed the menu to change it prior to display. Signature: (menu, info) => menu
    */
-  constructor(webContents, debugMode = false, processMenu = m => m) {
+  constructor(
+    webContents: WebContents,
+    debugMode: boolean = false,
+    processMenu = (menu: Electron.CrossProcessExports.Menu) => menu,
+  ) {
     this.debugMode = debugMode;
     this.processMenu = processMenu;
     this.menu = null;
@@ -77,12 +113,11 @@ module.exports = class ContextMenuBuilder {
    * allows to change string in runtime. All formatters are simply typeof () => string, except
    * lookUpDefinition provides word, ({word}) => string.
    *
-   * @param {Object} stringTable The object contains string foramtter function for context menu.
+   * @param stringTable The object contains string formatter function for context menu.
    * It is allowed to specify only certain menu string as necessary, which will makes other string
    * fall backs to default.
-   *
    */
-  setAlternateStringFormatter(stringTable) {
+  setAlternateStringFormatter(stringTable: ContextMenuStringTable) {
     this.stringTable = Object.assign(this.stringTable, stringTable);
   }
 
@@ -90,12 +125,9 @@ module.exports = class ContextMenuBuilder {
    * Shows a popup menu given the information returned from the context-menu
    * event. This is probably the only method you need to call in this class.
    *
-   * @param  {Object} contextInfo   The object returned from the 'context-menu'
-   *                                Electron event.
-   *
-   * @return {Promise}              Completion
+   * @param contextInfo The object returned from the 'context-menu' Electron event.
    */
-  async showPopupMenu(contextInfo) {
+  async showPopupMenu(contextInfo: Electron.ContextMenuParams): Promise<void> {
     const menu = await this.buildMenuForElement(contextInfo);
     if (!menu) return;
     menu.popup();
@@ -105,10 +137,10 @@ module.exports = class ContextMenuBuilder {
    * Builds a context menu specific to the given info that _would_ be shown
    * immediately by {{showPopupMenu}}. Use this to add your own menu items to
    * the list but use most of the default behavior.
-   *
-   * @return {Promise<Menu>}      The newly created `Menu`
    */
-  async buildMenuForElement(info) {
+  async buildMenuForElement(
+    info: Electron.ContextMenuParams,
+  ): Promise<Electron.CrossProcessExports.Menu> {
     if (info.linkURL && info.linkURL.length > 0) {
       return this.buildMenuForLink(info);
     }
@@ -132,7 +164,9 @@ module.exports = class ContextMenuBuilder {
    *
    * @return {Menu}  The `Menu`
    */
-  buildMenuForTextInput(menuInfo) {
+  buildMenuForTextInput(
+    menuInfo: Electron.ContextMenuParams,
+  ): Electron.CrossProcessExports.Menu {
     const menu = new Menu();
 
     this.addSpellingItems(menu, menuInfo);
@@ -143,8 +177,10 @@ module.exports = class ContextMenuBuilder {
     this.addPaste(menu, menuInfo);
     this.addPastePlain(menu, menuInfo);
     this.addInspectElement(menu, menuInfo);
+    // @ts-expect-error Expected 1 arguments, but got 2.
     this.processMenu(menu, menuInfo);
 
+    // @ts-expect-error Expected 2 arguments, but got 1.
     this.copyPageUrl(menu);
     this.goToHomePage(menu, menuInfo);
     this.openInBrowser(menu, menuInfo);
@@ -157,7 +193,9 @@ module.exports = class ContextMenuBuilder {
    *
    * @return {Menu}  The `Menu`
    */
-  buildMenuForLink(menuInfo) {
+  buildMenuForLink(
+    menuInfo: Electron.ContextMenuParams,
+  ): Electron.CrossProcessExports.Menu {
     const menu = new Menu();
     const isEmailAddress = menuInfo.linkURL.startsWith('mailto:');
 
@@ -170,6 +208,7 @@ module.exports = class ContextMenuBuilder {
         const url = isEmailAddress ? menuInfo.linkText : menuInfo.linkURL;
         clipboard.writeText(url);
         this._sendNotificationOnClipboardEvent(
+          // @ts-expect-error Property 'clipboardNotifications' does not exist on type 'ContextMenuParams'.
           menuInfo.clipboardNotifications,
           () => `Link URL copied: ${url}`,
         );
@@ -200,11 +239,13 @@ module.exports = class ContextMenuBuilder {
     }
 
     this.addInspectElement(menu, menuInfo);
+    // @ts-expect-error Expected 1 arguments, but got 2.
     this.processMenu(menu, menuInfo);
 
     this.addSeparator(menu);
     this.goBack(menu);
     this.goForward(menu);
+    // @ts-expect-error Expected 2 arguments, but got 1.
     this.copyPageUrl(menu);
     this.goToHomePage(menu, menuInfo);
     this.openInBrowser(menu, menuInfo);
@@ -214,15 +255,16 @@ module.exports = class ContextMenuBuilder {
 
   /**
    * Builds a menu applicable to a text field.
-   *
-   * @return {Menu}  The `Menu`
    */
-  buildMenuForText(menuInfo) {
+  buildMenuForText(
+    menuInfo: Electron.ContextMenuParams,
+  ): Electron.CrossProcessExports.Menu {
     const menu = new Menu();
 
     this.addSearchItems(menu, menuInfo);
     this.addCopy(menu, menuInfo);
     this.addInspectElement(menu, menuInfo);
+    // @ts-expect-error Expected 1 arguments, but got 2.
     this.processMenu(menu, menuInfo);
 
     this.addSeparator(menu);
@@ -240,13 +282,16 @@ module.exports = class ContextMenuBuilder {
    *
    * @return {Menu}  The `Menu`
    */
-  buildMenuForImage(menuInfo) {
+  buildMenuForImage(
+    menuInfo: Electron.ContextMenuParams,
+  ): Electron.CrossProcessExports.Menu {
     const menu = new Menu();
 
     if (this.isSrcUrlValid(menuInfo)) {
       this.addImageItems(menu, menuInfo);
     }
     this.addInspectElement(menu, menuInfo);
+    // @ts-expect-error Expected 1 arguments, but got 2.
     this.processMenu(menu, menuInfo);
 
     return menu;
@@ -256,14 +301,17 @@ module.exports = class ContextMenuBuilder {
    * Checks if the current text selection contains a single misspelled word and
    * if so, adds suggested spellings as individual menu items.
    */
-  addSpellingItems(menu, menuInfo) {
+  addSpellingItems(
+    menu: Electron.CrossProcessExports.Menu,
+    menuInfo: Electron.ContextMenuParams,
+  ) {
     const webContents = this.getWebContents();
     // Add each spelling suggestion
     for (const suggestion of menuInfo.dictionarySuggestions) {
       menu.append(
         new MenuItem({
           label: suggestion,
-          // eslint-disable-next-line no-loop-func
+
           click: () => webContents.replaceMisspelling(suggestion),
         }),
       );
@@ -288,7 +336,10 @@ module.exports = class ContextMenuBuilder {
   /**
    * Adds search-related menu items.
    */
-  addSearchItems(menu, menuInfo) {
+  addSearchItems(
+    menu: Electron.CrossProcessExports.Menu,
+    menuInfo: Electron.ContextMenuParams,
+  ) {
     if (!menuInfo.selectionText || menuInfo.selectionText.length === 0) {
       return menu;
     }
@@ -313,9 +364,11 @@ module.exports = class ContextMenuBuilder {
 
     const search = new MenuItem({
       label: this.stringTable.searchWith({
+        // @ts-expect-error Property 'searchEngine' does not exist on type 'ContextMenuParams'.
         searchEngine: SEARCH_ENGINE_NAMES[menuInfo.searchEngine],
       }),
       click: () => {
+        // @ts-expect-error Property 'searchEngine' does not exist on type 'ContextMenuParams'.
         const url = SEARCH_ENGINE_URLS[menuInfo.searchEngine]({
           searchTerm: encodeURIComponent(menuInfo.selectionText),
         });
@@ -329,22 +382,28 @@ module.exports = class ContextMenuBuilder {
     return menu;
   }
 
-  isSrcUrlValid(menuInfo) {
+  isSrcUrlValid(menuInfo: Electron.ContextMenuParams) {
     return menuInfo.srcURL && menuInfo.srcURL.length > 0;
   }
 
   /**
    * Adds "Copy Image" and "Copy Image URL" items when `src` is valid.
    */
-  addImageItems(menu, menuInfo) {
+  addImageItems(
+    menu: Electron.CrossProcessExports.Menu,
+    menuInfo: Electron.ContextMenuParams,
+  ) {
     const copyImage = new MenuItem({
       label: this.stringTable.copyImage(),
       click: () => {
-        const result = this.convertImageToBase64(menuInfo.srcURL, dataURL =>
-          clipboard.writeImage(nativeImage.createFromDataURL(dataURL)),
+        const result = this.convertImageToBase64(
+          menuInfo.srcURL,
+          (dataURL: string) =>
+            clipboard.writeImage(nativeImage.createFromDataURL(dataURL)),
         );
 
         this._sendNotificationOnClipboardEvent(
+          // @ts-expect-error Property 'clipboardNotifications' does not exist on type 'ContextMenuParams'.
           menuInfo.clipboardNotifications,
           () => `Image copied from URL: ${menuInfo.srcURL}`,
         );
@@ -359,6 +418,7 @@ module.exports = class ContextMenuBuilder {
       click: () => {
         const result = clipboard.writeText(menuInfo.srcURL);
         this._sendNotificationOnClipboardEvent(
+          // @ts-expect-error Property 'clipboardNotifications' does not exist on type 'ContextMenuParams'.
           menuInfo.clipboardNotifications,
           () => `Image URL copied: ${menuInfo.srcURL}`,
         );
@@ -374,7 +434,7 @@ module.exports = class ContextMenuBuilder {
         label: this.stringTable.downloadImage(),
         click: () => {
           const urlWithoutBlob = menuInfo.srcURL.slice(5);
-          this.convertImageToBase64(menuInfo.srcURL, dataURL => {
+          this.convertImageToBase64(menuInfo.srcURL, (dataURL: any) => {
             const url = new window.URL(urlWithoutBlob);
             const fileName = url.pathname.slice(1);
             ipcRenderer.send('download-file', {
@@ -386,6 +446,7 @@ module.exports = class ContextMenuBuilder {
             });
           });
           this._sendNotificationOnClipboardEvent(
+            // @ts-expect-error Property 'clipboardNotifications' does not exist on type 'ContextMenuParams'.
             menuInfo.clipboardNotifications,
             () => `Image downloaded: ${urlWithoutBlob}`,
           );
@@ -401,7 +462,10 @@ module.exports = class ContextMenuBuilder {
   /**
    * Adds the Cut menu item
    */
-  addCut(menu, menuInfo) {
+  addCut(
+    menu: Electron.CrossProcessExports.Menu,
+    menuInfo: Electron.ContextMenuParams,
+  ) {
     const webContents = this.getWebContents();
     menu.append(
       new MenuItem({
@@ -418,7 +482,10 @@ module.exports = class ContextMenuBuilder {
   /**
    * Adds the Copy menu item.
    */
-  addCopy(menu, menuInfo) {
+  addCopy(
+    menu: Electron.CrossProcessExports.Menu,
+    menuInfo: Electron.ContextMenuParams,
+  ) {
     const webContents = this.getWebContents();
     menu.append(
       new MenuItem({
@@ -435,7 +502,10 @@ module.exports = class ContextMenuBuilder {
   /**
    * Adds the Paste menu item.
    */
-  addPaste(menu, menuInfo) {
+  addPaste(
+    menu: Electron.CrossProcessExports.Menu,
+    menuInfo: Electron.ContextMenuParams,
+  ) {
     const webContents = this.getWebContents();
     menu.append(
       new MenuItem({
@@ -449,7 +519,10 @@ module.exports = class ContextMenuBuilder {
     return menu;
   }
 
-  addPastePlain(menu, menuInfo) {
+  addPastePlain(
+    menu: Electron.CrossProcessExports.Menu,
+    menuInfo: Electron.ContextMenuParams,
+  ) {
     if (
       menuInfo.editFlags.canPaste &&
       !menuInfo.linkText &&
@@ -469,7 +542,7 @@ module.exports = class ContextMenuBuilder {
   /**
    * Adds a separator item.
    */
-  addSeparator(menu) {
+  addSeparator(menu: Electron.CrossProcessExports.Menu) {
     menu.append(new MenuItem({ type: 'separator' }));
     return menu;
   }
@@ -477,7 +550,11 @@ module.exports = class ContextMenuBuilder {
   /**
    * Adds the "Inspect Element" menu item.
    */
-  addInspectElement(menu, menuInfo, needsSeparator = true) {
+  addInspectElement(
+    menu: Electron.CrossProcessExports.Menu,
+    menuInfo: Electron.ContextMenuParams,
+    needsSeparator = true,
+  ) {
     const webContents = this.getWebContents();
     if (!this.debugMode) return menu;
     if (needsSeparator) this.addSeparator(menu);
@@ -498,21 +575,30 @@ module.exports = class ContextMenuBuilder {
    * @param  {Function} callback    A callback that will be invoked with the result
    * @param  {String} outputFormat  The image format to use, defaults to 'image/png'
    */
-  convertImageToBase64(url, callback, outputFormat = 'image/png') {
-    let canvas = document.createElement('canvas');
+  convertImageToBase64(
+    url: string,
+    callback: {
+      (dataURL: any): void;
+      (dataURL: any): void;
+      (arg0: string): void;
+    },
+    outputFormat: string = 'image/png',
+  ) {
+    let canvas: HTMLCanvasElement | null = document.createElement('canvas');
     const ctx = canvas.getContext('2d');
-    // eslint-disable-next-line no-undef
     const img = new Image();
     img.crossOrigin = 'Anonymous';
 
     img.addEventListener('load', () => {
-      canvas.height = img.height;
-      canvas.width = img.width;
-      ctx?.drawImage(img, 0, 0);
-
-      const dataURL = canvas.toDataURL(outputFormat);
-      canvas = null;
-      callback(dataURL);
+      if (canvas) {
+        canvas.height = img.height;
+        canvas.width = img.width;
+        ctx?.drawImage(img, 0, 0);
+
+        const dataURL = canvas.toDataURL(outputFormat);
+        canvas = null;
+        callback(dataURL);
+      }
     });
 
     img.src = url;
@@ -521,7 +607,7 @@ module.exports = class ContextMenuBuilder {
   /**
    * Adds the 'go back' menu item
    */
-  goBack(menu) {
+  goBack(menu: Electron.CrossProcessExports.Menu) {
     const webContents = this.getWebContents();
     menu.append(
       new MenuItem({
@@ -538,7 +624,7 @@ module.exports = class ContextMenuBuilder {
   /**
    * Adds the 'go forward' menu item
    */
-  goForward(menu) {
+  goForward(menu: Electron.CrossProcessExports.Menu) {
     const webContents = this.getWebContents();
     menu.append(
       new MenuItem({
@@ -555,7 +641,10 @@ module.exports = class ContextMenuBuilder {
   /**
    * Adds the 'copy page url' menu item.
    */
-  copyPageUrl(menu, menuInfo) {
+  copyPageUrl(
+    menu: Electron.CrossProcessExports.Menu,
+    menuInfo: Electron.ContextMenuParams,
+  ) {
     menu.append(
       new MenuItem({
         label: this.stringTable.copyPageUrl(),
@@ -563,7 +652,8 @@ module.exports = class ContextMenuBuilder {
         click: () => {
           clipboard.writeText(window.location.href);
           this._sendNotificationOnClipboardEvent(
-            menuInfo.clipboardNotifications,
+            // @ts-expect-error Property 'clipboardNotifications' does not exist on type 'ContextMenuParams'.
+            menuInfo?.clipboardNotifications,
             () => `Page URL copied: ${window.location.href}`,
           );
         },
@@ -576,8 +666,11 @@ module.exports = class ContextMenuBuilder {
   /**
    * Adds the 'go to home' menu item.
    */
-  goToHomePage(menu, menuInfo) {
-    const baseURL = new URL(menuInfo.pageURL);
+  goToHomePage(
+    menu: Electron.CrossProcessExports.Menu,
+    menuInfo: Electron.ContextMenuParams,
+  ) {
+    const baseURL = new window.URL(menuInfo.pageURL);
     menu.append(
       new MenuItem({
         label: this.stringTable.goToHomePage(),
@@ -596,7 +689,10 @@ module.exports = class ContextMenuBuilder {
   /**
    * Adds the 'open in browser' menu item.
    */
-  openInBrowser(menu, menuInfo) {
+  openInBrowser(
+    menu: Electron.CrossProcessExports.Menu,
+    menuInfo: Electron.ContextMenuParams,
+  ) {
     menu.append(
       new MenuItem({
         label: this.stringTable.openInBrowser(),
@@ -610,7 +706,10 @@ module.exports = class ContextMenuBuilder {
     return menu;
   }
 
-  _sendNotificationOnClipboardEvent(isDisabled, notificationText) {
+  _sendNotificationOnClipboardEvent(
+    isDisabled: boolean,
+    notificationText: () => string,
+  ) {
     if (isDisabled) {
       return;
     }
@@ -619,4 +718,4 @@ module.exports = class ContextMenuBuilder {
       body: notificationText(),
     });
   }
-};
+}
diff --git a/src/webview/darkmode/custom.js b/src/webview/darkmode/custom.ts
index f767f5755..f767f5755 100644
--- a/src/webview/darkmode/custom.js
+++ b/src/webview/darkmode/custom.ts
diff --git a/src/webview/darkmode/ignore.js b/src/webview/darkmode/ignore.js
deleted file mode 100644
index 110df364f..000000000
--- a/src/webview/darkmode/ignore.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export default [
-  'discordapp.com',
-];
diff --git a/src/webview/darkmode/ignore.ts b/src/webview/darkmode/ignore.ts
new file mode 100644
index 000000000..daa25d10c
--- /dev/null
+++ b/src/webview/darkmode/ignore.ts
@@ -0,0 +1 @@
+export default ['discordapp.com'];
diff --git a/src/webview/find.js b/src/webview/find.ts
index 040811d68..0665d9670 100644
--- a/src/webview/find.js
+++ b/src/webview/find.ts
@@ -3,11 +3,15 @@ import { FindInPage as ElectronFindInPage } from 'electron-find';
 
 // Shim to expose webContents functionality to electron-find without @electron/remote
 const webContentsShim = {
-  findInPage: (text, options = {}) => ipcRenderer.sendSync('find-in-page', text, options),
-  stopFindInPage: (action) => {
+  findInPage: (text: string, options = {}) =>
+    ipcRenderer.sendSync('find-in-page', text, options),
+  stopFindInPage: (action: any) => {
     ipcRenderer.sendSync('stop-find-in-page', action);
   },
-  on: (eventName, listener) => {
+  on: (
+    eventName: string,
+    listener: (arg0: { sender: undefined }, arg1: any) => void,
+  ): void => {
     if (eventName === 'found-in-page') {
       ipcRenderer.on('found-in-page', (_, result) => {
         listener({ sender: this }, result);
diff --git a/src/webview/notifications.js b/src/webview/notifications.ts
index 22960d818..73124b9a9 100644
--- a/src/webview/notifications.js
+++ b/src/webview/notifications.ts
@@ -5,9 +5,10 @@ import { v1 as uuidV1 } from 'uuid';
 const debug = require('debug')('Ferdi:Notifications');
 
 export class NotificationsHandler {
-  onNotify = data => data;
+  onNotify = (data: { title: string; options: any; notificationId: string }) =>
+    data;
 
-  displayNotification(title, options) {
+  displayNotification(title: string, options: any) {
     return new Promise(resolve => {
       debug('New notification', title, options);
 
@@ -23,7 +24,7 @@ export class NotificationsHandler {
       );
 
       ipcRenderer.once(`notification-onclick:${notificationId}`, () => {
-        resolve();
+        resolve(true);
       });
     });
   }
diff --git a/src/webview/screenshare.js b/src/webview/screenshare.ts
index e7e43c04e..91a1623bb 100644
--- a/src/webview/screenshare.js
+++ b/src/webview/screenshare.ts
@@ -9,8 +9,8 @@ export async function getDisplayMediaSelector() {
   return `<div class="desktop-capturer-selection__scroller">
   <ul class="desktop-capturer-selection__list">
     ${sources
-    .map(
-      ({ id, name, thumbnail }) => `
+      .map(
+        ({ id, name, thumbnail }) => `
       <li class="desktop-capturer-selection__item">
         <button class="desktop-capturer-selection__btn" data-id="${id}" title="${name}">
           <img class="desktop-capturer-selection__thumbnail" src="${thumbnail.toDataURL()}" />
@@ -18,8 +18,8 @@ export async function getDisplayMediaSelector() {
         </button>
       </li>
     `,
-    )
-    .join('')}
+      )
+      .join('')}
     <li class="desktop-capturer-selection__item">
       <button class="desktop-capturer-selection__btn" data-id="${CANCEL_ID}" title="Cancel">
         <span class="desktop-capturer-selection__name desktop-capturer-selection__name--cancel">Cancel</span>
diff --git a/src/webview/spellchecker.ts b/src/webview/spellchecker.ts
index 468a1b4ae..ee70589d5 100644
--- a/src/webview/spellchecker.ts
+++ b/src/webview/spellchecker.ts
@@ -5,7 +5,11 @@ import { isMac } from '../environment';
 const debug = require('debug')('Ferdi:spellchecker');
 
 export function getSpellcheckerLocaleByFuzzyIdentifier(identifier: string) {
-  const locales = Object.keys(SPELLCHECKER_LOCALES).filter((key) => key.toLocaleLowerCase() === identifier.toLowerCase() || key.split('-')[0] === identifier.toLowerCase());
+  const locales = Object.keys(SPELLCHECKER_LOCALES).filter(
+    key =>
+      key.toLocaleLowerCase() === identifier.toLowerCase() ||
+      key.split('-')[0] === identifier.toLowerCase(),
+  );
 
   return locales.length > 0 ? locales[0] : null;
 }