Merge branch 'develop' into release

# Conflicts:
#	package-lock.json
#	package.json

72 files changed, 308 insertions, 480 deletions

diff --git a/src/components/auth/AuthLayout.js b/src/components/auth/AuthLayout.js
index f26282cfc..94ff5d54d 100644
--- a/src/components/auth/AuthLayout.js
+++ b/src/components/auth/AuthLayout.js
@@ -19,7 +19,6 @@ import AppUpdateInfoBar from '../AppUpdateInfoBar';
 import { GITHUB_FERDI_URL } from '../../config';
 import { Icon } from '../ui/icon';
 
-@observer
 class AuthLayout extends Component {
   static propTypes = {
     children: oneOrManyChildElements.isRequired,
@@ -107,4 +106,4 @@ class AuthLayout extends Component {
   }
 }
 
-export default injectIntl(AuthLayout);
+export default injectIntl(observer(AuthLayout));
diff --git a/src/components/auth/ChangeServer.js b/src/components/auth/ChangeServer.js
index 9aeebc5c8..4c69b2821 100644
--- a/src/components/auth/ChangeServer.js
+++ b/src/components/auth/ChangeServer.js
@@ -6,6 +6,7 @@ import Form from '../../lib/Form';
 import Input from '../ui/Input';
 import Select from '../ui/Select';
 import Button from '../ui/Button';
+import Link from '../ui/Link';
 import Infobox from '../ui/Infobox';
 import { url, required } from '../../helpers/validation-helpers';
 import { LIVE_FERDI_API, LIVE_FRANZ_API } from '../../config';
@@ -34,7 +35,6 @@ const messages = defineMessages({
   },
 });
 
-@observer
 class ChangeServer extends Component {
   static propTypes = {
     onSubmit: PropTypes.func.isRequired,
@@ -106,6 +106,7 @@ class ChangeServer extends Component {
     return (
       <div className="auth__container">
         <form className="franz-form auth__form" onSubmit={e => this.submit(e)}>
+          <Link to='/auth/welcome'><img src="./assets/images/logo.svg" className="auth__logo" alt="" /></Link>
           <h1>{intl.formatMessage(messages.headline)}</h1>
           {form.$('server').value === this.franzServer && (
             <Infobox type="warning">
@@ -131,4 +132,4 @@ class ChangeServer extends Component {
   }
 }
 
-export default injectIntl(ChangeServer);
+export default injectIntl(observer(ChangeServer));
diff --git a/src/components/auth/Import.js b/src/components/auth/Import.js
index fe2fe9872..8f70318ed 100644
--- a/src/components/auth/Import.js
+++ b/src/components/auth/Import.js
@@ -28,7 +28,6 @@ const messages = defineMessages({
   },
 });
 
-@observer
 class Import extends Component {
   static propTypes = {
     services: MobxPropTypes.arrayOrObservableArray.isRequired,
@@ -166,4 +165,4 @@ class Import extends Component {
   }
 }
 
-export default injectIntl(Import);
+export default injectIntl(observer(Import));
diff --git a/src/components/auth/Invite.js b/src/components/auth/Invite.js
index f23417870..a23af7c6b 100644
--- a/src/components/auth/Invite.js
+++ b/src/components/auth/Invite.js
@@ -43,7 +43,6 @@ const messages = defineMessages({
   },
 });
 
-@observer
 class Invite extends Component {
   static propTypes = {
     onSubmit: PropTypes.func.isRequired,
@@ -125,8 +124,8 @@ class Invite extends Component {
       .some(emailValue => emailValue.trim() !== '');
 
     const sendButtonClassName = classnames({
-      'auth__button': true,
-      'invite__embed--button': embed
+      auth__button: true,
+      'invite__embed--button': embed,
     });
 
     const renderForm = (
@@ -198,4 +197,4 @@ class Invite extends Component {
   }
 }
 
-export default injectIntl(Invite);
+export default injectIntl(observer(Invite));
diff --git a/src/components/auth/Locked.js b/src/components/auth/Locked.js
index 5b36b9fc2..ac1bc4e8c 100644
--- a/src/components/auth/Locked.js
+++ b/src/components/auth/Locked.js
@@ -7,7 +7,6 @@ import { defineMessages, injectIntl } from 'react-intl';
 import Form from '../../lib/Form';
 import Input from '../ui/Input';
 import Button from '../ui/Button';
-import Infobox from '../ui/Infobox';
 import { isMac } from '../../environment';
 
 import { globalError as globalErrorPropType } from '../../prop-types';
@@ -17,11 +16,6 @@ const messages = defineMessages({
     id: 'locked.headline',
     defaultMessage: 'Locked',
   },
-  info: {
-    id: 'locked.info',
-    defaultMessage:
-      'Ferdi is currently locked. Please unlock Ferdi with your password to see your messages.',
-  },
   touchId: {
     id: 'locked.touchId',
     defaultMessage: 'Unlock with Touch ID',
@@ -48,7 +42,6 @@ const messages = defineMessages({
   },
 });
 
-@observer
 class Locked extends Component {
   static propTypes = {
     onSubmit: PropTypes.func.isRequired,
@@ -108,7 +101,6 @@ class Locked extends Component {
         <form className="franz-form auth__form" onSubmit={e => this.submit(e)}>
           <img src="./assets/images/logo.svg" className="auth__logo" alt="" />
           <h1>{intl.formatMessage(messages.headline)}</h1>
-          <Infobox type="warning">{intl.formatMessage(messages.info)}</Infobox>
 
           {touchIdEnabled && (
             <>
@@ -149,4 +141,4 @@ class Locked extends Component {
   }
 }
 
-export default injectIntl(Locked);
+export default injectIntl(observer(Locked));
diff --git a/src/components/auth/Login.js b/src/components/auth/Login.js
index 956205258..bd01f25cd 100644
--- a/src/components/auth/Login.js
+++ b/src/components/auth/Login.js
@@ -5,14 +5,12 @@ import { observer, inject } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
 
 import { LIVE_FRANZ_API } from '../../config';
-import { API_VERSION, isDevMode, useLiveAPI } from '../../environment-remote';
+import { API_VERSION } from '../../environment-remote';
 import Form from '../../lib/Form';
 import { required, email } from '../../helpers/validation-helpers';
-import serverlessLogin from '../../helpers/serverless-helpers';
 import Input from '../ui/Input';
 import Button from '../ui/Button';
 import Link from '../ui/Link';
-import Infobox from '../ui/Infobox';
 
 import { globalError as globalErrorPropType } from '../../prop-types';
 
@@ -57,22 +55,12 @@ const messages = defineMessages({
     id: 'login.link.signup',
     defaultMessage: 'Create a free account',
   },
-  changeServer: {
-    id: 'login.changeServer',
-    defaultMessage: 'Change server',
-  },
-  serverless: {
-    id: 'services.serverless',
-    defaultMessage: 'Use Ferdi without an Account',
-  },
   passwordLink: {
     id: 'login.link.password',
     defaultMessage: 'Reset password',
   },
 });
 
-@inject('actions')
-@observer
 class Login extends Component {
   static propTypes = {
     onSubmit: PropTypes.func.isRequired,
@@ -81,9 +69,7 @@ class Login extends Component {
     isServerLogout: PropTypes.bool.isRequired,
     signupRoute: PropTypes.string.isRequired,
     passwordRoute: PropTypes.string.isRequired,
-    changeServerRoute: PropTypes.string.isRequired,
     error: globalErrorPropType.isRequired,
-    actions: PropTypes.object.isRequired,
   };
 
   form = new Form(
@@ -105,8 +91,6 @@ class Login extends Component {
     this.props.intl,
   );
 
-  emailField = null;
-
   submit(e) {
     e.preventDefault();
     this.form.submit({
@@ -117,10 +101,6 @@ class Login extends Component {
     });
   }
 
-  useLocalServer() {
-    serverlessLogin(this.props.actions);
-  }
-
   render() {
     const { form } = this;
     const { intl } = this.props;
@@ -130,21 +110,14 @@ class Login extends Component {
       isServerLogout,
       signupRoute,
       passwordRoute,
-      changeServerRoute,
       error,
     } = this.props;
 
     return (
       <div className="auth__container">
         <form className="franz-form auth__form" onSubmit={e => this.submit(e)}>
-          <img src="./assets/images/logo.svg" className="auth__logo" alt="" />
+          <Link to='/auth/welcome'><img src="./assets/images/logo.svg" className="auth__logo" alt="" /></Link>
           <h1>{intl.formatMessage(messages.headline)}</h1>
-          {isDevMode && !useLiveAPI && (
-            <Infobox type="warning">
-              In Dev Mode your data is not persistent. Please use the live app
-              for accessing the production API.
-            </Infobox>
-          )}
           {isTokenExpired && (
             <p className="error-message center">
               {intl.formatMessage(messages.tokenExpired)}
@@ -155,13 +128,7 @@ class Login extends Component {
               {intl.formatMessage(messages.serverLogout)}
             </p>
           )}
-          <Input
-            field={form.$('email')}
-            ref={element => {
-              this.emailField = element;
-            }}
-            focus
-          />
+          <Input field={form.$('email')} focus />
           <Input field={form.$('password')} showPasswordToggle />
           {error.code === 'invalid-credentials' && (
             <>
@@ -205,12 +172,6 @@ class Login extends Component {
           )}
         </form>
         <div className="auth__links">
-          <Link to={changeServerRoute}>
-            {intl.formatMessage(messages.changeServer)}
-          </Link>
-          <a onClick={this.useLocalServer.bind(this)}>
-            {intl.formatMessage(messages.serverless)}
-          </a>
           <Link to={signupRoute}>
             {intl.formatMessage(messages.signupLink)}
           </Link>
@@ -223,4 +184,4 @@ class Login extends Component {
   }
 }
 
-export default injectIntl(Login);
+export default injectIntl(inject('actions')(observer(Login)));
diff --git a/src/components/auth/Password.js b/src/components/auth/Password.js
index d5bc7fa80..49930f6bd 100644
--- a/src/components/auth/Password.js
+++ b/src/components/auth/Password.js
@@ -38,7 +38,6 @@ const messages = defineMessages({
   },
 });
 
-@observer
 class Password extends Component {
   static propTypes = {
     onSubmit: PropTypes.func.isRequired,
@@ -79,7 +78,7 @@ class Password extends Component {
     return (
       <div className="auth__container">
         <form className="franz-form auth__form" onSubmit={e => this.submit(e)}>
-          <img src="./assets/images/logo.svg" className="auth__logo" alt="" />
+          <Link to='/auth/welcome'><img src="./assets/images/logo.svg" className="auth__logo" alt="" /></Link>
           <h1>{intl.formatMessage(messages.headline)}</h1>
           {status.length > 0 && status.includes('sent') && (
             <Infobox type="success" icon="checkbox-marked-circle-outline">
@@ -119,4 +118,4 @@ class Password extends Component {
   }
 }
 
-export default injectIntl(Password);
+export default injectIntl(observer(Password));
diff --git a/src/components/auth/SetupAssistant.js b/src/components/auth/SetupAssistant.js
index 1665bf837..a24f4e4d5 100644
--- a/src/components/auth/SetupAssistant.js
+++ b/src/components/auth/SetupAssistant.js
@@ -9,7 +9,7 @@ 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 * as Infobox from '../ui/Infobox';
 import Appear from '../ui/effects/Appear';
 import globalMessages from '../../i18n/globalMessages';
 
@@ -131,8 +131,6 @@ const styles = theme => ({
   },
 });
 
-@injectSheet(styles)
-@observer
 class SetupAssistant extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
@@ -327,4 +325,6 @@ class SetupAssistant extends Component {
   }
 }
 
-export default injectIntl(SetupAssistant);
+export default injectIntl(
+  injectSheet(styles, { injectTheme: true })(observer(SetupAssistant)),
+);
diff --git a/src/components/auth/Signup.js b/src/components/auth/Signup.js
index 00625a3ac..00b387b25 100644
--- a/src/components/auth/Signup.js
+++ b/src/components/auth/Signup.js
@@ -4,14 +4,11 @@ import PropTypes from 'prop-types';
 import { observer, inject } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
 
-import { isDevMode, useLiveAPI } from '../../environment-remote';
 import Form from '../../lib/Form';
 import { required, email, minLength } from '../../helpers/validation-helpers';
-import serverlessLogin from '../../helpers/serverless-helpers';
 import Input from '../ui/Input';
 import Button from '../ui/Button';
 import Link from '../ui/Link';
-import Infobox from '../ui/Infobox';
 
 import { globalError as globalErrorPropType } from '../../prop-types';
 import { termsBase } from '../../api/apiBase';
@@ -61,30 +58,18 @@ const messages = defineMessages({
     id: 'signup.link.login',
     defaultMessage: 'Already have an account, sign in?',
   },
-  changeServer: {
-    id: 'login.changeServer',
-    defaultMessage: 'Change server',
-  },
-  serverless: {
-    id: 'services.serverless',
-    defaultMessage: 'Use Ferdi without an Account',
-  },
   emailDuplicate: {
     id: 'signup.emailDuplicate',
     defaultMessage: 'A user with that email address already exists',
   },
 });
 
-@inject('actions')
-@observer
 class Signup extends Component {
   static propTypes = {
     onSubmit: PropTypes.func.isRequired,
     isSubmitting: PropTypes.bool.isRequired,
     loginRoute: PropTypes.string.isRequired,
-    changeServerRoute: PropTypes.string.isRequired,
     error: globalErrorPropType.isRequired,
-    actions: PropTypes.object.isRequired,
   };
 
   form = new Form(
@@ -126,14 +111,10 @@ class Signup extends Component {
     });
   }
 
-  useLocalServer() {
-    serverlessLogin(this.props.actions);
-  }
-
   render() {
     const { form } = this;
     const { intl } = this.props;
-    const { isSubmitting, loginRoute, error, changeServerRoute } = this.props;
+    const { isSubmitting, loginRoute, error } = this.props;
 
     return (
       <div className="auth__scroll-container">
@@ -142,14 +123,8 @@ class Signup extends Component {
             className="franz-form auth__form"
             onSubmit={e => this.submit(e)}
           >
-            <img src="./assets/images/logo.svg" className="auth__logo" alt="" />
+            <Link to='/auth/welcome'><img src="./assets/images/logo.svg" className="auth__logo" alt="" /></Link>
             <h1>{intl.formatMessage(messages.headline)}</h1>
-            {isDevMode && !useLiveAPI && (
-              <Infobox type="warning">
-                In Dev Mode your data is not persistent. Please use the live app
-                for accesing the production API.
-              </Infobox>
-            )}
             <div className="grid__row">
               <Input field={form.$('firstname')} focus />
               <Input field={form.$('lastname')} />
@@ -201,12 +176,6 @@ class Signup extends Component {
             </p>
           </form>
           <div className="auth__links">
-            <Link to={changeServerRoute}>
-              {intl.formatMessage(messages.changeServer)}
-            </Link>
-            <a onClick={this.useLocalServer.bind(this)}>
-              {intl.formatMessage(messages.serverless)}
-            </a>
             <Link to={loginRoute}>
               {intl.formatMessage(messages.loginLink)}
             </Link>
@@ -217,4 +186,4 @@ class Signup extends Component {
   }
 }
 
-export default injectIntl(Signup);
+export default injectIntl(inject('actions')(observer(Signup)));
diff --git a/src/components/auth/Welcome.js b/src/components/auth/Welcome.js
index 809ec67a7..4f7a5ce30 100644
--- a/src/components/auth/Welcome.js
+++ b/src/components/auth/Welcome.js
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes, inject } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
 import serverlessLogin from '../../helpers/serverless-helpers';
+import { shuffleArray } from '../../helpers/array-helpers';
 
 import Link from '../ui/Link';
 
@@ -16,14 +17,16 @@ const messages = defineMessages({
     id: 'welcome.loginButton',
     defaultMessage: 'Login to your account',
   },
+  changeServer: {
+    id: 'login.changeServer',
+    defaultMessage: 'Change server'
+  },
   serverless: {
     id: 'services.serverless',
     defaultMessage: 'Use Ferdi without an Account',
   },
 });
 
-@inject('actions')
-@observer
 class Login extends Component {
   static propTypes = {
     loginRoute: PropTypes.string.isRequired,
@@ -39,8 +42,10 @@ class Login extends Component {
 
   render() {
     const { intl } = this.props;
-    const { loginRoute, signupRoute, changeServerRoute, recipes } = this.props;
-
+    const { loginRoute, signupRoute, changeServerRoute } = this.props;
+    let { recipes } = this.props;
+    recipes = shuffleArray(recipes);
+    recipes.length = 8 * 2;
     return (
       <div className="welcome">
         <div className="welcome__content">
@@ -61,25 +66,22 @@ class Login extends Component {
           <Link to={loginRoute} className="button">
             {intl.formatMessage(messages.loginButton)}
           </Link>
-          <br />
-          <br />
-          <a className="button" onClick={this.useLocalServer.bind(this)}>
-            {intl.formatMessage(messages.serverless)}
-          </a>
-          <br />
-          <br />
-
           <Link to={changeServerRoute}>
             <span
               style={{
-                textAlign: 'center',
-                width: '100%',
-                cursor: 'pointer',
+                color: '#fff'
               }}
             >
-              Change server
+              {intl.formatMessage(messages.changeServer)}
             </span>
           </Link>
+          <br />
+          <br />
+          <hr />
+          <br />
+          <a className="button" onClick={this.useLocalServer.bind(this)}>
+            {intl.formatMessage(messages.serverless)}
+          </a>
         </div>
         <div className="welcome__featured-services">
           {recipes.map(recipe => (
@@ -93,4 +95,4 @@ class Login extends Component {
   }
 }
 
-export default injectIntl(Login);
+export default injectIntl(inject('actions')(observer(Login)));
diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js
index a31419a5e..084d93ecd 100644
--- a/src/components/layout/AppLayout.js
+++ b/src/components/layout/AppLayout.js
@@ -74,8 +74,6 @@ const toggleFullScreen = () => {
   ipcRenderer.send('window.toolbar-double-clicked');
 };
 
-@injectSheet(styles)
-@observer
 class AppLayout extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
@@ -208,4 +206,6 @@ class AppLayout extends Component {
   }
 }
 
-export default injectIntl(AppLayout);
+export default injectIntl(
+  injectSheet(styles, { injectTheme: true })(observer(AppLayout)),
+);
diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.js
index 728613f42..4f67a8719 100644
--- a/src/components/layout/Sidebar.js
+++ b/src/components/layout/Sidebar.js
@@ -66,8 +66,6 @@ const messages = defineMessages({
   },
 });
 
-@inject('stores', 'actions')
-@observer
 class Sidebar extends Component {
   static propTypes = {
     openSettings: PropTypes.func.isRequired,
@@ -262,4 +260,4 @@ class Sidebar extends Component {
   }
 }
 
-export default injectIntl(Sidebar);
+export default injectIntl(inject('stores', 'actions')(observer(Sidebar)));
diff --git a/src/components/services/content/ConnectionLostBanner.js b/src/components/services/content/ConnectionLostBanner.js
index 5111a081a..5adb22c84 100644
--- a/src/components/services/content/ConnectionLostBanner.js
+++ b/src/components/services/content/ConnectionLostBanner.js
@@ -1,4 +1,4 @@
-import { createRef, Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import injectSheet from 'react-jss';
@@ -68,8 +68,6 @@ const styles = theme => ({
   },
 });
 
-@injectSheet(styles)
-@observer
 class ConnectionLostBanner extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
@@ -77,8 +75,6 @@ class ConnectionLostBanner extends Component {
     reload: PropTypes.func.isRequired,
   };
 
-  inputRef = createRef();
-
   render() {
     const { classes, name, reload } = this.props;
 
@@ -105,4 +101,4 @@ class ConnectionLostBanner extends Component {
   }
 }
 
-export default injectIntl(ConnectionLostBanner);
+export default injectIntl(injectSheet(styles)(observer(ConnectionLostBanner)));
diff --git a/src/components/services/content/ErrorHandlers/WebviewErrorHandler.js b/src/components/services/content/ErrorHandlers/WebviewErrorHandler.js
index 5c93de80f..d605b3a52 100644
--- a/src/components/services/content/ErrorHandlers/WebviewErrorHandler.js
+++ b/src/components/services/content/ErrorHandlers/WebviewErrorHandler.js
@@ -31,8 +31,6 @@ const messages = defineMessages({
   },
 });
 
-@injectSheet(styles)
-@observer
 class WebviewErrorHandler extends Component {
   static propTypes = {
     name: PropTypes.string.isRequired,
@@ -71,4 +69,6 @@ class WebviewErrorHandler extends Component {
   }
 }
 
-export default injectIntl(WebviewErrorHandler);
+export default injectIntl(
+  injectSheet(styles, { injectTheme: true })(observer(WebviewErrorHandler)),
+);
diff --git a/src/components/services/content/ServiceDisabled.js b/src/components/services/content/ServiceDisabled.js
index 476b23235..b4658618e 100644
--- a/src/components/services/content/ServiceDisabled.js
+++ b/src/components/services/content/ServiceDisabled.js
@@ -16,17 +16,12 @@ const messages = defineMessages({
   },
 });
 
-@observer
 class ServiceDisabled extends Component {
   static propTypes = {
     name: PropTypes.string.isRequired,
     enable: PropTypes.func.isRequired,
   };
 
-  countdownInterval = null;
-
-  countdownIntervalTimeout = 1000;
-
   render() {
     const { name, enable } = this.props;
     const { intl } = this.props;
@@ -44,4 +39,4 @@ class ServiceDisabled extends Component {
   }
 }
 
-export default injectIntl(ServiceDisabled);
+export default injectIntl(observer(ServiceDisabled));
diff --git a/src/components/services/content/ServiceView.js b/src/components/services/content/ServiceView.js
index 1bc1fbf5f..3ea36ae97 100644
--- a/src/components/services/content/ServiceView.js
+++ b/src/components/services/content/ServiceView.js
@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-no-useless-fragment */
 import { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { autorun } from 'mobx';
@@ -15,8 +16,6 @@ import SettingsStore from '../../../stores/SettingsStore';
 import WebControlsScreen from '../../../features/webControls/containers/WebControlsScreen';
 import { CUSTOM_WEBSITE_RECIPE_ID } from '../../../config';
 
-@inject('stores', 'actions')
-@observer
 class ServiceView extends Component {
   static propTypes = {
     service: PropTypes.instanceOf(ServiceModel).isRequired,
@@ -65,17 +64,6 @@ class ServiceView extends Component {
     clearTimeout(this.hibernationTimer);
   }
 
-  updateTargetUrl = event => {
-    let visible = true;
-    if (event.url === '' || event.url === '#') {
-      visible = false;
-    }
-    this.setState({
-      targetUrl: event.url,
-      statusBarVisible: visible,
-    });
-  };
-
   render() {
     const {
       detachService,
@@ -121,6 +109,7 @@ class ServiceView extends Component {
             {service.isEnabled &&
               service.isLoading &&
               service.isFirstLoad &&
+              !service.isHibernating &&
               !service.isServiceAccessRestricted && (
                 <WebviewLoader loaded={false} name={service.name} />
               )}
@@ -157,12 +146,12 @@ class ServiceView extends Component {
                 />
               </>
             ) : (
-              <div>
-                <span role="img" aria-label="Sleeping Emoji">
+              <div style={{display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', textAlign: 'center' }}>
+                <span role="img" aria-label="Sleeping Emoji" style={{fontSize: 42}}>
                   😴
-                </span>{' '}
-                This service is currently hibernating. If this page doesn&#x27;t
-                close soon, please try reloading Ferdi.
+                </span><br/><br/>
+                This service is currently hibernating.<br/>
+                Try switching services or reloading Ferdi.
               </div>
             )}
           </>
@@ -173,4 +162,4 @@ class ServiceView extends Component {
   }
 }
 
-export default ServiceView;
+export default inject('stores', 'actions')(observer(ServiceView));
diff --git a/src/components/services/content/ServiceWebview.js b/src/components/services/content/ServiceWebview.js
index 187785f82..12aaf70b7 100644
--- a/src/components/services/content/ServiceWebview.js
+++ b/src/components/services/content/ServiceWebview.js
@@ -9,7 +9,6 @@ import ServiceModel from '../../../models/Service';
 
 const debug = require('debug')('Ferdi:Services');
 
-@observer
 class ServiceWebview extends Component {
   static propTypes = {
     service: PropTypes.instanceOf(ServiceModel).isRequired,
@@ -31,11 +30,13 @@ class ServiceWebview extends Component {
             debug('Service logged a message:', e.message);
           });
           this.webview.view.addEventListener('did-navigate', () => {
-            document.title = `Ferdi - ${this.props.service.name} ${
-              this.props.service.dialogTitle
-                ? ` - ${this.props.service.dialogTitle}`
-                : ''
-            } ${`- ${this.props.service._webview.getTitle()}`}`;
+            if (this.props.service._webview) {
+              document.title = `Ferdi - ${this.props.service.name} ${
+                this.props.service.dialogTitle
+                  ? ` - ${this.props.service.dialogTitle}`
+                  : ''
+              } ${`- ${this.props.service._webview.getTitle()}`}`;
+            }
           });
         }
       },
@@ -108,10 +109,10 @@ class ServiceWebview extends Component {
         nodeintegration
         webpreferences={`spellcheck=${
           isSpellcheckerEnabled ? 1 : 0
-        }, contextIsolation=1, enableRemoteModule=1`}
+        }, contextIsolation=1, nativeWindowOpen=1, enableRemoteModule=1`}
       />
     );
   }
 }
 
-export default ServiceWebview;
+export default observer(ServiceWebview);
diff --git a/src/components/services/content/Services.js b/src/components/services/content/Services.js
index 1edf31bd3..cbc70563d 100644
--- a/src/components/services/content/Services.js
+++ b/src/components/services/content/Services.js
@@ -12,10 +12,6 @@ import Appear from '../../ui/effects/Appear';
 import serverlessLogin from '../../../helpers/serverless-helpers';
 
 const messages = defineMessages({
-  welcome: {
-    id: 'services.welcome',
-    defaultMessage: 'Welcome to Ferdi',
-  },
   getStarted: {
     id: 'services.getStarted',
     defaultMessage: 'Get started',
@@ -44,9 +40,6 @@ const styles = {
   },
 };
 
-@injectSheet(styles)
-@inject('actions')
-@observer
 class Services extends Component {
   static propTypes = {
     services: MobxPropTypes.arrayOrObservableArray,
@@ -132,11 +125,10 @@ class Services extends Component {
           <Appear timeout={1500} transitionName="slideUp">
             <div className="services__no-service">
               <img
-                src="./assets/images/logo.svg"
+                src="./assets/images/logo-beard-only.svg"
                 alt="Logo"
                 style={{ maxHeight: '50vh' }}
               />
-              <h1>{intl.formatMessage(messages.welcome)}</h1>
               {!isLoggedIn && (
                 <>
                   <p>{intl.formatMessage(messages.login)}</p>
@@ -197,4 +189,8 @@ class Services extends Component {
   }
 }
 
-export default injectIntl(Services);
+export default injectIntl(
+  injectSheet(styles, { injectTheme: true })(
+    inject('actions')(observer(Services)),
+  ),
+);
diff --git a/src/components/services/content/WebviewCrashHandler.js b/src/components/services/content/WebviewCrashHandler.js
index 3607435b3..1ca5ba415 100644
--- a/src/components/services/content/WebviewCrashHandler.js
+++ b/src/components/services/content/WebviewCrashHandler.js
@@ -26,7 +26,6 @@ const messages = defineMessages({
   },
 });
 
-@observer
 class WebviewCrashHandler extends Component {
   static propTypes = {
     name: PropTypes.string.isRequired,
@@ -81,4 +80,4 @@ class WebviewCrashHandler extends Component {
   }
 }
 
-export default injectIntl(WebviewCrashHandler);
+export default injectIntl(observer(WebviewCrashHandler));
diff --git a/src/components/services/tabs/TabBarSortableList.js b/src/components/services/tabs/TabBarSortableList.js
index 3049b6efa..e01461e5c 100644
--- a/src/components/services/tabs/TabBarSortableList.js
+++ b/src/components/services/tabs/TabBarSortableList.js
@@ -5,7 +5,6 @@ import { SortableContainer } from 'react-sortable-hoc';
 
 import TabItem from './TabItem';
 
-@observer
 class TabBarSortableList extends Component {
   static propTypes = {
     services: MobxPropTypes.arrayOrObservableArray.isRequired,
@@ -75,4 +74,4 @@ class TabBarSortableList extends Component {
   }
 }
 
-export default SortableContainer(TabBarSortableList);
+export default SortableContainer(observer(TabBarSortableList));
diff --git a/src/components/services/tabs/TabItem.js b/src/components/services/tabs/TabItem.js
index 5381d7c2b..f5ced7a31 100644
--- a/src/components/services/tabs/TabItem.js
+++ b/src/components/services/tabs/TabItem.js
@@ -114,9 +114,6 @@ const styles = {
   },
 };
 
-@injectSheet(styles)
-@inject('stores')
-@observer
 class TabItem extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
@@ -239,6 +236,7 @@ class TabItem extends Component {
         label: intl.formatMessage(messages.reload),
         click: reload,
         accelerator: `${cmdOrCtrlShortcutKey()}+R`,
+        enabled: service.isEnabled,
       },
       {
         label: intl.formatMessage(globalMessages.edit),
@@ -256,6 +254,7 @@ class TabItem extends Component {
           : intl.formatMessage(messages.enableNotifications),
         click: () => toggleNotifications(),
         accelerator: `${cmdOrCtrlShortcutKey()}+${altKey()}+N`,
+        enabled: service.isEnabled,
       },
       {
         label: service.isMuted
@@ -263,6 +262,7 @@ class TabItem extends Component {
           : intl.formatMessage(messages.disableAudio),
         click: () => toggleAudio(),
         accelerator: `${cmdOrCtrlShortcutKey()}+${shiftKey()}+A`,
+        enabled: service.isEnabled,
       },
       {
         label: service.isDarkModeEnabled
@@ -270,13 +270,14 @@ class TabItem extends Component {
           : intl.formatMessage(messages.enableDarkMode),
         click: () => toggleDarkMode(),
         accelerator: `${shiftKey()}+${altKey()}+D`,
+        enabled: service.isEnabled,
       },
       {
         label: intl.formatMessage(
           service.isEnabled ? messages.disableService : messages.enableService,
         ),
         click: () => (service.isEnabled ? disableService() : enableService()),
-       accelerator: `${cmdOrCtrlShortcutKey()}+${shiftKey()}+S`,
+        accelerator: `${cmdOrCtrlShortcutKey()}+${shiftKey()}+S`,
       },
       {
         label: intl.formatMessage(
@@ -287,7 +288,7 @@ class TabItem extends Component {
         // eslint-disable-next-line no-confusing-arrow
         click: () =>
           service.isHibernating ? wakeUpService() : hibernateService(),
-        enabled: service.canHibernate,
+        enabled: service.isEnabled && service.canHibernate,
       },
       {
         type: 'separator',
@@ -402,4 +403,10 @@ class TabItem extends Component {
   }
 }
 
-export default injectIntl(SortableElement(TabItem));
+export default injectIntl(
+  SortableElement(
+    injectSheet(styles, { injectTheme: true })(
+      inject('stores')(observer(TabItem)),
+    ),
+  ),
+);
diff --git a/src/components/services/tabs/Tabbar.js b/src/components/services/tabs/Tabbar.js
index 94d6f33c1..d9e11df41 100644
--- a/src/components/services/tabs/Tabbar.js
+++ b/src/components/services/tabs/Tabbar.js
@@ -4,7 +4,6 @@ import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 
 import TabBarSortableList from './TabBarSortableList';
 
-@observer
 class TabBar extends Component {
   static propTypes = {
     services: MobxPropTypes.arrayOrObservableArray.isRequired,
@@ -120,4 +119,4 @@ class TabBar extends Component {
   }
 }
 
-export default TabBar;
+export default observer(TabBar);
diff --git a/src/components/settings/SettingsLayout.js b/src/components/settings/SettingsLayout.js
index e9119a944..de13e95ab 100644
--- a/src/components/settings/SettingsLayout.js
+++ b/src/components/settings/SettingsLayout.js
@@ -16,7 +16,6 @@ const messages = defineMessages({
   },
 });
 
-@observer
 class SettingsLayout extends Component {
   static propTypes = {
     navigation: PropTypes.element.isRequired,
@@ -78,4 +77,4 @@ class SettingsLayout extends Component {
   }
 }
 
-export default injectIntl(SettingsLayout);
+export default injectIntl(observer(SettingsLayout));
diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js
index 6c489e64b..d0c56af05 100644
--- a/src/components/settings/account/AccountDashboard.js
+++ b/src/components/settings/account/AccountDashboard.js
@@ -64,7 +64,6 @@ const messages = defineMessages({
   },
 });
 
-@observer
 class AccountDashboard extends Component {
   static propTypes = {
     user: MobxPropTypes.observableObject.isRequired,
@@ -229,4 +228,4 @@ class AccountDashboard extends Component {
   }
 }
 
-export default injectIntl(AccountDashboard);
+export default injectIntl(observer(AccountDashboard));
diff --git a/src/components/settings/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.js
index dbb1365b0..2fdb6e574 100644
--- a/src/components/settings/navigation/SettingsNavigation.js
+++ b/src/components/settings/navigation/SettingsNavigation.js
@@ -42,8 +42,6 @@ const messages = defineMessages({
   },
 });
 
-@inject('stores', 'actions')
-@observer
 class SettingsNavigation extends Component {
   static propTypes = {
     stores: PropTypes.shape({
@@ -175,4 +173,4 @@ class SettingsNavigation extends Component {
   }
 }
 
-export default injectIntl(SettingsNavigation);
+export default injectIntl(inject('stores', 'actions')(observer(SettingsNavigation)));
diff --git a/src/components/settings/recipes/RecipeItem.js b/src/components/settings/recipes/RecipeItem.js
index 1e910e6dc..df5b42222 100644
--- a/src/components/settings/recipes/RecipeItem.js
+++ b/src/components/settings/recipes/RecipeItem.js
@@ -4,7 +4,6 @@ import { observer } from 'mobx-react';
 
 import RecipePreviewModel from '../../../models/RecipePreview';
 
-@observer
 class RecipeItem extends Component {
   static propTypes = {
     recipe: PropTypes.instanceOf(RecipePreviewModel).isRequired,
@@ -31,4 +30,4 @@ class RecipeItem extends Component {
   }
 }
 
-export default RecipeItem;
+export default observer(RecipeItem);
diff --git a/src/components/settings/recipes/RecipesDashboard.js b/src/components/settings/recipes/RecipesDashboard.js
index dcf7a4784..0ba295369 100644
--- a/src/components/settings/recipes/RecipesDashboard.js
+++ b/src/components/settings/recipes/RecipesDashboard.js
@@ -51,7 +51,8 @@ const messages = defineMessages({
   },
   customRecipeIntro: {
     id: 'settings.recipes.customService.intro',
-    defaultMessage: 'To add a custom service, copy the service recipe to:',
+    defaultMessage:
+      'To add a custom service, copy the service recipe folder inside:',
   },
   openFolder: {
     id: 'settings.recipes.customService.openFolder',
@@ -104,8 +105,6 @@ const styles = {
   },
 };
 
-@injectSheet(styles)
-@observer
 class RecipesDashboard extends Component {
   static propTypes = {
     recipes: MobxPropTypes.arrayOrObservableArray.isRequired,
@@ -236,28 +235,6 @@ class RecipesDashboard extends Component {
                 <H3>{intl.formatMessage(messages.headlineCommunityRecipes)}</H3>
               )}
               <div className="recipes__list">
-                {recipes.length === 0 && recipeFilter !== 'dev' && (
-                  <div className="align-middle settings__empty-state">
-                    <span className="emoji">
-                      <img src="./assets/images/emoji/dontknow.png" alt="" />
-                    </span>
-
-                    <p className="settings__empty-state-text">
-                      {intl.formatMessage(messages.nothingFound)}
-                    </p>
-
-                    <RecipeItem
-                      key={customWebsiteRecipe.id}
-                      recipe={customWebsiteRecipe}
-                      onClick={() =>
-                        isLoggedIn &&
-                        showAddServiceInterface({
-                          recipeId: customWebsiteRecipe.id,
-                        })
-                      }
-                    />
-                  </div>
-                )}
                 {communityRecipes.map(recipe => (
                   <RecipeItem
                     key={recipe.id}
@@ -269,6 +246,25 @@ class RecipesDashboard extends Component {
                   />
                 ))}
               </div>
+              {recipes.length === 0 && recipeFilter !== 'dev' && (
+                <div className="align-middle settings__empty-state">
+                  {customWebsiteRecipe && customWebsiteRecipe.id && (
+                    <RecipeItem
+                      key={customWebsiteRecipe.id}
+                      recipe={customWebsiteRecipe}
+                      onClick={() =>
+                        isLoggedIn &&
+                        showAddServiceInterface({
+                          recipeId: customWebsiteRecipe.id,
+                        })
+                      }
+                    />
+                  )}
+                  <p className="settings__empty-state-text">
+                    {intl.formatMessage(messages.nothingFound)}
+                  </p>
+                </div>
+              )}
               {recipeFilter === 'dev' && devRecipes.length > 0 && (
                 <div className={classes.devRecipeList}>
                   <H3>{intl.formatMessage(messages.headlineDevRecipes)}</H3>
@@ -294,4 +290,6 @@ class RecipesDashboard extends Component {
   }
 }
 
-export default injectIntl(RecipesDashboard);
+export default injectIntl(
+  injectSheet(styles, { injectTheme: true })(observer(RecipesDashboard)),
+);
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index 2c451d7bf..f0e791b87 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -134,7 +134,6 @@ const messages = defineMessages({
   },
 });
 
-@observer
 class EditServiceForm extends Component {
   static propTypes = {
     recipe: PropTypes.instanceOf(Recipe).isRequired,
@@ -182,6 +181,7 @@ class EditServiceForm extends Component {
           this.setState({ isValidatingCustomUrl: true });
           try {
             values.customUrl = normalizeUrl(values.customUrl, {
+              stripAuthentication: false,
               stripWWW: false,
               removeTrailingSlash: false,
             });
@@ -499,4 +499,4 @@ class EditServiceForm extends Component {
   }
 }
 
-export default injectIntl(EditServiceForm);
+export default injectIntl(observer(EditServiceForm));
diff --git a/src/components/settings/services/ServiceError.js b/src/components/settings/services/ServiceError.js
index 6dd53a102..bcbbca3de 100644
--- a/src/components/settings/services/ServiceError.js
+++ b/src/components/settings/services/ServiceError.js
@@ -25,7 +25,6 @@ const messages = defineMessages({
   },
 });
 
-@observer
 class ServiceError extends Component {
   render() {
     const { intl } = this.props;
@@ -60,4 +59,4 @@ class ServiceError extends Component {
   }
 }
 
-export default injectIntl(ServiceError);
+export default injectIntl(observer(ServiceError));
diff --git a/src/components/settings/services/ServiceItem.js b/src/components/settings/services/ServiceItem.js
index d83e5fd56..23250ad09 100644
--- a/src/components/settings/services/ServiceItem.js
+++ b/src/components/settings/services/ServiceItem.js
@@ -24,7 +24,6 @@ const messages = defineMessages({
   },
 });
 
-@observer
 class ServiceItem extends Component {
   static propTypes = {
     service: PropTypes.instanceOf(ServiceModel).isRequired,
@@ -91,4 +90,4 @@ class ServiceItem extends Component {
   }
 }
 
-export default injectIntl(ServiceItem);
+export default injectIntl(observer(ServiceItem));
diff --git a/src/components/settings/services/ServicesDashboard.js b/src/components/settings/services/ServicesDashboard.js
index aae6eb855..b405593fd 100644
--- a/src/components/settings/services/ServicesDashboard.js
+++ b/src/components/settings/services/ServicesDashboard.js
@@ -27,7 +27,7 @@ const messages = defineMessages({
   noServiceFound: {
     id: 'settings.services.nothingFound',
     defaultMessage:
-      '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.',
+      'Sorry, but no service matched your search term.',
   },
   discoverServices: {
     id: 'settings.services.discoverServices',
@@ -51,7 +51,6 @@ const messages = defineMessages({
   },
 });
 
-@observer
 class ServicesDashboard extends Component {
   static propTypes = {
     services: MobxPropTypes.arrayOrObservableArray.isRequired,
@@ -188,4 +187,4 @@ class ServicesDashboard extends Component {
   }
 }
 
-export default injectIntl(ServicesDashboard);
+export default injectIntl(observer(ServicesDashboard));
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index 7e86ea79a..1757ac297 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -5,7 +5,7 @@ import { observer } from 'mobx-react';
 import prettyBytes from 'pretty-bytes';
 import { defineMessages, injectIntl } from 'react-intl';
 
-import { mdiGithub, mdiInformation, mdiOpenInNew } from '@mdi/js';
+import { mdiGithub, mdiOpenInNew } from '@mdi/js';
 import Form from '../../../lib/Form';
 import Button from '../../ui/Button';
 import Toggle from '../../ui/Toggle';
@@ -17,6 +17,8 @@ import {
   DEFAULT_APP_SETTINGS,
   FRANZ_TRANSLATION,
   GITHUB_FRANZ_URL,
+  SPLIT_COLUMNS_MAX,
+  SPLIT_COLUMNS_MIN,
 } from '../../../config';
 import { isMac, isWindows, lockFerdiShortcutKey } from '../../../environment';
 import {
@@ -173,16 +175,14 @@ const messages = defineMessages({
     id: 'settings.app.restartRequired',
     defaultMessage: 'Changes require restart',
   },
-  languageDisclaimer: {
-    id: 'settings.app.languageDisclaimer',
-    defaultMessage:
-      'Official translations are English & German. All other languages are community based translations.',
+  numberOfColumns: {
+    id: 'settings.app.form.splitColumns',
+    defaultMessage: 'Number of columns',
   },
 });
 
 const Hr = () => <hr style={{ marginBottom: 20 }} />;
 
-@observer
 class EditSettingsForm extends Component {
   static propTypes = {
     checkForUpdates: PropTypes.func.isRequired,
@@ -200,6 +200,7 @@ class EditSettingsForm extends Component {
     automaticUpdates: PropTypes.bool.isRequired,
     isDarkmodeEnabled: PropTypes.bool.isRequired,
     isAdaptableDarkModeEnabled: PropTypes.bool.isRequired,
+    isSplitModeEnabled: PropTypes.bool.isRequired,
     isNightlyEnabled: PropTypes.bool.isRequired,
     hasAddedTodosAsService: PropTypes.bool.isRequired,
     isOnline: PropTypes.bool.isRequired,
@@ -246,6 +247,7 @@ class EditSettingsForm extends Component {
       getCacheSize,
       automaticUpdates,
       isDarkmodeEnabled,
+      isSplitModeEnabled,
       isTodosActivated,
       isNightlyEnabled,
       hasAddedTodosAsService,
@@ -412,10 +414,8 @@ class EditSettingsForm extends Component {
 
                 <Hr />
 
-                <>
-                  <Toggle field={form.$('keepAllWorkspacesLoaded')} />
-                  <Hr />
-                </>
+                <Toggle field={form.$('keepAllWorkspacesLoaded')} />
+                <Hr />
 
                 {!hasAddedTodosAsService && (
                   <>
@@ -540,6 +540,16 @@ class EditSettingsForm extends Component {
                 <Hr />
 
                 <Toggle field={form.$('splitMode')} />
+                {isSplitModeEnabled && (
+                  <Input
+                    type="number"
+                    min={SPLIT_COLUMNS_MIN}
+                    max={SPLIT_COLUMNS_MAX}
+                    placeholder={`${SPLIT_COLUMNS_MIN}-${SPLIT_COLUMNS_MAX}`}
+                    onChange={e => this.submit(e)}
+                    field={form.$('splitColumns')}
+                  />
+                )}
 
                 <Hr />
 
@@ -800,27 +810,22 @@ class EditSettingsForm extends Component {
                 )}
                 <p className="settings__message">
                   <Icon icon={mdiGithub} />
-                  <span>
-                    Ferdi is based on{' '}
-                    <a
-                      href={`${GITHUB_FRANZ_URL}/franz`}
-                      target="_blank"
-                      rel="noreferrer"
-                    >
-                      Franz
-                    </a>
-                    , a project published under the{' '}
-                    <a
-                      href={`${GITHUB_FRANZ_URL}/franz/blob/master/LICENSE`}
-                      target="_blank"
-                      rel="noreferrer"
-                    >
-                      Apache-2.0 License
-                    </a>
-                  </span>
-                  <br />
-                  <Icon icon={mdiInformation} />
-                  {intl.formatMessage(messages.languageDisclaimer)}
+                  Ferdi is based on{' '}
+                  <a
+                    href={`${GITHUB_FRANZ_URL}/franz`}
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    Franz
+                  </a>
+                  , a project published under the{' '}
+                  <a
+                    href={`${GITHUB_FRANZ_URL}/franz/blob/master/LICENSE`}
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    Apache-2.0 License
+                  </a>
                 </p>
               </div>
             )}
@@ -831,4 +836,4 @@ class EditSettingsForm extends Component {
   }
 }
 
-export default injectIntl(EditSettingsForm);
+export default injectIntl(observer(EditSettingsForm));
diff --git a/src/components/settings/supportFerdi/SupportFerdiDashboard.tsx b/src/components/settings/supportFerdi/SupportFerdiDashboard.tsx
index 88e936b71..acebc979f 100644
--- a/src/components/settings/supportFerdi/SupportFerdiDashboard.tsx
+++ b/src/components/settings/supportFerdi/SupportFerdiDashboard.tsx
@@ -1,7 +1,5 @@
 import { defineMessages, useIntl } from 'react-intl';
-import { BrowserWindow } from '@electron/remote';
 import { mdiOpenInNew } from '@mdi/js';
-import InfoBar from '../../ui/InfoBar';
 import { Icon } from '../../ui/icon';
 
 const messages = defineMessages({
@@ -9,10 +7,6 @@ const messages = defineMessages({
     id: 'settings.supportFerdi.headline',
     defaultMessage: 'About Ferdi',
   },
-  title: {
-    id: 'settings.supportFerdi.title',
-    defaultMessage: 'Do you like Ferdi?',
-  },
   aboutIntro: {
     id: 'settings.supportFerdi.aboutIntro',
     defaultMessage:
@@ -62,26 +56,8 @@ const messages = defineMessages({
     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();
 
@@ -95,7 +71,6 @@ const SupportFerdiDashboard = () => {
         </span>
       </div>
       <div className="settings__body">
-        <h1>{intl.formatMessage(messages.title)}</h1>
         <div>
           <p className="settings__support-badges">
             <a
@@ -219,14 +194,6 @@ const SupportFerdiDashboard = () => {
           </p>
         </div>
       </div>
-      <InfoBar
-        sticky
-        type="primary"
-        ctaLabel={intl.formatMessage(messages.openSurvey)}
-        onClick={openSurveyWindow}
-      >
-        {intl.formatMessage(messages.bannerText)}
-      </InfoBar>
     </div>
   );
 };
diff --git a/src/components/settings/team/TeamDashboard.js b/src/components/settings/team/TeamDashboard.js
index 4a1a02571..802284051 100644
--- a/src/components/settings/team/TeamDashboard.js
+++ b/src/components/settings/team/TeamDashboard.js
@@ -90,8 +90,6 @@ const styles = {
   },
 };
 
-@injectSheet(styles)
-@observer
 class TeamDashboard extends Component {
   static propTypes = {
     isLoading: PropTypes.bool.isRequired,
@@ -136,40 +134,34 @@ class TeamDashboard extends Component {
               </Infobox>
             )}
 
-            {!userInfoRequestFailed && (
+            {!userInfoRequestFailed && !isLoading && (
               <>
-                {!isLoading && (
-                  <>
-                    <>
-                      <h1
-                        className={classnames({
-                          [classes.headline]: true,
-                          [classes.headlineWithSpacing]: true,
-                        })}
-                      >
-                        {intl.formatMessage(messages.contentHeadline)}
-                      </h1>
-                      <div className={classes.container}>
-                        <div className={classes.content}>
-                          <p>{intl.formatMessage(messages.intro)}</p>
-                          <p>{intl.formatMessage(messages.copy)}</p>
-                        </div>
-                        <img
-                          className={classes.image}
-                          src="https://cdn.franzinfra.com/announcements/assets/teams.png"
-                          alt="Ferdi for Teams"
-                        />
-                      </div>
-                      <div className={classes.buttonContainer}>
-                        <Button
-                          label={intl.formatMessage(messages.manageButton)}
-                          onClick={openTeamManagement}
-                          className={classes.cta}
-                        />
-                      </div>
-                    </>
-                  </>
-                )}
+                <h1
+                  className={classnames({
+                    [classes.headline]: true,
+                    [classes.headlineWithSpacing]: true,
+                  })}
+                >
+                  {intl.formatMessage(messages.contentHeadline)}
+                </h1>
+                <div className={classes.container}>
+                  <div className={classes.content}>
+                    <p>{intl.formatMessage(messages.intro)}</p>
+                    <p>{intl.formatMessage(messages.copy)}</p>
+                  </div>
+                  <img
+                    className={classes.image}
+                    src="https://cdn.franzinfra.com/announcements/assets/teams.png"
+                    alt="Ferdi for Teams"
+                  />
+                </div>
+                <div className={classes.buttonContainer}>
+                  <Button
+                    label={intl.formatMessage(messages.manageButton)}
+                    onClick={openTeamManagement}
+                    className={classes.cta}
+                  />
+                </div>
               </>
             )}
           </div>
@@ -203,4 +195,6 @@ class TeamDashboard extends Component {
   }
 }
 
-export default injectIntl(TeamDashboard);
+export default injectIntl(
+  injectSheet(styles, { injectTheme: true })(observer(TeamDashboard)),
+);
diff --git a/src/components/settings/user/EditUserForm.js b/src/components/settings/user/EditUserForm.js
index 1b8a4f25a..95498d9bb 100644
--- a/src/components/settings/user/EditUserForm.js
+++ b/src/components/settings/user/EditUserForm.js
@@ -37,7 +37,6 @@ const messages = defineMessages({
   },
 });
 
-@observer
 class EditUserForm extends Component {
   static propTypes = {
     status: MobxPropTypes.observableArray.isRequired,
@@ -128,4 +127,4 @@ class EditUserForm extends Component {
   }
 }
 
-export default injectIntl(EditUserForm);
+export default injectIntl(observer(EditUserForm));
diff --git a/src/components/ui/AppLoader/index.tsx b/src/components/ui/AppLoader/index.tsx
index c7c290a57..e80371e47 100644
--- a/src/components/ui/AppLoader/index.tsx
+++ b/src/components/ui/AppLoader/index.tsx
@@ -1,7 +1,7 @@
 import { Component } from 'react';
-import injectSheet, { withTheme } from 'react-jss';
 import classnames from 'classnames';
 
+import injectStyle from 'react-jss';
 import FullscreenLoader from '../FullscreenLoader';
 import { shuffleArray } from '../../../helpers/array-helpers';
 
@@ -24,8 +24,6 @@ type Props = {
   texts: string[];
 };
 
-@injectSheet(styles)
-@withTheme
 class AppLoader extends Component<Props> {
   static defaultProps = {
     texts: textList,
@@ -57,7 +55,6 @@ class AppLoader extends Component<Props> {
 
     return (
       <FullscreenLoader
-        title="Ferdi"
         className={classes.component}
         spinnerColor={theme.colorAppLoaderSpinner}
       >
@@ -77,4 +74,4 @@ class AppLoader extends Component<Props> {
   }
 }
 
-export default AppLoader;
+export default injectStyle(styles, { injectTheme: true })(AppLoader);
diff --git a/src/components/ui/Button.js b/src/components/ui/Button.js
index 67c801d98..a52f1cadb 100644
--- a/src/components/ui/Button.js
+++ b/src/components/ui/Button.js
@@ -4,8 +4,6 @@ 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,
@@ -35,8 +33,6 @@ class Button extends Component {
     htmlForm: '',
   };
 
-  element = null;
-
   render() {
     const {
       label,
@@ -92,4 +88,4 @@ class Button extends Component {
   }
 }
 
-export default Button;
+export default inject('stores')(observer(Button));
diff --git a/src/components/ui/FAB.tsx b/src/components/ui/FAB.tsx
index 583c9d556..cb9c5f126 100644
--- a/src/components/ui/FAB.tsx
+++ b/src/components/ui/FAB.tsx
@@ -14,7 +14,6 @@ type Props = {
   htmlForm: string;
 };
 
-@observer
 class Button extends Component<Props> {
   static defaultProps = {
     disabled: false,
@@ -23,8 +22,6 @@ class Button extends Component<Props> {
     htmlForm: '',
   };
 
-  element = null;
-
   render() {
     const { className, disabled, onClick, type, children, htmlForm } =
       this.props;
@@ -48,4 +45,4 @@ class Button extends Component<Props> {
   }
 }
 
-export default Button;
+export default observer(Button);
diff --git a/src/components/ui/FullscreenLoader/index.js b/src/components/ui/FullscreenLoader/index.js
index f5943f3f3..39b6c5a4c 100644
--- a/src/components/ui/FullscreenLoader/index.js
+++ b/src/components/ui/FullscreenLoader/index.js
@@ -1,16 +1,13 @@
 import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
-import injectSheet, { withTheme } from 'react-jss';
+import injectStyle from 'react-jss';
 import classnames from 'classnames';
 
 import Loader from '../Loader';
 
 import styles from './styles';
 
-@withTheme
-@injectSheet(styles)
-@observer
 class FullscreenLoader extends Component {
   static propTypes = {
     className: PropTypes.string,
@@ -48,4 +45,6 @@ class FullscreenLoader extends Component {
   }
 }
 
-export default FullscreenLoader;
+export default injectStyle(styles, { injectTheme: true })(
+  observer(FullscreenLoader),
+);
diff --git a/src/components/ui/ImageUpload.tsx b/src/components/ui/ImageUpload.tsx
index 118e6b206..b07e211c2 100644
--- a/src/components/ui/ImageUpload.tsx
+++ b/src/components/ui/ImageUpload.tsx
@@ -2,7 +2,7 @@ import { Component } from 'react';
 import { observer } from 'mobx-react';
 import { Field } from 'mobx-react-form';
 import classnames from 'classnames';
-import Dropzone, { DropzoneRef } from 'react-dropzone';
+import Dropzone from 'react-dropzone';
 import { mdiDelete, mdiFileImage } from '@mdi/js';
 import { isWindows } from '../../environment';
 import { Icon } from './icon';
@@ -15,7 +15,6 @@ type Props = {
   textUpload: string;
 };
 
-@observer
 class ImageUpload extends Component<Props> {
   static defaultProps = {
     multiple: false,
@@ -25,8 +24,6 @@ class ImageUpload extends Component<Props> {
     path: null,
   };
 
-  dropzoneRef: DropzoneRef | null = null;
-
   onDrop(acceptedFiles) {
     const { field } = this.props;
 
@@ -85,9 +82,6 @@ class ImageUpload extends Component<Props> {
             </>
           ) : (
             <Dropzone
-              ref={node => {
-                this.dropzoneRef = node;
-              }}
               onDrop={this.onDrop.bind(this)}
               multiple={multiple}
               accept="image/jpeg, image/png, image/svg+xml"
@@ -107,4 +101,4 @@ class ImageUpload extends Component<Props> {
   }
 }
 
-export default ImageUpload;
+export default observer(ImageUpload);
diff --git a/src/components/ui/InfoBar.js b/src/components/ui/InfoBar.js
index 89b085907..c1a6013c2 100644
--- a/src/components/ui/InfoBar.js
+++ b/src/components/ui/InfoBar.js
@@ -16,7 +16,6 @@ const messages = defineMessages({
   },
 });
 
-@observer
 class InfoBar extends Component {
   static propTypes = {
     // eslint-disable-next-line react/forbid-prop-types
@@ -102,4 +101,4 @@ class InfoBar extends Component {
   }
 }
 
-export default injectIntl(InfoBar);
+export default injectIntl(observer(InfoBar));
diff --git a/src/components/ui/Infobox.js b/src/components/ui/Infobox.js
index c0ba8f13c..6634a6808 100644
--- a/src/components/ui/Infobox.js
+++ b/src/components/ui/Infobox.js
@@ -19,7 +19,6 @@ const messages = defineMessages({
   },
 });
 
-@observer
 class Infobox extends Component {
   static propTypes = {
     // eslint-disable-next-line react/forbid-prop-types
@@ -112,4 +111,4 @@ class Infobox extends Component {
   }
 }
 
-export default injectIntl(Infobox);
+export default injectIntl(observer(Infobox));
diff --git a/src/components/ui/Input.js b/src/components/ui/Input.js
index 8d37d7a05..fa1b44699 100644
--- a/src/components/ui/Input.js
+++ b/src/components/ui/Input.js
@@ -5,7 +5,9 @@ import { Field } from 'mobx-react-form';
 import classnames from 'classnames';
 import { defineMessages, injectIntl } from 'react-intl';
 
+import { mdiEye, mdiEyeOff } from '@mdi/js';
 import { scorePassword as scorePasswordFunc } from '../../helpers/password-helpers';
+import { Icon } from './icon';
 
 const messages = defineMessages({
   passwordToggle: {
@@ -14,7 +16,6 @@ const messages = defineMessages({
   },
 });
 
-@observer
 class Input extends Component {
   static propTypes = {
     field: PropTypes.instanceOf(Field).isRequired,
@@ -115,9 +116,6 @@ class Input extends Component {
               type="button"
               className={classnames({
                 'franz-form__input-modifier': true,
-                mdi: true,
-                'mdi-eye': !this.state.showPassword,
-                'mdi-eye-off': this.state.showPassword,
               })}
               onClick={() =>
                 this.setState(prevState => ({
@@ -126,7 +124,9 @@ class Input extends Component {
               }
               tabIndex={-1}
               aria-label={intl.formatMessage(messages.passwordToggle)}
-            />
+            >
+              <Icon icon={this.state.showPassword ? mdiEye : mdiEyeOff} />
+            </button>
           )}
           {scorePassword && (
             <div className="franz-form__password-score">
@@ -152,4 +152,4 @@ class Input extends Component {
   }
 }
 
-export default injectIntl(Input);
+export default injectIntl(observer(Input));
diff --git a/src/components/ui/Link.js b/src/components/ui/Link.js
index 40766c984..565547736 100644
--- a/src/components/ui/Link.js
+++ b/src/components/ui/Link.js
@@ -9,8 +9,6 @@ import { matchRoute } from '../../helpers/routing-helpers';
 import { openExternalUrl } from '../../helpers/url-helpers';
 
 // TODO: create container component for this component
-@inject('stores')
-@observer
 class Link extends Component {
   onClick(e) {
     if (this.props.disabled) {
@@ -60,7 +58,7 @@ class Link extends Component {
   }
 }
 
-Link.wrappedComponent.propTypes = {
+Link.propTypes = {
   stores: PropTypes.shape({
     router: PropTypes.instanceOf(RouterStore).isRequired,
   }).isRequired,
@@ -75,7 +73,7 @@ Link.wrappedComponent.propTypes = {
   disabled: PropTypes.bool,
 };
 
-Link.wrappedComponent.defaultProps = {
+Link.defaultProps = {
   className: '',
   activeClassName: '',
   strictFilter: false,
@@ -84,4 +82,4 @@ Link.wrappedComponent.defaultProps = {
   style: {},
 };
 
-export default Link;
+export default inject('stores')(observer(Link));
diff --git a/src/components/ui/Loader.tsx b/src/components/ui/Loader.tsx
index 1173c11e7..171d0e290 100644
--- a/src/components/ui/Loader.tsx
+++ b/src/components/ui/Loader.tsx
@@ -12,8 +12,6 @@ type Props = {
   stores: FerdiStores;
 };
 
-@inject('stores')
-@observer
 class LoaderComponent extends Component<Props> {
   static defaultProps = {
     loaded: false,
@@ -43,4 +41,4 @@ class LoaderComponent extends Component<Props> {
   }
 }
 
-export default LoaderComponent;
+export default inject('stores')(observer(LoaderComponent));
diff --git a/src/components/ui/Modal/index.tsx b/src/components/ui/Modal/index.tsx
index f2f4461b8..c3c78b419 100644
--- a/src/components/ui/Modal/index.tsx
+++ b/src/components/ui/Modal/index.tsx
@@ -18,7 +18,6 @@ type Props = {
   showClose: boolean;
 };
 
-@injectCSS(styles)
 class Modal extends Component<Props> {
   static defaultProps = {
     className: null,
@@ -64,4 +63,4 @@ class Modal extends Component<Props> {
   }
 }
 
-export default Modal;
+export default injectCSS(styles)(Modal);
diff --git a/src/components/ui/Radio.tsx b/src/components/ui/Radio.tsx
index 594ea70e4..a033a5fe0 100644
--- a/src/components/ui/Radio.tsx
+++ b/src/components/ui/Radio.tsx
@@ -10,7 +10,6 @@ type Props = {
   showLabel: boolean;
 };
 
-@observer
 class Radio extends Component<Props> {
   static defaultProps = {
     focus: false,
@@ -74,4 +73,4 @@ class Radio extends Component<Props> {
   }
 }
 
-export default Radio;
+export default observer(Radio);
diff --git a/src/components/ui/SearchInput.tsx b/src/components/ui/SearchInput.tsx
index 49a50a4a0..6a6a1692e 100644
--- a/src/components/ui/SearchInput.tsx
+++ b/src/components/ui/SearchInput.tsx
@@ -17,7 +17,6 @@ type Props = {
   autoFocus: boolean;
 };
 
-@observer
 class SearchInput extends Component<Props> {
   static defaultProps = {
     value: '',
@@ -115,4 +114,4 @@ class SearchInput extends Component<Props> {
   }
 }
 
-export default SearchInput;
+export default observer(SearchInput);
diff --git a/src/components/ui/Select.js b/src/components/ui/Select.js
index a560da332..0fc32e573 100644
--- a/src/components/ui/Select.js
+++ b/src/components/ui/Select.js
@@ -4,7 +4,6 @@ import { observer } from 'mobx-react';
 import { Field } from 'mobx-react-form';
 import classnames from 'classnames';
 
-@observer
 class Select extends Component {
   static propTypes = {
     field: PropTypes.instanceOf(Field).isRequired,
@@ -98,4 +97,4 @@ class Select extends Component {
   }
 }
 
-export default Select;
+export default observer(Select);
diff --git a/src/components/ui/ServiceIcon.js b/src/components/ui/ServiceIcon.js
index f067f8955..d403d107d 100644
--- a/src/components/ui/ServiceIcon.js
+++ b/src/components/ui/ServiceIcon.js
@@ -24,8 +24,6 @@ const styles = theme => ({
   },
 });
 
-@injectSheet(styles)
-@observer
 class ServiceIcon extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
@@ -56,4 +54,6 @@ class ServiceIcon extends Component {
   }
 }
 
-export default ServiceIcon;
+export default injectSheet(styles, { injectTheme: true })(
+  observer(ServiceIcon),
+);
diff --git a/src/components/ui/Slider.js b/src/components/ui/Slider.js
index dea6e0563..a581e7a65 100644
--- a/src/components/ui/Slider.js
+++ b/src/components/ui/Slider.js
@@ -4,7 +4,6 @@ import { observer } from 'mobx-react';
 import classnames from 'classnames';
 import { Field } from 'mobx-react-form';
 
-@observer
 class Slider extends Component {
   static propTypes = {
     field: PropTypes.instanceOf(Field).isRequired,
@@ -64,4 +63,4 @@ class Slider extends Component {
   }
 }
 
-export default Slider;
+export default observer(Slider);
diff --git a/src/components/ui/StatusBarTargetUrl.js b/src/components/ui/StatusBarTargetUrl.js
index 38b436742..d8d329d52 100644
--- a/src/components/ui/StatusBarTargetUrl.js
+++ b/src/components/ui/StatusBarTargetUrl.js
@@ -5,7 +5,6 @@ import classnames from 'classnames';
 
 import Appear from './effects/Appear';
 
-@observer
 class StatusBarTargetUrl extends Component {
   static propTypes = {
     className: PropTypes.string,
@@ -33,4 +32,4 @@ class StatusBarTargetUrl extends Component {
   }
 }
 
-export default StatusBarTargetUrl;
+export default observer(StatusBarTargetUrl);
diff --git a/src/components/ui/Tabs/Tabs.js b/src/components/ui/Tabs/Tabs.js
index 77803974b..5d2da6293 100644
--- a/src/components/ui/Tabs/Tabs.js
+++ b/src/components/ui/Tabs/Tabs.js
@@ -5,7 +5,6 @@ import classnames from 'classnames';
 
 import { oneOrManyChildElements } from '../../../prop-types';
 
-@observer
 class Tab extends Component {
   constructor(props) {
     super(props);
@@ -69,4 +68,4 @@ class Tab extends Component {
   }
 }
 
-export default Tab;
+export default observer(Tab);
diff --git a/src/components/ui/Toggle.js b/src/components/ui/Toggle.js
index dfc319735..a82be690e 100644
--- a/src/components/ui/Toggle.js
+++ b/src/components/ui/Toggle.js
@@ -4,7 +4,6 @@ import { observer } from 'mobx-react';
 import classnames from 'classnames';
 import { Field } from 'mobx-react-form';
 
-@observer
 class Toggle extends Component {
   static propTypes = {
     field: PropTypes.instanceOf(Field).isRequired,
@@ -69,4 +68,4 @@ class Toggle extends Component {
   }
 }
 
-export default Toggle;
+export default observer(Toggle);
diff --git a/src/components/ui/ToggleRaw.js b/src/components/ui/ToggleRaw.js
index 74292a870..e482b97b4 100644
--- a/src/components/ui/ToggleRaw.js
+++ b/src/components/ui/ToggleRaw.js
@@ -6,7 +6,6 @@ import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
 
-@observer
 class ToggleRaw extends Component {
   static propTypes = {
     onChange: PropTypes.func.isRequired,
@@ -74,4 +73,4 @@ class ToggleRaw extends Component {
   }
 }
 
-export default ToggleRaw;
+export default observer(ToggleRaw);
diff --git a/src/components/ui/WebviewLoader/index.js b/src/components/ui/WebviewLoader/index.js
index 8d4513172..20945d191 100644
--- a/src/components/ui/WebviewLoader/index.js
+++ b/src/components/ui/WebviewLoader/index.js
@@ -14,8 +14,6 @@ const messages = defineMessages({
   },
 });
 
-@injectSheet(styles)
-@observer
 class WebviewLoader extends Component {
   static propTypes = {
     name: PropTypes.string.isRequired,
@@ -34,4 +32,6 @@ class WebviewLoader extends Component {
   }
 }
 
-export default injectIntl(WebviewLoader);
+export default injectIntl(
+  injectSheet(styles, { injectTheme: true })(observer(WebviewLoader)),
+);
diff --git a/src/components/ui/badge/ProBadge.tsx b/src/components/ui/badge/ProBadge.tsx
index dc1e76f7f..410748a64 100644
--- a/src/components/ui/badge/ProBadge.tsx
+++ b/src/components/ui/badge/ProBadge.tsx
@@ -1,14 +1,13 @@
 import { mdiStar } from '@mdi/js';
 import classnames from 'classnames';
 import { Component } from 'react';
-import injectStyle from 'react-jss';
+import injectStyle, { WithStylesProps } from 'react-jss';
 
 import { Theme } from '../../../themes';
 import { Icon } from '../icon';
 import { Badge } from './index';
-import { IWithStyle } from '../typings/generic';
 
-interface IProps extends IWithStyle {
+interface IProps extends WithStylesProps<typeof styles> {
   badgeClasses?: string;
   iconClasses?: string;
   inverted?: boolean;
@@ -61,4 +60,6 @@ class ProBadgeComponent extends Component<IProps> {
   }
 }
 
-export const ProBadge = injectStyle(styles)(ProBadgeComponent);
+export const ProBadge = injectStyle(styles, { injectTheme: true })(
+  ProBadgeComponent,
+);
diff --git a/src/components/ui/badge/index.tsx b/src/components/ui/badge/index.tsx
index 61bede937..a7ed866a5 100644
--- a/src/components/ui/badge/index.tsx
+++ b/src/components/ui/badge/index.tsx
@@ -1,11 +1,10 @@
 import classnames from 'classnames';
 import { Component, ReactNode } from 'react';
-import injectStyle from 'react-jss';
+import injectStyle, { WithStylesProps } from 'react-jss';
 
 import { Theme } from '../../../themes';
-import { IWithStyle } from '../typings/generic';
 
-interface IProps extends IWithStyle {
+interface IProps extends WithStylesProps<typeof styles> {
   type: string;
   className?: string;
   children: ReactNode;
@@ -68,4 +67,4 @@ class BadgeComponent extends Component<IProps> {
   }
 }
 
-export const Badge = injectStyle(styles)(BadgeComponent);
+export const Badge = injectStyle(styles, { injectTheme: true })(BadgeComponent);
diff --git a/src/components/ui/button/index.tsx b/src/components/ui/button/index.tsx
index 12e5e4449..d91b1ee19 100644
--- a/src/components/ui/button/index.tsx
+++ b/src/components/ui/button/index.tsx
@@ -2,11 +2,11 @@ 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 injectStyle, { WithStylesProps } from 'react-jss';
 import Loader from 'react-loader';
 
 import { Theme } from '../../../themes';
-import { IFormField, IWithStyle } from '../typings/generic';
+import { IFormField } from '../typings/generic';
 
 type ButtonType =
   | 'primary'
@@ -16,7 +16,7 @@ type ButtonType =
   | 'warning'
   | 'inverted';
 
-interface IProps extends IFormField, IWithStyle {
+interface IProps extends IFormField, WithStylesProps<typeof styles> {
   className?: string;
   disabled?: boolean;
   id?: string;
@@ -179,7 +179,7 @@ class ButtonComponent extends Component<IProps> {
     const {
       classes,
       className,
-      theme,
+      // theme,
       disabled,
       id,
       label,
@@ -213,7 +213,7 @@ class ButtonComponent extends Component<IProps> {
               loaded={false}
               width={4}
               scale={0.45}
-              color={theme.buttonLoaderColor[buttonType!]}
+              // color={theme.buttonLoaderColor[buttonType!]}
               parentClassName={classes.loader}
             />
           )}
@@ -262,4 +262,6 @@ class ButtonComponent extends Component<IProps> {
   }
 }
 
-export const Button = injectStyle(styles)(withTheme(ButtonComponent));
+export const Button = injectStyle(styles, { injectTheme: true })(
+  ButtonComponent,
+);
diff --git a/src/components/ui/error/index.tsx b/src/components/ui/error/index.tsx
index 8439bfc8b..ff3bc31c6 100644
--- a/src/components/ui/error/index.tsx
+++ b/src/components/ui/error/index.tsx
@@ -17,4 +17,4 @@ class ErrorComponent extends Component<IProps> {
   }
 }
 
-export const Error = injectSheet(styles)(ErrorComponent);
+export const Error = injectSheet(styles, { injectTheme: true })(ErrorComponent);
diff --git a/src/components/ui/headline/index.tsx b/src/components/ui/headline/index.tsx
index ea2949102..d9954c38f 100644
--- a/src/components/ui/headline/index.tsx
+++ b/src/components/ui/headline/index.tsx
@@ -1,11 +1,11 @@
 import classnames from 'classnames';
 import { Component, createElement, ReactNode } from 'react';
-import injectStyle from 'react-jss';
+import injectStyle, { WithStylesProps } from 'react-jss';
 
 import { Theme } from '../../../themes';
-import { IWithStyle, Omit } from '../typings/generic';
+import { Omit } from '../typings/generic';
 
-interface IProps extends IWithStyle {
+interface IProps extends WithStylesProps<typeof styles> {
   level?: number;
   className?: string;
   children: string | ReactNode;
@@ -55,9 +55,9 @@ class HeadlineComponent extends Component<IProps> {
   }
 }
 
-const Headline = injectStyle(styles)(HeadlineComponent);
+const Headline = injectStyle(styles, { injectTheme: true })(HeadlineComponent);
 
-const createH = (level: number) => (props: Omit<IProps, 'classes' | 'theme'>) =>
+const createH = (level: number) => (props: Omit<IProps, 'classes'>) =>
   (
     <Headline level={level} {...props}>
       {props.children}
diff --git a/src/components/ui/icon/index.tsx b/src/components/ui/icon/index.tsx
index 85bb61d13..52f61d2d7 100644
--- a/src/components/ui/icon/index.tsx
+++ b/src/components/ui/icon/index.tsx
@@ -1,12 +1,11 @@
 import MdiIcon from '@mdi/react';
 import classnames from 'classnames';
 import { Component } from 'react';
-import injectStyle from 'react-jss';
+import injectStyle, { WithStylesProps } from 'react-jss';
 
 import { Theme } from '../../../themes';
-import { IWithStyle } from '../typings/generic';
 
-interface IProps extends IWithStyle {
+interface IProps extends WithStylesProps<typeof styles> {
   icon: string;
   size?: number;
   className?: string;
@@ -43,4 +42,4 @@ class IconComponent extends Component<IProps> {
   }
 }
 
-export const Icon = injectStyle(styles)(IconComponent);
+export const Icon = injectStyle(styles, { injectTheme: true })(IconComponent);
diff --git a/src/components/ui/infobox/index.tsx b/src/components/ui/infobox/index.tsx
index 87940c4d4..c0767a342 100644
--- a/src/components/ui/infobox/index.tsx
+++ b/src/components/ui/infobox/index.tsx
@@ -1,13 +1,12 @@
 import { mdiClose } from '@mdi/js';
 import classnames from 'classnames';
 import { Component, ReactNode } from 'react';
-import injectStyle from 'react-jss';
+import injectStyle, { WithStylesProps } from 'react-jss';
 
 import { Theme } from '../../../themes';
 import { Icon } from '../icon';
-import { IWithStyle } from '../typings/generic';
 
-interface IProps extends IWithStyle {
+interface IProps extends WithStylesProps<typeof styles> {
   icon?: string;
   type?: string;
   dismissable?: boolean;
@@ -58,7 +57,6 @@ const styles = (theme: Theme) => ({
     position: 'relative',
     overflow: 'hidden',
     height: 'auto',
-    marginBottom: 30,
   },
   infobox: {
     alignItems: 'center',
@@ -69,6 +67,7 @@ const styles = (theme: Theme) => ({
     top: 0,
     transition: infoBoxTransition,
     opacity: 1,
+    marginBottom: 30,
   },
   dismissing: {
     // position: 'absolute',
@@ -202,4 +201,6 @@ class InfoboxComponent extends Component<IProps, IState> {
   }
 }
 
-export const Infobox = injectStyle(styles)(InfoboxComponent);
+export const Infobox = injectStyle(styles, { injectTheme: true })(
+  InfoboxComponent,
+);
diff --git a/src/components/ui/input/index.tsx b/src/components/ui/input/index.tsx
index c46cafc5c..bfbee33b9 100644
--- a/src/components/ui/input/index.tsx
+++ b/src/components/ui/input/index.tsx
@@ -2,9 +2,9 @@ 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 injectSheet, { WithStylesProps } from 'react-jss';
 
-import { IFormField, IWithStyle } from '../typings/generic';
+import { IFormField } from '../typings/generic';
 
 import { Error } from '../error';
 import { Label } from '../label';
@@ -20,7 +20,7 @@ interface IData {
 interface IProps
   extends InputHTMLAttributes<HTMLInputElement>,
     IFormField,
-    IWithStyle {
+    WithStylesProps<typeof styles> {
   focus?: boolean;
   prefix?: string;
   suffix?: string;
@@ -205,4 +205,4 @@ class InputComponent extends Component<IProps, IState> {
   }
 }
 
-export const Input = injectSheet(styles)(InputComponent);
+export const Input = injectSheet(styles, { injectTheme: true })(InputComponent);
diff --git a/src/components/ui/label/index.tsx b/src/components/ui/label/index.tsx
index 4d86f23f7..dcc14bff4 100644
--- a/src/components/ui/label/index.tsx
+++ b/src/components/ui/label/index.tsx
@@ -1,15 +1,16 @@
 import classnames from 'classnames';
-import { Classes } from 'jss';
 import { Component, LabelHTMLAttributes } from 'react';
-import injectSheet from 'react-jss';
+import injectSheet, { WithStylesProps } from 'react-jss';
 
 import { IFormField } from '../typings/generic';
 
 import styles from './styles';
 
-interface ILabel extends IFormField, LabelHTMLAttributes<HTMLLabelElement> {
-  classes: Classes;
-  isRequired: boolean;
+interface ILabel
+  extends IFormField,
+    LabelHTMLAttributes<HTMLLabelElement>,
+    WithStylesProps<typeof styles> {
+  isRequired?: boolean;
 }
 
 class LabelComponent extends Component<ILabel> {
@@ -49,4 +50,4 @@ class LabelComponent extends Component<ILabel> {
   }
 }
 
-export const Label = injectSheet(styles)(LabelComponent);
+export const Label = injectSheet(styles, { injectTheme: true })(LabelComponent);
diff --git a/src/components/ui/loader/index.tsx b/src/components/ui/loader/index.tsx
index 0607bd48b..d56995ccc 100644
--- a/src/components/ui/loader/index.tsx
+++ b/src/components/ui/loader/index.tsx
@@ -1,25 +1,25 @@
 import classnames from 'classnames';
 import { Component } from 'react';
-import injectStyle, { withTheme } from 'react-jss';
+import injectStyle, { WithStylesProps } from 'react-jss';
 import ReactLoader from 'react-loader';
 
-import { IWithStyle } from '../typings/generic';
-
-interface IProps extends IWithStyle {
+interface IProps extends WithStylesProps<typeof styles> {
   className?: string;
   color?: string;
 }
 
-const styles = () => ({
+const styles = theme => ({
   container: {
     position: 'relative',
     height: 60,
   },
+  loader: {},
+  color: theme.colorText,
 });
 
 class LoaderComponent extends Component<IProps> {
   render() {
-    const { classes, className, color, theme } = this.props;
+    const { classes, className, color } = this.props;
 
     return (
       <div
@@ -33,7 +33,7 @@ class LoaderComponent extends Component<IProps> {
           loaded={false}
           width={4}
           scale={0.75}
-          color={color || theme.colorText}
+          color={color || classes.color}
           parentClassName={classes.loader}
         />
       </div>
@@ -41,4 +41,6 @@ class LoaderComponent extends Component<IProps> {
   }
 }
 
-export const Loader = injectStyle(styles)(withTheme(LoaderComponent));
+export const Loader = injectStyle(styles, { injectTheme: true })(
+  LoaderComponent,
+);
diff --git a/src/components/ui/select/index.tsx b/src/components/ui/select/index.tsx
index 2605503a3..ac509aa7c 100644
--- a/src/components/ui/select/index.tsx
+++ b/src/components/ui/select/index.tsx
@@ -6,10 +6,10 @@ import {
 import Icon from '@mdi/react';
 import classnames from 'classnames';
 import { ChangeEvent, Component, createRef } from 'react';
-import injectStyle from 'react-jss';
+import injectStyle, { WithStylesProps } from 'react-jss';
 
 import { Theme } from '../../../themes';
-import { IFormField, IWithStyle } from '../typings/generic';
+import { IFormField } from '../typings/generic';
 
 import { Error } from '../error';
 import { Label } from '../label';
@@ -23,7 +23,7 @@ interface IData {
   [index: string]: string;
 }
 
-interface IProps extends IFormField, IWithStyle {
+interface IProps extends IFormField, WithStylesProps<typeof styles> {
   actionText: string;
   className?: string;
   inputClassName?: string;
@@ -146,6 +146,7 @@ const styles = (theme: Theme) => ({
   disabled: {
     opacity: theme.selectDisabledOpacity,
   },
+  input: {},
 });
 
 class SelectComponent extends Component<IProps> {
@@ -457,4 +458,6 @@ class SelectComponent extends Component<IProps> {
   }
 }
 
-export const Select = injectStyle(styles)(SelectComponent);
+export const Select = injectStyle(styles, { injectTheme: true })(
+  SelectComponent,
+);
diff --git a/src/components/ui/textarea/index.tsx b/src/components/ui/textarea/index.tsx
index 1b16698eb..a47465806 100644
--- a/src/components/ui/textarea/index.tsx
+++ b/src/components/ui/textarea/index.tsx
@@ -1,8 +1,8 @@
 import classnames from 'classnames';
 import { Component, createRef, TextareaHTMLAttributes } from 'react';
-import injectSheet from 'react-jss';
+import injectSheet, { WithStylesProps } from 'react-jss';
 
-import { IFormField, IWithStyle } from '../typings/generic';
+import { IFormField } from '../typings/generic';
 
 import { Error } from '../error';
 import { Label } from '../label';
@@ -17,7 +17,7 @@ interface IData {
 interface IProps
   extends TextareaHTMLAttributes<HTMLTextAreaElement>,
     IFormField,
-    IWithStyle {
+    WithStylesProps<typeof styles> {
   focus?: boolean;
   data: IData;
   textareaClassName?: string;
@@ -123,4 +123,6 @@ class TextareaComponent extends Component<IProps> {
   }
 }
 
-export const Textarea = injectSheet(styles)(TextareaComponent);
+export const Textarea = injectSheet(styles, { injectTheme: true })(
+  TextareaComponent,
+);
diff --git a/src/components/ui/toggle/index.tsx b/src/components/ui/toggle/index.tsx
index 7b6ba147f..856581a21 100644
--- a/src/components/ui/toggle/index.tsx
+++ b/src/components/ui/toggle/index.tsx
@@ -1,10 +1,10 @@
 import classnames from 'classnames';
 import { Property } from 'csstype';
 import { Component, InputHTMLAttributes } from 'react';
-import injectStyle from 'react-jss';
+import injectStyle, { WithStylesProps } from 'react-jss';
 
 import { Theme } from '../../../themes';
-import { IFormField, IWithStyle } from '../typings/generic';
+import { IFormField } from '../typings/generic';
 
 import { Error } from '../error';
 import { Label } from '../label';
@@ -13,7 +13,7 @@ import { Wrapper } from '../wrapper';
 interface IProps
   extends InputHTMLAttributes<HTMLInputElement>,
     IFormField,
-    IWithStyle {
+    WithStylesProps<typeof styles> {
   className?: string;
 }
 
@@ -122,4 +122,6 @@ class ToggleComponent extends Component<IProps> {
   }
 }
 
-export const Toggle = injectStyle(styles)(ToggleComponent);
+export const Toggle = injectStyle(styles, { injectTheme: true })(
+  ToggleComponent,
+);
diff --git a/src/components/ui/typings/generic.ts b/src/components/ui/typings/generic.ts
index 65b996d59..3aec0bc40 100644
--- a/src/components/ui/typings/generic.ts
+++ b/src/components/ui/typings/generic.ts
@@ -1,7 +1,3 @@
-import { Classes } from 'jss';
-
-import { Theme } from '../../../themes';
-
 export interface IFormField {
   showLabel?: boolean;
   label?: string;
@@ -10,10 +6,5 @@ export interface IFormField {
   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
index ffcd6fe0b..bc385d319 100644
--- a/src/components/ui/wrapper/index.tsx
+++ b/src/components/ui/wrapper/index.tsx
@@ -1,9 +1,8 @@
 import classnames from 'classnames';
 import { Component, ReactNode } from 'react';
-import injectStyle from 'react-jss';
-import { IWithStyle } from '../typings/generic';
+import injectStyle, { WithStylesProps } from 'react-jss';
 
-interface IProps extends IWithStyle {
+interface IProps extends WithStylesProps<typeof styles> {
   children: ReactNode;
   className?: string;
   identifier: string;
@@ -34,4 +33,6 @@ class WrapperComponent extends Component<IProps> {
   }
 }
 
-export const Wrapper = injectStyle(styles)(WrapperComponent);
+export const Wrapper = injectStyle(styles, { injectTheme: true })(
+  WrapperComponent,
+);
diff --git a/src/components/util/ErrorBoundary/index.js b/src/components/util/ErrorBoundary/index.js
index cddcd91c2..6a8b126f1 100644
--- a/src/components/util/ErrorBoundary/index.js
+++ b/src/components/util/ErrorBoundary/index.js
@@ -18,7 +18,6 @@ const messages = defineMessages({
   },
 });
 
-@injectSheet(styles)
 class ErrorBoundary extends Component {
   state = {
     hasError: false,
@@ -56,4 +55,6 @@ class ErrorBoundary extends Component {
   }
 }
 
-export default injectIntl(ErrorBoundary);
+export default injectIntl(
+  injectSheet(styles, { injectTheme: true })(ErrorBoundary),
+);