Merge branch 'develop' into l10n_develop

74 files changed, 2808 insertions, 738 deletions

diff --git a/src/actions/index.js b/src/actions/index.js
index 336344d76..9d3684edc 100644
--- a/src/actions/index.js
+++ b/src/actions/index.js
@@ -14,6 +14,8 @@ import requests from './requests';
 import announcements from '../features/announcements/actions';
 import workspaces from '../features/workspaces/actions';
 import todos from '../features/todos/actions';
+import planSelection from '../features/planSelection/actions';
+import trialStatusBar from '../features/trialStatusBar/actions';
 
 const actions = Object.assign({}, {
   service,
@@ -33,4 +35,6 @@ export default Object.assign(
   { announcements },
   { workspaces },
   { todos },
+  { planSelection },
+  { trialStatusBar },
 );
diff --git a/src/actions/payment.js b/src/actions/payment.js
index 2aaefc025..f61faf197 100644
--- a/src/actions/payment.js
+++ b/src/actions/payment.js
@@ -4,5 +4,9 @@ export default {
   createHostedPage: {
     planId: PropTypes.string.isRequired,
   },
+  upgradeAccount: {
+    planId: PropTypes.string.isRequired,
+    onCloseWindow: PropTypes.func,
+  },
   createDashboardUrl: {},
 };
diff --git a/src/actions/user.js b/src/actions/user.js
index 5d7d9a899..7061a367a 100644
--- a/src/actions/user.js
+++ b/src/actions/user.js
@@ -11,8 +11,10 @@ export default {
     lastname: PropTypes.string.isRequired,
     email: PropTypes.string.isRequired,
     password: PropTypes.string.isRequired,
-    accountType: PropTypes.string.isRequired,
+    accountType: PropTypes.string,
     company: PropTypes.string,
+    plan: PropTypes.string,
+    currency: PropTypes.string,
   },
   retrievePassword: {
     email: PropTypes.string.isRequired,
diff --git a/src/api/server/ServerApi.js b/src/api/server/ServerApi.js
index 02f6b389d..a5d636b4e 100644
--- a/src/api/server/ServerApi.js
+++ b/src/api/server/ServerApi.js
@@ -87,7 +87,7 @@ export default class ServerApi {
     }
     const trial = await request.json();
 
-    debug('ServerApi::signup resolves', trial);
+    debug('ServerApi::activateTrial resolves', trial);
     return true;
   }
 
diff --git a/src/components/auth/Login.js b/src/components/auth/Login.js
index e58016e25..e25121de0 100644
--- a/src/components/auth/Login.js
+++ b/src/components/auth/Login.js
@@ -70,7 +70,7 @@ const messages = defineMessages({
   },
 });
 
-export default @observer @inject('actions') class Login extends Component {
+export default @inject('actions') @observer class Login extends Component {
   static propTypes = {
     onSubmit: PropTypes.func.isRequired,
     isSubmitting: PropTypes.bool.isRequired,
diff --git a/src/components/auth/Pricing.js b/src/components/auth/Pricing.js
index aadb18d91..593cb9c4b 100644
--- a/src/components/auth/Pricing.js
+++ b/src/components/auth/Pricing.js
@@ -13,12 +13,20 @@ import { FeatureList } from '../ui/FeatureList';
 
 const messages = defineMessages({
   headline: {
-    id: 'pricing.trial.headline',
-    defaultMessage: '!!!Franz Professional',
+    id: 'pricing.trial.headline.pro',
+    defaultMessage: '!!!Hi {name}, welcome to Franz',
   },
-  personalOffer: {
-    id: 'pricing.trial.subheadline',
-    defaultMessage: '!!!Your personal welcome offer:',
+  specialTreat: {
+    id: 'pricing.trial.intro.specialTreat',
+    defaultMessage: '!!!We have a special treat for you.',
+  },
+  tryPro: {
+    id: 'pricing.trial.intro.tryPro',
+    defaultMessage: '!!!Enjoy the full Franz Professional experience completely free for 14 days.',
+  },
+  happyMessaging: {
+    id: 'pricing.trial.intro.happyMessaging',
+    defaultMessage: '!!!Happy messaging,',
   },
   noStringsAttachedHeadline: {
     id: 'pricing.trial.terms.headline',
@@ -32,13 +40,21 @@ const messages = defineMessages({
     id: 'pricing.trial.terms.automaticTrialEnd',
     defaultMessage: '!!!Your free trial ends automatically after 14 days',
   },
+  trialWorth: {
+    id: 'pricing.trial.terms.trialWorth',
+    defaultMessage: '!!!Free trial (normally {currency}{price} per month)',
+  },
   activationError: {
     id: 'pricing.trial.error',
     defaultMessage: '!!!Sorry, we could not activate your trial!',
   },
   ctaAccept: {
     id: 'pricing.trial.cta.accept',
-    defaultMessage: '!!!Yes, upgrade my account to Franz Professional',
+    defaultMessage: '!!!Start my 14-day Franz Professional Trial ',
+  },
+  ctaStart: {
+    id: 'pricing.trial.cta.start',
+    defaultMessage: '!!!Start using Franz',
   },
   ctaSkip: {
     id: 'pricing.trial.cta.skip',
@@ -58,6 +74,7 @@ const styles = theme => ({
   welcomeOffer: {
     textAlign: 'center',
     fontWeight: 'bold',
+    marginBottom: '6 !important',
   },
   keyTerms: {
     textAlign: 'center',
@@ -93,6 +110,34 @@ const styles = theme => ({
     margin: [20, 0, 0],
     color: theme.styleTypes.danger.accent,
   },
+  priceContainer: {
+    display: 'flex',
+    justifyContent: 'space-evenly',
+    margin: [10, 0, 15],
+  },
+  price: {
+    '& sup': {
+      verticalAlign: 14,
+      fontSize: 20,
+    },
+  },
+  figure: {
+    fontSize: 40,
+  },
+  regularPrice: {
+    position: 'relative',
+
+    '&:before': {
+      content: '" "',
+      position: 'absolute',
+      width: '130%',
+      height: 1,
+      top: 14,
+      left: -12,
+      borderBottom: [3, 'solid', 'red'],
+      transform: 'rotateZ(-20deg)',
+    },
+  },
 });
 
 export default @injectSheet(styles) @observer class Signup extends Component {
@@ -101,7 +146,11 @@ export default @injectSheet(styles) @observer class Signup extends Component {
     isLoadingRequiredData: PropTypes.bool.isRequired,
     isActivatingTrial: PropTypes.bool.isRequired,
     trialActivationError: PropTypes.bool.isRequired,
+    canSkipTrial: PropTypes.bool.isRequired,
     classes: PropTypes.object.isRequired,
+    currency: PropTypes.string.isRequired,
+    price: PropTypes.number.isRequired,
+    name: PropTypes.string.isRequired,
   };
 
   static contextTypes = {
@@ -114,10 +163,16 @@ export default @injectSheet(styles) @observer class Signup extends Component {
       isLoadingRequiredData,
       isActivatingTrial,
       trialActivationError,
+      canSkipTrial,
       classes,
+      currency,
+      price,
+      name,
     } = this.props;
     const { intl } = this.context;
 
+    const [intPart, fractionPart] = (price).toString().split('.');
+
     return (
       <div className={classnames('auth__scroll-container', classes.container)}>
         <div className={classnames('auth__container', 'auth__container--signup', classes.content)}>
@@ -129,30 +184,51 @@ export default @injectSheet(styles) @observer class Signup extends Component {
                 alt=""
               />
             )}
-            <p className={classes.welcomeOffer}>{intl.formatMessage(messages.personalOffer)}</p>
-            <h1>{intl.formatMessage(messages.headline)}</h1>
+            <h1>{intl.formatMessage(messages.headline, { name })}</h1>
             <div className="auth__letter">
               <p>
-                We built Franz with a lot of effort, manpower and love,
-                to boost up your messaging experience.
+                {intl.formatMessage(messages.specialTreat)}
                 <br />
               </p>
               <p>
-                Get the free 14 day Franz Professional trial and see your communication evolving.
+                {intl.formatMessage(messages.tryPro)}
                 <br />
               </p>
               <p>
-                Thanks for being a hero.
+                {intl.formatMessage(messages.happyMessaging)}
               </p>
               <p>
                 <strong>Stefan Malzner</strong>
               </p>
             </div>
+            <div className={classes.priceContainer}>
+              <p className={classnames(classes.price, classes.regularPrice)}>
+                <span className={classes.figure}>
+                  {currency}
+                  {intPart}
+                </span>
+                <sup>{fractionPart}</sup>
+              </p>
+              <p className={classnames(classes.price, classes.trialPrice)}>
+                <span className={classes.figure}>
+                  {currency}
+                  0
+                </span>
+                <sup>00</sup>
+              </p>
+            </div>
             <div className={classes.keyTerms}>
               <H2>
                 {intl.formatMessage(messages.noStringsAttachedHeadline)}
               </H2>
               <ul className={classes.keyTermsList}>
+                <FeatureItem
+                  icon="👉"
+                  name={intl.formatMessage(messages.trialWorth, {
+                    currency,
+                    price,
+                  })}
+                />
                 <FeatureItem icon="👉" name={intl.formatMessage(messages.noCreditCard)} />
                 <FeatureItem icon="👉" name={intl.formatMessage(messages.automaticTrialEnd)} />
               </ul>
@@ -161,33 +237,23 @@ export default @injectSheet(styles) @observer class Signup extends Component {
               <p className={classes.error}>{intl.formatMessage(messages.activationError)}</p>
             )}
             <Button
-              label={intl.formatMessage(messages.ctaAccept)}
+              label={intl.formatMessage(!canSkipTrial ? messages.ctaStart : messages.ctaAccept)}
               className={classes.cta}
               onClick={onSubmit}
               busy={isActivatingTrial}
               disabled={isLoadingRequiredData || isActivatingTrial}
             />
-            <p className={classes.skipLink}>
-              <a href="#/">{intl.formatMessage(messages.ctaSkip)}</a>
-            </p>
+            {canSkipTrial && (
+              <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 47e9daf18..a166155a7 100644
--- a/src/components/auth/Signup.js
+++ b/src/components/auth/Signup.js
@@ -74,7 +74,7 @@ const messages = defineMessages({
   },
 });
 
-export default @observer @inject('actions') class Signup extends Component {
+export default @inject('actions') @observer class Signup extends Component {
   static propTypes = {
     onSubmit: PropTypes.func.isRequired,
     isSubmitting: PropTypes.bool.isRequired,
diff --git a/src/components/auth/Welcome.js b/src/components/auth/Welcome.js
index 2ca8b430f..1453c1d7c 100644
--- a/src/components/auth/Welcome.js
+++ b/src/components/auth/Welcome.js
@@ -22,7 +22,7 @@ const messages = defineMessages({
   },
 });
 
-export default @observer @inject('actions') class Login extends Component {
+export default @inject('actions') @observer class Login extends Component {
   static propTypes = {
     loginRoute: PropTypes.string.isRequired,
     signupRoute: PropTypes.string.isRequired,
diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js
index 2b0719f92..80e6daf19 100644
--- a/src/components/layout/AppLayout.js
+++ b/src/components/layout/AppLayout.js
@@ -19,6 +19,8 @@ import { workspaceStore } from '../../features/workspaces';
 import AppUpdateInfoBar from '../AppUpdateInfoBar';
 import TrialActivationInfoBar from '../TrialActivationInfoBar';
 import Todos from '../../features/todos/containers/TodosScreen';
+import PlanSelection from '../../features/planSelection/containers/PlanSelectionScreen';
+import TrialStatusBar from '../../features/trialStatusBar/containers/TrialStatusBarScreen';
 
 function createMarkup(HTMLString) {
   return { __html: HTMLString };
@@ -189,9 +191,11 @@ class AppLayout extends Component {
               <QuickSwitch />
               {services}
               {children}
+              <TrialStatusBar />
             </div>
             <Todos />
           </div>
+          <PlanSelection />
         </div>
       </ErrorBoundary>
     );
diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js
index f588449f4..83dc34a52 100644
--- a/src/components/settings/account/AccountDashboard.js
+++ b/src/components/settings/account/AccountDashboard.js
@@ -109,6 +109,7 @@ class AccountDashboard extends Component {
     openBilling: PropTypes.func.isRequired,
     upgradeToPro: PropTypes.func.isRequired,
     openInvoices: PropTypes.func.isRequired,
+    onCloseSubscriptionWindow: PropTypes.func.isRequired,
   };
 
   static contextTypes = {
@@ -130,6 +131,7 @@ class AccountDashboard extends Component {
       openBilling,
       upgradeToPro,
       openInvoices,
+      onCloseSubscriptionWindow,
     } = this.props;
     const { intl } = this.context;
 
@@ -215,7 +217,9 @@ class AccountDashboard extends Component {
                           {intl.formatMessage(messages.yourLicense)}
                         </H2>
                         <p>
-                          {isPremiumOverrideUser ? 'Franz Premium' : planName}
+                          Franz
+                          {' '}
+                          {isPremiumOverrideUser ? 'Premium' : planName}
                           {user.team.isTrial && (
                             <>
                               {' – '}
@@ -238,14 +242,16 @@ class AccountDashboard extends Component {
                             </p>
                           </>
                         )}
-                        <div className="manage-user-links">
-                          {!isProUser && (
+                        {!isProUser && (
+                          <div className="manage-user-links">
                             <Button
                               label={intl.formatMessage(messages.upgradeAccountToPro)}
                               className="franz-form__button--primary"
                               onClick={upgradeToPro}
                             />
-                          )}
+                          </div>
+                        )}
+                        <div className="manage-user-links">
                           <Button
                             label={intl.formatMessage(messages.manageSubscriptionButtonLabel)}
                             className="franz-form__button--inverted"
@@ -263,7 +269,9 @@ class AccountDashboard extends Component {
                   {!user.isPremium && (
                     <div className="account franz-form">
                       <div className="account__box">
-                        <SubscriptionForm />
+                        <SubscriptionForm
+                          onCloseWindow={onCloseSubscriptionWindow}
+                        />
                       </div>
                     </div>
                   )}
diff --git a/src/components/settings/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.js
index 49e73e569..192cfde7a 100644
--- a/src/components/settings/navigation/SettingsNavigation.js
+++ b/src/components/settings/navigation/SettingsNavigation.js
@@ -86,9 +86,9 @@ export default @inject('stores', 'actions') @observer class SettingsNavigation e
           },
         });
       }
+      this.props.stores.user.isLoggingOut = true;
     }
 
-    this.props.stores.user.isLoggingOut = true;
     this.props.stores.router.push(isLoggedIn ? '/auth/logout' : '/auth/welcome');
 
     if (isLoggedIn) {
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index 76138aa15..fa34ac60b 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -328,6 +328,18 @@ export default @observer class EditServiceForm extends Component {
                 )}
               </Tabs>
             )}
+
+            {recipe.message && (
+              <p
+                className="settings__message"
+                style={{
+                  marginTop: 0,
+                }}
+              >
+                <span className="mdi mdi-information" />
+                {recipe.message}
+              </p>
+            )}
             <div className="service-flex-grid">
               <div className="settings__options">
                 <div className="settings__settings-group">
@@ -417,13 +429,6 @@ export default @observer class EditServiceForm extends Component {
                 </div>
               </PremiumFeatureContainer>
             )}
-
-            {recipe.message && (
-              <p className="settings__message">
-                <span className="mdi mdi-information" />
-                {recipe.message}
-              </p>
-            )}
           </form>
         </div>
         <div className="settings__controls">
diff --git a/src/components/subscription/SubscriptionForm.js b/src/components/subscription/SubscriptionForm.js
index cdfbbe60d..ec486e5d0 100644
--- a/src/components/subscription/SubscriptionForm.js
+++ b/src/components/subscription/SubscriptionForm.js
@@ -30,11 +30,12 @@ const messages = defineMessages({
 
 const styles = () => ({
   activateTrialButton: {
-    margin: [40, 0, 50],
+    margin: [40, 'auto', 50],
+    display: 'flex',
   },
 });
 
-export default @observer @injectSheet(styles) class SubscriptionForm extends Component {
+export default @injectSheet(styles) @observer class SubscriptionForm extends Component {
   static propTypes = {
     selectPlan: PropTypes.func.isRequired,
     isActivatingTrial: PropTypes.bool.isRequired,
@@ -62,7 +63,6 @@ export default @observer @injectSheet(styles) class SubscriptionForm extends Com
           className={classes.activateTrialButton}
           busy={isActivatingTrial}
           onClick={selectPlan}
-          stretch
         />
         <div className="subscription__premium-info">
           <H3>
diff --git a/src/components/subscription/SubscriptionPopup.js b/src/components/subscription/SubscriptionPopup.js
index 12ef8a6e9..12a51ad7b 100644
--- a/src/components/subscription/SubscriptionPopup.js
+++ b/src/components/subscription/SubscriptionPopup.js
@@ -59,8 +59,10 @@ export default @observer class SubscriptionPopup extends Component {
             className="subscription-popup__webview"
 
             autosize
+            allowpopups
             src={encodeURI(url)}
             onDidNavigate={completeCheck}
+            onDidNavigateInPage={completeCheck}
           />
         </div>
         <div className="subscription-popup__toolbar franz-form">
diff --git a/src/components/subscription/TrialForm.js b/src/components/subscription/TrialForm.js
index 6ccdf20ae..d61b779ed 100644
--- a/src/components/subscription/TrialForm.js
+++ b/src/components/subscription/TrialForm.js
@@ -43,7 +43,8 @@ const messages = defineMessages({
 
 const styles = theme => ({
   activateTrialButton: {
-    margin: [40, 0, 10],
+    margin: [40, 'auto', 10],
+    display: 'flex',
   },
   allOptionsButton: {
     margin: [0, 0, 40],
@@ -93,7 +94,6 @@ export default @injectSheet(styles) @observer class TrialForm extends Component
           className={classes.activateTrialButton}
           busy={isActivatingTrial}
           onClick={activateTrial}
-          stretch
         />
         <Button
           label={intl.formatMessage(messages.allOptionsButton)}
diff --git a/src/components/ui/FeatureItem.js b/src/components/ui/FeatureItem.js
index 7c482c4d4..4926df470 100644
--- a/src/components/ui/FeatureItem.js
+++ b/src/components/ui/FeatureItem.js
@@ -10,6 +10,7 @@ const styles = theme => ({
     padding: [8, 0],
     display: 'flex',
     alignItems: 'center',
+    textAlign: 'left',
   },
   featureIcon: {
     fill: theme.brandSuccess,
diff --git a/src/components/ui/FeatureList.js b/src/components/ui/FeatureList.js
index 62944ad75..7ba8b54d7 100644
--- a/src/components/ui/FeatureList.js
+++ b/src/components/ui/FeatureList.js
@@ -3,12 +3,33 @@ import PropTypes from 'prop-types';
 import { defineMessages, intlShape } from 'react-intl';
 
 import { FeatureItem } from './FeatureItem';
+import { PLANS } from '../../config';
 
 const messages = defineMessages({
+  availableRecipes: {
+    id: 'pricing.features.recipes',
+    defaultMessage: '!!!Choose from more than 70 Services',
+  },
+  accountSync: {
+    id: 'pricing.features.accountSync',
+    defaultMessage: '!!!Account Synchronisation',
+  },
+  desktopNotifications: {
+    id: 'pricing.features.desktopNotifications',
+    defaultMessage: '!!!Desktop Notifications',
+  },
   unlimitedServices: {
     id: 'pricing.features.unlimitedServices',
     defaultMessage: '!!!Add unlimited services',
   },
+  upToThreeServices: {
+    id: 'pricing.features.upToThreeServices',
+    defaultMessage: '!!!Add up to 3 services',
+  },
+  upToSixServices: {
+    id: 'pricing.features.upToSixServices',
+    defaultMessage: '!!!Add up to 6 services',
+  },
   spellchecker: {
     id: 'pricing.features.spellchecker',
     defaultMessage: '!!!Spellchecker support',
@@ -51,11 +72,13 @@ export class FeatureList extends Component {
   static propTypes = {
     className: PropTypes.string,
     featureClassName: PropTypes.string,
+    plan: PropTypes.oneOf(PLANS),
   };
 
   static defaultProps = {
     className: '',
     featureClassName: '',
+    plan: false,
   }
 
   static contextTypes = {
@@ -66,21 +89,52 @@ export class FeatureList extends Component {
     const {
       className,
       featureClassName,
+      plan,
     } = this.props;
     const { intl } = this.context;
 
+    const features = [];
+    if (plan === PLANS.FREE) {
+      features.push(
+        messages.upToThreeServices,
+        messages.availableRecipes,
+        messages.accountSync,
+        messages.desktopNotifications,
+      );
+    } else if (plan === PLANS.PERSONAL) {
+      features.push(
+        messages.upToSixServices,
+        messages.spellchecker,
+        messages.appDelays,
+        messages.adFree,
+      );
+    } else if (plan === PLANS.PRO) {
+      features.push(
+        messages.unlimitedServices,
+        messages.workspaces,
+        messages.customWebsites,
+        // messages.onPremise,
+        messages.thirdPartyServices,
+        // messages.serviceProxies,
+      );
+    } else {
+      features.push(
+        messages.unlimitedServices,
+        messages.spellchecker,
+        messages.workspaces,
+        messages.customWebsites,
+        messages.onPremise,
+        messages.thirdPartyServices,
+        messages.serviceProxies,
+        messages.teamManagement,
+        messages.appDelays,
+        messages.adFree,
+      );
+    }
+
     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} />
+        {features.map(feature => <FeatureItem name={intl.formatMessage(feature)} className={featureClassName} />)}
       </ul>
     );
   }
diff --git a/src/components/ui/PremiumFeatureContainer/index.js b/src/components/ui/PremiumFeatureContainer/index.js
index 7ba353be3..36bf38c98 100644
--- a/src/components/ui/PremiumFeatureContainer/index.js
+++ b/src/components/ui/PremiumFeatureContainer/index.js
@@ -9,7 +9,7 @@ import { oneOrManyChildElements } from '../../../prop-types';
 import UserStore from '../../../stores/UserStore';
 
 import styles from './styles';
-import FeatureStore from '../../../stores/FeaturesStore';
+import FeaturesStore from '../../../stores/FeaturesStore';
 
 const messages = defineMessages({
   action: {
@@ -90,7 +90,7 @@ PremiumFeatureContainer.wrappedComponent.propTypes = {
   children: oneOrManyChildElements.isRequired,
   stores: PropTypes.shape({
     user: PropTypes.instanceOf(UserStore).isRequired,
-    features: PropTypes.instanceOf(FeatureStore).isRequired,
+    features: PropTypes.instanceOf(FeaturesStore).isRequired,
   }).isRequired,
   actions: PropTypes.shape({
     ui: PropTypes.shape({
diff --git a/src/config.js b/src/config.js
index e762f879f..761d26eea 100644
--- a/src/config.js
+++ b/src/config.js
@@ -125,10 +125,10 @@ export const ALLOWED_PROTOCOLS = [
 ];
 
 export const PLANS = {
-  PERSONAL: 'PERSONAL',
-  PRO: 'PRO',
-  LEGACY: 'LEGACY',
-  FREE: 'FREE',
+  PERSONAL: 'personal',
+  PRO: 'pro',
+  LEGACY: 'legacy',
+  FREE: 'free',
 };
 
 export const PLANS_MAPPING = {
diff --git a/src/containers/auth/PricingScreen.js b/src/containers/auth/PricingScreen.js
index af1651931..21c859c12 100644
--- a/src/containers/auth/PricingScreen.js
+++ b/src/containers/auth/PricingScreen.js
@@ -20,14 +20,19 @@ export default @inject('stores', 'actions') @observer class PricingScreen extend
     } = this.props;
 
     const { activateTrialRequest } = stores.user;
-    const { defaultTrialPlan } = stores.features.features;
+    const { defaultTrialPlan, canSkipTrial } = stores.features.anonymousFeatures;
 
-    actions.user.activateTrial({ planId: defaultTrialPlan });
-    await activateTrialRequest._promise;
-
-    if (!activateTrialRequest.isError) {
+    if (!canSkipTrial) {
       stores.router.push('/');
       stores.user.hasCompletedSignup = true;
+    } else {
+      actions.user.activateTrial({ planId: defaultTrialPlan });
+      await activateTrialRequest._promise;
+
+      if (!activateTrialRequest.isError) {
+        stores.router.push('/');
+        stores.user.hasCompletedSignup = true;
+      }
     }
   }
 
@@ -37,8 +42,17 @@ export default @inject('stores', 'actions') @observer class PricingScreen extend
       stores,
     } = this.props;
 
-    const { getUserInfoRequest, activateTrialRequest } = stores.user;
-    const { featuresRequest } = stores.features;
+    const { getUserInfoRequest, activateTrialRequest, data } = stores.user;
+    const { featuresRequest, features } = stores.features;
+
+    const { pricingConfig } = features;
+
+    let currency = '$';
+    let price = 5.99;
+    if (pricingConfig) {
+      ({ currency } = pricingConfig);
+      ({ price } = pricingConfig.plans.pro.yearly);
+    }
 
     return (
       <Pricing
@@ -46,7 +60,11 @@ export default @inject('stores', 'actions') @observer class PricingScreen extend
         isLoadingRequiredData={(getUserInfoRequest.isExecuting || !getUserInfoRequest.wasExecuted) || (featuresRequest.isExecuting || !featuresRequest.wasExecuted)}
         isActivatingTrial={activateTrialRequest.isExecuting}
         trialActivationError={activateTrialRequest.isError}
+        canSkipTrial={features.canSkipTrial}
         error={error}
+        currency={currency}
+        price={price}
+        name={data.firstname}
       />
     );
   }
diff --git a/src/containers/auth/SignupScreen.js b/src/containers/auth/SignupScreen.js
index efc7ea4c1..f93498be2 100644
--- a/src/containers/auth/SignupScreen.js
+++ b/src/containers/auth/SignupScreen.js
@@ -4,6 +4,7 @@ import { inject, observer } from 'mobx-react';
 
 import Signup from '../../components/auth/Signup';
 import UserStore from '../../stores/UserStore';
+import FeaturesStore from '../../stores/FeaturesStore';
 
 import { globalError as globalErrorPropType } from '../../prop-types';
 
@@ -12,11 +13,27 @@ export default @inject('stores', 'actions') @observer class SignupScreen extends
     error: globalErrorPropType.isRequired,
   };
 
+  onSignup(values) {
+    const { actions, stores } = this.props;
+
+    const { canSkipTrial, defaultTrialPlan, pricingConfig } = stores.features.anonymousFeatures;
+
+    if (!canSkipTrial) {
+      Object.assign(values, {
+        plan: defaultTrialPlan,
+        currency: pricingConfig.currencyID,
+      });
+    }
+
+    actions.user.signup(values);
+  }
+
   render() {
-    const { actions, stores, error } = this.props;
+    const { stores, error } = this.props;
+
     return (
       <Signup
-        onSubmit={actions.user.signup}
+        onSubmit={values => this.onSignup(values)}
         isSubmitting={stores.user.signupRequest.isExecuting}
         loginRoute={stores.user.loginRoute}
         error={error}
@@ -33,5 +50,6 @@ SignupScreen.wrappedComponent.propTypes = {
   }).isRequired,
   stores: PropTypes.shape({
     user: PropTypes.instanceOf(UserStore).isRequired,
+    features: PropTypes.instanceOf(FeaturesStore).isRequired,
   }).isRequired,
 };
diff --git a/src/containers/layout/AppLayoutContainer.js b/src/containers/layout/AppLayoutContainer.js
index 95fbd109f..a4312d9de 100644
--- a/src/containers/layout/AppLayoutContainer.js
+++ b/src/containers/layout/AppLayoutContainer.js
@@ -24,6 +24,7 @@ import { state as delayAppState } from '../../features/delayApp';
 import { workspaceActions } from '../../features/workspaces/actions';
 import WorkspaceDrawer from '../../features/workspaces/components/WorkspaceDrawer';
 import { workspaceStore } from '../../features/workspaces';
+import WorkspacesStore from '../../features/workspaces/store';
 
 export default @inject('stores', 'actions') @observer class AppLayoutContainer extends Component {
   static defaultProps = {
@@ -41,6 +42,7 @@ export default @inject('stores', 'actions') @observer class AppLayoutContainer e
       globalError,
       requests,
       user,
+      workspaces,
     } = this.props.stores;
 
     const {
@@ -79,7 +81,7 @@ export default @inject('stores', 'actions') @observer class AppLayoutContainer e
     const isLoadingServices = services.allServicesRequest.isExecuting
       && services.allServicesRequest.isExecutingFirstTime;
 
-    if (isLoadingFeatures || isLoadingServices) {
+    if (isLoadingFeatures || isLoadingServices || workspaces.isLoadingWorkspaces) {
       return (
         <ThemeProvider theme={ui.theme}>
           <AppLoader />
@@ -175,6 +177,7 @@ AppLayoutContainer.wrappedComponent.propTypes = {
     user: PropTypes.instanceOf(UserStore).isRequired,
     requests: PropTypes.instanceOf(RequestStore).isRequired,
     globalError: PropTypes.instanceOf(GlobalErrorStore).isRequired,
+    workspaces: PropTypes.instanceOf(WorkspacesStore).isRequired,
   }).isRequired,
   actions: PropTypes.shape({
     service: PropTypes.shape({
diff --git a/src/containers/settings/AccountScreen.js b/src/containers/settings/AccountScreen.js
index 41cdeb79a..93ab44690 100644
--- a/src/containers/settings/AccountScreen.js
+++ b/src/containers/settings/AccountScreen.js
@@ -5,6 +5,7 @@ import { inject, observer } from 'mobx-react';
 import PaymentStore from '../../stores/PaymentStore';
 import UserStore from '../../stores/UserStore';
 import AppStore from '../../stores/AppStore';
+import FeaturesStore from '../../stores/FeaturesStore';
 
 import AccountDashboard from '../../components/settings/account/AccountDashboard';
 import ErrorBoundary from '../../components/util/ErrorBoundary';
@@ -12,8 +13,9 @@ import { WEBSITE } from '../../environment';
 
 export default @inject('stores', 'actions') @observer class AccountScreen extends Component {
   onCloseWindow() {
-    const { user } = this.props.stores;
+    const { user, features } = this.props.stores;
     user.getUserInfoRequest.invalidate({ immediately: true });
+    features.featuresRequest.invalidate({ immediately: true });
   }
 
   reloadData() {
@@ -39,12 +41,17 @@ export default @inject('stores', 'actions') @observer class AccountScreen extend
   }
 
   render() {
-    const { user, payment } = this.props.stores;
-    const { user: userActions } = this.props.actions;
+    const { user, payment, features } = this.props.stores;
+    const {
+      user: userActions,
+      payment: paymentActions,
+    } = this.props.actions;
 
     const isLoadingUserInfo = user.getUserInfoRequest.isExecuting;
     const isLoadingPlans = payment.plansRequest.isExecuting;
 
+    const { upgradeAccount } = paymentActions;
+
     return (
       <ErrorBoundary>
         <AccountDashboard
@@ -60,7 +67,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')}
+          upgradeToPro={() => upgradeAccount({ planId: features.features.pricingConfig.plans.pro.yearly.id })}
           openBilling={() => this.handleWebsiteLink('/user/billing')}
           openInvoices={() => this.handleWebsiteLink('/user/invoices')}
         />
@@ -72,12 +79,14 @@ export default @inject('stores', 'actions') @observer class AccountScreen extend
 AccountScreen.wrappedComponent.propTypes = {
   stores: PropTypes.shape({
     user: PropTypes.instanceOf(UserStore).isRequired,
+    features: PropTypes.instanceOf(FeaturesStore).isRequired,
     payment: PropTypes.instanceOf(PaymentStore).isRequired,
     app: PropTypes.instanceOf(AppStore).isRequired,
   }).isRequired,
   actions: PropTypes.shape({
     payment: PropTypes.shape({
       createDashboardUrl: PropTypes.func.isRequired,
+      upgradeAccount: PropTypes.func.isRequired,
     }).isRequired,
     app: PropTypes.shape({
       openExternalUrl: PropTypes.func.isRequired,
diff --git a/src/containers/subscription/SubscriptionFormScreen.js b/src/containers/subscription/SubscriptionFormScreen.js
index 726b10628..38e46a7ba 100644
--- a/src/containers/subscription/SubscriptionFormScreen.js
+++ b/src/containers/subscription/SubscriptionFormScreen.js
@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import { remote } from 'electron';
 import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 
@@ -7,11 +8,21 @@ import PaymentStore from '../../stores/PaymentStore';
 import SubscriptionForm from '../../components/subscription/SubscriptionForm';
 import TrialForm from '../../components/subscription/TrialForm';
 
+const { BrowserWindow } = remote;
+
 export default @inject('stores', 'actions') @observer class SubscriptionFormScreen extends Component {
+  static propTypes = {
+    onCloseWindow: PropTypes.func,
+  }
+
+  static defaultProps = {
+    onCloseWindow: () => null,
+  }
+
   async openBrowser() {
     const {
-      actions,
       stores,
+      onCloseWindow,
     } = this.props;
 
     const {
@@ -22,7 +33,24 @@ export default @inject('stores', 'actions') @observer class SubscriptionFormScre
     let hostedPageURL = features.features.planSelectionURL;
     hostedPageURL = user.getAuthURL(hostedPageURL);
 
-    actions.app.openExternalUrl({ url: hostedPageURL });
+    const paymentWindow = new BrowserWindow({
+      parent: remote.getCurrentWindow(),
+      modal: true,
+      title: '🔒 Franz Supporter License',
+      width: 800,
+      height: window.innerHeight - 100,
+      maxWidth: 800,
+      minWidth: 600,
+      webPreferences: {
+        nodeIntegration: true,
+        webviewTag: true,
+      },
+    });
+    paymentWindow.loadURL(`file://${__dirname}/../../index.html#/payment/${encodeURIComponent(hostedPageURL)}`);
+
+    paymentWindow.on('closed', () => {
+      onCloseWindow();
+    });
   }
 
   render() {
diff --git a/src/electron/Settings.js b/src/electron/Settings.js
index 95e3dcfa4..d4f0d25bf 100644
--- a/src/electron/Settings.js
+++ b/src/electron/Settings.js
@@ -47,7 +47,9 @@ export default class Settings {
   }
 
   _writeFile() {
-    outputJsonSync(this.settingsFile, this.store);
+    outputJsonSync(this.settingsFile, this.store, {
+      spaces: 2,
+    });
     debug('Write settings file', this.type, toJS(this.store));
   }
 
diff --git a/src/electron/ipc-api/localServer.js b/src/electron/ipc-api/localServer.js
index 2f8f1020a..d12fb5708 100644
--- a/src/electron/ipc-api/localServer.js
+++ b/src/electron/ipc-api/localServer.js
@@ -1,5 +1,4 @@
 import { ipcMain, app } from 'electron';
-import path from 'path';
 import net from 'net';
 import startServer from '../../server/start';
 
@@ -38,7 +37,7 @@ export default (params) => {
         console.log('Starting local server on port', port);
 
         startServer(
-          path.join(app.getPath('userData'), 'server.sqlite'),
+          app.getPath('userData'),
           port,
         );
 
diff --git a/src/features/delayApp/Component.js b/src/features/delayApp/Component.js
index c61cb06c9..81f89bc52 100644
--- a/src/features/delayApp/Component.js
+++ b/src/features/delayApp/Component.js
@@ -21,7 +21,7 @@ const messages = defineMessages({
   },
   action: {
     id: 'feature.delayApp.upgrade.action',
-    defaultMessage: '!!!Get a Franz Supporter License',
+    defaultMessage: '!!!Upgrade Franz',
   },
   actionTrial: {
     id: 'feature.delayApp.trial.action',
diff --git a/src/features/delayApp/index.js b/src/features/delayApp/index.js
index 5cc6c9506..51bd887a2 100644
--- a/src/features/delayApp/index.js
+++ b/src/features/delayApp/index.js
@@ -3,6 +3,7 @@ import moment from 'moment';
 import DelayAppComponent from './Component';
 
 import { DEFAULT_FEATURES_CONFIG } from '../../config';
+import { getUserWorkspacesRequest } from '../workspaces/api';
 
 const debug = require('debug')('Ferdi:feature:delayApp');
 
@@ -32,7 +33,13 @@ export default function init(stores) {
   };
 
   reaction(
-    () => stores.user.isLoggedIn && stores.services.allServicesRequest.wasExecuted && stores.features.features.needToWaitToProceed && !stores.user.data.isPremium,
+    () => (
+      stores.user.isLoggedIn
+      && stores.services.allServicesRequest.wasExecuted
+      && getUserWorkspacesRequest.wasExecuted
+      && stores.features.features.needToWaitToProceed
+      && !stores.user.data.isPremium
+    ),
     (isEnabled) => {
       if (isEnabled) {
         debug('Enabling `delayApp` feature');
diff --git a/src/features/planSelection/actions.js b/src/features/planSelection/actions.js
new file mode 100644
index 000000000..83f58bfd7
--- /dev/null
+++ b/src/features/planSelection/actions.js
@@ -0,0 +1,9 @@
+import PropTypes from 'prop-types';
+import { createActionsFromDefinitions } from '../../actions/lib/actions';
+
+export const planSelectionActions = createActionsFromDefinitions({
+  downgradeAccount: {},
+  hideOverlay: {},
+}, PropTypes.checkPropTypes);
+
+export default planSelectionActions;
diff --git a/src/features/planSelection/api.js b/src/features/planSelection/api.js
new file mode 100644
index 000000000..734643f10
--- /dev/null
+++ b/src/features/planSelection/api.js
@@ -0,0 +1,26 @@
+import { sendAuthRequest } from '../../api/utils/auth';
+import { API, API_VERSION } from '../../environment';
+import Request from '../../stores/lib/Request';
+
+const debug = require('debug')('Franz:feature:planSelection:api');
+
+export const planSelectionApi = {
+  downgrade: async () => {
+    const url = `${API}/${API_VERSION}/payment/downgrade`;
+    const options = {
+      method: 'PUT',
+    };
+    debug('downgrade UPDATE', url, options);
+    const result = await sendAuthRequest(url, options);
+    debug('downgrade RESULT', result);
+    if (!result.ok) throw result;
+
+    return result.ok;
+  },
+};
+
+export const downgradeUserRequest = new Request(planSelectionApi, 'downgrade');
+
+export const resetApiRequests = () => {
+  downgradeUserRequest.reset();
+};
diff --git a/src/features/planSelection/components/PlanItem.js b/src/features/planSelection/components/PlanItem.js
new file mode 100644
index 000000000..ec061377b
--- /dev/null
+++ b/src/features/planSelection/components/PlanItem.js
@@ -0,0 +1,207 @@
+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 classnames from 'classnames';
+import color from 'color';
+
+import { H2 } from '@meetfranz/ui';
+
+import { Button } from '@meetfranz/forms';
+import { mdiArrowRight } from '@mdi/js';
+
+const messages = defineMessages({
+  perMonth: {
+    id: 'subscription.interval.perMonth',
+    defaultMessage: '!!!per month',
+  },
+  perMonthPerUser: {
+    id: 'subscription.interval.perMonthPerUser',
+    defaultMessage: '!!!per month & user',
+  },
+  bestValue: {
+    id: 'subscription.bestValue',
+    defaultMessage: '!!!Best value',
+  },
+});
+
+const styles = theme => ({
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    borderRadius: theme.borderRadius,
+    flex: 1,
+    color: theme.styleTypes.primary.accent,
+    overflow: 'hidden',
+    textAlign: 'center',
+
+    '& h2': {
+      textAlign: 'center',
+      marginBottom: 10,
+      fontSize: 30,
+      color: theme.styleTypes.primary.contrast,
+    },
+  },
+  currency: {
+    fontSize: 35,
+  },
+  priceWrapper: {
+    height: 50,
+    marginBottom: 0,
+  },
+  price: {
+    fontSize: 50,
+
+    '& sup': {
+      fontSize: 20,
+      verticalAlign: 20,
+    },
+  },
+  text: {
+    marginBottom: 'auto',
+  },
+  cta: {
+    background: theme.styleTypes.primary.accent,
+    color: theme.styleTypes.primary.contrast,
+    margin: [40, 'auto', 0, 'auto'],
+  },
+  divider: {
+    width: 40,
+    border: 0,
+    borderTop: [1, 'solid', theme.styleTypes.primary.contrast],
+    margin: [15, 'auto', 20],
+  },
+  header: {
+    padding: 20,
+    background: color(theme.styleTypes.primary.accent).darken(0.25).hex(),
+    color: theme.styleTypes.primary.contrast,
+    position: 'relative',
+  },
+  content: {
+    padding: [10, 20, 20],
+    background: '#EFEFEF',
+  },
+  simpleCTA: {
+    background: 'none',
+    color: theme.styleTypes.primary.accent,
+
+    '& svg': {
+      fill: theme.styleTypes.primary.accent,
+    },
+  },
+  bestValue: {
+    background: theme.styleTypes.success.accent,
+    color: theme.styleTypes.success.contrast,
+    right: -66,
+    top: -40,
+    height: 'auto',
+    position: 'absolute',
+    transform: 'rotateZ(45deg)',
+    textAlign: 'center',
+    padding: [5, 50],
+    transformOrigin: 'left bottom',
+    fontSize: 12,
+    boxShadow: '0 2px 6px rgba(0,0,0,0.15)',
+  },
+});
+
+
+export default @observer @injectSheet(styles) class PlanItem extends Component {
+  static propTypes = {
+    name: PropTypes.string.isRequired,
+    text: PropTypes.string.isRequired,
+    price: PropTypes.number.isRequired,
+    currency: PropTypes.string.isRequired,
+    upgrade: PropTypes.func.isRequired,
+    ctaLabel: PropTypes.string.isRequired,
+    simpleCTA: PropTypes.bool,
+    perUser: PropTypes.bool,
+    classes: PropTypes.object.isRequired,
+    bestValue: PropTypes.bool,
+    className: PropTypes.string,
+    children: PropTypes.element,
+  };
+
+  static defaultProps = {
+    simpleCTA: false,
+    perUser: false,
+    children: null,
+    bestValue: false,
+    className: '',
+  }
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  render() {
+    const {
+      name,
+      text,
+      price,
+      currency,
+      classes,
+      upgrade,
+      ctaLabel,
+      simpleCTA,
+      perUser,
+      bestValue,
+      className,
+      children,
+    } = this.props;
+    const { intl } = this.context;
+
+    const priceParts = `${price}`.split('.');
+
+    return (
+      <div className={classnames({
+        [classes.root]: true,
+        [className]: className,
+      })}
+      >
+        <div className={classes.header}>
+          {bestValue && (
+            <div className={classes.bestValue}>
+              {intl.formatMessage(messages.bestValue)}
+            </div>
+          )}
+          <H2 className={classes.planName}>{name}</H2>
+          <p className={classes.text}>
+            {text}
+          </p>
+          <hr className={classes.divider} />
+          <p className={classes.priceWrapper}>
+            <span className={classes.currency}>{currency}</span>
+            <span className={classes.price}>
+              {priceParts[0]}
+              <sup>{priceParts[1]}</sup>
+            </span>
+          </p>
+          <p className={classes.interval}>
+            {intl.formatMessage(perUser ? messages.perMonthPerUser : messages.perMonth)}
+          </p>
+        </div>
+
+        <div className={classes.content}>
+          {children}
+
+          <Button
+            className={classnames({
+              [classes.cta]: true,
+              [classes.simpleCTA]: simpleCTA,
+            })}
+            icon={simpleCTA ? mdiArrowRight : null}
+            label={(
+              <>
+                {ctaLabel}
+              </>
+            )}
+            onClick={upgrade}
+          />
+        </div>
+
+      </div>
+    );
+  }
+}
diff --git a/src/features/planSelection/components/PlanSelection.js b/src/features/planSelection/components/PlanSelection.js
new file mode 100644
index 000000000..4bf5238dd
--- /dev/null
+++ b/src/features/planSelection/components/PlanSelection.js
@@ -0,0 +1,279 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import injectSheet from 'react-jss';
+import { defineMessages, intlShape } from 'react-intl';
+import { H1, H2, Icon } from '@meetfranz/ui';
+import color from 'color';
+
+import { mdiRocket, mdiArrowRight } from '@mdi/js';
+import PlanItem from './PlanItem';
+import { i18nPlanName } from '../../../helpers/plan-helpers';
+import { PLANS } from '../../../config';
+import { FeatureList } from '../../../components/ui/FeatureList';
+import Appear from '../../../components/ui/effects/Appear';
+
+const messages = defineMessages({
+  welcome: {
+    id: 'feature.planSelection.fullscreen.welcome',
+    defaultMessage: '!!!Are you ready to choose, {name}',
+  },
+  subheadline: {
+    id: 'feature.planSelection.fullscreen.subheadline',
+    defaultMessage: '!!!It\'s time to make a choice. Franz works best on our Personal and Professional plans. Please have a look and choose the best one for you.',
+  },
+  textFree: {
+    id: 'feature.planSelection.free.text',
+    defaultMessage: '!!!Basic functionality',
+  },
+  textPersonal: {
+    id: 'feature.planSelection.personal.text',
+    defaultMessage: '!!!More services, no waiting - ideal for personal use.',
+  },
+  textProfessional: {
+    id: 'feature.planSelection.pro.text',
+    defaultMessage: '!!!Unlimited services and professional features for you - and your team.',
+  },
+  ctaStayOnFree: {
+    id: 'feature.planSelection.cta.stayOnFree',
+    defaultMessage: '!!!Stay on Free',
+  },
+  ctaDowngradeFree: {
+    id: 'feature.planSelection.cta.ctaDowngradeFree',
+    defaultMessage: '!!!Downgrade to Free',
+  },
+  actionTrial: {
+    id: 'feature.planSelection.cta.trial',
+    defaultMessage: '!!!Start my free 14-days Trial',
+  },
+  shortActionPersonal: {
+    id: 'feature.planSelection.cta.upgradePersonal',
+    defaultMessage: '!!!Choose Personal',
+  },
+  shortActionPro: {
+    id: 'feature.planSelection.cta.upgradePro',
+    defaultMessage: '!!!Choose Professional',
+  },
+  fullFeatureList: {
+    id: 'feature.planSelection.fullFeatureList',
+    defaultMessage: '!!!Complete comparison of all plans',
+  },
+  pricesBasedOnAnnualPayment: {
+    id: 'feature.planSelection.pricesBasedOnAnnualPayment',
+    defaultMessage: '!!!All prices based on yearly payment',
+  },
+});
+
+const styles = theme => ({
+  root: {
+    background: theme.colorModalOverlayBackground,
+    width: '100%',
+    height: '100%',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 999999,
+    overflowY: 'scroll',
+  },
+  container: {
+    width: '80%',
+    height: 'auto',
+    background: theme.styleTypes.primary.accent,
+    padding: 40,
+    borderRadius: theme.borderRadius,
+    maxWidth: 1000,
+
+    '& h1, & h2': {
+      textAlign: 'center',
+      color: theme.styleTypes.primary.contrast,
+    },
+  },
+  plans: {
+    display: 'flex',
+    margin: [40, 0, 0],
+    height: 'auto',
+
+    '& > div': {
+      margin: [0, 15],
+      flex: 1,
+      height: 'auto',
+      background: theme.styleTypes.primary.contrast,
+      boxShadow: [0, 2, 30, color('#000').alpha(0.1).rgb().string()],
+    },
+  },
+  bigIcon: {
+    background: theme.styleTypes.danger.accent,
+    width: 120,
+    height: 120,
+    display: 'flex',
+    alignItems: 'center',
+    borderRadius: '100%',
+    justifyContent: 'center',
+    margin: [-100, 'auto', 20],
+
+    '& svg': {
+      width: '80px !important',
+      height: '80px !important',
+      filter: 'drop-shadow( 0px 2px 3px rgba(0, 0, 0, 0.3))',
+      fill: theme.styleTypes.danger.contrast,
+    },
+  },
+  headline: {
+    fontSize: 40,
+  },
+  subheadline: {
+    maxWidth: 660,
+    fontSize: 22,
+    lineHeight: 1.1,
+    margin: [0, 'auto'],
+  },
+  featureList: {
+    '& li': {
+      borderBottom: [1, 'solid', '#CECECE'],
+    },
+  },
+  footer: {
+    display: 'flex',
+    color: theme.styleTypes.primary.contrast,
+    marginTop: 20,
+    padding: [0, 15],
+  },
+  fullFeatureList: {
+    marginRight: 'auto',
+    textAlign: 'center',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    color: `${theme.styleTypes.primary.contrast} !important`,
+
+    '& svg': {
+      marginRight: 5,
+    },
+  },
+  scrollContainer: {
+    border: '1px solid red',
+    overflow: 'scroll-x',
+  },
+  featuredPlan: {
+    transform: 'scale(1.05)',
+  },
+  disclaimer: {
+    textAlign: 'right',
+    margin: [10, 15, 0, 0],
+  },
+});
+
+@injectSheet(styles) @observer
+class PlanSelection extends Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    firstname: PropTypes.string.isRequired,
+    plans: PropTypes.object.isRequired,
+    currency: PropTypes.string.isRequired,
+    subscriptionExpired: PropTypes.bool.isRequired,
+    upgradeAccount: PropTypes.func.isRequired,
+    stayOnFree: PropTypes.func.isRequired,
+    hadSubscription: PropTypes.bool.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  componentDidMount() {
+  }
+
+  render() {
+    const {
+      classes,
+      firstname,
+      plans,
+      currency,
+      subscriptionExpired,
+      upgradeAccount,
+      stayOnFree,
+      hadSubscription,
+    } = this.props;
+
+    const { intl } = this.context;
+
+    return (
+      <Appear>
+        <div
+          className={classes.root}
+        >
+          <div className={classes.container}>
+            <div className={classes.bigIcon}>
+              <Icon icon={mdiRocket} />
+            </div>
+            <H1 className={classes.headline}>{intl.formatMessage(messages.welcome, { name: firstname })}</H1>
+            <H2 className={classes.subheadline}>{intl.formatMessage(messages.subheadline)}</H2>
+            <div className={classes.plans}>
+              <PlanItem
+                name={i18nPlanName(PLANS.FREE, intl)}
+                text={intl.formatMessage(messages.textFree)}
+                price={0}
+                currency={currency}
+                ctaLabel={intl.formatMessage(subscriptionExpired ? messages.ctaDowngradeFree : messages.ctaStayOnFree)}
+                upgrade={() => stayOnFree()}
+                simpleCTA
+              >
+                <FeatureList
+                  plan={PLANS.FREE}
+                  className={classes.featureList}
+                />
+              </PlanItem>
+              <PlanItem
+                name={i18nPlanName(plans.pro.yearly.id, intl)}
+                text={intl.formatMessage(messages.textProfessional)}
+                price={plans.pro.yearly.price}
+                currency={currency}
+                ctaLabel={intl.formatMessage(hadSubscription ? messages.shortActionPro : messages.actionTrial)}
+                upgrade={() => upgradeAccount(plans.pro.yearly.id)}
+                className={classes.featuredPlan}
+                perUser
+                bestValue
+              >
+                <FeatureList
+                  plan={PLANS.PRO}
+                  className={classes.featureList}
+                />
+              </PlanItem>
+              <PlanItem
+                name={i18nPlanName(plans.personal.yearly.id, intl)}
+                text={intl.formatMessage(messages.textPersonal)}
+                price={plans.personal.yearly.price}
+                currency={currency}
+                ctaLabel={intl.formatMessage(hadSubscription ? messages.shortActionPersonal : messages.actionTrial)}
+                upgrade={() => upgradeAccount(plans.personal.yearly.id)}
+              >
+                <FeatureList
+                  plan={PLANS.PERSONAL}
+                  className={classes.featureList}
+                />
+              </PlanItem>
+            </div>
+            <div className={classes.footer}>
+              <a
+                href="https://meetfranz.com/pricing"
+                target="_blank"
+                className={classes.fullFeatureList}
+              >
+                <Icon icon={mdiArrowRight} />
+                {intl.formatMessage(messages.fullFeatureList)}
+              </a>
+              {/* <p className={classes.disclaimer}> */}
+              {intl.formatMessage(messages.pricesBasedOnAnnualPayment)}
+              {/* </p> */}
+            </div>
+          </div>
+        </div>
+      </Appear>
+    );
+  }
+}
+
+export default PlanSelection;
diff --git a/src/features/planSelection/containers/PlanSelectionScreen.js b/src/features/planSelection/containers/PlanSelectionScreen.js
new file mode 100644
index 000000000..d202c924e
--- /dev/null
+++ b/src/features/planSelection/containers/PlanSelectionScreen.js
@@ -0,0 +1,123 @@
+import React, { Component } from 'react';
+import { observer, inject } from 'mobx-react';
+import PropTypes from 'prop-types';
+import { remote } from 'electron';
+import { defineMessages, intlShape } from 'react-intl';
+
+import FeaturesStore from '../../../stores/FeaturesStore';
+import UserStore from '../../../stores/UserStore';
+import PlanSelection from '../components/PlanSelection';
+import ErrorBoundary from '../../../components/util/ErrorBoundary';
+import { planSelectionStore } from '..';
+
+const { dialog, app } = remote;
+
+const messages = defineMessages({
+  dialogTitle: {
+    id: 'feature.planSelection.fullscreen.dialog.title',
+    defaultMessage: '!!!Downgrade your Franz Plan',
+  },
+  dialogMessage: {
+    id: 'feature.planSelection.fullscreen.dialog.message',
+    defaultMessage: '!!!You\'re about to downgrade to our Free account. Are you sure? Click here instead to get more services and functionality for just {currency}{price} a month.',
+  },
+  dialogCTADowngrade: {
+    id: 'feature.planSelection.fullscreen.dialog.cta.downgrade',
+    defaultMessage: '!!!Downgrade to Free',
+  },
+  dialogCTAUpgrade: {
+    id: 'feature.planSelection.fullscreen.dialog.cta.upgrade',
+    defaultMessage: '!!!Choose Personal',
+  },
+});
+
+@inject('stores', 'actions') @observer
+class PlanSelectionScreen extends Component {
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  upgradeAccount(planId) {
+    const { upgradeAccount } = this.props.actions.payment;
+
+    upgradeAccount({
+      planId,
+    });
+  }
+
+  render() {
+    if (!planSelectionStore || !planSelectionStore.isFeatureActive || !planSelectionStore.showPlanSelectionOverlay) {
+      return null;
+    }
+
+    const { intl } = this.context;
+
+    const { user, features } = this.props.stores;
+    const { plans, currency } = features.features.pricingConfig;
+    const { activateTrial } = this.props.actions.user;
+    const { downgradeAccount, hideOverlay } = this.props.actions.planSelection;
+
+    return (
+      <ErrorBoundary>
+        <PlanSelection
+          firstname={user.data.firstname}
+          plans={plans}
+          currency={currency}
+          upgradeAccount={(planId) => {
+            if (user.data.hadSubscription) {
+              this.upgradeAccount(planId);
+            } else {
+              activateTrial({
+                planId,
+              });
+            }
+          }}
+          stayOnFree={() => {
+            const selection = dialog.showMessageBoxSync(app.mainWindow, {
+              type: 'question',
+              message: intl.formatMessage(messages.dialogTitle),
+              detail: intl.formatMessage(messages.dialogMessage, {
+                currency,
+                price: plans.personal.yearly.price,
+              }),
+              buttons: [
+                intl.formatMessage(messages.dialogCTADowngrade),
+                intl.formatMessage(messages.dialogCTAUpgrade),
+              ],
+            });
+
+            if (selection === 0) {
+              downgradeAccount();
+              hideOverlay();
+            } else {
+              this.upgradeAccount(plans.personal.yearly.id);
+            }
+          }}
+          subscriptionExpired={user.team && user.team.state === 'expired' && !user.team.userHasDowngraded}
+          hadSubscription={user.data.hadSubscription}
+        />
+      </ErrorBoundary>
+    );
+  }
+}
+
+export default PlanSelectionScreen;
+
+PlanSelectionScreen.wrappedComponent.propTypes = {
+  stores: PropTypes.shape({
+    features: PropTypes.instanceOf(FeaturesStore).isRequired,
+    user: PropTypes.instanceOf(UserStore).isRequired,
+  }).isRequired,
+  actions: PropTypes.shape({
+    payment: PropTypes.shape({
+      upgradeAccount: PropTypes.func.isRequired,
+    }),
+    planSelection: PropTypes.shape({
+      downgradeAccount: PropTypes.func.isRequired,
+      hideOverlay: PropTypes.func.isRequired,
+    }),
+    user: PropTypes.shape({
+      activateTrial: PropTypes.func.isRequired,
+    }),
+  }).isRequired,
+};
diff --git a/src/features/planSelection/index.js b/src/features/planSelection/index.js
new file mode 100644
index 000000000..890be8871
--- /dev/null
+++ b/src/features/planSelection/index.js
@@ -0,0 +1,28 @@
+import { reaction } from 'mobx';
+import PlanSelectionStore from './store';
+
+const debug = require('debug')('Franz:feature:planSelection');
+
+export const planSelectionStore = new PlanSelectionStore();
+
+export default function initPlanSelection(stores, actions) {
+  stores.planSelection = planSelectionStore;
+  const { features } = stores;
+
+  // Toggle planSelection feature
+  reaction(
+    () => features.features.isPlanSelectionEnabled,
+    (isEnabled) => {
+      if (isEnabled) {
+        debug('Initializing `planSelection` feature');
+        planSelectionStore.start(stores, actions);
+      } else if (planSelectionStore.isFeatureActive) {
+        debug('Disabling `planSelection` feature');
+        planSelectionStore.stop();
+      }
+    },
+    {
+      fireImmediately: true,
+    },
+  );
+}
diff --git a/src/features/planSelection/store.js b/src/features/planSelection/store.js
new file mode 100644
index 000000000..448e323ff
--- /dev/null
+++ b/src/features/planSelection/store.js
@@ -0,0 +1,68 @@
+import {
+  action,
+  observable,
+  computed,
+} from 'mobx';
+
+import { planSelectionActions } from './actions';
+import { FeatureStore } from '../utils/FeatureStore';
+import { createActionBindings } from '../utils/ActionBinding';
+import { downgradeUserRequest } from './api';
+
+const debug = require('debug')('Franz:feature:planSelection:store');
+
+export default class PlanSelectionStore extends FeatureStore {
+  @observable isFeatureEnabled = false;
+
+  @observable isFeatureActive = false;
+
+  @observable hideOverlay = false;
+
+  @computed get showPlanSelectionOverlay() {
+    const { team, isPremium } = this.stores.user;
+    if (team && !this.hideOverlay && !isPremium) {
+      return team.state === 'expired' && !team.userHasDowngraded;
+    }
+
+    return false;
+  }
+
+  // ========== PUBLIC API ========= //
+
+  @action start(stores, actions, api) {
+    debug('PlanSelectionStore::start');
+    this.stores = stores;
+    this.actions = actions;
+    this.api = api;
+
+    // ACTIONS
+
+    this._registerActions(createActionBindings([
+      [planSelectionActions.downgradeAccount, this._downgradeAccount],
+      [planSelectionActions.hideOverlay, this._hideOverlay],
+    ]));
+
+    this.isFeatureActive = true;
+  }
+
+  @action stop() {
+    super.stop();
+    debug('PlanSelectionStore::stop');
+    this.isFeatureActive = false;
+  }
+
+  // ========== PRIVATE METHODS ========= //
+
+  // Actions
+  @action _downgradeAccount = () => {
+    downgradeUserRequest.execute();
+  }
+
+  @action _hideOverlay = () => {
+    this.hideOverlay = true;
+  }
+
+  @action _showOverlay = () => {
+    this.hideOverlay = false;
+  }
+}
diff --git a/src/features/shareFranz/index.js b/src/features/shareFranz/index.js
index 217e926f9..04e3684ae 100644
--- a/src/features/shareFranz/index.js
+++ b/src/features/shareFranz/index.js
@@ -2,6 +2,7 @@ import { observable, reaction } from 'mobx';
 import ms from 'ms';
 
 import { state as delayAppState } from '../delayApp';
+import { planSelectionStore } from '../planSelection';
 
 export { default as Component } from './Component';
 
@@ -31,7 +32,7 @@ export default function initialize(stores) {
     () => stores.user.isLoggedIn,
     () => {
       setTimeout(() => {
-        if (stores.settings.stats.appStarts % 50 === 0) {
+        if (stores.settings.stats.appStarts % 50 === 0 && !planSelectionStore.showPlanSelectionOverlay) {
           if (delayAppState.isDelayAppScreenVisible) {
             debug('Delaying share modal by 5 minutes');
             setTimeout(() => showModal(), ms('5m'));
diff --git a/src/features/trialStatusBar/actions.js b/src/features/trialStatusBar/actions.js
new file mode 100644
index 000000000..38df76458
--- /dev/null
+++ b/src/features/trialStatusBar/actions.js
@@ -0,0 +1,13 @@
+import PropTypes from 'prop-types';
+import { createActionsFromDefinitions } from '../../actions/lib/actions';
+
+export const trialStatusBarActions = createActionsFromDefinitions({
+  upgradeAccount: {
+    planId: PropTypes.string.isRequired,
+    onCloseWindow: PropTypes.func.isRequired,
+  },
+  downgradeAccount: {},
+  hideOverlay: {},
+}, PropTypes.checkPropTypes);
+
+export default trialStatusBarActions;
diff --git a/src/features/trialStatusBar/components/ProgressBar.js b/src/features/trialStatusBar/components/ProgressBar.js
new file mode 100644
index 000000000..41b74d396
--- /dev/null
+++ b/src/features/trialStatusBar/components/ProgressBar.js
@@ -0,0 +1,45 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import injectSheet from 'react-jss';
+
+const styles = theme => ({
+  root: {
+    background: theme.trialStatusBar.progressBar.background,
+    width: '25%',
+    maxWidth: 200,
+    height: 8,
+    display: 'flex',
+    alignItems: 'center',
+    borderRadius: theme.borderRadius,
+    overflow: 'hidden',
+  },
+  progress: {
+    background: theme.trialStatusBar.progressBar.progressIndicator,
+    width: ({ percent }) => `${percent}%`,
+    height: '100%',
+  },
+});
+
+@injectSheet(styles) @observer
+class ProgressBar extends Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+  };
+
+  render() {
+    const {
+      classes,
+    } = this.props;
+
+    return (
+      <div
+        className={classes.root}
+      >
+        <div className={classes.progress} />
+      </div>
+    );
+  }
+}
+
+export default ProgressBar;
diff --git a/src/features/trialStatusBar/components/TrialStatusBar.js b/src/features/trialStatusBar/components/TrialStatusBar.js
new file mode 100644
index 000000000..b8fe4acc9
--- /dev/null
+++ b/src/features/trialStatusBar/components/TrialStatusBar.js
@@ -0,0 +1,135 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import injectSheet from 'react-jss';
+import { defineMessages, intlShape } from 'react-intl';
+import { Icon } from '@meetfranz/ui';
+import { mdiArrowRight, mdiWindowClose } from '@mdi/js';
+import classnames from 'classnames';
+
+import ProgressBar from './ProgressBar';
+
+const messages = defineMessages({
+  restTime: {
+    id: 'feature.trialStatusBar.restTime',
+    defaultMessage: '!!!Your Free Franz {plan} Trial ends in {time}.',
+  },
+  expired: {
+    id: 'feature.trialStatusBar.expired',
+    defaultMessage: '!!!Your free Franz {plan} Trial has expired, please upgrade your account.',
+  },
+  cta: {
+    id: 'feature.trialStatusBar.cta',
+    defaultMessage: '!!!Upgrade now',
+  },
+});
+
+const styles = theme => ({
+  root: {
+    background: theme.trialStatusBar.bar.background,
+    width: '100%',
+    height: 25,
+    order: 10,
+    display: 'flex',
+    alignItems: 'center',
+    fontSize: 12,
+    padding: [0, 10],
+    justifyContent: 'flex-end',
+  },
+  ended: {
+    background: theme.styleTypes.warning.accent,
+    color: theme.styleTypes.warning.contrast,
+  },
+  message: {
+    marginLeft: 20,
+  },
+  action: {
+    marginLeft: 20,
+    fontSize: 12,
+    color: theme.colorText,
+    textDecoration: 'underline',
+    display: 'flex',
+
+    '& svg': {
+      margin: [1, 2, 0, 0],
+    },
+  },
+});
+
+@injectSheet(styles) @observer
+class TrialStatusBar extends Component {
+  static propTypes = {
+    planName: PropTypes.string.isRequired,
+    percent: PropTypes.number.isRequired,
+    upgradeAccount: PropTypes.func.isRequired,
+    hideOverlay: PropTypes.func.isRequired,
+    trialEnd: PropTypes.string.isRequired,
+    hasEnded: PropTypes.bool.isRequired,
+    classes: PropTypes.object.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  render() {
+    const {
+      planName,
+      percent,
+      upgradeAccount,
+      hideOverlay,
+      trialEnd,
+      hasEnded,
+      classes,
+    } = this.props;
+
+    const { intl } = this.context;
+
+    return (
+      <div
+        className={classnames({
+          [classes.root]: true,
+          [classes.ended]: hasEnded,
+        })}
+      >
+        <ProgressBar
+          percent={percent}
+        />
+        {' '}
+        <span className={classes.message}>
+          {!hasEnded ? (
+            intl.formatMessage(messages.restTime, {
+              plan: planName,
+              time: trialEnd,
+            })
+          ) : (
+            intl.formatMessage(messages.expired, {
+              plan: planName,
+            })
+          )}
+        </span>
+        <button
+          className={classes.action}
+          type="button"
+          onClick={() => {
+            upgradeAccount();
+          }}
+        >
+          <Icon icon={mdiArrowRight} />
+          {intl.formatMessage(messages.cta)}
+        </button>
+        <button
+          className={classes.action}
+          type="button"
+          onClick={() => {
+            hideOverlay();
+          }}
+        >
+          <Icon icon={mdiWindowClose} />
+        </button>
+      </div>
+    );
+  }
+}
+
+export default TrialStatusBar;
diff --git a/src/features/trialStatusBar/containers/TrialStatusBarScreen.js b/src/features/trialStatusBar/containers/TrialStatusBarScreen.js
new file mode 100644
index 000000000..e15a1204f
--- /dev/null
+++ b/src/features/trialStatusBar/containers/TrialStatusBarScreen.js
@@ -0,0 +1,109 @@
+import React, { Component } from 'react';
+import { observer, inject } from 'mobx-react';
+import PropTypes from 'prop-types';
+import ms from 'ms';
+import { intlShape } from 'react-intl';
+
+import FeaturesStore from '../../../stores/FeaturesStore';
+import UserStore from '../../../stores/UserStore';
+import TrialStatusBar from '../components/TrialStatusBar';
+import ErrorBoundary from '../../../components/util/ErrorBoundary';
+import { trialStatusBarStore } from '..';
+import { i18nPlanName } from '../../../helpers/plan-helpers';
+
+@inject('stores', 'actions') @observer
+class TrialStatusBarScreen extends Component {
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  state = {
+    showOverlay: true,
+    percent: 0,
+    restTime: '',
+    hasEnded: false,
+  };
+
+  percentInterval = null;
+
+  componentDidMount() {
+    this.percentInterval = setInterval(() => {
+      this.calculateRestTime();
+    }, ms('1m'));
+
+    this.calculateRestTime();
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.percentInterval);
+  }
+
+  calculateRestTime() {
+    const { trialEndTime } = trialStatusBarStore;
+    const percent = Math.abs(100 - Math.abs(trialEndTime.asMilliseconds()) * 100 / ms('14d')).toFixed(2);
+    const restTime = trialEndTime.humanize();
+    const hasEnded = trialEndTime.asMilliseconds() > 0;
+
+    this.setState({
+      percent,
+      restTime,
+      hasEnded,
+    });
+  }
+
+  hideOverlay() {
+    this.setState({
+      showOverlay: false,
+    });
+  }
+
+
+  render() {
+    const { intl } = this.context;
+
+    const {
+      showOverlay,
+      percent,
+      restTime,
+      hasEnded,
+    } = this.state;
+
+    if (!trialStatusBarStore || !trialStatusBarStore.isFeatureActive || !showOverlay || !trialStatusBarStore.showTrialStatusBarOverlay) {
+      return null;
+    }
+
+    const { user } = this.props.stores;
+    const { upgradeAccount } = this.props.actions.payment;
+
+    const planName = i18nPlanName(user.team.plan, intl);
+
+    return (
+      <ErrorBoundary>
+        <TrialStatusBar
+          planName={planName}
+          percent={parseFloat(percent < 5 ? 5 : percent)}
+          trialEnd={restTime}
+          upgradeAccount={() => upgradeAccount({
+            planId: user.team.plan,
+          })}
+          hideOverlay={() => this.hideOverlay()}
+          hasEnded={hasEnded}
+        />
+      </ErrorBoundary>
+    );
+  }
+}
+
+export default TrialStatusBarScreen;
+
+TrialStatusBarScreen.wrappedComponent.propTypes = {
+  stores: PropTypes.shape({
+    features: PropTypes.instanceOf(FeaturesStore).isRequired,
+    user: PropTypes.instanceOf(UserStore).isRequired,
+  }).isRequired,
+  actions: PropTypes.shape({
+    payment: PropTypes.shape({
+      upgradeAccount: PropTypes.func.isRequired,
+    }),
+  }).isRequired,
+};
diff --git a/src/features/trialStatusBar/index.js b/src/features/trialStatusBar/index.js
new file mode 100644
index 000000000..ec84cdfd7
--- /dev/null
+++ b/src/features/trialStatusBar/index.js
@@ -0,0 +1,30 @@
+import { reaction } from 'mobx';
+import TrialStatusBarStore from './store';
+
+const debug = require('debug')('Franz:feature:trialStatusBar');
+
+export const GA_CATEGORY_TRIAL_STATUS_BAR = 'trialStatusBar';
+
+export const trialStatusBarStore = new TrialStatusBarStore();
+
+export default function initTrialStatusBar(stores, actions) {
+  stores.trialStatusBar = trialStatusBarStore;
+  const { features } = stores;
+
+  // Toggle trialStatusBar feature
+  reaction(
+    () => features.features.isTrialStatusBarEnabled,
+    (isEnabled) => {
+      if (isEnabled) {
+        debug('Initializing `trialStatusBar` feature');
+        trialStatusBarStore.start(stores, actions);
+      } else if (trialStatusBarStore.isFeatureActive) {
+        debug('Disabling `trialStatusBar` feature');
+        trialStatusBarStore.stop();
+      }
+    },
+    {
+      fireImmediately: true,
+    },
+  );
+}
diff --git a/src/features/trialStatusBar/store.js b/src/features/trialStatusBar/store.js
new file mode 100644
index 000000000..89cf32392
--- /dev/null
+++ b/src/features/trialStatusBar/store.js
@@ -0,0 +1,72 @@
+import {
+  action,
+  observable,
+  computed,
+} from 'mobx';
+import moment from 'moment';
+
+import { trialStatusBarActions } from './actions';
+import { FeatureStore } from '../utils/FeatureStore';
+import { createActionBindings } from '../utils/ActionBinding';
+
+const debug = require('debug')('Franz:feature:trialStatusBar:store');
+
+export default class TrialStatusBarStore extends FeatureStore {
+  @observable isFeatureActive = false;
+
+  @observable isFeatureEnabled = false;
+
+  @computed get showTrialStatusBarOverlay() {
+    if (this.isFeatureActive) {
+      const { team } = this.stores.user;
+      if (team && !this.hideOverlay) {
+        return team.state !== 'expired' && team.isTrial;
+      }
+    }
+
+    return false;
+  }
+
+  @computed get trialEndTime() {
+    if (this.isFeatureActive) {
+      const { team } = this.stores.user;
+
+      if (team && !this.hideOverlay) {
+        return moment.duration(moment().diff(team.trialEnd));
+      }
+    }
+
+    return moment.duration();
+  }
+
+  // ========== PUBLIC API ========= //
+
+  @action start(stores, actions, api) {
+    debug('TrialStatusBarStore::start');
+    this.stores = stores;
+    this.actions = actions;
+    this.api = api;
+
+    // ACTIONS
+
+    this._registerActions(createActionBindings([
+      [trialStatusBarActions.hideOverlay, this._hideOverlay],
+    ]));
+
+    this.isFeatureActive = true;
+  }
+
+  @action stop() {
+    super.stop();
+    debug('TrialStatusBarStore::stop');
+    this.isFeatureActive = false;
+  }
+
+  // ========== PRIVATE METHODS ========= //
+
+  // Actions
+
+  @action _hideOverlay = () => {
+    this.hideOverlay = true;
+  }
+}
diff --git a/src/features/workspaces/components/WorkspaceDrawer.js b/src/features/workspaces/components/WorkspaceDrawer.js
index e991b9909..baa94f6b3 100644
--- a/src/features/workspaces/components/WorkspaceDrawer.js
+++ b/src/features/workspaces/components/WorkspaceDrawer.js
@@ -7,7 +7,7 @@ import { H1, Icon, ProBadge } from '@meetfranz/ui';
 import { Button } from '@meetfranz/forms/lib';
 import ReactTooltip from 'react-tooltip';
 
-import { mdiPlusBox, mdiSettings } from '@mdi/js';
+import { mdiPlusBox, mdiSettings, mdiStar } from '@mdi/js';
 import WorkspaceDrawerItem from './WorkspaceDrawerItem';
 import { workspaceActions } from '../actions';
 import { workspaceStore } from '../index';
@@ -51,6 +51,8 @@ const styles = theme => ({
   drawer: {
     background: theme.workspaces.drawer.background,
     width: `${theme.workspaces.drawer.width}px`,
+    display: 'flex',
+    flexDirection: 'column',
   },
   headline: {
     fontSize: '24px',
@@ -74,6 +76,7 @@ const styles = theme => ({
   },
   workspaces: {
     height: 'auto',
+    overflowY: 'scroll',
   },
   premiumAnnouncement: {
     padding: '20px',
@@ -88,7 +91,7 @@ const styles = theme => ({
   addNewWorkspaceLabel: {
     height: 'auto',
     color: theme.workspaces.drawer.buttons.color,
-    marginTop: 40,
+    margin: [40, 0],
     textAlign: 'center',
     '& > svg': {
       fill: theme.workspaces.drawer.buttons.color,
@@ -172,7 +175,7 @@ class WorkspaceDrawer extends Component {
                 className={classes.premiumCtaButton}
                 buttonType="primary"
                 label={intl.formatMessage(messages.reactivatePremiumAccount)}
-                icon="mdiStar"
+                icon={mdiStar}
                 onClick={() => {
                   onUpgradeAccountClick();
                 }}
diff --git a/src/features/workspaces/components/WorkspacesDashboard.js b/src/features/workspaces/components/WorkspacesDashboard.js
index 977b23999..b499e02a4 100644
--- a/src/features/workspaces/components/WorkspacesDashboard.js
+++ b/src/features/workspaces/components/WorkspacesDashboard.js
@@ -5,6 +5,7 @@ import { defineMessages, intlShape } from 'react-intl';
 import injectSheet from 'react-jss';
 import { Infobox, Badge } from '@meetfranz/ui';
 
+import { mdiCheckboxMarkedCircleOutline } from '@mdi/js';
 import Loader from '../../../components/ui/Loader';
 import WorkspaceItem from './WorkspaceItem';
 import CreateWorkspaceForm from './CreateWorkspaceForm';
@@ -128,7 +129,7 @@ class WorkspacesDashboard extends Component {
             <Appear className={classes.appear}>
               <Infobox
                 type="success"
-                icon="mdiCheckboxMarkedCircleOutline"
+                icon={mdiCheckboxMarkedCircleOutline}
                 dismissable
                 onUnmount={updateWorkspaceRequest.reset}
               >
@@ -142,7 +143,7 @@ class WorkspacesDashboard extends Component {
             <Appear className={classes.appear}>
               <Infobox
                 type="success"
-                icon="mdiCheckboxMarkedCircleOutline"
+                icon={mdiCheckboxMarkedCircleOutline}
                 dismissable
                 onUnmount={deleteWorkspaceRequest.reset}
               >
diff --git a/src/features/workspaces/store.js b/src/features/workspaces/store.js
index 949f8a792..5c90ff180 100644
--- a/src/features/workspaces/store.js
+++ b/src/features/workspaces/store.js
@@ -47,6 +47,11 @@ export default class WorkspacesStore extends FeatureStore {
     return getUserWorkspacesRequest.result || [];
   }
 
+  @computed get isLoadingWorkspaces() {
+    if (!this.isFeatureActive) return false;
+    return getUserWorkspacesRequest.isExecutingFirstTime;
+  }
+
   @computed get settings() {
     return localStorage.getItem('workspaces') || {};
   }
diff --git a/src/helpers/plan-helpers.js b/src/helpers/plan-helpers.js
index e0f1fd89a..ee22e4471 100644
--- a/src/helpers/plan-helpers.js
+++ b/src/helpers/plan-helpers.js
@@ -4,19 +4,19 @@ import { PLANS_MAPPING, PLANS } from '../config';
 const messages = defineMessages({
   [PLANS.PRO]: {
     id: 'pricing.plan.pro',
-    defaultMessage: '!!!Franz Professional',
+    defaultMessage: '!!!Professional',
   },
   [PLANS.PERSONAL]: {
     id: 'pricing.plan.personal',
-    defaultMessage: '!!!Franz Personal',
+    defaultMessage: '!!!Personal',
   },
   [PLANS.FREE]: {
     id: 'pricing.plan.free',
-    defaultMessage: '!!!Franz Free',
+    defaultMessage: '!!!Free',
   },
   [PLANS.LEGACY]: {
     id: 'pricing.plan.legacy',
-    defaultMessage: '!!!Franz Premium',
+    defaultMessage: '!!!Premium',
   },
 });
 
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index b056f0d1b..bb65ccdf2 100644
--- a/src/i18n/locales/defaultMessages.json
+++ b/src/i18n/locales/defaultMessages.json
@@ -539,120 +539,172 @@
   {
     "descriptors": [
       {
-        "defaultMessage": "!!!Franz Professional",
+        "defaultMessage": "!!!Hi {name}, welcome to Franz",
         "end": {
           "column": 3,
           "line": 18
         },
         "file": "src/components/auth/Pricing.js",
-        "id": "pricing.trial.headline",
+        "id": "pricing.trial.headline.pro",
         "start": {
           "column": 12,
           "line": 15
         }
       },
       {
-        "defaultMessage": "!!!Your personal welcome offer:",
+        "defaultMessage": "!!!We have a special treat for you.",
         "end": {
           "column": 3,
           "line": 22
         },
         "file": "src/components/auth/Pricing.js",
-        "id": "pricing.trial.subheadline",
+        "id": "pricing.trial.intro.specialTreat",
         "start": {
-          "column": 17,
+          "column": 16,
           "line": 19
         }
       },
       {
-        "defaultMessage": "!!!No strings attached",
+        "defaultMessage": "!!!Enjoy the full Franz Professional experience completely free for 14 days.",
         "end": {
           "column": 3,
           "line": 26
         },
         "file": "src/components/auth/Pricing.js",
+        "id": "pricing.trial.intro.tryPro",
+        "start": {
+          "column": 10,
+          "line": 23
+        }
+      },
+      {
+        "defaultMessage": "!!!Happy messaging,",
+        "end": {
+          "column": 3,
+          "line": 30
+        },
+        "file": "src/components/auth/Pricing.js",
+        "id": "pricing.trial.intro.happyMessaging",
+        "start": {
+          "column": 18,
+          "line": 27
+        }
+      },
+      {
+        "defaultMessage": "!!!No strings attached",
+        "end": {
+          "column": 3,
+          "line": 34
+        },
+        "file": "src/components/auth/Pricing.js",
         "id": "pricing.trial.terms.headline",
         "start": {
           "column": 29,
-          "line": 23
+          "line": 31
         }
       },
       {
         "defaultMessage": "!!!No credit card required",
         "end": {
           "column": 3,
-          "line": 30
+          "line": 38
         },
         "file": "src/components/auth/Pricing.js",
         "id": "pricing.trial.terms.noCreditCard",
         "start": {
           "column": 16,
-          "line": 27
+          "line": 35
         }
       },
       {
         "defaultMessage": "!!!Your free trial ends automatically after 14 days",
         "end": {
           "column": 3,
-          "line": 34
+          "line": 42
         },
         "file": "src/components/auth/Pricing.js",
         "id": "pricing.trial.terms.automaticTrialEnd",
         "start": {
           "column": 21,
-          "line": 31
+          "line": 39
+        }
+      },
+      {
+        "defaultMessage": "!!!Free trial (normally {currency}{price} per month)",
+        "end": {
+          "column": 3,
+          "line": 46
+        },
+        "file": "src/components/auth/Pricing.js",
+        "id": "pricing.trial.terms.trialWorth",
+        "start": {
+          "column": 14,
+          "line": 43
         }
       },
       {
         "defaultMessage": "!!!Sorry, we could not activate your trial!",
         "end": {
           "column": 3,
-          "line": 38
+          "line": 50
         },
         "file": "src/components/auth/Pricing.js",
         "id": "pricing.trial.error",
         "start": {
           "column": 19,
-          "line": 35
+          "line": 47
         }
       },
       {
-        "defaultMessage": "!!!Yes, upgrade my account to Franz Professional",
+        "defaultMessage": "!!!Start my 14-day Franz Professional Trial",
         "end": {
           "column": 3,
-          "line": 42
+          "line": 54
         },
         "file": "src/components/auth/Pricing.js",
         "id": "pricing.trial.cta.accept",
         "start": {
           "column": 13,
-          "line": 39
+          "line": 51
+        }
+      },
+      {
+        "defaultMessage": "!!!Start using Franz",
+        "end": {
+          "column": 3,
+          "line": 58
+        },
+        "file": "src/components/auth/Pricing.js",
+        "id": "pricing.trial.cta.start",
+        "start": {
+          "column": 12,
+          "line": 55
         }
       },
       {
         "defaultMessage": "!!!Continue to Ferdi",
         "end": {
           "column": 3,
-          "line": 46
+          "line": 62
         },
         "file": "src/components/auth/Pricing.js",
         "id": "pricing.trial.cta.skip",
         "start": {
           "column": 11,
-          "line": 43
+          "line": 59
         }
       },
       {
         "defaultMessage": "!!!Franz Professional includes:",
         "end": {
           "column": 3,
-          "line": 50
+          "line": 66
         },
         "file": "src/components/auth/Pricing.js",
         "id": "pricing.trial.features.headline",
         "start": {
           "column": 20,
-          "line": 47
+          "line": 63
         }
       }
     ],
@@ -882,52 +934,52 @@
         "defaultMessage": "!!!Your services have been updated.",
         "end": {
           "column": 3,
-          "line": 31
+          "line": 33
         },
         "file": "src/components/layout/AppLayout.js",
         "id": "infobar.servicesUpdated",
         "start": {
           "column": 19,
-          "line": 28
+          "line": 30
         }
       },
       {
         "defaultMessage": "!!!Reload services",
         "end": {
           "column": 3,
-          "line": 35
+          "line": 37
         },
         "file": "src/components/layout/AppLayout.js",
         "id": "infobar.buttonReloadServices",
         "start": {
           "column": 24,
-          "line": 32
+          "line": 34
         }
       },
       {
         "defaultMessage": "!!!Could not load services and user information",
         "end": {
           "column": 3,
-          "line": 39
+          "line": 41
         },
         "file": "src/components/layout/AppLayout.js",
         "id": "infobar.requiredRequestsFailed",
         "start": {
           "column": 26,
-          "line": 36
+          "line": 38
         }
       },
       {
         "defaultMessage": "!!!There were errors while trying to perform an authenticated request. Please try logging out and back in if this error persists.",
         "end": {
           "column": 3,
-          "line": 43
+          "line": 45
         },
         "file": "src/components/layout/AppLayout.js",
         "id": "infobar.authRequestFailed",
         "start": {
           "column": 21,
-          "line": 40
+          "line": 42
         }
       }
     ],
@@ -3495,133 +3547,198 @@
   {
     "descriptors": [
       {
+        "defaultMessage": "!!!Choose from more than 70 Services",
+        "end": {
+          "column": 3,
+          "line": 12
+        },
+        "file": "src/components/ui/FeatureList.js",
+        "id": "pricing.features.recipes",
+        "start": {
+          "column": 20,
+          "line": 9
+        }
+      },
+      {
+        "defaultMessage": "!!!Account Synchronisation",
+        "end": {
+          "column": 3,
+          "line": 16
+        },
+        "file": "src/components/ui/FeatureList.js",
+        "id": "pricing.features.accountSync",
+        "start": {
+          "column": 15,
+          "line": 13
+        }
+      },
+      {
+        "defaultMessage": "!!!Desktop Notifications",
+        "end": {
+          "column": 3,
+          "line": 20
+        },
+        "file": "src/components/ui/FeatureList.js",
+        "id": "pricing.features.desktopNotifications",
+        "start": {
+          "column": 24,
+          "line": 17
+        }
+      },
+      {
         "defaultMessage": "!!!Add unlimited services",
         "end": {
           "column": 3,
-          "line": 11
+          "line": 24
         },
         "file": "src/components/ui/FeatureList.js",
         "id": "pricing.features.unlimitedServices",
         "start": {
           "column": 21,
-          "line": 8
+          "line": 21
+        }
+      },
+      {
+        "defaultMessage": "!!!Add up to 3 services",
+        "end": {
+          "column": 3,
+          "line": 28
+        },
+        "file": "src/components/ui/FeatureList.js",
+        "id": "pricing.features.upToThreeServices",
+        "start": {
+          "column": 21,
+          "line": 25
+        }
+      },
+      {
+        "defaultMessage": "!!!Add up to 6 services",
+        "end": {
+          "column": 3,
+          "line": 32
+        },
+        "file": "src/components/ui/FeatureList.js",
+        "id": "pricing.features.upToSixServices",
+        "start": {
+          "column": 19,
+          "line": 29
         }
       },
       {
         "defaultMessage": "!!!Spellchecker support",
         "end": {
           "column": 3,
-          "line": 15
+          "line": 36
         },
         "file": "src/components/ui/FeatureList.js",
         "id": "pricing.features.spellchecker",
         "start": {
           "column": 16,
-          "line": 12
+          "line": 33
         }
       },
       {
         "defaultMessage": "!!!Workspaces",
         "end": {
           "column": 3,
-          "line": 19
+          "line": 40
         },
         "file": "src/components/ui/FeatureList.js",
         "id": "pricing.features.workspaces",
         "start": {
           "column": 14,
-          "line": 16
+          "line": 37
         }
       },
       {
         "defaultMessage": "!!!Add Custom Websites",
         "end": {
           "column": 3,
-          "line": 23
+          "line": 44
         },
         "file": "src/components/ui/FeatureList.js",
         "id": "pricing.features.customWebsites",
         "start": {
           "column": 18,
-          "line": 20
+          "line": 41
         }
       },
       {
         "defaultMessage": "!!!On-premise & other Hosted Services",
         "end": {
           "column": 3,
-          "line": 27
+          "line": 48
         },
         "file": "src/components/ui/FeatureList.js",
         "id": "pricing.features.onPremise",
         "start": {
           "column": 13,
-          "line": 24
+          "line": 45
         }
       },
       {
         "defaultMessage": "!!!Install 3rd party services",
         "end": {
           "column": 3,
-          "line": 31
+          "line": 52
         },
         "file": "src/components/ui/FeatureList.js",
         "id": "pricing.features.thirdPartyServices",
         "start": {
           "column": 22,
-          "line": 28
+          "line": 49
         }
       },
       {
         "defaultMessage": "!!!Service Proxies",
         "end": {
           "column": 3,
-          "line": 35
+          "line": 56
         },
         "file": "src/components/ui/FeatureList.js",
         "id": "pricing.features.serviceProxies",
         "start": {
           "column": 18,
-          "line": 32
+          "line": 53
         }
       },
       {
         "defaultMessage": "!!!Team Management",
         "end": {
           "column": 3,
-          "line": 39
+          "line": 60
         },
         "file": "src/components/ui/FeatureList.js",
         "id": "pricing.features.teamManagement",
         "start": {
           "column": 18,
-          "line": 36
+          "line": 57
         }
       },
       {
         "defaultMessage": "!!!No Waiting Screens",
         "end": {
           "column": 3,
-          "line": 43
+          "line": 64
         },
         "file": "src/components/ui/FeatureList.js",
         "id": "pricing.features.appDelays",
         "start": {
           "column": 13,
-          "line": 40
+          "line": 61
         }
       },
       {
         "defaultMessage": "!!!Forever ad-free",
         "end": {
           "column": 3,
-          "line": 47
+          "line": 68
         },
         "file": "src/components/ui/FeatureList.js",
         "id": "pricing.features.adFree",
         "start": {
           "column": 10,
-          "line": 44
+          "line": 65
         }
       }
     ],
@@ -4450,7 +4567,7 @@
         }
       },
       {
-        "defaultMessage": "!!!Get a Franz Supporter License",
+        "defaultMessage": "!!!Upgrade Franz",
         "end": {
           "column": 3,
           "line": 25
@@ -4494,6 +4611,299 @@
   {
     "descriptors": [
       {
+        "defaultMessage": "!!!per month",
+        "end": {
+          "column": 3,
+          "line": 18
+        },
+        "file": "src/features/planSelection/components/PlanItem.js",
+        "id": "subscription.interval.perMonth",
+        "start": {
+          "column": 12,
+          "line": 15
+        }
+      },
+      {
+        "defaultMessage": "!!!per month & user",
+        "end": {
+          "column": 3,
+          "line": 22
+        },
+        "file": "src/features/planSelection/components/PlanItem.js",
+        "id": "subscription.interval.perMonthPerUser",
+        "start": {
+          "column": 19,
+          "line": 19
+        }
+      },
+      {
+        "defaultMessage": "!!!Best value",
+        "end": {
+          "column": 3,
+          "line": 26
+        },
+        "file": "src/features/planSelection/components/PlanItem.js",
+        "id": "subscription.bestValue",
+        "start": {
+          "column": 13,
+          "line": 23
+        }
+      }
+    ],
+    "path": "src/features/planSelection/components/PlanItem.json"
+  },
+  {
+    "descriptors": [
+      {
+        "defaultMessage": "!!!Are you ready to choose, {name}",
+        "end": {
+          "column": 3,
+          "line": 20
+        },
+        "file": "src/features/planSelection/components/PlanSelection.js",
+        "id": "feature.planSelection.fullscreen.welcome",
+        "start": {
+          "column": 11,
+          "line": 17
+        }
+      },
+      {
+        "defaultMessage": "!!!It's time to make a choice. Franz works best on our Personal and Professional plans. Please have a look and choose the best one for you.",
+        "end": {
+          "column": 3,
+          "line": 24
+        },
+        "file": "src/features/planSelection/components/PlanSelection.js",
+        "id": "feature.planSelection.fullscreen.subheadline",
+        "start": {
+          "column": 15,
+          "line": 21
+        }
+      },
+      {
+        "defaultMessage": "!!!Basic functionality",
+        "end": {
+          "column": 3,
+          "line": 28
+        },
+        "file": "src/features/planSelection/components/PlanSelection.js",
+        "id": "feature.planSelection.free.text",
+        "start": {
+          "column": 12,
+          "line": 25
+        }
+      },
+      {
+        "defaultMessage": "!!!More services, no waiting - ideal for personal use.",
+        "end": {
+          "column": 3,
+          "line": 32
+        },
+        "file": "src/features/planSelection/components/PlanSelection.js",
+        "id": "feature.planSelection.personal.text",
+        "start": {
+          "column": 16,
+          "line": 29
+        }
+      },
+      {
+        "defaultMessage": "!!!Unlimited services and professional features for you - and your team.",
+        "end": {
+          "column": 3,
+          "line": 36
+        },
+        "file": "src/features/planSelection/components/PlanSelection.js",
+        "id": "feature.planSelection.pro.text",
+        "start": {
+          "column": 20,
+          "line": 33
+        }
+      },
+      {
+        "defaultMessage": "!!!Stay on Free",
+        "end": {
+          "column": 3,
+          "line": 40
+        },
+        "file": "src/features/planSelection/components/PlanSelection.js",
+        "id": "feature.planSelection.cta.stayOnFree",
+        "start": {
+          "column": 17,
+          "line": 37
+        }
+      },
+      {
+        "defaultMessage": "!!!Downgrade to Free",
+        "end": {
+          "column": 3,
+          "line": 44
+        },
+        "file": "src/features/planSelection/components/PlanSelection.js",
+        "id": "feature.planSelection.cta.ctaDowngradeFree",
+        "start": {
+          "column": 20,
+          "line": 41
+        }
+      },
+      {
+        "defaultMessage": "!!!Start my free 14-days Trial",
+        "end": {
+          "column": 3,
+          "line": 48
+        },
+        "file": "src/features/planSelection/components/PlanSelection.js",
+        "id": "feature.planSelection.cta.trial",
+        "start": {
+          "column": 15,
+          "line": 45
+        }
+      },
+      {
+        "defaultMessage": "!!!Choose Personal",
+        "end": {
+          "column": 3,
+          "line": 52
+        },
+        "file": "src/features/planSelection/components/PlanSelection.js",
+        "id": "feature.planSelection.cta.upgradePersonal",
+        "start": {
+          "column": 23,
+          "line": 49
+        }
+      },
+      {
+        "defaultMessage": "!!!Choose Professional",
+        "end": {
+          "column": 3,
+          "line": 56
+        },
+        "file": "src/features/planSelection/components/PlanSelection.js",
+        "id": "feature.planSelection.cta.upgradePro",
+        "start": {
+          "column": 18,
+          "line": 53
+        }
+      },
+      {
+        "defaultMessage": "!!!Complete comparison of all plans",
+        "end": {
+          "column": 3,
+          "line": 60
+        },
+        "file": "src/features/planSelection/components/PlanSelection.js",
+        "id": "feature.planSelection.fullFeatureList",
+        "start": {
+          "column": 19,
+          "line": 57
+        }
+      },
+      {
+        "defaultMessage": "!!!All prices based on yearly payment",
+        "end": {
+          "column": 3,
+          "line": 64
+        },
+        "file": "src/features/planSelection/components/PlanSelection.js",
+        "id": "feature.planSelection.pricesBasedOnAnnualPayment",
+        "start": {
+          "column": 30,
+          "line": 61
+        }
+      }
+    ],
+    "path": "src/features/planSelection/components/PlanSelection.json"
+  },
+  {
+    "descriptors": [
+      {
+        "defaultMessage": "!!!per {interval}",
+        "end": {
+          "column": 3,
+          "line": 19
+        },
+        "file": "src/features/planSelection/components/PlanTeaser.js",
+        "id": "subscription.interval.per",
+        "start": {
+          "column": 7,
+          "line": 16
+        }
+      },
+      {
+        "defaultMessage": "!!!Upgrade Account",
+        "end": {
+          "column": 3,
+          "line": 23
+        },
+        "file": "src/features/planSelection/components/PlanTeaser.js",
+        "id": "subscription.planItem.upgradeAccount",
+        "start": {
+          "column": 7,
+          "line": 20
+        }
+      }
+    ],
+    "path": "src/features/planSelection/components/PlanTeaser.json"
+  },
+  {
+    "descriptors": [
+      {
+        "defaultMessage": "!!!Downgrade your Franz Plan",
+        "end": {
+          "column": 3,
+          "line": 19
+        },
+        "file": "src/features/planSelection/containers/PlanSelectionScreen.js",
+        "id": "feature.planSelection.fullscreen.dialog.title",
+        "start": {
+          "column": 15,
+          "line": 16
+        }
+      },
+      {
+        "defaultMessage": "!!!You're about to downgrade to our Free account. Are you sure? Click here instead to get more services and functionality for just {currency}{price} a month.",
+        "end": {
+          "column": 3,
+          "line": 23
+        },
+        "file": "src/features/planSelection/containers/PlanSelectionScreen.js",
+        "id": "feature.planSelection.fullscreen.dialog.message",
+        "start": {
+          "column": 17,
+          "line": 20
+        }
+      },
+      {
+        "defaultMessage": "!!!Downgrade to Free",
+        "end": {
+          "column": 3,
+          "line": 27
+        },
+        "file": "src/features/planSelection/containers/PlanSelectionScreen.js",
+        "id": "feature.planSelection.fullscreen.dialog.cta.downgrade",
+        "start": {
+          "column": 22,
+          "line": 24
+        }
+      },
+      {
+        "defaultMessage": "!!!Choose Personal",
+        "end": {
+          "column": 3,
+          "line": 31
+        },
+        "file": "src/features/planSelection/containers/PlanSelectionScreen.js",
+        "id": "feature.planSelection.fullscreen.dialog.cta.upgrade",
+        "start": {
+          "column": 20,
+          "line": 28
+        }
+      }
+    ],
+    "path": "src/features/planSelection/containers/PlanSelectionScreen.json"
+  },
+  {
+    "descriptors": [
+      {
         "defaultMessage": "!!!QuickSwitch",
         "end": {
           "column": 3,
@@ -4727,6 +5137,107 @@
   {
     "descriptors": [
       {
+        "defaultMessage": "!!!Your Free Franz {plan} Trial ends in {time}.",
+        "end": {
+          "column": 3,
+          "line": 16
+        },
+        "file": "src/features/trialStatusBar/components/TrialStatusBar.js",
+        "id": "feature.trialStatusBar.restTime",
+        "start": {
+          "column": 12,
+          "line": 13
+        }
+      },
+      {
+        "defaultMessage": "!!!Your free Franz {plan} Trial has expired, please upgrade your account.",
+        "end": {
+          "column": 3,
+          "line": 20
+        },
+        "file": "src/features/trialStatusBar/components/TrialStatusBar.js",
+        "id": "feature.trialStatusBar.expired",
+        "start": {
+          "column": 11,
+          "line": 17
+        }
+      },
+      {
+        "defaultMessage": "!!!Upgrade now",
+        "end": {
+          "column": 3,
+          "line": 24
+        },
+        "file": "src/features/trialStatusBar/components/TrialStatusBar.js",
+        "id": "feature.trialStatusBar.cta",
+        "start": {
+          "column": 7,
+          "line": 21
+        }
+      }
+    ],
+    "path": "src/features/trialStatusBar/components/TrialStatusBar.json"
+  },
+  {
+    "descriptors": [
+      {
+        "defaultMessage": "!!!Downgrade your Franz Plan",
+        "end": {
+          "column": 3,
+          "line": 19
+        },
+        "file": "src/features/trialStatusBar/containers/TrialStatusBarScreen.js",
+        "id": "feature.trialStatusBar.fullscreen.dialog.title",
+        "start": {
+          "column": 15,
+          "line": 16
+        }
+      },
+      {
+        "defaultMessage": "!!!You're about to downgrade to our Free account. Are you sure? Click here instead to get more services and functionality for just {currency}{price} a month.",
+        "end": {
+          "column": 3,
+          "line": 23
+        },
+        "file": "src/features/trialStatusBar/containers/TrialStatusBarScreen.js",
+        "id": "feature.trialStatusBar.fullscreen.dialog.message",
+        "start": {
+          "column": 17,
+          "line": 20
+        }
+      },
+      {
+        "defaultMessage": "!!!Downgrade to Free",
+        "end": {
+          "column": 3,
+          "line": 27
+        },
+        "file": "src/features/trialStatusBar/containers/TrialStatusBarScreen.js",
+        "id": "feature.trialStatusBar.fullscreen.dialog.cta.downgrade",
+        "start": {
+          "column": 22,
+          "line": 24
+        }
+      },
+      {
+        "defaultMessage": "!!!Choose Personal",
+        "end": {
+          "column": 3,
+          "line": 31
+        },
+        "file": "src/features/trialStatusBar/containers/TrialStatusBarScreen.js",
+        "id": "feature.trialStatusBar.fullscreen.dialog.cta.upgrade",
+        "start": {
+          "column": 20,
+          "line": 28
+        }
+      }
+    ],
+    "path": "src/features/trialStatusBar/containers/TrialStatusBarScreen.json"
+  },
+  {
+    "descriptors": [
+      {
         "defaultMessage": "!!!Home",
         "end": {
           "column": 3,
@@ -5093,104 +5604,104 @@
         "defaultMessage": "!!!Your workspaces",
         "end": {
           "column": 3,
-          "line": 22
+          "line": 23
         },
         "file": "src/features/workspaces/components/WorkspacesDashboard.js",
         "id": "settings.workspaces.headline",
         "start": {
           "column": 12,
-          "line": 19
+          "line": 20
         }
       },
       {
         "defaultMessage": "!!!You haven't added any workspaces yet.",
         "end": {
           "column": 3,
-          "line": 26
+          "line": 27
         },
         "file": "src/features/workspaces/components/WorkspacesDashboard.js",
         "id": "settings.workspaces.noWorkspacesAdded",
         "start": {
           "column": 19,
-          "line": 23
+          "line": 24
         }
       },
       {
         "defaultMessage": "!!!Could not load your workspaces",
         "end": {
           "column": 3,
-          "line": 30
+          "line": 31
         },
         "file": "src/features/workspaces/components/WorkspacesDashboard.js",
         "id": "settings.workspaces.workspacesRequestFailed",
         "start": {
           "column": 27,
-          "line": 27
+          "line": 28
         }
       },
       {
         "defaultMessage": "!!!Try again",
         "end": {
           "column": 3,
-          "line": 34
+          "line": 35
         },
         "file": "src/features/workspaces/components/WorkspacesDashboard.js",
         "id": "settings.workspaces.tryReloadWorkspaces",
         "start": {
           "column": 23,
-          "line": 31
+          "line": 32
         }
       },
       {
         "defaultMessage": "!!!Your changes have been saved",
         "end": {
           "column": 3,
-          "line": 38
+          "line": 39
         },
         "file": "src/features/workspaces/components/WorkspacesDashboard.js",
         "id": "settings.workspaces.updatedInfo",
         "start": {
           "column": 15,
-          "line": 35
+          "line": 36
         }
       },
       {
         "defaultMessage": "!!!Workspace has been deleted",
         "end": {
           "column": 3,
-          "line": 42
+          "line": 43
         },
         "file": "src/features/workspaces/components/WorkspacesDashboard.js",
         "id": "settings.workspaces.deletedInfo",
         "start": {
           "column": 15,
-          "line": 39
+          "line": 40
         }
       },
       {
         "defaultMessage": "!!!Info about workspace feature",
         "end": {
           "column": 3,
-          "line": 46
+          "line": 47
         },
         "file": "src/features/workspaces/components/WorkspacesDashboard.js",
         "id": "settings.workspaces.workspaceFeatureInfo",
         "start": {
           "column": 24,
-          "line": 43
+          "line": 44
         }
       },
       {
         "defaultMessage": "!!!Less is More: Introducing Ferdi Workspaces",
         "end": {
           "column": 3,
-          "line": 50
+          "line": 51
         },
         "file": "src/features/workspaces/components/WorkspacesDashboard.js",
         "id": "settings.workspaces.workspaceFeatureHeadline",
         "start": {
           "column": 28,
-          "line": 47
+          "line": 48
         }
       }
     ],
@@ -5217,7 +5728,7 @@
   {
     "descriptors": [
       {
-        "defaultMessage": "!!!Franz Professional",
+        "defaultMessage": "!!!Professional",
         "end": {
           "column": 3,
           "line": 8
@@ -5230,7 +5741,7 @@
         }
       },
       {
-        "defaultMessage": "!!!Franz Personal",
+        "defaultMessage": "!!!Personal",
         "end": {
           "column": 3,
           "line": 12
@@ -5243,7 +5754,7 @@
         }
       },
       {
-        "defaultMessage": "!!!Franz Free",
+        "defaultMessage": "!!!Free",
         "end": {
           "column": 3,
           "line": 16
@@ -5256,7 +5767,7 @@
         }
       },
       {
-        "defaultMessage": "!!!Franz Premium",
+        "defaultMessage": "!!!Premium",
         "end": {
           "column": 3,
           "line": 20
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 477bdf43c..a34da1848 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -9,6 +9,22 @@
   "feature.delayApp.trial.headline": "Get the free Ferdi Professional 14 day trial and skip the line",
   "feature.delayApp.upgrade.action": "Get a Ferdi Supporter License",
   "feature.delayApp.upgrade.actionShort": "Upgrade account",
+  "feature.planSelection.cta.ctaDowngradeFree": "Downgrade to Free",
+  "feature.planSelection.cta.stayOnFree": "Stay on Free",
+  "feature.planSelection.cta.trial": "Start my free 14-days Trial",
+  "feature.planSelection.cta.upgradePersonal": "Choose Personal",
+  "feature.planSelection.cta.upgradePro": "Choose Professional",
+  "feature.planSelection.free.text": "Basic functionality",
+  "feature.planSelection.fullFeatureList": "Complete comparison of all plans",
+  "feature.planSelection.fullscreen.dialog.cta.downgrade": "Downgrade to Free",
+  "feature.planSelection.fullscreen.dialog.cta.upgrade": "Choose Personal",
+  "feature.planSelection.fullscreen.dialog.message": "You're about to downgrade to our Free account. Are you sure? Click here instead to get more services and functionality for just {currency}{price} a month.",
+  "feature.planSelection.fullscreen.dialog.title": "Downgrade your Ferdi Plan",
+  "feature.planSelection.fullscreen.subheadline": "It's time to make a choice. Ferdi works best on our Personal and Professional plans. Please have a look and choose the best one for you.",
+  "feature.planSelection.fullscreen.welcome": "Are you ready to choose, {name}",
+  "feature.planSelection.personal.text": "More services, no waiting - ideal for personal use.",
+  "feature.planSelection.pricesBasedOnAnnualPayment": "All prices based on yearly payment",
+  "feature.planSelection.pro.text": "Unlimited services and professional features for you - and your team.",
   "feature.quickSwitch.info": "Select a service with TAB, ↑ and ↓. Open a service with ENTER.",
   "feature.quickSwitch.search": "Search...",
   "feature.quickSwitch.title": "QuickSwitch",
@@ -23,6 +39,13 @@
   "feature.todos.premium.info": "Ferdi Todos are available to premium users now!",
   "feature.todos.premium.rollout": "Everyone else will have to wait a little longer.",
   "feature.todos.premium.upgrade": "Upgrade Account",
+  "feature.trialStatusBar.cta": "Upgrade now",
+  "feature.trialStatusBar.expired": "Your free Ferdi {plan} Trial has expired, please upgrade your account.",
+  "feature.trialStatusBar.fullscreen.dialog.cta.downgrade": "Downgrade to Free",
+  "feature.trialStatusBar.fullscreen.dialog.cta.upgrade": "Choose Personal",
+  "feature.trialStatusBar.fullscreen.dialog.message": "You're about to downgrade to our Free account. Are you sure? Click here instead to get more services and functionality for just {currency}{price} a month.",
+  "feature.trialStatusBar.fullscreen.dialog.title": "Downgrade your Ferdi Plan",
+  "feature.trialStatusBar.restTime": "Your Free Ferdi {plan} Trial ends in {time}.",
   "global.api.unhealthy": "Can't connect to Ferdi online services",
   "global.franzProRequired": "Ferdi Professional Required",
   "global.notConnectedToTheInternet": "You are not connected to the internet.",
@@ -140,15 +163,20 @@
   "password.submit.label": "Submit",
   "password.successInfo": "Please check your email",
   "premiumFeature.button.upgradeAccount": "Upgrade account",
+  "pricing.features.accountSync": "Account Synchronisation",
   "pricing.features.adFree": "Forever ad-free",
   "pricing.features.appDelays": "No Waiting Screens",
   "pricing.features.customWebsites": "Add Custom Websites",
+  "pricing.features.desktopNotifications": "Desktop Notifications",
   "pricing.features.onPremise": "On-premise & other Hosted Services",
+  "pricing.features.recipes": "Choose from more than 70 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.upToSixServices": "Add up to 6 services",
+  "pricing.features.upToThreeServices": "Add up to 3 services",
   "pricing.features.workspaces": "Workspaces",
   "pricing.plan.free": "Ferdi Free",
   "pricing.plan.legacy": "Ferdi Premium",
@@ -160,13 +188,17 @@
   "pricing.plan.pro-yearly": "Ferdi Professional Yearly",
   "pricing.trial.cta.accept": "Yes, upgrade my account to Ferdi Professional",
   "pricing.trial.cta.skip": "Continue to Ferdi",
+  "pricing.trial.cta.start": "Start using Ferdi",
   "pricing.trial.error": "Sorry, we could not activate your trial!",
   "pricing.trial.features.headline": "Ferdi Professional includes:",
-  "pricing.trial.headline": "Ferdi Professional",
-  "pricing.trial.subheadline": "Your personal welcome offer:",
+  "pricing.trial.headline.pro": "Hi {name}, welcome to Ferdi",
+  "pricing.trial.intro.happyMessaging": "Happy messaging,",
+  "pricing.trial.intro.specialTreat": "We have a special treat for you.",
+  "pricing.trial.intro.tryPro": "Enjoy the full Ferdi Professional experience completely free for 14 days.",
   "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",
+  "pricing.trial.terms.trialWorth": "Free trial (normally {currency}{price} per month)",
   "service.crashHandler.action": "Reload {name}",
   "service.crashHandler.autoReload": "Trying to automatically restore {name} in {seconds} seconds",
   "service.crashHandler.headline": "Oh no!",
@@ -405,10 +437,15 @@
   "signup.link.login": "Already have an account, sign in?",
   "signup.password.label": "Password",
   "signup.submit.label": "Create account",
+  "subscription.bestValue": "Best value",
   "subscription.cta.activateTrial": "Yes, start the free Ferdi Professional trial",
   "subscription.cta.allOptions": "See all options",
   "subscription.cta.choosePlan": "Choose your plan",
   "subscription.includedProFeatures": "The Ferdi Professional Plan includes:",
+  "subscription.interval.per": "per {interval}",
+  "subscription.interval.perMonth": "per month",
+  "subscription.interval.perMonthPerUser": "per month & user",
+  "subscription.planItem.upgradeAccount": "Upgrade Account",
   "subscription.teaser.includedFeatures": "Paid Ferdi Plans include:",
   "subscription.teaser.intro": "Ferdi 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",
diff --git a/src/i18n/locales/zh-Hant.json b/src/i18n/locales/zh-Hant.json
deleted file mode 100644
index 872bfd9d7..000000000
--- a/src/i18n/locales/zh-Hant.json
+++ /dev/null
@@ -1,485 +0,0 @@
-{
-  "app.errorHandler.action": "Reload",
-  "app.errorHandler.headline": "Something went wrong",
-  "feature.announcements.changelog.headline": "Changes in Ferdi {version}",
-  "feature.delayApp.headline": "Please purchase a Ferdi Supporter License to skip waiting",
-  "feature.delayApp.text": "Ferdi will continue in {seconds} seconds.",
-  "feature.delayApp.trial.action": "Yes, I want the free 14 day trial of Ferdi Professional",
-  "feature.delayApp.trial.actionShort": "Activate the free Ferdi Professional trial",
-  "feature.delayApp.trial.headline": "Get the free Ferdi Professional 14 day trial and skip the line",
-  "feature.delayApp.upgrade.action": "Get a Ferdi Supporter License",
-  "feature.delayApp.upgrade.actionShort": "Upgrade account",
-  "feature.planSelection.cta.ctaDowngradeFree": "Downgrade to Free",
-  "feature.planSelection.cta.stayOnFree": "Stay on Free",
-  "feature.planSelection.cta.trial": "Start my free 14-days Trial",
-  "feature.planSelection.cta.upgradePersonal": "Choose Personal",
-  "feature.planSelection.cta.upgradePro": "Choose Professional",
-  "feature.planSelection.free.text": "Basic functionality",
-  "feature.planSelection.fullFeatureList": "Complete comparison of all plans",
-  "feature.planSelection.fullscreen.dialog.cta.downgrade": "Downgrade to Free",
-  "feature.planSelection.fullscreen.dialog.cta.upgrade": "Choose Personal",
-  "feature.planSelection.fullscreen.dialog.message": "You're about to downgrade to our Free account. Are you sure? Click here instead to get more services and functionality for just {currency}{price} a month.",
-  "feature.planSelection.fullscreen.dialog.title": "Downgrade your Ferdi Plan",
-  "feature.planSelection.fullscreen.subheadline": "It's time to make a choice. Ferdi works best on our Personal and Professional plans. Please have a look and choose the best one for you.",
-  "feature.planSelection.fullscreen.welcome": "Are you ready to choose, {name}",
-  "feature.planSelection.personal.text": "More services, no waiting - ideal for personal use.",
-  "feature.planSelection.pricesBasedOnAnnualPayment": "All prices based on yearly payment",
-  "feature.planSelection.pro.text": "Unlimited services and professional features for you - and your team.",
-  "feature.quickSwitch.info": "Select a service with TAB, ↑ and ↓. Open a service with ENTER.",
-  "feature.quickSwitch.search": "Search...",
-  "feature.quickSwitch.title": "QuickSwitch",
-  "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",
-  "feature.shareFranz.headline": "Ferdi is better together!",
-  "feature.shareFranz.shareText.email": "I've added {count} services to Ferdi! Get the free app for WhatsApp, Messenger, Slack, Skype and co at www.getferdi.com",
-  "feature.shareFranz.shareText.twitter": "I've added {count} services to Ferdi! Get the free app for WhatsApp, Messenger, Slack, Skype and co at www.getferdi.com /cc @FerdiMessenger",
-  "feature.shareFranz.text": "Tell your friends and colleagues how awesome Ferdi is and help us to spread the word.",
-  "feature.todos.premium.info": "Ferdi Todos are available to premium users now!",
-  "feature.todos.premium.rollout": "Everyone else will have to wait a little longer.",
-  "feature.todos.premium.upgrade": "Upgrade Account",
-  "feature.trialStatusBar.cta": "Upgrade now",
-  "feature.trialStatusBar.expired": "Your free Ferdi {plan} Trial has expired, please upgrade your account.",
-  "feature.trialStatusBar.fullscreen.dialog.cta.downgrade": "Downgrade to Free",
-  "feature.trialStatusBar.fullscreen.dialog.cta.upgrade": "Choose Personal",
-  "feature.trialStatusBar.fullscreen.dialog.message": "You're about to downgrade to our Free account. Are you sure? Click here instead to get more services and functionality for just {currency}{price} a month.",
-  "feature.trialStatusBar.fullscreen.dialog.title": "Downgrade your Ferdi Plan",
-  "feature.trialStatusBar.restTime": "Your Free Ferdi {plan} Trial ends in {time}.",
-  "global.api.unhealthy": "無法連接到Ferdi網路服務",
-  "global.franzProRequired": "Ferdi Professional Required",
-  "global.notConnectedToTheInternet": "您未連上網際網路",
-  "global.spellchecker.useDefault": "Use System Default ({default})",
-  "global.spellchecking.autodetect": "Detect language automatically",
-  "global.spellchecking.autodetect.short": "Automatic",
-  "global.spellchecking.language": "Spell checking language",
-  "global.upgradeButton.upgradeToPro": "Upgrade to Ferdi Professional",
-  "import.headline": "匯入您的 Ferdi 4 服務",
-  "import.notSupportedHeadline": "此服務不被 Ferdi 5 支持",
-  "import.skip.label": "我想手動匯入",
-  "import.submit.label": "匯入服務",
-  "infobar.authRequestFailed": "There were errors while trying to perform an authenticated request. Please try logging out and back in if this error persists.",
-  "infobar.buttonChangelog": "What is new?",
-  "infobar.buttonInstallUpdate": "重新啟動並且更新",
-  "infobar.buttonReloadServices": "重新載入",
-  "infobar.requiredRequestsFailed": "無法載入服務與帳戶資訊",
-  "infobar.servicesUpdated": "您的服務已更新",
-  "infobar.trialActivated": "Your trial was successfully activated. Happy messaging!",
-  "infobar.updateAvailable": "有新的更新可安裝",
-  "invite.email.label": "電子郵件信箱",
-  "invite.headline.friends": "邀請三個人",
-  "invite.name.label": "名子",
-  "invite.skip.label": "我想晚點進行",
-  "invite.submit.label": "Send invites",
-  "invite.successInfo": "Invitations sent successfully",
-  "locked.headline": "Locked",
-  "locked.info": "Ferdi is currently locked. Please unlock Ferdi with your password to see your messages.",
-  "locked.invalidCredentials": "Password invalid",
-  "locked.password.label": "Password",
-  "locked.submit.label": "Unlock",
-  "login.changeServer": "Change server",
-  "login.customServerQuestion": "Using a custom Ferdi server?",
-  "login.customServerSuggestion": "Try importing your Franz account",
-  "login.email.label": "電子郵件信箱",
-  "login.headline": "登入",
-  "login.invalidCredentials": "電子郵件帳戶或密碼有誤",
-  "login.link.password": "密碼重設",
-  "login.link.signup": "建立一個免費帳戶",
-  "login.password.label": "Password",
-  "login.serverLogout": "登入狀態過期，請重新登入",
-  "login.submit.label": "登入",
-  "login.tokenExpired": "登入狀態過期，請重新登入",
-  "menu.Todoss.closeTodosDrawer": "Close Todos drawer",
-  "menu.Todoss.openTodosDrawer": "Open Todos drawer",
-  "menu.app.about": "About Ferdi",
-  "menu.app.announcement": "What's new?",
-  "menu.app.autohideMenuBar": "Auto-hide menu bar",
-  "menu.app.checkForUpdates": "Check for updates",
-  "menu.app.hide": "Hide",
-  "menu.app.hideOthers": "Hide Others",
-  "menu.app.quit": "Quit",
-  "menu.app.settings": "Settings",
-  "menu.app.unhide": "Unhide",
-  "menu.edit": "Edit",
-  "menu.edit.copy": "Copy",
-  "menu.edit.cut": "Cut",
-  "menu.edit.delete": "Delete",
-  "menu.edit.emojiSymbols": "Emoji & Symbols",
-  "menu.edit.paste": "Paste",
-  "menu.edit.pasteAndMatchStyle": "Paste And Match Style",
-  "menu.edit.redo": "Redo",
-  "menu.edit.selectAll": "Select All",
-  "menu.edit.speech": "Speech",
-  "menu.edit.startDictation": "Start Dictation",
-  "menu.edit.startSpeaking": "Start Speaking",
-  "menu.edit.stopSpeaking": "Stop Speaking",
-  "menu.edit.undo": "Undo",
-  "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": "Ferdi Debug Information",
-  "menu.help.learnMore": "Learn More",
-  "menu.help.privacy": "Privacy Statement",
-  "menu.help.support": "Support",
-  "menu.help.tos": "Terms of Service",
-  "menu.services": "Services",
-  "menu.services.activatePreviousService": "Activate previous service",
-  "menu.services.addNewService": "Add New Service...",
-  "menu.services.goHome": "Home",
-  "menu.services.setNextServiceActive": "Activate next service",
-  "menu.todos": "Todos",
-  "menu.todos.enableTodos": "Enable Todos",
-  "menu.view": "View",
-  "menu.view.back": "Back",
-  "menu.view.enterFullScreen": "Enter Full Screen",
-  "menu.view.exitFullScreen": "Exit Full Screen",
-  "menu.view.forward": "Forward",
-  "menu.view.lockFerdi": "Lock Ferdi",
-  "menu.view.openQuickSwitch": "Open Quick Switch",
-  "menu.view.reloadFranz": "Reload Ferdi",
-  "menu.view.reloadService": "Reload Service",
-  "menu.view.resetZoom": "Actual Size",
-  "menu.view.toggleDevTools": "Toggle Developer Tools",
-  "menu.view.toggleFullScreen": "Toggle Full Screen",
-  "menu.view.toggleServiceDevTools": "Toggle Service Developer Tools",
-  "menu.view.toggleTodosDevTools": "Toggle Todos Developer Tools",
-  "menu.view.zoomIn": "Zoom In",
-  "menu.view.zoomOut": "Zoom Out",
-  "menu.window": "Window",
-  "menu.window.close": "Close",
-  "menu.window.minimize": "Minimize",
-  "menu.workspaces": "Workspaces",
-  "menu.workspaces.addNewWorkspace": "Add New Workspace...",
-  "menu.workspaces.closeWorkspaceDrawer": "Close workspace drawer",
-  "menu.workspaces.defaultWorkspace": "All services",
-  "menu.workspaces.openWorkspaceDrawer": "Open workspace drawer",
-  "password.email.label": "電子郵件信箱",
-  "password.headline": "密碼重設",
-  "password.link.login": "登入您的帳戶",
-  "password.link.signup": "建立一個免費帳戶",
-  "password.noUser": "此電子郵件帳戶不存在",
-  "password.submit.label": "送出",
-  "password.successInfo": "請重新確認您的電子郵件信箱",
-  "premiumFeature.button.upgradeAccount": "Upgrade account",
-  "pricing.features.accountSync": "Account Synchronisation",
-  "pricing.features.adFree": "Forever ad-free",
-  "pricing.features.appDelays": "No Waiting Screens",
-  "pricing.features.customWebsites": "Add Custom Websites",
-  "pricing.features.desktopNotifications": "Desktop Notifications",
-  "pricing.features.onPremise": "On-premise & other Hosted Services",
-  "pricing.features.recipes": "Choose from more than 70 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.upToSixServices": "Add up to 6 services",
-  "pricing.features.upToThreeServices": "Add up to 3 services",
-  "pricing.features.workspaces": "Workspaces",
-  "pricing.plan.free": "Ferdi Free",
-  "pricing.plan.legacy": "Ferdi Premium",
-  "pricing.plan.personal": "Ferdi Personal",
-  "pricing.plan.personal-monthly": "Ferdi Personal Monthly",
-  "pricing.plan.personal-yearly": "Ferdi Personal Yearly",
-  "pricing.plan.pro": "Ferdi Professional",
-  "pricing.plan.pro-monthly": "Ferdi Professional Monthly",
-  "pricing.plan.pro-yearly": "Ferdi Professional Yearly",
-  "pricing.trial.cta.accept": "Yes, upgrade my account to Ferdi Professional",
-  "pricing.trial.cta.skip": "Continue to Ferdi",
-  "pricing.trial.cta.start": "Start using Ferdi",
-  "pricing.trial.error": "Sorry, we could not activate your trial!",
-  "pricing.trial.features.headline": "Ferdi Professional includes:",
-  "pricing.trial.headline.pro": "Hi {name}, welcome to Ferdi",
-  "pricing.trial.intro.happyMessaging": "Happy messaging,",
-  "pricing.trial.intro.specialTreat": "We have a special treat for you.",
-  "pricing.trial.intro.tryPro": "Enjoy the full Ferdi Professional experience completely free for 14 days.",
-  "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",
-  "pricing.trial.terms.trialWorth": "Free trial (normally {currency}{price} per month)",
-  "service.crashHandler.action": "Reload {name}",
-  "service.crashHandler.autoReload": "Trying to automatically restore {name} in {seconds} seconds",
-  "service.crashHandler.headline": "Oh no!",
-  "service.crashHandler.text": "{name} has caused an error.",
-  "service.disabledHandler.action": "Enable {name}",
-  "service.disabledHandler.headline": "{name} is disabled",
-  "service.errorHandler.action": "Reload {name}",
-  "service.errorHandler.editAction": "Edit {name}",
-  "service.errorHandler.headline": "Oh no!",
-  "service.errorHandler.message": "Error",
-  "service.errorHandler.text": "{name} has failed to load.",
-  "service.restrictedHandler.action": "Upgrade Account",
-  "service.restrictedHandler.customUrl.headline": "Ferdi Professional Plan required",
-  "service.restrictedHandler.customUrl.text": "Please upgrade to the Ferdi 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": "開始使用",
-  "services.login": "Please login to use Ferdi.",
-  "services.serverInfo": "Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner.",
-  "services.serverless": "Use Ferdi without an Account",
-  "services.welcome": "歡迎使用 Ferdi",
-  "settings.account.account.editButton": "更改帳戶資訊",
-  "settings.account.accountType.basic": "基本帳戶",
-  "settings.account.accountType.premium": "Premium Supporter Account",
-  "settings.account.buttonSave": "更新帳戶資訊",
-  "settings.account.deleteAccount": "Delete account",
-  "settings.account.deleteEmailSent": "You have received an email with a link to confirm your account deletion. Your account and data cannot be restored!",
-  "settings.account.deleteInfo": "If you don't need your Ferdi account any longer, you can delete your account and all related data here.",
-  "settings.account.headline": "帳戶",
-  "settings.account.headlineAccount": "帳戶資訊",
-  "settings.account.headlineDangerZone": "Danger Zone",
-  "settings.account.headlineInvoices": "Invoices",
-  "settings.account.headlinePassword": "更改密碼",
-  "settings.account.headlineProfile": "更新帳戶資訊",
-  "settings.account.headlineSubscription": "您的訂閱",
-  "settings.account.headlineTrialUpgrade": "Get the free 14 day Ferdi Professional Trial",
-  "settings.account.headlineUpgradeAccount": "Upgrade your account & get the full Ferdi experience",
-  "settings.account.invoiceDownload": "下載",
-  "settings.account.manageSubscription.label": "管理訂閱",
-  "settings.account.successInfo": "您的更改已經儲存",
-  "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 Ferdi Professional",
-  "settings.account.userInfoRequestFailed": "無法載入帳戶資訊",
-  "settings.account.yourLicense": "Your Ferdi License",
-  "settings.app.accentColorInfo": "Write your accent color in a CSS-compatible format. (Default: #7367f0)",
-  "settings.app.buttonClearAllCache": "Clear cache",
-  "settings.app.buttonInstallUpdate": "重新啟動並且更新",
-  "settings.app.buttonSearchForUpdate": "Check for updates",
-  "settings.app.cacheInfo": "Ferdi cache is currently using {size} of disk space.",
-  "settings.app.currentVersion": "當前版本：",
-  "settings.app.form.accentColor": "Accent color",
-  "settings.app.form.autoLaunchInBackground": "背景啟動",
-  "settings.app.form.autoLaunchOnStart": "開機時啟動",
-  "settings.app.form.beta": "包含開發中版本",
-  "settings.app.form.darkMode": "Join the Dark Side",
-  "settings.app.form.enableGPUAcceleration": "Enable GPU Acceleration",
-  "settings.app.form.enableLock": "Enable Ferdi password lock",
-  "settings.app.form.enableSpellchecking": "Enable spell checking",
-  "settings.app.form.enableSystemTray": "在系統匣上顯示",
-  "settings.app.form.enableTodos": "Enable Ferdi Todos",
-  "settings.app.form.hibernate": "Enable service hibernation",
-  "settings.app.form.hibernationStrategy": "Hibernation strategy",
-  "settings.app.form.keepAllWorkspacesLoaded": "Keep all workspaces loaded",
-  "settings.app.form.language": "語言",
-  "settings.app.form.lockPassword": "Ferdi Lock password",
-  "settings.app.form.minimizeToSystemTray": "最小化至系統匣",
-  "settings.app.form.noUpdates": "Disable updates",
-  "settings.app.form.privateNotifications": "Don't show message content in notifications",
-  "settings.app.form.runInBackground": "關閉時保持在背景運作",
-  "settings.app.form.scheduledDNDEnabled": "Enable scheduled Do-not-Disturb",
-  "settings.app.form.scheduledDNDEnd": "To",
-  "settings.app.form.scheduledDNDStart": "From",
-  "settings.app.form.server": "Server",
-  "settings.app.form.showDisabledServices": "Display disabled services tabs",
-  "settings.app.form.showMessagesBadgesWhenMuted": "Show unread message badge when notifications are disabled",
-  "settings.app.form.showServiceNavigationBar": "Always show service navigation bar",
-  "settings.app.form.todoServer": "Todo Server",
-  "settings.app.form.universalDarkMode": "Enable universal Dark Mode",
-  "settings.app.headline": "Settings",
-  "settings.app.headlineAdvanced": "Advanced",
-  "settings.app.headlineAppearance": "Appearance",
-  "settings.app.headlineGeneral": "一般",
-  "settings.app.headlineLanguage": "語言",
-  "settings.app.headlineUpdates": "更新",
-  "settings.app.hibernateInfo": "By default, Ferdi will keep all your services open and loaded in the background so they are ready when you want to use them. Service Hibernation will unload your services after a specified amount. This is useful to save RAM or keeping services from slowing down your computer.",
-  "settings.app.languageDisclaimer": "Official translations are English & German. All other languages are community based translations.",
-  "settings.app.lockInfo": "Ferdi password lock allows you to keep your messages protected.\nUsing Ferdi password lock, you will be prompted to enter your password everytime you start Ferdi or lock Ferdi yourself using the lock symbol in the bottom left corner or the shortcut CMD/CTRL+Shift+L.",
-  "settings.app.lockedPassword": "Ferdi Lock Password",
-  "settings.app.lockedPasswordInfo": "Please make sure to set a password you'll remember.\nIf you loose this password, you will have to reinstall Ferdi.",
-  "settings.app.restartRequired": "Changes require restart",
-  "settings.app.scheduledDNDInfo": "Scheduled Do-not-Disturb allows you to define a period of time in which you do not want to get Notifications from Ferdi.",
-  "settings.app.scheduledDNDTimeInfo": "Times in 24-Hour-Format. End time can be before start time (e.g. start 17:00, end 09:00) to enable Do-not-Disturb overnight.",
-  "settings.app.serverInfo": "We advice you to logout after changing your server as your settings might not be saved otherwise.",
-  "settings.app.serverMoneyInfo": "You are using the official Franz Server for Ferdi.\nWe know that Ferdi allows you to use all its features for free but you are still using Franz's server resources - which Franz's creator has to pay for.\nPlease still consider [Link 1]paying for a Franz account[/Link] or [Link 2]using a self-hosted ferdi-server[/Link] (if you have the knowledge and resources to do so). \nBy using Ferdi, you still profit greatly from Franz's recipe store, server resources and its development.",
-  "settings.app.subheadlineCache": "Cache",
-  "settings.app.todoServerInfo": "This server will be used for the \"Ferdi Todo\" feature. (default: https://app.franztodos.com)",
-  "settings.app.translationHelp": "Help us to translate Ferdi into your language.",
-  "settings.app.universalDarkModeInfo": "Universal Dark Mode tries to dynamically generate dark mode styles for services that are otherwise not currently supported.",
-  "settings.app.updateStatusAvailable": "有可用更新，下載中...",
-  "settings.app.updateStatusSearching": "檢查更新中...",
-  "settings.app.updateStatusUpToDate": "已經是最新版本了",
-  "settings.invite.headline": "Invite Friends",
-  "settings.navigation.account": "帳戶",
-  "settings.navigation.availableServices": "可用服務",
-  "settings.navigation.logout": "登出",
-  "settings.navigation.settings": "Settings",
-  "settings.navigation.supportFerdi": "Support Ferdi",
-  "settings.navigation.team": "Manage Team",
-  "settings.navigation.yourServices": "您的服務",
-  "settings.navigation.yourWorkspaces": "Your workspaces",
-  "settings.recipes.all": "All services",
-  "settings.recipes.custom": "Custom Services",
-  "settings.recipes.customService.headline.communityRecipes": "Community 3rd Party Recipes",
-  "settings.recipes.customService.headline.customRecipes": "Custom 3rd Party Recipes",
-  "settings.recipes.customService.headline.devRecipes": "Your Development Service Recipes",
-  "settings.recipes.customService.intro": "To add a custom service, copy the service recipe to:",
-  "settings.recipes.customService.openDevDocs": "Developer Documentation",
-  "settings.recipes.customService.openFolder": "Open folder",
-  "settings.recipes.headline": "可用服務",
-  "settings.recipes.missingService": "Missing a service?",
-  "settings.recipes.mostPopular": "熱門",
-  "settings.recipes.nothingFound": "抱歉，找不到您所要的服務",
-  "settings.recipes.servicesSuccessfulAddedInfo": "新增服務成功",
-  "settings.searchService": "Search service",
-  "settings.service.error.goBack": "返回",
-  "settings.service.error.headline": "Error",
-  "settings.service.error.message": "無法載入服務元件",
-  "settings.service.form.addServiceHeadline": "新增 {name}",
-  "settings.service.form.availableServices": "可用服務",
-  "settings.service.form.customUrl": "Custom server",
-  "settings.service.form.customUrlPremiumInfo": "To add self hosted services, you need a Ferdi Premium Supporter Account.",
-  "settings.service.form.customUrlUpgradeAccount": "升級帳戶",
-  "settings.service.form.customUrlValidationError": "Could not validate custom {name} server.",
-  "settings.service.form.deleteButton": "刪除",
-  "settings.service.form.editServiceHeadline": "Edit {name}",
-  "settings.service.form.enableAudio": "Enable audio",
-  "settings.service.form.enableBadge": "Show unread message badges",
-  "settings.service.form.enableDarkMode": "Enable Dark Mode",
-  "settings.service.form.enableNotification": "啟用通知",
-  "settings.service.form.enableService": "啟用服務",
-  "settings.service.form.headlineBadges": "Unread message badges",
-  "settings.service.form.headlineGeneral": "一般",
-  "settings.service.form.headlineNotifications": "Notifications",
-  "settings.service.form.icon": "Custom icon",
-  "settings.service.form.iconDelete": "Delete",
-  "settings.service.form.iconUpload": "Drop your image, or click here",
-  "settings.service.form.indirectMessageInfo": "除了 @username, @channel, @here 之外，當您參與的頻道有訊息時，就會通知",
-  "settings.service.form.indirectMessages": "針對全部訊息顯示通知",
-  "settings.service.form.isMutedInfo": "When disabled, all notification sounds and audio playback are muted",
-  "settings.service.form.name": "名子",
-  "settings.service.form.openDarkmodeCss": "Open darkmode.css",
-  "settings.service.form.proxy.headline": "HTTP/HTTPS Proxy Settings",
-  "settings.service.form.proxy.host": "Proxy Host/IP",
-  "settings.service.form.proxy.info": "Proxy settings will not synced with the Ferdi servers.",
-  "settings.service.form.proxy.isEnabled": "Use Proxy",
-  "settings.service.form.proxy.password": "Password (optional)",
-  "settings.service.form.proxy.port": "Port",
-  "settings.service.form.proxy.restartInfo": "Please restart Ferdi after changing proxy Settings.",
-  "settings.service.form.proxy.user": "User (optional)",
-  "settings.service.form.saveButton": "儲存",
-  "settings.service.form.tabHosted": "Hosted",
-  "settings.service.form.tabOnPremise": "Self hosted ⭐️",
-  "settings.service.form.team": "Team",
-  "settings.service.form.useHostedService": "Use the hosted {name} service.",
-  "settings.service.form.yourServices": "您的服務",
-  "settings.services.deletedInfo": "服務已刪除",
-  "settings.services.discoverServices": "服務列表",
-  "settings.services.headline": "您的服務",
-  "settings.services.noServicesAdded": "您還沒加入任何服務",
-  "settings.services.servicesRequestFailed": "Could not load your services",
-  "settings.services.tooltip.isDisabled": "已停用服務",
-  "settings.services.tooltip.isMuted": "All sounds are muted",
-  "settings.services.tooltip.notificationsDisabled": "已停用通知",
-  "settings.services.updatedInfo": "您的更改已經儲存",
-  "settings.supportFerdi.github": "Star on GitHub",
-  "settings.supportFerdi.headline": "Support Ferdi",
-  "settings.supportFerdi.openCollective": "Support our Open Collective",
-  "settings.supportFerdi.share": "Tell your Friends",
-  "settings.supportFerdi.title": "Do you like Ferdi? Spread the love!",
-  "settings.team.contentHeadline": "Ferdi for Teams",
-  "settings.team.copy": "Ferdi for Teams gives you the option to invite co-workers to your team by sending them email invitations and manage their subscriptions in your account’s preferences. Don’t waste time setting up subscriptions for every team member individually, forget about multiple invoices and different billing cycles - one team to rule them all!",
-  "settings.team.headline": "Team",
-  "settings.team.intro": "You and your team use Ferdi? You can now manage Premium subscriptions for as many colleagues, friends or family members as you want, all from within one account.",
-  "settings.team.manageAction": "Manage your Team on getferdi.com",
-  "settings.team.teamsUnavailable": "Teams are unavailable",
-  "settings.team.teamsUnavailableInfo": "Teams are currently only available when using the Franz Server and after paying for Franz Professional. Please change your server to https://api.franzinfra.com to use teams.",
-  "settings.team.upgradeAction": "Upgrade your Account",
-  "settings.user.form.accountType.company": "公司",
-  "settings.user.form.accountType.individual": "個人",
-  "settings.user.form.accountType.label": "帳戶類型",
-  "settings.user.form.accountType.non-profit": "非營利",
-  "settings.user.form.currentPassword": "舊密碼",
-  "settings.user.form.email": "電子郵件信箱",
-  "settings.user.form.firstname": "名子",
-  "settings.user.form.lastname": "姓氏",
-  "settings.user.form.newPassword": "新密碼",
-  "settings.workspace.add.form.name": "名子",
-  "settings.workspace.add.form.submitButton": "Create workspace",
-  "settings.workspace.form.buttonDelete": "Delete workspace",
-  "settings.workspace.form.buttonSave": "Save workspace",
-  "settings.workspace.form.keepLoaded": "Keep this workspace loaded*",
-  "settings.workspace.form.keepLoadedInfo": "*This option will be overwritten by the global \"Keep all workspaces loaded\" option.",
-  "settings.workspace.form.name": "名子",
-  "settings.workspace.form.servicesInWorkspaceHeadline": "Services in this Workspace",
-  "settings.workspace.form.yourWorkspaces": "Your workspaces",
-  "settings.workspaces.deletedInfo": "Workspace has been deleted",
-  "settings.workspaces.headline": "Your workspaces",
-  "settings.workspaces.noWorkspacesAdded": "You haven't added any workspaces yet.",
-  "settings.workspaces.tryReloadWorkspaces": "Try again",
-  "settings.workspaces.updatedInfo": "您的更改已經儲存",
-  "settings.workspaces.workspaceFeatureHeadline": "Less is More: Introducing Ferdi Workspaces",
-  "settings.workspaces.workspaceFeatureInfo": "Ferdi Workspaces let you focus on what’s important right now. Set up different sets of services and easily switch between them at any time. You decide which services you need when and where, so we can help you stay on top of your game - or easily switch off from work whenever you want.",
-  "settings.workspaces.workspacesRequestFailed": "Could not load your workspaces",
-  "sidebar.addNewService": "Add new service",
-  "sidebar.closeTodosDrawer": "Close Ferdi Todos",
-  "sidebar.closeWorkspaceDrawer": "Close workspace drawer",
-  "sidebar.lockFerdi": "Lock Ferdi",
-  "sidebar.muteApp": "Disable notifications & audio",
-  "sidebar.openTodosDrawer": "Open Ferdi Todos",
-  "sidebar.openWorkspaceDrawer": "Open workspace drawer",
-  "sidebar.settings": "Settings",
-  "sidebar.unmuteApp": "Enable notifications & audio",
-  "signup.email.label": "電子郵件信箱",
-  "signup.emailDuplicate": "此電子郵件信箱已被註冊",
-  "signup.firstname.label": "名子",
-  "signup.headline": "註冊",
-  "signup.lastname.label": "姓氏",
-  "signup.legal.info": "在建立帳戶同時，您同意：",
-  "signup.legal.privacy": "Privacy Statement",
-  "signup.legal.terms": "服務條款",
-  "signup.link.login": "您已有一個帳戶，請問是否要登入？",
-  "signup.password.label": "Password",
-  "signup.submit.label": "建立帳戶",
-  "subscription.bestValue": "Best value",
-  "subscription.cta.activateTrial": "Yes, start the free Ferdi Professional trial",
-  "subscription.cta.allOptions": "See all options",
-  "subscription.cta.choosePlan": "Choose your plan",
-  "subscription.includedProFeatures": "The Ferdi Professional Plan includes:",
-  "subscription.interval.per": "per {interval}",
-  "subscription.interval.perMonth": "per month",
-  "subscription.interval.perMonthPerUser": "per month & user",
-  "subscription.planItem.upgradeAccount": "Upgrade Account",
-  "subscription.teaser.includedFeatures": "Paid Ferdi Plans include:",
-  "subscription.teaser.intro": "Ferdi 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": "取消",
-  "subscriptionPopup.buttonDone": "完成",
-  "tabs.item.deleteService": "刪除",
-  "tabs.item.disableAudio": "Disable audio",
-  "tabs.item.disableNotifications": "停用通知",
-  "tabs.item.disableService": "停用服務",
-  "tabs.item.edit": "Edit",
-  "tabs.item.enableAudio": "Enable audio",
-  "tabs.item.enableNotification": "啟用通知",
-  "tabs.item.enableService": "啟用服務",
-  "tabs.item.reload": "Reload",
-  "validation.email": "{field} is not valid",
-  "validation.minLength": "{field} should be at least {length} characters long",
-  "validation.oneRequired": "At least one is required",
-  "validation.required": "{field} is required",
-  "validation.url": "{field} is not a valid URL",
-  "webControls.back": "Back",
-  "webControls.forward": "Forward",
-  "webControls.goHome": "Home",
-  "webControls.openInBrowser": "Open in Browser",
-  "webControls.reload": "Reload",
-  "welcome.loginButton": "登入",
-  "welcome.signupButton": "建立一個免費帳戶",
-  "workspaceDrawer.addNewWorkspaceLabel": "Add new workspace",
-  "workspaceDrawer.allServices": "All services",
-  "workspaceDrawer.headline": "Workspaces",
-  "workspaceDrawer.item.contextMenuEdit": "edit",
-  "workspaceDrawer.item.noServicesAddedYet": "No services added yet",
-  "workspaceDrawer.premiumCtaButtonLabel": "Create your first workspace",
-  "workspaceDrawer.proFeatureBadge": "Premium feature",
-  "workspaceDrawer.reactivatePremiumAccountLabel": "Reactivate premium account",
-  "workspaceDrawer.workspaceFeatureInfo": "<p>Ferdi Workspaces let you focus on what’s important right now. Set up different sets of services and easily switch between them at any time.</p><p>You decide which services you need when and where, so we can help you stay on top of your game - or easily switch off from work whenever you want.</p>",
-  "workspaceDrawer.workspacesSettingsTooltip": "Edit workspaces settings",
-  "workspaces.switchingIndicator.switchingTo": "Switching to"
-}
diff --git a/src/i18n/messages/src/components/auth/Pricing.json b/src/i18n/messages/src/components/auth/Pricing.json
index 0885f6a20..c4c94bb32 100644
--- a/src/i18n/messages/src/components/auth/Pricing.json
+++ b/src/i18n/messages/src/components/auth/Pricing.json
@@ -1,7 +1,7 @@
 [
   {
-    "id": "pricing.trial.headline",
-    "defaultMessage": "!!!Franz Professional",
+    "id": "pricing.trial.headline.pro",
+    "defaultMessage": "!!!Hi {name}, welcome to Franz",
     "file": "src/components/auth/Pricing.js",
     "start": {
       "line": 15,
@@ -13,12 +13,12 @@
     }
   },
   {
-    "id": "pricing.trial.subheadline",
-    "defaultMessage": "!!!Your personal welcome offer:",
+    "id": "pricing.trial.intro.specialTreat",
+    "defaultMessage": "!!!We have a special treat for you.",
     "file": "src/components/auth/Pricing.js",
     "start": {
       "line": 19,
-      "column": 17
+      "column": 16
     },
     "end": {
       "line": 22,
@@ -26,15 +26,41 @@
     }
   },
   {
+    "id": "pricing.trial.intro.tryPro",
+    "defaultMessage": "!!!Enjoy the full Franz Professional experience completely free for 14 days.",
+    "file": "src/components/auth/Pricing.js",
+    "start": {
+      "line": 23,
+      "column": 10
+    },
+    "end": {
+      "line": 26,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.trial.intro.happyMessaging",
+    "defaultMessage": "!!!Happy messaging,",
+    "file": "src/components/auth/Pricing.js",
+    "start": {
+      "line": 27,
+      "column": 18
+    },
+    "end": {
+      "line": 30,
+      "column": 3
+    }
+  },
+  {
     "id": "pricing.trial.terms.headline",
     "defaultMessage": "!!!No strings attached",
     "file": "src/components/auth/Pricing.js",
     "start": {
-      "line": 23,
+      "line": 31,
       "column": 29
     },
     "end": {
-      "line": 26,
+      "line": 34,
       "column": 3
     }
   },
@@ -43,11 +69,11 @@
     "defaultMessage": "!!!No credit card required",
     "file": "src/components/auth/Pricing.js",
     "start": {
-      "line": 27,
+      "line": 35,
       "column": 16
     },
     "end": {
-      "line": 30,
+      "line": 38,
       "column": 3
     }
   },
@@ -56,11 +82,24 @@
     "defaultMessage": "!!!Your free trial ends automatically after 14 days",
     "file": "src/components/auth/Pricing.js",
     "start": {
-      "line": 31,
+      "line": 39,
       "column": 21
     },
     "end": {
-      "line": 34,
+      "line": 42,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.trial.terms.trialWorth",
+    "defaultMessage": "!!!Free trial (normally {currency}{price} per month)",
+    "file": "src/components/auth/Pricing.js",
+    "start": {
+      "line": 43,
+      "column": 14
+    },
+    "end": {
+      "line": 46,
       "column": 3
     }
   },
@@ -69,24 +108,37 @@
     "defaultMessage": "!!!Sorry, we could not activate your trial!",
     "file": "src/components/auth/Pricing.js",
     "start": {
-      "line": 35,
+      "line": 47,
       "column": 19
     },
     "end": {
-      "line": 38,
+      "line": 50,
       "column": 3
     }
   },
   {
     "id": "pricing.trial.cta.accept",
-    "defaultMessage": "!!!Yes, upgrade my account to Franz Professional",
+    "defaultMessage": "!!!Start my 14-day Franz Professional Trial",
     "file": "src/components/auth/Pricing.js",
     "start": {
-      "line": 39,
+      "line": 51,
       "column": 13
     },
     "end": {
-      "line": 42,
+      "line": 54,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.trial.cta.start",
+    "defaultMessage": "!!!Start using Franz",
+    "file": "src/components/auth/Pricing.js",
+    "start": {
+      "line": 55,
+      "column": 12
+    },
+    "end": {
+      "line": 58,
       "column": 3
     }
   },
@@ -95,11 +147,11 @@
     "defaultMessage": "!!!Continue to Ferdi",
     "file": "src/components/auth/Pricing.js",
     "start": {
-      "line": 43,
+      "line": 59,
       "column": 11
     },
     "end": {
-      "line": 46,
+      "line": 62,
       "column": 3
     }
   },
@@ -108,11 +160,11 @@
     "defaultMessage": "!!!Franz Professional includes:",
     "file": "src/components/auth/Pricing.js",
     "start": {
-      "line": 47,
+      "line": 63,
       "column": 20
     },
     "end": {
-      "line": 50,
+      "line": 66,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/components/layout/AppLayout.json b/src/i18n/messages/src/components/layout/AppLayout.json
index 0625487b4..bca181d0f 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": 28,
+      "line": 30,
       "column": 19
     },
     "end": {
-      "line": 31,
+      "line": 33,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!Reload services",
     "file": "src/components/layout/AppLayout.js",
     "start": {
-      "line": 32,
+      "line": 34,
       "column": 24
     },
     "end": {
-      "line": 35,
+      "line": 37,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!Could not load services and user information",
     "file": "src/components/layout/AppLayout.js",
     "start": {
-      "line": 36,
+      "line": 38,
       "column": 26
     },
     "end": {
-      "line": 39,
+      "line": 41,
       "column": 3
     }
   },
@@ -43,11 +43,11 @@
     "defaultMessage": "!!!There were errors while trying to perform an authenticated request. Please try logging out and back in if this error persists.",
     "file": "src/components/layout/AppLayout.js",
     "start": {
-      "line": 40,
+      "line": 42,
       "column": 21
     },
     "end": {
-      "line": 43,
+      "line": 45,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/components/ui/FeatureList.json b/src/i18n/messages/src/components/ui/FeatureList.json
index 497e299a4..3201115b3 100644
--- a/src/i18n/messages/src/components/ui/FeatureList.json
+++ b/src/i18n/messages/src/components/ui/FeatureList.json
@@ -1,14 +1,79 @@
 [
   {
+    "id": "pricing.features.recipes",
+    "defaultMessage": "!!!Choose from more than 70 Services",
+    "file": "src/components/ui/FeatureList.js",
+    "start": {
+      "line": 9,
+      "column": 20
+    },
+    "end": {
+      "line": 12,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.features.accountSync",
+    "defaultMessage": "!!!Account Synchronisation",
+    "file": "src/components/ui/FeatureList.js",
+    "start": {
+      "line": 13,
+      "column": 15
+    },
+    "end": {
+      "line": 16,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.features.desktopNotifications",
+    "defaultMessage": "!!!Desktop Notifications",
+    "file": "src/components/ui/FeatureList.js",
+    "start": {
+      "line": 17,
+      "column": 24
+    },
+    "end": {
+      "line": 20,
+      "column": 3
+    }
+  },
+  {
     "id": "pricing.features.unlimitedServices",
     "defaultMessage": "!!!Add unlimited services",
     "file": "src/components/ui/FeatureList.js",
     "start": {
-      "line": 8,
+      "line": 21,
       "column": 21
     },
     "end": {
-      "line": 11,
+      "line": 24,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.features.upToThreeServices",
+    "defaultMessage": "!!!Add up to 3 services",
+    "file": "src/components/ui/FeatureList.js",
+    "start": {
+      "line": 25,
+      "column": 21
+    },
+    "end": {
+      "line": 28,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.features.upToSixServices",
+    "defaultMessage": "!!!Add up to 6 services",
+    "file": "src/components/ui/FeatureList.js",
+    "start": {
+      "line": 29,
+      "column": 19
+    },
+    "end": {
+      "line": 32,
       "column": 3
     }
   },
@@ -17,11 +82,11 @@
     "defaultMessage": "!!!Spellchecker support",
     "file": "src/components/ui/FeatureList.js",
     "start": {
-      "line": 12,
+      "line": 33,
       "column": 16
     },
     "end": {
-      "line": 15,
+      "line": 36,
       "column": 3
     }
   },
@@ -30,11 +95,11 @@
     "defaultMessage": "!!!Workspaces",
     "file": "src/components/ui/FeatureList.js",
     "start": {
-      "line": 16,
+      "line": 37,
       "column": 14
     },
     "end": {
-      "line": 19,
+      "line": 40,
       "column": 3
     }
   },
@@ -43,11 +108,11 @@
     "defaultMessage": "!!!Add Custom Websites",
     "file": "src/components/ui/FeatureList.js",
     "start": {
-      "line": 20,
+      "line": 41,
       "column": 18
     },
     "end": {
-      "line": 23,
+      "line": 44,
       "column": 3
     }
   },
@@ -56,11 +121,11 @@
     "defaultMessage": "!!!On-premise & other Hosted Services",
     "file": "src/components/ui/FeatureList.js",
     "start": {
-      "line": 24,
+      "line": 45,
       "column": 13
     },
     "end": {
-      "line": 27,
+      "line": 48,
       "column": 3
     }
   },
@@ -69,11 +134,11 @@
     "defaultMessage": "!!!Install 3rd party services",
     "file": "src/components/ui/FeatureList.js",
     "start": {
-      "line": 28,
+      "line": 49,
       "column": 22
     },
     "end": {
-      "line": 31,
+      "line": 52,
       "column": 3
     }
   },
@@ -82,11 +147,11 @@
     "defaultMessage": "!!!Service Proxies",
     "file": "src/components/ui/FeatureList.js",
     "start": {
-      "line": 32,
+      "line": 53,
       "column": 18
     },
     "end": {
-      "line": 35,
+      "line": 56,
       "column": 3
     }
   },
@@ -95,11 +160,11 @@
     "defaultMessage": "!!!Team Management",
     "file": "src/components/ui/FeatureList.js",
     "start": {
-      "line": 36,
+      "line": 57,
       "column": 18
     },
     "end": {
-      "line": 39,
+      "line": 60,
       "column": 3
     }
   },
@@ -108,11 +173,11 @@
     "defaultMessage": "!!!No Waiting Screens",
     "file": "src/components/ui/FeatureList.js",
     "start": {
-      "line": 40,
+      "line": 61,
       "column": 13
     },
     "end": {
-      "line": 43,
+      "line": 64,
       "column": 3
     }
   },
@@ -121,11 +186,11 @@
     "defaultMessage": "!!!Forever ad-free",
     "file": "src/components/ui/FeatureList.js",
     "start": {
-      "line": 44,
+      "line": 65,
       "column": 10
     },
     "end": {
-      "line": 47,
+      "line": 68,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/features/delayApp/Component.json b/src/i18n/messages/src/features/delayApp/Component.json
index 77fabf236..f1d6886f5 100644
--- a/src/i18n/messages/src/features/delayApp/Component.json
+++ b/src/i18n/messages/src/features/delayApp/Component.json
@@ -27,7 +27,7 @@
   },
   {
     "id": "feature.delayApp.upgrade.action",
-    "defaultMessage": "!!!Get a Franz Supporter License",
+    "defaultMessage": "!!!Upgrade Franz",
     "file": "src/features/delayApp/Component.js",
     "start": {
       "line": 22,
diff --git a/src/i18n/messages/src/features/planSelection/components/PlanItem.json b/src/i18n/messages/src/features/planSelection/components/PlanItem.json
new file mode 100644
index 000000000..5a94f32ee
--- /dev/null
+++ b/src/i18n/messages/src/features/planSelection/components/PlanItem.json
@@ -0,0 +1,41 @@
+[
+  {
+    "id": "subscription.interval.perMonth",
+    "defaultMessage": "!!!per month",
+    "file": "src/features/planSelection/components/PlanItem.js",
+    "start": {
+      "line": 15,
+      "column": 12
+    },
+    "end": {
+      "line": 18,
+      "column": 3
+    }
+  },
+  {
+    "id": "subscription.interval.perMonthPerUser",
+    "defaultMessage": "!!!per month & user",
+    "file": "src/features/planSelection/components/PlanItem.js",
+    "start": {
+      "line": 19,
+      "column": 19
+    },
+    "end": {
+      "line": 22,
+      "column": 3
+    }
+  },
+  {
+    "id": "subscription.bestValue",
+    "defaultMessage": "!!!Best value",
+    "file": "src/features/planSelection/components/PlanItem.js",
+    "start": {
+      "line": 23,
+      "column": 13
+    },
+    "end": {
+      "line": 26,
+      "column": 3
+    }
+  }
+]
\ No newline at end of file
diff --git a/src/i18n/messages/src/features/planSelection/components/PlanSelection.json b/src/i18n/messages/src/features/planSelection/components/PlanSelection.json
new file mode 100644
index 000000000..ed354146e
--- /dev/null
+++ b/src/i18n/messages/src/features/planSelection/components/PlanSelection.json
@@ -0,0 +1,158 @@
+[
+  {
+    "id": "feature.planSelection.fullscreen.welcome",
+    "defaultMessage": "!!!Are you ready to choose, {name}",
+    "file": "src/features/planSelection/components/PlanSelection.js",
+    "start": {
+      "line": 17,
+      "column": 11
+    },
+    "end": {
+      "line": 20,
+      "column": 3
+    }
+  },
+  {
+    "id": "feature.planSelection.fullscreen.subheadline",
+    "defaultMessage": "!!!It's time to make a choice. Franz works best on our Personal and Professional plans. Please have a look and choose the best one for you.",
+    "file": "src/features/planSelection/components/PlanSelection.js",
+    "start": {
+      "line": 21,
+      "column": 15
+    },
+    "end": {
+      "line": 24,
+      "column": 3
+    }
+  },
+  {
+    "id": "feature.planSelection.free.text",
+    "defaultMessage": "!!!Basic functionality",
+    "file": "src/features/planSelection/components/PlanSelection.js",
+    "start": {
+      "line": 25,
+      "column": 12
+    },
+    "end": {
+      "line": 28,
+      "column": 3
+    }
+  },
+  {
+    "id": "feature.planSelection.personal.text",
+    "defaultMessage": "!!!More services, no waiting - ideal for personal use.",
+    "file": "src/features/planSelection/components/PlanSelection.js",
+    "start": {
+      "line": 29,
+      "column": 16
+    },
+    "end": {
+      "line": 32,
+      "column": 3
+    }
+  },
+  {
+    "id": "feature.planSelection.pro.text",
+    "defaultMessage": "!!!Unlimited services and professional features for you - and your team.",
+    "file": "src/features/planSelection/components/PlanSelection.js",
+    "start": {
+      "line": 33,
+      "column": 20
+    },
+    "end": {
+      "line": 36,
+      "column": 3
+    }
+  },
+  {
+    "id": "feature.planSelection.cta.stayOnFree",
+    "defaultMessage": "!!!Stay on Free",
+    "file": "src/features/planSelection/components/PlanSelection.js",
+    "start": {
+      "line": 37,
+      "column": 17
+    },
+    "end": {
+      "line": 40,
+      "column": 3
+    }
+  },
+  {
+    "id": "feature.planSelection.cta.ctaDowngradeFree",
+    "defaultMessage": "!!!Downgrade to Free",
+    "file": "src/features/planSelection/components/PlanSelection.js",
+    "start": {
+      "line": 41,
+      "column": 20
+    },
+    "end": {
+      "line": 44,
+      "column": 3
+    }
+  },
+  {
+    "id": "feature.planSelection.cta.trial",
+    "defaultMessage": "!!!Start my free 14-days Trial",
+    "file": "src/features/planSelection/components/PlanSelection.js",
+    "start": {
+      "line": 45,
+      "column": 15
+    },
+    "end": {
+      "line": 48,
+      "column": 3
+    }
+  },
+  {
+    "id": "feature.planSelection.cta.upgradePersonal",
+    "defaultMessage": "!!!Choose Personal",
+    "file": "src/features/planSelection/components/PlanSelection.js",
+    "start": {
+      "line": 49,
+      "column": 23
+    },
+    "end": {
+      "line": 52,
+      "column": 3
+    }
+  },
+  {
+    "id": "feature.planSelection.cta.upgradePro",
+    "defaultMessage": "!!!Choose Professional",
+    "file": "src/features/planSelection/components/PlanSelection.js",
+    "start": {
+      "line": 53,
+      "column": 18
+    },
+    "end": {
+      "line": 56,
+      "column": 3
+    }
+  },
+  {
+    "id": "feature.planSelection.fullFeatureList",
+    "defaultMessage": "!!!Complete comparison of all plans",
+    "file": "src/features/planSelection/components/PlanSelection.js",
+    "start": {
+      "line": 57,
+      "column": 19
+    },
+    "end": {
+      "line": 60,
+      "column": 3
+    }
+  },
+  {
+    "id": "feature.planSelection.pricesBasedOnAnnualPayment",
+    "defaultMessage": "!!!All prices based on yearly payment",
+    "file": "src/features/planSelection/components/PlanSelection.js",
+    "start": {
+      "line": 61,
+      "column": 30
+    },
+    "end": {
+      "line": 64,
+      "column": 3
+    }
+  }
+]
\ No newline at end of file
diff --git a/src/i18n/messages/src/features/planSelection/components/PlanTeaser.json b/src/i18n/messages/src/features/planSelection/components/PlanTeaser.json
new file mode 100644
index 000000000..015304a2e
--- /dev/null
+++ b/src/i18n/messages/src/features/planSelection/components/PlanTeaser.json
@@ -0,0 +1,28 @@
+[
+  {
+    "id": "subscription.interval.per",
+    "defaultMessage": "!!!per {interval}",
+    "file": "src/features/planSelection/components/PlanTeaser.js",
+    "start": {
+      "line": 16,
+      "column": 7
+    },
+    "end": {
+      "line": 19,
+      "column": 3
+    }
+  },
+  {
+    "id": "subscription.planItem.upgradeAccount",
+    "defaultMessage": "!!!Upgrade Account",
+    "file": "src/features/planSelection/components/PlanTeaser.js",
+    "start": {
+      "line": 20,
+      "column": 7
+    },
+    "end": {
+      "line": 23,
+      "column": 3
+    }
+  }
+]
\ No newline at end of file
diff --git a/src/i18n/messages/src/features/planSelection/containers/PlanSelectionScreen.json b/src/i18n/messages/src/features/planSelection/containers/PlanSelectionScreen.json
new file mode 100644
index 000000000..04b2144b4
--- /dev/null
+++ b/src/i18n/messages/src/features/planSelection/containers/PlanSelectionScreen.json
@@ -0,0 +1,54 @@
+[
+  {
+    "id": "feature.planSelection.fullscreen.dialog.title",
+    "defaultMessage": "!!!Downgrade your Franz Plan",
+    "file": "src/features/planSelection/containers/PlanSelectionScreen.js",
+    "start": {
+      "line": 16,
+      "column": 15
+    },
+    "end": {
+      "line": 19,
+      "column": 3
+    }
+  },
+  {
+    "id": "feature.planSelection.fullscreen.dialog.message",
+    "defaultMessage": "!!!You're about to downgrade to our Free account. Are you sure? Click here instead to get more services and functionality for just {currency}{price} a month.",
+    "file": "src/features/planSelection/containers/PlanSelectionScreen.js",
+    "start": {
+      "line": 20,
+      "column": 17
+    },
+    "end": {
+      "line": 23,
+      "column": 3
+    }
+  },
+  {
+    "id": "feature.planSelection.fullscreen.dialog.cta.downgrade",
+    "defaultMessage": "!!!Downgrade to Free",
+    "file": "src/features/planSelection/containers/PlanSelectionScreen.js",
+    "start": {
+      "line": 24,
+      "column": 22
+    },
+    "end": {
+      "line": 27,
+      "column": 3
+    }
+  },
+  {
+    "id": "feature.planSelection.fullscreen.dialog.cta.upgrade",
+    "defaultMessage": "!!!Choose Personal",
+    "file": "src/features/planSelection/containers/PlanSelectionScreen.js",
+    "start": {
+      "line": 28,
+      "column": 20
+    },
+    "end": {
+      "line": 31,
+      "column": 3
+    }
+  }
+]
\ No newline at end of file
diff --git a/src/i18n/messages/src/features/trialStatusBar/components/TrialStatusBar.json b/src/i18n/messages/src/features/trialStatusBar/components/TrialStatusBar.json
new file mode 100644
index 000000000..bf211a016
--- /dev/null
+++ b/src/i18n/messages/src/features/trialStatusBar/components/TrialStatusBar.json
@@ -0,0 +1,41 @@
+[
+  {
+    "id": "feature.trialStatusBar.restTime",
+    "defaultMessage": "!!!Your Free Franz {plan} Trial ends in {time}.",
+    "file": "src/features/trialStatusBar/components/TrialStatusBar.js",
+    "start": {
+      "line": 13,
+      "column": 12
+    },
+    "end": {
+      "line": 16,
+      "column": 3
+    }
+  },
+  {
+    "id": "feature.trialStatusBar.expired",
+    "defaultMessage": "!!!Your free Franz {plan} Trial has expired, please upgrade your account.",
+    "file": "src/features/trialStatusBar/components/TrialStatusBar.js",
+    "start": {
+      "line": 17,
+      "column": 11
+    },
+    "end": {
+      "line": 20,
+      "column": 3
+    }
+  },
+  {
+    "id": "feature.trialStatusBar.cta",
+    "defaultMessage": "!!!Upgrade now",
+    "file": "src/features/trialStatusBar/components/TrialStatusBar.js",
+    "start": {
+      "line": 21,
+      "column": 7
+    },
+    "end": {
+      "line": 24,
+      "column": 3
+    }
+  }
+]
\ No newline at end of file
diff --git a/src/i18n/messages/src/features/trialStatusBar/containers/TrialStatusBarScreen.json b/src/i18n/messages/src/features/trialStatusBar/containers/TrialStatusBarScreen.json
new file mode 100644
index 000000000..306cd0fee
--- /dev/null
+++ b/src/i18n/messages/src/features/trialStatusBar/containers/TrialStatusBarScreen.json
@@ -0,0 +1,54 @@
+[
+  {
+    "id": "feature.trialStatusBar.fullscreen.dialog.title",
+    "defaultMessage": "!!!Downgrade your Franz Plan",
+    "file": "src/features/trialStatusBar/containers/TrialStatusBarScreen.js",
+    "start": {
+      "line": 16,
+      "column": 15
+    },
+    "end": {
+      "line": 19,
+      "column": 3
+    }
+  },
+  {
+    "id": "feature.trialStatusBar.fullscreen.dialog.message",
+    "defaultMessage": "!!!You're about to downgrade to our Free account. Are you sure? Click here instead to get more services and functionality for just {currency}{price} a month.",
+    "file": "src/features/trialStatusBar/containers/TrialStatusBarScreen.js",
+    "start": {
+      "line": 20,
+      "column": 17
+    },
+    "end": {
+      "line": 23,
+      "column": 3
+    }
+  },
+  {
+    "id": "feature.trialStatusBar.fullscreen.dialog.cta.downgrade",
+    "defaultMessage": "!!!Downgrade to Free",
+    "file": "src/features/trialStatusBar/containers/TrialStatusBarScreen.js",
+    "start": {
+      "line": 24,
+      "column": 22
+    },
+    "end": {
+      "line": 27,
+      "column": 3
+    }
+  },
+  {
+    "id": "feature.trialStatusBar.fullscreen.dialog.cta.upgrade",
+    "defaultMessage": "!!!Choose Personal",
+    "file": "src/features/trialStatusBar/containers/TrialStatusBarScreen.js",
+    "start": {
+      "line": 28,
+      "column": 20
+    },
+    "end": {
+      "line": 31,
+      "column": 3
+    }
+  }
+]
\ No newline at end of file
diff --git a/src/i18n/messages/src/features/workspaces/components/WorkspacesDashboard.json b/src/i18n/messages/src/features/workspaces/components/WorkspacesDashboard.json
index 4111ba760..87b8942ce 100644
--- a/src/i18n/messages/src/features/workspaces/components/WorkspacesDashboard.json
+++ b/src/i18n/messages/src/features/workspaces/components/WorkspacesDashboard.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Your workspaces",
     "file": "src/features/workspaces/components/WorkspacesDashboard.js",
     "start": {
-      "line": 19,
+      "line": 20,
       "column": 12
     },
     "end": {
-      "line": 22,
+      "line": 23,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!You haven't added any workspaces yet.",
     "file": "src/features/workspaces/components/WorkspacesDashboard.js",
     "start": {
-      "line": 23,
+      "line": 24,
       "column": 19
     },
     "end": {
-      "line": 26,
+      "line": 27,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!Could not load your workspaces",
     "file": "src/features/workspaces/components/WorkspacesDashboard.js",
     "start": {
-      "line": 27,
+      "line": 28,
       "column": 27
     },
     "end": {
-      "line": 30,
+      "line": 31,
       "column": 3
     }
   },
@@ -43,11 +43,11 @@
     "defaultMessage": "!!!Try again",
     "file": "src/features/workspaces/components/WorkspacesDashboard.js",
     "start": {
-      "line": 31,
+      "line": 32,
       "column": 23
     },
     "end": {
-      "line": 34,
+      "line": 35,
       "column": 3
     }
   },
@@ -56,11 +56,11 @@
     "defaultMessage": "!!!Your changes have been saved",
     "file": "src/features/workspaces/components/WorkspacesDashboard.js",
     "start": {
-      "line": 35,
+      "line": 36,
       "column": 15
     },
     "end": {
-      "line": 38,
+      "line": 39,
       "column": 3
     }
   },
@@ -69,11 +69,11 @@
     "defaultMessage": "!!!Workspace has been deleted",
     "file": "src/features/workspaces/components/WorkspacesDashboard.js",
     "start": {
-      "line": 39,
+      "line": 40,
       "column": 15
     },
     "end": {
-      "line": 42,
+      "line": 43,
       "column": 3
     }
   },
@@ -82,11 +82,11 @@
     "defaultMessage": "!!!Info about workspace feature",
     "file": "src/features/workspaces/components/WorkspacesDashboard.js",
     "start": {
-      "line": 43,
+      "line": 44,
       "column": 24
     },
     "end": {
-      "line": 46,
+      "line": 47,
       "column": 3
     }
   },
@@ -95,11 +95,11 @@
     "defaultMessage": "!!!Less is More: Introducing Ferdi Workspaces",
     "file": "src/features/workspaces/components/WorkspacesDashboard.js",
     "start": {
-      "line": 47,
+      "line": 48,
       "column": 28
     },
     "end": {
-      "line": 50,
+      "line": 51,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/helpers/plan-helpers.json b/src/i18n/messages/src/helpers/plan-helpers.json
index df8ee19e3..3f3e7e85d 100644
--- a/src/i18n/messages/src/helpers/plan-helpers.json
+++ b/src/i18n/messages/src/helpers/plan-helpers.json
@@ -1,7 +1,7 @@
 [
   {
     "id": "pricing.plan.pro",
-    "defaultMessage": "!!!Franz Professional",
+    "defaultMessage": "!!!Professional",
     "file": "src/helpers/plan-helpers.js",
     "start": {
       "line": 5,
@@ -14,7 +14,7 @@
   },
   {
     "id": "pricing.plan.personal",
-    "defaultMessage": "!!!Franz Personal",
+    "defaultMessage": "!!!Personal",
     "file": "src/helpers/plan-helpers.js",
     "start": {
       "line": 9,
@@ -27,7 +27,7 @@
   },
   {
     "id": "pricing.plan.free",
-    "defaultMessage": "!!!Franz Free",
+    "defaultMessage": "!!!Free",
     "file": "src/helpers/plan-helpers.js",
     "start": {
       "line": 13,
@@ -40,7 +40,7 @@
   },
   {
     "id": "pricing.plan.legacy",
-    "defaultMessage": "!!!Franz Premium",
+    "defaultMessage": "!!!Premium",
     "file": "src/helpers/plan-helpers.js",
     "start": {
       "line": 17,
diff --git a/src/index.js b/src/index.js
index a4880a25a..87aa6357b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -68,8 +68,15 @@ if (isWindows) {
   app.setAppUserModelId(appId);
 }
 
+// Initialize Settings
+const settings = new Settings('app', DEFAULT_APP_SETTINGS);
+const proxySettings = new Settings('proxy');
+
+// add `liftSingleInstanceLock` to settings.json to override the single instance lock
+const liftSingleInstanceLock = settings.get('liftSingleInstanceLock') || false;
+
 // Force single window
-const gotTheLock = app.requestSingleInstanceLock();
+const gotTheLock = liftSingleInstanceLock ? true : app.requestSingleInstanceLock();
 if (!gotTheLock) {
   app.quit();
 } else {
@@ -116,10 +123,6 @@ if (isLinux && ['Pantheon', 'Unity:Unity7'].indexOf(process.env.XDG_CURRENT_DESK
   process.env.XDG_CURRENT_DESKTOP = 'Unity';
 }
 
-// Initialize Settings
-const settings = new Settings('app', DEFAULT_APP_SETTINGS);
-const proxySettings = new Settings('proxy');
-
 // Disable GPU acceleration
 if (!settings.get('enableGPUAcceleration')) {
   debug('Disable GPU Acceleration');
diff --git a/src/lib/Menu.js b/src/lib/Menu.js
index f223283f9..d7398a126 100644
--- a/src/lib/Menu.js
+++ b/src/lib/Menu.js
@@ -730,7 +730,9 @@ export default class FranzMenu {
     // need to clone object so we don't modify computed (cached) object
     const serviceTpl = Object.assign([], this.serviceTpl());
 
-    if (window.ferdi === undefined) {
+    // Don't initialize when window.franz is undefined or when we are on a payment window route
+    if (window.ferdi === undefined || this.stores.router.location.pathname.startsWith('/payment/')) {
+      console.log('skipping menu init');
       return;
     }
 
diff --git a/src/lib/TouchBar.js b/src/lib/TouchBar.js
index 1de46d2a3..32f546644 100644
--- a/src/lib/TouchBar.js
+++ b/src/lib/TouchBar.js
@@ -24,6 +24,10 @@ export default class FranzTouchBar {
   _build() {
     const currentWindow = remote.getCurrentWindow();
 
+    if (this.stores.router.location.pathname.startsWith('/payment/')) {
+      return;
+    }
+
     if (this.stores.user.isLoggedIn) {
       const { TouchBar } = remote;
       const { TouchBarButton, TouchBarSpacer } = TouchBar;
diff --git a/src/stores/AppStore.js b/src/stores/AppStore.js
index 40d98cf42..c6724c20f 100644
--- a/src/stores/AppStore.js
+++ b/src/stores/AppStore.js
@@ -26,7 +26,9 @@ import { sleep } from '../helpers/async-helpers';
 
 const debug = require('debug')('Ferdi:AppStore');
 
-const { app, systemPreferences, screen } = remote;
+const {
+  app, systemPreferences, screen, powerMonitor,
+} = remote;
 
 const mainWindow = remote.getCurrentWindow();
 
@@ -35,6 +37,8 @@ const autoLauncher = new AutoLaunch({
   name: 'Ferdi',
 });
 
+const CATALINA_NOTIFICATION_HACK_KEY = '_temp_askedForCatalinaNotificationPermissions';
+
 export default class AppStore extends Store {
   updateStatusTypes = {
     CHECKING: 'CHECKING',
@@ -56,6 +60,8 @@ export default class AppStore extends Store {
 
   @observable authRequestFailed = false;
 
+  @observable timeSuspensionStart;
+
   @observable timeOfflineStart;
 
   @observable updateStatus = null;
@@ -76,6 +82,8 @@ export default class AppStore extends Store {
 
   dictionaries = [];
 
+  fetchDataInterval = null;
+
   constructor(...args) {
     super(...args);
 
@@ -97,6 +105,7 @@ export default class AppStore extends Store {
       this._setLocale.bind(this),
       this._muteAppHandler.bind(this),
       this._handleFullScreen.bind(this),
+      this._handleLogout.bind(this),
     ]);
   }
 
@@ -124,6 +133,12 @@ export default class AppStore extends Store {
     this._systemDND();
     setInterval(() => this._systemDND(), ms('5s'));
 
+    this.fetchDataInterval = setInterval(() => {
+      this.stores.user.getUserInfoRequest.invalidate({ immediately: true });
+      this.stores.features.featuresRequest.invalidate({ immediately: true });
+      this.stores.news.latestNewsRequest.invalidate({ immediately: true });
+    }, ms('10m'));
+
     // Check for updates once every 4 hours
     setInterval(() => this._checkForUpdates(), CHECK_INTERVAL);
     // Check for an update in 30s (need a delay to prevent Squirrel Installer lock file issues)
@@ -175,6 +190,36 @@ export default class AppStore extends Store {
 
       debug('Window is visible/focused', isVisible);
     });
+
+    powerMonitor.on('suspend', () => {
+      debug('System suspended starting timer');
+
+      this.timeSuspensionStart = moment();
+    });
+
+    powerMonitor.on('resume', () => {
+      debug('System resumed, last suspended on', this.timeSuspensionStart.toString());
+
+      if (this.timeSuspensionStart.add(10, 'm').isBefore(moment())) {
+        debug('Reloading services, user info and features');
+
+        setTimeout(() => {
+          window.location.reload();
+        }, ms('2s'));
+      }
+    });
+
+    // macOS catalina notifications hack
+    // notifications got stuck after upgrade but forcing a notification
+    // via `new Notification` triggered the permission request
+    if (isMac && !localStorage.getItem(CATALINA_NOTIFICATION_HACK_KEY)) {
+      // eslint-disable-next-line no-new
+      new window.Notification('Welcome to Franz 5', {
+        body: 'Have a wonderful day & happy messaging.',
+      });
+
+      localStorage.setItem(CATALINA_NOTIFICATION_HACK_KEY, true);
+    }
   }
 
   @computed get cacheSize() {
@@ -383,6 +428,12 @@ export default class AppStore extends Store {
     }
   }
 
+  _handleLogout() {
+    if (!this.stores.user.isLoggedIn) {
+      clearInterval(this.fetchDataInterval);
+    }
+  }
+
   // Helpers
   _appStartsCounter() {
     this.actions.settings.update({
diff --git a/src/stores/FeaturesStore.js b/src/stores/FeaturesStore.js
index 3d9542245..ab5d762c7 100644
--- a/src/stores/FeaturesStore.js
+++ b/src/stores/FeaturesStore.js
@@ -21,6 +21,8 @@ import serviceLimit from '../features/serviceLimit';
 import communityRecipes from '../features/communityRecipes';
 import todos from '../features/todos';
 import accentColor from '../features/accentColor';
+import planSelection from '../features/planSelection';
+import trialStatusBar from '../features/trialStatusBar';
 
 import { DEFAULT_FEATURES_CONFIG } from '../config';
 
@@ -67,6 +69,7 @@ export default class FeaturesStore extends Store {
     if (this.stores.user.isLoggedIn) {
       this.featuresRequest.invalidate({ immediately: true });
     } else {
+      this.defaultFeaturesRequest.execute();
       this.defaultFeaturesRequest.invalidate({ immediately: true });
     }
   }
@@ -85,5 +88,7 @@ export default class FeaturesStore extends Store {
     communityRecipes(this.stores, this.actions);
     todos(this.stores, this.actions);
     accentColor(this.stores, this.actions);
+    planSelection(this.stores, this.actions);
+    trialStatusBar(this.stores, this.actions);
   }
 }
diff --git a/src/stores/PaymentStore.js b/src/stores/PaymentStore.js
index 8579812ad..69e6eb9c3 100644
--- a/src/stores/PaymentStore.js
+++ b/src/stores/PaymentStore.js
@@ -1,9 +1,12 @@
 import { action, observable, computed } from 'mobx';
+import { remote } from 'electron';
 
 import Store from './lib/Store';
 import CachedRequest from './lib/CachedRequest';
 import Request from './lib/Request';
 
+const { BrowserWindow } = remote;
+
 export default class PaymentStore extends Store {
   @observable plansRequest = new CachedRequest(this.api.payment, 'plans');
 
@@ -13,6 +16,7 @@ export default class PaymentStore extends Store {
     super(...args);
 
     this.actions.payment.createHostedPage.listen(this._createHostedPage.bind(this));
+    this.actions.payment.upgradeAccount.listen(this._upgradeAccount.bind(this));
   }
 
   @computed get plan() {
@@ -27,4 +31,38 @@ export default class PaymentStore extends Store {
 
     return request;
   }
+
+  @action _upgradeAccount({ planId, onCloseWindow = () => null }) {
+    let hostedPageURL = this.stores.features.features.subscribeURL;
+
+    const parsedUrl = new URL(hostedPageURL);
+    const params = new URLSearchParams(parsedUrl.search.slice(1));
+
+    params.set('plan', planId);
+
+    hostedPageURL = this.stores.user.getAuthURL(`${parsedUrl.origin}${parsedUrl.pathname}?${params.toString()}`);
+
+    const win = new BrowserWindow({
+      parent: remote.getCurrentWindow(),
+      modal: true,
+      title: '🔒 Upgrade Your Franz Account',
+      width: 800,
+      height: window.innerHeight - 100,
+      maxWidth: 800,
+      minWidth: 600,
+      autoHideMenuBar: true,
+      webPreferences: {
+        nodeIntegration: true,
+        webviewTag: true,
+      },
+    });
+    win.loadURL(`file://${__dirname}/../index.html#/payment/${encodeURIComponent(hostedPageURL)}`);
+
+    win.on('closed', () => {
+      this.stores.user.getUserInfoRequest.invalidate({ immediately: true });
+      this.stores.features.featuresRequest.invalidate({ immediately: true });
+
+      onCloseWindow();
+    });
+  }
 }
diff --git a/src/stores/ServicesStore.js b/src/stores/ServicesStore.js
index 185a6f0ae..934a8a6e0 100644
--- a/src/stores/ServicesStore.js
+++ b/src/stores/ServicesStore.js
@@ -1,4 +1,4 @@
-import { shell } from 'electron';
+import { shell, remote } from 'electron';
 import {
   action,
   reaction,
@@ -23,6 +23,8 @@ import { KEEP_WS_LOADED_USID } from '../config';
 
 const debug = require('debug')('Ferdi:ServiceStore');
 
+const { app } = remote;
+
 export default class ServicesStore extends Store {
   @observable allServicesRequest = new CachedRequest(this.api.services, 'all');
 
@@ -818,7 +820,9 @@ export default class ServicesStore extends Store {
 
     if (service.webview) {
       debug('Initialize recipe', service.recipe.id, service.name);
-      service.webview.send('initialize-recipe', service.shareWithWebview, service.recipe);
+      service.webview.send('initialize-recipe', Object.assign({
+        franzVersion: app.getVersion(),
+      }, service.shareWithWebview), service.recipe);
     }
   }
 
diff --git a/src/stores/UserStore.js b/src/stores/UserStore.js
index 03aa79606..d6a2e5fde 100644
--- a/src/stores/UserStore.js
+++ b/src/stores/UserStore.js
@@ -78,6 +78,8 @@ export default class UserStore extends Store {
 
   @observable logoutReason = null;
 
+  fetchUserInfoInterval = null;
+
   constructor(...args) {
     super(...args);
 
@@ -162,7 +164,7 @@ export default class UserStore extends Store {
   }
 
   @computed get isPremiumOverride() {
-    return ((!this.team || !this.team.plan) && this.isPremium) || (this.team.state === 'expired' && this.isPremium);
+    return ((!this.team || !this.team.plan) && this.isPremium) || (this.team && this.team.state === 'expired' && this.isPremium);
   }
 
   @computed get isPersonal() {
@@ -201,7 +203,7 @@ export default class UserStore extends Store {
   }
 
   @action async _signup({
-    firstname, lastname, email, password, accountType, company,
+    firstname, lastname, email, password, accountType, company, plan, currency,
   }) {
     const authToken = await this.signupRequest.execute({
       firstname,
@@ -211,6 +213,8 @@ export default class UserStore extends Store {
       accountType,
       company,
       locale: this.stores.app.locale,
+      plan,
+      currency,
     });
 
     this.hasCompletedSignup = true;
diff --git a/src/stores/index.js b/src/stores/index.js
index 10dd56665..4eeef7982 100644
--- a/src/stores/index.js
+++ b/src/stores/index.js
@@ -15,6 +15,7 @@ import { announcementsStore } from '../features/announcements';
 import { serviceLimitStore } from '../features/serviceLimit';
 import { communityRecipesStore } from '../features/communityRecipes';
 import { todosStore } from '../features/todos';
+import { planSelectionStore } from '../features/planSelection';
 
 export default (api, actions, router) => {
   const stores = {};
@@ -37,6 +38,7 @@ export default (api, actions, router) => {
     serviceLimit: serviceLimitStore,
     communityRecipes: communityRecipesStore,
     todos: todosStore,
+    planSelection: planSelectionStore,
   });
   // Initialize all stores
   Object.keys(stores).forEach((name) => {
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index 753288b8d..324175d0b 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -373,7 +373,7 @@
     .account__subscription-button { margin-left: auto; }
     .franz-form__button { white-space: nowrap; }
     div { height: auto; }
-    [data-type="franz-button"] div { height: 100% }
+    [data-type="franz-button"] div { height: 20px }
 
     .invoices {
       width: 100%;
diff --git a/src/styles/subscription-popup.scss b/src/styles/subscription-popup.scss
index fb4795d6c..14e05e65d 100644
--- a/src/styles/subscription-popup.scss
+++ b/src/styles/subscription-popup.scss
@@ -2,7 +2,10 @@
   height: 100%;
 
   &__content { height: calc(100% - 60px); }
-  &__webview { height: 100%; }
+  &__webview {
+    height: 100%;
+    background: #FFF;
+  }
 
   &__toolbar {
     background: $theme-gray-lightest;
diff --git a/src/webview/lib/RecipeWebview.js b/src/webview/lib/RecipeWebview.js
index 877e45e35..74d05fc2d 100644
--- a/src/webview/lib/RecipeWebview.js
+++ b/src/webview/lib/RecipeWebview.js
@@ -1,7 +1,8 @@
-// @flow
 const { ipcRenderer } = require('electron');
 const fs = require('fs-extra');
 
+const debug = require('debug')('Franz:Plugin:RecipeWebview');
+
 class RecipeWebview {
   constructor() {
     this.countCache = {
@@ -11,6 +12,8 @@ class RecipeWebview {
 
     ipcRenderer.on('poll', () => {
       this.loopFunc();
+
+      debug('Poll event');
     });
   }
 
@@ -50,8 +53,11 @@ class RecipeWebview {
       indirect: indirectInt > 0 ? indirectInt : 0,
     };
 
+
     ipcRenderer.sendToHost('messages', count);
     Object.assign(this.countCache, count);
+
+    debug('Sending badge count to host', count);
   }
 
   /**
@@ -67,6 +73,8 @@ class RecipeWebview {
       styles.innerHTML = data.toString();
 
       document.querySelector('head').appendChild(styles);
+
+      debug('Append styles', styles);
     });
   }
 
diff --git a/src/webview/recipe.js b/src/webview/recipe.js
index ddfd0e139..2bf8f757a 100644
--- a/src/webview/recipe.js
+++ b/src/webview/recipe.js
@@ -242,7 +242,9 @@ window.open = (url, frameName, features) => {
     return ipcRenderer.sendToHost('new-window', url);
   }
 
-  return originalWindowOpen(url, frameName, features);
+  if (url) {
+    return originalWindowOpen(url, frameName, features);
+  }
 };
 
 if (isDevMode) {