Merge branch 'develop' into i18n

104 files changed, 4708 insertions, 1648 deletions

diff --git a/src/actions/index.js b/src/actions/index.js
index fc525afeb..336344d76 100644
--- a/src/actions/index.js
+++ b/src/actions/index.js
@@ -13,6 +13,7 @@ import settings from './settings';
 import requests from './requests';
 import announcements from '../features/announcements/actions';
 import workspaces from '../features/workspaces/actions';
+import todos from '../features/todos/actions';
 
 const actions = Object.assign({}, {
   service,
@@ -31,4 +32,5 @@ export default Object.assign(
   defineActions(actions, PropTypes.checkPropTypes),
   { announcements },
   { workspaces },
+  { todos },
 );
diff --git a/src/actions/user.js b/src/actions/user.js
index ccf1fa56a..5d7d9a899 100644
--- a/src/actions/user.js
+++ b/src/actions/user.js
@@ -17,6 +17,9 @@ export default {
   retrievePassword: {
     email: PropTypes.string.isRequired,
   },
+  activateTrial: {
+    planId: PropTypes.string.isRequired,
+  },
   invite: {
     invites: PropTypes.array.isRequired,
   },
diff --git a/src/api/UserApi.js b/src/api/UserApi.js
index edfb88988..8ba8cd1e9 100644
--- a/src/api/UserApi.js
+++ b/src/api/UserApi.js
@@ -25,6 +25,10 @@ export default class UserApi {
     return this.server.retrievePassword(email);
   }
 
+  activateTrial(data) {
+    return this.server.activateTrial(data);
+  }
+
   invite(data) {
     return this.server.inviteUser(data);
   }
diff --git a/src/api/server/ServerApi.js b/src/api/server/ServerApi.js
index a9ce202ff..f56c7b6e4 100644
--- a/src/api/server/ServerApi.js
+++ b/src/api/server/ServerApi.js
@@ -77,6 +77,20 @@ export default class ServerApi {
     return u.token;
   }
 
+  async activateTrial(data) {
+    const request = await sendAuthRequest(`${API_URL}/payment/trial`, {
+      method: 'POST',
+      body: JSON.stringify(data),
+    });
+    if (!request.ok) {
+      throw request;
+    }
+    const trial = await request.json();
+
+    debug('ServerApi::signup resolves', trial);
+    return true;
+  }
+
   async inviteUser(data) {
     const request = await sendAuthRequest(`${API_URL}/invite`, {
       method: 'POST',
@@ -469,7 +483,7 @@ export default class ServerApi {
         return services;
       }
     } catch (err) {
-      throw (new Error('ServerApi::getLegacyServices no config found'));
+      console.error('ServerApi::getLegacyServices no config found');
     }
 
     return [];
diff --git a/src/components/TrialActivationInfoBar.js b/src/components/TrialActivationInfoBar.js
new file mode 100644
index 000000000..acdf51d08
--- /dev/null
+++ b/src/components/TrialActivationInfoBar.js
@@ -0,0 +1,94 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { defineMessages, intlShape } from 'react-intl';
+import ms from 'ms';
+import injectSheet from 'react-jss';
+import classnames from 'classnames';
+
+import InfoBar from './ui/InfoBar';
+
+const messages = defineMessages({
+  message: {
+    id: 'infobar.trialActivated',
+    defaultMessage: '!!!Your trial was successfully activated. Happy messaging!',
+  },
+});
+
+const styles = {
+  notification: {
+    height: 'auto',
+    position: 'absolute',
+    top: -50,
+    transition: 'top 0.3s',
+    zIndex: 300,
+    width: 'calc(100% - 300px)',
+  },
+  show: {
+    top: 0,
+  },
+};
+
+@injectSheet(styles)
+class TrialActivationInfoBar extends Component {
+  static propTypes = {
+    // eslint-disable-next-line
+    classes: PropTypes.object.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  state = {
+    showing: false,
+    removed: false,
+  }
+
+  componentDidMount() {
+    setTimeout(() => {
+      this.setState({
+        showing: true,
+      });
+    }, 0);
+
+    setTimeout(() => {
+      this.setState({
+        showing: false,
+      });
+    }, ms('6s'));
+
+    setTimeout(() => {
+      this.setState({
+        removed: true,
+      });
+    }, ms('7s'));
+  }
+
+  render() {
+    const { classes } = this.props;
+    const { showing, removed } = this.state;
+    const { intl } = this.context;
+
+    if (removed) return null;
+
+    return (
+      <div
+        className={classnames({
+          [classes.notification]: true,
+          [classes.show]: showing,
+        })}
+      >
+        <InfoBar
+          type="primary"
+          position="top"
+          sticky
+        >
+          <span className="mdi mdi-information" />
+          {intl.formatMessage(messages.message)}
+        </InfoBar>
+      </div>
+    );
+  }
+}
+
+export default TrialActivationInfoBar;
diff --git a/src/components/auth/AuthLayout.js b/src/components/auth/AuthLayout.js
index 3d43d4e5c..75a8cfc61 100644
--- a/src/components/auth/AuthLayout.js
+++ b/src/components/auth/AuthLayout.js
@@ -22,7 +22,6 @@ export default @observer class AuthLayout extends Component {
     retryHealthCheck: PropTypes.func.isRequired,
     isHealthCheckLoading: PropTypes.bool.isRequired,
     isFullScreen: PropTypes.bool.isRequired,
-    darkMode: PropTypes.bool.isRequired,
     nextAppReleaseVersion: PropTypes.string,
     installAppUpdate: PropTypes.func.isRequired,
     appUpdateIsDownloaded: PropTypes.bool.isRequired,
@@ -45,7 +44,6 @@ export default @observer class AuthLayout extends Component {
       retryHealthCheck,
       isHealthCheckLoading,
       isFullScreen,
-      darkMode,
       nextAppReleaseVersion,
       installAppUpdate,
       appUpdateIsDownloaded,
@@ -53,7 +51,7 @@ export default @observer class AuthLayout extends Component {
     const { intl } = this.context;
 
     return (
-      <div className={darkMode ? 'theme__dark' : ''}>
+      <>
         {isWindows && !isFullScreen && <TitleBar menu={window.franz.menu.template} icon="assets/images/logo.svg" />}
         <div className="auth">
           {!isOnline && (
@@ -93,7 +91,7 @@ export default @observer class AuthLayout extends Component {
             <img src="./assets/images/adlk.svg" alt="" />
           </Link>
         </div>
-      </div>
+      </>
     );
   }
 }
diff --git a/src/components/auth/Pricing.js b/src/components/auth/Pricing.js
index 7ab14f429..cbeaaa5d9 100644
--- a/src/components/auth/Pricing.js
+++ b/src/components/auth/Pricing.js
@@ -1,40 +1,107 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
+import { observer } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
-// import { Link } from 'react-router';
+import injectSheet from 'react-jss';
+import { H2, Loader } from '@meetfranz/ui';
+import classnames from 'classnames';
+
+import { Button } from '@meetfranz/forms';
+import { FeatureItem } from '../ui/FeatureItem';
+import { FeatureList } from '../ui/FeatureList';
 
-// import Button from '../ui/Button';
-import Loader from '../ui/Loader';
-import Appear from '../ui/effects/Appear';
-import SubscriptionForm from '../../containers/subscription/SubscriptionFormScreen';
 
 const messages = defineMessages({
   headline: {
-    id: 'pricing.headline',
-    defaultMessage: '!!!Support Franz',
+    id: 'pricing.trial.headline',
+    defaultMessage: '!!!Franz Professional',
+  },
+  personalOffer: {
+    id: 'pricing.trial.subheadline',
+    defaultMessage: '!!!Your personal welcome offer:',
+  },
+  noStringsAttachedHeadline: {
+    id: 'pricing.trial.terms.headline',
+    defaultMessage: '!!!No strings attached',
+  },
+  noCreditCard: {
+    id: 'pricing.trial.terms.noCreditCard',
+    defaultMessage: '!!!No credit card required',
   },
-  monthlySupportLabel: {
-    id: 'pricing.support.label',
-    defaultMessage: '!!!Select your support plan',
+  automaticTrialEnd: {
+    id: 'pricing.trial.terms.automaticTrialEnd',
+    defaultMessage: '!!!Your free trial ends automatically after 14 days',
   },
-  submitButtonLabel: {
-    id: 'pricing.submit.label',
-    defaultMessage: '!!!Support the development of Franz',
+  activationError: {
+    id: 'pricing.trial.error',
+    defaultMessage: '!!!Sorry, we could not activate your trial!',
   },
-  skipPayment: {
-    id: 'pricing.link.skipPayment',
-    defaultMessage: '!!!I don\'t want to support the development of Franz.',
+  ctaAccept: {
+    id: 'pricing.trial.cta.accept',
+    defaultMessage: '!!!Yes, upgrade my account to Franz Professional',
+  },
+  ctaSkip: {
+    id: 'pricing.trial.cta.skip',
+    defaultMessage: '!!!Continue to Franz',
+  },
+  featuresHeadline: {
+    id: 'pricing.trial.features.headline',
+    defaultMessage: '!!!Franz Professional includes:',
   },
 });
 
-export default @observer class Signup extends Component {
+const styles = theme => ({
+  container: {
+    position: 'relative',
+    marginLeft: -150,
+  },
+  welcomeOffer: {
+    textAlign: 'center',
+    fontWeight: 'bold',
+  },
+  keyTerms: {
+    textAlign: 'center',
+  },
+  content: {
+    position: 'relative',
+    zIndex: 20,
+  },
+  featureContainer: {
+    width: 300,
+    position: 'absolute',
+    left: 'calc(100% / 2 + 225px)',
+    top: 155,
+    background: theme.signup.pricing.feature.background,
+    height: 'auto',
+    padding: 20,
+    borderTopRightRadius: theme.borderRadius,
+    borderBottomRightRadius: theme.borderRadius,
+    zIndex: 10,
+  },
+  featureItem: {
+    borderBottom: [1, 'solid', theme.signup.pricing.feature.border],
+  },
+  cta: {
+    marginTop: 40,
+    width: '100%',
+  },
+  skipLink: {
+    textAlign: 'center',
+    marginTop: 10,
+  },
+  error: {
+    margin: [20, 0, 0],
+    color: theme.styleTypes.danger.accent,
+  },
+});
+
+export default @observer @injectSheet(styles) class Signup extends Component {
   static propTypes = {
-    donor: MobxPropTypes.objectOrObservableObject.isRequired,
-    isLoading: PropTypes.bool.isRequired,
-    isLoadingUser: PropTypes.bool.isRequired,
-    onCloseSubscriptionWindow: PropTypes.func.isRequired,
-    skipAction: PropTypes.func.isRequired,
+    onSubmit: PropTypes.func.isRequired,
+    isLoadingRequiredData: PropTypes.bool.isRequired,
+    isActivatingTrial: PropTypes.bool.isRequired,
+    trialActivationError: PropTypes.bool.isRequired,
+    classes: PropTypes.object.isRequired,
   };
 
   static contextTypes = {
@@ -43,70 +110,37 @@ export default @observer class Signup extends Component {
 
   render() {
     const {
-      donor,
-      isLoading,
-      isLoadingUser,
-      onCloseSubscriptionWindow,
-      skipAction,
+      onSubmit,
+      isLoadingRequiredData,
+      isActivatingTrial,
+      trialActivationError,
+      classes,
     } = this.props;
     const { intl } = this.context;
 
     return (
-      <div className="auth__scroll-container">
-        <div className="auth__container auth__container--signup">
+      <div className={classnames('auth__scroll-container', classes.container)}>
+        <div className={classnames('auth__container', 'auth__container--signup', classes.content)}>
           <form className="franz-form auth__form">
-            <img
-              src="./assets/images/sm.png"
-              className="auth__logo auth__logo--sm"
-              alt=""
-            />
+            {isLoadingRequiredData ? <Loader /> : (
+              <img
+                src="./assets/images/sm.png"
+                className="auth__logo auth__logo--sm"
+                alt=""
+              />
+            )}
+            <p className={classes.welcomeOffer}>{intl.formatMessage(messages.personalOffer)}</p>
             <h1>{intl.formatMessage(messages.headline)}</h1>
             <div className="auth__letter">
-              {isLoadingUser && (
-                <p>Loading</p>
-              )}
-              {!isLoadingUser && (
-                donor.amount ? (
-                  <span>
-                    <p>
-                      Thank you so much for your previous donation of
-                      {' '}
-                      <strong>
-                        $
-                        {donor.amount}
-                      </strong>
-                      .
-                      <br />
-                      Your support allowed us to get where we are today.
-                      <br />
-                    </p>
-                    <p>
-                      As an early supporter, you get
-                      {' '}
-                      <strong>a lifetime premium supporter license</strong>
-                      {' '}
-                      without any
-                      additional charges.
-                    </p>
-                    <p>
-                      However, If you want to keep supporting us, you are more than welcome to subscribe to a plan.
-                      <br />
-                      <br />
-                    </p>
-                  </span>
-                ) : (
-                  <span>
-                    <p>
-                      We built Franz with a lot of effort, manpower and love,
-                      to bring you the best messaging experience.
-                      <br />
-                    </p>
-                    <p>
-                      Getting a Franz Premium Supporter License will allow us to keep improving Franz for you.
-                    </p>
-                  </span>
-                )
-              )}
+              <p>
+                We built Franz with a lot of effort, manpower and love,
+                to boost up your messaging experience.
+                <br />
+              </p>
+              <p>
+                Get the free 14 day Franz Professional trial and see your communication evolving.
+                <br />
+              </p>
               <p>
                 Thanks for being a hero.
               </p>
@@ -114,20 +148,48 @@ export default @observer class Signup extends Component {
                 <strong>Stefan Malzner</strong>
               </p>
             </div>
-            <Loader loaded={!isLoading}>
-              <Appear transitionName="slideDown">
-                <span className="label">{intl.formatMessage(messages.monthlySupportLabel)}</span>
-                <SubscriptionForm
-                  onCloseWindow={onCloseSubscriptionWindow}
-                  showSkipOption
-                  skipAction={skipAction}
-                  hideInfo={Boolean(donor.amount)}
-                  skipButtonLabel={intl.formatMessage(messages.skipPayment)}
-                />
-              </Appear>
-            </Loader>
+            <div className={classes.keyTerms}>
+              <H2>
+                {intl.formatMessage(messages.noStringsAttachedHeadline)}
+              </H2>
+              <ul className={classes.keyTermsList}>
+                <FeatureItem icon="👉" name={intl.formatMessage(messages.noCreditCard)} />
+                <FeatureItem icon="👉" name={intl.formatMessage(messages.automaticTrialEnd)} />
+              </ul>
+            </div>
+            {trialActivationError && (
+              <p className={classes.error}>{intl.formatMessage(messages.activationError)}</p>
+            )}
+            <Button
+              label={intl.formatMessage(messages.ctaAccept)}
+              className={classes.cta}
+              onClick={onSubmit}
+              busy={isActivatingTrial}
+              disabled={isLoadingRequiredData || isActivatingTrial}
+            />
+            <p className={classes.skipLink}>
+              <a href="#/">{intl.formatMessage(messages.ctaSkip)}</a>
+            </p>
           </form>
         </div>
+        <div className={classes.featureContainer}>
+          <H2>
+            {intl.formatMessage(messages.featuresHeadline)}
+          </H2>
+          {/* <ul className={classes.features}>
+            <FeatureItem name="Add unlimited services" className={classes.featureItem} />
+            <FeatureItem name="Spellchecker support" className={classes.featureItem} />
+            <FeatureItem name="Workspaces" className={classes.featureItem} />
+            <FeatureItem name="Add Custom Websites" className={classes.featureItem} />
+            <FeatureItem name="On-premise & other Hosted Services" className={classes.featureItem} />
+            <FeatureItem name="Install 3rd party services" className={classes.featureItem} />
+            <FeatureItem name="Service Proxies" className={classes.featureItem} />
+            <FeatureItem name="Team Management" className={classes.featureItem} />
+            <FeatureItem name="No Waiting Screens" className={classes.featureItem} />
+            <FeatureItem name="Forever ad-free" className={classes.featureItem} />
+          </ul> */}
+          <FeatureList />
+        </div>
       </div>
     );
   }
diff --git a/src/components/auth/Signup.js b/src/components/auth/Signup.js
index d9b83eeb8..0499d764b 100644
--- a/src/components/auth/Signup.js
+++ b/src/components/auth/Signup.js
@@ -7,7 +7,6 @@ import { isDevMode, useLiveAPI } from '../../environment';
 import Form from '../../lib/Form';
 import { required, email, minLength } from '../../helpers/validation-helpers';
 import Input from '../ui/Input';
-import Radio from '../ui/Radio';
 import Button from '../ui/Button';
 import Link from '../ui/Link';
 import Infobox from '../ui/Infobox';
@@ -31,10 +30,10 @@ const messages = defineMessages({
     id: 'signup.email.label',
     defaultMessage: '!!!Email address',
   },
-  companyLabel: {
-    id: 'signup.company.label',
-    defaultMessage: '!!!Company',
-  },
+  // companyLabel: {
+  //   id: 'signup.company.label',
+  //   defaultMessage: '!!!Company',
+  // },
   passwordLabel: {
     id: 'signup.password.label',
     defaultMessage: '!!!Password',
@@ -79,20 +78,6 @@ export default @observer class Signup extends Component {
 
   form = new Form({
     fields: {
-      accountType: {
-        value: 'individual',
-        validators: [required],
-        options: [{
-          value: 'individual',
-          label: 'Individual',
-        }, {
-          value: 'non-profit',
-          label: 'Non-Profit',
-        }, {
-          value: 'company',
-          label: 'Company',
-        }],
-      },
       firstname: {
         label: this.context.intl.formatMessage(messages.firstnameLabel),
         value: '',
@@ -108,10 +93,6 @@ export default @observer class Signup extends Component {
         value: '',
         validators: [required, email],
       },
-      organization: {
-        label: this.context.intl.formatMessage(messages.companyLabel),
-        value: '', // TODO: make required when accountType: company
-      },
       password: {
         label: this.context.intl.formatMessage(messages.passwordLabel),
         value: '',
@@ -151,7 +132,6 @@ export default @observer class Signup extends Component {
                 In Dev Mode your data is not persistent. Please use the live app for accesing the production API.
               </Infobox>
             )}
-            <Radio field={form.$('accountType')} showLabel={false} />
             <div className="grid__row">
               <Input field={form.$('firstname')} focus />
               <Input field={form.$('lastname')} />
@@ -162,9 +142,6 @@ export default @observer class Signup extends Component {
               showPasswordToggle
               scorePassword
             />
-            {form.$('accountType').value === 'company' && (
-              <Input field={form.$('organization')} />
-            )}
             {error.code === 'email-duplicate' && (
               <p className="error-message center">{intl.formatMessage(messages.emailDuplicate)}</p>
             )}
diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js
index 499bc097a..941e60bfd 100644
--- a/src/components/layout/AppLayout.js
+++ b/src/components/layout/AppLayout.js
@@ -17,6 +17,8 @@ import { isWindows } from '../../environment';
 import WorkspaceSwitchingIndicator from '../../features/workspaces/components/WorkspaceSwitchingIndicator';
 import { workspaceStore } from '../../features/workspaces';
 import AppUpdateInfoBar from '../AppUpdateInfoBar';
+import TrialActivationInfoBar from '../TrialActivationInfoBar';
+import Todos from '../../features/todos/containers/TodosScreen';
 
 function createMarkup(HTMLString) {
   return { __html: HTMLString };
@@ -39,7 +41,8 @@ const messages = defineMessages({
 
 const styles = theme => ({
   appContent: {
-    width: `calc(100% + ${theme.workspaces.drawer.width}px)`,
+    // width: `calc(100% + ${theme.workspaces.drawer.width}px)`,
+    width: '100%',
     transition: 'transform 0.5s ease',
     transform() {
       return workspaceStore.isWorkspaceDrawerOpen ? 'translateX(0)' : `translateX(-${theme.workspaces.drawer.width}px)`;
@@ -57,7 +60,6 @@ class AppLayout extends Component {
     services: PropTypes.element.isRequired,
     children: PropTypes.element,
     news: MobxPropTypes.arrayOrObservableArray.isRequired,
-    // isOnline: PropTypes.bool.isRequired,
     showServicesUpdatedInfoBar: PropTypes.bool.isRequired,
     appUpdateIsDownloaded: PropTypes.bool.isRequired,
     nextAppReleaseVersion: PropTypes.string,
@@ -68,8 +70,8 @@ class AppLayout extends Component {
     areRequiredRequestsSuccessful: PropTypes.bool.isRequired,
     retryRequiredRequests: PropTypes.func.isRequired,
     areRequiredRequestsLoading: PropTypes.bool.isRequired,
-    darkMode: PropTypes.bool.isRequired,
     isDelayAppScreenVisible: PropTypes.bool.isRequired,
+    hasActivatedTrial: PropTypes.bool.isRequired,
   };
 
   static defaultProps = {
@@ -89,7 +91,6 @@ class AppLayout extends Component {
       sidebar,
       services,
       children,
-      // isOnline,
       news,
       showServicesUpdatedInfoBar,
       appUpdateIsDownloaded,
@@ -101,78 +102,71 @@ class AppLayout extends Component {
       areRequiredRequestsSuccessful,
       retryRequiredRequests,
       areRequiredRequestsLoading,
-      darkMode,
       isDelayAppScreenVisible,
+      hasActivatedTrial,
     } = this.props;
 
     const { intl } = this.context;
 
     return (
       <ErrorBoundary>
-        <div className={(darkMode ? 'theme__dark' : '')}>
-          <div className="app">
-            {isWindows && !isFullScreen && <TitleBar menu={window.franz.menu.template} icon="assets/images/logo.svg" />}
-            <div className={`app__content ${classes.appContent}`}>
-              {workspacesDrawer}
-              {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)} />
-                  </InfoBar>
-                ))}
-                {/* {!isOnline && (
-                  <InfoBar
-                    type="danger"
-                    sticky
-                  >
-                    <span className="mdi mdi-flash" />
-                    {intl.formatMessage(globalMessages.notConnectedToTheInternet)}
-                  </InfoBar>
-                )} */}
-                {!areRequiredRequestsSuccessful && showRequiredRequestsError && (
-                  <InfoBar
-                    type="danger"
-                    ctaLabel="Try again"
-                    ctaLoading={areRequiredRequestsLoading}
-                    sticky
-                    onClick={retryRequiredRequests}
-                  >
-                    <span className="mdi mdi-flash" />
-                    {intl.formatMessage(messages.requiredRequestsFailed)}
-                  </InfoBar>
-                )}
-                {showServicesUpdatedInfoBar && (
-                  <InfoBar
-                    type="primary"
-                    ctaLabel={intl.formatMessage(messages.buttonReloadServices)}
-                    onClick={reloadServicesAfterUpdate}
-                    sticky
-                  >
-                    <span className="mdi mdi-power-plug" />
-                    {intl.formatMessage(messages.servicesUpdated)}
-                  </InfoBar>
-                )}
-                {appUpdateIsDownloaded && (
-                  <AppUpdateInfoBar
-                    nextAppReleaseVersion={nextAppReleaseVersion}
-                    onInstallUpdate={installAppUpdate}
-                  />
-                )}
-                {isDelayAppScreenVisible && (<DelayApp />)}
-                <BasicAuth />
-                <ShareFranz />
-                {services}
-                {children}
-              </div>
+        <div className="app">
+          {isWindows && !isFullScreen && <TitleBar menu={window.franz.menu.template} icon="assets/images/logo.svg" />}
+          <div className={`app__content ${classes.appContent}`}>
+            {workspacesDrawer}
+            {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)} />
+                </InfoBar>
+              ))}
+              {hasActivatedTrial && (
+                <TrialActivationInfoBar />
+              )}
+              {!areRequiredRequestsSuccessful && showRequiredRequestsError && (
+              <InfoBar
+                type="danger"
+                ctaLabel="Try again"
+                ctaLoading={areRequiredRequestsLoading}
+                sticky
+                onClick={retryRequiredRequests}
+              >
+                <span className="mdi mdi-flash" />
+                {intl.formatMessage(messages.requiredRequestsFailed)}
+              </InfoBar>
+              )}
+              {showServicesUpdatedInfoBar && (
+                <InfoBar
+                  type="primary"
+                  ctaLabel={intl.formatMessage(messages.buttonReloadServices)}
+                  onClick={reloadServicesAfterUpdate}
+                  sticky
+                >
+                  <span className="mdi mdi-power-plug" />
+                  {intl.formatMessage(messages.servicesUpdated)}
+                </InfoBar>
+              )}
+              {appUpdateIsDownloaded && (
+                <AppUpdateInfoBar
+                  nextAppReleaseVersion={nextAppReleaseVersion}
+                  onInstallUpdate={installAppUpdate}
+                />
+              )}
+              {isDelayAppScreenVisible && (<DelayApp />)}
+              <BasicAuth />
+              <ShareFranz />
+              {services}
+              {children}
             </div>
+            <Todos />
           </div>
         </div>
       </ErrorBoundary>
diff --git a/src/components/services/content/ServiceRestricted.js b/src/components/services/content/ServiceRestricted.js
new file mode 100644
index 000000000..4b8d926aa
--- /dev/null
+++ b/src/components/services/content/ServiceRestricted.js
@@ -0,0 +1,78 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+
+import { serviceLimitStore } from '../../../features/serviceLimit';
+import Button from '../../ui/Button';
+import { RESTRICTION_TYPES } from '../../../models/Service';
+
+const messages = defineMessages({
+  headlineServiceLimit: {
+    id: 'service.restrictedHandler.serviceLimit.headline',
+    defaultMessage: '!!!You have reached your service limit.',
+  },
+  textServiceLimit: {
+    id: 'service.restrictedHandler.serviceLimit.text',
+    defaultMessage: '!!!Please upgrade your account to use more than {count} services.',
+  },
+  headlineCustomUrl: {
+    id: 'service.restrictedHandler.customUrl.headline',
+    defaultMessage: '!!!Franz Professional Plan required',
+  },
+  textCustomUrl: {
+    id: 'service.restrictedHandler.customUrl.text',
+    defaultMessage: '!!!Please upgrade to the Franz Professional plan to use custom urls & self hosted services.',
+  },
+  action: {
+    id: 'service.restrictedHandler.action',
+    defaultMessage: '!!!Upgrade Account',
+  },
+});
+
+export default @observer class ServiceRestricted extends Component {
+  static propTypes = {
+    name: PropTypes.string.isRequired,
+    upgrade: PropTypes.func.isRequired,
+    type: PropTypes.number.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  countdownInterval = null;
+
+  countdownIntervalTimeout = 1000;
+
+  render() {
+    const {
+      name,
+      upgrade,
+      type,
+    } = this.props;
+    const { intl } = this.context;
+
+    return (
+      <div className="services__info-layer">
+        {type === RESTRICTION_TYPES.SERVICE_LIMIT && (
+          <>
+            <h1>{intl.formatMessage(messages.headlineServiceLimit)}</h1>
+            <p>{intl.formatMessage(messages.textServiceLimit, { count: serviceLimitStore.serviceLimit })}</p>
+          </>
+        )}
+        {type === RESTRICTION_TYPES.CUSTOM_URL && (
+          <>
+            <h1>{intl.formatMessage(messages.headlineCustomUrl)}</h1>
+            <p>{intl.formatMessage(messages.textCustomUrl)}</p>
+          </>
+        )}
+        <Button
+          label={intl.formatMessage(messages.action, { name })}
+          buttonType="inverted"
+          onClick={() => upgrade()}
+        />
+      </div>
+    );
+  }
+}
diff --git a/src/components/services/content/ServiceView.js b/src/components/services/content/ServiceView.js
index 13148b9b3..f65f51346 100644
--- a/src/components/services/content/ServiceView.js
+++ b/src/components/services/content/ServiceView.js
@@ -10,6 +10,7 @@ import WebviewLoader from '../../ui/WebviewLoader';
 import WebviewCrashHandler from './WebviewCrashHandler';
 import WebviewErrorHandler from './ErrorHandlers/WebviewErrorHandler';
 import ServiceDisabled from './ServiceDisabled';
+import ServiceRestricted from './ServiceRestricted';
 import ServiceWebview from './ServiceWebview';
 
 export default @observer class ServiceView extends Component {
@@ -21,6 +22,7 @@ export default @observer class ServiceView extends Component {
     edit: PropTypes.func.isRequired,
     enable: PropTypes.func.isRequired,
     isActive: PropTypes.bool,
+    upgrade: PropTypes.func.isRequired,
   };
 
   static defaultProps = {
@@ -72,6 +74,7 @@ export default @observer class ServiceView extends Component {
       reload,
       edit,
       enable,
+      upgrade,
     } = this.props;
 
     const webviewClasses = classnames({
@@ -99,7 +102,7 @@ export default @observer class ServiceView extends Component {
                 reload={reload}
               />
             )}
-            {service.isEnabled && service.isLoading && service.isFirstLoad && (
+            {service.isEnabled && service.isLoading && service.isFirstLoad && !service.isServiceAccessRestricted && (
               <WebviewLoader
                 loaded={false}
                 name={service.name}
@@ -126,11 +129,21 @@ export default @observer class ServiceView extends Component {
             )}
           </Fragment>
         ) : (
-          <ServiceWebview
-            service={service}
-            setWebviewReference={setWebviewReference}
-            detachService={detachService}
-          />
+          <>
+            {service.isServiceAccessRestricted ? (
+              <ServiceRestricted
+                name={service.recipe.name}
+                upgrade={upgrade}
+                type={service.restrictionType}
+              />
+            ) : (
+              <ServiceWebview
+                service={service}
+                setWebviewReference={setWebviewReference}
+                detachService={detachService}
+              />
+            )}
+          </>
         )}
         {statusBar}
       </div>
diff --git a/src/components/services/content/Services.js b/src/components/services/content/Services.js
index 8f8c38a11..73c27bfb6 100644
--- a/src/components/services/content/Services.js
+++ b/src/components/services/content/Services.js
@@ -3,6 +3,9 @@ import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 import { Link } from 'react-router';
 import { defineMessages, intlShape } from 'react-intl';
+import Confetti from 'react-confetti';
+import ms from 'ms';
+import injectSheet from 'react-jss';
 
 import ServiceView from './ServiceView';
 import Appear from '../../ui/effects/Appear';
@@ -18,7 +21,17 @@ const messages = defineMessages({
   },
 });
 
-export default @observer class Services extends Component {
+
+const styles = {
+  confettiContainer: {
+    position: 'absolute',
+    width: '100%',
+    zIndex: 9999,
+    pointerEvents: 'none',
+  },
+};
+
+export default @observer @injectSheet(styles) class Services extends Component {
   static propTypes = {
     services: MobxPropTypes.arrayOrObservableArray,
     setWebviewReference: PropTypes.func.isRequired,
@@ -28,6 +41,9 @@ export default @observer class Services extends Component {
     reload: PropTypes.func.isRequired,
     openSettings: PropTypes.func.isRequired,
     update: PropTypes.func.isRequired,
+    userHasCompletedSignup: PropTypes.bool.isRequired,
+    hasActivatedTrial: PropTypes.bool.isRequired,
+    classes: PropTypes.object.isRequired,
   };
 
   static defaultProps = {
@@ -38,6 +54,18 @@ export default @observer class Services extends Component {
     intl: intlShape,
   };
 
+  state = {
+    showConfetti: true,
+  }
+
+  componentDidMount() {
+    window.setTimeout(() => {
+      this.setState({
+        showConfetti: false,
+      });
+    }, ms('8s'));
+  }
+
   render() {
     const {
       services,
@@ -48,11 +76,28 @@ export default @observer class Services extends Component {
       reload,
       openSettings,
       update,
+      userHasCompletedSignup,
+      hasActivatedTrial,
+      classes,
     } = this.props;
+
+    const {
+      showConfetti,
+    } = this.state;
+
     const { intl } = this.context;
 
     return (
       <div className="services">
+        {(userHasCompletedSignup || hasActivatedTrial) && (
+          <div className={classes.confettiContainer}>
+            <Confetti
+              width={window.width}
+              height={window.height}
+              numberOfPieces={showConfetti ? 200 : 0}
+            />
+          </div>
+        )}
         {services.length === 0 && (
           <Appear
             timeout={1500}
@@ -89,6 +134,7 @@ export default @observer class Services extends Component {
               },
               redirect: false,
             })}
+            upgrade={() => openSettings({ path: 'user' })}
           />
         ))}
       </div>
diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js
index 3f6964b6b..900a83a78 100644
--- a/src/components/settings/account/AccountDashboard.js
+++ b/src/components/settings/account/AccountDashboard.js
@@ -1,14 +1,18 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
 import ReactTooltip from 'react-tooltip';
-import { ProBadge } from '@meetfranz/ui';
+import {
+  ProBadge, H1, H2,
+} from '@meetfranz/ui';
+import moment from 'moment';
 
 import Loader from '../../ui/Loader';
 import Button from '../../ui/Button';
 import Infobox from '../../ui/Infobox';
 import SubscriptionForm from '../../../containers/subscription/SubscriptionFormScreen';
+import { i18nPlanName } from '../../../helpers/plan-helpers';
 
 const messages = defineMessages({
   headline: {
@@ -19,10 +23,6 @@ const messages = defineMessages({
     id: 'settings.account.headlineSubscription',
     defaultMessage: '!!!Your Subscription',
   },
-  headlineUpgrade: {
-    id: 'settings.account.headlineUpgrade',
-    defaultMessage: '!!!Upgrade your Account',
-  },
   headlineDangerZone: {
     id: 'settings.account.headlineDangerZone',
     defaultMessage: '!!Danger Zone',
@@ -31,6 +31,10 @@ const messages = defineMessages({
     id: 'settings.account.manageSubscription.label',
     defaultMessage: '!!!Manage your subscription',
   },
+  upgradeAccountToPro: {
+    id: 'settings.account.upgradeToPro.label',
+    defaultMessage: '!!!Upgrade to Franz Professional',
+  },
   accountTypeBasic: {
     id: 'settings.account.accountType.basic',
     defaultMessage: '!!!Basic Account',
@@ -71,21 +75,36 @@ const messages = defineMessages({
     id: 'settings.account.deleteEmailSent',
     defaultMessage: '!!!You have received an email with a link to confirm your account deletion. Your account and data cannot be restored!',
   },
+  trial: {
+    id: 'settings.account.trial',
+    defaultMessage: '!!!Free Trial',
+  },
+  yourLicense: {
+    id: 'settings.account.yourLicense',
+    defaultMessage: '!!!Your Franz License:',
+  },
+  trialEndsIn: {
+    id: 'settings.account.trialEndsIn',
+    defaultMessage: '!!!Your free trial ends in {duration}.',
+  },
+  trialUpdateBillingInformation: {
+    id: 'settings.account.trialUpdateBillingInfo',
+    defaultMessage: '!!!Please update your billing info to continue using {license} after your trial period.',
+  },
 });
 
 export default @observer class AccountDashboard extends Component {
   static propTypes = {
     user: MobxPropTypes.observableObject.isRequired,
     isLoading: PropTypes.bool.isRequired,
-    isLoadingPlans: PropTypes.bool.isRequired,
     userInfoRequestFailed: PropTypes.bool.isRequired,
     retryUserInfoRequest: PropTypes.func.isRequired,
-    onCloseSubscriptionWindow: PropTypes.func.isRequired,
     deleteAccount: PropTypes.func.isRequired,
     isLoadingDeleteAccount: PropTypes.bool.isRequired,
     isDeleteAccountSuccessful: PropTypes.bool.isRequired,
     openEditAccount: PropTypes.func.isRequired,
     openBilling: PropTypes.func.isRequired,
+    upgradeToPro: PropTypes.func.isRequired,
     openInvoices: PropTypes.func.isRequired,
   };
 
@@ -97,19 +116,24 @@ export default @observer class AccountDashboard extends Component {
     const {
       user,
       isLoading,
-      isLoadingPlans,
       userInfoRequestFailed,
       retryUserInfoRequest,
-      onCloseSubscriptionWindow,
       deleteAccount,
       isLoadingDeleteAccount,
       isDeleteAccountSuccessful,
       openEditAccount,
       openBilling,
+      upgradeToPro,
       openInvoices,
     } = this.props;
     const { intl } = this.context;
 
+    let planName = '';
+
+    if (user.team && user.team.plan) {
+      planName = i18nPlanName(user.team.plan, intl);
+    }
+
     return (
       <div className="settings__main">
         <div className="settings__header">
@@ -135,82 +159,113 @@ export default @observer class AccountDashboard extends Component {
           )}
 
           {!userInfoRequestFailed && (
-            <Fragment>
+            <>
               {!isLoading && (
-                <div className="account">
-                  <div className="account__box account__box--flex">
-                    <div className="account__avatar">
-                      <img
-                        src="./assets/images/logo.svg"
-                        alt=""
-                      />
-                    </div>
-                    <div className="account__info">
-                      <h2>
-                        <span className="username">{`${user.firstname} ${user.lastname}`}</span>
+                <>
+                  <div className="account">
+                    <div className="account__box account__box--flex">
+                      <div className="account__avatar">
+                        <img
+                          src="./assets/images/logo.svg"
+                          alt=""
+                        />
+                      </div>
+                      <div className="account__info">
+                        <H1>
+                          <span className="username">{`${user.firstname} ${user.lastname}`}</span>
+                          {user.isPremium && (
+                            <>
+                              {' '}
+                              <ProBadge />
+                            </>
+                          )}
+                        </H1>
+                        <p>
+                          {user.organization && `${user.organization}, `}
+                          {user.email}
+                        </p>
                         {user.isPremium && (
+                          <div className="manage-user-links">
+                            <Button
+                              label={intl.formatMessage(messages.accountEditButton)}
+                              className="franz-form__button--inverted"
+                              onClick={openEditAccount}
+                            />
+                          </div>
+                        )}
+                      </div>
+                      {!user.isPremium && (
+                        <Button
+                          label={intl.formatMessage(messages.accountEditButton)}
+                          className="franz-form__button--inverted"
+                          onClick={openEditAccount}
+                        />
+                      )}
+                    </div>
+                  </div>
+                  {user.isPremium && user.isSubscriptionOwner && (
+                    <div className="account">
+                      <div className="account__box">
+                        <H2>
+                          {intl.formatMessage(messages.yourLicense)}
+                        </H2>
+                        <p>
+                          {planName}
+                          {user.team.isTrial && (
+                            <>
+                              {' – '}
+                              {intl.formatMessage(messages.trial)}
+                            </>
+                          )}
+                        </p>
+                        {user.team.isTrial && (
                           <>
-                            {' '}
-                            <ProBadge />
-                            <span className="badge badge--premium">{intl.formatMessage(messages.accountTypePremium)}</span>
+                            <br />
+                            <p>
+                              {intl.formatMessage(messages.trialEndsIn, {
+                                duration: moment.duration(moment().diff(user.team.trialEnd)).humanize(),
+                              })}
+                            </p>
+                            <p>
+                              {intl.formatMessage(messages.trialUpdateBillingInformation, {
+                                license: planName,
+                              })}
+                            </p>
                           </>
                         )}
-                      </h2>
-                      {user.organization && `${user.organization}, `}
-                      {user.email}
-                      {user.isPremium && (
                         <div className="manage-user-links">
                           <Button
-                            label={intl.formatMessage(messages.accountEditButton)}
+                            label={intl.formatMessage(messages.upgradeAccountToPro)}
+                            className="franz-form__button--primary"
+                            onClick={upgradeToPro}
+                          />
+                          <Button
+                            label={intl.formatMessage(messages.manageSubscriptionButtonLabel)}
                             className="franz-form__button--inverted"
-                            onClick={openEditAccount}
+                            onClick={openBilling}
+                          />
+                          <Button
+                            label={intl.formatMessage(messages.invoicesButton)}
+                            className="franz-form__button--inverted"
+                            onClick={openInvoices}
                           />
-                          {user.isSubscriptionOwner && (
-                            <>
-                              <Button
-                                label={intl.formatMessage(messages.manageSubscriptionButtonLabel)}
-                                className="franz-form__button--inverted"
-                                onClick={openBilling}
-                              />
-                              <Button
-                                label={intl.formatMessage(messages.invoicesButton)}
-                                className="franz-form__button--inverted"
-                                onClick={openInvoices}
-                              />
-                            </>
-                          )}
                         </div>
-                      )}
+                      </div>
                     </div>
-                    {!user.isPremium && (
-                      <Button
-                        label={intl.formatMessage(messages.accountEditButton)}
-                        className="franz-form__button--inverted"
-                        onClick={openEditAccount}
-                      />
-                    )}
-                  </div>
-                </div>
-              )}
-
-              {!user.isPremium && (
-                isLoadingPlans ? (
-                  <Loader />
-                ) : (
-                  <div className="account franz-form">
-                    <div className="account__box">
-                      <h2>{intl.formatMessage(messages.headlineUpgrade)}</h2>
-                      <SubscriptionForm
-                        onCloseWindow={onCloseSubscriptionWindow}
-                      />
+                  )}
+                  {!user.isPremium && (
+                    <div className="account franz-form">
+                      <div className="account__box">
+                        <SubscriptionForm />
+                      </div>
                     </div>
-                  </div>
-                )
+                  )}
+                </>
               )}
 
               <div className="account franz-form">
                 <div className="account__box">
-                  <h2>{intl.formatMessage(messages.headlineDangerZone)}</h2>
+                  <H2>{intl.formatMessage(messages.headlineDangerZone)}</H2>
                   {!isDeleteAccountSuccessful && (
                   <div className="account__subscription">
                     <p>{intl.formatMessage(messages.deleteInfo)}</p>
@@ -227,7 +282,7 @@ export default @observer class AccountDashboard extends Component {
                   )}
                 </div>
               </div>
-            </Fragment>
+            </>
           )}
         </div>
         <ReactTooltip place="right" type="dark" effect="solid" />
diff --git a/src/components/settings/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.js
index df4b3b3b2..4696b82eb 100644
--- a/src/components/settings/navigation/SettingsNavigation.js
+++ b/src/components/settings/navigation/SettingsNavigation.js
@@ -8,6 +8,7 @@ import Link from '../../ui/Link';
 import { workspaceStore } from '../../../features/workspaces';
 import UIStore from '../../../stores/UIStore';
 import UserStore from '../../../stores/UserStore';
+import { serviceLimitStore } from '../../../features/serviceLimit';
 
 const messages = defineMessages({
   availableServices: {
@@ -80,7 +81,12 @@ export default @inject('stores') @observer class SettingsNavigation extends Comp
         >
           {intl.formatMessage(messages.yourServices)}
           {' '}
-          <span className="badge">{serviceCount}</span>
+          <span className="badge">
+            {serviceCount}
+            {serviceLimitStore.serviceLimit !== 0 && (
+              `/${serviceLimitStore.serviceLimit}`
+            )}
+          </span>
         </Link>
         {workspaceStore.isFeatureEnabled ? (
           <Link
diff --git a/src/components/settings/recipes/RecipeItem.js b/src/components/settings/recipes/RecipeItem.js
index 3bb0852b2..12e3775f6 100644
--- a/src/components/settings/recipes/RecipeItem.js
+++ b/src/components/settings/recipes/RecipeItem.js
@@ -19,7 +19,7 @@ export default @observer class RecipeItem extends Component {
         className="recipe-teaser"
         onClick={onClick}
       >
-        {recipe.local && (
+        {recipe.isDevRecipe && (
           <span className="recipe-teaser__dev-badge">dev</span>
         )}
         <img
diff --git a/src/components/settings/recipes/RecipesDashboard.js b/src/components/settings/recipes/RecipesDashboard.js
index 00cd725cf..75e60b7ec 100644
--- a/src/components/settings/recipes/RecipesDashboard.js
+++ b/src/components/settings/recipes/RecipesDashboard.js
@@ -4,12 +4,17 @@ import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
 import { Link } from 'react-router';
 
+import { Button, Input } from '@meetfranz/forms';
+import injectSheet from 'react-jss';
+import { H3, H2, ProBadge } from '@meetfranz/ui';
 import SearchInput from '../../ui/SearchInput';
 import Infobox from '../../ui/Infobox';
 import RecipeItem from './RecipeItem';
 import Loader from '../../ui/Loader';
 import Appear from '../../ui/effects/Appear';
 import { FRANZ_SERVICE_REQUEST } from '../../../config';
+import LimitReachedInfobox from '../../../features/serviceLimit/components/LimitReachedInfobox';
+import PremiumFeatureContainer from '../../ui/PremiumFeatureContainer';
 
 const messages = defineMessages({
   headline: {
@@ -28,9 +33,9 @@ const messages = defineMessages({
     id: 'settings.recipes.all',
     defaultMessage: '!!!All services',
   },
-  devRecipes: {
-    id: 'settings.recipes.dev',
-    defaultMessage: '!!!Development',
+  customRecipes: {
+    id: 'settings.recipes.custom',
+    defaultMessage: '!!!Custom Services',
   },
   nothingFound: {
     id: 'settings.recipes.nothingFound',
@@ -44,9 +49,61 @@ const messages = defineMessages({
     id: 'settings.recipes.missingService',
     defaultMessage: '!!!Missing a service?',
   },
+  customRecipeIntro: {
+    id: 'settings.recipes.customService.intro',
+    defaultMessage: '!!!To add a custom service, copy the recipe folder into:',
+  },
+  openFolder: {
+    id: 'settings.recipes.customService.openFolder',
+    defaultMessage: '!!!Open directory',
+  },
+  openDevDocs: {
+    id: 'settings.recipes.customService.openDevDocs',
+    defaultMessage: '!!!Developer Documentation',
+  },
+  headlineCustomRecipes: {
+    id: 'settings.recipes.customService.headline.customRecipes',
+    defaultMessage: '!!!Custom Service Recipes',
+  },
+  headlineCommunityRecipes: {
+    id: 'settings.recipes.customService.headline.communityRecipes',
+    defaultMessage: '!!!Community Services',
+  },
+  headlineDevRecipes: {
+    id: 'settings.recipes.customService.headline.devRecipes',
+    defaultMessage: '!!!Your Development Service Recipes',
+  },
 });
 
-export default @observer class RecipesDashboard extends Component {
+const styles = {
+  devRecipeIntroContainer: {
+    textAlign: 'center',
+    width: '100%',
+    height: 'auto',
+    margin: [40, 0],
+  },
+  path: {
+    marginTop: 20,
+
+    '& > div': {
+      fontFamily: 'SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace',
+    },
+  },
+  actionContainer: {
+    '& button': {
+      margin: [0, 10],
+    },
+  },
+  devRecipeList: {
+    marginTop: 20,
+    height: 'auto',
+  },
+  proBadge: {
+    marginLeft: '10px !important',
+  },
+};
+
+export default @injectSheet(styles) @observer class RecipesDashboard extends Component {
   static propTypes = {
     recipes: MobxPropTypes.arrayOrObservableArray.isRequired,
     isLoading: PropTypes.bool.isRequired,
@@ -55,12 +112,18 @@ export default @observer class RecipesDashboard extends Component {
     searchRecipes: PropTypes.func.isRequired,
     resetSearch: PropTypes.func.isRequired,
     serviceStatus: MobxPropTypes.arrayOrObservableArray.isRequired,
-    devRecipesCount: PropTypes.number.isRequired,
     searchNeedle: PropTypes.string,
+    recipeFilter: PropTypes.string,
+    recipeDirectory: PropTypes.string.isRequired,
+    openRecipeDirectory: PropTypes.func.isRequired,
+    openDevDocs: PropTypes.func.isRequired,
+    classes: PropTypes.object.isRequired,
+    isCommunityRecipesIncludedInCurrentPlan: PropTypes.bool.isRequired,
   };
 
   static defaultProps = {
     searchNeedle: '',
+    recipeFilter: 'all',
   }
 
   static contextTypes = {
@@ -76,16 +139,26 @@ export default @observer class RecipesDashboard extends Component {
       searchRecipes,
       resetSearch,
       serviceStatus,
-      devRecipesCount,
       searchNeedle,
+      recipeFilter,
+      recipeDirectory,
+      openRecipeDirectory,
+      openDevDocs,
+      classes,
+      isCommunityRecipesIncludedInCurrentPlan,
     } = this.props;
     const { intl } = this.context;
 
+
+    const communityRecipes = recipes.filter(r => !r.isDevRecipe);
+    const devRecipes = recipes.filter(r => r.isDevRecipe);
+
     return (
       <div className="settings__main">
         <div className="settings__header">
           <h1>{intl.formatMessage(messages.headline)}</h1>
         </div>
+        <LimitReachedInfobox />
         <div className="settings__body recipes">
           {serviceStatus.length > 0 && serviceStatus.includes('created') && (
             <Appear>
@@ -122,20 +195,14 @@ export default @observer class RecipesDashboard extends Component {
             >
               {intl.formatMessage(messages.allRecipes)}
             </Link>
-            {devRecipesCount > 0 && (
-              <Link
-                to="/settings/recipes/dev"
-                className="badge"
-                activeClassName={`${!searchNeedle ? 'badge--primary' : ''}`}
-                onClick={() => resetSearch()}
-              >
-                {intl.formatMessage(messages.devRecipes)}
-                {' '}
-(
-                {devRecipesCount}
-)
-              </Link>
-            )}
+            <Link
+              to="/settings/recipes/dev"
+              className="badge"
+              activeClassName={`${!searchNeedle ? 'badge--primary' : ''}`}
+              onClick={() => resetSearch()}
+            >
+              {intl.formatMessage(messages.customRecipes)}
+            </Link>
             <a href={FRANZ_SERVICE_REQUEST} target="_blank" className="link recipes__service-request">
               {intl.formatMessage(messages.missingService)}
               {' '}
@@ -146,23 +213,78 @@ export default @observer class RecipesDashboard extends Component {
           {isLoading ? (
             <Loader />
           ) : (
-            <div className="recipes__list">
-              {hasLoadedRecipes && recipes.length === 0 && (
-                <p className="align-middle settings__empty-state">
-                  <span className="emoji">
-                    <img src="./assets/images/emoji/dontknow.png" alt="" />
-                  </span>
-                  {intl.formatMessage(messages.nothingFound)}
-                </p>
+            <>
+              {recipeFilter === 'dev' && (
+                <>
+                  <H2>
+                    {intl.formatMessage(messages.headlineCustomRecipes)}
+                    {isCommunityRecipesIncludedInCurrentPlan && (
+                      <ProBadge className={classes.proBadge} />
+                    )}
+                  </H2>
+                  <div className={classes.devRecipeIntroContainer}>
+                    <p>
+                      {intl.formatMessage(messages.customRecipeIntro)}
+                    </p>
+                    <Input
+                      value={recipeDirectory}
+                      className={classes.path}
+                      showLabel={false}
+                    />
+                    <div className={classes.actionContainer}>
+                      <Button
+                        onClick={openRecipeDirectory}
+                        buttonType="secondary"
+                        label={intl.formatMessage(messages.openFolder)}
+                      />
+                      <Button
+                        onClick={openDevDocs}
+                        buttonType="secondary"
+                        label={intl.formatMessage(messages.openDevDocs)}
+                      />
+                    </div>
+                  </div>
+                </>
+              )}
+              <PremiumFeatureContainer
+                condition={(recipeFilter === 'dev' && communityRecipes.length > 0) && isCommunityRecipesIncludedInCurrentPlan}
+              >
+                {recipeFilter === 'dev' && communityRecipes.length > 0 && (
+                  <H3>{intl.formatMessage(messages.headlineCommunityRecipes)}</H3>
+                )}
+                <div className="recipes__list">
+                  {hasLoadedRecipes && recipes.length === 0 && recipeFilter !== 'dev' && (
+                    <p className="align-middle settings__empty-state">
+                      <span className="emoji">
+                        <img src="./assets/images/emoji/dontknow.png" alt="" />
+                      </span>
+                      {intl.formatMessage(messages.nothingFound)}
+                    </p>
+                  )}
+                  {communityRecipes.map(recipe => (
+                    <RecipeItem
+                      key={recipe.id}
+                      recipe={recipe}
+                      onClick={() => showAddServiceInterface({ recipeId: recipe.id })}
+                    />
+                  ))}
+                </div>
+              </PremiumFeatureContainer>
+              {recipeFilter === 'dev' && devRecipes.length > 0 && (
+                <div className={classes.devRecipeList}>
+                  <H3>{intl.formatMessage(messages.headlineDevRecipes)}</H3>
+                  <div className="recipes__list">
+                    {devRecipes.map(recipe => (
+                      <RecipeItem
+                        key={recipe.id}
+                        recipe={recipe}
+                        onClick={() => showAddServiceInterface({ recipeId: recipe.id })}
+                      />
+                    ))}
+                  </div>
+                </div>
               )}
-              {recipes.map(recipe => (
-                <RecipeItem
-                  key={recipe.id}
-                  recipe={recipe}
-                  onClick={() => showAddServiceInterface({ recipeId: recipe.id })}
-                />
-              ))}
-            </div>
+            </>
           )}
         </div>
       </div>
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index 4ba2eb844..5cde0db8e 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -17,6 +17,8 @@ import ImageUpload from '../../ui/ImageUpload';
 import Select from '../../ui/Select';
 
 import PremiumFeatureContainer from '../../ui/PremiumFeatureContainer';
+import LimitReachedInfobox from '../../../features/serviceLimit/components/LimitReachedInfobox';
+import { serviceLimitStore } from '../../../features/serviceLimit';
 
 const messages = defineMessages({
   saveService: {
@@ -128,8 +130,8 @@ export default @observer class EditServiceForm extends Component {
     isSaving: PropTypes.bool.isRequired,
     isDeleting: PropTypes.bool.isRequired,
     isProxyFeatureEnabled: PropTypes.bool.isRequired,
-    isProxyPremiumFeature: PropTypes.bool.isRequired,
-    isSpellcheckerPremiumFeature: PropTypes.bool.isRequired,
+    isServiceProxyIncludedInCurrentPlan: PropTypes.bool.isRequired,
+    isSpellcheckerIncludedInCurrentPlan: PropTypes.bool.isRequired,
   };
 
   static defaultProps = {
@@ -192,8 +194,8 @@ export default @observer class EditServiceForm extends Component {
       isDeleting,
       onDelete,
       isProxyFeatureEnabled,
-      isProxyPremiumFeature,
-      isSpellcheckerPremiumFeature,
+      isServiceProxyIncludedInCurrentPlan,
+      isSpellcheckerIncludedInCurrentPlan,
     } = this.props;
     const { intl } = this.context;
 
@@ -252,6 +254,7 @@ export default @observer class EditServiceForm extends Component {
             )}
           </span>
         </div>
+        <LimitReachedInfobox />
         <div className="settings__body">
           <form onSubmit={e => this.submit(e)} id="form">
             <div className="service-name">
@@ -342,7 +345,7 @@ export default @observer class EditServiceForm extends Component {
             </div>
 
             <PremiumFeatureContainer
-              condition={isSpellcheckerPremiumFeature}
+              condition={!isSpellcheckerIncludedInCurrentPlan}
               gaEventInfo={{ category: 'User', event: 'upgrade', label: 'spellchecker' }}
             >
               <div className="settings__settings-group">
@@ -352,7 +355,7 @@ export default @observer class EditServiceForm extends Component {
 
             {isProxyFeatureEnabled && (
               <PremiumFeatureContainer
-                condition={isProxyPremiumFeature}
+                condition={!isServiceProxyIncludedInCurrentPlan}
                 gaEventInfo={{ category: 'User', event: 'upgrade', label: 'proxy' }}
               >
                 <div className="settings__settings-group">
@@ -418,7 +421,7 @@ export default @observer class EditServiceForm extends Component {
               type="submit"
               label={intl.formatMessage(messages.saveService)}
               htmlForm="form"
-              disabled={action !== 'edit' && form.isPristine && requiresUserInput}
+              disabled={action !== 'edit' && ((form.isPristine && requiresUserInput) || serviceLimitStore.userHasReachedServiceLimit)}
             />
           )}
         </div>
diff --git a/src/components/settings/services/ServicesDashboard.js b/src/components/settings/services/ServicesDashboard.js
index 53bae12df..78038e86a 100644
--- a/src/components/settings/services/ServicesDashboard.js
+++ b/src/components/settings/services/ServicesDashboard.js
@@ -9,6 +9,7 @@ import Infobox from '../../ui/Infobox';
 import Loader from '../../ui/Loader';
 import ServiceItem from './ServiceItem';
 import Appear from '../../ui/effects/Appear';
+import LimitReachedInfobox from '../../../features/serviceLimit/components/LimitReachedInfobox';
 
 const messages = defineMessages({
   headline: {
@@ -91,6 +92,7 @@ export default @observer class ServicesDashboard extends Component {
         <div className="settings__header">
           <h1>{intl.formatMessage(messages.headline)}</h1>
         </div>
+        <LimitReachedInfobox />
         <div className="settings__body">
           {!isLoading && (
             <SearchInput
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index efd453356..3f9e0a6bc 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -100,7 +100,7 @@ export default @observer class EditSettingsForm extends Component {
     isClearingAllCache: PropTypes.bool.isRequired,
     onClearAllCache: PropTypes.func.isRequired,
     cacheSize: PropTypes.string.isRequired,
-    isSpellcheckerPremiumFeature: PropTypes.bool.isRequired,
+    isSpellcheckerIncludedInCurrentPlan: PropTypes.bool.isRequired,
   };
 
   static contextTypes = {
@@ -130,7 +130,7 @@ export default @observer class EditSettingsForm extends Component {
       isClearingAllCache,
       onClearAllCache,
       cacheSize,
-      isSpellcheckerPremiumFeature,
+      isSpellcheckerIncludedInCurrentPlan,
     } = this.props;
     const { intl } = this.context;
 
@@ -173,7 +173,7 @@ export default @observer class EditSettingsForm extends Component {
             <h2 id="language">{intl.formatMessage(messages.headlineLanguage)}</h2>
             <Select field={form.$('locale')} showLabel={false} />
             <PremiumFeatureContainer
-              condition={isSpellcheckerPremiumFeature}
+              condition={!isSpellcheckerIncludedInCurrentPlan}
               gaEventInfo={{ category: 'User', event: 'upgrade', label: 'spellchecker' }}
             >
               <Fragment>
diff --git a/src/components/settings/team/TeamDashboard.js b/src/components/settings/team/TeamDashboard.js
index 82c517fcb..990ee52e7 100644
--- a/src/components/settings/team/TeamDashboard.js
+++ b/src/components/settings/team/TeamDashboard.js
@@ -133,13 +133,13 @@ export default @injectSheet(styles) @observer class TeamDashboard extends Compon
                         </div>
                         <img className={classes.image} src="https://cdn.franzinfra.com/announcements/assets/teams.png" alt="Franz for Teams" />
                       </div>
-                      <Button
-                        label={intl.formatMessage(messages.manageButton)}
-                        onClick={openTeamManagement}
-                        className={classes.cta}
-                      />
                     </>
                   </PremiumFeatureContainer>
+                  <Button
+                    label={intl.formatMessage(messages.manageButton)}
+                    onClick={openTeamManagement}
+                    className={classes.cta}
+                  />
                 </>
               )}
             </>
diff --git a/src/components/subscription/SubscriptionForm.js b/src/components/subscription/SubscriptionForm.js
index 50f1e0522..cdfbbe60d 100644
--- a/src/components/subscription/SubscriptionForm.js
+++ b/src/components/subscription/SubscriptionForm.js
@@ -1,214 +1,78 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
+import { observer } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
+import injectSheet from 'react-jss';
 
-import Form from '../../lib/Form';
-import Radio from '../ui/Radio';
-import Button from '../ui/Button';
-import Loader from '../ui/Loader';
+import { H3, H2 } from '@meetfranz/ui';
 
-import { required } from '../../helpers/validation-helpers';
+import { Button } from '@meetfranz/forms';
+import { FeatureList } from '../ui/FeatureList';
 
 const messages = defineMessages({
   submitButtonLabel: {
-    id: 'subscription.submit.label',
-    defaultMessage: '!!!Support the development of Franz',
+    id: 'subscription.cta.choosePlan',
+    defaultMessage: '!!!Choose your plan',
   },
-  paymentSessionError: {
-    id: 'subscription.paymentSessionError',
-    defaultMessage: '!!!Could not initialize payment form',
+  teaserHeadline: {
+    id: 'settings.account.headlineUpgradeAccount',
+    defaultMessage: '!!!Upgrade your account and get the full Franz experience',
   },
-  typeFree: {
-    id: 'subscription.type.free',
-    defaultMessage: '!!!free',
-  },
-  typeMonthly: {
-    id: 'subscription.type.month',
-    defaultMessage: '!!!month',
-  },
-  typeYearly: {
-    id: 'subscription.type.year',
-    defaultMessage: '!!!year',
+  teaserText: {
+    id: 'subscription.teaser.intro',
+    defaultMessage: '!!!Franz 5 comes with a wide range of new features to boost up your everyday communication - batteries included. Check out our new plans and find out which one suits you most!',
   },
   includedFeatures: {
-    id: 'subscription.includedFeatures',
-    defaultMessage: '!!!The Franz Premium Supporter Account includes',
-  },
-  onpremise: {
-    id: 'subscription.features.onpremise.mattermost',
-    defaultMessage: '!!!Add on-premise/hosted services like Mattermost',
-  },
-  noInterruptions: {
-    id: 'subscription.features.noInterruptions',
-    defaultMessage: '!!!No app delays & nagging to upgrade license',
-  },
-  proxy: {
-    id: 'subscription.features.proxy',
-    defaultMessage: '!!!Proxy support for services',
-  },
-  spellchecker: {
-    id: 'subscription.features.spellchecker',
-    defaultMessage: '!!!Support for Spellchecker',
+    id: 'subscription.teaser.includedFeatures',
+    defaultMessage: '!!!Paid Franz Plans include:',
   },
-  workspaces: {
-    id: 'subscription.features.workspaces',
-    defaultMessage: '!!!Organize your services in workspaces',
-  },
-  ads: {
-    id: 'subscription.features.ads',
-    defaultMessage: '!!!No ads, ever!',
-  },
-  comingSoon: {
-    id: 'subscription.features.comingSoon',
-    defaultMessage: '!!!coming soon',
-  },
-  euTaxInfo: {
-    id: 'subscription.euTaxInfo',
-    defaultMessage: '!!!EU residents: local sales tax may apply',
+});
+
+const styles = () => ({
+  activateTrialButton: {
+    margin: [40, 0, 50],
   },
 });
 
-export default @observer class SubscriptionForm extends Component {
+export default @observer @injectSheet(styles) class SubscriptionForm extends Component {
   static propTypes = {
-    plan: MobxPropTypes.objectOrObservableObject.isRequired,
-    isLoading: PropTypes.bool.isRequired,
-    handlePayment: PropTypes.func.isRequired,
-    retryPlanRequest: PropTypes.func.isRequired,
-    isCreatingHostedPage: PropTypes.bool.isRequired,
-    error: PropTypes.bool.isRequired,
-    showSkipOption: PropTypes.bool,
-    skipAction: PropTypes.func,
-    skipButtonLabel: PropTypes.string,
-    hideInfo: PropTypes.bool.isRequired,
-  };
-
-  static defaultProps = {
-    showSkipOption: false,
-    skipAction: () => null,
-    skipButtonLabel: '',
+    selectPlan: PropTypes.func.isRequired,
+    isActivatingTrial: PropTypes.bool.isRequired,
+    classes: PropTypes.object.isRequired,
   };
 
   static contextTypes = {
     intl: intlShape,
   };
 
-  componentWillMount() {
-    this.form = this.prepareForm();
-  }
-
-  prepareForm() {
-    const { intl } = this.context;
-
-    const form = {
-      fields: {
-        paymentTier: {
-          value: 'year',
-          validators: [required],
-          options: [{
-            value: 'month',
-            label: `€ ${Object.hasOwnProperty.call(this.props.plan, 'month')
-              ? `${this.props.plan.month.price} / ${intl.formatMessage(messages.typeMonthly)}`
-              : 'monthly'}`,
-          }, {
-            value: 'year',
-            label: `€ ${Object.hasOwnProperty.call(this.props.plan, 'year')
-              ? `${this.props.plan.year.price} / ${intl.formatMessage(messages.typeYearly)}`
-              : 'yearly'}`,
-          }],
-        },
-      },
-    };
-
-    if (this.props.showSkipOption) {
-      form.fields.paymentTier.options.unshift({
-        value: 'skip',
-        label: `€ 0 / ${intl.formatMessage(messages.typeFree)}`,
-      });
-    }
-
-    return new Form(form, this.context.intl);
-  }
-
   render() {
     const {
-      isLoading,
-      isCreatingHostedPage,
-      handlePayment,
-      retryPlanRequest,
-      error,
-      showSkipOption,
-      skipAction,
-      skipButtonLabel,
-      hideInfo,
+      isActivatingTrial,
+      selectPlan,
+      classes,
     } = this.props;
     const { intl } = this.context;
 
-    if (error) {
-      return (
+    return (
+      <>
+        <H2>{intl.formatMessage(messages.teaserHeadline)}</H2>
+        <p>{intl.formatMessage(messages.teaserText)}</p>
         <Button
-          label="Reload"
-          onClick={retryPlanRequest}
-          isLoaded={!isLoading}
+          label={intl.formatMessage(messages.submitButtonLabel)}
+          className={classes.activateTrialButton}
+          busy={isActivatingTrial}
+          onClick={selectPlan}
+          stretch
         />
-      );
-    }
-
-    return (
-      <Loader loaded={!isLoading}>
-        <Radio field={this.form.$('paymentTier')} showLabel={false} className="paymentTiers" />
-        {!hideInfo && (
-          <div className="subscription__premium-info">
-            <p>
-              <strong>{intl.formatMessage(messages.includedFeatures)}</strong>
-            </p>
-            <div className="subscription">
-              <ul className="subscription__premium-features">
-                <li>{intl.formatMessage(messages.onpremise)}</li>
-                <li>
-                  {intl.formatMessage(messages.noInterruptions)}
-                </li>
-                <li>
-                  {intl.formatMessage(messages.spellchecker)}
-                </li>
-                <li>
-                  {intl.formatMessage(messages.proxy)}
-                </li>
-                <li>
-                  {intl.formatMessage(messages.workspaces)}
-                </li>
-                <li>
-                  {intl.formatMessage(messages.ads)}
-                </li>
-              </ul>
-            </div>
+        <div className="subscription__premium-info">
+          <H3>
+            {intl.formatMessage(messages.includedFeatures)}
+          </H3>
+          <div className="subscription">
+            <FeatureList />
           </div>
-        )}
-        <Fragment>
-          {error.code === 'no-payment-session' && (
-            <p className="error-message center">{intl.formatMessage(messages.paymentSessionError)}</p>
-          )}
-        </Fragment>
-        {showSkipOption && this.form.$('paymentTier').value === 'skip' ? (
-          <Button
-            label={skipButtonLabel}
-            className="auth__button"
-            onClick={skipAction}
-          />
-        ) : (
-          <Button
-            label={intl.formatMessage(messages.submitButtonLabel)}
-            className="auth__button"
-            loaded={!isCreatingHostedPage}
-            onClick={() => handlePayment(this.form.$('paymentTier').value)}
-          />
-        )}
-        {this.form.$('paymentTier').value !== 'skip' && (
-          <p className="legal">
-            {intl.formatMessage(messages.euTaxInfo)}
-          </p>
-        )}
-      </Loader>
+        </div>
+      </>
     );
   }
 }
diff --git a/src/components/subscription/SubscriptionPopup.js b/src/components/subscription/SubscriptionPopup.js
index 0f6f0260f..12ef8a6e9 100644
--- a/src/components/subscription/SubscriptionPopup.js
+++ b/src/components/subscription/SubscriptionPopup.js
@@ -43,7 +43,7 @@ export default @observer class SubscriptionPopup extends Component {
 
     setTimeout(() => {
       this.props.closeWindow();
-    }, ms('4s'));
+    }, ms('1s'));
   }
 
   render() {
@@ -61,8 +61,6 @@ export default @observer class SubscriptionPopup extends Component {
             autosize
             src={encodeURI(url)}
             onDidNavigate={completeCheck}
-            // onNewWindow={(event, url, frameName, options) =>
-            //   openWindow({ event, url, frameName, options })}
           />
         </div>
         <div className="subscription-popup__toolbar franz-form">
diff --git a/src/components/subscription/TrialForm.js b/src/components/subscription/TrialForm.js
new file mode 100644
index 000000000..9fe1c93b7
--- /dev/null
+++ b/src/components/subscription/TrialForm.js
@@ -0,0 +1,114 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+import injectSheet from 'react-jss';
+
+import { H3, H2 } from '@meetfranz/ui';
+
+import { Button } from '@meetfranz/forms';
+import { FeatureList } from '../ui/FeatureList';
+import { FeatureItem } from '../ui/FeatureItem';
+
+const messages = defineMessages({
+  submitButtonLabel: {
+    id: 'subscription.cta.activateTrial',
+    defaultMessage: '!!!Yes, start the free Franz Professional trial',
+  },
+  allOptionsButton: {
+    id: 'subscription.cta.allOptions',
+    defaultMessage: '!!!See all options',
+  },
+  teaserHeadline: {
+    id: 'settings.account.headlineTrialUpgrade',
+    defaultMessage: '!!!Get the free 14 day Franz Professional Trial',
+  },
+  includedFeatures: {
+    id: 'subscription.includedProFeatures',
+    defaultMessage: '!!!The Franz Professional Plan includes:',
+  },
+  noStringsAttachedHeadline: {
+    id: 'pricing.trial.terms.headline',
+    defaultMessage: '!!!No strings attached',
+  },
+  noCreditCard: {
+    id: 'pricing.trial.terms.noCreditCard',
+    defaultMessage: '!!!No credit card required',
+  },
+  automaticTrialEnd: {
+    id: 'pricing.trial.terms.automaticTrialEnd',
+    defaultMessage: '!!!Your free trial ends automatically after 14 days',
+  },
+});
+
+const styles = () => ({
+  activateTrialButton: {
+    margin: [40, 0, 10],
+  },
+  allOptionsButton: {
+    margin: [0, 0, 40],
+    background: 'none',
+    border: 'none',
+  },
+  keyTerms: {
+    marginTop: 20,
+  },
+});
+
+export default @observer @injectSheet(styles) class TrialForm extends Component {
+  static propTypes = {
+    activateTrial: PropTypes.func.isRequired,
+    isActivatingTrial: PropTypes.bool.isRequired,
+    showAllOptions: PropTypes.func.isRequired,
+    classes: PropTypes.object.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  render() {
+    const {
+      isActivatingTrial,
+      activateTrial,
+      showAllOptions,
+      classes,
+    } = this.props;
+    const { intl } = this.context;
+
+    return (
+      <>
+        <H2>{intl.formatMessage(messages.teaserHeadline)}</H2>
+        <H3 className={classes.keyTerms}>
+          {intl.formatMessage(messages.noStringsAttachedHeadline)}
+        </H3>
+        <ul>
+          <FeatureItem icon="👉" name={intl.formatMessage(messages.noCreditCard)} />
+          <FeatureItem icon="👉" name={intl.formatMessage(messages.automaticTrialEnd)} />
+        </ul>
+
+        <Button
+          label={intl.formatMessage(messages.submitButtonLabel)}
+          className={classes.activateTrialButton}
+          busy={isActivatingTrial}
+          onClick={activateTrial}
+          stretch
+        />
+        <Button
+          label={intl.formatMessage(messages.allOptionsButton)}
+          className={classes.allOptionsButton}
+          onClick={showAllOptions}
+          stretch
+        />
+        <div className="subscription__premium-info">
+          <H3>
+            {intl.formatMessage(messages.includedFeatures)}
+          </H3>
+          <div className="subscription">
+            <FeatureList />
+          </div>
+        </div>
+      </>
+    );
+  }
+}
diff --git a/src/components/ui/FeatureItem.js b/src/components/ui/FeatureItem.js
new file mode 100644
index 000000000..53616f2eb
--- /dev/null
+++ b/src/components/ui/FeatureItem.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import injectSheet from 'react-jss';
+import { Icon } from '@meetfranz/ui';
+import classnames from 'classnames';
+import { mdiCheckCircle } from '@mdi/js';
+
+const styles = theme => ({
+  featureItem: {
+    borderBottom: [1, 'solid', theme.legacyStyles.themeGrayDark],
+    padding: [8, 0],
+    display: 'flex',
+    alignItems: 'center',
+  },
+  featureIcon: {
+    fill: theme.brandSuccess,
+    marginRight: 10,
+  },
+});
+
+export const FeatureItem = injectSheet(styles)(({
+  classes, className, name, icon,
+}) => (
+  <li className={classnames({
+    [classes.featureItem]: true,
+    [className]: className,
+  })}
+  >
+    {icon ? (
+      <span className={classes.featureIcon}>{icon}</span>
+    ) : (
+      <Icon icon={mdiCheckCircle} className={classes.featureIcon} size={1.5} />
+    )}
+    {name}
+  </li>
+));
+
+export default FeatureItem;
diff --git a/src/components/ui/FeatureList.js b/src/components/ui/FeatureList.js
new file mode 100644
index 000000000..62944ad75
--- /dev/null
+++ b/src/components/ui/FeatureList.js
@@ -0,0 +1,89 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { defineMessages, intlShape } from 'react-intl';
+
+import { FeatureItem } from './FeatureItem';
+
+const messages = defineMessages({
+  unlimitedServices: {
+    id: 'pricing.features.unlimitedServices',
+    defaultMessage: '!!!Add unlimited services',
+  },
+  spellchecker: {
+    id: 'pricing.features.spellchecker',
+    defaultMessage: '!!!Spellchecker support',
+  },
+  workspaces: {
+    id: 'pricing.features.workspaces',
+    defaultMessage: '!!!Workspaces',
+  },
+  customWebsites: {
+    id: 'pricing.features.customWebsites',
+    defaultMessage: '!!!Add Custom Websites',
+  },
+  onPremise: {
+    id: 'pricing.features.onPremise',
+    defaultMessage: '!!!On-premise & other Hosted Services',
+  },
+  thirdPartyServices: {
+    id: 'pricing.features.thirdPartyServices',
+    defaultMessage: '!!!Install 3rd party services',
+  },
+  serviceProxies: {
+    id: 'pricing.features.serviceProxies',
+    defaultMessage: '!!!Service Proxies',
+  },
+  teamManagement: {
+    id: 'pricing.features.teamManagement',
+    defaultMessage: '!!!Team Management',
+  },
+  appDelays: {
+    id: 'pricing.features.appDelays',
+    defaultMessage: '!!!No Waiting Screens',
+  },
+  adFree: {
+    id: 'pricing.features.adFree',
+    defaultMessage: '!!!Forever ad-free',
+  },
+});
+
+export class FeatureList extends Component {
+  static propTypes = {
+    className: PropTypes.string,
+    featureClassName: PropTypes.string,
+  };
+
+  static defaultProps = {
+    className: '',
+    featureClassName: '',
+  }
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  render() {
+    const {
+      className,
+      featureClassName,
+    } = this.props;
+    const { intl } = this.context;
+
+    return (
+      <ul className={className}>
+        <FeatureItem name={intl.formatMessage(messages.unlimitedServices)} className={featureClassName} />
+        <FeatureItem name={intl.formatMessage(messages.spellchecker)} className={featureClassName} />
+        <FeatureItem name={intl.formatMessage(messages.workspaces)} className={featureClassName} />
+        <FeatureItem name={intl.formatMessage(messages.customWebsites)} className={featureClassName} />
+        <FeatureItem name={intl.formatMessage(messages.onPremise)} className={featureClassName} />
+        <FeatureItem name={intl.formatMessage(messages.thirdPartyServices)} className={featureClassName} />
+        <FeatureItem name={intl.formatMessage(messages.serviceProxies)} className={featureClassName} />
+        <FeatureItem name={intl.formatMessage(messages.teamManagement)} className={featureClassName} />
+        <FeatureItem name={intl.formatMessage(messages.appDelays)} className={featureClassName} />
+        <FeatureItem name={intl.formatMessage(messages.adFree)} className={featureClassName} />
+      </ul>
+    );
+  }
+}
+
+export default FeatureList;
diff --git a/src/components/ui/Modal/index.js b/src/components/ui/Modal/index.js
index 0b7154760..63d858c47 100644
--- a/src/components/ui/Modal/index.js
+++ b/src/components/ui/Modal/index.js
@@ -5,6 +5,7 @@ import classnames from 'classnames';
 import injectCSS from 'react-jss';
 import { Icon } from '@meetfranz/ui';
 
+import { mdiClose } from '@mdi/js';
 import styles from './styles';
 
 // ReactModal.setAppElement('#root');
@@ -59,7 +60,7 @@ export default @injectCSS(styles) class Modal extends Component {
             className={classes.close}
             onClick={close}
           >
-            <Icon icon="mdiClose" size={1.5} />
+            <Icon icon={mdiClose} size={1.5} />
           </button>
         )}
         <div className={classes.content}>
diff --git a/src/config.js b/src/config.js
index 5bc318545..405cc5253 100644
--- a/src/config.js
+++ b/src/config.js
@@ -19,11 +19,16 @@ export const DEV_WS_API = 'wss://dev.franzinfra.com';
 export const LIVE_WS_API = 'wss://api.franzinfra.com';
 
 export const LOCAL_API_WEBSITE = 'http://localhost:3333';
-export const DEV_API_WEBSITE = 'https://meetfranz.com';
+// export const DEV_API_WEBSITE = 'https://meetfranz.com';t
+export const DEV_API_WEBSITE = 'http://hash-3ac3ccd2472269cf585c58a4f6973d86f3c9e7bd.franzstaging.com/'; // TODO: revert me
 export const LIVE_API_WEBSITE = 'https://meetfranz.com';
 
 export const STATS_API = 'https://stats.franzinfra.com';
 
+export const LOCAL_TODOS_FRONTEND_URL = 'http://localhost:4000';
+export const PRODUCTION_TODOS_FRONTEND_URL = 'https://app.franztodos.com';
+export const DEVELOPMENT_TODOS_FRONTEND_URL = 'https://development--franz-todos.netlify.com';
+
 export const GA_ID = !isDevMode ? 'UA-74126766-10' : 'UA-74126766-12';
 
 export const DEFAULT_APP_SETTINGS = {
@@ -45,16 +50,16 @@ export const DEFAULT_APP_SETTINGS = {
 };
 
 export const DEFAULT_FEATURES_CONFIG = {
-  isSpellcheckerPremiumFeature: false,
+  isSpellcheckerIncludedInCurrentPlan: true,
   needToWaitToProceed: false,
   needToWaitToProceedConfig: {
     delayOffset: ms('1h'),
     wait: ms('10s'),
   },
   isServiceProxyEnabled: false,
-  isServiceProxyPremiumFeature: true,
+  isServiceProxyIncludedInCurrentPlan: false,
   isAnnouncementsEnabled: true,
-  isWorkspacePremiumFeature: true,
+  isWorkspaceIncludedInCurrentPlan: true,
   isWorkspaceEnabled: false,
 };
 
@@ -67,6 +72,7 @@ export const DEFAULT_WINDOW_OPTIONS = {
 
 export const FRANZ_SERVICE_REQUEST = 'https://bit.ly/franz-plugin-docs';
 export const FRANZ_TRANSLATION = 'https://bit.ly/franz-translate';
+export const FRANZ_DEV_DOCS = 'http://bit.ly/franz-dev-hub';
 
 export const FILE_SYSTEM_SETTINGS_TYPES = [
   'app',
@@ -83,3 +89,25 @@ export const ALLOWED_PROTOCOLS = [
   'http:',
   'ftp:',
 ];
+
+export const PLANS = {
+  PERSONAL: 'PERSONAL_MONTHLY',
+  PRO: 'PRO_MONTHLY',
+  LEGACY: 'LEGACY',
+  FREE: 'FREE',
+};
+
+export const PLANS_MAPPING = {
+  'franz-personal-monthly': PLANS.PERSONAL,
+  'franz-personal-yearly': PLANS.PERSONAL,
+  'franz-pro-monthly': PLANS.PRO,
+  'franz-pro-yearly': PLANS.PRO,
+  'franz-supporter-license': PLANS.LEGACY,
+  'franz-supporter-license-x1': PLANS.LEGACY,
+  'franz-supporter-license-x2': PLANS.LEGACY,
+  'franz-supporter-license-year': PLANS.LEGACY,
+  'franz-supporter-license-year-x1': PLANS.LEGACY,
+  'franz-supporter-license-year-x2': PLANS.LEGACY,
+  'franz-supporter-license-year-2019': PLANS.LEGACY,
+  free: PLANS.FREE,
+};
diff --git a/src/containers/auth/AuthLayoutContainer.js b/src/containers/auth/AuthLayoutContainer.js
index 1f9c1ea61..427054d3d 100644
--- a/src/containers/auth/AuthLayoutContainer.js
+++ b/src/containers/auth/AuthLayoutContainer.js
@@ -2,7 +2,6 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 import { ThemeProvider } from 'react-jss';
-import { theme } from '@meetfranz/theme';
 
 import AuthLayout from '../../components/auth/AuthLayout';
 import AppStore from '../../stores/AppStore';
@@ -24,24 +23,22 @@ export default @inject('stores', 'actions') @observer class AuthLayoutContainer
       stores, actions, children, location,
     } = this.props;
     const {
-      app, features, globalError, settings,
+      app, features, globalError,
     } = stores;
 
     const isLoadingBaseFeatures = features.defaultFeaturesRequest.isExecuting
       && !features.defaultFeaturesRequest.wasExecuted;
 
-    const themeType = theme(settings.app.darkMode ? 'dark' : 'default');
-
     if (isLoadingBaseFeatures) {
       return (
-        <ThemeProvider theme={theme(themeType)}>
+        <ThemeProvider theme={stores.ui.theme}>
           <AppLoader />
         </ThemeProvider>
       );
     }
 
     return (
-      <ThemeProvider theme={theme(themeType)}>
+      <ThemeProvider theme={stores.ui.theme}>
         <AuthLayout
           error={globalError.response}
           pathname={location.pathname}
@@ -50,7 +47,6 @@ export default @inject('stores', 'actions') @observer class AuthLayoutContainer
           retryHealthCheck={actions.app.healthCheck}
           isHealthCheckLoading={app.healthCheckRequest.isExecuting}
           isFullScreen={app.isFullScreen}
-          darkMode={app.isSystemDarkModeEnabled}
           installAppUpdate={actions.app.installUpdate}
           nextAppReleaseVersion={app.nextAppReleaseVersion}
           appUpdateIsDownloaded={app.updateStatus === app.updateStatusTypes.DOWNLOADED}
diff --git a/src/containers/auth/PricingScreen.js b/src/containers/auth/PricingScreen.js
index 8d179a170..af1651931 100644
--- a/src/containers/auth/PricingScreen.js
+++ b/src/containers/auth/PricingScreen.js
@@ -5,7 +5,6 @@ import { RouterStore } from 'mobx-react-router';
 
 import Pricing from '../../components/auth/Pricing';
 import UserStore from '../../stores/UserStore';
-import PaymentStore from '../../stores/PaymentStore';
 
 import { globalError as globalErrorPropType } from '../../prop-types';
 
@@ -14,20 +13,40 @@ export default @inject('stores', 'actions') @observer class PricingScreen extend
     error: globalErrorPropType.isRequired,
   };
 
+  async submit() {
+    const {
+      actions,
+      stores,
+    } = this.props;
+
+    const { activateTrialRequest } = stores.user;
+    const { defaultTrialPlan } = stores.features.features;
+
+    actions.user.activateTrial({ planId: defaultTrialPlan });
+    await activateTrialRequest._promise;
+
+    if (!activateTrialRequest.isError) {
+      stores.router.push('/');
+      stores.user.hasCompletedSignup = true;
+    }
+  }
+
   render() {
-    const { actions, stores, error } = this.props;
+    const {
+      error,
+      stores,
+    } = this.props;
 
-    const nextStepRoute = stores.user.legacyServices.length ? stores.user.importRoute : stores.user.inviteRoute;
+    const { getUserInfoRequest, activateTrialRequest } = stores.user;
+    const { featuresRequest } = stores.features;
 
     return (
       <Pricing
-        donor={stores.user.data.donor || {}}
-        onSubmit={actions.user.signup}
-        onCloseSubscriptionWindow={() => this.props.stores.router.push(nextStepRoute)}
-        isLoading={stores.payment.plansRequest.isExecuting}
-        isLoadingUser={stores.user.getUserInfoRequest.isExecuting}
+        onSubmit={this.submit.bind(this)}
+        isLoadingRequiredData={(getUserInfoRequest.isExecuting || !getUserInfoRequest.wasExecuted) || (featuresRequest.isExecuting || !featuresRequest.wasExecuted)}
+        isActivatingTrial={activateTrialRequest.isExecuting}
+        trialActivationError={activateTrialRequest.isError}
         error={error}
-        skipAction={() => this.props.stores.router.push(nextStepRoute)}
       />
     );
   }
@@ -36,12 +55,11 @@ export default @inject('stores', 'actions') @observer class PricingScreen extend
 PricingScreen.wrappedComponent.propTypes = {
   actions: PropTypes.shape({
     user: PropTypes.shape({
-      signup: PropTypes.func.isRequired,
+      activateTrial: PropTypes.func.isRequired,
     }).isRequired,
   }).isRequired,
   stores: PropTypes.shape({
     user: PropTypes.instanceOf(UserStore).isRequired,
-    payment: PropTypes.instanceOf(PaymentStore).isRequired,
     router: PropTypes.instanceOf(RouterStore).isRequired,
   }).isRequired,
 };
diff --git a/src/containers/layout/AppLayoutContainer.js b/src/containers/layout/AppLayoutContainer.js
index d290a6094..a14a98554 100644
--- a/src/containers/layout/AppLayoutContainer.js
+++ b/src/containers/layout/AppLayoutContainer.js
@@ -10,6 +10,7 @@ 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';
 import GlobalErrorStore from '../../stores/GlobalErrorStore';
 
@@ -39,6 +40,7 @@ export default @inject('stores', 'actions') @observer class AppLayoutContainer e
       settings,
       globalError,
       requests,
+      user,
     } = this.props.stores;
 
     const {
@@ -125,6 +127,8 @@ export default @inject('stores', 'actions') @observer class AppLayoutContainer e
         reload={reload}
         openSettings={openSettings}
         update={updateService}
+        userHasCompletedSignup={user.hasCompletedSignup}
+        hasActivatedTrial={user.hasActivatedTrial}
       />
     );
 
@@ -148,8 +152,8 @@ export default @inject('stores', 'actions') @observer class AppLayoutContainer e
           areRequiredRequestsSuccessful={requests.areRequiredRequestsSuccessful}
           retryRequiredRequests={retryRequiredRequests}
           areRequiredRequestsLoading={requests.areRequiredRequestsLoading}
-          darkMode={settings.all.app.darkMode}
           isDelayAppScreenVisible={delayAppState.isDelayAppScreenVisible}
+          hasActivatedTrial={user.hasActivatedTrial}
         >
           {React.Children.count(children) > 0 ? children : null}
         </AppLayout>
@@ -167,6 +171,7 @@ AppLayoutContainer.wrappedComponent.propTypes = {
     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,
     globalError: PropTypes.instanceOf(GlobalErrorStore).isRequired,
   }).isRequired,
diff --git a/src/containers/settings/AccountScreen.js b/src/containers/settings/AccountScreen.js
index 66076504f..f9eae4957 100644
--- a/src/containers/settings/AccountScreen.js
+++ b/src/containers/settings/AccountScreen.js
@@ -26,7 +26,7 @@ export default @inject('stores', 'actions') @observer class AccountScreen extend
   handleWebsiteLink(route) {
     const { actions, stores } = this.props;
 
-    const url = `${WEBSITE}${route}?authToken=${stores.user.authToken}&utm_source=app&utm_medium=account_dashboard`;
+    const url = stores.user.getAuthURL(`${WEBSITE}${route}?utm_source=app&utm_medium=account_dashboard`);
 
     actions.app.openExternalUrl({ url });
   }
@@ -51,6 +51,7 @@ export default @inject('stores', 'actions') @observer class AccountScreen extend
           isLoadingDeleteAccount={user.deleteAccountRequest.isExecuting}
           isDeleteAccountSuccessful={user.deleteAccountRequest.wasExecuted && !user.deleteAccountRequest.isError}
           openEditAccount={() => this.handleWebsiteLink('/user/profile')}
+          upgradeToPro={() => this.handleWebsiteLink('/inapp/user/licenses')}
           openBilling={() => this.handleWebsiteLink('/user/billing')}
           openInvoices={() => this.handleWebsiteLink('/user/invoices')}
         />
diff --git a/src/containers/settings/EditServiceScreen.js b/src/containers/settings/EditServiceScreen.js
index 870ca4ecd..e4ff03bb3 100644
--- a/src/containers/settings/EditServiceScreen.js
+++ b/src/containers/settings/EditServiceScreen.js
@@ -330,8 +330,8 @@ export default @inject('stores', 'actions') @observer class EditServiceScreen ex
           onSubmit={d => this.onSubmit(d)}
           onDelete={() => this.deleteService()}
           isProxyFeatureEnabled={proxyFeature.isEnabled}
-          isProxyPremiumFeature={proxyFeature.isPremium}
-          isSpellcheckerPremiumFeature={spellcheckerFeature.isPremium}
+          isServiceProxyIncludedInCurrentPlan={proxyFeature.isIncludedInCurrentPlan}
+          isSpellcheckerIncludedInCurrentPlan={spellcheckerFeature.isIncludedInCurrentPlan}
         />
       </ErrorBoundary>
     );
diff --git a/src/containers/settings/EditSettingsScreen.js b/src/containers/settings/EditSettingsScreen.js
index 97c1fa3b1..67d52f102 100644
--- a/src/containers/settings/EditSettingsScreen.js
+++ b/src/containers/settings/EditSettingsScreen.js
@@ -159,8 +159,8 @@ export default @inject('stores', 'actions') @observer class EditSettingsScreen e
         },
         enableSpellchecking: {
           label: intl.formatMessage(messages.enableSpellchecking),
-          value: !this.props.stores.user.data.isPremium && spellcheckerConfig.isPremium ? false : settings.all.app.enableSpellchecking,
-          default: !this.props.stores.user.data.isPremium && spellcheckerConfig.isPremium ? false : DEFAULT_APP_SETTINGS.enableSpellchecking,
+          value: !this.props.stores.user.data.isPremium && !spellcheckerConfig.isIncludedInCurrentPlan ? false : settings.all.app.enableSpellchecking,
+          default: !this.props.stores.user.data.isPremium && !spellcheckerConfig.isIncludedInCurrentPlan ? false : DEFAULT_APP_SETTINGS.enableSpellchecking,
         },
         spellcheckerLanguage: {
           label: intl.formatMessage(globalMessages.spellcheckerLanguage),
@@ -223,7 +223,7 @@ export default @inject('stores', 'actions') @observer class EditSettingsScreen e
           cacheSize={cacheSize}
           isClearingAllCache={isClearingAllCache}
           onClearAllCache={clearAllCache}
-          isSpellcheckerPremiumFeature={spellcheckerConfig.isPremium}
+          isSpellcheckerIncludedInCurrentPlan={spellcheckerConfig.isIncludedInCurrentPlan}
         />
       </ErrorBoundary>
     );
diff --git a/src/containers/settings/RecipesScreen.js b/src/containers/settings/RecipesScreen.js
index eda5ae54c..132820b6f 100644
--- a/src/containers/settings/RecipesScreen.js
+++ b/src/containers/settings/RecipesScreen.js
@@ -1,7 +1,9 @@
+import { remote, shell } from 'electron';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { autorun } from 'mobx';
 import { inject, observer } from 'mobx-react';
+import path from 'path';
 
 import RecipePreviewsStore from '../../stores/RecipePreviewsStore';
 import RecipeStore from '../../stores/RecipesStore';
@@ -10,6 +12,11 @@ import UserStore from '../../stores/UserStore';
 
 import RecipesDashboard from '../../components/settings/recipes/RecipesDashboard';
 import ErrorBoundary from '../../components/util/ErrorBoundary';
+import { FRANZ_DEV_DOCS } from '../../config';
+import { gaEvent } from '../../lib/analytics';
+import { communityRecipesStore } from '../../features/communityRecipes';
+
+const { app } = remote;
 
 export default @inject('stores', 'actions') @observer class RecipesScreen extends Component {
   static propTypes = {
@@ -67,9 +74,16 @@ export default @inject('stores', 'actions') @observer class RecipesScreen extend
 
   render() {
     const {
-      recipePreviews, recipes, services, user,
+      recipePreviews,
+      recipes,
+      services,
+      user,
     } = this.props.stores;
-    const { showAddServiceInterface } = this.props.actions.service;
+
+    const {
+      app: appActions,
+      service: serviceActions,
+    } = this.props.actions;
 
     const { filter } = this.props.params;
     let recipeFilter;
@@ -77,7 +91,7 @@ export default @inject('stores', 'actions') @observer class RecipesScreen extend
     if (filter === 'all') {
       recipeFilter = recipePreviews.all;
     } else if (filter === 'dev') {
-      recipeFilter = recipePreviews.dev;
+      recipeFilter = communityRecipesStore.communityRecipes;
     } else {
       recipeFilter = recipePreviews.featured;
     }
@@ -89,6 +103,8 @@ export default @inject('stores', 'actions') @observer class RecipesScreen extend
       || recipes.installRecipeRequest.isExecuting
       || recipePreviews.searchRecipePreviewsRequest.isExecuting;
 
+    const recipeDirectory = path.join(app.getPath('userData'), 'recipes', 'dev');
+
     return (
       <ErrorBoundary>
         <RecipesDashboard
@@ -97,12 +113,23 @@ export default @inject('stores', 'actions') @observer class RecipesScreen extend
           addedServiceCount={services.all.length}
           isPremium={user.data.isPremium}
           hasLoadedRecipes={recipePreviews.featuredRecipePreviewsRequest.wasExecuted}
-          showAddServiceInterface={showAddServiceInterface}
+          showAddServiceInterface={serviceActions.showAddServiceInterface}
           searchRecipes={e => this.searchRecipes(e)}
           resetSearch={() => this.resetSearch()}
           searchNeedle={this.state.needle}
           serviceStatus={services.actionStatus}
-          devRecipesCount={recipePreviews.dev.length}
+          recipeFilter={filter}
+          recipeDirectory={recipeDirectory}
+          openRecipeDirectory={() => {
+            shell.openItem(recipeDirectory);
+            gaEvent('Recipe', 'open-recipe-folder', 'Open Folder');
+          }}
+          openDevDocs={() => {
+            appActions.openExternalUrl({ url: FRANZ_DEV_DOCS });
+            gaEvent('Recipe', 'open-dev-docs', 'Developer Documentation');
+          }}
+          isCommunityRecipesIncludedInCurrentPlan={communityRecipesStore.isCommunityRecipesIncludedInCurrentPlan}
+          isUserPremiumUser={user.isPremium}
         />
       </ErrorBoundary>
     );
@@ -117,6 +144,9 @@ RecipesScreen.wrappedComponent.propTypes = {
     user: PropTypes.instanceOf(UserStore).isRequired,
   }).isRequired,
   actions: PropTypes.shape({
+    app: PropTypes.shape({
+      openExternalUrl: PropTypes.func.isRequired,
+    }).isRequired,
     service: PropTypes.shape({
       showAddServiceInterface: PropTypes.func.isRequired,
     }).isRequired,
diff --git a/src/containers/settings/SettingsWindow.js b/src/containers/settings/SettingsWindow.js
index 663b9e2e4..440d32a46 100644
--- a/src/containers/settings/SettingsWindow.js
+++ b/src/containers/settings/SettingsWindow.js
@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import { observer, inject } from 'mobx-react';
 
@@ -10,10 +11,23 @@ import ErrorBoundary from '../../components/util/ErrorBoundary';
 import { workspaceStore } from '../../features/workspaces';
 
 export default @inject('stores', 'actions') @observer class SettingsContainer extends Component {
+  portalRoot = document.querySelector('#portalContainer');
+
+  el = document.createElement('div');
+
+  componentDidMount() {
+    this.portalRoot.appendChild(this.el);
+  }
+
+  componentWillUnmount() {
+    this.portalRoot.removeChild(this.el);
+  }
+
   render() {
     const { children, stores } = this.props;
     const { closeSettings } = this.props.actions.ui;
 
+
     const navigation = (
       <Navigation
         serviceCount={stores.services.all.length}
@@ -21,15 +35,18 @@ export default @inject('stores', 'actions') @observer class SettingsContainer ex
       />
     );
 
-    return (
-      <ErrorBoundary>
-        <Layout
-          navigation={navigation}
-          closeSettings={closeSettings}
-        >
-          {children}
-        </Layout>
-      </ErrorBoundary>
+    return ReactDOM.createPortal(
+      (
+        <ErrorBoundary>
+          <Layout
+            navigation={navigation}
+            closeSettings={closeSettings}
+          >
+            {children}
+          </Layout>
+        </ErrorBoundary>
+      ),
+      this.el,
     );
   }
 }
diff --git a/src/containers/settings/TeamScreen.js b/src/containers/settings/TeamScreen.js
index c69d5ad08..b7b1b78cb 100644
--- a/src/containers/settings/TeamScreen.js
+++ b/src/containers/settings/TeamScreen.js
@@ -14,7 +14,6 @@ export default @inject('stores', 'actions') @observer class TeamScreen extends C
     const { actions, stores } = this.props;
 
     const url = `${WEBSITE}${route}?authToken=${stores.user.authToken}&utm_source=app&utm_medium=account_dashboard`;
-    console.log(url);
 
     actions.app.openExternalUrl({ url });
   }
diff --git a/src/containers/subscription/SubscriptionFormScreen.js b/src/containers/subscription/SubscriptionFormScreen.js
index aa1166f5e..e9e457084 100644
--- a/src/containers/subscription/SubscriptionFormScreen.js
+++ b/src/containers/subscription/SubscriptionFormScreen.js
@@ -1,4 +1,3 @@
-import { remote } from 'electron';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
@@ -6,96 +5,50 @@ import { inject, observer } from 'mobx-react';
 import PaymentStore from '../../stores/PaymentStore';
 
 import SubscriptionForm from '../../components/subscription/SubscriptionForm';
-
-const { BrowserWindow } = remote;
+import TrialForm from '../../components/subscription/TrialForm';
 
 export default @inject('stores', 'actions') @observer class SubscriptionFormScreen extends Component {
-  static propTypes = {
-    onCloseWindow: PropTypes.func,
-    content: PropTypes.node,
-    showSkipOption: PropTypes.bool,
-    skipAction: PropTypes.func,
-    skipButtonLabel: PropTypes.string,
-    hideInfo: PropTypes.bool,
-  }
-
-  static defaultProps = {
-    onCloseWindow: () => null,
-    content: '',
-    showSkipOption: false,
-    skipAction: () => null,
-    skipButtonLabel: '',
-    hideInfo: false,
-  }
-
-  async handlePayment(plan) {
+  async openBrowser() {
     const {
       actions,
       stores,
-      onCloseWindow,
     } = this.props;
 
-    const interval = plan;
-
-    const { id } = stores.payment.plan[interval];
-    actions.payment.createHostedPage({
-      planId: id,
-    });
-
-    const hostedPage = await stores.payment.createHostedPageRequest;
+    const {
+      user,
+      features,
+    } = stores;
 
-    if (hostedPage.url) {
-      if (hostedPage.legacyCheckoutFlow) {
-        const paymentWindow = new BrowserWindow({
-          parent: remote.getCurrentWindow(),
-          modal: true,
-          title: '🔒 Franz Supporter License',
-          width: 600,
-          height: window.innerHeight - 100,
-          maxWidth: 600,
-          minWidth: 600,
-          webPreferences: {
-            nodeIntegration: true,
-            webviewTag: true,
-          },
-        });
-        paymentWindow.loadURL(`file://${__dirname}/../../index.html#/payment/${encodeURIComponent(hostedPage.url)}`);
+    let hostedPageURL = !user.data.hadSubscription ? features.features.planSelectionURL : features.features.subscribeURL;
+    hostedPageURL = user.getAuthURL(hostedPageURL);
 
-        paymentWindow.on('closed', () => {
-          onCloseWindow();
-        });
-      } else {
-        actions.app.openExternalUrl({
-          url: hostedPage.url,
-        });
-      }
-    }
+    actions.app.openExternalUrl({ url: hostedPageURL });
   }
 
   render() {
     const {
-      content,
       actions,
       stores,
-      showSkipOption,
-      skipAction,
-      skipButtonLabel,
-      hideInfo,
     } = this.props;
+
+    const { data: user } = stores.user;
+
+    if (user.hadSubscription) {
+      return (
+        <SubscriptionForm
+          plan={stores.payment.plan}
+          selectPlan={() => this.openBrowser()}
+          isActivatingTrial={stores.user.activateTrialRequest.isExecuting || stores.user.getUserInfoRequest.isExecuting}
+        />
+      );
+    }
+
     return (
-      <SubscriptionForm
+      <TrialForm
         plan={stores.payment.plan}
-        isLoading={stores.payment.plansRequest.isExecuting}
-        retryPlanRequest={() => stores.payment.plansRequest.reload()}
-        isCreatingHostedPage={stores.payment.createHostedPageRequest.isExecuting}
-        handlePayment={price => this.handlePayment(price)}
-        content={content}
-        error={stores.payment.plansRequest.isError}
-        showSkipOption={showSkipOption}
-        skipAction={skipAction}
-        skipButtonLabel={skipButtonLabel}
-        hideInfo={hideInfo}
-        openExternalUrl={actions.app.openExternalUrl}
+        activateTrial={() => actions.user.activateTrial({ planId: stores.features.features.defaultTrialPlan })}
+        showAllOptions={() => this.openBrowser()}
+        isActivatingTrial={stores.user.activateTrialRequest.isExecuting || stores.user.getUserInfoRequest.isExecuting}
       />
     );
   }
diff --git a/src/containers/subscription/SubscriptionPopupScreen.js b/src/containers/subscription/SubscriptionPopupScreen.js
index f76d6c5a6..0de5a87c4 100644
--- a/src/containers/subscription/SubscriptionPopupScreen.js
+++ b/src/containers/subscription/SubscriptionPopupScreen.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 
 import SubscriptionPopup from '../../components/subscription/SubscriptionPopup';
+import { isDevMode } from '../../environment';
 
 
 export default @inject('stores', 'actions') @observer class SubscriptionPopupScreen extends Component {
@@ -13,7 +14,7 @@ export default @inject('stores', 'actions') @observer class SubscriptionPopupScr
   completeCheck(event) {
     const { url } = event;
 
-    if ((url.includes('recurly') && url.includes('confirmation')) || (url.includes('meetfranz') && url.includes('success'))) {
+    if ((url.includes('recurly') && url.includes('confirmation')) || ((url.includes('meetfranz') || isDevMode) && url.includes('success'))) {
       this.setState({
         complete: true,
       });
diff --git a/src/environment.js b/src/environment.js
index ae7a67e4d..707449e09 100644
--- a/src/environment.js
+++ b/src/environment.js
@@ -10,6 +10,9 @@ import {
   LIVE_WS_API,
   LOCAL_WS_API,
   DEV_WS_API,
+  LOCAL_TODOS_FRONTEND_URL,
+  PRODUCTION_TODOS_FRONTEND_URL,
+  DEVELOPMENT_TODOS_FRONTEND_URL,
 } from './config';
 
 export const isDevMode = isDev;
@@ -31,21 +34,26 @@ export const cmdKey = isMac ? 'Cmd' : 'Ctrl';
 let api;
 let wsApi;
 let web;
+let todos;
 if (!isDevMode || (isDevMode && useLiveAPI)) {
   api = LIVE_API;
   wsApi = LIVE_WS_API;
   web = LIVE_API_WEBSITE;
+  todos = PRODUCTION_TODOS_FRONTEND_URL;
 } else if (isDevMode && useLocalAPI) {
   api = LOCAL_API;
   wsApi = LOCAL_WS_API;
   web = LOCAL_API_WEBSITE;
+  todos = LOCAL_TODOS_FRONTEND_URL;
 } else {
   api = DEV_API;
   wsApi = DEV_WS_API;
   web = DEV_API_WEBSITE;
+  todos = DEVELOPMENT_TODOS_FRONTEND_URL;
 }
 
 export const API = api;
 export const API_VERSION = 'v1';
 export const WS_API = wsApi;
 export const WEBSITE = web;
+export const TODOS_FRONTEND = todos;
diff --git a/src/features/announcements/components/AnnouncementScreen.js b/src/features/announcements/components/AnnouncementScreen.js
index e7c5fe395..03bd5ba41 100644
--- a/src/features/announcements/components/AnnouncementScreen.js
+++ b/src/features/announcements/components/AnnouncementScreen.js
@@ -28,7 +28,7 @@ const smallScreen = '1000px';
 const styles = theme => ({
   container: {
     background: theme.colorBackground,
-    position: 'absolute',
+    position: 'relative',
     top: 0,
     zIndex: 140,
     width: '100%',
diff --git a/src/features/basicAuth/Component.js b/src/features/basicAuth/Component.js
index a8252acb7..ba9ae2273 100644
--- a/src/features/basicAuth/Component.js
+++ b/src/features/basicAuth/Component.js
@@ -27,7 +27,6 @@ export default @injectSheet(styles) @observer class BasicAuthModal extends Compo
     e.preventDefault();
 
     const values = Form.values();
-    console.log('form submit', values);
 
     sendCredentials(values.user, values.password);
     resetState();
diff --git a/src/features/communityRecipes/index.js b/src/features/communityRecipes/index.js
new file mode 100644
index 000000000..4d050f90e
--- /dev/null
+++ b/src/features/communityRecipes/index.js
@@ -0,0 +1,28 @@
+import { reaction } from 'mobx';
+import { CommunityRecipesStore } from './store';
+
+const debug = require('debug')('Franz:feature:communityRecipes');
+
+export const DEFAULT_SERVICE_LIMIT = 3;
+
+export const communityRecipesStore = new CommunityRecipesStore();
+
+export default function initCommunityRecipes(stores, actions) {
+  const { features } = stores;
+
+  communityRecipesStore.start(stores, actions);
+
+  // Toggle communityRecipe premium status
+  reaction(
+    () => (
+      features.features.isCommunityRecipesIncludedInCurrentPlan
+    ),
+    (isPremiumFeature) => {
+      debug('Community recipes is premium feature: ', isPremiumFeature);
+      communityRecipesStore.isCommunityRecipesIncludedInCurrentPlan = isPremiumFeature;
+    },
+    {
+      fireImmediately: true,
+    },
+  );
+}
diff --git a/src/features/communityRecipes/store.js b/src/features/communityRecipes/store.js
new file mode 100644
index 000000000..4d45c3b33
--- /dev/null
+++ b/src/features/communityRecipes/store.js
@@ -0,0 +1,31 @@
+import { computed, observable } from 'mobx';
+import { FeatureStore } from '../utils/FeatureStore';
+
+const debug = require('debug')('Franz:feature:communityRecipes:store');
+
+export class CommunityRecipesStore extends FeatureStore {
+  @observable isCommunityRecipesIncludedInCurrentPlan = false;
+
+  start(stores, actions) {
+    debug('start');
+    this.stores = stores;
+    this.actions = actions;
+  }
+
+  stop() {
+    debug('stop');
+    super.stop();
+  }
+
+  @computed get communityRecipes() {
+    if (!this.stores) return [];
+
+    return this.stores.recipePreviews.dev.map((r) => {
+      r.isDevRecipe = !!r.author.find(a => a.email === this.stores.user.data.email);
+
+      return r;
+    });
+  }
+}
+
+export default CommunityRecipesStore;
diff --git a/src/features/delayApp/Component.js b/src/features/delayApp/Component.js
index ff0f1f2f8..de5653f04 100644
--- a/src/features/delayApp/Component.js
+++ b/src/features/delayApp/Component.js
@@ -4,29 +4,39 @@ import { inject, observer } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
 import injectSheet from 'react-jss';
 
+import { Button } from '@meetfranz/forms';
 import { gaEvent } from '../../lib/analytics';
 
-import Button from '../../components/ui/Button';
+// import Button from '../../components/ui/Button';
 
 import { config } from '.';
 import styles from './styles';
+import UserStore from '../../stores/UserStore';
 
 const messages = defineMessages({
   headline: {
     id: 'feature.delayApp.headline',
     defaultMessage: '!!!Please purchase license to skip waiting',
   },
+  headlineTrial: {
+    id: 'feature.delayApp.trial.headline',
+    defaultMessage: '!!!Get the free Franz Professional 14 day trial and skip the line',
+  },
   action: {
-    id: 'feature.delayApp.action',
+    id: 'feature.delayApp.upgrade.action',
     defaultMessage: '!!!Get a Franz Supporter License',
   },
+  actionTrial: {
+    id: 'feature.delayApp.trial.action',
+    defaultMessage: '!!!Yes, I want the free 14 day trial of Franz Professional',
+  },
   text: {
     id: 'feature.delayApp.text',
     defaultMessage: '!!!Franz will continue in {seconds} seconds.',
   },
 });
 
-export default @inject('actions') @injectSheet(styles) @observer class DelayApp extends Component {
+export default @inject('stores', 'actions') @injectSheet(styles) @observer class DelayApp extends Component {
   static propTypes = {
     // eslint-disable-next-line
     classes: PropTypes.object.isRequired,
@@ -62,25 +72,37 @@ export default @inject('actions') @injectSheet(styles) @observer class DelayApp
   }
 
   handleCTAClick() {
-    const { actions } = this.props;
+    const { actions, stores } = this.props;
+    const { hadSubscription } = stores.user.data;
+    const { defaultTrialPlan } = stores.features.features;
+
+    if (!hadSubscription) {
+      console.log('directly activate trial');
+      actions.user.activateTrial({ planId: defaultTrialPlan });
 
-    actions.ui.openSettings({ path: 'user' });
+      gaEvent('DelayApp', 'subscribe_click', 'Delay App Feature');
+    } else {
+      actions.ui.openSettings({ path: 'user' });
 
-    gaEvent('DelayApp', 'subscribe_click', 'Delay App Feature');
+      gaEvent('DelayApp', 'subscribe_click', 'Delay App Feature');
+    }
   }
 
   render() {
-    const { classes } = this.props;
+    const { classes, stores } = this.props;
     const { intl } = this.context;
 
+    const { hadSubscription } = stores.user.data;
+
     return (
       <div className={`${classes.container}`}>
-        <h1 className={classes.headline}>{intl.formatMessage(messages.headline)}</h1>
+        <h1 className={classes.headline}>{intl.formatMessage(hadSubscription ? messages.headline : messages.headlineTrial)}</h1>
         <Button
-          label={intl.formatMessage(messages.action)}
+          label={intl.formatMessage(hadSubscription ? messages.action : messages.actionTrial)}
           className={classes.button}
           buttonType="inverted"
           onClick={this.handleCTAClick.bind(this)}
+          busy={stores.user.activateTrialRequest.isExecuting}
         />
         <p className="footnote">
           {intl.formatMessage(messages.text, {
@@ -93,6 +115,9 @@ export default @inject('actions') @injectSheet(styles) @observer class DelayApp
 }
 
 DelayApp.wrappedComponent.propTypes = {
+  stores: PropTypes.shape({
+    user: PropTypes.instanceOf(UserStore).isRequired,
+  }).isRequired,
   actions: PropTypes.shape({
     ui: PropTypes.shape({
       openSettings: PropTypes.func.isRequired,
diff --git a/src/features/delayApp/index.js b/src/features/delayApp/index.js
index 67f0fc5e6..627537de7 100644
--- a/src/features/delayApp/index.js
+++ b/src/features/delayApp/index.js
@@ -33,7 +33,7 @@ export default function init(stores) {
   };
 
   reaction(
-    () => stores.user.isLoggedIn && stores.features.features.needToWaitToProceed && !stores.user.data.isPremium,
+    () => stores.user.isLoggedIn && stores.services.allServicesRequest.wasExecuted && stores.features.features.needToWaitToProceed && !stores.user.data.isPremium,
     (isEnabled) => {
       if (isEnabled) {
         debug('Enabling `delayApp` feature');
@@ -44,7 +44,8 @@ export default function init(stores) {
         config.delayDuration = globalConfig.wait !== undefined ? globalConfig.wait : DEFAULT_FEATURES_CONFIG.needToWaitToProceedConfig.wait;
 
         autorun(() => {
-          if (stores.services.all.length === 0) {
+          if (stores.services.allDisplayed.length === 0) {
+            debug('seas', stores.services.all.length);
             shownAfterLaunch = true;
             return;
           }
@@ -64,7 +65,7 @@ export default function init(stores) {
               debug('Resetting app delay');
 
               setVisibility(false);
-            }, DEFAULT_FEATURES_CONFIG.needToWaitToProceedConfig.wait + 1000); // timer needs to be able to hit 0
+            }, config.delayDuration + 1000); // timer needs to be able to hit 0
           }
         });
       } else {
diff --git a/src/features/delayApp/styles.js b/src/features/delayApp/styles.js
index 5c214cfdf..69c3c7a27 100644
--- a/src/features/delayApp/styles.js
+++ b/src/features/delayApp/styles.js
@@ -1,7 +1,6 @@
 export default theme => ({
   container: {
     background: theme.colorBackground,
-    position: 'absolute',
     top: 0,
     width: '100%',
     display: 'flex',
diff --git a/src/features/serviceLimit/components/LimitReachedInfobox.js b/src/features/serviceLimit/components/LimitReachedInfobox.js
new file mode 100644
index 000000000..fc54dcf85
--- /dev/null
+++ b/src/features/serviceLimit/components/LimitReachedInfobox.js
@@ -0,0 +1,78 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { inject, observer } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+import injectSheet from 'react-jss';
+import { Infobox } from '@meetfranz/ui';
+
+import { gaEvent } from '../../../lib/analytics';
+
+const messages = defineMessages({
+  limitReached: {
+    id: 'feature.serviceLimit.limitReached',
+    defaultMessage: '!!!You have added {amount} of {limit} services. Please upgrade your account to add more services.',
+  },
+  action: {
+    id: 'premiumFeature.button.upgradeAccount',
+    defaultMessage: '!!!Upgrade account',
+  },
+});
+
+const styles = theme => ({
+  container: {
+    height: 'auto',
+    background: theme.styleTypes.primary.accent,
+    color: theme.styleTypes.primary.contrast,
+    borderRadius: 0,
+    marginBottom: 0,
+
+    '& > div': {
+      marginBottom: 0,
+    },
+
+    '& button': {
+      color: theme.styleTypes.primary.contrast,
+    },
+  },
+});
+
+
+@inject('stores', 'actions') @injectSheet(styles) @observer
+class LimitReachedInfobox extends Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    stores: PropTypes.object.isRequired,
+    actions: PropTypes.object.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  render() {
+    const { classes, stores, actions } = this.props;
+    const { intl } = this.context;
+
+    const {
+      serviceLimit,
+    } = stores;
+
+    if (!serviceLimit.userHasReachedServiceLimit) return null;
+
+    return (
+      <Infobox
+        icon="mdiInformation"
+        className={classes.container}
+        ctaLabel={intl.formatMessage(messages.action)}
+        ctaOnClick={() => {
+          actions.ui.openSettings({ path: 'user' });
+          gaEvent('Service Limit', 'upgrade', 'Upgrade account');
+        }}
+      >
+        {intl.formatMessage(messages.limitReached, { amount: serviceLimit.serviceCount, limit: serviceLimit.serviceLimit })}
+      </Infobox>
+    );
+  }
+}
+
+export default LimitReachedInfobox;
diff --git a/src/features/serviceLimit/index.js b/src/features/serviceLimit/index.js
new file mode 100644
index 000000000..92ad8bb98
--- /dev/null
+++ b/src/features/serviceLimit/index.js
@@ -0,0 +1,33 @@
+import { reaction } from 'mobx';
+import { ServiceLimitStore } from './store';
+
+const debug = require('debug')('Franz:feature:serviceLimit');
+
+export const DEFAULT_SERVICE_LIMIT = 3;
+
+let store = null;
+
+export const serviceLimitStore = new ServiceLimitStore();
+
+export default function initServiceLimit(stores, actions) {
+  const { features } = stores;
+
+  // Toggle serviceLimit feature
+  reaction(
+    () => (
+      features.features.isServiceLimitEnabled
+    ),
+    (isEnabled) => {
+      if (isEnabled) {
+        debug('Initializing `serviceLimit` feature');
+        store = serviceLimitStore.start(stores, actions);
+      } else if (store) {
+        debug('Disabling `serviceLimit` feature');
+        serviceLimitStore.stop();
+      }
+    },
+    {
+      fireImmediately: true,
+    },
+  );
+}
diff --git a/src/features/serviceLimit/store.js b/src/features/serviceLimit/store.js
new file mode 100644
index 000000000..9836c5f51
--- /dev/null
+++ b/src/features/serviceLimit/store.js
@@ -0,0 +1,41 @@
+import { computed, observable } from 'mobx';
+import { FeatureStore } from '../utils/FeatureStore';
+import { DEFAULT_SERVICE_LIMIT } from '.';
+
+const debug = require('debug')('Franz:feature:serviceLimit:store');
+
+export class ServiceLimitStore extends FeatureStore {
+  @observable isServiceLimitEnabled = false;
+
+  start(stores, actions) {
+    debug('start');
+    this.stores = stores;
+    this.actions = actions;
+
+    this.isServiceLimitEnabled = true;
+  }
+
+  stop() {
+    super.stop();
+
+    this.isServiceLimitEnabled = false;
+  }
+
+  @computed get userHasReachedServiceLimit() {
+    if (!this.isServiceLimitEnabled) return false;
+
+    return this.serviceLimit !== 0 && this.serviceCount >= this.serviceLimit;
+  }
+
+  @computed get serviceLimit() {
+    if (!this.isServiceLimitEnabled || this.stores.features.features.serviceLimitCount === 0) return 0;
+
+    return this.stores.features.features.serviceLimitCount || DEFAULT_SERVICE_LIMIT;
+  }
+
+  @computed get serviceCount() {
+    return this.stores.services.all.length;
+  }
+}
+
+export default ServiceLimitStore;
diff --git a/src/features/serviceProxy/index.js b/src/features/serviceProxy/index.js
index 4bea327ad..55c600de4 100644
--- a/src/features/serviceProxy/index.js
+++ b/src/features/serviceProxy/index.js
@@ -9,17 +9,17 @@ const debug = require('debug')('Franz:feature:serviceProxy');
 
 export const config = observable({
   isEnabled: DEFAULT_FEATURES_CONFIG.isServiceProxyEnabled,
-  isPremium: DEFAULT_FEATURES_CONFIG.isServiceProxyPremiumFeature,
+  isPremium: DEFAULT_FEATURES_CONFIG.isServiceProxyIncludedInCurrentPlan,
 });
 
 export default function init(stores) {
   debug('Initializing `serviceProxy` feature');
 
   autorun(() => {
-    const { isServiceProxyEnabled, isServiceProxyPremiumFeature } = stores.features.features;
+    const { isServiceProxyEnabled, isServiceProxyIncludedInCurrentPlan } = stores.features.features;
 
     config.isEnabled = isServiceProxyEnabled !== undefined ? isServiceProxyEnabled : DEFAULT_FEATURES_CONFIG.isServiceProxyEnabled;
-    config.isPremium = isServiceProxyPremiumFeature !== undefined ? isServiceProxyPremiumFeature : DEFAULT_FEATURES_CONFIG.isServiceProxyPremiumFeature;
+    config.isIncludedInCurrentPlan = isServiceProxyIncludedInCurrentPlan !== undefined ? isServiceProxyIncludedInCurrentPlan : DEFAULT_FEATURES_CONFIG.isServiceProxyIncludedInCurrentPlan;
 
     const services = stores.services.enabled;
     const isPremiumUser = stores.user.data.isPremium;
@@ -30,7 +30,7 @@ export default function init(stores) {
     services.forEach((service) => {
       const s = session.fromPartition(`persist:service-${service.id}`);
 
-      if (config.isEnabled && (isPremiumUser || !config.isPremium)) {
+      if (config.isEnabled && (isPremiumUser || !config.isIncludedInCurrentPlan)) {
         const serviceProxyConfig = proxySettings[service.id];
 
         if (serviceProxyConfig && serviceProxyConfig.isEnabled && serviceProxyConfig.host) {
diff --git a/src/features/shareFranz/Component.js b/src/features/shareFranz/Component.js
index 8d1d595c5..859c0ebe9 100644
--- a/src/features/shareFranz/Component.js
+++ b/src/features/shareFranz/Component.js
@@ -6,6 +6,7 @@ import { defineMessages, intlShape } from 'react-intl';
 import { Button } from '@meetfranz/forms';
 import { H1, Icon } from '@meetfranz/ui';
 
+import { mdiHeart } from '@mdi/js';
 import Modal from '../../components/ui/Modal';
 import { state } from '.';
 import { gaEvent } from '../../lib/analytics';
@@ -116,7 +117,7 @@ export default @injectSheet(styles) @inject('stores') @observer class ShareFranz
         close={this.close.bind(this)}
       >
         <div className={classes.heartContainer}>
-          <Icon icon="mdiHeart" className={classes.heart} size={4} />
+          <Icon icon={mdiHeart} className={classes.heart} size={4} />
         </div>
         <H1 className={classes.headline}>
           {intl.formatMessage(messages.headline)}
diff --git a/src/features/spellchecker/index.js b/src/features/spellchecker/index.js
index 79a2172b4..a07f9f63a 100644
--- a/src/features/spellchecker/index.js
+++ b/src/features/spellchecker/index.js
@@ -5,18 +5,18 @@ import { DEFAULT_FEATURES_CONFIG } from '../../config';
 const debug = require('debug')('Franz:feature:spellchecker');
 
 export const config = observable({
-  isPremium: DEFAULT_FEATURES_CONFIG.isSpellcheckerPremiumFeature,
+  isIncludedInCurrentPlan: DEFAULT_FEATURES_CONFIG.isSpellcheckerIncludedInCurrentPlan,
 });
 
 export default function init(stores) {
   debug('Initializing `spellchecker` feature');
 
   autorun(() => {
-    const { isSpellcheckerPremiumFeature } = stores.features.features;
+    const { isSpellcheckerIncludedInCurrentPlan } = stores.features.features;
 
-    config.isPremium = isSpellcheckerPremiumFeature !== undefined ? isSpellcheckerPremiumFeature : DEFAULT_FEATURES_CONFIG.isSpellcheckerPremiumFeature;
+    config.isIncludedInCurrentPlan = isSpellcheckerIncludedInCurrentPlan !== undefined ? isSpellcheckerIncludedInCurrentPlan : DEFAULT_FEATURES_CONFIG.isSpellcheckerIncludedInCurrentPlan;
 
-    if (!stores.user.data.isPremium && config.isPremium && stores.settings.app.enableSpellchecking) {
+    if (!stores.user.data.isPremium && config.isIncludedInCurrentPlan && stores.settings.app.enableSpellchecking) {
       debug('Override settings.spellcheckerEnabled flag to false');
 
       Object.assign(stores.settings.app, {
diff --git a/src/features/todos/actions.js b/src/features/todos/actions.js
new file mode 100644
index 000000000..dc63d5fcd
--- /dev/null
+++ b/src/features/todos/actions.js
@@ -0,0 +1,22 @@
+import PropTypes from 'prop-types';
+import { createActionsFromDefinitions } from '../../actions/lib/actions';
+
+export const todoActions = createActionsFromDefinitions({
+  resize: {
+    width: PropTypes.number.isRequired,
+  },
+  toggleTodosPanel: {},
+  setTodosWebview: {
+    webview: PropTypes.instanceOf(Element).isRequired,
+  },
+  handleHostMessage: {
+    action: PropTypes.string.isRequired,
+    data: PropTypes.object,
+  },
+  handleClientMessage: {
+    action: PropTypes.string.isRequired,
+    data: PropTypes.object,
+  },
+}, PropTypes.checkPropTypes);
+
+export default todoActions;
diff --git a/src/features/todos/components/TodosWebview.js b/src/features/todos/components/TodosWebview.js
new file mode 100644
index 000000000..288c1906f
--- /dev/null
+++ b/src/features/todos/components/TodosWebview.js
@@ -0,0 +1,237 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import injectSheet from 'react-jss';
+import Webview from 'react-electron-web-view';
+import { Icon } from '@meetfranz/ui';
+
+import * as environment from '../../../environment';
+
+const OPEN_TODOS_BUTTON_SIZE = 45;
+const CLOSE_TODOS_BUTTON_SIZE = 35;
+
+const styles = theme => ({
+  root: {
+    background: theme.colorBackground,
+    position: 'relative',
+    borderLeft: [1, 'solid', theme.todos.todosLayer.borderLeftColor],
+    zIndex: 300,
+
+    transform: ({ isVisible, width }) => `translateX(${isVisible ? 0 : width}px)`,
+
+    '&:hover $closeTodosButton': {
+      opacity: 1,
+    },
+  },
+  webview: {
+    height: '100%',
+
+    '& webview': {
+      height: '100%',
+    },
+  },
+  resizeHandler: {
+    position: 'absolute',
+    left: 0,
+    marginLeft: -5,
+    width: 10,
+    zIndex: 400,
+    cursor: 'col-resize',
+  },
+  dragIndicator: {
+    position: 'absolute',
+    left: 0,
+    width: 5,
+    zIndex: 400,
+    background: theme.todos.dragIndicator.background,
+
+  },
+  openTodosButton: {
+    width: OPEN_TODOS_BUTTON_SIZE,
+    height: OPEN_TODOS_BUTTON_SIZE,
+    background: theme.todos.toggleButton.background,
+    position: 'absolute',
+    bottom: 80,
+    right: props => (props.width + (props.isVisible ? -OPEN_TODOS_BUTTON_SIZE / 2 : 0)),
+    borderRadius: OPEN_TODOS_BUTTON_SIZE / 2,
+    opacity: props => (props.isVisible ? 0 : 1),
+    transition: 'right 0.5s',
+    zIndex: 600,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    boxShadow: [0, 0, 10, theme.todos.toggleButton.shadowColor],
+
+    borderTopRightRadius: props => (props.isVisible ? null : 0),
+    borderBottomRightRadius: props => (props.isVisible ? null : 0),
+
+    '& svg': {
+      fill: theme.todos.toggleButton.textColor,
+      transition: 'all 0.5s',
+    },
+  },
+  closeTodosButton: {
+    width: CLOSE_TODOS_BUTTON_SIZE,
+    height: CLOSE_TODOS_BUTTON_SIZE,
+    background: theme.todos.toggleButton.background,
+    position: 'absolute',
+    bottom: 80,
+    right: ({ width }) => (width + -CLOSE_TODOS_BUTTON_SIZE / 2),
+    borderRadius: CLOSE_TODOS_BUTTON_SIZE / 2,
+    opacity: 0,
+    transition: 'opacity 0.5s',
+    zIndex: 600,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    boxShadow: [0, 0, 10, theme.todos.toggleButton.shadowColor],
+
+    '& svg': {
+      fill: theme.todos.toggleButton.textColor,
+    },
+  },
+});
+
+@injectSheet(styles) @observer
+class TodosWebview extends Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    isVisible: PropTypes.bool.isRequired,
+    togglePanel: PropTypes.func.isRequired,
+    handleClientMessage: PropTypes.func.isRequired,
+    setTodosWebview: PropTypes.func.isRequired,
+    resize: PropTypes.func.isRequired,
+    width: PropTypes.number.isRequired,
+    minWidth: PropTypes.number.isRequired,
+  };
+
+  state = {
+    isDragging: false,
+    width: 300,
+  };
+
+  componentWillMount() {
+    const { width } = this.props;
+
+    this.setState({
+      width,
+    });
+  }
+
+  componentDidMount() {
+    this.node.addEventListener('mousemove', this.resizePanel.bind(this));
+    this.node.addEventListener('mouseup', this.stopResize.bind(this));
+    this.node.addEventListener('mouseleave', this.stopResize.bind(this));
+  }
+
+  startResize = (event) => {
+    this.setState({
+      isDragging: true,
+      initialPos: event.clientX,
+      delta: 0,
+    });
+  };
+
+  resizePanel(e) {
+    const { minWidth } = this.props;
+
+    const {
+      isDragging,
+      initialPos,
+    } = this.state;
+
+    if (isDragging && Math.abs(e.clientX - window.innerWidth) > minWidth) {
+      const delta = e.clientX - initialPos;
+
+      this.setState({
+        delta,
+      });
+    }
+  }
+
+  stopResize() {
+    const {
+      resize,
+      minWidth,
+    } = this.props;
+
+    const {
+      isDragging,
+      delta,
+      width,
+    } = this.state;
+
+    if (isDragging) {
+      let newWidth = width + (delta < 0 ? Math.abs(delta) : -Math.abs(delta));
+
+      if (newWidth < minWidth) {
+        newWidth = minWidth;
+      }
+
+      this.setState({
+        isDragging: false,
+        delta: 0,
+        width: newWidth,
+      });
+
+      resize(newWidth);
+    }
+  }
+
+  startListeningToIpcMessages() {
+    const { handleClientMessage } = this.props;
+    if (!this.webview) return;
+    this.webview.addEventListener('ipc-message', e => handleClientMessage(e.args[0]));
+  }
+
+  render() {
+    const {
+      classes, isVisible, togglePanel,
+    } = this.props;
+    const { width, delta, isDragging } = this.state;
+
+    return (
+      <>
+        <div
+          className={classes.root}
+          style={{ width: isVisible ? width : 0 }}
+          onMouseUp={() => this.stopResize()}
+          ref={(node) => { this.node = node; }}
+        >
+          <button
+            onClick={() => togglePanel()}
+            className={isVisible ? classes.closeTodosButton : classes.openTodosButton}
+            type="button"
+          >
+            <Icon icon={isVisible ? 'mdiChevronRight' : 'mdiCheckAll'} size={2} />
+          </button>
+          <div
+            className={classes.resizeHandler}
+            style={Object.assign({ left: delta }, isDragging ? { width: 600, marginLeft: -200 } : {})} // This hack is required as resizing with webviews beneath behaves quite bad
+            onMouseDown={e => this.startResize(e)}
+          />
+          {isDragging && (
+            <div
+              className={classes.dragIndicator}
+              style={{ left: delta }} // This hack is required as resizing with webviews beneath behaves quite bad
+            />
+          )}
+          <Webview
+            className={classes.webview}
+            onDidAttach={() => {
+              const { setTodosWebview } = this.props;
+              setTodosWebview(this.webview);
+              this.startListeningToIpcMessages();
+            }}
+            partition="persist:todos"
+            preload="./features/todos/preload.js"
+            ref={(webview) => { this.webview = webview ? webview.view : null; }}
+            src={environment.TODOS_FRONTEND}
+          />
+        </div>
+      </>
+    );
+  }
+}
+
+export default TodosWebview;
diff --git a/src/features/todos/constants.js b/src/features/todos/constants.js
new file mode 100644
index 000000000..2e8a431cc
--- /dev/null
+++ b/src/features/todos/constants.js
@@ -0,0 +1,4 @@
+export const IPC = {
+  TODOS_HOST_CHANNEL: 'TODOS_HOST_CHANNEL',
+  TODOS_CLIENT_CHANNEL: 'TODOS_CLIENT_CHANNEL',
+};
diff --git a/src/features/todos/containers/TodosScreen.js b/src/features/todos/containers/TodosScreen.js
new file mode 100644
index 000000000..d071d0677
--- /dev/null
+++ b/src/features/todos/containers/TodosScreen.js
@@ -0,0 +1,32 @@
+import React, { Component } from 'react';
+import { observer } from 'mobx-react';
+
+import TodosWebview from '../components/TodosWebview';
+import ErrorBoundary from '../../../components/util/ErrorBoundary';
+import { TODOS_MIN_WIDTH, todosStore } from '..';
+import { todoActions } from '../actions';
+
+@observer
+class TodosScreen extends Component {
+  render() {
+    if (!todosStore || !todosStore.isFeatureActive) {
+      return null;
+    }
+
+    return (
+      <ErrorBoundary>
+        <TodosWebview
+          isVisible={todosStore.isTodosPanelVisible}
+          togglePanel={todoActions.toggleTodosPanel}
+          handleClientMessage={todoActions.handleClientMessage}
+          setTodosWebview={webview => todoActions.setTodosWebview({ webview })}
+          width={todosStore.width}
+          minWidth={TODOS_MIN_WIDTH}
+          resize={width => todoActions.resize({ width })}
+        />
+      </ErrorBoundary>
+    );
+  }
+}
+
+export default TodosScreen;
diff --git a/src/features/todos/index.js b/src/features/todos/index.js
new file mode 100644
index 000000000..00b165cc5
--- /dev/null
+++ b/src/features/todos/index.js
@@ -0,0 +1,34 @@
+import { reaction } from 'mobx';
+import TodoStore from './store';
+
+const debug = require('debug')('Franz:feature:todos');
+
+export const GA_CATEGORY_TODOS = 'Todos';
+
+export const DEFAULT_TODOS_WIDTH = 300;
+export const TODOS_MIN_WIDTH = 200;
+export const DEFAULT_TODOS_VISIBLE = true;
+
+export const todosStore = new TodoStore();
+
+export default function initTodos(stores, actions) {
+  stores.todos = todosStore;
+  const { features } = stores;
+
+  // Toggle todos feature
+  reaction(
+    () => features.features.isTodosEnabled,
+    (isEnabled) => {
+      if (isEnabled) {
+        debug('Initializing `todos` feature');
+        todosStore.start(stores, actions);
+      } else if (todosStore.isFeatureActive) {
+        debug('Disabling `todos` feature');
+        todosStore.stop();
+      }
+    },
+    {
+      fireImmediately: true,
+    },
+  );
+}
diff --git a/src/features/todos/preload.js b/src/features/todos/preload.js
new file mode 100644
index 000000000..6e38a2ef3
--- /dev/null
+++ b/src/features/todos/preload.js
@@ -0,0 +1,23 @@
+import { ipcRenderer } from 'electron';
+import { IPC } from './constants';
+
+const debug = require('debug')('Franz:feature:todos:preload');
+
+debug('Preloading Todos Webview');
+
+let hostMessageListener = () => {};
+
+window.franz = {
+  onInitialize(ipcHostMessageListener) {
+    hostMessageListener = ipcHostMessageListener;
+    ipcRenderer.sendToHost(IPC.TODOS_CLIENT_CHANNEL, { action: 'todos:initialized' });
+  },
+  sendToHost(message) {
+    ipcRenderer.sendToHost(IPC.TODOS_CLIENT_CHANNEL, message);
+  },
+};
+
+ipcRenderer.on(IPC.TODOS_HOST_CHANNEL, (event, message) => {
+  debug('Received host message', event, message);
+  hostMessageListener(message);
+});
diff --git a/src/features/todos/store.js b/src/features/todos/store.js
new file mode 100644
index 000000000..acf95df0d
--- /dev/null
+++ b/src/features/todos/store.js
@@ -0,0 +1,147 @@
+import { ThemeType } from '@meetfranz/theme';
+import {
+  computed,
+  action,
+  observable,
+} from 'mobx';
+import localStorage from 'mobx-localstorage';
+
+import { todoActions } from './actions';
+import { FeatureStore } from '../utils/FeatureStore';
+import { createReactions } from '../../stores/lib/Reaction';
+import { createActionBindings } from '../utils/ActionBinding';
+import { DEFAULT_TODOS_WIDTH, TODOS_MIN_WIDTH, DEFAULT_TODOS_VISIBLE } from '.';
+import { IPC } from './constants';
+
+const debug = require('debug')('Franz:feature:todos:store');
+
+export default class TodoStore extends FeatureStore {
+  @observable isFeatureEnabled = false;
+
+  @observable isFeatureActive = false;
+
+  webview = null;
+
+  @computed get width() {
+    const width = this.settings.width || DEFAULT_TODOS_WIDTH;
+
+    return width < TODOS_MIN_WIDTH ? TODOS_MIN_WIDTH : width;
+  }
+
+  @computed get isTodosPanelVisible() {
+    if (this.settings.isTodosPanelVisible === undefined) return DEFAULT_TODOS_VISIBLE;
+
+    return this.settings.isTodosPanelVisible;
+  }
+
+  @computed get settings() {
+    return localStorage.getItem('todos') || {};
+  }
+
+  // ========== PUBLIC API ========= //
+
+  @action start(stores, actions) {
+    debug('TodoStore::start');
+    this.stores = stores;
+    this.actions = actions;
+
+    // ACTIONS
+
+    this._registerActions(createActionBindings([
+      [todoActions.resize, this._resize],
+      [todoActions.toggleTodosPanel, this._toggleTodosPanel],
+      [todoActions.setTodosWebview, this._setTodosWebview],
+      [todoActions.handleHostMessage, this._handleHostMessage],
+      [todoActions.handleClientMessage, this._handleClientMessage],
+    ]));
+
+    // REACTIONS
+
+    this._allReactions = createReactions([
+      this._setFeatureEnabledReaction,
+    ]);
+
+    this._registerReactions(this._allReactions);
+
+    this.isFeatureActive = true;
+  }
+
+  @action stop() {
+    super.stop();
+    debug('TodoStore::stop');
+    this.reset();
+    this.isFeatureActive = false;
+  }
+
+  // ========== PRIVATE METHODS ========= //
+
+  _updateSettings = (changes) => {
+    localStorage.setItem('todos', {
+      ...this.settings,
+      ...changes,
+    });
+  };
+
+  // Actions
+
+  @action _resize = ({ width }) => {
+    this._updateSettings({
+      width,
+    });
+  };
+
+  @action _toggleTodosPanel = () => {
+    this._updateSettings({
+      isTodosPanelVisible: !this.isTodosPanelVisible,
+    });
+  };
+
+  @action _setTodosWebview = ({ webview }) => {
+    debug('_setTodosWebview', webview);
+    this.webview = webview;
+  };
+
+  @action _handleHostMessage = (message) => {
+    debug('_handleHostMessage', message);
+    if (message.action === 'todos:create') {
+      this.webview.send(IPC.TODOS_HOST_CHANNEL, message);
+    }
+  };
+
+  @action _handleClientMessage = (message) => {
+    debug('_handleClientMessage', message);
+    switch (message.action) {
+      case 'todos:initialized': this._onTodosClientInitialized(); break;
+      case 'todos:goToService': this._goToService(message.data); break;
+      default:
+        debug('Unknown client message reiceived', message);
+    }
+  };
+
+  // Todos client message handlers
+
+  _onTodosClientInitialized = () => {
+    this.webview.send(IPC.TODOS_HOST_CHANNEL, {
+      action: 'todos:configure',
+      data: {
+        authToken: this.stores.user.authToken,
+        theme: this.stores.ui.isDarkThemeActive ? ThemeType.dark : ThemeType.default,
+      },
+    });
+  };
+
+  _goToService = ({ url, serviceId }) => {
+    if (url) {
+      this.stores.services.one(serviceId).webview.loadURL(url);
+    }
+    this.actions.service.setActive({ serviceId });
+  };
+
+  // Reactions
+
+  _setFeatureEnabledReaction = () => {
+    const { isTodosEnabled } = this.stores.features.features;
+
+    this.isFeatureEnabled = isTodosEnabled;
+  };
+}
diff --git a/src/features/workspaces/store.js b/src/features/workspaces/store.js
index 07b16ff23..e44569be9 100644
--- a/src/features/workspaces/store.js
+++ b/src/features/workspaces/store.js
@@ -79,7 +79,7 @@ export default class WorkspacesStore extends FeatureStore {
 
   // ========== PUBLIC API ========= //
 
-  start(stores, actions) {
+  @action start(stores, actions) {
     debug('WorkspacesStore::start');
     this.stores = stores;
     this.actions = actions;
@@ -104,7 +104,7 @@ export default class WorkspacesStore extends FeatureStore {
     // REACTIONS
 
     this._freeUserReactions = createReactions([
-      this._stopPremiumActionsAndReactions,
+      this._disablePremiumFeatures,
       this._openDrawerWithSettingsReaction,
       this._setFeatureEnabledReaction,
       this._setIsPremiumFeatureReaction,
@@ -123,10 +123,7 @@ export default class WorkspacesStore extends FeatureStore {
     this.isFeatureActive = true;
   }
 
-  stop() {
-    super.stop();
-    debug('WorkspacesStore::stop');
-    this.isFeatureActive = false;
+  @action reset() {
     this.activeWorkspace = null;
     this.nextWorkspace = null;
     this.workspaceBeingEdited = null;
@@ -134,6 +131,13 @@ export default class WorkspacesStore extends FeatureStore {
     this.isWorkspaceDrawerOpen = false;
   }
 
+  @action stop() {
+    super.stop();
+    debug('WorkspacesStore::stop');
+    this.reset();
+    this.isFeatureActive = false;
+  }
+
   filterServicesByActiveWorkspace = (services) => {
     const { activeWorkspace, isFeatureActive } = this;
     if (isFeatureActive && activeWorkspace) {
@@ -251,9 +255,9 @@ export default class WorkspacesStore extends FeatureStore {
   _setIsPremiumFeatureReaction = () => {
     const { features, user } = this.stores;
     const { isPremium } = user.data;
-    const { isWorkspacePremiumFeature } = features.features;
-    this.isPremiumFeature = isWorkspacePremiumFeature;
-    this.isPremiumUpgradeRequired = isWorkspacePremiumFeature && !isPremium;
+    const { isWorkspaceIncludedInCurrentPlan } = features.features;
+    this.isPremiumFeature = !isWorkspaceIncludedInCurrentPlan;
+    this.isPremiumUpgradeRequired = !isWorkspaceIncludedInCurrentPlan && !isPremium;
   };
 
   _setWorkspaceBeingEditedReaction = () => {
@@ -281,6 +285,7 @@ export default class WorkspacesStore extends FeatureStore {
   };
 
   _activateLastUsedWorkspaceReaction = () => {
+    debug('_activateLastUsedWorkspaceReaction');
     if (!this.activeWorkspace && this.userHasWorkspaces) {
       const { lastActiveWorkspace } = this.settings;
       if (lastActiveWorkspace) {
@@ -324,10 +329,12 @@ export default class WorkspacesStore extends FeatureStore {
     });
   };
 
-  _stopPremiumActionsAndReactions = () => {
+  _disablePremiumFeatures = () => {
     if (!this.isUserAllowedToUseFeature) {
+      debug('_disablePremiumFeatures');
       this._stopActions(this._premiumUserActions);
       this._stopReactions(this._premiumUserReactions);
+      this.reset();
     } else {
       this._startActions(this._premiumUserActions);
       this._startReactions(this._premiumUserReactions);
diff --git a/src/helpers/plan-helpers.js b/src/helpers/plan-helpers.js
new file mode 100644
index 000000000..19392585e
--- /dev/null
+++ b/src/helpers/plan-helpers.js
@@ -0,0 +1,35 @@
+import { defineMessages } from 'react-intl';
+import { PLANS_MAPPING, PLANS } from '../config';
+
+const messages = defineMessages({
+  [PLANS.PRO]: {
+    id: 'pricing.plan.pro',
+    defaultMessage: '!!!Franz Professional',
+  },
+  [PLANS.PERSONAL]: {
+    id: 'pricing.plan.personal',
+    defaultMessage: '!!!Franz Personal',
+  },
+  [PLANS.FREE]: {
+    id: 'pricing.plan.free',
+    defaultMessage: '!!!Franz Free',
+  },
+  [PLANS.LEGACY]: {
+    id: 'pricing.plan.legacy',
+    defaultMessage: '!!!Franz Premium',
+  },
+});
+
+export function i18nPlanName(planId, intl) {
+  if (!planId) {
+    throw new Error('planId is required');
+  }
+
+  if (!intl) {
+    throw new Error('intl context is required');
+  }
+
+  const plan = PLANS_MAPPING[planId];
+
+  return intl.formatMessage(messages[plan]);
+}
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index d517b456b..62d56ad1f 100644
--- a/src/i18n/locales/defaultMessages.json
+++ b/src/i18n/locales/defaultMessages.json
@@ -417,55 +417,120 @@
   {
     "descriptors": [
       {
-        "defaultMessage": "!!!Support Franz",
+        "defaultMessage": "!!!Franz Professional",
         "end": {
           "column": 3,
-          "line": 16
+          "line": 18
         },
         "file": "src/components/auth/Pricing.js",
-        "id": "pricing.headline",
+        "id": "pricing.trial.headline",
         "start": {
           "column": 12,
-          "line": 13
+          "line": 15
         }
       },
       {
-        "defaultMessage": "!!!Select your support plan",
+        "defaultMessage": "!!!Your personal welcome offer:",
         "end": {
           "column": 3,
-          "line": 20
+          "line": 22
         },
         "file": "src/components/auth/Pricing.js",
-        "id": "pricing.support.label",
+        "id": "pricing.trial.subheadline",
         "start": {
-          "column": 23,
-          "line": 17
+          "column": 17,
+          "line": 19
         }
       },
       {
-        "defaultMessage": "!!!Support the development of Franz",
+        "defaultMessage": "!!!No strings attached",
         "end": {
           "column": 3,
-          "line": 24
+          "line": 26
+        },
+        "file": "src/components/auth/Pricing.js",
+        "id": "pricing.trial.terms.headline",
+        "start": {
+          "column": 29,
+          "line": 23
+        }
+      },
+      {
+        "defaultMessage": "!!!No credit card required",
+        "end": {
+          "column": 3,
+          "line": 30
         },
         "file": "src/components/auth/Pricing.js",
-        "id": "pricing.submit.label",
+        "id": "pricing.trial.terms.noCreditCard",
+        "start": {
+          "column": 16,
+          "line": 27
+        }
+      },
+      {
+        "defaultMessage": "!!!Your free trial ends automatically after 14 days",
+        "end": {
+          "column": 3,
+          "line": 34
+        },
+        "file": "src/components/auth/Pricing.js",
+        "id": "pricing.trial.terms.automaticTrialEnd",
         "start": {
           "column": 21,
-          "line": 21
+          "line": 31
         }
       },
       {
-        "defaultMessage": "!!!I don't want to support the development of Franz.",
+        "defaultMessage": "!!!Sorry, we could not activate your trial!",
         "end": {
           "column": 3,
-          "line": 28
+          "line": 38
         },
         "file": "src/components/auth/Pricing.js",
-        "id": "pricing.link.skipPayment",
+        "id": "pricing.trial.error",
         "start": {
-          "column": 15,
-          "line": 25
+          "column": 19,
+          "line": 35
+        }
+      },
+      {
+        "defaultMessage": "!!!Yes, upgrade my account to Franz Professional",
+        "end": {
+          "column": 3,
+          "line": 42
+        },
+        "file": "src/components/auth/Pricing.js",
+        "id": "pricing.trial.cta.accept",
+        "start": {
+          "column": 13,
+          "line": 39
+        }
+      },
+      {
+        "defaultMessage": "!!!Continue to Franz",
+        "end": {
+          "column": 3,
+          "line": 46
+        },
+        "file": "src/components/auth/Pricing.js",
+        "id": "pricing.trial.cta.skip",
+        "start": {
+          "column": 11,
+          "line": 43
+        }
+      },
+      {
+        "defaultMessage": "!!!Franz Professional includes:",
+        "end": {
+          "column": 3,
+          "line": 50
+        },
+        "file": "src/components/auth/Pricing.js",
+        "id": "pricing.trial.features.headline",
+        "start": {
+          "column": 20,
+          "line": 47
         }
       }
     ],
@@ -477,156 +542,143 @@
         "defaultMessage": "!!!Sign up",
         "end": {
           "column": 3,
-          "line": 21
+          "line": 20
         },
         "file": "src/components/auth/Signup.js",
         "id": "signup.headline",
         "start": {
           "column": 12,
-          "line": 18
+          "line": 17
         }
       },
       {
         "defaultMessage": "!!!Firstname",
         "end": {
           "column": 3,
-          "line": 25
+          "line": 24
         },
         "file": "src/components/auth/Signup.js",
         "id": "signup.firstname.label",
         "start": {
           "column": 18,
-          "line": 22
+          "line": 21
         }
       },
       {
         "defaultMessage": "!!!Lastname",
         "end": {
           "column": 3,
-          "line": 29
+          "line": 28
         },
         "file": "src/components/auth/Signup.js",
         "id": "signup.lastname.label",
         "start": {
           "column": 17,
-          "line": 26
+          "line": 25
         }
       },
       {
         "defaultMessage": "!!!Email address",
         "end": {
           "column": 3,
-          "line": 33
+          "line": 32
         },
         "file": "src/components/auth/Signup.js",
         "id": "signup.email.label",
         "start": {
           "column": 14,
-          "line": 30
-        }
-      },
-      {
-        "defaultMessage": "!!!Company",
-        "end": {
-          "column": 3,
-          "line": 37
-        },
-        "file": "src/components/auth/Signup.js",
-        "id": "signup.company.label",
-        "start": {
-          "column": 16,
-          "line": 34
+          "line": 29
         }
       },
       {
         "defaultMessage": "!!!Password",
         "end": {
           "column": 3,
-          "line": 41
+          "line": 40
         },
         "file": "src/components/auth/Signup.js",
         "id": "signup.password.label",
         "start": {
           "column": 17,
-          "line": 38
+          "line": 37
         }
       },
       {
         "defaultMessage": "!!!By creating a Franz account you accept the",
         "end": {
           "column": 3,
-          "line": 45
+          "line": 44
         },
         "file": "src/components/auth/Signup.js",
         "id": "signup.legal.info",
         "start": {
           "column": 13,
-          "line": 42
+          "line": 41
         }
       },
       {
         "defaultMessage": "!!!Terms of service",
         "end": {
           "column": 3,
-          "line": 49
+          "line": 48
         },
         "file": "src/components/auth/Signup.js",
         "id": "signup.legal.terms",
         "start": {
           "column": 9,
-          "line": 46
+          "line": 45
         }
       },
       {
         "defaultMessage": "!!!Privacy Statement",
         "end": {
           "column": 3,
-          "line": 53
+          "line": 52
         },
         "file": "src/components/auth/Signup.js",
         "id": "signup.legal.privacy",
         "start": {
           "column": 11,
-          "line": 50
+          "line": 49
         }
       },
       {
         "defaultMessage": "!!!Create account",
         "end": {
           "column": 3,
-          "line": 57
+          "line": 56
         },
         "file": "src/components/auth/Signup.js",
         "id": "signup.submit.label",
         "start": {
           "column": 21,
-          "line": 54
+          "line": 53
         }
       },
       {
         "defaultMessage": "!!!Already have an account, sign in?",
         "end": {
           "column": 3,
-          "line": 61
+          "line": 60
         },
         "file": "src/components/auth/Signup.js",
         "id": "signup.link.login",
         "start": {
           "column": 13,
-          "line": 58
+          "line": 57
         }
       },
       {
         "defaultMessage": "!!!A user with that email address already exists",
         "end": {
           "column": 3,
-          "line": 65
+          "line": 64
         },
         "file": "src/components/auth/Signup.js",
         "id": "signup.emailDuplicate",
         "start": {
           "column": 18,
-          "line": 62
+          "line": 61
         }
       }
     ],
@@ -669,39 +721,39 @@
         "defaultMessage": "!!!Your services have been updated.",
         "end": {
           "column": 3,
-          "line": 29
+          "line": 31
         },
         "file": "src/components/layout/AppLayout.js",
         "id": "infobar.servicesUpdated",
         "start": {
           "column": 19,
-          "line": 26
+          "line": 28
         }
       },
       {
         "defaultMessage": "!!!Reload services",
         "end": {
           "column": 3,
-          "line": 33
+          "line": 35
         },
         "file": "src/components/layout/AppLayout.js",
         "id": "infobar.buttonReloadServices",
         "start": {
           "column": 24,
-          "line": 30
+          "line": 32
         }
       },
       {
         "defaultMessage": "!!!Could not load services and user information",
         "end": {
           "column": 3,
-          "line": 37
+          "line": 39
         },
         "file": "src/components/layout/AppLayout.js",
         "id": "infobar.requiredRequestsFailed",
         "start": {
           "column": 26,
-          "line": 34
+          "line": 36
         }
       }
     ],
@@ -894,29 +946,99 @@
   {
     "descriptors": [
       {
-        "defaultMessage": "!!!Welcome to Franz",
+        "defaultMessage": "!!!You have reached your service limit.",
         "end": {
           "column": 3,
           "line": 14
         },
+        "file": "src/components/services/content/ServiceRestricted.js",
+        "id": "service.restrictedHandler.serviceLimit.headline",
+        "start": {
+          "column": 24,
+          "line": 11
+        }
+      },
+      {
+        "defaultMessage": "!!!Please upgrade your account to use more than {count} services.",
+        "end": {
+          "column": 3,
+          "line": 18
+        },
+        "file": "src/components/services/content/ServiceRestricted.js",
+        "id": "service.restrictedHandler.serviceLimit.text",
+        "start": {
+          "column": 20,
+          "line": 15
+        }
+      },
+      {
+        "defaultMessage": "!!!Franz Professional Plan required",
+        "end": {
+          "column": 3,
+          "line": 22
+        },
+        "file": "src/components/services/content/ServiceRestricted.js",
+        "id": "service.restrictedHandler.customUrl.headline",
+        "start": {
+          "column": 21,
+          "line": 19
+        }
+      },
+      {
+        "defaultMessage": "!!!Please upgrade to the Franz Professional plan to use custom urls & self hosted services.",
+        "end": {
+          "column": 3,
+          "line": 26
+        },
+        "file": "src/components/services/content/ServiceRestricted.js",
+        "id": "service.restrictedHandler.customUrl.text",
+        "start": {
+          "column": 17,
+          "line": 23
+        }
+      },
+      {
+        "defaultMessage": "!!!Upgrade Account",
+        "end": {
+          "column": 3,
+          "line": 30
+        },
+        "file": "src/components/services/content/ServiceRestricted.js",
+        "id": "service.restrictedHandler.action",
+        "start": {
+          "column": 10,
+          "line": 27
+        }
+      }
+    ],
+    "path": "src/components/services/content/ServiceRestricted.json"
+  },
+  {
+    "descriptors": [
+      {
+        "defaultMessage": "!!!Welcome to Franz",
+        "end": {
+          "column": 3,
+          "line": 17
+        },
         "file": "src/components/services/content/Services.js",
         "id": "services.welcome",
         "start": {
           "column": 11,
-          "line": 11
+          "line": 14
         }
       },
       {
         "defaultMessage": "!!!Get started",
         "end": {
           "column": 3,
-          "line": 18
+          "line": 21
         },
         "file": "src/components/services/content/Services.js",
         "id": "services.getStarted",
         "start": {
           "column": 14,
-          "line": 15
+          "line": 18
         }
       }
     ],
@@ -1107,38 +1229,25 @@
         "defaultMessage": "!!!Account",
         "end": {
           "column": 3,
-          "line": 17
+          "line": 21
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.headline",
         "start": {
           "column": 12,
-          "line": 14
+          "line": 18
         }
       },
       {
         "defaultMessage": "!!!Your Subscription",
         "end": {
           "column": 3,
-          "line": 21
+          "line": 25
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.headlineSubscription",
         "start": {
           "column": 24,
-          "line": 18
-        }
-      },
-      {
-        "defaultMessage": "!!!Upgrade your Account",
-        "end": {
-          "column": 3,
-          "line": 25
-        },
-        "file": "src/components/settings/account/AccountDashboard.js",
-        "id": "settings.account.headlineUpgrade",
-        "start": {
-          "column": 19,
           "line": 22
         }
       },
@@ -1169,133 +1278,198 @@
         }
       },
       {
-        "defaultMessage": "!!!Basic Account",
+        "defaultMessage": "!!!Upgrade to Franz Professional",
         "end": {
           "column": 3,
           "line": 37
         },
         "file": "src/components/settings/account/AccountDashboard.js",
+        "id": "settings.account.upgradeToPro.label",
+        "start": {
+          "column": 23,
+          "line": 34
+        }
+      },
+      {
+        "defaultMessage": "!!!Basic Account",
+        "end": {
+          "column": 3,
+          "line": 41
+        },
+        "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.accountType.basic",
         "start": {
           "column": 20,
-          "line": 34
+          "line": 38
         }
       },
       {
         "defaultMessage": "!!!Premium Supporter Account",
         "end": {
           "column": 3,
-          "line": 41
+          "line": 45
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.accountType.premium",
         "start": {
           "column": 22,
-          "line": 38
+          "line": 42
         }
       },
       {
         "defaultMessage": "!!!Edit Account",
         "end": {
           "column": 3,
-          "line": 45
+          "line": 49
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.account.editButton",
         "start": {
           "column": 21,
-          "line": 42
+          "line": 46
         }
       },
       {
         "defaultMessage": "!!Invoices",
         "end": {
           "column": 3,
-          "line": 49
+          "line": 53
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.headlineInvoices",
         "start": {
           "column": 18,
-          "line": 46
+          "line": 50
         }
       },
       {
         "defaultMessage": "!!!Download",
         "end": {
           "column": 3,
-          "line": 53
+          "line": 57
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.invoiceDownload",
         "start": {
           "column": 19,
-          "line": 50
+          "line": 54
         }
       },
       {
         "defaultMessage": "!!!Could not load user information",
         "end": {
           "column": 3,
-          "line": 57
+          "line": 61
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.userInfoRequestFailed",
         "start": {
           "column": 25,
-          "line": 54
+          "line": 58
         }
       },
       {
         "defaultMessage": "!!!Try again",
         "end": {
           "column": 3,
-          "line": 61
+          "line": 65
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.tryReloadUserInfoRequest",
         "start": {
           "column": 28,
-          "line": 58
+          "line": 62
         }
       },
       {
         "defaultMessage": "!!!Delete account",
         "end": {
           "column": 3,
-          "line": 65
+          "line": 69
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.deleteAccount",
         "start": {
           "column": 17,
-          "line": 62
+          "line": 66
         }
       },
       {
         "defaultMessage": "!!!If you don't need your Franz account any longer, you can delete your account and all related data here.",
         "end": {
           "column": 3,
-          "line": 69
+          "line": 73
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.deleteInfo",
         "start": {
           "column": 14,
-          "line": 66
+          "line": 70
         }
       },
       {
         "defaultMessage": "!!!You have received an email with a link to confirm your account deletion. Your account and data cannot be restored!",
         "end": {
           "column": 3,
-          "line": 73
+          "line": 77
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.deleteEmailSent",
         "start": {
           "column": 19,
-          "line": 70
+          "line": 74
+        }
+      },
+      {
+        "defaultMessage": "!!!Free Trial",
+        "end": {
+          "column": 3,
+          "line": 81
+        },
+        "file": "src/components/settings/account/AccountDashboard.js",
+        "id": "settings.account.trial",
+        "start": {
+          "column": 9,
+          "line": 78
+        }
+      },
+      {
+        "defaultMessage": "!!!Your Franz License:",
+        "end": {
+          "column": 3,
+          "line": 85
+        },
+        "file": "src/components/settings/account/AccountDashboard.js",
+        "id": "settings.account.yourLicense",
+        "start": {
+          "column": 15,
+          "line": 82
+        }
+      },
+      {
+        "defaultMessage": "!!!Your free trial ends in {duration}.",
+        "end": {
+          "column": 3,
+          "line": 89
+        },
+        "file": "src/components/settings/account/AccountDashboard.js",
+        "id": "settings.account.trialEndsIn",
+        "start": {
+          "column": 15,
+          "line": 86
+        }
+      },
+      {
+        "defaultMessage": "!!!Please update your billing info to continue using {license} after your trial period.",
+        "end": {
+          "column": 3,
+          "line": 93
+        },
+        "file": "src/components/settings/account/AccountDashboard.js",
+        "id": "settings.account.trialUpdateBillingInfo",
+        "start": {
+          "column": 33,
+          "line": 90
         }
       }
     ],
@@ -1307,104 +1481,104 @@
         "defaultMessage": "!!!Available services",
         "end": {
           "column": 3,
-          "line": 16
+          "line": 17
         },
         "file": "src/components/settings/navigation/SettingsNavigation.js",
         "id": "settings.navigation.availableServices",
         "start": {
           "column": 21,
-          "line": 13
+          "line": 14
         }
       },
       {
         "defaultMessage": "!!!Your services",
         "end": {
           "column": 3,
-          "line": 20
+          "line": 21
         },
         "file": "src/components/settings/navigation/SettingsNavigation.js",
         "id": "settings.navigation.yourServices",
         "start": {
           "column": 16,
-          "line": 17
+          "line": 18
         }
       },
       {
         "defaultMessage": "!!!Your workspaces",
         "end": {
           "column": 3,
-          "line": 24
+          "line": 25
         },
         "file": "src/components/settings/navigation/SettingsNavigation.js",
         "id": "settings.navigation.yourWorkspaces",
         "start": {
           "column": 18,
-          "line": 21
+          "line": 22
         }
       },
       {
         "defaultMessage": "!!!Account",
         "end": {
           "column": 3,
-          "line": 28
+          "line": 29
         },
         "file": "src/components/settings/navigation/SettingsNavigation.js",
         "id": "settings.navigation.account",
         "start": {
           "column": 11,
-          "line": 25
+          "line": 26
         }
       },
       {
         "defaultMessage": "!!!Manage Team",
         "end": {
           "column": 3,
-          "line": 32
+          "line": 33
         },
         "file": "src/components/settings/navigation/SettingsNavigation.js",
         "id": "settings.navigation.team",
         "start": {
           "column": 8,
-          "line": 29
+          "line": 30
         }
       },
       {
         "defaultMessage": "!!!Settings",
         "end": {
           "column": 3,
-          "line": 36
+          "line": 37
         },
         "file": "src/components/settings/navigation/SettingsNavigation.js",
         "id": "settings.navigation.settings",
         "start": {
           "column": 12,
-          "line": 33
+          "line": 34
         }
       },
       {
         "defaultMessage": "!!!Invite Friends",
         "end": {
           "column": 3,
-          "line": 40
+          "line": 41
         },
         "file": "src/components/settings/navigation/SettingsNavigation.js",
         "id": "settings.navigation.inviteFriends",
         "start": {
           "column": 17,
-          "line": 37
+          "line": 38
         }
       },
       {
         "defaultMessage": "!!!Logout",
         "end": {
           "column": 3,
-          "line": 44
+          "line": 45
         },
         "file": "src/components/settings/navigation/SettingsNavigation.js",
         "id": "settings.navigation.logout",
         "start": {
           "column": 10,
-          "line": 41
+          "line": 42
         }
       }
     ],
@@ -1416,104 +1590,182 @@
         "defaultMessage": "!!!Available Services",
         "end": {
           "column": 3,
-          "line": 18
+          "line": 23
         },
         "file": "src/components/settings/recipes/RecipesDashboard.js",
         "id": "settings.recipes.headline",
         "start": {
           "column": 12,
-          "line": 15
+          "line": 20
         }
       },
       {
         "defaultMessage": "!!!Search service",
         "end": {
           "column": 3,
-          "line": 22
+          "line": 27
         },
         "file": "src/components/settings/recipes/RecipesDashboard.js",
         "id": "settings.searchService",
         "start": {
           "column": 17,
-          "line": 19
+          "line": 24
         }
       },
       {
         "defaultMessage": "!!!Most popular",
         "end": {
           "column": 3,
-          "line": 26
+          "line": 31
         },
         "file": "src/components/settings/recipes/RecipesDashboard.js",
         "id": "settings.recipes.mostPopular",
         "start": {
           "column": 22,
-          "line": 23
+          "line": 28
         }
       },
       {
         "defaultMessage": "!!!All services",
         "end": {
           "column": 3,
-          "line": 30
+          "line": 35
         },
         "file": "src/components/settings/recipes/RecipesDashboard.js",
         "id": "settings.recipes.all",
         "start": {
           "column": 14,
-          "line": 27
+          "line": 32
         }
       },
       {
-        "defaultMessage": "!!!Development",
+        "defaultMessage": "!!!Custom Services",
         "end": {
           "column": 3,
-          "line": 34
+          "line": 39
         },
         "file": "src/components/settings/recipes/RecipesDashboard.js",
-        "id": "settings.recipes.dev",
+        "id": "settings.recipes.custom",
         "start": {
-          "column": 14,
-          "line": 31
+          "column": 17,
+          "line": 36
         }
       },
       {
         "defaultMessage": "!!!Sorry, but no service matched your search term.",
         "end": {
           "column": 3,
-          "line": 38
+          "line": 43
         },
         "file": "src/components/settings/recipes/RecipesDashboard.js",
         "id": "settings.recipes.nothingFound",
         "start": {
           "column": 16,
-          "line": 35
+          "line": 40
         }
       },
       {
         "defaultMessage": "!!!Service successfully added",
         "end": {
           "column": 3,
-          "line": 42
+          "line": 47
         },
         "file": "src/components/settings/recipes/RecipesDashboard.js",
         "id": "settings.recipes.servicesSuccessfulAddedInfo",
         "start": {
           "column": 31,
-          "line": 39
+          "line": 44
         }
       },
       {
         "defaultMessage": "!!!Missing a service?",
         "end": {
           "column": 3,
-          "line": 46
+          "line": 51
         },
         "file": "src/components/settings/recipes/RecipesDashboard.js",
         "id": "settings.recipes.missingService",
         "start": {
           "column": 18,
-          "line": 43
+          "line": 48
+        }
+      },
+      {
+        "defaultMessage": "!!!To add a custom service, copy the recipe folder into:",
+        "end": {
+          "column": 3,
+          "line": 55
+        },
+        "file": "src/components/settings/recipes/RecipesDashboard.js",
+        "id": "settings.recipes.customService.intro",
+        "start": {
+          "column": 21,
+          "line": 52
+        }
+      },
+      {
+        "defaultMessage": "!!!Open directory",
+        "end": {
+          "column": 3,
+          "line": 59
+        },
+        "file": "src/components/settings/recipes/RecipesDashboard.js",
+        "id": "settings.recipes.customService.openFolder",
+        "start": {
+          "column": 14,
+          "line": 56
+        }
+      },
+      {
+        "defaultMessage": "!!!Developer Documentation",
+        "end": {
+          "column": 3,
+          "line": 63
+        },
+        "file": "src/components/settings/recipes/RecipesDashboard.js",
+        "id": "settings.recipes.customService.openDevDocs",
+        "start": {
+          "column": 15,
+          "line": 60
+        }
+      },
+      {
+        "defaultMessage": "!!!Custom Service Recipes",
+        "end": {
+          "column": 3,
+          "line": 67
+        },
+        "file": "src/components/settings/recipes/RecipesDashboard.js",
+        "id": "settings.recipes.customService.headline.customRecipes",
+        "start": {
+          "column": 25,
+          "line": 64
+        }
+      },
+      {
+        "defaultMessage": "!!!Community Services",
+        "end": {
+          "column": 3,
+          "line": 71
+        },
+        "file": "src/components/settings/recipes/RecipesDashboard.js",
+        "id": "settings.recipes.customService.headline.communityRecipes",
+        "start": {
+          "column": 28,
+          "line": 68
+        }
+      },
+      {
+        "defaultMessage": "!!!Your Development Service Recipes",
+        "end": {
+          "column": 3,
+          "line": 75
+        },
+        "file": "src/components/settings/recipes/RecipesDashboard.js",
+        "id": "settings.recipes.customService.headline.devRecipes",
+        "start": {
+          "column": 22,
+          "line": 72
         }
       }
     ],
@@ -1525,286 +1777,286 @@
         "defaultMessage": "!!!Save service",
         "end": {
           "column": 3,
-          "line": 25
+          "line": 27
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.saveButton",
         "start": {
           "column": 15,
-          "line": 22
+          "line": 24
         }
       },
       {
         "defaultMessage": "!!!Delete Service",
         "end": {
           "column": 3,
-          "line": 29
+          "line": 31
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.deleteButton",
         "start": {
           "column": 17,
-          "line": 26
+          "line": 28
         }
       },
       {
         "defaultMessage": "!!!Available services",
         "end": {
           "column": 3,
-          "line": 33
+          "line": 35
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.availableServices",
         "start": {
           "column": 21,
-          "line": 30
+          "line": 32
         }
       },
       {
         "defaultMessage": "!!!Your services",
         "end": {
           "column": 3,
-          "line": 37
+          "line": 39
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.yourServices",
         "start": {
           "column": 16,
-          "line": 34
+          "line": 36
         }
       },
       {
         "defaultMessage": "!!!Add {name}",
         "end": {
           "column": 3,
-          "line": 41
+          "line": 43
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.addServiceHeadline",
         "start": {
           "column": 22,
-          "line": 38
+          "line": 40
         }
       },
       {
         "defaultMessage": "!!!Edit {name}",
         "end": {
           "column": 3,
-          "line": 45
+          "line": 47
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.editServiceHeadline",
         "start": {
           "column": 23,
-          "line": 42
+          "line": 44
         }
       },
       {
         "defaultMessage": "!!!Hosted",
         "end": {
           "column": 3,
-          "line": 49
+          "line": 51
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.tabHosted",
         "start": {
           "column": 13,
-          "line": 46
+          "line": 48
         }
       },
       {
         "defaultMessage": "!!!Self hosted ⭐️",
         "end": {
           "column": 3,
-          "line": 53
+          "line": 55
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.tabOnPremise",
         "start": {
           "column": 16,
-          "line": 50
+          "line": 52
         }
       },
       {
         "defaultMessage": "!!!Use the hosted {name} service.",
         "end": {
           "column": 3,
-          "line": 57
+          "line": 59
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.useHostedService",
         "start": {
           "column": 20,
-          "line": 54
+          "line": 56
         }
       },
       {
         "defaultMessage": "!!!Could not validate custom {name} server.",
         "end": {
           "column": 3,
-          "line": 61
+          "line": 63
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.customUrlValidationError",
         "start": {
           "column": 28,
-          "line": 58
+          "line": 60
         }
       },
       {
         "defaultMessage": "!!!To add self hosted services, you need a Franz Premium Supporter Account.",
         "end": {
           "column": 3,
-          "line": 65
+          "line": 67
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.customUrlPremiumInfo",
         "start": {
           "column": 24,
-          "line": 62
+          "line": 64
         }
       },
       {
         "defaultMessage": "!!!Upgrade your account",
         "end": {
           "column": 3,
-          "line": 69
+          "line": 71
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.customUrlUpgradeAccount",
         "start": {
           "column": 27,
-          "line": 66
+          "line": 68
         }
       },
       {
         "defaultMessage": "!!!You will be notified about all new messages in a channel, not just @username, @channel, @here, ...",
         "end": {
           "column": 3,
-          "line": 73
+          "line": 75
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.indirectMessageInfo",
         "start": {
           "column": 23,
-          "line": 70
+          "line": 72
         }
       },
       {
         "defaultMessage": "!!!When disabled, all notification sounds and audio playback are muted",
         "end": {
           "column": 3,
-          "line": 77
+          "line": 79
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.isMutedInfo",
         "start": {
           "column": 15,
-          "line": 74
+          "line": 76
         }
       },
       {
         "defaultMessage": "!!!Notifications",
         "end": {
           "column": 3,
-          "line": 81
+          "line": 83
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.headlineNotifications",
         "start": {
           "column": 25,
-          "line": 78
+          "line": 80
         }
       },
       {
         "defaultMessage": "!!!Unread message badges",
         "end": {
           "column": 3,
-          "line": 85
+          "line": 87
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.headlineBadges",
         "start": {
           "column": 18,
-          "line": 82
+          "line": 84
         }
       },
       {
         "defaultMessage": "!!!General",
         "end": {
           "column": 3,
-          "line": 89
+          "line": 91
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.headlineGeneral",
         "start": {
           "column": 19,
-          "line": 86
+          "line": 88
         }
       },
       {
         "defaultMessage": "!!!Delete",
         "end": {
           "column": 3,
-          "line": 93
+          "line": 95
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.iconDelete",
         "start": {
           "column": 14,
-          "line": 90
+          "line": 92
         }
       },
       {
         "defaultMessage": "!!!Drop your image, or click here",
         "end": {
           "column": 3,
-          "line": 97
+          "line": 99
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.iconUpload",
         "start": {
           "column": 14,
-          "line": 94
+          "line": 96
         }
       },
       {
         "defaultMessage": "!!!HTTP/HTTPS Proxy Settings",
         "end": {
           "column": 3,
-          "line": 101
+          "line": 103
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.proxy.headline",
         "start": {
           "column": 17,
-          "line": 98
+          "line": 100
         }
       },
       {
         "defaultMessage": "!!!Please restart Franz after changing proxy Settings.",
         "end": {
           "column": 3,
-          "line": 105
+          "line": 107
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.proxy.restartInfo",
         "start": {
           "column": 20,
-          "line": 102
+          "line": 104
         }
       },
       {
         "defaultMessage": "!!!Proxy settings will not be synchronized with the Franz servers.",
         "end": {
           "column": 3,
-          "line": 109
+          "line": 111
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.proxy.info",
         "start": {
           "column": 13,
-          "line": 106
+          "line": 108
         }
       }
     ],
@@ -1917,117 +2169,117 @@
         "defaultMessage": "!!!Your services",
         "end": {
           "column": 3,
-          "line": 17
+          "line": 18
         },
         "file": "src/components/settings/services/ServicesDashboard.js",
         "id": "settings.services.headline",
         "start": {
           "column": 12,
-          "line": 14
+          "line": 15
         }
       },
       {
         "defaultMessage": "!!!Search service",
         "end": {
           "column": 3,
-          "line": 21
+          "line": 22
         },
         "file": "src/components/settings/services/ServicesDashboard.js",
         "id": "settings.searchService",
         "start": {
           "column": 17,
-          "line": 18
+          "line": 19
         }
       },
       {
         "defaultMessage": "!!!You haven't added any services yet.",
         "end": {
           "column": 3,
-          "line": 25
+          "line": 26
         },
         "file": "src/components/settings/services/ServicesDashboard.js",
         "id": "settings.services.noServicesAdded",
         "start": {
           "column": 19,
-          "line": 22
+          "line": 23
         }
       },
       {
         "defaultMessage": "!!!Sorry, but no service matched your search term.",
         "end": {
           "column": 3,
-          "line": 29
+          "line": 30
         },
         "file": "src/components/settings/services/ServicesDashboard.js",
         "id": "settings.recipes.nothingFound",
         "start": {
           "column": 18,
-          "line": 26
+          "line": 27
         }
       },
       {
         "defaultMessage": "!!!Discover services",
         "end": {
           "column": 3,
-          "line": 33
+          "line": 34
         },
         "file": "src/components/settings/services/ServicesDashboard.js",
         "id": "settings.services.discoverServices",
         "start": {
           "column": 20,
-          "line": 30
+          "line": 31
         }
       },
       {
         "defaultMessage": "!!!Could not load your services",
         "end": {
           "column": 3,
-          "line": 37
+          "line": 38
         },
         "file": "src/components/settings/services/ServicesDashboard.js",
         "id": "settings.services.servicesRequestFailed",
         "start": {
           "column": 25,
-          "line": 34
+          "line": 35
         }
       },
       {
         "defaultMessage": "!!!Try again",
         "end": {
           "column": 3,
-          "line": 41
+          "line": 42
         },
         "file": "src/components/settings/services/ServicesDashboard.js",
         "id": "settings.account.tryReloadServices",
         "start": {
           "column": 21,
-          "line": 38
+          "line": 39
         }
       },
       {
         "defaultMessage": "!!!Your changes have been saved",
         "end": {
           "column": 3,
-          "line": 45
+          "line": 46
         },
         "file": "src/components/settings/services/ServicesDashboard.js",
         "id": "settings.services.updatedInfo",
         "start": {
           "column": 15,
-          "line": 42
+          "line": 43
         }
       },
       {
         "defaultMessage": "!!!Service has been deleted",
         "end": {
           "column": 3,
-          "line": 49
+          "line": 50
         },
         "file": "src/components/settings/services/ServicesDashboard.js",
         "id": "settings.services.deletedInfo",
         "start": {
           "column": 15,
-          "line": 46
+          "line": 47
         }
       }
     ],
@@ -2441,220 +2693,339 @@
   {
     "descriptors": [
       {
-        "defaultMessage": "!!!Support the development of Franz",
+        "defaultMessage": "!!!Choose your plan",
         "end": {
           "column": 3,
+          "line": 16
+        },
+        "file": "src/components/subscription/SubscriptionForm.js",
+        "id": "subscription.cta.choosePlan",
+        "start": {
+          "column": 21,
+          "line": 13
+        }
+      },
+      {
+        "defaultMessage": "!!!Upgrade your account and get the full Franz experience",
+        "end": {
+          "column": 3,
+          "line": 20
+        },
+        "file": "src/components/subscription/SubscriptionForm.js",
+        "id": "settings.account.headlineUpgradeAccount",
+        "start": {
+          "column": 18,
           "line": 17
+        }
+      },
+      {
+        "defaultMessage": "!!!Franz 5 comes with a wide range of new features to boost up your everyday communication - batteries included. Check out our new plans and find out which one suits you most!",
+        "end": {
+          "column": 3,
+          "line": 24
+        },
+        "file": "src/components/subscription/SubscriptionForm.js",
+        "id": "subscription.teaser.intro",
+        "start": {
+          "column": 14,
+          "line": 21
+        }
+      },
+      {
+        "defaultMessage": "!!!Paid Franz Plans include:",
+        "end": {
+          "column": 3,
+          "line": 28
         },
         "file": "src/components/subscription/SubscriptionForm.js",
-        "id": "subscription.submit.label",
+        "id": "subscription.teaser.includedFeatures",
+        "start": {
+          "column": 20,
+          "line": 25
+        }
+      }
+    ],
+    "path": "src/components/subscription/SubscriptionForm.json"
+  },
+  {
+    "descriptors": [
+      {
+        "defaultMessage": "!!!Cancel",
+        "end": {
+          "column": 3,
+          "line": 14
+        },
+        "file": "src/components/subscription/SubscriptionPopup.js",
+        "id": "subscriptionPopup.buttonCancel",
+        "start": {
+          "column": 16,
+          "line": 11
+        }
+      },
+      {
+        "defaultMessage": "!!!Done",
+        "end": {
+          "column": 3,
+          "line": 18
+        },
+        "file": "src/components/subscription/SubscriptionPopup.js",
+        "id": "subscriptionPopup.buttonDone",
+        "start": {
+          "column": 14,
+          "line": 15
+        }
+      }
+    ],
+    "path": "src/components/subscription/SubscriptionPopup.json"
+  },
+  {
+    "descriptors": [
+      {
+        "defaultMessage": "!!!Yes, start the free Franz Professional trial",
+        "end": {
+          "column": 3,
+          "line": 17
+        },
+        "file": "src/components/subscription/TrialForm.js",
+        "id": "subscription.cta.activateTrial",
         "start": {
           "column": 21,
           "line": 14
         }
       },
       {
-        "defaultMessage": "!!!Could not initialize payment form",
+        "defaultMessage": "!!!See all options",
         "end": {
           "column": 3,
           "line": 21
         },
-        "file": "src/components/subscription/SubscriptionForm.js",
-        "id": "subscription.paymentSessionError",
+        "file": "src/components/subscription/TrialForm.js",
+        "id": "subscription.cta.allOptions",
         "start": {
-          "column": 23,
+          "column": 20,
           "line": 18
         }
       },
       {
-        "defaultMessage": "!!!free",
+        "defaultMessage": "!!!Get the free 14 day Franz Professional Trial",
         "end": {
           "column": 3,
           "line": 25
         },
-        "file": "src/components/subscription/SubscriptionForm.js",
-        "id": "subscription.type.free",
+        "file": "src/components/subscription/TrialForm.js",
+        "id": "settings.account.headlineTrialUpgrade",
         "start": {
-          "column": 12,
+          "column": 18,
           "line": 22
         }
       },
       {
-        "defaultMessage": "!!!month",
+        "defaultMessage": "!!!The Franz Professional Plan includes:",
         "end": {
           "column": 3,
           "line": 29
         },
-        "file": "src/components/subscription/SubscriptionForm.js",
-        "id": "subscription.type.month",
+        "file": "src/components/subscription/TrialForm.js",
+        "id": "subscription.includedProFeatures",
         "start": {
-          "column": 15,
+          "column": 20,
           "line": 26
         }
       },
       {
-        "defaultMessage": "!!!year",
+        "defaultMessage": "!!!No strings attached",
         "end": {
           "column": 3,
           "line": 33
         },
-        "file": "src/components/subscription/SubscriptionForm.js",
-        "id": "subscription.type.year",
+        "file": "src/components/subscription/TrialForm.js",
+        "id": "pricing.trial.terms.headline",
         "start": {
-          "column": 14,
+          "column": 29,
           "line": 30
         }
       },
       {
-        "defaultMessage": "!!!The Franz Premium Supporter Account includes",
+        "defaultMessage": "!!!No credit card required",
         "end": {
           "column": 3,
           "line": 37
         },
-        "file": "src/components/subscription/SubscriptionForm.js",
-        "id": "subscription.includedFeatures",
+        "file": "src/components/subscription/TrialForm.js",
+        "id": "pricing.trial.terms.noCreditCard",
         "start": {
-          "column": 20,
+          "column": 16,
           "line": 34
         }
       },
       {
-        "defaultMessage": "!!!Add on-premise/hosted services like Mattermost",
+        "defaultMessage": "!!!Your free trial ends automatically after 14 days",
         "end": {
           "column": 3,
           "line": 41
         },
-        "file": "src/components/subscription/SubscriptionForm.js",
-        "id": "subscription.features.onpremise.mattermost",
+        "file": "src/components/subscription/TrialForm.js",
+        "id": "pricing.trial.terms.automaticTrialEnd",
         "start": {
-          "column": 13,
+          "column": 21,
           "line": 38
         }
-      },
+      }
+    ],
+    "path": "src/components/subscription/TrialForm.json"
+  },
+  {
+    "descriptors": [
       {
-        "defaultMessage": "!!!No app delays & nagging to upgrade license",
+        "defaultMessage": "!!!Your trial was successfully activated. Happy messaging!",
         "end": {
           "column": 3,
-          "line": 45
+          "line": 14
         },
-        "file": "src/components/subscription/SubscriptionForm.js",
-        "id": "subscription.features.noInterruptions",
+        "file": "src/components/TrialActivationInfoBar.js",
+        "id": "infobar.trialActivated",
         "start": {
-          "column": 19,
-          "line": 42
+          "column": 11,
+          "line": 11
         }
-      },
+      }
+    ],
+    "path": "src/components/TrialActivationInfoBar.json"
+  },
+  {
+    "descriptors": [
       {
-        "defaultMessage": "!!!Proxy support for services",
+        "defaultMessage": "!!!Add unlimited services",
         "end": {
           "column": 3,
-          "line": 49
+          "line": 11
         },
-        "file": "src/components/subscription/SubscriptionForm.js",
-        "id": "subscription.features.proxy",
+        "file": "src/components/ui/FeatureList.js",
+        "id": "pricing.features.unlimitedServices",
         "start": {
-          "column": 9,
-          "line": 46
+          "column": 21,
+          "line": 8
         }
       },
       {
-        "defaultMessage": "!!!Support for Spellchecker",
+        "defaultMessage": "!!!Spellchecker support",
         "end": {
           "column": 3,
-          "line": 53
+          "line": 15
         },
-        "file": "src/components/subscription/SubscriptionForm.js",
-        "id": "subscription.features.spellchecker",
+        "file": "src/components/ui/FeatureList.js",
+        "id": "pricing.features.spellchecker",
         "start": {
           "column": 16,
-          "line": 50
+          "line": 12
         }
       },
       {
-        "defaultMessage": "!!!Organize your services in workspaces",
+        "defaultMessage": "!!!Workspaces",
         "end": {
           "column": 3,
-          "line": 57
+          "line": 19
         },
-        "file": "src/components/subscription/SubscriptionForm.js",
-        "id": "subscription.features.workspaces",
+        "file": "src/components/ui/FeatureList.js",
+        "id": "pricing.features.workspaces",
         "start": {
           "column": 14,
-          "line": 54
+          "line": 16
         }
       },
       {
-        "defaultMessage": "!!!No ads, ever!",
+        "defaultMessage": "!!!Add Custom Websites",
         "end": {
           "column": 3,
-          "line": 61
+          "line": 23
         },
-        "file": "src/components/subscription/SubscriptionForm.js",
-        "id": "subscription.features.ads",
+        "file": "src/components/ui/FeatureList.js",
+        "id": "pricing.features.customWebsites",
         "start": {
-          "column": 7,
-          "line": 58
+          "column": 18,
+          "line": 20
         }
       },
       {
-        "defaultMessage": "!!!coming soon",
+        "defaultMessage": "!!!On-premise & other Hosted Services",
         "end": {
           "column": 3,
-          "line": 65
+          "line": 27
         },
-        "file": "src/components/subscription/SubscriptionForm.js",
-        "id": "subscription.features.comingSoon",
+        "file": "src/components/ui/FeatureList.js",
+        "id": "pricing.features.onPremise",
         "start": {
-          "column": 14,
-          "line": 62
+          "column": 13,
+          "line": 24
         }
       },
       {
-        "defaultMessage": "!!!EU residents: local sales tax may apply",
+        "defaultMessage": "!!!Install 3rd party services",
         "end": {
           "column": 3,
-          "line": 69
+          "line": 31
         },
-        "file": "src/components/subscription/SubscriptionForm.js",
-        "id": "subscription.euTaxInfo",
+        "file": "src/components/ui/FeatureList.js",
+        "id": "pricing.features.thirdPartyServices",
         "start": {
-          "column": 13,
-          "line": 66
+          "column": 22,
+          "line": 28
         }
-      }
-    ],
-    "path": "src/components/subscription/SubscriptionForm.json"
-  },
-  {
-    "descriptors": [
+      },
       {
-        "defaultMessage": "!!!Cancel",
+        "defaultMessage": "!!!Service Proxies",
         "end": {
           "column": 3,
-          "line": 14
+          "line": 35
         },
-        "file": "src/components/subscription/SubscriptionPopup.js",
-        "id": "subscriptionPopup.buttonCancel",
+        "file": "src/components/ui/FeatureList.js",
+        "id": "pricing.features.serviceProxies",
         "start": {
-          "column": 16,
-          "line": 11
+          "column": 18,
+          "line": 32
         }
       },
       {
-        "defaultMessage": "!!!Done",
+        "defaultMessage": "!!!Team Management",
         "end": {
           "column": 3,
-          "line": 18
+          "line": 39
         },
-        "file": "src/components/subscription/SubscriptionPopup.js",
-        "id": "subscriptionPopup.buttonDone",
+        "file": "src/components/ui/FeatureList.js",
+        "id": "pricing.features.teamManagement",
         "start": {
-          "column": 14,
-          "line": 15
+          "column": 18,
+          "line": 36
+        }
+      },
+      {
+        "defaultMessage": "!!!No Waiting Screens",
+        "end": {
+          "column": 3,
+          "line": 43
+        },
+        "file": "src/components/ui/FeatureList.js",
+        "id": "pricing.features.appDelays",
+        "start": {
+          "column": 13,
+          "line": 40
+        }
+      },
+      {
+        "defaultMessage": "!!!Forever ad-free",
+        "end": {
+          "column": 3,
+          "line": 47
+        },
+        "file": "src/components/ui/FeatureList.js",
+        "id": "pricing.features.adFree",
+        "start": {
+          "column": 10,
+          "line": 44
         }
       }
     ],
-    "path": "src/components/subscription/SubscriptionPopup.json"
+    "path": "src/components/ui/FeatureList.json"
   },
   {
     "descriptors": [
@@ -3230,39 +3601,65 @@
         "defaultMessage": "!!!Please purchase license to skip waiting",
         "end": {
           "column": 3,
-          "line": 18
+          "line": 20
         },
         "file": "src/features/delayApp/Component.js",
         "id": "feature.delayApp.headline",
         "start": {
           "column": 12,
-          "line": 15
+          "line": 17
+        }
+      },
+      {
+        "defaultMessage": "!!!Get the free Franz Professional 14 day trial and skip the line",
+        "end": {
+          "column": 3,
+          "line": 24
+        },
+        "file": "src/features/delayApp/Component.js",
+        "id": "feature.delayApp.trial.headline",
+        "start": {
+          "column": 17,
+          "line": 21
         }
       },
       {
         "defaultMessage": "!!!Get a Franz Supporter License",
         "end": {
           "column": 3,
-          "line": 22
+          "line": 28
         },
         "file": "src/features/delayApp/Component.js",
-        "id": "feature.delayApp.action",
+        "id": "feature.delayApp.upgrade.action",
         "start": {
           "column": 10,
-          "line": 19
+          "line": 25
+        }
+      },
+      {
+        "defaultMessage": "!!!Yes, I want the free 14 day trial of Franz Professional",
+        "end": {
+          "column": 3,
+          "line": 32
+        },
+        "file": "src/features/delayApp/Component.js",
+        "id": "feature.delayApp.trial.action",
+        "start": {
+          "column": 15,
+          "line": 29
         }
       },
       {
         "defaultMessage": "!!!Franz will continue in {seconds} seconds.",
         "end": {
           "column": 3,
-          "line": 26
+          "line": 36
         },
         "file": "src/features/delayApp/Component.js",
         "id": "feature.delayApp.text",
         "start": {
           "column": 8,
-          "line": 23
+          "line": 33
         }
       }
     ],
@@ -3271,94 +3668,143 @@
   {
     "descriptors": [
       {
-        "defaultMessage": "!!!Franz is better together!",
+        "defaultMessage": "!!!Changes in Franz {version}",
+        "end": {
+          "column": 3,
+          "line": 23
+        },
+        "file": "src/features/serviceLimit/components/AnnouncementScreen.js",
+        "id": "feature.announcements.changelog.headline",
+        "start": {
+          "column": 12,
+          "line": 20
+        }
+      }
+    ],
+    "path": "src/features/serviceLimit/components/AnnouncementScreen.json"
+  },
+  {
+    "descriptors": [
+      {
+        "defaultMessage": "!!!You have added {amount} of {limit} services. Please upgrade your account to add more services.",
+        "end": {
+          "column": 3,
+          "line": 14
+        },
+        "file": "src/features/serviceLimit/components/LimitReachedInfobox.js",
+        "id": "feature.serviceLimit.limitReached",
+        "start": {
+          "column": 16,
+          "line": 11
+        }
+      },
+      {
+        "defaultMessage": "!!!Upgrade account",
         "end": {
           "column": 3,
           "line": 18
         },
+        "file": "src/features/serviceLimit/components/LimitReachedInfobox.js",
+        "id": "premiumFeature.button.upgradeAccount",
+        "start": {
+          "column": 10,
+          "line": 15
+        }
+      }
+    ],
+    "path": "src/features/serviceLimit/components/LimitReachedInfobox.json"
+  },
+  {
+    "descriptors": [
+      {
+        "defaultMessage": "!!!Franz is better together!",
+        "end": {
+          "column": 3,
+          "line": 19
+        },
         "file": "src/features/shareFranz/Component.js",
         "id": "feature.shareFranz.headline",
         "start": {
           "column": 12,
-          "line": 15
+          "line": 16
         }
       },
       {
         "defaultMessage": "!!!Tell your friends and colleagues how awesome Franz is and help us to spread the word.",
         "end": {
           "column": 3,
-          "line": 22
+          "line": 23
         },
         "file": "src/features/shareFranz/Component.js",
         "id": "feature.shareFranz.text",
         "start": {
           "column": 8,
-          "line": 19
+          "line": 20
         }
       },
       {
         "defaultMessage": "!!!Share as email",
         "end": {
           "column": 3,
-          "line": 26
+          "line": 27
         },
         "file": "src/features/shareFranz/Component.js",
         "id": "feature.shareFranz.action.email",
         "start": {
           "column": 16,
-          "line": 23
+          "line": 24
         }
       },
       {
         "defaultMessage": "!!!Share on Facebook",
         "end": {
           "column": 3,
-          "line": 30
+          "line": 31
         },
         "file": "src/features/shareFranz/Component.js",
         "id": "feature.shareFranz.action.facebook",
         "start": {
           "column": 19,
-          "line": 27
+          "line": 28
         }
       },
       {
         "defaultMessage": "!!!Share on Twitter",
         "end": {
           "column": 3,
-          "line": 34
+          "line": 35
         },
         "file": "src/features/shareFranz/Component.js",
         "id": "feature.shareFranz.action.twitter",
         "start": {
           "column": 18,
-          "line": 31
+          "line": 32
         }
       },
       {
         "defaultMessage": "!!! I've added {count} services to Franz! Get the free app for WhatsApp, Messenger, Slack, Skype and co at www.meetfranz.com",
         "end": {
           "column": 3,
-          "line": 38
+          "line": 39
         },
         "file": "src/features/shareFranz/Component.js",
         "id": "feature.shareFranz.shareText.email",
         "start": {
           "column": 18,
-          "line": 35
+          "line": 36
         }
       },
       {
         "defaultMessage": "!!! I've added {count} services to Franz! Get the free app for WhatsApp, Messenger, Slack, Skype and co at www.meetfranz.com /cc @FranzMessenger",
         "end": {
           "column": 3,
-          "line": 42
+          "line": 43
         },
         "file": "src/features/shareFranz/Component.js",
         "id": "feature.shareFranz.shareText.twitter",
         "start": {
           "column": 20,
-          "line": 39
+          "line": 40
         }
       }
     ],
@@ -3761,6 +4207,146 @@
   {
     "descriptors": [
       {
+        "defaultMessage": "!!!Franz Professional",
+        "end": {
+          "column": 3,
+          "line": 8
+        },
+        "file": "src/helpers/plan-helpers.js",
+        "id": "pricing.plan.pro",
+        "start": {
+          "column": 15,
+          "line": 5
+        }
+      },
+      {
+        "defaultMessage": "!!!Franz Personal",
+        "end": {
+          "column": 3,
+          "line": 12
+        },
+        "file": "src/helpers/plan-helpers.js",
+        "id": "pricing.plan.personal",
+        "start": {
+          "column": 20,
+          "line": 9
+        }
+      },
+      {
+        "defaultMessage": "!!!Franz Free",
+        "end": {
+          "column": 3,
+          "line": 16
+        },
+        "file": "src/helpers/plan-helpers.js",
+        "id": "pricing.plan.free",
+        "start": {
+          "column": 16,
+          "line": 13
+        }
+      },
+      {
+        "defaultMessage": "!!!Franz Premium",
+        "end": {
+          "column": 3,
+          "line": 20
+        },
+        "file": "src/helpers/plan-helpers.js",
+        "id": "pricing.plan.legacy",
+        "start": {
+          "column": 18,
+          "line": 17
+        }
+      }
+    ],
+    "path": "src/helpers/plan-helpers.json"
+  },
+  {
+    "descriptors": [
+      {
+        "defaultMessage": "!!!Franz Professional Yearly",
+        "end": {
+          "column": 3,
+          "line": 8
+        },
+        "file": "src/helpers/pricing-helpers.js",
+        "id": "pricing.plan.pro-yearly",
+        "start": {
+          "column": 22,
+          "line": 5
+        }
+      },
+      {
+        "defaultMessage": "!!!Franz Professional Monthly",
+        "end": {
+          "column": 3,
+          "line": 12
+        },
+        "file": "src/helpers/pricing-helpers.js",
+        "id": "pricing.plan.pro-monthly",
+        "start": {
+          "column": 23,
+          "line": 9
+        }
+      },
+      {
+        "defaultMessage": "!!!Franz Personal Yearly",
+        "end": {
+          "column": 3,
+          "line": 16
+        },
+        "file": "src/helpers/pricing-helpers.js",
+        "id": "pricing.plan.personal-yearly",
+        "start": {
+          "column": 27,
+          "line": 13
+        }
+      },
+      {
+        "defaultMessage": "!!!Franz Personal Monthly",
+        "end": {
+          "column": 3,
+          "line": 20
+        },
+        "file": "src/helpers/pricing-helpers.js",
+        "id": "pricing.plan.personal-monthly",
+        "start": {
+          "column": 28,
+          "line": 17
+        }
+      },
+      {
+        "defaultMessage": "!!!Franz Free",
+        "end": {
+          "column": 3,
+          "line": 24
+        },
+        "file": "src/helpers/pricing-helpers.js",
+        "id": "pricing.plan.free",
+        "start": {
+          "column": 16,
+          "line": 21
+        }
+      },
+      {
+        "defaultMessage": "!!!Franz Premium",
+        "end": {
+          "column": 3,
+          "line": 28
+        },
+        "file": "src/helpers/pricing-helpers.js",
+        "id": "pricing.plan.legacy",
+        "start": {
+          "column": 18,
+          "line": 25
+        }
+      }
+    ],
+    "path": "src/helpers/pricing-helpers.json"
+  },
+  {
+    "descriptors": [
+      {
         "defaultMessage": "!!!Field is required",
         "end": {
           "column": 3,
@@ -3917,702 +4503,793 @@
         "defaultMessage": "!!!Edit",
         "end": {
           "column": 3,
-          "line": 18
+          "line": 21
         },
         "file": "src/lib/Menu.js",
         "id": "menu.edit",
         "start": {
           "column": 8,
-          "line": 15
+          "line": 18
         }
       },
       {
         "defaultMessage": "!!!Undo",
         "end": {
           "column": 3,
-          "line": 22
+          "line": 25
         },
         "file": "src/lib/Menu.js",
         "id": "menu.edit.undo",
         "start": {
           "column": 8,
-          "line": 19
+          "line": 22
         }
       },
       {
         "defaultMessage": "!!!Redo",
         "end": {
           "column": 3,
-          "line": 26
+          "line": 29
         },
         "file": "src/lib/Menu.js",
         "id": "menu.edit.redo",
         "start": {
           "column": 8,
-          "line": 23
+          "line": 26
         }
       },
       {
         "defaultMessage": "!!!Cut",
         "end": {
           "column": 3,
-          "line": 30
+          "line": 33
         },
         "file": "src/lib/Menu.js",
         "id": "menu.edit.cut",
         "start": {
           "column": 7,
-          "line": 27
+          "line": 30
         }
       },
       {
         "defaultMessage": "!!!Copy",
         "end": {
           "column": 3,
-          "line": 34
+          "line": 37
         },
         "file": "src/lib/Menu.js",
         "id": "menu.edit.copy",
         "start": {
           "column": 8,
-          "line": 31
+          "line": 34
         }
       },
       {
         "defaultMessage": "!!!Paste",
         "end": {
           "column": 3,
-          "line": 38
+          "line": 41
         },
         "file": "src/lib/Menu.js",
         "id": "menu.edit.paste",
         "start": {
           "column": 9,
-          "line": 35
+          "line": 38
         }
       },
       {
         "defaultMessage": "!!!Paste And Match Style",
         "end": {
           "column": 3,
-          "line": 42
+          "line": 45
         },
         "file": "src/lib/Menu.js",
         "id": "menu.edit.pasteAndMatchStyle",
         "start": {
           "column": 22,
-          "line": 39
+          "line": 42
         }
       },
       {
         "defaultMessage": "!!!Delete",
         "end": {
           "column": 3,
-          "line": 46
+          "line": 49
         },
         "file": "src/lib/Menu.js",
         "id": "menu.edit.delete",
         "start": {
           "column": 10,
-          "line": 43
+          "line": 46
         }
       },
       {
         "defaultMessage": "!!!Select All",
         "end": {
           "column": 3,
-          "line": 50
+          "line": 53
         },
         "file": "src/lib/Menu.js",
         "id": "menu.edit.selectAll",
         "start": {
           "column": 13,
-          "line": 47
+          "line": 50
         }
       },
       {
         "defaultMessage": "!!!Speech",
         "end": {
           "column": 3,
-          "line": 54
+          "line": 57
         },
         "file": "src/lib/Menu.js",
         "id": "menu.edit.speech",
         "start": {
           "column": 10,
-          "line": 51
+          "line": 54
         }
       },
       {
         "defaultMessage": "!!!Start Speaking",
         "end": {
           "column": 3,
-          "line": 58
+          "line": 61
         },
         "file": "src/lib/Menu.js",
         "id": "menu.edit.startSpeaking",
         "start": {
           "column": 17,
-          "line": 55
+          "line": 58
         }
       },
       {
         "defaultMessage": "!!!Stop Speaking",
         "end": {
           "column": 3,
-          "line": 62
+          "line": 65
         },
         "file": "src/lib/Menu.js",
         "id": "menu.edit.stopSpeaking",
         "start": {
           "column": 16,
-          "line": 59
+          "line": 62
         }
       },
       {
         "defaultMessage": "!!!Start Dictation",
         "end": {
           "column": 3,
-          "line": 66
+          "line": 69
         },
         "file": "src/lib/Menu.js",
         "id": "menu.edit.startDictation",
         "start": {
           "column": 18,
-          "line": 63
+          "line": 66
         }
       },
       {
         "defaultMessage": "!!!Emoji & Symbols",
         "end": {
           "column": 3,
-          "line": 70
+          "line": 73
         },
         "file": "src/lib/Menu.js",
         "id": "menu.edit.emojiSymbols",
         "start": {
           "column": 16,
-          "line": 67
+          "line": 70
         }
       },
       {
         "defaultMessage": "!!!Actual Size",
         "end": {
           "column": 3,
-          "line": 74
+          "line": 77
         },
         "file": "src/lib/Menu.js",
         "id": "menu.view.resetZoom",
         "start": {
           "column": 13,
-          "line": 71
+          "line": 74
         }
       },
       {
         "defaultMessage": "!!!Zoom In",
         "end": {
           "column": 3,
-          "line": 78
+          "line": 81
         },
         "file": "src/lib/Menu.js",
         "id": "menu.view.zoomIn",
         "start": {
           "column": 10,
-          "line": 75
+          "line": 78
         }
       },
       {
         "defaultMessage": "!!!Zoom Out",
         "end": {
           "column": 3,
-          "line": 82
+          "line": 85
         },
         "file": "src/lib/Menu.js",
         "id": "menu.view.zoomOut",
         "start": {
           "column": 11,
-          "line": 79
+          "line": 82
         }
       },
       {
         "defaultMessage": "!!!Enter Full Screen",
         "end": {
           "column": 3,
-          "line": 86
+          "line": 89
         },
         "file": "src/lib/Menu.js",
         "id": "menu.view.enterFullScreen",
         "start": {
           "column": 19,
-          "line": 83
+          "line": 86
         }
       },
       {
         "defaultMessage": "!!!Exit Full Screen",
         "end": {
           "column": 3,
-          "line": 90
+          "line": 93
         },
         "file": "src/lib/Menu.js",
         "id": "menu.view.exitFullScreen",
         "start": {
           "column": 18,
-          "line": 87
+          "line": 90
         }
       },
       {
         "defaultMessage": "!!!Toggle Full Screen",
         "end": {
           "column": 3,
-          "line": 94
+          "line": 97
         },
         "file": "src/lib/Menu.js",
         "id": "menu.view.toggleFullScreen",
         "start": {
           "column": 20,
-          "line": 91
+          "line": 94
         }
       },
       {
         "defaultMessage": "!!!Toggle Developer Tools",
         "end": {
           "column": 3,
-          "line": 98
+          "line": 101
         },
         "file": "src/lib/Menu.js",
         "id": "menu.view.toggleDevTools",
         "start": {
           "column": 18,
-          "line": 95
+          "line": 98
         }
       },
       {
-        "defaultMessage": "!!!Toggle Service Developer Tools",
+        "defaultMessage": "!!!Toggle Todos Developer Tools",
         "end": {
           "column": 3,
+          "line": 105
+        },
+        "file": "src/lib/Menu.js",
+        "id": "menu.view.toggleTodosDevTools",
+        "start": {
+          "column": 23,
           "line": 102
+        }
+      },
+      {
+        "defaultMessage": "!!!Toggle Service Developer Tools",
+        "end": {
+          "column": 3,
+          "line": 109
         },
         "file": "src/lib/Menu.js",
         "id": "menu.view.toggleServiceDevTools",
         "start": {
           "column": 25,
-          "line": 99
+          "line": 106
         }
       },
       {
         "defaultMessage": "!!!Reload Service",
         "end": {
           "column": 3,
-          "line": 106
+          "line": 113
         },
         "file": "src/lib/Menu.js",
         "id": "menu.view.reloadService",
         "start": {
           "column": 17,
-          "line": 103
+          "line": 110
         }
       },
       {
         "defaultMessage": "!!!Reload Franz",
         "end": {
           "column": 3,
-          "line": 110
+          "line": 117
         },
         "file": "src/lib/Menu.js",
         "id": "menu.view.reloadFranz",
         "start": {
           "column": 15,
-          "line": 107
+          "line": 114
         }
       },
       {
         "defaultMessage": "!!!Minimize",
         "end": {
           "column": 3,
-          "line": 114
+          "line": 121
         },
         "file": "src/lib/Menu.js",
         "id": "menu.window.minimize",
         "start": {
           "column": 12,
-          "line": 111
+          "line": 118
         }
       },
       {
         "defaultMessage": "!!!Close",
         "end": {
           "column": 3,
-          "line": 118
+          "line": 125
         },
         "file": "src/lib/Menu.js",
         "id": "menu.window.close",
         "start": {
           "column": 9,
-          "line": 115
+          "line": 122
         }
       },
       {
         "defaultMessage": "!!!Learn More",
         "end": {
           "column": 3,
-          "line": 122
+          "line": 129
         },
         "file": "src/lib/Menu.js",
         "id": "menu.help.learnMore",
         "start": {
           "column": 13,
-          "line": 119
+          "line": 126
         }
       },
       {
         "defaultMessage": "!!!Changelog",
         "end": {
           "column": 3,
-          "line": 126
+          "line": 133
         },
         "file": "src/lib/Menu.js",
         "id": "menu.help.changelog",
         "start": {
           "column": 13,
-          "line": 123
+          "line": 130
         }
       },
       {
         "defaultMessage": "!!!Support",
         "end": {
           "column": 3,
-          "line": 130
+          "line": 137
         },
         "file": "src/lib/Menu.js",
         "id": "menu.help.support",
         "start": {
           "column": 11,
-          "line": 127
+          "line": 134
+        }
+      },
+      {
+        "defaultMessage": "!!!Copy Debug Information",
+        "end": {
+          "column": 3,
+          "line": 141
+        },
+        "file": "src/lib/Menu.js",
+        "id": "menu.help.debugInfo",
+        "start": {
+          "column": 13,
+          "line": 138
+        }
+      },
+      {
+        "defaultMessage": "!!!Franz Debug Information",
+        "end": {
+          "column": 3,
+          "line": 145
+        },
+        "file": "src/lib/Menu.js",
+        "id": "menu.help.debugInfoCopiedHeadline",
+        "start": {
+          "column": 27,
+          "line": 142
+        }
+      },
+      {
+        "defaultMessage": "!!!Your Debug Information has been copied to your clipboard.",
+        "end": {
+          "column": 3,
+          "line": 149
+        },
+        "file": "src/lib/Menu.js",
+        "id": "menu.help.debugInfoCopiedBody",
+        "start": {
+          "column": 23,
+          "line": 146
         }
       },
       {
         "defaultMessage": "!!!Terms of Service",
         "end": {
           "column": 3,
-          "line": 134
+          "line": 153
         },
         "file": "src/lib/Menu.js",
         "id": "menu.help.tos",
         "start": {
           "column": 7,
-          "line": 131
+          "line": 150
         }
       },
       {
         "defaultMessage": "!!!Privacy Statement",
         "end": {
           "column": 3,
-          "line": 138
+          "line": 157
         },
         "file": "src/lib/Menu.js",
         "id": "menu.help.privacy",
         "start": {
           "column": 11,
-          "line": 135
+          "line": 154
         }
       },
       {
         "defaultMessage": "!!!File",
         "end": {
           "column": 3,
-          "line": 142
+          "line": 161
         },
         "file": "src/lib/Menu.js",
         "id": "menu.file",
         "start": {
           "column": 8,
-          "line": 139
+          "line": 158
         }
       },
       {
         "defaultMessage": "!!!View",
         "end": {
           "column": 3,
-          "line": 146
+          "line": 165
         },
         "file": "src/lib/Menu.js",
         "id": "menu.view",
         "start": {
           "column": 8,
-          "line": 143
+          "line": 162
         }
       },
       {
         "defaultMessage": "!!!Services",
         "end": {
           "column": 3,
-          "line": 150
+          "line": 169
         },
         "file": "src/lib/Menu.js",
         "id": "menu.services",
         "start": {
           "column": 12,
-          "line": 147
+          "line": 166
         }
       },
       {
         "defaultMessage": "!!!Window",
         "end": {
           "column": 3,
-          "line": 154
+          "line": 173
         },
         "file": "src/lib/Menu.js",
         "id": "menu.window",
         "start": {
           "column": 10,
-          "line": 151
+          "line": 170
         }
       },
       {
         "defaultMessage": "!!!Help",
         "end": {
           "column": 3,
-          "line": 158
+          "line": 177
         },
         "file": "src/lib/Menu.js",
         "id": "menu.help",
         "start": {
           "column": 8,
-          "line": 155
+          "line": 174
         }
       },
       {
         "defaultMessage": "!!!About Franz",
         "end": {
           "column": 3,
-          "line": 162
+          "line": 181
         },
         "file": "src/lib/Menu.js",
         "id": "menu.app.about",
         "start": {
           "column": 9,
-          "line": 159
+          "line": 178
         }
       },
       {
         "defaultMessage": "!!!What's new?",
         "end": {
           "column": 3,
-          "line": 166
+          "line": 185
         },
         "file": "src/lib/Menu.js",
         "id": "menu.app.announcement",
         "start": {
           "column": 16,
-          "line": 163
+          "line": 182
         }
       },
       {
         "defaultMessage": "!!!Settings",
         "end": {
           "column": 3,
-          "line": 170
+          "line": 189
         },
         "file": "src/lib/Menu.js",
         "id": "menu.app.settings",
         "start": {
           "column": 12,
-          "line": 167
+          "line": 186
         }
       },
       {
         "defaultMessage": "!!!Check for updates",
         "end": {
           "column": 3,
-          "line": 174
+          "line": 193
         },
         "file": "src/lib/Menu.js",
         "id": "menu.app.checkForUpdates",
         "start": {
           "column": 19,
-          "line": 171
+          "line": 190
         }
       },
       {
         "defaultMessage": "!!!Hide",
         "end": {
           "column": 3,
-          "line": 178
+          "line": 197
         },
         "file": "src/lib/Menu.js",
         "id": "menu.app.hide",
         "start": {
           "column": 8,
-          "line": 175
+          "line": 194
         }
       },
       {
         "defaultMessage": "!!!Hide Others",
         "end": {
           "column": 3,
-          "line": 182
+          "line": 201
         },
         "file": "src/lib/Menu.js",
         "id": "menu.app.hideOthers",
         "start": {
           "column": 14,
-          "line": 179
+          "line": 198
         }
       },
       {
         "defaultMessage": "!!!Unhide",
         "end": {
           "column": 3,
-          "line": 186
+          "line": 205
         },
         "file": "src/lib/Menu.js",
         "id": "menu.app.unhide",
         "start": {
           "column": 10,
-          "line": 183
+          "line": 202
         }
       },
       {
         "defaultMessage": "!!!Quit",
         "end": {
           "column": 3,
-          "line": 190
+          "line": 209
         },
         "file": "src/lib/Menu.js",
         "id": "menu.app.quit",
         "start": {
           "column": 8,
-          "line": 187
+          "line": 206
         }
       },
       {
         "defaultMessage": "!!!Add New Service...",
         "end": {
           "column": 3,
-          "line": 194
+          "line": 213
         },
         "file": "src/lib/Menu.js",
         "id": "menu.services.addNewService",
         "start": {
           "column": 17,
-          "line": 191
+          "line": 210
         }
       },
       {
         "defaultMessage": "!!!Add New Workspace...",
         "end": {
           "column": 3,
-          "line": 198
+          "line": 217
         },
         "file": "src/lib/Menu.js",
         "id": "menu.workspaces.addNewWorkspace",
         "start": {
           "column": 19,
-          "line": 195
+          "line": 214
         }
       },
       {
         "defaultMessage": "!!!Open workspace drawer",
         "end": {
           "column": 3,
-          "line": 202
+          "line": 221
         },
         "file": "src/lib/Menu.js",
         "id": "menu.workspaces.openWorkspaceDrawer",
         "start": {
           "column": 23,
-          "line": 199
+          "line": 218
         }
       },
       {
         "defaultMessage": "!!!Close workspace drawer",
         "end": {
           "column": 3,
-          "line": 206
+          "line": 225
         },
         "file": "src/lib/Menu.js",
         "id": "menu.workspaces.closeWorkspaceDrawer",
         "start": {
           "column": 24,
-          "line": 203
+          "line": 222
         }
       },
       {
         "defaultMessage": "!!!Activate next service...",
         "end": {
           "column": 3,
-          "line": 210
+          "line": 229
         },
         "file": "src/lib/Menu.js",
         "id": "menu.services.setNextServiceActive",
         "start": {
           "column": 23,
-          "line": 207
+          "line": 226
         }
       },
       {
         "defaultMessage": "!!!Activate previous service...",
         "end": {
           "column": 3,
-          "line": 214
+          "line": 233
         },
         "file": "src/lib/Menu.js",
         "id": "menu.services.activatePreviousService",
         "start": {
           "column": 27,
-          "line": 211
+          "line": 230
         }
       },
       {
         "defaultMessage": "!!!Disable notifications & audio",
         "end": {
           "column": 3,
-          "line": 218
+          "line": 237
         },
         "file": "src/lib/Menu.js",
         "id": "sidebar.muteApp",
         "start": {
           "column": 11,
-          "line": 215
+          "line": 234
         }
       },
       {
         "defaultMessage": "!!!Enable notifications & audio",
         "end": {
           "column": 3,
-          "line": 222
+          "line": 241
         },
         "file": "src/lib/Menu.js",
         "id": "sidebar.unmuteApp",
         "start": {
           "column": 13,
-          "line": 219
+          "line": 238
         }
       },
       {
         "defaultMessage": "!!!Workspaces",
         "end": {
           "column": 3,
-          "line": 226
+          "line": 245
         },
         "file": "src/lib/Menu.js",
         "id": "menu.workspaces",
         "start": {
           "column": 14,
-          "line": 223
+          "line": 242
         }
       },
       {
         "defaultMessage": "!!!Default",
         "end": {
           "column": 3,
-          "line": 230
+          "line": 249
         },
         "file": "src/lib/Menu.js",
         "id": "menu.workspaces.defaultWorkspace",
         "start": {
           "column": 20,
-          "line": 227
+          "line": 246
+        }
+      },
+      {
+        "defaultMessage": "!!!Todos",
+        "end": {
+          "column": 3,
+          "line": 253
+        },
+        "file": "src/lib/Menu.js",
+        "id": "menu.todos",
+        "start": {
+          "column": 9,
+          "line": 250
+        }
+      },
+      {
+        "defaultMessage": "!!!Open Todos drawer",
+        "end": {
+          "column": 3,
+          "line": 257
+        },
+        "file": "src/lib/Menu.js",
+        "id": "menu.Todoss.openTodosDrawer",
+        "start": {
+          "column": 19,
+          "line": 254
+        }
+      },
+      {
+        "defaultMessage": "!!!Close Todos drawer",
+        "end": {
+          "column": 3,
+          "line": 261
+        },
+        "file": "src/lib/Menu.js",
+        "id": "menu.Todoss.closeTodosDrawer",
+        "start": {
+          "column": 20,
+          "line": 258
         }
       }
     ],
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index e2edbd596..727eb2884 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -2,9 +2,12 @@
   "app.errorHandler.action": "Reload",
   "app.errorHandler.headline": "Something went wrong",
   "feature.announcements.changelog.headline": "Changes in Franz {version}",
-  "feature.delayApp.action": "Get a Franz Supporter License",
   "feature.delayApp.headline": "Please purchase a Franz Supporter License to skip waiting",
   "feature.delayApp.text": "Franz will continue in {seconds} seconds.",
+  "feature.delayApp.trial.action": "Yes, I want the free 14 day trial of Franz Professional",
+  "feature.delayApp.trial.headline": "Get the free Franz Professional 14 day trial and skip the line",
+  "feature.delayApp.upgrade.action": "Get a Franz Supporter License",
+  "feature.serviceLimit.limitReached": "You have added {amount} out of {limit} services that are included in your plan. Please upgrade your account to add more services.",
   "feature.shareFranz.action.email": "Send as email",
   "feature.shareFranz.action.facebook": "Share on Facebook",
   "feature.shareFranz.action.twitter": "Share on Twitter",
@@ -27,6 +30,7 @@
   "infobar.buttonReloadServices": "Reload services",
   "infobar.requiredRequestsFailed": "Could not load services and user information",
   "infobar.servicesUpdated": "Your services have been updated.",
+  "infobar.trialActivated": "Your trial was successfully activated. Happy messaging!",
   "infobar.updateAvailable": "A new update for Franz is available.",
   "invite.email.label": "Email address",
   "invite.headline.friends": "Invite 3 of your friends or colleagues",
@@ -43,6 +47,8 @@
   "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 Franz",
   "menu.app.announcement": "What's new?",
   "menu.app.checkForUpdates": "Check for updates",
@@ -68,6 +74,9 @@
   "menu.file": "File",
   "menu.help": "Help",
   "menu.help.changelog": "Changelog",
+  "menu.help.debugInfo": "Copy Debug Information",
+  "menu.help.debugInfoCopiedBody": "Your Debug Information has been copied to your clipboard.",
+  "menu.help.debugInfoCopiedHeadline": "Franz Debug Information",
   "menu.help.learnMore": "Learn More",
   "menu.help.privacy": "Privacy Statement",
   "menu.help.support": "Support",
@@ -76,6 +85,7 @@
   "menu.services.activatePreviousService": "Activate previous service",
   "menu.services.addNewService": "Add New Service...",
   "menu.services.setNextServiceActive": "Activate next service",
+  "menu.todos": "Todos",
   "menu.view": "View",
   "menu.view.enterFullScreen": "Enter Full Screen",
   "menu.view.exitFullScreen": "Exit Full Screen",
@@ -85,6 +95,7 @@
   "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",
@@ -103,10 +114,33 @@
   "password.submit.label": "Submit",
   "password.successInfo": "Please check your email",
   "premiumFeature.button.upgradeAccount": "Upgrade account",
-  "pricing.headline": "Support Franz",
-  "pricing.link.skipPayment": "I don't want to support the development of Franz.",
-  "pricing.submit.label": "I want to support the development of Franz",
-  "pricing.support.label": "Select your support plan",
+  "pricing.features.adFree": "Forever ad-free",
+  "pricing.features.appDelays": "No Waiting Screens",
+  "pricing.features.customWebsites": "Add Custom Websites",
+  "pricing.features.onPremise": "On-premise & other Hosted Services",
+  "pricing.features.serviceProxies": "Service Proxies",
+  "pricing.features.spellchecker": "Spellchecker support",
+  "pricing.features.teamManagement": "Team Management",
+  "pricing.features.thirdPartyServices": "Install 3rd party services",
+  "pricing.features.unlimitedServices": "Add unlimited services",
+  "pricing.features.workspaces": "Workspaces",
+  "pricing.plan.free": "Franz Free",
+  "pricing.plan.legacy": "Franz Premium",
+  "pricing.plan.personal": "Franz Personal",
+  "pricing.plan.personal-monthly": "Franz Personal Monthly",
+  "pricing.plan.personal-yearly": "Franz Personal Yearly",
+  "pricing.plan.pro": "Franz Professional",
+  "pricing.plan.pro-monthly": "Franz Professional Monthly",
+  "pricing.plan.pro-yearly": "Franz Professional Yearly",
+  "pricing.trial.cta.accept": "Yes, upgrade my account to Franz Professional",
+  "pricing.trial.cta.skip": "Continue to Franz",
+  "pricing.trial.error": "Sorry, we could not activate your trial!",
+  "pricing.trial.features.headline": "Franz Professional includes:",
+  "pricing.trial.headline": "Franz Professional",
+  "pricing.trial.subheadline": "Your personal welcome offer:",
+  "pricing.trial.terms.automaticTrialEnd": "Your free trial ends automatically after 14 days",
+  "pricing.trial.terms.headline": "No strings attached",
+  "pricing.trial.terms.noCreditCard": "No credit card required",
   "service.crashHandler.action": "Reload {name}",
   "service.crashHandler.autoReload": "Trying to automatically restore {name} in {seconds} seconds",
   "service.crashHandler.headline": "Oh no!",
@@ -118,6 +152,11 @@
   "service.errorHandler.headline": "Oh no!",
   "service.errorHandler.message": "Error",
   "service.errorHandler.text": "{name} has failed to load.",
+  "service.restrictedHandler.action": "Upgrade Account",
+  "service.restrictedHandler.customUrl.headline": "Franz Professional Plan required",
+  "service.restrictedHandler.customUrl.text": "Please upgrade to the Franz Professional plan to use custom urls & self hosted services.",
+  "service.restrictedHandler.serviceLimit.headline": "You have reached your service limit.",
+  "service.restrictedHandler.serviceLimit.text": "Please upgrade your account to use more than {count} services.",
   "service.webviewLoader.loading": "Loading",
   "services.getStarted": "Get started",
   "services.welcome": "Welcome to Franz",
@@ -135,13 +174,19 @@
   "settings.account.headlinePassword": "Change password",
   "settings.account.headlineProfile": "Update profile",
   "settings.account.headlineSubscription": "Your subscription",
-  "settings.account.headlineUpgrade": "Upgrade your account & support Franz",
+  "settings.account.headlineTrialUpgrade": "Get the free 14 day Franz Professional Trial",
+  "settings.account.headlineUpgradeAccount": "Upgrade your account & get the full Franz experience",
   "settings.account.invoiceDownload": "Download",
   "settings.account.manageSubscription.label": "Manage your subscription",
   "settings.account.successInfo": "Your changes have been saved",
+  "settings.account.trial": "Free Trial",
+  "settings.account.trialEndsIn": "Your free trial ends in {duration}.",
+  "settings.account.trialUpdateBillingInfo": "Please update your billing info to continue using {license} after your trial period.",
   "settings.account.tryReloadServices": "Try again",
   "settings.account.tryReloadUserInfoRequest": "Try again",
+  "settings.account.upgradeToPro.label": "Upgrade to Franz Professional",
   "settings.account.userInfoRequestFailed": "Could not load user information",
+  "settings.account.yourLicense": "Your Franz License",
   "settings.app.buttonClearAllCache": "Clear cache",
   "settings.app.buttonInstallUpdate": "Restart & install update",
   "settings.app.buttonSearchForUpdate": "Check for updates",
@@ -182,7 +227,13 @@
   "settings.navigation.yourServices": "Your services",
   "settings.navigation.yourWorkspaces": "Your workspaces",
   "settings.recipes.all": "All services",
-  "settings.recipes.dev": "Development",
+  "settings.recipes.custom": "Custom Services",
+  "settings.recipes.customService.headline.communityRecipes": "Community Services",
+  "settings.recipes.customService.headline.customRecipes": "Custom Service 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.mostPopular": "Most popular",
@@ -274,7 +325,6 @@
   "sidebar.openWorkspaceDrawer": "Open workspace drawer",
   "sidebar.settings": "Settings",
   "sidebar.unmuteApp": "Enable notifications & audio",
-  "signup.company.label": "Company",
   "signup.email.label": "Email address",
   "signup.emailDuplicate": "A user with that email address already exists",
   "signup.firstname.label": "First Name",
@@ -286,20 +336,12 @@
   "signup.link.login": "Already have an account, sign in?",
   "signup.password.label": "Password",
   "signup.submit.label": "Create account",
-  "subscription.euTaxInfo": "EU residents: local sales tax may apply",
-  "subscription.features.ads": "No ads, ever!",
-  "subscription.features.comingSoon": "coming soon",
-  "subscription.features.noInterruptions": "No app delays & nagging to upgrade license",
-  "subscription.features.onpremise.mattermost": "Add on-premise/hosted services like Mattermost",
-  "subscription.features.proxy": "Proxy support for services",
-  "subscription.features.spellchecker": "Support for spellchecker",
-  "subscription.features.workspaces": "Organize your services in workspaces",
-  "subscription.includedFeatures": "Paid Franz Premium Supporter Account includes",
-  "subscription.paymentSessionError": "Could not initialize payment form",
-  "subscription.submit.label": "I want to support the development of Franz",
-  "subscription.type.free": "free",
-  "subscription.type.month": "month",
-  "subscription.type.year": "year",
+  "subscription.cta.activateTrial": "Yes, start the free Franz Professional trial",
+  "subscription.cta.allOptions": "See all options",
+  "subscription.cta.choosePlan": "Choose your plan",
+  "subscription.includedProFeatures": "The Franz Professional Plan includes:",
+  "subscription.teaser.includedFeatures": "Paid Franz Plans include:",
+  "subscription.teaser.intro": "Franz 5 comes with a wide range of new features to boost up your everyday communication - batteries included. Check out our new plans and find out which one suits you most!",
   "subscriptionPopup.buttonCancel": "Cancel",
   "subscriptionPopup.buttonDone": "Done",
   "tabs.item.deleteService": "Delete service",
diff --git a/src/i18n/messages/src/components/TrialActivationInfoBar.json b/src/i18n/messages/src/components/TrialActivationInfoBar.json
new file mode 100644
index 000000000..65dd964a6
--- /dev/null
+++ b/src/i18n/messages/src/components/TrialActivationInfoBar.json
@@ -0,0 +1,15 @@
+[
+  {
+    "id": "infobar.trialActivated",
+    "defaultMessage": "!!!Your trial was successfully activated. Happy messaging!",
+    "file": "src/components/TrialActivationInfoBar.js",
+    "start": {
+      "line": 11,
+      "column": 11
+    },
+    "end": {
+      "line": 14,
+      "column": 3
+    }
+  }
+]
\ No newline at end of file
diff --git a/src/i18n/messages/src/components/auth/Pricing.json b/src/i18n/messages/src/components/auth/Pricing.json
index f711a55b4..f15617ca5 100644
--- a/src/i18n/messages/src/components/auth/Pricing.json
+++ b/src/i18n/messages/src/components/auth/Pricing.json
@@ -1,53 +1,118 @@
 [
   {
-    "id": "pricing.headline",
-    "defaultMessage": "!!!Support Franz",
+    "id": "pricing.trial.headline",
+    "defaultMessage": "!!!Franz Professional",
     "file": "src/components/auth/Pricing.js",
     "start": {
-      "line": 13,
+      "line": 15,
       "column": 12
     },
     "end": {
-      "line": 16,
+      "line": 18,
       "column": 3
     }
   },
   {
-    "id": "pricing.support.label",
-    "defaultMessage": "!!!Select your support plan",
+    "id": "pricing.trial.subheadline",
+    "defaultMessage": "!!!Your personal welcome offer:",
     "file": "src/components/auth/Pricing.js",
     "start": {
-      "line": 17,
-      "column": 23
+      "line": 19,
+      "column": 17
     },
     "end": {
-      "line": 20,
+      "line": 22,
       "column": 3
     }
   },
   {
-    "id": "pricing.submit.label",
-    "defaultMessage": "!!!Support the development of Franz",
+    "id": "pricing.trial.terms.headline",
+    "defaultMessage": "!!!No strings attached",
     "file": "src/components/auth/Pricing.js",
     "start": {
-      "line": 21,
+      "line": 23,
+      "column": 29
+    },
+    "end": {
+      "line": 26,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.trial.terms.noCreditCard",
+    "defaultMessage": "!!!No credit card required",
+    "file": "src/components/auth/Pricing.js",
+    "start": {
+      "line": 27,
+      "column": 16
+    },
+    "end": {
+      "line": 30,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.trial.terms.automaticTrialEnd",
+    "defaultMessage": "!!!Your free trial ends automatically after 14 days",
+    "file": "src/components/auth/Pricing.js",
+    "start": {
+      "line": 31,
       "column": 21
     },
     "end": {
-      "line": 24,
+      "line": 34,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.trial.error",
+    "defaultMessage": "!!!Sorry, we could not activate your trial!",
+    "file": "src/components/auth/Pricing.js",
+    "start": {
+      "line": 35,
+      "column": 19
+    },
+    "end": {
+      "line": 38,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.trial.cta.accept",
+    "defaultMessage": "!!!Yes, upgrade my account to Franz Professional",
+    "file": "src/components/auth/Pricing.js",
+    "start": {
+      "line": 39,
+      "column": 13
+    },
+    "end": {
+      "line": 42,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.trial.cta.skip",
+    "defaultMessage": "!!!Continue to Franz",
+    "file": "src/components/auth/Pricing.js",
+    "start": {
+      "line": 43,
+      "column": 11
+    },
+    "end": {
+      "line": 46,
       "column": 3
     }
   },
   {
-    "id": "pricing.link.skipPayment",
-    "defaultMessage": "!!!I don't want to support the development of Franz.",
+    "id": "pricing.trial.features.headline",
+    "defaultMessage": "!!!Franz Professional includes:",
     "file": "src/components/auth/Pricing.js",
     "start": {
-      "line": 25,
-      "column": 15
+      "line": 47,
+      "column": 20
     },
     "end": {
-      "line": 28,
+      "line": 50,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/components/auth/Signup.json b/src/i18n/messages/src/components/auth/Signup.json
index a09745048..2ea71e5ff 100644
--- a/src/i18n/messages/src/components/auth/Signup.json
+++ b/src/i18n/messages/src/components/auth/Signup.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Sign up",
     "file": "src/components/auth/Signup.js",
     "start": {
-      "line": 18,
+      "line": 17,
       "column": 12
     },
     "end": {
-      "line": 21,
+      "line": 20,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!Firstname",
     "file": "src/components/auth/Signup.js",
     "start": {
-      "line": 22,
+      "line": 21,
       "column": 18
     },
     "end": {
-      "line": 25,
+      "line": 24,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!Lastname",
     "file": "src/components/auth/Signup.js",
     "start": {
-      "line": 26,
+      "line": 25,
       "column": 17
     },
     "end": {
-      "line": 29,
+      "line": 28,
       "column": 3
     }
   },
@@ -43,24 +43,11 @@
     "defaultMessage": "!!!Email address",
     "file": "src/components/auth/Signup.js",
     "start": {
-      "line": 30,
+      "line": 29,
       "column": 14
     },
     "end": {
-      "line": 33,
-      "column": 3
-    }
-  },
-  {
-    "id": "signup.company.label",
-    "defaultMessage": "!!!Company",
-    "file": "src/components/auth/Signup.js",
-    "start": {
-      "line": 34,
-      "column": 16
-    },
-    "end": {
-      "line": 37,
+      "line": 32,
       "column": 3
     }
   },
@@ -69,11 +56,11 @@
     "defaultMessage": "!!!Password",
     "file": "src/components/auth/Signup.js",
     "start": {
-      "line": 38,
+      "line": 37,
       "column": 17
     },
     "end": {
-      "line": 41,
+      "line": 40,
       "column": 3
     }
   },
@@ -82,11 +69,11 @@
     "defaultMessage": "!!!By creating a Franz account you accept the",
     "file": "src/components/auth/Signup.js",
     "start": {
-      "line": 42,
+      "line": 41,
       "column": 13
     },
     "end": {
-      "line": 45,
+      "line": 44,
       "column": 3
     }
   },
@@ -95,11 +82,11 @@
     "defaultMessage": "!!!Terms of service",
     "file": "src/components/auth/Signup.js",
     "start": {
-      "line": 46,
+      "line": 45,
       "column": 9
     },
     "end": {
-      "line": 49,
+      "line": 48,
       "column": 3
     }
   },
@@ -108,11 +95,11 @@
     "defaultMessage": "!!!Privacy Statement",
     "file": "src/components/auth/Signup.js",
     "start": {
-      "line": 50,
+      "line": 49,
       "column": 11
     },
     "end": {
-      "line": 53,
+      "line": 52,
       "column": 3
     }
   },
@@ -121,11 +108,11 @@
     "defaultMessage": "!!!Create account",
     "file": "src/components/auth/Signup.js",
     "start": {
-      "line": 54,
+      "line": 53,
       "column": 21
     },
     "end": {
-      "line": 57,
+      "line": 56,
       "column": 3
     }
   },
@@ -134,11 +121,11 @@
     "defaultMessage": "!!!Already have an account, sign in?",
     "file": "src/components/auth/Signup.js",
     "start": {
-      "line": 58,
+      "line": 57,
       "column": 13
     },
     "end": {
-      "line": 61,
+      "line": 60,
       "column": 3
     }
   },
@@ -147,11 +134,11 @@
     "defaultMessage": "!!!A user with that email address already exists",
     "file": "src/components/auth/Signup.js",
     "start": {
-      "line": 62,
+      "line": 61,
       "column": 18
     },
     "end": {
-      "line": 65,
+      "line": 64,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/components/layout/AppLayout.json b/src/i18n/messages/src/components/layout/AppLayout.json
index 190c5dff7..44cf4fab9 100644
--- a/src/i18n/messages/src/components/layout/AppLayout.json
+++ b/src/i18n/messages/src/components/layout/AppLayout.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Your services have been updated.",
     "file": "src/components/layout/AppLayout.js",
     "start": {
-      "line": 26,
+      "line": 28,
       "column": 19
     },
     "end": {
-      "line": 29,
+      "line": 31,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!Reload services",
     "file": "src/components/layout/AppLayout.js",
     "start": {
-      "line": 30,
+      "line": 32,
       "column": 24
     },
     "end": {
-      "line": 33,
+      "line": 35,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!Could not load services and user information",
     "file": "src/components/layout/AppLayout.js",
     "start": {
-      "line": 34,
+      "line": 36,
       "column": 26
     },
     "end": {
-      "line": 37,
+      "line": 39,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/components/services/content/ServiceRestricted.json b/src/i18n/messages/src/components/services/content/ServiceRestricted.json
new file mode 100644
index 000000000..c1984afe3
--- /dev/null
+++ b/src/i18n/messages/src/components/services/content/ServiceRestricted.json
@@ -0,0 +1,67 @@
+[
+  {
+    "id": "service.restrictedHandler.serviceLimit.headline",
+    "defaultMessage": "!!!You have reached your service limit.",
+    "file": "src/components/services/content/ServiceRestricted.js",
+    "start": {
+      "line": 11,
+      "column": 24
+    },
+    "end": {
+      "line": 14,
+      "column": 3
+    }
+  },
+  {
+    "id": "service.restrictedHandler.serviceLimit.text",
+    "defaultMessage": "!!!Please upgrade your account to use more than {count} services.",
+    "file": "src/components/services/content/ServiceRestricted.js",
+    "start": {
+      "line": 15,
+      "column": 20
+    },
+    "end": {
+      "line": 18,
+      "column": 3
+    }
+  },
+  {
+    "id": "service.restrictedHandler.customUrl.headline",
+    "defaultMessage": "!!!Franz Professional Plan required",
+    "file": "src/components/services/content/ServiceRestricted.js",
+    "start": {
+      "line": 19,
+      "column": 21
+    },
+    "end": {
+      "line": 22,
+      "column": 3
+    }
+  },
+  {
+    "id": "service.restrictedHandler.customUrl.text",
+    "defaultMessage": "!!!Please upgrade to the Franz Professional plan to use custom urls & self hosted services.",
+    "file": "src/components/services/content/ServiceRestricted.js",
+    "start": {
+      "line": 23,
+      "column": 17
+    },
+    "end": {
+      "line": 26,
+      "column": 3
+    }
+  },
+  {
+    "id": "service.restrictedHandler.action",
+    "defaultMessage": "!!!Upgrade Account",
+    "file": "src/components/services/content/ServiceRestricted.js",
+    "start": {
+      "line": 27,
+      "column": 10
+    },
+    "end": {
+      "line": 30,
+      "column": 3
+    }
+  }
+]
\ No newline at end of file
diff --git a/src/i18n/messages/src/components/services/content/Services.json b/src/i18n/messages/src/components/services/content/Services.json
index 884ab0c90..eb466c0ac 100644
--- a/src/i18n/messages/src/components/services/content/Services.json
+++ b/src/i18n/messages/src/components/services/content/Services.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Welcome to Franz",
     "file": "src/components/services/content/Services.js",
     "start": {
-      "line": 11,
+      "line": 14,
       "column": 11
     },
     "end": {
-      "line": 14,
+      "line": 17,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!Get started",
     "file": "src/components/services/content/Services.js",
     "start": {
-      "line": 15,
+      "line": 18,
       "column": 14
     },
     "end": {
-      "line": 18,
+      "line": 21,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/components/settings/account/AccountDashboard.json b/src/i18n/messages/src/components/settings/account/AccountDashboard.json
index 4969db910..06d53e41d 100644
--- a/src/i18n/messages/src/components/settings/account/AccountDashboard.json
+++ b/src/i18n/messages/src/components/settings/account/AccountDashboard.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Account",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 14,
+      "line": 18,
       "column": 12
     },
     "end": {
-      "line": 17,
+      "line": 21,
       "column": 3
     }
   },
@@ -17,21 +17,8 @@
     "defaultMessage": "!!!Your Subscription",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 18,
-      "column": 24
-    },
-    "end": {
-      "line": 21,
-      "column": 3
-    }
-  },
-  {
-    "id": "settings.account.headlineUpgrade",
-    "defaultMessage": "!!!Upgrade your Account",
-    "file": "src/components/settings/account/AccountDashboard.js",
-    "start": {
       "line": 22,
-      "column": 19
+      "column": 24
     },
     "end": {
       "line": 25,
@@ -65,15 +52,28 @@
     }
   },
   {
+    "id": "settings.account.upgradeToPro.label",
+    "defaultMessage": "!!!Upgrade to Franz Professional",
+    "file": "src/components/settings/account/AccountDashboard.js",
+    "start": {
+      "line": 34,
+      "column": 23
+    },
+    "end": {
+      "line": 37,
+      "column": 3
+    }
+  },
+  {
     "id": "settings.account.accountType.basic",
     "defaultMessage": "!!!Basic Account",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 34,
+      "line": 38,
       "column": 20
     },
     "end": {
-      "line": 37,
+      "line": 41,
       "column": 3
     }
   },
@@ -82,11 +82,11 @@
     "defaultMessage": "!!!Premium Supporter Account",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 38,
+      "line": 42,
       "column": 22
     },
     "end": {
-      "line": 41,
+      "line": 45,
       "column": 3
     }
   },
@@ -95,11 +95,11 @@
     "defaultMessage": "!!!Edit Account",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 42,
+      "line": 46,
       "column": 21
     },
     "end": {
-      "line": 45,
+      "line": 49,
       "column": 3
     }
   },
@@ -108,11 +108,11 @@
     "defaultMessage": "!!Invoices",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 46,
+      "line": 50,
       "column": 18
     },
     "end": {
-      "line": 49,
+      "line": 53,
       "column": 3
     }
   },
@@ -121,11 +121,11 @@
     "defaultMessage": "!!!Download",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 50,
+      "line": 54,
       "column": 19
     },
     "end": {
-      "line": 53,
+      "line": 57,
       "column": 3
     }
   },
@@ -134,11 +134,11 @@
     "defaultMessage": "!!!Could not load user information",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 54,
+      "line": 58,
       "column": 25
     },
     "end": {
-      "line": 57,
+      "line": 61,
       "column": 3
     }
   },
@@ -147,11 +147,11 @@
     "defaultMessage": "!!!Try again",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 58,
+      "line": 62,
       "column": 28
     },
     "end": {
-      "line": 61,
+      "line": 65,
       "column": 3
     }
   },
@@ -160,11 +160,11 @@
     "defaultMessage": "!!!Delete account",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 62,
+      "line": 66,
       "column": 17
     },
     "end": {
-      "line": 65,
+      "line": 69,
       "column": 3
     }
   },
@@ -173,11 +173,11 @@
     "defaultMessage": "!!!If you don't need your Franz account any longer, you can delete your account and all related data here.",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 66,
+      "line": 70,
       "column": 14
     },
     "end": {
-      "line": 69,
+      "line": 73,
       "column": 3
     }
   },
@@ -186,11 +186,63 @@
     "defaultMessage": "!!!You have received an email with a link to confirm your account deletion. Your account and data cannot be restored!",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 70,
+      "line": 74,
       "column": 19
     },
     "end": {
-      "line": 73,
+      "line": 77,
+      "column": 3
+    }
+  },
+  {
+    "id": "settings.account.trial",
+    "defaultMessage": "!!!Free Trial",
+    "file": "src/components/settings/account/AccountDashboard.js",
+    "start": {
+      "line": 78,
+      "column": 9
+    },
+    "end": {
+      "line": 81,
+      "column": 3
+    }
+  },
+  {
+    "id": "settings.account.yourLicense",
+    "defaultMessage": "!!!Your Franz License:",
+    "file": "src/components/settings/account/AccountDashboard.js",
+    "start": {
+      "line": 82,
+      "column": 15
+    },
+    "end": {
+      "line": 85,
+      "column": 3
+    }
+  },
+  {
+    "id": "settings.account.trialEndsIn",
+    "defaultMessage": "!!!Your free trial ends in {duration}.",
+    "file": "src/components/settings/account/AccountDashboard.js",
+    "start": {
+      "line": 86,
+      "column": 15
+    },
+    "end": {
+      "line": 89,
+      "column": 3
+    }
+  },
+  {
+    "id": "settings.account.trialUpdateBillingInfo",
+    "defaultMessage": "!!!Please update your billing info to continue using {license} after your trial period.",
+    "file": "src/components/settings/account/AccountDashboard.js",
+    "start": {
+      "line": 90,
+      "column": 33
+    },
+    "end": {
+      "line": 93,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/components/settings/navigation/SettingsNavigation.json b/src/i18n/messages/src/components/settings/navigation/SettingsNavigation.json
index 70a989211..7dfb3ce04 100644
--- a/src/i18n/messages/src/components/settings/navigation/SettingsNavigation.json
+++ b/src/i18n/messages/src/components/settings/navigation/SettingsNavigation.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Available services",
     "file": "src/components/settings/navigation/SettingsNavigation.js",
     "start": {
-      "line": 13,
+      "line": 14,
       "column": 21
     },
     "end": {
-      "line": 16,
+      "line": 17,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!Your services",
     "file": "src/components/settings/navigation/SettingsNavigation.js",
     "start": {
-      "line": 17,
+      "line": 18,
       "column": 16
     },
     "end": {
-      "line": 20,
+      "line": 21,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!Your workspaces",
     "file": "src/components/settings/navigation/SettingsNavigation.js",
     "start": {
-      "line": 21,
+      "line": 22,
       "column": 18
     },
     "end": {
-      "line": 24,
+      "line": 25,
       "column": 3
     }
   },
@@ -43,11 +43,11 @@
     "defaultMessage": "!!!Account",
     "file": "src/components/settings/navigation/SettingsNavigation.js",
     "start": {
-      "line": 25,
+      "line": 26,
       "column": 11
     },
     "end": {
-      "line": 28,
+      "line": 29,
       "column": 3
     }
   },
@@ -56,11 +56,11 @@
     "defaultMessage": "!!!Manage Team",
     "file": "src/components/settings/navigation/SettingsNavigation.js",
     "start": {
-      "line": 29,
+      "line": 30,
       "column": 8
     },
     "end": {
-      "line": 32,
+      "line": 33,
       "column": 3
     }
   },
@@ -69,11 +69,11 @@
     "defaultMessage": "!!!Settings",
     "file": "src/components/settings/navigation/SettingsNavigation.js",
     "start": {
-      "line": 33,
+      "line": 34,
       "column": 12
     },
     "end": {
-      "line": 36,
+      "line": 37,
       "column": 3
     }
   },
@@ -82,11 +82,11 @@
     "defaultMessage": "!!!Invite Friends",
     "file": "src/components/settings/navigation/SettingsNavigation.js",
     "start": {
-      "line": 37,
+      "line": 38,
       "column": 17
     },
     "end": {
-      "line": 40,
+      "line": 41,
       "column": 3
     }
   },
@@ -95,11 +95,11 @@
     "defaultMessage": "!!!Logout",
     "file": "src/components/settings/navigation/SettingsNavigation.js",
     "start": {
-      "line": 41,
+      "line": 42,
       "column": 10
     },
     "end": {
-      "line": 44,
+      "line": 45,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/components/settings/recipes/RecipesDashboard.json b/src/i18n/messages/src/components/settings/recipes/RecipesDashboard.json
index 7d9ed3283..8afaaed50 100644
--- a/src/i18n/messages/src/components/settings/recipes/RecipesDashboard.json
+++ b/src/i18n/messages/src/components/settings/recipes/RecipesDashboard.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Available Services",
     "file": "src/components/settings/recipes/RecipesDashboard.js",
     "start": {
-      "line": 15,
+      "line": 20,
       "column": 12
     },
     "end": {
-      "line": 18,
+      "line": 23,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!Search service",
     "file": "src/components/settings/recipes/RecipesDashboard.js",
     "start": {
-      "line": 19,
+      "line": 24,
       "column": 17
     },
     "end": {
-      "line": 22,
+      "line": 27,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!Most popular",
     "file": "src/components/settings/recipes/RecipesDashboard.js",
     "start": {
-      "line": 23,
+      "line": 28,
       "column": 22
     },
     "end": {
-      "line": 26,
+      "line": 31,
       "column": 3
     }
   },
@@ -43,24 +43,24 @@
     "defaultMessage": "!!!All services",
     "file": "src/components/settings/recipes/RecipesDashboard.js",
     "start": {
-      "line": 27,
+      "line": 32,
       "column": 14
     },
     "end": {
-      "line": 30,
+      "line": 35,
       "column": 3
     }
   },
   {
-    "id": "settings.recipes.dev",
-    "defaultMessage": "!!!Development",
+    "id": "settings.recipes.custom",
+    "defaultMessage": "!!!Custom Services",
     "file": "src/components/settings/recipes/RecipesDashboard.js",
     "start": {
-      "line": 31,
-      "column": 14
+      "line": 36,
+      "column": 17
     },
     "end": {
-      "line": 34,
+      "line": 39,
       "column": 3
     }
   },
@@ -69,11 +69,11 @@
     "defaultMessage": "!!!Sorry, but no service matched your search term.",
     "file": "src/components/settings/recipes/RecipesDashboard.js",
     "start": {
-      "line": 35,
+      "line": 40,
       "column": 16
     },
     "end": {
-      "line": 38,
+      "line": 43,
       "column": 3
     }
   },
@@ -82,11 +82,11 @@
     "defaultMessage": "!!!Service successfully added",
     "file": "src/components/settings/recipes/RecipesDashboard.js",
     "start": {
-      "line": 39,
+      "line": 44,
       "column": 31
     },
     "end": {
-      "line": 42,
+      "line": 47,
       "column": 3
     }
   },
@@ -95,11 +95,89 @@
     "defaultMessage": "!!!Missing a service?",
     "file": "src/components/settings/recipes/RecipesDashboard.js",
     "start": {
-      "line": 43,
+      "line": 48,
       "column": 18
     },
     "end": {
-      "line": 46,
+      "line": 51,
+      "column": 3
+    }
+  },
+  {
+    "id": "settings.recipes.customService.intro",
+    "defaultMessage": "!!!To add a custom service, copy the recipe folder into:",
+    "file": "src/components/settings/recipes/RecipesDashboard.js",
+    "start": {
+      "line": 52,
+      "column": 21
+    },
+    "end": {
+      "line": 55,
+      "column": 3
+    }
+  },
+  {
+    "id": "settings.recipes.customService.openFolder",
+    "defaultMessage": "!!!Open directory",
+    "file": "src/components/settings/recipes/RecipesDashboard.js",
+    "start": {
+      "line": 56,
+      "column": 14
+    },
+    "end": {
+      "line": 59,
+      "column": 3
+    }
+  },
+  {
+    "id": "settings.recipes.customService.openDevDocs",
+    "defaultMessage": "!!!Developer Documentation",
+    "file": "src/components/settings/recipes/RecipesDashboard.js",
+    "start": {
+      "line": 60,
+      "column": 15
+    },
+    "end": {
+      "line": 63,
+      "column": 3
+    }
+  },
+  {
+    "id": "settings.recipes.customService.headline.customRecipes",
+    "defaultMessage": "!!!Custom Service Recipes",
+    "file": "src/components/settings/recipes/RecipesDashboard.js",
+    "start": {
+      "line": 64,
+      "column": 25
+    },
+    "end": {
+      "line": 67,
+      "column": 3
+    }
+  },
+  {
+    "id": "settings.recipes.customService.headline.communityRecipes",
+    "defaultMessage": "!!!Community Services",
+    "file": "src/components/settings/recipes/RecipesDashboard.js",
+    "start": {
+      "line": 68,
+      "column": 28
+    },
+    "end": {
+      "line": 71,
+      "column": 3
+    }
+  },
+  {
+    "id": "settings.recipes.customService.headline.devRecipes",
+    "defaultMessage": "!!!Your Development Service Recipes",
+    "file": "src/components/settings/recipes/RecipesDashboard.js",
+    "start": {
+      "line": 72,
+      "column": 22
+    },
+    "end": {
+      "line": 75,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/components/settings/services/EditServiceForm.json b/src/i18n/messages/src/components/settings/services/EditServiceForm.json
index 42b741b7a..e66db807d 100644
--- a/src/i18n/messages/src/components/settings/services/EditServiceForm.json
+++ b/src/i18n/messages/src/components/settings/services/EditServiceForm.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Save service",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 22,
+      "line": 24,
       "column": 15
     },
     "end": {
-      "line": 25,
+      "line": 27,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!Delete Service",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 26,
+      "line": 28,
       "column": 17
     },
     "end": {
-      "line": 29,
+      "line": 31,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!Available services",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 30,
+      "line": 32,
       "column": 21
     },
     "end": {
-      "line": 33,
+      "line": 35,
       "column": 3
     }
   },
@@ -43,11 +43,11 @@
     "defaultMessage": "!!!Your services",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 34,
+      "line": 36,
       "column": 16
     },
     "end": {
-      "line": 37,
+      "line": 39,
       "column": 3
     }
   },
@@ -56,11 +56,11 @@
     "defaultMessage": "!!!Add {name}",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 38,
+      "line": 40,
       "column": 22
     },
     "end": {
-      "line": 41,
+      "line": 43,
       "column": 3
     }
   },
@@ -69,11 +69,11 @@
     "defaultMessage": "!!!Edit {name}",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 42,
+      "line": 44,
       "column": 23
     },
     "end": {
-      "line": 45,
+      "line": 47,
       "column": 3
     }
   },
@@ -82,11 +82,11 @@
     "defaultMessage": "!!!Hosted",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 46,
+      "line": 48,
       "column": 13
     },
     "end": {
-      "line": 49,
+      "line": 51,
       "column": 3
     }
   },
@@ -95,11 +95,11 @@
     "defaultMessage": "!!!Self hosted ⭐️",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 50,
+      "line": 52,
       "column": 16
     },
     "end": {
-      "line": 53,
+      "line": 55,
       "column": 3
     }
   },
@@ -108,11 +108,11 @@
     "defaultMessage": "!!!Use the hosted {name} service.",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 54,
+      "line": 56,
       "column": 20
     },
     "end": {
-      "line": 57,
+      "line": 59,
       "column": 3
     }
   },
@@ -121,11 +121,11 @@
     "defaultMessage": "!!!Could not validate custom {name} server.",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 58,
+      "line": 60,
       "column": 28
     },
     "end": {
-      "line": 61,
+      "line": 63,
       "column": 3
     }
   },
@@ -134,11 +134,11 @@
     "defaultMessage": "!!!To add self hosted services, you need a Franz Premium Supporter Account.",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 62,
+      "line": 64,
       "column": 24
     },
     "end": {
-      "line": 65,
+      "line": 67,
       "column": 3
     }
   },
@@ -147,11 +147,11 @@
     "defaultMessage": "!!!Upgrade your account",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 66,
+      "line": 68,
       "column": 27
     },
     "end": {
-      "line": 69,
+      "line": 71,
       "column": 3
     }
   },
@@ -160,11 +160,11 @@
     "defaultMessage": "!!!You will be notified about all new messages in a channel, not just @username, @channel, @here, ...",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 70,
+      "line": 72,
       "column": 23
     },
     "end": {
-      "line": 73,
+      "line": 75,
       "column": 3
     }
   },
@@ -173,11 +173,11 @@
     "defaultMessage": "!!!When disabled, all notification sounds and audio playback are muted",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 74,
+      "line": 76,
       "column": 15
     },
     "end": {
-      "line": 77,
+      "line": 79,
       "column": 3
     }
   },
@@ -186,11 +186,11 @@
     "defaultMessage": "!!!Notifications",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 78,
+      "line": 80,
       "column": 25
     },
     "end": {
-      "line": 81,
+      "line": 83,
       "column": 3
     }
   },
@@ -199,11 +199,11 @@
     "defaultMessage": "!!!Unread message badges",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 82,
+      "line": 84,
       "column": 18
     },
     "end": {
-      "line": 85,
+      "line": 87,
       "column": 3
     }
   },
@@ -212,11 +212,11 @@
     "defaultMessage": "!!!General",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 86,
+      "line": 88,
       "column": 19
     },
     "end": {
-      "line": 89,
+      "line": 91,
       "column": 3
     }
   },
@@ -225,11 +225,11 @@
     "defaultMessage": "!!!Delete",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 90,
+      "line": 92,
       "column": 14
     },
     "end": {
-      "line": 93,
+      "line": 95,
       "column": 3
     }
   },
@@ -238,11 +238,11 @@
     "defaultMessage": "!!!Drop your image, or click here",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 94,
+      "line": 96,
       "column": 14
     },
     "end": {
-      "line": 97,
+      "line": 99,
       "column": 3
     }
   },
@@ -251,11 +251,11 @@
     "defaultMessage": "!!!HTTP/HTTPS Proxy Settings",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 98,
+      "line": 100,
       "column": 17
     },
     "end": {
-      "line": 101,
+      "line": 103,
       "column": 3
     }
   },
@@ -264,11 +264,11 @@
     "defaultMessage": "!!!Please restart Franz after changing proxy Settings.",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 102,
+      "line": 104,
       "column": 20
     },
     "end": {
-      "line": 105,
+      "line": 107,
       "column": 3
     }
   },
@@ -277,11 +277,11 @@
     "defaultMessage": "!!!Proxy settings will not be synchronized with the Franz servers.",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 106,
+      "line": 108,
       "column": 13
     },
     "end": {
-      "line": 109,
+      "line": 111,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/components/settings/services/ServicesDashboard.json b/src/i18n/messages/src/components/settings/services/ServicesDashboard.json
index 3803c6512..fa661ea2f 100644
--- a/src/i18n/messages/src/components/settings/services/ServicesDashboard.json
+++ b/src/i18n/messages/src/components/settings/services/ServicesDashboard.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Your services",
     "file": "src/components/settings/services/ServicesDashboard.js",
     "start": {
-      "line": 14,
+      "line": 15,
       "column": 12
     },
     "end": {
-      "line": 17,
+      "line": 18,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!Search service",
     "file": "src/components/settings/services/ServicesDashboard.js",
     "start": {
-      "line": 18,
+      "line": 19,
       "column": 17
     },
     "end": {
-      "line": 21,
+      "line": 22,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!You haven't added any services yet.",
     "file": "src/components/settings/services/ServicesDashboard.js",
     "start": {
-      "line": 22,
+      "line": 23,
       "column": 19
     },
     "end": {
-      "line": 25,
+      "line": 26,
       "column": 3
     }
   },
@@ -43,11 +43,11 @@
     "defaultMessage": "!!!Sorry, but no service matched your search term.",
     "file": "src/components/settings/services/ServicesDashboard.js",
     "start": {
-      "line": 26,
+      "line": 27,
       "column": 18
     },
     "end": {
-      "line": 29,
+      "line": 30,
       "column": 3
     }
   },
@@ -56,11 +56,11 @@
     "defaultMessage": "!!!Discover services",
     "file": "src/components/settings/services/ServicesDashboard.js",
     "start": {
-      "line": 30,
+      "line": 31,
       "column": 20
     },
     "end": {
-      "line": 33,
+      "line": 34,
       "column": 3
     }
   },
@@ -69,11 +69,11 @@
     "defaultMessage": "!!!Could not load your services",
     "file": "src/components/settings/services/ServicesDashboard.js",
     "start": {
-      "line": 34,
+      "line": 35,
       "column": 25
     },
     "end": {
-      "line": 37,
+      "line": 38,
       "column": 3
     }
   },
@@ -82,11 +82,11 @@
     "defaultMessage": "!!!Try again",
     "file": "src/components/settings/services/ServicesDashboard.js",
     "start": {
-      "line": 38,
+      "line": 39,
       "column": 21
     },
     "end": {
-      "line": 41,
+      "line": 42,
       "column": 3
     }
   },
@@ -95,11 +95,11 @@
     "defaultMessage": "!!!Your changes have been saved",
     "file": "src/components/settings/services/ServicesDashboard.js",
     "start": {
-      "line": 42,
+      "line": 43,
       "column": 15
     },
     "end": {
-      "line": 45,
+      "line": 46,
       "column": 3
     }
   },
@@ -108,11 +108,11 @@
     "defaultMessage": "!!!Service has been deleted",
     "file": "src/components/settings/services/ServicesDashboard.js",
     "start": {
-      "line": 46,
+      "line": 47,
       "column": 15
     },
     "end": {
-      "line": 49,
+      "line": 50,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/components/subscription/SubscriptionForm.json b/src/i18n/messages/src/components/subscription/SubscriptionForm.json
index f98eb986f..6d235254e 100644
--- a/src/i18n/messages/src/components/subscription/SubscriptionForm.json
+++ b/src/i18n/messages/src/components/subscription/SubscriptionForm.json
@@ -1,183 +1,53 @@
 [
   {
-    "id": "subscription.submit.label",
-    "defaultMessage": "!!!Support the development of Franz",
+    "id": "subscription.cta.choosePlan",
+    "defaultMessage": "!!!Choose your plan",
     "file": "src/components/subscription/SubscriptionForm.js",
     "start": {
-      "line": 14,
+      "line": 13,
       "column": 21
     },
     "end": {
-      "line": 17,
-      "column": 3
-    }
-  },
-  {
-    "id": "subscription.paymentSessionError",
-    "defaultMessage": "!!!Could not initialize payment form",
-    "file": "src/components/subscription/SubscriptionForm.js",
-    "start": {
-      "line": 18,
-      "column": 23
-    },
-    "end": {
-      "line": 21,
-      "column": 3
-    }
-  },
-  {
-    "id": "subscription.type.free",
-    "defaultMessage": "!!!free",
-    "file": "src/components/subscription/SubscriptionForm.js",
-    "start": {
-      "line": 22,
-      "column": 12
-    },
-    "end": {
-      "line": 25,
+      "line": 16,
       "column": 3
     }
   },
   {
-    "id": "subscription.type.month",
-    "defaultMessage": "!!!month",
+    "id": "settings.account.headlineUpgradeAccount",
+    "defaultMessage": "!!!Upgrade your account and get the full Franz experience",
     "file": "src/components/subscription/SubscriptionForm.js",
     "start": {
-      "line": 26,
-      "column": 15
+      "line": 17,
+      "column": 18
     },
     "end": {
-      "line": 29,
+      "line": 20,
       "column": 3
     }
   },
   {
-    "id": "subscription.type.year",
-    "defaultMessage": "!!!year",
+    "id": "subscription.teaser.intro",
+    "defaultMessage": "!!!Franz 5 comes with a wide range of new features to boost up your everyday communication - batteries included. Check out our new plans and find out which one suits you most!",
     "file": "src/components/subscription/SubscriptionForm.js",
     "start": {
-      "line": 30,
+      "line": 21,
       "column": 14
     },
     "end": {
-      "line": 33,
+      "line": 24,
       "column": 3
     }
   },
   {
-    "id": "subscription.includedFeatures",
-    "defaultMessage": "!!!The Franz Premium Supporter Account includes",
+    "id": "subscription.teaser.includedFeatures",
+    "defaultMessage": "!!!Paid Franz Plans include:",
     "file": "src/components/subscription/SubscriptionForm.js",
     "start": {
-      "line": 34,
+      "line": 25,
       "column": 20
     },
     "end": {
-      "line": 37,
-      "column": 3
-    }
-  },
-  {
-    "id": "subscription.features.onpremise.mattermost",
-    "defaultMessage": "!!!Add on-premise/hosted services like Mattermost",
-    "file": "src/components/subscription/SubscriptionForm.js",
-    "start": {
-      "line": 38,
-      "column": 13
-    },
-    "end": {
-      "line": 41,
-      "column": 3
-    }
-  },
-  {
-    "id": "subscription.features.noInterruptions",
-    "defaultMessage": "!!!No app delays & nagging to upgrade license",
-    "file": "src/components/subscription/SubscriptionForm.js",
-    "start": {
-      "line": 42,
-      "column": 19
-    },
-    "end": {
-      "line": 45,
-      "column": 3
-    }
-  },
-  {
-    "id": "subscription.features.proxy",
-    "defaultMessage": "!!!Proxy support for services",
-    "file": "src/components/subscription/SubscriptionForm.js",
-    "start": {
-      "line": 46,
-      "column": 9
-    },
-    "end": {
-      "line": 49,
-      "column": 3
-    }
-  },
-  {
-    "id": "subscription.features.spellchecker",
-    "defaultMessage": "!!!Support for Spellchecker",
-    "file": "src/components/subscription/SubscriptionForm.js",
-    "start": {
-      "line": 50,
-      "column": 16
-    },
-    "end": {
-      "line": 53,
-      "column": 3
-    }
-  },
-  {
-    "id": "subscription.features.workspaces",
-    "defaultMessage": "!!!Organize your services in workspaces",
-    "file": "src/components/subscription/SubscriptionForm.js",
-    "start": {
-      "line": 54,
-      "column": 14
-    },
-    "end": {
-      "line": 57,
-      "column": 3
-    }
-  },
-  {
-    "id": "subscription.features.ads",
-    "defaultMessage": "!!!No ads, ever!",
-    "file": "src/components/subscription/SubscriptionForm.js",
-    "start": {
-      "line": 58,
-      "column": 7
-    },
-    "end": {
-      "line": 61,
-      "column": 3
-    }
-  },
-  {
-    "id": "subscription.features.comingSoon",
-    "defaultMessage": "!!!coming soon",
-    "file": "src/components/subscription/SubscriptionForm.js",
-    "start": {
-      "line": 62,
-      "column": 14
-    },
-    "end": {
-      "line": 65,
-      "column": 3
-    }
-  },
-  {
-    "id": "subscription.euTaxInfo",
-    "defaultMessage": "!!!EU residents: local sales tax may apply",
-    "file": "src/components/subscription/SubscriptionForm.js",
-    "start": {
-      "line": 66,
-      "column": 13
-    },
-    "end": {
-      "line": 69,
+      "line": 28,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/components/subscription/TrialForm.json b/src/i18n/messages/src/components/subscription/TrialForm.json
new file mode 100644
index 000000000..8b387ba36
--- /dev/null
+++ b/src/i18n/messages/src/components/subscription/TrialForm.json
@@ -0,0 +1,93 @@
+[
+  {
+    "id": "subscription.cta.activateTrial",
+    "defaultMessage": "!!!Yes, start the free Franz Professional trial",
+    "file": "src/components/subscription/TrialForm.js",
+    "start": {
+      "line": 14,
+      "column": 21
+    },
+    "end": {
+      "line": 17,
+      "column": 3
+    }
+  },
+  {
+    "id": "subscription.cta.allOptions",
+    "defaultMessage": "!!!See all options",
+    "file": "src/components/subscription/TrialForm.js",
+    "start": {
+      "line": 18,
+      "column": 20
+    },
+    "end": {
+      "line": 21,
+      "column": 3
+    }
+  },
+  {
+    "id": "settings.account.headlineTrialUpgrade",
+    "defaultMessage": "!!!Get the free 14 day Franz Professional Trial",
+    "file": "src/components/subscription/TrialForm.js",
+    "start": {
+      "line": 22,
+      "column": 18
+    },
+    "end": {
+      "line": 25,
+      "column": 3
+    }
+  },
+  {
+    "id": "subscription.includedProFeatures",
+    "defaultMessage": "!!!The Franz Professional Plan includes:",
+    "file": "src/components/subscription/TrialForm.js",
+    "start": {
+      "line": 26,
+      "column": 20
+    },
+    "end": {
+      "line": 29,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.trial.terms.headline",
+    "defaultMessage": "!!!No strings attached",
+    "file": "src/components/subscription/TrialForm.js",
+    "start": {
+      "line": 30,
+      "column": 29
+    },
+    "end": {
+      "line": 33,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.trial.terms.noCreditCard",
+    "defaultMessage": "!!!No credit card required",
+    "file": "src/components/subscription/TrialForm.js",
+    "start": {
+      "line": 34,
+      "column": 16
+    },
+    "end": {
+      "line": 37,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.trial.terms.automaticTrialEnd",
+    "defaultMessage": "!!!Your free trial ends automatically after 14 days",
+    "file": "src/components/subscription/TrialForm.js",
+    "start": {
+      "line": 38,
+      "column": 21
+    },
+    "end": {
+      "line": 41,
+      "column": 3
+    }
+  }
+]
\ No newline at end of file
diff --git a/src/i18n/messages/src/components/ui/FeatureList.json b/src/i18n/messages/src/components/ui/FeatureList.json
new file mode 100644
index 000000000..497e299a4
--- /dev/null
+++ b/src/i18n/messages/src/components/ui/FeatureList.json
@@ -0,0 +1,132 @@
+[
+  {
+    "id": "pricing.features.unlimitedServices",
+    "defaultMessage": "!!!Add unlimited services",
+    "file": "src/components/ui/FeatureList.js",
+    "start": {
+      "line": 8,
+      "column": 21
+    },
+    "end": {
+      "line": 11,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.features.spellchecker",
+    "defaultMessage": "!!!Spellchecker support",
+    "file": "src/components/ui/FeatureList.js",
+    "start": {
+      "line": 12,
+      "column": 16
+    },
+    "end": {
+      "line": 15,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.features.workspaces",
+    "defaultMessage": "!!!Workspaces",
+    "file": "src/components/ui/FeatureList.js",
+    "start": {
+      "line": 16,
+      "column": 14
+    },
+    "end": {
+      "line": 19,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.features.customWebsites",
+    "defaultMessage": "!!!Add Custom Websites",
+    "file": "src/components/ui/FeatureList.js",
+    "start": {
+      "line": 20,
+      "column": 18
+    },
+    "end": {
+      "line": 23,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.features.onPremise",
+    "defaultMessage": "!!!On-premise & other Hosted Services",
+    "file": "src/components/ui/FeatureList.js",
+    "start": {
+      "line": 24,
+      "column": 13
+    },
+    "end": {
+      "line": 27,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.features.thirdPartyServices",
+    "defaultMessage": "!!!Install 3rd party services",
+    "file": "src/components/ui/FeatureList.js",
+    "start": {
+      "line": 28,
+      "column": 22
+    },
+    "end": {
+      "line": 31,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.features.serviceProxies",
+    "defaultMessage": "!!!Service Proxies",
+    "file": "src/components/ui/FeatureList.js",
+    "start": {
+      "line": 32,
+      "column": 18
+    },
+    "end": {
+      "line": 35,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.features.teamManagement",
+    "defaultMessage": "!!!Team Management",
+    "file": "src/components/ui/FeatureList.js",
+    "start": {
+      "line": 36,
+      "column": 18
+    },
+    "end": {
+      "line": 39,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.features.appDelays",
+    "defaultMessage": "!!!No Waiting Screens",
+    "file": "src/components/ui/FeatureList.js",
+    "start": {
+      "line": 40,
+      "column": 13
+    },
+    "end": {
+      "line": 43,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.features.adFree",
+    "defaultMessage": "!!!Forever ad-free",
+    "file": "src/components/ui/FeatureList.js",
+    "start": {
+      "line": 44,
+      "column": 10
+    },
+    "end": {
+      "line": 47,
+      "column": 3
+    }
+  }
+]
\ No newline at end of file
diff --git a/src/i18n/messages/src/features/delayApp/Component.json b/src/i18n/messages/src/features/delayApp/Component.json
index bacd9444a..0d345a47b 100644
--- a/src/i18n/messages/src/features/delayApp/Component.json
+++ b/src/i18n/messages/src/features/delayApp/Component.json
@@ -4,24 +4,50 @@
     "defaultMessage": "!!!Please purchase license to skip waiting",
     "file": "src/features/delayApp/Component.js",
     "start": {
-      "line": 15,
+      "line": 17,
       "column": 12
     },
     "end": {
-      "line": 18,
+      "line": 20,
       "column": 3
     }
   },
   {
-    "id": "feature.delayApp.action",
+    "id": "feature.delayApp.trial.headline",
+    "defaultMessage": "!!!Get the free Franz Professional 14 day trial and skip the line",
+    "file": "src/features/delayApp/Component.js",
+    "start": {
+      "line": 21,
+      "column": 17
+    },
+    "end": {
+      "line": 24,
+      "column": 3
+    }
+  },
+  {
+    "id": "feature.delayApp.upgrade.action",
     "defaultMessage": "!!!Get a Franz Supporter License",
     "file": "src/features/delayApp/Component.js",
     "start": {
-      "line": 19,
+      "line": 25,
       "column": 10
     },
     "end": {
-      "line": 22,
+      "line": 28,
+      "column": 3
+    }
+  },
+  {
+    "id": "feature.delayApp.trial.action",
+    "defaultMessage": "!!!Yes, I want the free 14 day trial of Franz Professional",
+    "file": "src/features/delayApp/Component.js",
+    "start": {
+      "line": 29,
+      "column": 15
+    },
+    "end": {
+      "line": 32,
       "column": 3
     }
   },
@@ -30,11 +56,11 @@
     "defaultMessage": "!!!Franz will continue in {seconds} seconds.",
     "file": "src/features/delayApp/Component.js",
     "start": {
-      "line": 23,
+      "line": 33,
       "column": 8
     },
     "end": {
-      "line": 26,
+      "line": 36,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/features/serviceLimit/components/AnnouncementScreen.json b/src/i18n/messages/src/features/serviceLimit/components/AnnouncementScreen.json
new file mode 100644
index 000000000..e6e3cef99
--- /dev/null
+++ b/src/i18n/messages/src/features/serviceLimit/components/AnnouncementScreen.json
@@ -0,0 +1,15 @@
+[
+  {
+    "id": "feature.announcements.changelog.headline",
+    "defaultMessage": "!!!Changes in Franz {version}",
+    "file": "src/features/serviceLimit/components/AnnouncementScreen.js",
+    "start": {
+      "line": 20,
+      "column": 12
+    },
+    "end": {
+      "line": 23,
+      "column": 3
+    }
+  }
+]
\ No newline at end of file
diff --git a/src/i18n/messages/src/features/serviceLimit/components/LimitReachedInfobox.json b/src/i18n/messages/src/features/serviceLimit/components/LimitReachedInfobox.json
new file mode 100644
index 000000000..df5bc03e8
--- /dev/null
+++ b/src/i18n/messages/src/features/serviceLimit/components/LimitReachedInfobox.json
@@ -0,0 +1,28 @@
+[
+  {
+    "id": "feature.serviceLimit.limitReached",
+    "defaultMessage": "!!!You have added {amount} of {limit} services. Please upgrade your account to add more services.",
+    "file": "src/features/serviceLimit/components/LimitReachedInfobox.js",
+    "start": {
+      "line": 11,
+      "column": 16
+    },
+    "end": {
+      "line": 14,
+      "column": 3
+    }
+  },
+  {
+    "id": "premiumFeature.button.upgradeAccount",
+    "defaultMessage": "!!!Upgrade account",
+    "file": "src/features/serviceLimit/components/LimitReachedInfobox.js",
+    "start": {
+      "line": 15,
+      "column": 10
+    },
+    "end": {
+      "line": 18,
+      "column": 3
+    }
+  }
+]
\ No newline at end of file
diff --git a/src/i18n/messages/src/features/shareFranz/Component.json b/src/i18n/messages/src/features/shareFranz/Component.json
index 34a43d5a0..79b425b15 100644
--- a/src/i18n/messages/src/features/shareFranz/Component.json
+++ b/src/i18n/messages/src/features/shareFranz/Component.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Franz is better together!",
     "file": "src/features/shareFranz/Component.js",
     "start": {
-      "line": 15,
+      "line": 16,
       "column": 12
     },
     "end": {
-      "line": 18,
+      "line": 19,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!Tell your friends and colleagues how awesome Franz is and help us to spread the word.",
     "file": "src/features/shareFranz/Component.js",
     "start": {
-      "line": 19,
+      "line": 20,
       "column": 8
     },
     "end": {
-      "line": 22,
+      "line": 23,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!Share as email",
     "file": "src/features/shareFranz/Component.js",
     "start": {
-      "line": 23,
+      "line": 24,
       "column": 16
     },
     "end": {
-      "line": 26,
+      "line": 27,
       "column": 3
     }
   },
@@ -43,11 +43,11 @@
     "defaultMessage": "!!!Share on Facebook",
     "file": "src/features/shareFranz/Component.js",
     "start": {
-      "line": 27,
+      "line": 28,
       "column": 19
     },
     "end": {
-      "line": 30,
+      "line": 31,
       "column": 3
     }
   },
@@ -56,11 +56,11 @@
     "defaultMessage": "!!!Share on Twitter",
     "file": "src/features/shareFranz/Component.js",
     "start": {
-      "line": 31,
+      "line": 32,
       "column": 18
     },
     "end": {
-      "line": 34,
+      "line": 35,
       "column": 3
     }
   },
@@ -69,11 +69,11 @@
     "defaultMessage": "!!! I've added {count} services to Franz! Get the free app for WhatsApp, Messenger, Slack, Skype and co at www.meetfranz.com",
     "file": "src/features/shareFranz/Component.js",
     "start": {
-      "line": 35,
+      "line": 36,
       "column": 18
     },
     "end": {
-      "line": 38,
+      "line": 39,
       "column": 3
     }
   },
@@ -82,11 +82,11 @@
     "defaultMessage": "!!! I've added {count} services to Franz! Get the free app for WhatsApp, Messenger, Slack, Skype and co at www.meetfranz.com /cc @FranzMessenger",
     "file": "src/features/shareFranz/Component.js",
     "start": {
-      "line": 39,
+      "line": 40,
       "column": 20
     },
     "end": {
-      "line": 42,
+      "line": 43,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/helpers/plan-helpers.json b/src/i18n/messages/src/helpers/plan-helpers.json
new file mode 100644
index 000000000..df8ee19e3
--- /dev/null
+++ b/src/i18n/messages/src/helpers/plan-helpers.json
@@ -0,0 +1,54 @@
+[
+  {
+    "id": "pricing.plan.pro",
+    "defaultMessage": "!!!Franz Professional",
+    "file": "src/helpers/plan-helpers.js",
+    "start": {
+      "line": 5,
+      "column": 15
+    },
+    "end": {
+      "line": 8,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.plan.personal",
+    "defaultMessage": "!!!Franz Personal",
+    "file": "src/helpers/plan-helpers.js",
+    "start": {
+      "line": 9,
+      "column": 20
+    },
+    "end": {
+      "line": 12,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.plan.free",
+    "defaultMessage": "!!!Franz Free",
+    "file": "src/helpers/plan-helpers.js",
+    "start": {
+      "line": 13,
+      "column": 16
+    },
+    "end": {
+      "line": 16,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.plan.legacy",
+    "defaultMessage": "!!!Franz Premium",
+    "file": "src/helpers/plan-helpers.js",
+    "start": {
+      "line": 17,
+      "column": 18
+    },
+    "end": {
+      "line": 20,
+      "column": 3
+    }
+  }
+]
\ No newline at end of file
diff --git a/src/i18n/messages/src/helpers/pricing-helpers.json b/src/i18n/messages/src/helpers/pricing-helpers.json
new file mode 100644
index 000000000..4030a3e3b
--- /dev/null
+++ b/src/i18n/messages/src/helpers/pricing-helpers.json
@@ -0,0 +1,80 @@
+[
+  {
+    "id": "pricing.plan.pro-yearly",
+    "defaultMessage": "!!!Franz Professional Yearly",
+    "file": "src/helpers/pricing-helpers.js",
+    "start": {
+      "line": 5,
+      "column": 22
+    },
+    "end": {
+      "line": 8,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.plan.pro-monthly",
+    "defaultMessage": "!!!Franz Professional Monthly",
+    "file": "src/helpers/pricing-helpers.js",
+    "start": {
+      "line": 9,
+      "column": 23
+    },
+    "end": {
+      "line": 12,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.plan.personal-yearly",
+    "defaultMessage": "!!!Franz Personal Yearly",
+    "file": "src/helpers/pricing-helpers.js",
+    "start": {
+      "line": 13,
+      "column": 27
+    },
+    "end": {
+      "line": 16,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.plan.personal-monthly",
+    "defaultMessage": "!!!Franz Personal Monthly",
+    "file": "src/helpers/pricing-helpers.js",
+    "start": {
+      "line": 17,
+      "column": 28
+    },
+    "end": {
+      "line": 20,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.plan.free",
+    "defaultMessage": "!!!Franz Free",
+    "file": "src/helpers/pricing-helpers.js",
+    "start": {
+      "line": 21,
+      "column": 16
+    },
+    "end": {
+      "line": 24,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.plan.legacy",
+    "defaultMessage": "!!!Franz Premium",
+    "file": "src/helpers/pricing-helpers.js",
+    "start": {
+      "line": 25,
+      "column": 18
+    },
+    "end": {
+      "line": 28,
+      "column": 3
+    }
+  }
+]
\ No newline at end of file
diff --git a/src/i18n/messages/src/lib/Menu.json b/src/i18n/messages/src/lib/Menu.json
index daafb0900..cee46608c 100644
--- a/src/i18n/messages/src/lib/Menu.json
+++ b/src/i18n/messages/src/lib/Menu.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Edit",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 15,
+      "line": 18,
       "column": 8
     },
     "end": {
-      "line": 18,
+      "line": 21,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!Undo",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 19,
+      "line": 22,
       "column": 8
     },
     "end": {
-      "line": 22,
+      "line": 25,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!Redo",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 23,
+      "line": 26,
       "column": 8
     },
     "end": {
-      "line": 26,
+      "line": 29,
       "column": 3
     }
   },
@@ -43,11 +43,11 @@
     "defaultMessage": "!!!Cut",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 27,
+      "line": 30,
       "column": 7
     },
     "end": {
-      "line": 30,
+      "line": 33,
       "column": 3
     }
   },
@@ -56,11 +56,11 @@
     "defaultMessage": "!!!Copy",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 31,
+      "line": 34,
       "column": 8
     },
     "end": {
-      "line": 34,
+      "line": 37,
       "column": 3
     }
   },
@@ -69,11 +69,11 @@
     "defaultMessage": "!!!Paste",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 35,
+      "line": 38,
       "column": 9
     },
     "end": {
-      "line": 38,
+      "line": 41,
       "column": 3
     }
   },
@@ -82,11 +82,11 @@
     "defaultMessage": "!!!Paste And Match Style",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 39,
+      "line": 42,
       "column": 22
     },
     "end": {
-      "line": 42,
+      "line": 45,
       "column": 3
     }
   },
@@ -95,11 +95,11 @@
     "defaultMessage": "!!!Delete",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 43,
+      "line": 46,
       "column": 10
     },
     "end": {
-      "line": 46,
+      "line": 49,
       "column": 3
     }
   },
@@ -108,11 +108,11 @@
     "defaultMessage": "!!!Select All",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 47,
+      "line": 50,
       "column": 13
     },
     "end": {
-      "line": 50,
+      "line": 53,
       "column": 3
     }
   },
@@ -121,11 +121,11 @@
     "defaultMessage": "!!!Speech",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 51,
+      "line": 54,
       "column": 10
     },
     "end": {
-      "line": 54,
+      "line": 57,
       "column": 3
     }
   },
@@ -134,11 +134,11 @@
     "defaultMessage": "!!!Start Speaking",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 55,
+      "line": 58,
       "column": 17
     },
     "end": {
-      "line": 58,
+      "line": 61,
       "column": 3
     }
   },
@@ -147,11 +147,11 @@
     "defaultMessage": "!!!Stop Speaking",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 59,
+      "line": 62,
       "column": 16
     },
     "end": {
-      "line": 62,
+      "line": 65,
       "column": 3
     }
   },
@@ -160,11 +160,11 @@
     "defaultMessage": "!!!Start Dictation",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 63,
+      "line": 66,
       "column": 18
     },
     "end": {
-      "line": 66,
+      "line": 69,
       "column": 3
     }
   },
@@ -173,11 +173,11 @@
     "defaultMessage": "!!!Emoji & Symbols",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 67,
+      "line": 70,
       "column": 16
     },
     "end": {
-      "line": 70,
+      "line": 73,
       "column": 3
     }
   },
@@ -186,11 +186,11 @@
     "defaultMessage": "!!!Actual Size",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 71,
+      "line": 74,
       "column": 13
     },
     "end": {
-      "line": 74,
+      "line": 77,
       "column": 3
     }
   },
@@ -199,11 +199,11 @@
     "defaultMessage": "!!!Zoom In",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 75,
+      "line": 78,
       "column": 10
     },
     "end": {
-      "line": 78,
+      "line": 81,
       "column": 3
     }
   },
@@ -212,11 +212,11 @@
     "defaultMessage": "!!!Zoom Out",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 79,
+      "line": 82,
       "column": 11
     },
     "end": {
-      "line": 82,
+      "line": 85,
       "column": 3
     }
   },
@@ -225,11 +225,11 @@
     "defaultMessage": "!!!Enter Full Screen",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 83,
+      "line": 86,
       "column": 19
     },
     "end": {
-      "line": 86,
+      "line": 89,
       "column": 3
     }
   },
@@ -238,11 +238,11 @@
     "defaultMessage": "!!!Exit Full Screen",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 87,
+      "line": 90,
       "column": 18
     },
     "end": {
-      "line": 90,
+      "line": 93,
       "column": 3
     }
   },
@@ -251,11 +251,11 @@
     "defaultMessage": "!!!Toggle Full Screen",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 91,
+      "line": 94,
       "column": 20
     },
     "end": {
-      "line": 94,
+      "line": 97,
       "column": 3
     }
   },
@@ -264,11 +264,24 @@
     "defaultMessage": "!!!Toggle Developer Tools",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 95,
+      "line": 98,
       "column": 18
     },
     "end": {
-      "line": 98,
+      "line": 101,
+      "column": 3
+    }
+  },
+  {
+    "id": "menu.view.toggleTodosDevTools",
+    "defaultMessage": "!!!Toggle Todos Developer Tools",
+    "file": "src/lib/Menu.js",
+    "start": {
+      "line": 102,
+      "column": 23
+    },
+    "end": {
+      "line": 105,
       "column": 3
     }
   },
@@ -277,11 +290,11 @@
     "defaultMessage": "!!!Toggle Service Developer Tools",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 99,
+      "line": 106,
       "column": 25
     },
     "end": {
-      "line": 102,
+      "line": 109,
       "column": 3
     }
   },
@@ -290,11 +303,11 @@
     "defaultMessage": "!!!Reload Service",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 103,
+      "line": 110,
       "column": 17
     },
     "end": {
-      "line": 106,
+      "line": 113,
       "column": 3
     }
   },
@@ -303,11 +316,11 @@
     "defaultMessage": "!!!Reload Franz",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 107,
+      "line": 114,
       "column": 15
     },
     "end": {
-      "line": 110,
+      "line": 117,
       "column": 3
     }
   },
@@ -316,11 +329,11 @@
     "defaultMessage": "!!!Minimize",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 111,
+      "line": 118,
       "column": 12
     },
     "end": {
-      "line": 114,
+      "line": 121,
       "column": 3
     }
   },
@@ -329,11 +342,11 @@
     "defaultMessage": "!!!Close",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 115,
+      "line": 122,
       "column": 9
     },
     "end": {
-      "line": 118,
+      "line": 125,
       "column": 3
     }
   },
@@ -342,11 +355,11 @@
     "defaultMessage": "!!!Learn More",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 119,
+      "line": 126,
       "column": 13
     },
     "end": {
-      "line": 122,
+      "line": 129,
       "column": 3
     }
   },
@@ -355,11 +368,11 @@
     "defaultMessage": "!!!Changelog",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 123,
+      "line": 130,
       "column": 13
     },
     "end": {
-      "line": 126,
+      "line": 133,
       "column": 3
     }
   },
@@ -368,11 +381,50 @@
     "defaultMessage": "!!!Support",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 127,
+      "line": 134,
       "column": 11
     },
     "end": {
-      "line": 130,
+      "line": 137,
+      "column": 3
+    }
+  },
+  {
+    "id": "menu.help.debugInfo",
+    "defaultMessage": "!!!Copy Debug Information",
+    "file": "src/lib/Menu.js",
+    "start": {
+      "line": 138,
+      "column": 13
+    },
+    "end": {
+      "line": 141,
+      "column": 3
+    }
+  },
+  {
+    "id": "menu.help.debugInfoCopiedHeadline",
+    "defaultMessage": "!!!Franz Debug Information",
+    "file": "src/lib/Menu.js",
+    "start": {
+      "line": 142,
+      "column": 27
+    },
+    "end": {
+      "line": 145,
+      "column": 3
+    }
+  },
+  {
+    "id": "menu.help.debugInfoCopiedBody",
+    "defaultMessage": "!!!Your Debug Information has been copied to your clipboard.",
+    "file": "src/lib/Menu.js",
+    "start": {
+      "line": 146,
+      "column": 23
+    },
+    "end": {
+      "line": 149,
       "column": 3
     }
   },
@@ -381,11 +433,11 @@
     "defaultMessage": "!!!Terms of Service",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 131,
+      "line": 150,
       "column": 7
     },
     "end": {
-      "line": 134,
+      "line": 153,
       "column": 3
     }
   },
@@ -394,11 +446,11 @@
     "defaultMessage": "!!!Privacy Statement",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 135,
+      "line": 154,
       "column": 11
     },
     "end": {
-      "line": 138,
+      "line": 157,
       "column": 3
     }
   },
@@ -407,11 +459,11 @@
     "defaultMessage": "!!!File",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 139,
+      "line": 158,
       "column": 8
     },
     "end": {
-      "line": 142,
+      "line": 161,
       "column": 3
     }
   },
@@ -420,11 +472,11 @@
     "defaultMessage": "!!!View",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 143,
+      "line": 162,
       "column": 8
     },
     "end": {
-      "line": 146,
+      "line": 165,
       "column": 3
     }
   },
@@ -433,11 +485,11 @@
     "defaultMessage": "!!!Services",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 147,
+      "line": 166,
       "column": 12
     },
     "end": {
-      "line": 150,
+      "line": 169,
       "column": 3
     }
   },
@@ -446,11 +498,11 @@
     "defaultMessage": "!!!Window",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 151,
+      "line": 170,
       "column": 10
     },
     "end": {
-      "line": 154,
+      "line": 173,
       "column": 3
     }
   },
@@ -459,11 +511,11 @@
     "defaultMessage": "!!!Help",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 155,
+      "line": 174,
       "column": 8
     },
     "end": {
-      "line": 158,
+      "line": 177,
       "column": 3
     }
   },
@@ -472,11 +524,11 @@
     "defaultMessage": "!!!About Franz",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 159,
+      "line": 178,
       "column": 9
     },
     "end": {
-      "line": 162,
+      "line": 181,
       "column": 3
     }
   },
@@ -485,11 +537,11 @@
     "defaultMessage": "!!!What's new?",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 163,
+      "line": 182,
       "column": 16
     },
     "end": {
-      "line": 166,
+      "line": 185,
       "column": 3
     }
   },
@@ -498,11 +550,11 @@
     "defaultMessage": "!!!Settings",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 167,
+      "line": 186,
       "column": 12
     },
     "end": {
-      "line": 170,
+      "line": 189,
       "column": 3
     }
   },
@@ -511,11 +563,11 @@
     "defaultMessage": "!!!Check for updates",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 171,
+      "line": 190,
       "column": 19
     },
     "end": {
-      "line": 174,
+      "line": 193,
       "column": 3
     }
   },
@@ -524,11 +576,11 @@
     "defaultMessage": "!!!Hide",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 175,
+      "line": 194,
       "column": 8
     },
     "end": {
-      "line": 178,
+      "line": 197,
       "column": 3
     }
   },
@@ -537,11 +589,11 @@
     "defaultMessage": "!!!Hide Others",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 179,
+      "line": 198,
       "column": 14
     },
     "end": {
-      "line": 182,
+      "line": 201,
       "column": 3
     }
   },
@@ -550,11 +602,11 @@
     "defaultMessage": "!!!Unhide",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 183,
+      "line": 202,
       "column": 10
     },
     "end": {
-      "line": 186,
+      "line": 205,
       "column": 3
     }
   },
@@ -563,11 +615,11 @@
     "defaultMessage": "!!!Quit",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 187,
+      "line": 206,
       "column": 8
     },
     "end": {
-      "line": 190,
+      "line": 209,
       "column": 3
     }
   },
@@ -576,11 +628,11 @@
     "defaultMessage": "!!!Add New Service...",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 191,
+      "line": 210,
       "column": 17
     },
     "end": {
-      "line": 194,
+      "line": 213,
       "column": 3
     }
   },
@@ -589,11 +641,11 @@
     "defaultMessage": "!!!Add New Workspace...",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 195,
+      "line": 214,
       "column": 19
     },
     "end": {
-      "line": 198,
+      "line": 217,
       "column": 3
     }
   },
@@ -602,11 +654,11 @@
     "defaultMessage": "!!!Open workspace drawer",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 199,
+      "line": 218,
       "column": 23
     },
     "end": {
-      "line": 202,
+      "line": 221,
       "column": 3
     }
   },
@@ -615,11 +667,11 @@
     "defaultMessage": "!!!Close workspace drawer",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 203,
+      "line": 222,
       "column": 24
     },
     "end": {
-      "line": 206,
+      "line": 225,
       "column": 3
     }
   },
@@ -628,11 +680,11 @@
     "defaultMessage": "!!!Activate next service...",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 207,
+      "line": 226,
       "column": 23
     },
     "end": {
-      "line": 210,
+      "line": 229,
       "column": 3
     }
   },
@@ -641,11 +693,11 @@
     "defaultMessage": "!!!Activate previous service...",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 211,
+      "line": 230,
       "column": 27
     },
     "end": {
-      "line": 214,
+      "line": 233,
       "column": 3
     }
   },
@@ -654,11 +706,11 @@
     "defaultMessage": "!!!Disable notifications & audio",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 215,
+      "line": 234,
       "column": 11
     },
     "end": {
-      "line": 218,
+      "line": 237,
       "column": 3
     }
   },
@@ -667,11 +719,11 @@
     "defaultMessage": "!!!Enable notifications & audio",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 219,
+      "line": 238,
       "column": 13
     },
     "end": {
-      "line": 222,
+      "line": 241,
       "column": 3
     }
   },
@@ -680,11 +732,11 @@
     "defaultMessage": "!!!Workspaces",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 223,
+      "line": 242,
       "column": 14
     },
     "end": {
-      "line": 226,
+      "line": 245,
       "column": 3
     }
   },
@@ -693,11 +745,50 @@
     "defaultMessage": "!!!Default",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 227,
+      "line": 246,
       "column": 20
     },
     "end": {
-      "line": 230,
+      "line": 249,
+      "column": 3
+    }
+  },
+  {
+    "id": "menu.todos",
+    "defaultMessage": "!!!Todos",
+    "file": "src/lib/Menu.js",
+    "start": {
+      "line": 250,
+      "column": 9
+    },
+    "end": {
+      "line": 253,
+      "column": 3
+    }
+  },
+  {
+    "id": "menu.Todoss.openTodosDrawer",
+    "defaultMessage": "!!!Open Todos drawer",
+    "file": "src/lib/Menu.js",
+    "start": {
+      "line": 254,
+      "column": 19
+    },
+    "end": {
+      "line": 257,
+      "column": 3
+    }
+  },
+  {
+    "id": "menu.Todoss.closeTodosDrawer",
+    "defaultMessage": "!!!Close Todos drawer",
+    "file": "src/lib/Menu.js",
+    "start": {
+      "line": 258,
+      "column": 20
+    },
+    "end": {
+      "line": 261,
       "column": 3
     }
   }
diff --git a/src/index.html b/src/index.html
index bf15e2d4e..198c1ab7b 100644
--- a/src/index.html
+++ b/src/index.html
@@ -10,6 +10,7 @@
   <div class="window-draggable"></div>
   <div class="dev-warning">DEV MODE</div>
   <div id="root"></div>
+  <div id="portalContainer"></div>
   <script>
     document.querySelector('body').classList.add(process.env.OS_PLATFORM ? process.env.OS_PLATFORM : process.platform);
 
@@ -34,11 +35,16 @@
           const originalReloadBehaviour = window._onLiveReloadFileChanged;
 
           window._onLiveReloadFileChanged = (file) => {
-            if (!file.path.includes('/build/webview/') && !file.path.includes('/build/index.js') && !file.path.includes('/build/electron/')) {
+            const isTodoPreloadPath = file.path.includes('/build/features/todos/preload.js');
+            if (!file.path.includes('/build/webview/') && !file.path.includes('/build/index.js') && !file.path.includes('/build/electron/') && !isTodoPreloadPath) {
               originalReloadBehaviour(file);
             } else {
-              if (file.path.includes('/build/webview/')) {
-                debug('Livereload: Reloading all webvies');
+              if (isTodoPreloadPath) {
+                debug('Livereload: Reloading all webviews');
+                const webview = document.querySelector('webview[partition="persist:todos"]');
+                if (webview) webview.reload();
+              } else if (file.path.includes('/build/webview/')) {
+                debug('Livereload: Reloading all webviews');
                 const webviews = document.querySelectorAll('webview').forEach(webview => webview.reload());
               } else {
                 debug('Livereload: skip reload as only main process files have changed');
diff --git a/src/index.js b/src/index.js
index 55592c328..d9d51fd5b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -105,35 +105,6 @@ if (!gotTheLock) {
     }
   });
 }
-// const isSecondInstance = app.makeSingleInstance((argv) => {
-//   if (mainWindow) {
-//     if (mainWindow.isMinimized()) mainWindow.restore();
-//     mainWindow.focus();
-
-//     if (process.platform === 'win32') {
-//       // Keep only command line / deep linked arguments
-//       const url = argv.slice(1);
-
-//       if (url) {
-//         handleDeepLink(mainWindow, url.toString());
-//       }
-//     }
-//   }
-
-//   if (argv.includes('--reset-window')) {
-//     // Needs to be delayed to not interfere with mainWindow.restore();
-//     setTimeout(() => {
-//       debug('Resetting windows via Task');
-//       mainWindow.setPosition(DEFAULT_WINDOW_OPTIONS.x + 100, DEFAULT_WINDOW_OPTIONS.y + 100);
-//       mainWindow.setSize(DEFAULT_WINDOW_OPTIONS.width, DEFAULT_WINDOW_OPTIONS.height);
-//     }, 1);
-//   }
-// });
-
-// if (isSecondInstance) {
-//   console.log('An instance of Franz is already running. Exiting...');
-//   app.exit();
-// }
 
 // Fix Unity indicator issue
 // https://github.com/electron/electron/issues/9046
diff --git a/src/lib/Menu.js b/src/lib/Menu.js
index e0dfd736e..81efaf18f 100644
--- a/src/lib/Menu.js
+++ b/src/lib/Menu.js
@@ -1,4 +1,4 @@
-import { remote, shell } from 'electron';
+import { remote, shell, clipboard } from 'electron';
 import { observable, autorun } from 'mobx';
 import { defineMessages } from 'react-intl';
 
@@ -8,6 +8,9 @@ import { workspaceActions } from '../features/workspaces/actions';
 import { gaEvent } from './analytics';
 import { announcementActions } from '../features/announcements/actions';
 import { announcementsStore } from '../features/announcements';
+import TodoStore from '../features/todos/store';
+import { GA_CATEGORY_TODOS, todosStore } from '../features/todos';
+import { todoActions } from '../features/todos/actions';
 
 const { app, Menu, dialog } = remote;
 
@@ -96,6 +99,10 @@ const menuItems = defineMessages({
     id: 'menu.view.toggleDevTools',
     defaultMessage: '!!!Toggle Developer Tools',
   },
+  toggleTodosDevTools: {
+    id: 'menu.view.toggleTodosDevTools',
+    defaultMessage: '!!!Toggle Todos Developer Tools',
+  },
   toggleServiceDevTools: {
     id: 'menu.view.toggleServiceDevTools',
     defaultMessage: '!!!Toggle Service Developer Tools',
@@ -128,6 +135,18 @@ const menuItems = defineMessages({
     id: 'menu.help.support',
     defaultMessage: '!!!Support',
   },
+  debugInfo: {
+    id: 'menu.help.debugInfo',
+    defaultMessage: '!!!Copy Debug Information',
+  },
+  debugInfoCopiedHeadline: {
+    id: 'menu.help.debugInfoCopiedHeadline',
+    defaultMessage: '!!!Franz Debug Information',
+  },
+  debugInfoCopiedBody: {
+    id: 'menu.help.debugInfoCopiedBody',
+    defaultMessage: '!!!Your Debug Information has been copied to your clipboard.',
+  },
   tos: {
     id: 'menu.help.tos',
     defaultMessage: '!!!Terms of Service',
@@ -228,6 +247,18 @@ const menuItems = defineMessages({
     id: 'menu.workspaces.defaultWorkspace',
     defaultMessage: '!!!Default',
   },
+  todos: {
+    id: 'menu.todos',
+    defaultMessage: '!!!Todos',
+  },
+  openTodosDrawer: {
+    id: 'menu.Todoss.openTodosDrawer',
+    defaultMessage: '!!!Open Todos drawer',
+  },
+  closeTodosDrawer: {
+    id: 'menu.Todoss.closeTodosDrawer',
+    defaultMessage: '!!!Close Todos drawer',
+  },
 });
 
 function getActiveWebview() {
@@ -336,6 +367,11 @@ const _templateFactory = intl => [
     visible: workspaceStore.isFeatureEnabled,
   },
   {
+    label: intl.formatMessage(menuItems.todos),
+    submenu: [],
+    visible: todosStore.isFeatureEnabled,
+  },
+  {
     label: intl.formatMessage(menuItems.window),
     role: 'window',
     submenu: [
@@ -608,6 +644,17 @@ export default class FranzMenu {
       enabled: this.stores.user.isLoggedIn && this.stores.services.enabled.length > 0,
     });
 
+    if (this.stores.features.features.isTodosEnabled) {
+      tpl[1].submenu.push({
+        label: intl.formatMessage(menuItems.toggleTodosDevTools),
+        accelerator: `${cmdKey}+Shift+Alt+O`,
+        click: () => {
+          const webview = document.querySelector('webview[partition="persist:todos"]');
+          if (webview) webview.openDevTools();
+        },
+      });
+    }
+
     tpl[1].submenu.unshift({
       label: intl.formatMessage(menuItems.reloadService),
       id: 'reloadService', // TODO: needed?
@@ -760,6 +807,14 @@ export default class FranzMenu {
       tpl[4].submenu = this.workspacesMenu();
     }
 
+    if (todosStore.isFeatureEnabled) {
+      tpl[5].submenu = this.todosMenu();
+    }
+
+    tpl[tpl.length - 1].submenu.push({
+      type: 'separator',
+    }, this.debugMenu());
+
     this.currentTemplate = tpl;
     const menu = Menu.buildFromTemplate(tpl);
     Menu.setApplicationMenu(menu);
@@ -870,6 +925,53 @@ export default class FranzMenu {
     return menu;
   }
 
+  todosMenu() {
+    const { isTodosPanelVisible } = TodoStore;
+    const { intl } = window.franz;
+    const menu = [];
+
+    // Open todos drawer:
+    const drawerLabel = (
+      isTodosPanelVisible ? menuItems.closeTodosDrawer : menuItems.openTodosDrawer
+    );
+    menu.push({
+      label: intl.formatMessage(drawerLabel),
+      accelerator: `${cmdKey}+T`,
+      click: () => {
+        todoActions.toggleTodosPanel();
+        gaEvent(GA_CATEGORY_TODOS, 'toggleDrawer', 'menu');
+      },
+      enabled: this.stores.user.isLoggedIn,
+    }, {
+      type: 'separator',
+    });
+
+    return menu;
+  }
+
+
+  debugMenu() {
+    const { intl } = window.franz;
+
+    return {
+      label: intl.formatMessage(menuItems.debugInfo),
+      click: () => {
+        const { debugInfo } = this.stores.app;
+
+        clipboard.write({
+          text: JSON.stringify(debugInfo),
+        });
+
+        this.actions.app.notify({
+          title: intl.formatMessage(menuItems.debugInfoCopiedHeadline),
+          options: {
+            body: intl.formatMessage(menuItems.debugInfoCopiedBody),
+          },
+        });
+      },
+    };
+  }
+
   _getServiceName(service) {
     if (service.name) {
       return service.name;
diff --git a/src/models/Service.js b/src/models/Service.js
index 88bce3360..848a84aa2 100644
--- a/src/models/Service.js
+++ b/src/models/Service.js
@@ -4,6 +4,11 @@ import normalizeUrl from 'normalize-url';
 
 const debug = require('debug')('Franz:Service');
 
+export const RESTRICTION_TYPES = {
+  SERVICE_LIMIT: 0,
+  CUSTOM_URL: 1,
+};
+
 export default class Service {
   id = '';
 
@@ -59,6 +64,12 @@ export default class Service {
 
   @observable errorMessage = '';
 
+  @observable isUsingCustomUrl = false;
+
+  @observable isServiceAccessRestricted = false;
+
+  @observable restrictionType = null;
+
   constructor(data, recipe) {
     if (!data) {
       console.error('Service config not valid');
@@ -111,6 +122,10 @@ export default class Service {
         this.unreadDirectMessageCount = 0;
         this.unreadIndirectMessageCount = 0;
       }
+
+      if (this.recipe.hasCustomUrl && this.customUrl) {
+        this.isUsingCustomUrl = true;
+      }
     });
   }
 
diff --git a/src/models/User.js b/src/models/User.js
index bec78fc16..0a2b1f62a 100644
--- a/src/models/User.js
+++ b/src/models/User.js
@@ -20,6 +20,10 @@ export default class User {
 
   @observable isSubscriptionOwner = false;
 
+  @observable hasSubscription = false;
+
+  @observable hadSubscription = false;
+
   @observable isPremium = false;
 
   @observable beta = false;
@@ -32,6 +36,9 @@ export default class User {
 
   @observable locale = false;
 
+  @observable team = {};
+
+
   constructor(data) {
     if (!data.id) {
       throw Error('User requires Id');
@@ -47,8 +54,13 @@ export default class User {
     this.beta = data.beta || this.beta;
     this.donor = data.donor || this.donor;
     this.isDonor = data.isDonor || this.isDonor;
-    this.isSubscriptionOwner = data.isSubscriptionOwner || this.isSubscriptionOwner;
     this.isMiner = data.isMiner || this.isMiner;
     this.locale = data.locale || this.locale;
+
+    this.isSubscriptionOwner = data.isSubscriptionOwner || this.isSubscriptionOwner;
+    this.hasSubscription = data.hasSubscription || this.hasSubscription;
+    this.hadSubscription = data.hadSubscription || this.hadSubscription;
+
+    this.team = data.team || this.team;
   }
 }
diff --git a/src/stores/AppStore.js b/src/stores/AppStore.js
index 72c4b4d0b..6054e6721 100644
--- a/src/stores/AppStore.js
+++ b/src/stores/AppStore.js
@@ -8,6 +8,9 @@ import AutoLaunch from 'auto-launch';
 import prettyBytes from 'pretty-bytes';
 import ms from 'ms';
 import { URL } from 'url';
+import os from 'os';
+import path from 'path';
+import { readJsonSync } from 'fs-extra';
 
 import Store from './lib/Store';
 import Request from './lib/Request';
@@ -23,7 +26,7 @@ import { isValidExternalURL } from '../helpers/url-helpers';
 
 const debug = require('debug')('Franz:AppStore');
 
-const { app, systemPreferences } = remote;
+const { app, systemPreferences, screen } = remote;
 
 const mainWindow = remote.getCurrentWindow();
 
@@ -182,6 +185,26 @@ export default class AppStore extends Store {
     return prettyBytes(this.getAppCacheSizeRequest.execute().result || 0);
   }
 
+  @computed get debugInfo() {
+    return {
+      host: {
+        platform: process.platform,
+        release: os.release(),
+        screens: screen.getAllDisplays(),
+      },
+      franz: {
+        version: app.getVersion(),
+        electron: process.versions.electron,
+        installedRecipes: this.stores.recipes.all.map(recipe => ({ id: recipe.id, version: recipe.version })),
+        devRecipes: this.stores.recipePreviews.dev.map(recipe => ({ id: recipe.id, version: recipe.version })),
+        services: this.stores.services.all.map(service => ({ id: service.id, recipe: service.recipe.id })),
+        workspaces: this.stores.workspaces.workspaces.map(workspace => ({ id: workspace.id, services: workspace.services })),
+        windowSettings: readJsonSync(path.join(app.getPath('userData'), 'window-state.json')),
+        user: this.stores.user.data.id,
+      },
+    };
+  }
+
   // Actions
   @action _notify({
     title, options, notificationId, serviceId = null,
@@ -189,7 +212,7 @@ export default class AppStore extends Store {
     if (this.stores.settings.all.app.isAppMuted) return;
 
     // TODO: is there a simple way to use blobs for notifications without storing them on disk?
-    if (options.icon.startsWith('blob:')) {
+    if (options.icon && options.icon.startsWith('blob:')) {
       delete options.icon;
     }
 
@@ -334,6 +357,8 @@ export default class AppStore extends Store {
       this.locale = this._getDefaultLocale();
     }
 
+    moment.locale(this.locale);
+
     debug(`Set locale to "${this.locale}"`);
   }
 
diff --git a/src/stores/FeaturesStore.js b/src/stores/FeaturesStore.js
index e7832088b..cf28b6bec 100644
--- a/src/stores/FeaturesStore.js
+++ b/src/stores/FeaturesStore.js
@@ -16,6 +16,9 @@ import workspaces from '../features/workspaces';
 import shareFranz from '../features/shareFranz';
 import announcements from '../features/announcements';
 import settingsWS from '../features/settingsWS';
+import serviceLimit from '../features/serviceLimit';
+import communityRecipes from '../features/communityRecipes';
+import todos from '../features/todos';
 
 import { DEFAULT_FEATURES_CONFIG } from '../config';
 
@@ -75,5 +78,8 @@ export default class FeaturesStore extends Store {
     shareFranz(this.stores, this.actions);
     announcements(this.stores, this.actions);
     settingsWS(this.stores, this.actions);
+    serviceLimit(this.stores, this.actions);
+    communityRecipes(this.stores, this.actions);
+    todos(this.stores, this.actions);
   }
 }
diff --git a/src/stores/RecipesStore.js b/src/stores/RecipesStore.js
index ab64bf79c..d51192078 100644
--- a/src/stores/RecipesStore.js
+++ b/src/stores/RecipesStore.js
@@ -20,6 +20,11 @@ export default class RecipesStore extends Store {
     // Register action handlers
     this.actions.recipe.install.listen(this._install.bind(this));
     this.actions.recipe.update.listen(this._update.bind(this));
+
+    // Reactions
+    this.registerReactions([
+      this._checkIfRecipeIsInstalled.bind(this),
+    ]);
   }
 
   setup() {
@@ -99,4 +104,26 @@ export default class RecipesStore extends Store {
       syncUpdate(0);
     }
   }
+
+  async _checkIfRecipeIsInstalled() {
+    const { router } = this.stores;
+
+    const match = matchRoute('/settings/services/add/:id', router.location.pathname);
+    if (match) {
+      const recipeId = match.id;
+
+      if (!this.stores.recipes.isInstalled(recipeId)) {
+        router.push('/settings/recipes');
+        debug(`Recipe ${recipeId} is not installed, trying to install it`);
+
+        const recipe = await this.installRecipeRequest.execute(recipeId)._promise;
+        if (recipe) {
+          await this.allRecipesRequest.invalidate({ immediately: true })._promise;
+          router.push(`/settings/services/add/${recipeId}`);
+        } else {
+          router.push('/settings/recipes');
+        }
+      }
+    }
+  }
 }
diff --git a/src/stores/ServicesStore.js b/src/stores/ServicesStore.js
index d63302fce..2fc543192 100644
--- a/src/stores/ServicesStore.js
+++ b/src/stores/ServicesStore.js
@@ -13,6 +13,8 @@ import CachedRequest from './lib/CachedRequest';
 import { matchRoute } from '../helpers/routing-helpers';
 import { gaEvent, statsEvent } from '../lib/analytics';
 import { workspaceStore } from '../features/workspaces';
+import { serviceLimitStore } from '../features/serviceLimit';
+import { RESTRICTION_TYPES } from '../models/Service';
 
 const debug = require('debug')('Franz:ServiceStore');
 
@@ -75,6 +77,7 @@ export default class ServicesStore extends Store {
       this._saveActiveService.bind(this),
       this._logoutReaction.bind(this),
       this._handleMuteSettings.bind(this),
+      this._restrictServiceAccess.bind(this),
     ]);
 
     // Just bind this
@@ -98,7 +101,10 @@ export default class ServicesStore extends Store {
     if (this.stores.user.isLoggedIn) {
       const services = this.allServicesRequest.execute().result;
       if (services) {
-        return observable(services.slice().slice().sort((a, b) => a.order - b.order));
+        return observable(services.slice().slice().sort((a, b) => a.order - b.order).map((s, index) => {
+          s.index = index;
+          return s;
+        }));
       }
     }
     return [];
@@ -148,22 +154,13 @@ export default class ServicesStore extends Store {
   }
 
   async _showAddServiceInterface({ recipeId }) {
-    const recipesStore = this.stores.recipes;
-
-    if (recipesStore.isInstalled(recipeId)) {
-      debug(`Recipe ${recipeId} is installed`);
-      this._redirectToAddServiceRoute(recipeId);
-    } else {
-      debug(`Recipe ${recipeId} is not installed`);
-      // We access the RecipeStore action directly
-      // returns Promise instead of action
-      await this.stores.recipes._install({ recipeId });
-      this._redirectToAddServiceRoute(recipeId);
-    }
+    this.stores.router.push(`/settings/services/add/${recipeId}`);
   }
 
   // Actions
   @action async _createService({ recipeId, serviceData, redirect = true }) {
+    if (serviceLimitStore.userHasReachedServiceLimit) return;
+
     const data = this._cleanUpTeamIdAndCustomUrl(recipeId, serviceData);
 
     const response = await this.createServiceRequest.execute(recipeId, data)._promise;
@@ -451,6 +448,9 @@ export default class ServicesStore extends Store {
           redirect: false,
         });
       }
+    } else if (channel === 'feature:todos') {
+      Object.assign(args[0].data, { serviceId });
+      this.actions.todos.handleHostMessage(args[0]);
     }
   }
 
@@ -689,12 +689,36 @@ export default class ServicesStore extends Store {
     return serviceData;
   }
 
-  // Helper
-  _redirectToAddServiceRoute(recipeId) {
-    const route = `/settings/services/add/${recipeId}`;
-    this.stores.router.push(route);
+  _restrictServiceAccess() {
+    const { features } = this.stores.features;
+    const { userHasReachedServiceLimit, serviceLimit } = this.stores.serviceLimit;
+
+    this.all.map((service, index) => {
+      if (userHasReachedServiceLimit) {
+        service.isServiceAccessRestricted = index >= serviceLimit;
+
+        if (service.isServiceAccessRestricted) {
+          service.restrictionType = RESTRICTION_TYPES.SERVICE_LIMIT;
+
+          debug('Restricting access to server due to service limit');
+        }
+      }
+
+      if (service.isUsingCustomUrl) {
+        service.isServiceAccessRestricted = !features.isCustomUrlIncludedInCurrentPlan;
+
+        if (service.isServiceAccessRestricted) {
+          service.restrictionType = RESTRICTION_TYPES.CUSTOM_URL;
+
+          debug('Restricting access to server due to custom url');
+        }
+      }
+
+      return service;
+    });
   }
 
+  // Helper
   _initializeServiceRecipeInWebview(serviceId) {
     const service = this.one(serviceId);
 
diff --git a/src/stores/UIStore.js b/src/stores/UIStore.js
index a95a8e1e0..9680c5bcc 100644
--- a/src/stores/UIStore.js
+++ b/src/stores/UIStore.js
@@ -1,4 +1,9 @@
-import { action, observable, computed } from 'mobx';
+import {
+  action,
+  observable,
+  computed,
+  reaction,
+} from 'mobx';
 import { theme } from '@meetfranz/theme';
 
 import Store from './lib/Store';
@@ -15,10 +20,18 @@ export default class UIStore extends Store {
     this.actions.ui.toggleServiceUpdatedInfoBar.listen(this._toggleServiceUpdatedInfoBar.bind(this));
   }
 
+  setup() {
+    reaction(
+      () => this.isDarkThemeActive,
+      () => this._setupThemeInDOM(),
+      { fireImmediately: true },
+    );
+  }
+
   @computed get showMessageBadgesEvenWhenMuted() {
     const settings = this.stores.settings.all;
 
-    return (settings.app.isAppMuted && settings.app.showMessageBadgeWhenMuted) || !settings.isAppMuted;
+    return (settings.app.isAppMuted && settings.app.showMessageBadgeWhenMuted) || !settings.app.isAppMuted;
   }
 
   @computed get isDarkThemeActive() {
@@ -26,7 +39,7 @@ export default class UIStore extends Store {
   }
 
   @computed get theme() {
-    if (this.isDarkThemeActive) return theme('dark');
+    if (this.isDarkThemeActive || this.stores.settings.app.darkMode) return theme('dark');
     return theme('default');
   }
 
@@ -47,4 +60,15 @@ export default class UIStore extends Store {
     }
     this.showServicesUpdatedInfoBar = visibility;
   }
+
+  // Reactions
+  _setupThemeInDOM() {
+    const body = document.querySelector('body');
+
+    if (!this.isDarkThemeActive) {
+      body.classList.remove('theme__dark');
+    } else {
+      body.classList.add('theme__dark');
+    }
+  }
 }
diff --git a/src/stores/UserStore.js b/src/stores/UserStore.js
index b5423af3b..f3dfbdbf0 100644
--- a/src/stores/UserStore.js
+++ b/src/stores/UserStore.js
@@ -2,12 +2,14 @@ import { observable, computed, action } from 'mobx';
 import moment from 'moment';
 import jwt from 'jsonwebtoken';
 import localStorage from 'mobx-localstorage';
+import ms from 'ms';
 
 import { isDevMode } from '../environment';
 import Store from './lib/Store';
 import Request from './lib/Request';
 import CachedRequest from './lib/CachedRequest';
 import { gaEvent } from '../lib/analytics';
+import { sleep } from '../helpers/async-helpers';
 
 const debug = require('debug')('Franz:UserStore');
 
@@ -37,6 +39,8 @@ export default class UserStore extends Store {
 
   @observable passwordRequest = new Request(this.api.user, 'password');
 
+  @observable activateTrialRequest = new Request(this.api.user, 'activateTrial');
+
   @observable inviteRequest = new Request(this.api.user, 'invite');
 
   @observable getUserInfoRequest = new CachedRequest(this.api.user, 'getInfo');
@@ -57,7 +61,9 @@ export default class UserStore extends Store {
 
   @observable accountType;
 
-  @observable hasCompletedSignup = null;
+  @observable hasCompletedSignup = false;
+
+  @observable hasActivatedTrial = false;
 
   @observable userData = {};
 
@@ -77,6 +83,7 @@ export default class UserStore extends Store {
     this.actions.user.retrievePassword.listen(this._retrievePassword.bind(this));
     this.actions.user.logout.listen(this._logout.bind(this));
     this.actions.user.signup.listen(this._signup.bind(this));
+    this.actions.user.activateTrial.listen(this._activateTrial.bind(this));
     this.actions.user.invite.listen(this._invite.bind(this));
     this.actions.user.update.listen(this._update.bind(this));
     this.actions.user.resetStatus.listen(this._resetStatus.bind(this));
@@ -87,6 +94,7 @@ export default class UserStore extends Store {
     this.registerReactions([
       this._requireAuthenticatedUser,
       this._getUserData.bind(this),
+      this._resetTrialActivationState.bind(this),
     ]);
   }
 
@@ -199,6 +207,24 @@ export default class UserStore extends Store {
     gaEvent('User', 'retrievePassword');
   }
 
+  @action async _activateTrial({ planId }) {
+    debug('activate trial', planId);
+
+    this.activateTrialRequest.execute({
+      plan: planId,
+    });
+
+    await this.activateTrialRequest._promise;
+
+    this.hasActivatedTrial = true;
+
+    this.stores.features.featuresRequest.invalidate({ immediately: true });
+    this.stores.user.getUserInfoRequest.invalidate({ immediately: true });
+
+
+    gaEvent('User', 'activateTrial');
+  }
+
   @action async _invite({ invites }) {
     const data = invites.filter(invite => invite.email !== '');
 
@@ -318,6 +344,14 @@ export default class UserStore extends Store {
     }
   }
 
+  async _resetTrialActivationState() {
+    if (this.hasActivatedTrial) {
+      await sleep(ms('12s'));
+
+      this.hasActivatedTrial = false;
+    }
+  }
+
   // Helpers
   _parseToken(authToken) {
     try {
@@ -347,6 +381,15 @@ export default class UserStore extends Store {
     }
   }
 
+  getAuthURL(url) {
+    const parsedUrl = new URL(url);
+    const params = new URLSearchParams(parsedUrl.search.slice(1));
+
+    params.append('authToken', this.authToken);
+
+    return `${parsedUrl.origin}${parsedUrl.pathname}?${params.toString()}`;
+  }
+
   async _migrateUserLocale() {
     await this.getUserInfoRequest._promise;
 
diff --git a/src/stores/index.js b/src/stores/index.js
index 1912418a2..10dd56665 100644
--- a/src/stores/index.js
+++ b/src/stores/index.js
@@ -12,6 +12,9 @@ import RequestStore from './RequestStore';
 import GlobalErrorStore from './GlobalErrorStore';
 import { workspaceStore } from '../features/workspaces';
 import { announcementsStore } from '../features/announcements';
+import { serviceLimitStore } from '../features/serviceLimit';
+import { communityRecipesStore } from '../features/communityRecipes';
+import { todosStore } from '../features/todos';
 
 export default (api, actions, router) => {
   const stores = {};
@@ -31,6 +34,9 @@ export default (api, actions, router) => {
     globalError: new GlobalErrorStore(stores, api, actions),
     workspaces: workspaceStore,
     announcements: announcementsStore,
+    serviceLimit: serviceLimitStore,
+    communityRecipes: communityRecipesStore,
+    todos: todosStore,
   });
   // Initialize all stores
   Object.keys(stores).forEach((name) => {
diff --git a/src/stores/lib/Reaction.js b/src/stores/lib/Reaction.js
index f2642908f..f8009b7f6 100644
--- a/src/stores/lib/Reaction.js
+++ b/src/stores/lib/Reaction.js
@@ -13,15 +13,15 @@ export default class Reaction {
 
   start() {
     if (!this.isRunning) {
-      this.dispose = autorun(() => this.reaction());
-      this.isActive = true;
+      this.dispose = autorun(this.reaction);
+      this.isRunning = true;
     }
   }
 
   stop() {
     if (this.isRunning) {
       this.dispose();
-      this.isActive = false;
+      this.isRunning = false;
     }
   }
 }
diff --git a/src/styles/auth.scss b/src/styles/auth.scss
index 0a075036a..154a71a36 100644
--- a/src/styles/auth.scss
+++ b/src/styles/auth.scss
@@ -9,7 +9,7 @@
   }
 
   .auth__logo.auth__logo--sm {
-    border: 4px solid $dark-theme-black;
+    border: none;
     box-shadow: 0 0 6px rgba($dark-theme-black, .5);
   }
 
diff --git a/src/styles/layout.scss b/src/styles/layout.scss
index e858b7904..10027da60 100644
--- a/src/styles/layout.scss
+++ b/src/styles/layout.scss
@@ -33,13 +33,19 @@ html { overflow: hidden; }
 }
 
 .app {
-  display: flex;
-  flex-direction: column;
+  //display: flex;
+
+  .app__content {
+    display: flex;
+    width: calc(100% + 300px);
+  }
 
-  .app__content { display: flex; }
+  .app__main-content {
+    display: flex;
+    width: 100%;
+  }
 
   .app__service {
-    position: relative;
     display: flex;
     flex: 1;
     flex-direction: column;
diff --git a/src/styles/recipes.scss b/src/styles/recipes.scss
index 84222e1fe..5bdc60a57 100644
--- a/src/styles/recipes.scss
+++ b/src/styles/recipes.scss
@@ -2,6 +2,7 @@
 
 .theme__dark .recipe-teaser {
   background-color: $dark-theme-gray-dark;
+  color: $dark-theme-text-color;
 
   &:hover { background-color: $dark-theme-gray; }
 }
@@ -12,7 +13,7 @@
     display: flex;
     flex-flow: row wrap;
     height: auto;
-    min-height: 70%;
+    // min-height: 70%;
 
     &.recipes__list--disabled {
       filter: grayscale(100%);
diff --git a/src/styles/reset.scss b/src/styles/reset.scss
index 80328dcef..d87ce652a 100644
--- a/src/styles/reset.scss
+++ b/src/styles/reset.scss
@@ -51,7 +51,6 @@ button {
   padding: 0;
 
   &:focus { outline: 0; }
-  .theme__dark & { color: $dark-theme-gray-smoke; }
 }
 
 html {
@@ -64,7 +63,7 @@ body {
   font-size: 1.4rem;
   line-height: 1;
 
-  .theme__dark { color: $dark-theme-gray-smoke; }
+  &.theme__dark { color: $dark-theme-gray-smoke; }
 }
 
 * {
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index 1baff8b54..0955aaa0c 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -360,6 +360,7 @@
     .account__subscription-button { margin-left: auto; }
     .franz-form__button { white-space: nowrap; }
     div { height: auto; }
+    [data-type="franz-button"] div { height: 100% }
 
     .invoices {
       width: 100%;
diff --git a/src/webview/contextMenu.js b/src/webview/contextMenu.js
index 967e8e667..663b1ebca 100644
--- a/src/webview/contextMenu.js
+++ b/src/webview/contextMenu.js
@@ -39,6 +39,23 @@ const buildMenuTpl = (props, suggestions, isSpellcheckEnabled, defaultSpellcheck
     {
       type: 'separator',
     }, {
+      id: 'createTodo',
+      label: `Create todo: "${textSelection.length > 15 ? `${textSelection.slice(0, 15)}...` : textSelection}"`,
+      visible: hasText,
+      click() {
+        debug('Create todo from selected text', textSelection);
+        ipcRenderer.sendToHost('feature:todos', {
+          action: 'create:todo',
+          data: {
+            title: textSelection,
+            url: window.location.href,
+          },
+        });
+      },
+    },
+    {
+      type: 'separator',
+    }, {
       id: 'lookup',
       label: `Look Up "${textSelection.length > 15 ? `${textSelection.slice(0, 15)}...` : textSelection}"`,
       visible: isMac && props.mediaType === 'none' && hasText,
@@ -280,13 +297,12 @@ const buildMenuTpl = (props, suggestions, isSpellcheckEnabled, defaultSpellcheck
 };
 
 export default function contextMenu(spellcheckProvider, isSpellcheckEnabled, getDefaultSpellcheckerLanguage, getSpellcheckerLanguage) {
-  webContents.on('context-menu', async (e, props) => {
+  webContents.on('context-menu', (e, props) => {
     e.preventDefault();
 
     let suggestions = [];
     if (spellcheckProvider && props.misspelledWord) {
-      debug('Mispelled word', props.misspelledWord);
-      suggestions = await spellcheckProvider.getSuggestion(props.misspelledWord);
+      suggestions = spellcheckProvider.getSuggestion(props.misspelledWord);
 
       debug('Suggestions', suggestions);
     }
diff --git a/src/webview/spellchecker.js b/src/webview/spellchecker.js
index 417d1ea1a..9158b3b94 100644
--- a/src/webview/spellchecker.js
+++ b/src/webview/spellchecker.js
@@ -1,8 +1,6 @@
 import { webFrame } from 'electron';
-import { attachSpellCheckProvider, SpellCheckerProvider } from 'electron-hunspell';
-import { ENVIRONMENT } from 'hunspell-asm';
+import { SpellCheckerProvider } from 'electron-hunspell';
 import path from 'path';
-import { readFileSync } from 'fs';
 
 import { DICTIONARY_PATH } from '../config';
 import { SPELLCHECKER_LOCALES } from '../i18n/languages';
@@ -12,12 +10,11 @@ const debug = require('debug')('Franz:spellchecker');
 let provider;
 let currentDict;
 let _isEnabled = false;
-let attached;
 
 async function loadDictionary(locale) {
   try {
     const fileLocation = path.join(DICTIONARY_PATH, `hunspell-dict-${locale}/${locale}`);
-    await provider.loadDictionary(locale, readFileSync(`${fileLocation}.dic`), readFileSync(`${fileLocation}.aff`));
+    await provider.loadDictionary(locale, `${fileLocation}.dic`, `${fileLocation}.aff`);
     debug('Loaded dictionary', locale, 'from', fileLocation);
   } catch (err) {
     console.error('Could not load dictionary', err);
@@ -44,7 +41,7 @@ export async function switchDict(locale) {
       provider.unloadDictionary(locale);
     }
     loadDictionary(locale);
-    attached.switchLanguage(locale);
+    provider.switchDictionary(locale);
 
     debug('Switched dictionary to', locale);
 
@@ -61,14 +58,12 @@ export default async function initialize(languageCode = 'en-us') {
     const locale = languageCode.toLowerCase();
 
     debug('Init spellchecker');
-    await provider.initialize({ environment: ENVIRONMENT.NODE });
-
-    debug('Attaching spellcheck provider');
-    attached = await attachSpellCheckProvider(provider);
+    await provider.initialize();
+    // await loadDictionaries();
 
     debug('Available spellchecker dictionaries', provider.availableDictionaries);
 
-    attached.switchLanguage(locale);
+    switchDict(locale);
 
     return provider;
   } catch (err) {