111 files changed, 4142 insertions, 1498 deletions

diff --git a/.eslintrc b/.eslintrc
index 47ecfb054..6253c0837 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -17,7 +17,7 @@
       "extensions": [".js", ".jsx"]
     }],
     "react/forbid-prop-types": 0,
-    "react/destructuring-assignment": 1,
+    "react/destructuring-assignment": 0,
     "prefer-destructuring": 1,
     "no-underscore-dangle": 0,
     "max-len": 0,
diff --git a/package-lock.json b/package-lock.json
index 607ebc31a..048425eb6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2149,9 +2149,9 @@
       }
     },
     "@mdi/js": {
-      "version": "3.4.93",
-      "resolved": "https://registry.npmjs.org/@mdi/js/-/js-3.4.93.tgz",
-      "integrity": "sha512-SEzolEqT8ErlWdHz4AAtQ1lTfAnM6j67Ppm6k5s/I1aIuuoFP/D8d/z838C28xHO1KOqrsS1fw2wlf6fRiEEJA=="
+      "version": "4.2.95",
+      "resolved": "https://registry.npmjs.org/@mdi/js/-/js-4.2.95.tgz",
+      "integrity": "sha512-3qqOZx2HkrQEUc9fr5MiQWlokwmO8TK5bQZ2EP1Rg0q2Q507jy+fUeL8lb9ko2ossYqoPnugIr7jI0/O7uhlrA=="
     },
     "@mdi/react": {
       "version": "1.1.0",
@@ -2178,6 +2178,10 @@
         "react-loader": "^2.4.5"
       },
       "dependencies": {
+        "@mdi/js": {
+          "version": "3.9.97",
+          "bundled": true
+        },
         "@meetfranz/theme": {
           "version": "1.0.14",
           "bundled": true,
@@ -2202,6 +2206,10 @@
         "react-loader": "^2.4.5"
       },
       "dependencies": {
+        "@mdi/js": {
+          "version": "3.9.97",
+          "bundled": true
+        },
         "@meetfranz/theme": {
           "version": "1.0.14",
           "bundled": true,
@@ -16748,6 +16756,14 @@
         "react-transition-group": "^1.2.0"
       }
     },
+    "react-confetti": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/react-confetti/-/react-confetti-3.1.0.tgz",
+      "integrity": "sha512-T1DKt09C9rrf2BJ0OxFu8saPohFalOJfOgci11/ePz6DxbY+0cd/3CMimxj/ZITl7jQWnmC/bNWBgGheke3WZQ==",
+      "requires": {
+        "tween-functions": "^1.2.0"
+      }
+    },
     "react-dom": {
       "version": "16.6.3",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.6.3.tgz",
@@ -19899,6 +19915,11 @@
         "safe-buffer": "^5.0.1"
       }
     },
+    "tween-functions": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/tween-functions/-/tween-functions-1.2.0.tgz",
+      "integrity": "sha1-GuOlDnxguz3vd06scHrLynO7w/8="
+    },
     "tweetnacl": {
       "version": "0.14.5",
       "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
diff --git a/package.json b/package.json
index 639d078a0..d30fa08c5 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
   "dependencies": {
     "@babel/polyfill": "7.4.4",
     "@babel/runtime": "7.4.5",
+    "@mdi/js": "4.2.95",
     "@meetfranz/electron-notification-state": "1.0.0",
     "@meetfranz/forms": "file:packages/forms",
     "@meetfranz/theme": "file:packages/theme",
@@ -71,6 +72,7 @@
     "prop-types": "^15.5.10",
     "react": "16.6.3",
     "react-addons-css-transition-group": "15.6.2",
+    "react-confetti": "3.1.0",
     "react-dom": "16.6.3",
     "react-dropzone": "7.0.1",
     "react-electron-web-view": "^2.0.1",
diff --git a/packages/forms/package.json b/packages/forms/package.json
index d50f4c756..bb76462d8 100644
--- a/packages/forms/package.json
+++ b/packages/forms/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@meetfranz/forms",
-  "version": "1.0.16",
+  "version": "1.1.0",
   "description": "React form components for Franz",
   "main": "lib/index.js",
   "scripts": {
@@ -35,5 +35,5 @@
     "react-dom": "16.7.0",
     "react-jss": "^8.6.1"
   },
-  "gitHead": "9f2ab40b7602bc3df26ebb093b484b9917768f69"
+  "gitHead": "e1e46986d902adc4c19ee009016290f9733a7d61"
 }
diff --git a/packages/forms/src/button/index.tsx b/packages/forms/src/button/index.tsx
index 9faedc8f1..b53c2da05 100644
--- a/packages/forms/src/button/index.tsx
+++ b/packages/forms/src/button/index.tsx
@@ -1,4 +1,3 @@
-import * as mdiIcons from '@mdi/js';
 import Icon from '@mdi/react';
 import { Theme } from '@meetfranz/theme';
 import classnames from 'classnames';
@@ -21,7 +20,7 @@ interface IProps extends IFormField, IWithStyle {
   stretch?: boolean;
   loaded?: boolean;
   busy?: boolean;
-  icon?: keyof typeof mdiIcons;
+  icon?: string;
   href?: string;
   target?: string;
 }
@@ -175,7 +174,7 @@ class ButtonComponent extends Component<IProps> {
       onClick,
       buttonType,
       loaded,
-      icon: iconName,
+      icon,
       busy: busyProp,
       href,
       target,
@@ -185,13 +184,6 @@ class ButtonComponent extends Component<IProps> {
       busy,
     } = this.state;
 
-    let icon = '';
-    if (iconName && mdiIcons[iconName]) {
-      icon = mdiIcons[iconName];
-    } else if (iconName && !mdiIcons[iconName]) {
-      console.warn(`Icon '${iconName}' was not found`);
-    }
-
     let showLoader = false;
     if (loaded) {
       showLoader = !loaded;
diff --git a/packages/theme/src/themes/dark/index.ts b/packages/theme/src/themes/dark/index.ts
index d29345298..e94f54c55 100644
--- a/packages/theme/src/themes/dark/index.ts
+++ b/packages/theme/src/themes/dark/index.ts
@@ -11,6 +11,8 @@ export const colorBackgroundSubscriptionContainer = legacyStyles.themeBrandInfo;
 export const colorHeadline = legacyStyles.darkThemeTextColor;
 export const colorText = legacyStyles.darkThemeTextColor;
 
+export const defaultContentBorder = legacyStyles.themeGrayDark;
+
 // Loader
 export const colorFullscreenLoaderSpinner = '#FFF';
 export const colorWebviewLoaderBackground = color(legacyStyles.darkThemeGrayDarkest).alpha(0.5).rgb().string();
@@ -119,6 +121,16 @@ export const announcements = merge({}, defaultStyles.announcements, {
   },
 });
 
+// Signup
+export const signup = merge({}, defaultStyles.signup, {
+  pricing: {
+    feature: {
+      background: legacyStyles.darkThemeGrayLight,
+      border: color(legacyStyles.darkThemeGrayLight).lighten(0.2).hex(),
+    },
+  },
+});
+
 // Todos
 export const todos = merge({}, defaultStyles.todos, {
   todosLayer: {
diff --git a/packages/theme/src/themes/default/index.ts b/packages/theme/src/themes/default/index.ts
index 9f9c39f9a..4e042afce 100644
--- a/packages/theme/src/themes/default/index.ts
+++ b/packages/theme/src/themes/default/index.ts
@@ -28,6 +28,8 @@ export const colorHeadline = legacyStyles.themeGrayDark;
 
 export const colorText = legacyStyles.themeTextColor;
 
+export const defaultContentBorder = color(legacyStyles.themeGrayLighter).darken(0.1).rgb().string();
+
 // Subscription Container Component
 export const colorSubscriptionContainerBackground = 'none';
 export const colorSubscriptionContainerBorder = `1px solid ${brandPrimary}`;
@@ -208,6 +210,16 @@ export const announcements = {
   },
 };
 
+// Signup
+export const signup = {
+  pricing: {
+    feature: {
+      background: legacyStyles.themeGrayLightest,
+      border: legacyStyles.themeGrayLighter,
+    },
+  },
+};
+
 // Todos
 export const todos = {
   todosLayer: {
@@ -223,5 +235,5 @@ export const todos = {
   },
   resizeHandler: {
     backgroundHover: styleTypes.primary.accent,
-  }
+  },
 };
diff --git a/packages/ui/package.json b/packages/ui/package.json
index a851ed9cf..4f42b21b5 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@meetfranz/ui",
-  "version": "0.0.9",
+  "version": "1.0.0",
   "description": "React UI components for Franz",
   "main": "lib/index.js",
   "scripts": {
@@ -34,5 +34,5 @@
     "react-dom": "16.7.0",
     "react-jss": "^8.6.1"
   },
-  "gitHead": "9f2ab40b7602bc3df26ebb093b484b9917768f69"
+  "gitHead": "e1e46986d902adc4c19ee009016290f9733a7d61"
 }
diff --git a/packages/ui/src/badge/ProBadge.tsx b/packages/ui/src/badge/ProBadge.tsx
index 612e23210..5cc41f5b2 100644
--- a/packages/ui/src/badge/ProBadge.tsx
+++ b/packages/ui/src/badge/ProBadge.tsx
@@ -1,15 +1,17 @@
+import { mdiStar } from '@mdi/js';
 import { Theme } from '@meetfranz/theme';
 import classnames from 'classnames';
 import React, { Component } from 'react';
 import injectStyle from 'react-jss';
 
-import { Icon, Badge } from '../';
+import { Badge, Icon } from '../';
 import { IWithStyle } from '../typings/generic';
 
 interface IProps extends IWithStyle {
   badgeClasses?: string;
   iconClasses?: string;
   inverted?: boolean;
+  className?: string;
 }
 
 const styles = (theme: Theme) => ({
@@ -37,6 +39,7 @@ class ProBadgeComponent extends Component<IProps> {
       badgeClasses,
       iconClasses,
       inverted,
+      className,
     } = this.props;
 
     return (
@@ -46,10 +49,11 @@ class ProBadgeComponent extends Component<IProps> {
           classes.badge,
           inverted && classes.invertedBadge,
           badgeClasses,
+          className,
         ])}
       >
         <Icon
-          icon="mdiStar"
+          icon={mdiStar}
           className={classnames([
             classes.icon,
             inverted && classes.invertedIcon,
diff --git a/packages/ui/src/icon/index.tsx b/packages/ui/src/icon/index.tsx
index e30d3396d..af467c085 100644
--- a/packages/ui/src/icon/index.tsx
+++ b/packages/ui/src/icon/index.tsx
@@ -1,4 +1,3 @@
-import * as mdiIcons from '@mdi/js';
 import MdiIcon from '@mdi/react';
 import { Theme } from '@meetfranz/theme';
 import classnames from 'classnames';
@@ -8,7 +7,7 @@ import injectStyle from 'react-jss';
 import { IWithStyle } from '../typings/generic';
 
 interface IProps extends IWithStyle {
-  icon: keyof typeof mdiIcons;
+  icon: string;
   size?: number;
   className?: string;
 }
@@ -27,16 +26,13 @@ class IconComponent extends Component<IProps> {
   render() {
     const {
       classes,
-      icon: iconName,
+      icon,
       size,
       className,
     } = this.props;
 
-    let icon = '';
-    if (iconName && mdiIcons[iconName]) {
-      icon = mdiIcons[iconName];
-    } else if (iconName && !mdiIcons[iconName]) {
-      console.warn(`Icon '${iconName}' was not found`);
+    if (!icon) {
+      console.warn('No Icon specified');
     }
 
     return (
diff --git a/packages/ui/src/infobox/index.tsx b/packages/ui/src/infobox/index.tsx
index 9066a623e..e4c2c5a3e 100644
--- a/packages/ui/src/infobox/index.tsx
+++ b/packages/ui/src/infobox/index.tsx
@@ -1,3 +1,4 @@
+import { mdiClose } from '@mdi/js';
 import { Theme } from '@meetfranz/theme';
 import classnames from 'classnames';
 import React, { Component } from 'react';
@@ -48,13 +49,13 @@ const styles = (theme: Theme) => ({
     position: 'relative',
     overflow: 'hidden',
     height: 'auto',
+    marginBottom: 30,
   },
   infobox: {
     alignItems: 'center',
     borderRadius: theme.borderRadiusSmall,
     display: 'flex',
     height: 'auto',
-    marginBottom: 30,
     padding: '15px 20px',
     top: 0,
     transition: 'all 0.5s',
@@ -192,7 +193,7 @@ class InfoboxComponent extends Component<IProps, IState> {
               onClick={this.dismiss.bind(this)}
               className={classes.close}
             >
-              <Icon icon="mdiClose" />
+              <Icon icon={mdiClose} />
             </button>
           )}
         </div>
diff --git a/src/actions/user.js b/src/actions/user.js
index ccf1fa56a..5d7d9a899 100644
--- a/src/actions/user.js
+++ b/src/actions/user.js
@@ -17,6 +17,9 @@ export default {
   retrievePassword: {
     email: PropTypes.string.isRequired,
   },
+  activateTrial: {
+    planId: PropTypes.string.isRequired,
+  },
   invite: {
     invites: PropTypes.array.isRequired,
   },
diff --git a/src/api/UserApi.js b/src/api/UserApi.js
index edfb88988..8ba8cd1e9 100644
--- a/src/api/UserApi.js
+++ b/src/api/UserApi.js
@@ -25,6 +25,10 @@ export default class UserApi {
     return this.server.retrievePassword(email);
   }
 
+  activateTrial(data) {
+    return this.server.activateTrial(data);
+  }
+
   invite(data) {
     return this.server.inviteUser(data);
   }
diff --git a/src/api/server/ServerApi.js b/src/api/server/ServerApi.js
index a9ce202ff..f56c7b6e4 100644
--- a/src/api/server/ServerApi.js
+++ b/src/api/server/ServerApi.js
@@ -77,6 +77,20 @@ export default class ServerApi {
     return u.token;
   }
 
+  async activateTrial(data) {
+    const request = await sendAuthRequest(`${API_URL}/payment/trial`, {
+      method: 'POST',
+      body: JSON.stringify(data),
+    });
+    if (!request.ok) {
+      throw request;
+    }
+    const trial = await request.json();
+
+    debug('ServerApi::signup resolves', trial);
+    return true;
+  }
+
   async inviteUser(data) {
     const request = await sendAuthRequest(`${API_URL}/invite`, {
       method: 'POST',
@@ -469,7 +483,7 @@ export default class ServerApi {
         return services;
       }
     } catch (err) {
-      throw (new Error('ServerApi::getLegacyServices no config found'));
+      console.error('ServerApi::getLegacyServices no config found');
     }
 
     return [];
diff --git a/src/assets/images/workspaces/teaser_dark.png b/src/assets/images/workspaces/teaser_dark.png
new file mode 100644
index 000000000..5b6d7334b
--- /dev/null
+++ b/src/assets/images/workspaces/teaser_dark.png
diff --git a/src/assets/images/workspaces/teaser_light.png b/src/assets/images/workspaces/teaser_light.png
new file mode 100644
index 000000000..635af43fa
--- /dev/null
+++ b/src/assets/images/workspaces/teaser_light.png
diff --git a/src/components/TrialActivationInfoBar.js b/src/components/TrialActivationInfoBar.js
new file mode 100644
index 000000000..acdf51d08
--- /dev/null
+++ b/src/components/TrialActivationInfoBar.js
@@ -0,0 +1,94 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { defineMessages, intlShape } from 'react-intl';
+import ms from 'ms';
+import injectSheet from 'react-jss';
+import classnames from 'classnames';
+
+import InfoBar from './ui/InfoBar';
+
+const messages = defineMessages({
+  message: {
+    id: 'infobar.trialActivated',
+    defaultMessage: '!!!Your trial was successfully activated. Happy messaging!',
+  },
+});
+
+const styles = {
+  notification: {
+    height: 'auto',
+    position: 'absolute',
+    top: -50,
+    transition: 'top 0.3s',
+    zIndex: 300,
+    width: 'calc(100% - 300px)',
+  },
+  show: {
+    top: 0,
+  },
+};
+
+@injectSheet(styles)
+class TrialActivationInfoBar extends Component {
+  static propTypes = {
+    // eslint-disable-next-line
+    classes: PropTypes.object.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  state = {
+    showing: false,
+    removed: false,
+  }
+
+  componentDidMount() {
+    setTimeout(() => {
+      this.setState({
+        showing: true,
+      });
+    }, 0);
+
+    setTimeout(() => {
+      this.setState({
+        showing: false,
+      });
+    }, ms('6s'));
+
+    setTimeout(() => {
+      this.setState({
+        removed: true,
+      });
+    }, ms('7s'));
+  }
+
+  render() {
+    const { classes } = this.props;
+    const { showing, removed } = this.state;
+    const { intl } = this.context;
+
+    if (removed) return null;
+
+    return (
+      <div
+        className={classnames({
+          [classes.notification]: true,
+          [classes.show]: showing,
+        })}
+      >
+        <InfoBar
+          type="primary"
+          position="top"
+          sticky
+        >
+          <span className="mdi mdi-information" />
+          {intl.formatMessage(messages.message)}
+        </InfoBar>
+      </div>
+    );
+  }
+}
+
+export default TrialActivationInfoBar;
diff --git a/src/components/auth/Pricing.js b/src/components/auth/Pricing.js
index 7ab14f429..cbeaaa5d9 100644
--- a/src/components/auth/Pricing.js
+++ b/src/components/auth/Pricing.js
@@ -1,40 +1,107 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
+import { observer } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
-// import { Link } from 'react-router';
+import injectSheet from 'react-jss';
+import { H2, Loader } from '@meetfranz/ui';
+import classnames from 'classnames';
+
+import { Button } from '@meetfranz/forms';
+import { FeatureItem } from '../ui/FeatureItem';
+import { FeatureList } from '../ui/FeatureList';
 
-// import Button from '../ui/Button';
-import Loader from '../ui/Loader';
-import Appear from '../ui/effects/Appear';
-import SubscriptionForm from '../../containers/subscription/SubscriptionFormScreen';
 
 const messages = defineMessages({
   headline: {
-    id: 'pricing.headline',
-    defaultMessage: '!!!Support Franz',
+    id: 'pricing.trial.headline',
+    defaultMessage: '!!!Franz Professional',
+  },
+  personalOffer: {
+    id: 'pricing.trial.subheadline',
+    defaultMessage: '!!!Your personal welcome offer:',
+  },
+  noStringsAttachedHeadline: {
+    id: 'pricing.trial.terms.headline',
+    defaultMessage: '!!!No strings attached',
+  },
+  noCreditCard: {
+    id: 'pricing.trial.terms.noCreditCard',
+    defaultMessage: '!!!No credit card required',
   },
-  monthlySupportLabel: {
-    id: 'pricing.support.label',
-    defaultMessage: '!!!Select your support plan',
+  automaticTrialEnd: {
+    id: 'pricing.trial.terms.automaticTrialEnd',
+    defaultMessage: '!!!Your free trial ends automatically after 14 days',
   },
-  submitButtonLabel: {
-    id: 'pricing.submit.label',
-    defaultMessage: '!!!Support the development of Franz',
+  activationError: {
+    id: 'pricing.trial.error',
+    defaultMessage: '!!!Sorry, we could not activate your trial!',
   },
-  skipPayment: {
-    id: 'pricing.link.skipPayment',
-    defaultMessage: '!!!I don\'t want to support the development of Franz.',
+  ctaAccept: {
+    id: 'pricing.trial.cta.accept',
+    defaultMessage: '!!!Yes, upgrade my account to Franz Professional',
+  },
+  ctaSkip: {
+    id: 'pricing.trial.cta.skip',
+    defaultMessage: '!!!Continue to Franz',
+  },
+  featuresHeadline: {
+    id: 'pricing.trial.features.headline',
+    defaultMessage: '!!!Franz Professional includes:',
   },
 });
 
-export default @observer class Signup extends Component {
+const styles = theme => ({
+  container: {
+    position: 'relative',
+    marginLeft: -150,
+  },
+  welcomeOffer: {
+    textAlign: 'center',
+    fontWeight: 'bold',
+  },
+  keyTerms: {
+    textAlign: 'center',
+  },
+  content: {
+    position: 'relative',
+    zIndex: 20,
+  },
+  featureContainer: {
+    width: 300,
+    position: 'absolute',
+    left: 'calc(100% / 2 + 225px)',
+    top: 155,
+    background: theme.signup.pricing.feature.background,
+    height: 'auto',
+    padding: 20,
+    borderTopRightRadius: theme.borderRadius,
+    borderBottomRightRadius: theme.borderRadius,
+    zIndex: 10,
+  },
+  featureItem: {
+    borderBottom: [1, 'solid', theme.signup.pricing.feature.border],
+  },
+  cta: {
+    marginTop: 40,
+    width: '100%',
+  },
+  skipLink: {
+    textAlign: 'center',
+    marginTop: 10,
+  },
+  error: {
+    margin: [20, 0, 0],
+    color: theme.styleTypes.danger.accent,
+  },
+});
+
+export default @observer @injectSheet(styles) class Signup extends Component {
   static propTypes = {
-    donor: MobxPropTypes.objectOrObservableObject.isRequired,
-    isLoading: PropTypes.bool.isRequired,
-    isLoadingUser: PropTypes.bool.isRequired,
-    onCloseSubscriptionWindow: PropTypes.func.isRequired,
-    skipAction: PropTypes.func.isRequired,
+    onSubmit: PropTypes.func.isRequired,
+    isLoadingRequiredData: PropTypes.bool.isRequired,
+    isActivatingTrial: PropTypes.bool.isRequired,
+    trialActivationError: PropTypes.bool.isRequired,
+    classes: PropTypes.object.isRequired,
   };
 
   static contextTypes = {
@@ -43,70 +110,37 @@ export default @observer class Signup extends Component {
 
   render() {
     const {
-      donor,
-      isLoading,
-      isLoadingUser,
-      onCloseSubscriptionWindow,
-      skipAction,
+      onSubmit,
+      isLoadingRequiredData,
+      isActivatingTrial,
+      trialActivationError,
+      classes,
     } = this.props;
     const { intl } = this.context;
 
     return (
-      <div className="auth__scroll-container">
-        <div className="auth__container auth__container--signup">
+      <div className={classnames('auth__scroll-container', classes.container)}>
+        <div className={classnames('auth__container', 'auth__container--signup', classes.content)}>
           <form className="franz-form auth__form">
-            <img
-              src="./assets/images/sm.png"
-              className="auth__logo auth__logo--sm"
-              alt=""
-            />
+            {isLoadingRequiredData ? <Loader /> : (
+              <img
+                src="./assets/images/sm.png"
+                className="auth__logo auth__logo--sm"
+                alt=""
+              />
+            )}
+            <p className={classes.welcomeOffer}>{intl.formatMessage(messages.personalOffer)}</p>
             <h1>{intl.formatMessage(messages.headline)}</h1>
             <div className="auth__letter">
-              {isLoadingUser && (
-                <p>Loading</p>
-              )}
-              {!isLoadingUser && (
-                donor.amount ? (
-                  <span>
-                    <p>
-                      Thank you so much for your previous donation of
-                      {' '}
-                      <strong>
-                        $
-                        {donor.amount}
-                      </strong>
-                      .
-                      <br />
-                      Your support allowed us to get where we are today.
-                      <br />
-                    </p>
-                    <p>
-                      As an early supporter, you get
-                      {' '}
-                      <strong>a lifetime premium supporter license</strong>
-                      {' '}
-                      without any
-                      additional charges.
-                    </p>
-                    <p>
-                      However, If you want to keep supporting us, you are more than welcome to subscribe to a plan.
-                      <br />
-                      <br />
-                    </p>
-                  </span>
-                ) : (
-                  <span>
-                    <p>
-                      We built Franz with a lot of effort, manpower and love,
-                      to bring you the best messaging experience.
-                      <br />
-                    </p>
-                    <p>
-                      Getting a Franz Premium Supporter License will allow us to keep improving Franz for you.
-                    </p>
-                  </span>
-                )
-              )}
+              <p>
+                We built Franz with a lot of effort, manpower and love,
+                to boost up your messaging experience.
+                <br />
+              </p>
+              <p>
+                Get the free 14 day Franz Professional trial and see your communication evolving.
+                <br />
+              </p>
               <p>
                 Thanks for being a hero.
               </p>
@@ -114,20 +148,48 @@ export default @observer class Signup extends Component {
                 <strong>Stefan Malzner</strong>
               </p>
             </div>
-            <Loader loaded={!isLoading}>
-              <Appear transitionName="slideDown">
-                <span className="label">{intl.formatMessage(messages.monthlySupportLabel)}</span>
-                <SubscriptionForm
-                  onCloseWindow={onCloseSubscriptionWindow}
-                  showSkipOption
-                  skipAction={skipAction}
-                  hideInfo={Boolean(donor.amount)}
-                  skipButtonLabel={intl.formatMessage(messages.skipPayment)}
-                />
-              </Appear>
-            </Loader>
+            <div className={classes.keyTerms}>
+              <H2>
+                {intl.formatMessage(messages.noStringsAttachedHeadline)}
+              </H2>
+              <ul className={classes.keyTermsList}>
+                <FeatureItem icon="👉" name={intl.formatMessage(messages.noCreditCard)} />
+                <FeatureItem icon="👉" name={intl.formatMessage(messages.automaticTrialEnd)} />
+              </ul>
+            </div>
+            {trialActivationError && (
+              <p className={classes.error}>{intl.formatMessage(messages.activationError)}</p>
+            )}
+            <Button
+              label={intl.formatMessage(messages.ctaAccept)}
+              className={classes.cta}
+              onClick={onSubmit}
+              busy={isActivatingTrial}
+              disabled={isLoadingRequiredData || isActivatingTrial}
+            />
+            <p className={classes.skipLink}>
+              <a href="#/">{intl.formatMessage(messages.ctaSkip)}</a>
+            </p>
           </form>
         </div>
+        <div className={classes.featureContainer}>
+          <H2>
+            {intl.formatMessage(messages.featuresHeadline)}
+          </H2>
+          {/* <ul className={classes.features}>
+            <FeatureItem name="Add unlimited services" className={classes.featureItem} />
+            <FeatureItem name="Spellchecker support" className={classes.featureItem} />
+            <FeatureItem name="Workspaces" className={classes.featureItem} />
+            <FeatureItem name="Add Custom Websites" className={classes.featureItem} />
+            <FeatureItem name="On-premise & other Hosted Services" className={classes.featureItem} />
+            <FeatureItem name="Install 3rd party services" className={classes.featureItem} />
+            <FeatureItem name="Service Proxies" className={classes.featureItem} />
+            <FeatureItem name="Team Management" className={classes.featureItem} />
+            <FeatureItem name="No Waiting Screens" className={classes.featureItem} />
+            <FeatureItem name="Forever ad-free" className={classes.featureItem} />
+          </ul> */}
+          <FeatureList />
+        </div>
       </div>
     );
   }
diff --git a/src/components/auth/Signup.js b/src/components/auth/Signup.js
index d9b83eeb8..0499d764b 100644
--- a/src/components/auth/Signup.js
+++ b/src/components/auth/Signup.js
@@ -7,7 +7,6 @@ import { isDevMode, useLiveAPI } from '../../environment';
 import Form from '../../lib/Form';
 import { required, email, minLength } from '../../helpers/validation-helpers';
 import Input from '../ui/Input';
-import Radio from '../ui/Radio';
 import Button from '../ui/Button';
 import Link from '../ui/Link';
 import Infobox from '../ui/Infobox';
@@ -31,10 +30,10 @@ const messages = defineMessages({
     id: 'signup.email.label',
     defaultMessage: '!!!Email address',
   },
-  companyLabel: {
-    id: 'signup.company.label',
-    defaultMessage: '!!!Company',
-  },
+  // companyLabel: {
+  //   id: 'signup.company.label',
+  //   defaultMessage: '!!!Company',
+  // },
   passwordLabel: {
     id: 'signup.password.label',
     defaultMessage: '!!!Password',
@@ -79,20 +78,6 @@ export default @observer class Signup extends Component {
 
   form = new Form({
     fields: {
-      accountType: {
-        value: 'individual',
-        validators: [required],
-        options: [{
-          value: 'individual',
-          label: 'Individual',
-        }, {
-          value: 'non-profit',
-          label: 'Non-Profit',
-        }, {
-          value: 'company',
-          label: 'Company',
-        }],
-      },
       firstname: {
         label: this.context.intl.formatMessage(messages.firstnameLabel),
         value: '',
@@ -108,10 +93,6 @@ export default @observer class Signup extends Component {
         value: '',
         validators: [required, email],
       },
-      organization: {
-        label: this.context.intl.formatMessage(messages.companyLabel),
-        value: '', // TODO: make required when accountType: company
-      },
       password: {
         label: this.context.intl.formatMessage(messages.passwordLabel),
         value: '',
@@ -151,7 +132,6 @@ export default @observer class Signup extends Component {
                 In Dev Mode your data is not persistent. Please use the live app for accesing the production API.
               </Infobox>
             )}
-            <Radio field={form.$('accountType')} showLabel={false} />
             <div className="grid__row">
               <Input field={form.$('firstname')} focus />
               <Input field={form.$('lastname')} />
@@ -162,9 +142,6 @@ export default @observer class Signup extends Component {
               showPasswordToggle
               scorePassword
             />
-            {form.$('accountType').value === 'company' && (
-              <Input field={form.$('organization')} />
-            )}
             {error.code === 'email-duplicate' && (
               <p className="error-message center">{intl.formatMessage(messages.emailDuplicate)}</p>
             )}
diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js
index dbf7d3c21..941e60bfd 100644
--- a/src/components/layout/AppLayout.js
+++ b/src/components/layout/AppLayout.js
@@ -17,6 +17,7 @@ import { isWindows } from '../../environment';
 import WorkspaceSwitchingIndicator from '../../features/workspaces/components/WorkspaceSwitchingIndicator';
 import { workspaceStore } from '../../features/workspaces';
 import AppUpdateInfoBar from '../AppUpdateInfoBar';
+import TrialActivationInfoBar from '../TrialActivationInfoBar';
 import Todos from '../../features/todos/containers/TodosScreen';
 
 function createMarkup(HTMLString) {
@@ -70,6 +71,7 @@ class AppLayout extends Component {
     retryRequiredRequests: PropTypes.func.isRequired,
     areRequiredRequestsLoading: PropTypes.bool.isRequired,
     isDelayAppScreenVisible: PropTypes.bool.isRequired,
+    hasActivatedTrial: PropTypes.bool.isRequired,
   };
 
   static defaultProps = {
@@ -89,7 +91,6 @@ class AppLayout extends Component {
       sidebar,
       services,
       children,
-      // isOnline,
       news,
       showServicesUpdatedInfoBar,
       appUpdateIsDownloaded,
@@ -102,6 +103,7 @@ class AppLayout extends Component {
       retryRequiredRequests,
       areRequiredRequestsLoading,
       isDelayAppScreenVisible,
+      hasActivatedTrial,
     } = this.props;
 
     const { intl } = this.context;
@@ -126,17 +128,20 @@ class AppLayout extends Component {
                   <span dangerouslySetInnerHTML={createMarkup(item.message)} />
                 </InfoBar>
               ))}
+              {hasActivatedTrial && (
+                <TrialActivationInfoBar />
+              )}
               {!areRequiredRequestsSuccessful && showRequiredRequestsError && (
-                <InfoBar
-                  type="danger"
-                  ctaLabel="Try again"
-                  ctaLoading={areRequiredRequestsLoading}
-                  sticky
-                  onClick={retryRequiredRequests}
-                >
-                  <span className="mdi mdi-flash" />
-                  {intl.formatMessage(messages.requiredRequestsFailed)}
-                </InfoBar>
+              <InfoBar
+                type="danger"
+                ctaLabel="Try again"
+                ctaLoading={areRequiredRequestsLoading}
+                sticky
+                onClick={retryRequiredRequests}
+              >
+                <span className="mdi mdi-flash" />
+                {intl.formatMessage(messages.requiredRequestsFailed)}
+              </InfoBar>
               )}
               {showServicesUpdatedInfoBar && (
                 <InfoBar
diff --git a/src/components/services/content/ServiceRestricted.js b/src/components/services/content/ServiceRestricted.js
new file mode 100644
index 000000000..4b8d926aa
--- /dev/null
+++ b/src/components/services/content/ServiceRestricted.js
@@ -0,0 +1,78 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+
+import { serviceLimitStore } from '../../../features/serviceLimit';
+import Button from '../../ui/Button';
+import { RESTRICTION_TYPES } from '../../../models/Service';
+
+const messages = defineMessages({
+  headlineServiceLimit: {
+    id: 'service.restrictedHandler.serviceLimit.headline',
+    defaultMessage: '!!!You have reached your service limit.',
+  },
+  textServiceLimit: {
+    id: 'service.restrictedHandler.serviceLimit.text',
+    defaultMessage: '!!!Please upgrade your account to use more than {count} services.',
+  },
+  headlineCustomUrl: {
+    id: 'service.restrictedHandler.customUrl.headline',
+    defaultMessage: '!!!Franz Professional Plan required',
+  },
+  textCustomUrl: {
+    id: 'service.restrictedHandler.customUrl.text',
+    defaultMessage: '!!!Please upgrade to the Franz Professional plan to use custom urls & self hosted services.',
+  },
+  action: {
+    id: 'service.restrictedHandler.action',
+    defaultMessage: '!!!Upgrade Account',
+  },
+});
+
+export default @observer class ServiceRestricted extends Component {
+  static propTypes = {
+    name: PropTypes.string.isRequired,
+    upgrade: PropTypes.func.isRequired,
+    type: PropTypes.number.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  countdownInterval = null;
+
+  countdownIntervalTimeout = 1000;
+
+  render() {
+    const {
+      name,
+      upgrade,
+      type,
+    } = this.props;
+    const { intl } = this.context;
+
+    return (
+      <div className="services__info-layer">
+        {type === RESTRICTION_TYPES.SERVICE_LIMIT && (
+          <>
+            <h1>{intl.formatMessage(messages.headlineServiceLimit)}</h1>
+            <p>{intl.formatMessage(messages.textServiceLimit, { count: serviceLimitStore.serviceLimit })}</p>
+          </>
+        )}
+        {type === RESTRICTION_TYPES.CUSTOM_URL && (
+          <>
+            <h1>{intl.formatMessage(messages.headlineCustomUrl)}</h1>
+            <p>{intl.formatMessage(messages.textCustomUrl)}</p>
+          </>
+        )}
+        <Button
+          label={intl.formatMessage(messages.action, { name })}
+          buttonType="inverted"
+          onClick={() => upgrade()}
+        />
+      </div>
+    );
+  }
+}
diff --git a/src/components/services/content/ServiceView.js b/src/components/services/content/ServiceView.js
index 13148b9b3..f65f51346 100644
--- a/src/components/services/content/ServiceView.js
+++ b/src/components/services/content/ServiceView.js
@@ -10,6 +10,7 @@ import WebviewLoader from '../../ui/WebviewLoader';
 import WebviewCrashHandler from './WebviewCrashHandler';
 import WebviewErrorHandler from './ErrorHandlers/WebviewErrorHandler';
 import ServiceDisabled from './ServiceDisabled';
+import ServiceRestricted from './ServiceRestricted';
 import ServiceWebview from './ServiceWebview';
 
 export default @observer class ServiceView extends Component {
@@ -21,6 +22,7 @@ export default @observer class ServiceView extends Component {
     edit: PropTypes.func.isRequired,
     enable: PropTypes.func.isRequired,
     isActive: PropTypes.bool,
+    upgrade: PropTypes.func.isRequired,
   };
 
   static defaultProps = {
@@ -72,6 +74,7 @@ export default @observer class ServiceView extends Component {
       reload,
       edit,
       enable,
+      upgrade,
     } = this.props;
 
     const webviewClasses = classnames({
@@ -99,7 +102,7 @@ export default @observer class ServiceView extends Component {
                 reload={reload}
               />
             )}
-            {service.isEnabled && service.isLoading && service.isFirstLoad && (
+            {service.isEnabled && service.isLoading && service.isFirstLoad && !service.isServiceAccessRestricted && (
               <WebviewLoader
                 loaded={false}
                 name={service.name}
@@ -126,11 +129,21 @@ export default @observer class ServiceView extends Component {
             )}
           </Fragment>
         ) : (
-          <ServiceWebview
-            service={service}
-            setWebviewReference={setWebviewReference}
-            detachService={detachService}
-          />
+          <>
+            {service.isServiceAccessRestricted ? (
+              <ServiceRestricted
+                name={service.recipe.name}
+                upgrade={upgrade}
+                type={service.restrictionType}
+              />
+            ) : (
+              <ServiceWebview
+                service={service}
+                setWebviewReference={setWebviewReference}
+                detachService={detachService}
+              />
+            )}
+          </>
         )}
         {statusBar}
       </div>
diff --git a/src/components/services/content/Services.js b/src/components/services/content/Services.js
index 8f8c38a11..73c27bfb6 100644
--- a/src/components/services/content/Services.js
+++ b/src/components/services/content/Services.js
@@ -3,6 +3,9 @@ import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 import { Link } from 'react-router';
 import { defineMessages, intlShape } from 'react-intl';
+import Confetti from 'react-confetti';
+import ms from 'ms';
+import injectSheet from 'react-jss';
 
 import ServiceView from './ServiceView';
 import Appear from '../../ui/effects/Appear';
@@ -18,7 +21,17 @@ const messages = defineMessages({
   },
 });
 
-export default @observer class Services extends Component {
+
+const styles = {
+  confettiContainer: {
+    position: 'absolute',
+    width: '100%',
+    zIndex: 9999,
+    pointerEvents: 'none',
+  },
+};
+
+export default @observer @injectSheet(styles) class Services extends Component {
   static propTypes = {
     services: MobxPropTypes.arrayOrObservableArray,
     setWebviewReference: PropTypes.func.isRequired,
@@ -28,6 +41,9 @@ export default @observer class Services extends Component {
     reload: PropTypes.func.isRequired,
     openSettings: PropTypes.func.isRequired,
     update: PropTypes.func.isRequired,
+    userHasCompletedSignup: PropTypes.bool.isRequired,
+    hasActivatedTrial: PropTypes.bool.isRequired,
+    classes: PropTypes.object.isRequired,
   };
 
   static defaultProps = {
@@ -38,6 +54,18 @@ export default @observer class Services extends Component {
     intl: intlShape,
   };
 
+  state = {
+    showConfetti: true,
+  }
+
+  componentDidMount() {
+    window.setTimeout(() => {
+      this.setState({
+        showConfetti: false,
+      });
+    }, ms('8s'));
+  }
+
   render() {
     const {
       services,
@@ -48,11 +76,28 @@ export default @observer class Services extends Component {
       reload,
       openSettings,
       update,
+      userHasCompletedSignup,
+      hasActivatedTrial,
+      classes,
     } = this.props;
+
+    const {
+      showConfetti,
+    } = this.state;
+
     const { intl } = this.context;
 
     return (
       <div className="services">
+        {(userHasCompletedSignup || hasActivatedTrial) && (
+          <div className={classes.confettiContainer}>
+            <Confetti
+              width={window.width}
+              height={window.height}
+              numberOfPieces={showConfetti ? 200 : 0}
+            />
+          </div>
+        )}
         {services.length === 0 && (
           <Appear
             timeout={1500}
@@ -89,6 +134,7 @@ export default @observer class Services extends Component {
               },
               redirect: false,
             })}
+            upgrade={() => openSettings({ path: 'user' })}
           />
         ))}
       </div>
diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js
index 3f6964b6b..4fd1e8163 100644
--- a/src/components/settings/account/AccountDashboard.js
+++ b/src/components/settings/account/AccountDashboard.js
@@ -1,14 +1,18 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
 import ReactTooltip from 'react-tooltip';
-import { ProBadge } from '@meetfranz/ui';
+import {
+  ProBadge, H1, H2,
+} from '@meetfranz/ui';
+import moment from 'moment';
 
 import Loader from '../../ui/Loader';
 import Button from '../../ui/Button';
 import Infobox from '../../ui/Infobox';
 import SubscriptionForm from '../../../containers/subscription/SubscriptionFormScreen';
+import { i18nPlanName } from '../../../helpers/plan-helpers';
 
 const messages = defineMessages({
   headline: {
@@ -19,10 +23,6 @@ const messages = defineMessages({
     id: 'settings.account.headlineSubscription',
     defaultMessage: '!!!Your Subscription',
   },
-  headlineUpgrade: {
-    id: 'settings.account.headlineUpgrade',
-    defaultMessage: '!!!Upgrade your Account',
-  },
   headlineDangerZone: {
     id: 'settings.account.headlineDangerZone',
     defaultMessage: '!!Danger Zone',
@@ -31,6 +31,10 @@ const messages = defineMessages({
     id: 'settings.account.manageSubscription.label',
     defaultMessage: '!!!Manage your subscription',
   },
+  upgradeAccountToPro: {
+    id: 'settings.account.upgradeToPro.label',
+    defaultMessage: '!!!Upgrade to Franz Professional',
+  },
   accountTypeBasic: {
     id: 'settings.account.accountType.basic',
     defaultMessage: '!!!Basic Account',
@@ -71,21 +75,38 @@ const messages = defineMessages({
     id: 'settings.account.deleteEmailSent',
     defaultMessage: '!!!You have received an email with a link to confirm your account deletion. Your account and data cannot be restored!',
   },
+  trial: {
+    id: 'settings.account.trial',
+    defaultMessage: '!!!Free Trial',
+  },
+  yourLicense: {
+    id: 'settings.account.yourLicense',
+    defaultMessage: '!!!Your Franz License:',
+  },
+  trialEndsIn: {
+    id: 'settings.account.trialEndsIn',
+    defaultMessage: '!!!Your free trial ends in {duration}.',
+  },
+  trialUpdateBillingInformation: {
+    id: 'settings.account.trialUpdateBillingInfo',
+    defaultMessage: '!!!Please update your billing info to continue using {license} after your trial period.',
+  },
 });
 
-export default @observer class AccountDashboard extends Component {
+@observer
+class AccountDashboard extends Component {
   static propTypes = {
     user: MobxPropTypes.observableObject.isRequired,
+    isProUser: PropTypes.bool.isRequired,
     isLoading: PropTypes.bool.isRequired,
-    isLoadingPlans: PropTypes.bool.isRequired,
     userInfoRequestFailed: PropTypes.bool.isRequired,
     retryUserInfoRequest: PropTypes.func.isRequired,
-    onCloseSubscriptionWindow: PropTypes.func.isRequired,
     deleteAccount: PropTypes.func.isRequired,
     isLoadingDeleteAccount: PropTypes.bool.isRequired,
     isDeleteAccountSuccessful: PropTypes.bool.isRequired,
     openEditAccount: PropTypes.func.isRequired,
     openBilling: PropTypes.func.isRequired,
+    upgradeToPro: PropTypes.func.isRequired,
     openInvoices: PropTypes.func.isRequired,
   };
 
@@ -96,20 +117,26 @@ export default @observer class AccountDashboard extends Component {
   render() {
     const {
       user,
+      isProUser,
       isLoading,
-      isLoadingPlans,
       userInfoRequestFailed,
       retryUserInfoRequest,
-      onCloseSubscriptionWindow,
       deleteAccount,
       isLoadingDeleteAccount,
       isDeleteAccountSuccessful,
       openEditAccount,
       openBilling,
+      upgradeToPro,
       openInvoices,
     } = this.props;
     const { intl } = this.context;
 
+    let planName = '';
+
+    if (user.team && user.team.plan) {
+      planName = i18nPlanName(user.team.plan, intl);
+    }
+
     return (
       <div className="settings__main">
         <div className="settings__header">
@@ -135,82 +162,115 @@ export default @observer class AccountDashboard extends Component {
           )}
 
           {!userInfoRequestFailed && (
-            <Fragment>
+            <>
               {!isLoading && (
-                <div className="account">
-                  <div className="account__box account__box--flex">
-                    <div className="account__avatar">
-                      <img
-                        src="./assets/images/logo.svg"
-                        alt=""
-                      />
-                    </div>
-                    <div className="account__info">
-                      <h2>
-                        <span className="username">{`${user.firstname} ${user.lastname}`}</span>
+                <>
+                  <div className="account">
+                    <div className="account__box account__box--flex">
+                      <div className="account__avatar">
+                        <img
+                          src="./assets/images/logo.svg"
+                          alt=""
+                        />
+                      </div>
+                      <div className="account__info">
+                        <H1>
+                          <span className="username">{`${user.firstname} ${user.lastname}`}</span>
+                          {user.isPremium && (
+                            <>
+                              {' '}
+                              <ProBadge />
+                            </>
+                          )}
+                        </H1>
+                        <p>
+                          {user.organization && `${user.organization}, `}
+                          {user.email}
+                        </p>
                         {user.isPremium && (
+                          <div className="manage-user-links">
+                            <Button
+                              label={intl.formatMessage(messages.accountEditButton)}
+                              className="franz-form__button--inverted"
+                              onClick={openEditAccount}
+                            />
+                          </div>
+                        )}
+                      </div>
+                      {!user.isPremium && (
+                        <Button
+                          label={intl.formatMessage(messages.accountEditButton)}
+                          className="franz-form__button--inverted"
+                          onClick={openEditAccount}
+                        />
+                      )}
+                    </div>
+                  </div>
+                  {user.isPremium && user.isSubscriptionOwner && (
+                    <div className="account">
+                      <div className="account__box">
+                        <H2>
+                          {intl.formatMessage(messages.yourLicense)}
+                        </H2>
+                        <p>
+                          {planName}
+                          {user.team.isTrial && (
+                            <>
+                              {' – '}
+                              {intl.formatMessage(messages.trial)}
+                            </>
+                          )}
+                        </p>
+                        {user.team.isTrial && (
                           <>
-                            {' '}
-                            <ProBadge />
-                            <span className="badge badge--premium">{intl.formatMessage(messages.accountTypePremium)}</span>
+                            <br />
+                            <p>
+                              {intl.formatMessage(messages.trialEndsIn, {
+                                duration: moment.duration(moment().diff(user.team.trialEnd)).humanize(),
+                              })}
+                            </p>
+                            <p>
+                              {intl.formatMessage(messages.trialUpdateBillingInformation, {
+                                license: planName,
+                              })}
+                            </p>
                           </>
                         )}
-                      </h2>
-                      {user.organization && `${user.organization}, `}
-                      {user.email}
-                      {user.isPremium && (
                         <div className="manage-user-links">
+                          {!isProUser && (
+                            <Button
+                              label={intl.formatMessage(messages.upgradeAccountToPro)}
+                              className="franz-form__button--primary"
+                              onClick={upgradeToPro}
+                            />
+                          )}
                           <Button
-                            label={intl.formatMessage(messages.accountEditButton)}
+                            label={intl.formatMessage(messages.manageSubscriptionButtonLabel)}
                             className="franz-form__button--inverted"
-                            onClick={openEditAccount}
+                            onClick={openBilling}
+                          />
+                          <Button
+                            label={intl.formatMessage(messages.invoicesButton)}
+                            className="franz-form__button--inverted"
+                            onClick={openInvoices}
                           />
-                          {user.isSubscriptionOwner && (
-                            <>
-                              <Button
-                                label={intl.formatMessage(messages.manageSubscriptionButtonLabel)}
-                                className="franz-form__button--inverted"
-                                onClick={openBilling}
-                              />
-                              <Button
-                                label={intl.formatMessage(messages.invoicesButton)}
-                                className="franz-form__button--inverted"
-                                onClick={openInvoices}
-                              />
-                            </>
-                          )}
                         </div>
-                      )}
+                      </div>
                     </div>
-                    {!user.isPremium && (
-                      <Button
-                        label={intl.formatMessage(messages.accountEditButton)}
-                        className="franz-form__button--inverted"
-                        onClick={openEditAccount}
-                      />
-                    )}
-                  </div>
-                </div>
-              )}
-
-              {!user.isPremium && (
-                isLoadingPlans ? (
-                  <Loader />
-                ) : (
-                  <div className="account franz-form">
-                    <div className="account__box">
-                      <h2>{intl.formatMessage(messages.headlineUpgrade)}</h2>
-                      <SubscriptionForm
-                        onCloseWindow={onCloseSubscriptionWindow}
-                      />
+                  )}
+                  {!user.isPremium && (
+                    <div className="account franz-form">
+                      <div className="account__box">
+                        <SubscriptionForm />
+                      </div>
                     </div>
-                  </div>
-                )
+                  )}
+                </>
               )}
 
               <div className="account franz-form">
                 <div className="account__box">
-                  <h2>{intl.formatMessage(messages.headlineDangerZone)}</h2>
+                  <H2>{intl.formatMessage(messages.headlineDangerZone)}</H2>
                   {!isDeleteAccountSuccessful && (
                   <div className="account__subscription">
                     <p>{intl.formatMessage(messages.deleteInfo)}</p>
@@ -227,7 +287,7 @@ export default @observer class AccountDashboard extends Component {
                   )}
                 </div>
               </div>
-            </Fragment>
+            </>
           )}
         </div>
         <ReactTooltip place="right" type="dark" effect="solid" />
@@ -235,3 +295,5 @@ export default @observer class AccountDashboard extends Component {
     );
   }
 }
+
+export default AccountDashboard;
diff --git a/src/components/settings/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.js
index df4b3b3b2..4696b82eb 100644
--- a/src/components/settings/navigation/SettingsNavigation.js
+++ b/src/components/settings/navigation/SettingsNavigation.js
@@ -8,6 +8,7 @@ import Link from '../../ui/Link';
 import { workspaceStore } from '../../../features/workspaces';
 import UIStore from '../../../stores/UIStore';
 import UserStore from '../../../stores/UserStore';
+import { serviceLimitStore } from '../../../features/serviceLimit';
 
 const messages = defineMessages({
   availableServices: {
@@ -80,7 +81,12 @@ export default @inject('stores') @observer class SettingsNavigation extends Comp
         >
           {intl.formatMessage(messages.yourServices)}
           {' '}
-          <span className="badge">{serviceCount}</span>
+          <span className="badge">
+            {serviceCount}
+            {serviceLimitStore.serviceLimit !== 0 && (
+              `/${serviceLimitStore.serviceLimit}`
+            )}
+          </span>
         </Link>
         {workspaceStore.isFeatureEnabled ? (
           <Link
diff --git a/src/components/settings/recipes/RecipeItem.js b/src/components/settings/recipes/RecipeItem.js
index 3bb0852b2..12e3775f6 100644
--- a/src/components/settings/recipes/RecipeItem.js
+++ b/src/components/settings/recipes/RecipeItem.js
@@ -19,7 +19,7 @@ export default @observer class RecipeItem extends Component {
         className="recipe-teaser"
         onClick={onClick}
       >
-        {recipe.local && (
+        {recipe.isDevRecipe && (
           <span className="recipe-teaser__dev-badge">dev</span>
         )}
         <img
diff --git a/src/components/settings/recipes/RecipesDashboard.js b/src/components/settings/recipes/RecipesDashboard.js
index 00cd725cf..08988024a 100644
--- a/src/components/settings/recipes/RecipesDashboard.js
+++ b/src/components/settings/recipes/RecipesDashboard.js
@@ -4,12 +4,17 @@ import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
 import { Link } from 'react-router';
 
+import { Button, Input } from '@meetfranz/forms';
+import injectSheet from 'react-jss';
+import { H3, H2, ProBadge } from '@meetfranz/ui';
 import SearchInput from '../../ui/SearchInput';
 import Infobox from '../../ui/Infobox';
 import RecipeItem from './RecipeItem';
 import Loader from '../../ui/Loader';
 import Appear from '../../ui/effects/Appear';
 import { FRANZ_SERVICE_REQUEST } from '../../../config';
+import LimitReachedInfobox from '../../../features/serviceLimit/components/LimitReachedInfobox';
+import PremiumFeatureContainer from '../../ui/PremiumFeatureContainer';
 
 const messages = defineMessages({
   headline: {
@@ -28,9 +33,9 @@ const messages = defineMessages({
     id: 'settings.recipes.all',
     defaultMessage: '!!!All services',
   },
-  devRecipes: {
-    id: 'settings.recipes.dev',
-    defaultMessage: '!!!Development',
+  customRecipes: {
+    id: 'settings.recipes.custom',
+    defaultMessage: '!!!Custom Services',
   },
   nothingFound: {
     id: 'settings.recipes.nothingFound',
@@ -44,9 +49,61 @@ const messages = defineMessages({
     id: 'settings.recipes.missingService',
     defaultMessage: '!!!Missing a service?',
   },
+  customRecipeIntro: {
+    id: 'settings.recipes.customService.intro',
+    defaultMessage: '!!!To add a custom service, copy the recipe folder into:',
+  },
+  openFolder: {
+    id: 'settings.recipes.customService.openFolder',
+    defaultMessage: '!!!Open directory',
+  },
+  openDevDocs: {
+    id: 'settings.recipes.customService.openDevDocs',
+    defaultMessage: '!!!Developer Documentation',
+  },
+  headlineCustomRecipes: {
+    id: 'settings.recipes.customService.headline.customRecipes',
+    defaultMessage: '!!!Custom Service Recipes',
+  },
+  headlineCommunityRecipes: {
+    id: 'settings.recipes.customService.headline.communityRecipes',
+    defaultMessage: '!!!Community Services',
+  },
+  headlineDevRecipes: {
+    id: 'settings.recipes.customService.headline.devRecipes',
+    defaultMessage: '!!!Your Development Service Recipes',
+  },
 });
 
-export default @observer class RecipesDashboard extends Component {
+const styles = {
+  devRecipeIntroContainer: {
+    textAlign: 'center',
+    width: '100%',
+    height: 'auto',
+    margin: [40, 0],
+  },
+  path: {
+    marginTop: 20,
+
+    '& > div': {
+      fontFamily: 'SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace',
+    },
+  },
+  actionContainer: {
+    '& button': {
+      margin: [0, 10],
+    },
+  },
+  devRecipeList: {
+    marginTop: 20,
+    height: 'auto',
+  },
+  proBadge: {
+    marginLeft: '10px !important',
+  },
+};
+
+export default @injectSheet(styles) @observer class RecipesDashboard extends Component {
   static propTypes = {
     recipes: MobxPropTypes.arrayOrObservableArray.isRequired,
     isLoading: PropTypes.bool.isRequired,
@@ -55,12 +112,18 @@ export default @observer class RecipesDashboard extends Component {
     searchRecipes: PropTypes.func.isRequired,
     resetSearch: PropTypes.func.isRequired,
     serviceStatus: MobxPropTypes.arrayOrObservableArray.isRequired,
-    devRecipesCount: PropTypes.number.isRequired,
     searchNeedle: PropTypes.string,
+    recipeFilter: PropTypes.string,
+    recipeDirectory: PropTypes.string.isRequired,
+    openRecipeDirectory: PropTypes.func.isRequired,
+    openDevDocs: PropTypes.func.isRequired,
+    classes: PropTypes.object.isRequired,
+    isCommunityRecipesIncludedInCurrentPlan: PropTypes.bool.isRequired,
   };
 
   static defaultProps = {
     searchNeedle: '',
+    recipeFilter: 'all',
   }
 
   static contextTypes = {
@@ -76,16 +139,26 @@ export default @observer class RecipesDashboard extends Component {
       searchRecipes,
       resetSearch,
       serviceStatus,
-      devRecipesCount,
       searchNeedle,
+      recipeFilter,
+      recipeDirectory,
+      openRecipeDirectory,
+      openDevDocs,
+      classes,
+      isCommunityRecipesIncludedInCurrentPlan,
     } = this.props;
     const { intl } = this.context;
 
+
+    const communityRecipes = recipes.filter(r => !r.isDevRecipe);
+    const devRecipes = recipes.filter(r => r.isDevRecipe);
+
     return (
       <div className="settings__main">
         <div className="settings__header">
           <h1>{intl.formatMessage(messages.headline)}</h1>
         </div>
+        <LimitReachedInfobox />
         <div className="settings__body recipes">
           {serviceStatus.length > 0 && serviceStatus.includes('created') && (
             <Appear>
@@ -122,20 +195,14 @@ export default @observer class RecipesDashboard extends Component {
             >
               {intl.formatMessage(messages.allRecipes)}
             </Link>
-            {devRecipesCount > 0 && (
-              <Link
-                to="/settings/recipes/dev"
-                className="badge"
-                activeClassName={`${!searchNeedle ? 'badge--primary' : ''}`}
-                onClick={() => resetSearch()}
-              >
-                {intl.formatMessage(messages.devRecipes)}
-                {' '}
-(
-                {devRecipesCount}
-)
-              </Link>
-            )}
+            <Link
+              to="/settings/recipes/dev"
+              className="badge"
+              activeClassName={`${!searchNeedle ? 'badge--primary' : ''}`}
+              onClick={() => resetSearch()}
+            >
+              {intl.formatMessage(messages.customRecipes)}
+            </Link>
             <a href={FRANZ_SERVICE_REQUEST} target="_blank" className="link recipes__service-request">
               {intl.formatMessage(messages.missingService)}
               {' '}
@@ -146,23 +213,78 @@ export default @observer class RecipesDashboard extends Component {
           {isLoading ? (
             <Loader />
           ) : (
-            <div className="recipes__list">
-              {hasLoadedRecipes && recipes.length === 0 && (
-                <p className="align-middle settings__empty-state">
-                  <span className="emoji">
-                    <img src="./assets/images/emoji/dontknow.png" alt="" />
-                  </span>
-                  {intl.formatMessage(messages.nothingFound)}
-                </p>
+            <>
+              {recipeFilter === 'dev' && (
+                <>
+                  <H2>
+                    {intl.formatMessage(messages.headlineCustomRecipes)}
+                    {!isCommunityRecipesIncludedInCurrentPlan && (
+                      <ProBadge className={classes.proBadge} />
+                    )}
+                  </H2>
+                  <div className={classes.devRecipeIntroContainer}>
+                    <p>
+                      {intl.formatMessage(messages.customRecipeIntro)}
+                    </p>
+                    <Input
+                      value={recipeDirectory}
+                      className={classes.path}
+                      showLabel={false}
+                    />
+                    <div className={classes.actionContainer}>
+                      <Button
+                        onClick={openRecipeDirectory}
+                        buttonType="secondary"
+                        label={intl.formatMessage(messages.openFolder)}
+                      />
+                      <Button
+                        onClick={openDevDocs}
+                        buttonType="secondary"
+                        label={intl.formatMessage(messages.openDevDocs)}
+                      />
+                    </div>
+                  </div>
+                </>
+              )}
+              <PremiumFeatureContainer
+                condition={(recipeFilter === 'dev' && communityRecipes.length > 0) && !isCommunityRecipesIncludedInCurrentPlan}
+              >
+                {recipeFilter === 'dev' && communityRecipes.length > 0 && (
+                  <H3>{intl.formatMessage(messages.headlineCommunityRecipes)}</H3>
+                )}
+                <div className="recipes__list">
+                  {hasLoadedRecipes && recipes.length === 0 && recipeFilter !== 'dev' && (
+                    <p className="align-middle settings__empty-state">
+                      <span className="emoji">
+                        <img src="./assets/images/emoji/dontknow.png" alt="" />
+                      </span>
+                      {intl.formatMessage(messages.nothingFound)}
+                    </p>
+                  )}
+                  {communityRecipes.map(recipe => (
+                    <RecipeItem
+                      key={recipe.id}
+                      recipe={recipe}
+                      onClick={() => showAddServiceInterface({ recipeId: recipe.id })}
+                    />
+                  ))}
+                </div>
+              </PremiumFeatureContainer>
+              {recipeFilter === 'dev' && devRecipes.length > 0 && (
+                <div className={classes.devRecipeList}>
+                  <H3>{intl.formatMessage(messages.headlineDevRecipes)}</H3>
+                  <div className="recipes__list">
+                    {devRecipes.map(recipe => (
+                      <RecipeItem
+                        key={recipe.id}
+                        recipe={recipe}
+                        onClick={() => showAddServiceInterface({ recipeId: recipe.id })}
+                      />
+                    ))}
+                  </div>
+                </div>
               )}
-              {recipes.map(recipe => (
-                <RecipeItem
-                  key={recipe.id}
-                  recipe={recipe}
-                  onClick={() => showAddServiceInterface({ recipeId: recipe.id })}
-                />
-              ))}
-            </div>
+            </>
           )}
         </div>
       </div>
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index 4ba2eb844..5cde0db8e 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -17,6 +17,8 @@ import ImageUpload from '../../ui/ImageUpload';
 import Select from '../../ui/Select';
 
 import PremiumFeatureContainer from '../../ui/PremiumFeatureContainer';
+import LimitReachedInfobox from '../../../features/serviceLimit/components/LimitReachedInfobox';
+import { serviceLimitStore } from '../../../features/serviceLimit';
 
 const messages = defineMessages({
   saveService: {
@@ -128,8 +130,8 @@ export default @observer class EditServiceForm extends Component {
     isSaving: PropTypes.bool.isRequired,
     isDeleting: PropTypes.bool.isRequired,
     isProxyFeatureEnabled: PropTypes.bool.isRequired,
-    isProxyPremiumFeature: PropTypes.bool.isRequired,
-    isSpellcheckerPremiumFeature: PropTypes.bool.isRequired,
+    isServiceProxyIncludedInCurrentPlan: PropTypes.bool.isRequired,
+    isSpellcheckerIncludedInCurrentPlan: PropTypes.bool.isRequired,
   };
 
   static defaultProps = {
@@ -192,8 +194,8 @@ export default @observer class EditServiceForm extends Component {
       isDeleting,
       onDelete,
       isProxyFeatureEnabled,
-      isProxyPremiumFeature,
-      isSpellcheckerPremiumFeature,
+      isServiceProxyIncludedInCurrentPlan,
+      isSpellcheckerIncludedInCurrentPlan,
     } = this.props;
     const { intl } = this.context;
 
@@ -252,6 +254,7 @@ export default @observer class EditServiceForm extends Component {
             )}
           </span>
         </div>
+        <LimitReachedInfobox />
         <div className="settings__body">
           <form onSubmit={e => this.submit(e)} id="form">
             <div className="service-name">
@@ -342,7 +345,7 @@ export default @observer class EditServiceForm extends Component {
             </div>
 
             <PremiumFeatureContainer
-              condition={isSpellcheckerPremiumFeature}
+              condition={!isSpellcheckerIncludedInCurrentPlan}
               gaEventInfo={{ category: 'User', event: 'upgrade', label: 'spellchecker' }}
             >
               <div className="settings__settings-group">
@@ -352,7 +355,7 @@ export default @observer class EditServiceForm extends Component {
 
             {isProxyFeatureEnabled && (
               <PremiumFeatureContainer
-                condition={isProxyPremiumFeature}
+                condition={!isServiceProxyIncludedInCurrentPlan}
                 gaEventInfo={{ category: 'User', event: 'upgrade', label: 'proxy' }}
               >
                 <div className="settings__settings-group">
@@ -418,7 +421,7 @@ export default @observer class EditServiceForm extends Component {
               type="submit"
               label={intl.formatMessage(messages.saveService)}
               htmlForm="form"
-              disabled={action !== 'edit' && form.isPristine && requiresUserInput}
+              disabled={action !== 'edit' && ((form.isPristine && requiresUserInput) || serviceLimitStore.userHasReachedServiceLimit)}
             />
           )}
         </div>
diff --git a/src/components/settings/services/ServicesDashboard.js b/src/components/settings/services/ServicesDashboard.js
index 53bae12df..78038e86a 100644
--- a/src/components/settings/services/ServicesDashboard.js
+++ b/src/components/settings/services/ServicesDashboard.js
@@ -9,6 +9,7 @@ import Infobox from '../../ui/Infobox';
 import Loader from '../../ui/Loader';
 import ServiceItem from './ServiceItem';
 import Appear from '../../ui/effects/Appear';
+import LimitReachedInfobox from '../../../features/serviceLimit/components/LimitReachedInfobox';
 
 const messages = defineMessages({
   headline: {
@@ -91,6 +92,7 @@ export default @observer class ServicesDashboard extends Component {
         <div className="settings__header">
           <h1>{intl.formatMessage(messages.headline)}</h1>
         </div>
+        <LimitReachedInfobox />
         <div className="settings__body">
           {!isLoading && (
             <SearchInput
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index efd453356..3f9e0a6bc 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -100,7 +100,7 @@ export default @observer class EditSettingsForm extends Component {
     isClearingAllCache: PropTypes.bool.isRequired,
     onClearAllCache: PropTypes.func.isRequired,
     cacheSize: PropTypes.string.isRequired,
-    isSpellcheckerPremiumFeature: PropTypes.bool.isRequired,
+    isSpellcheckerIncludedInCurrentPlan: PropTypes.bool.isRequired,
   };
 
   static contextTypes = {
@@ -130,7 +130,7 @@ export default @observer class EditSettingsForm extends Component {
       isClearingAllCache,
       onClearAllCache,
       cacheSize,
-      isSpellcheckerPremiumFeature,
+      isSpellcheckerIncludedInCurrentPlan,
     } = this.props;
     const { intl } = this.context;
 
@@ -173,7 +173,7 @@ export default @observer class EditSettingsForm extends Component {
             <h2 id="language">{intl.formatMessage(messages.headlineLanguage)}</h2>
             <Select field={form.$('locale')} showLabel={false} />
             <PremiumFeatureContainer
-              condition={isSpellcheckerPremiumFeature}
+              condition={!isSpellcheckerIncludedInCurrentPlan}
               gaEventInfo={{ category: 'User', event: 'upgrade', label: 'spellchecker' }}
             >
               <Fragment>
diff --git a/src/components/settings/team/TeamDashboard.js b/src/components/settings/team/TeamDashboard.js
index 82c517fcb..990ee52e7 100644
--- a/src/components/settings/team/TeamDashboard.js
+++ b/src/components/settings/team/TeamDashboard.js
@@ -133,13 +133,13 @@ export default @injectSheet(styles) @observer class TeamDashboard extends Compon
                         </div>
                         <img className={classes.image} src="https://cdn.franzinfra.com/announcements/assets/teams.png" alt="Franz for Teams" />
                       </div>
-                      <Button
-                        label={intl.formatMessage(messages.manageButton)}
-                        onClick={openTeamManagement}
-                        className={classes.cta}
-                      />
                     </>
                   </PremiumFeatureContainer>
+                  <Button
+                    label={intl.formatMessage(messages.manageButton)}
+                    onClick={openTeamManagement}
+                    className={classes.cta}
+                  />
                 </>
               )}
             </>
diff --git a/src/components/subscription/SubscriptionForm.js b/src/components/subscription/SubscriptionForm.js
index 50f1e0522..cdfbbe60d 100644
--- a/src/components/subscription/SubscriptionForm.js
+++ b/src/components/subscription/SubscriptionForm.js
@@ -1,214 +1,78 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
+import { observer } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
+import injectSheet from 'react-jss';
 
-import Form from '../../lib/Form';
-import Radio from '../ui/Radio';
-import Button from '../ui/Button';
-import Loader from '../ui/Loader';
+import { H3, H2 } from '@meetfranz/ui';
 
-import { required } from '../../helpers/validation-helpers';
+import { Button } from '@meetfranz/forms';
+import { FeatureList } from '../ui/FeatureList';
 
 const messages = defineMessages({
   submitButtonLabel: {
-    id: 'subscription.submit.label',
-    defaultMessage: '!!!Support the development of Franz',
+    id: 'subscription.cta.choosePlan',
+    defaultMessage: '!!!Choose your plan',
   },
-  paymentSessionError: {
-    id: 'subscription.paymentSessionError',
-    defaultMessage: '!!!Could not initialize payment form',
+  teaserHeadline: {
+    id: 'settings.account.headlineUpgradeAccount',
+    defaultMessage: '!!!Upgrade your account and get the full Franz experience',
   },
-  typeFree: {
-    id: 'subscription.type.free',
-    defaultMessage: '!!!free',
-  },
-  typeMonthly: {
-    id: 'subscription.type.month',
-    defaultMessage: '!!!month',
-  },
-  typeYearly: {
-    id: 'subscription.type.year',
-    defaultMessage: '!!!year',
+  teaserText: {
+    id: 'subscription.teaser.intro',
+    defaultMessage: '!!!Franz 5 comes with a wide range of new features to boost up your everyday communication - batteries included. Check out our new plans and find out which one suits you most!',
   },
   includedFeatures: {
-    id: 'subscription.includedFeatures',
-    defaultMessage: '!!!The Franz Premium Supporter Account includes',
-  },
-  onpremise: {
-    id: 'subscription.features.onpremise.mattermost',
-    defaultMessage: '!!!Add on-premise/hosted services like Mattermost',
-  },
-  noInterruptions: {
-    id: 'subscription.features.noInterruptions',
-    defaultMessage: '!!!No app delays & nagging to upgrade license',
-  },
-  proxy: {
-    id: 'subscription.features.proxy',
-    defaultMessage: '!!!Proxy support for services',
-  },
-  spellchecker: {
-    id: 'subscription.features.spellchecker',
-    defaultMessage: '!!!Support for Spellchecker',
+    id: 'subscription.teaser.includedFeatures',
+    defaultMessage: '!!!Paid Franz Plans include:',
   },
-  workspaces: {
-    id: 'subscription.features.workspaces',
-    defaultMessage: '!!!Organize your services in workspaces',
-  },
-  ads: {
-    id: 'subscription.features.ads',
-    defaultMessage: '!!!No ads, ever!',
-  },
-  comingSoon: {
-    id: 'subscription.features.comingSoon',
-    defaultMessage: '!!!coming soon',
-  },
-  euTaxInfo: {
-    id: 'subscription.euTaxInfo',
-    defaultMessage: '!!!EU residents: local sales tax may apply',
+});
+
+const styles = () => ({
+  activateTrialButton: {
+    margin: [40, 0, 50],
   },
 });
 
-export default @observer class SubscriptionForm extends Component {
+export default @observer @injectSheet(styles) class SubscriptionForm extends Component {
   static propTypes = {
-    plan: MobxPropTypes.objectOrObservableObject.isRequired,
-    isLoading: PropTypes.bool.isRequired,
-    handlePayment: PropTypes.func.isRequired,
-    retryPlanRequest: PropTypes.func.isRequired,
-    isCreatingHostedPage: PropTypes.bool.isRequired,
-    error: PropTypes.bool.isRequired,
-    showSkipOption: PropTypes.bool,
-    skipAction: PropTypes.func,
-    skipButtonLabel: PropTypes.string,
-    hideInfo: PropTypes.bool.isRequired,
-  };
-
-  static defaultProps = {
-    showSkipOption: false,
-    skipAction: () => null,
-    skipButtonLabel: '',
+    selectPlan: PropTypes.func.isRequired,
+    isActivatingTrial: PropTypes.bool.isRequired,
+    classes: PropTypes.object.isRequired,
   };
 
   static contextTypes = {
     intl: intlShape,
   };
 
-  componentWillMount() {
-    this.form = this.prepareForm();
-  }
-
-  prepareForm() {
-    const { intl } = this.context;
-
-    const form = {
-      fields: {
-        paymentTier: {
-          value: 'year',
-          validators: [required],
-          options: [{
-            value: 'month',
-            label: `€ ${Object.hasOwnProperty.call(this.props.plan, 'month')
-              ? `${this.props.plan.month.price} / ${intl.formatMessage(messages.typeMonthly)}`
-              : 'monthly'}`,
-          }, {
-            value: 'year',
-            label: `€ ${Object.hasOwnProperty.call(this.props.plan, 'year')
-              ? `${this.props.plan.year.price} / ${intl.formatMessage(messages.typeYearly)}`
-              : 'yearly'}`,
-          }],
-        },
-      },
-    };
-
-    if (this.props.showSkipOption) {
-      form.fields.paymentTier.options.unshift({
-        value: 'skip',
-        label: `€ 0 / ${intl.formatMessage(messages.typeFree)}`,
-      });
-    }
-
-    return new Form(form, this.context.intl);
-  }
-
   render() {
     const {
-      isLoading,
-      isCreatingHostedPage,
-      handlePayment,
-      retryPlanRequest,
-      error,
-      showSkipOption,
-      skipAction,
-      skipButtonLabel,
-      hideInfo,
+      isActivatingTrial,
+      selectPlan,
+      classes,
     } = this.props;
     const { intl } = this.context;
 
-    if (error) {
-      return (
+    return (
+      <>
+        <H2>{intl.formatMessage(messages.teaserHeadline)}</H2>
+        <p>{intl.formatMessage(messages.teaserText)}</p>
         <Button
-          label="Reload"
-          onClick={retryPlanRequest}
-          isLoaded={!isLoading}
+          label={intl.formatMessage(messages.submitButtonLabel)}
+          className={classes.activateTrialButton}
+          busy={isActivatingTrial}
+          onClick={selectPlan}
+          stretch
         />
-      );
-    }
-
-    return (
-      <Loader loaded={!isLoading}>
-        <Radio field={this.form.$('paymentTier')} showLabel={false} className="paymentTiers" />
-        {!hideInfo && (
-          <div className="subscription__premium-info">
-            <p>
-              <strong>{intl.formatMessage(messages.includedFeatures)}</strong>
-            </p>
-            <div className="subscription">
-              <ul className="subscription__premium-features">
-                <li>{intl.formatMessage(messages.onpremise)}</li>
-                <li>
-                  {intl.formatMessage(messages.noInterruptions)}
-                </li>
-                <li>
-                  {intl.formatMessage(messages.spellchecker)}
-                </li>
-                <li>
-                  {intl.formatMessage(messages.proxy)}
-                </li>
-                <li>
-                  {intl.formatMessage(messages.workspaces)}
-                </li>
-                <li>
-                  {intl.formatMessage(messages.ads)}
-                </li>
-              </ul>
-            </div>
+        <div className="subscription__premium-info">
+          <H3>
+            {intl.formatMessage(messages.includedFeatures)}
+          </H3>
+          <div className="subscription">
+            <FeatureList />
           </div>
-        )}
-        <Fragment>
-          {error.code === 'no-payment-session' && (
-            <p className="error-message center">{intl.formatMessage(messages.paymentSessionError)}</p>
-          )}
-        </Fragment>
-        {showSkipOption && this.form.$('paymentTier').value === 'skip' ? (
-          <Button
-            label={skipButtonLabel}
-            className="auth__button"
-            onClick={skipAction}
-          />
-        ) : (
-          <Button
-            label={intl.formatMessage(messages.submitButtonLabel)}
-            className="auth__button"
-            loaded={!isCreatingHostedPage}
-            onClick={() => handlePayment(this.form.$('paymentTier').value)}
-          />
-        )}
-        {this.form.$('paymentTier').value !== 'skip' && (
-          <p className="legal">
-            {intl.formatMessage(messages.euTaxInfo)}
-          </p>
-        )}
-      </Loader>
+        </div>
+      </>
     );
   }
 }
diff --git a/src/components/subscription/SubscriptionPopup.js b/src/components/subscription/SubscriptionPopup.js
index 0f6f0260f..12ef8a6e9 100644
--- a/src/components/subscription/SubscriptionPopup.js
+++ b/src/components/subscription/SubscriptionPopup.js
@@ -43,7 +43,7 @@ export default @observer class SubscriptionPopup extends Component {
 
     setTimeout(() => {
       this.props.closeWindow();
-    }, ms('4s'));
+    }, ms('1s'));
   }
 
   render() {
@@ -61,8 +61,6 @@ export default @observer class SubscriptionPopup extends Component {
             autosize
             src={encodeURI(url)}
             onDidNavigate={completeCheck}
-            // onNewWindow={(event, url, frameName, options) =>
-            //   openWindow({ event, url, frameName, options })}
           />
         </div>
         <div className="subscription-popup__toolbar franz-form">
diff --git a/src/components/subscription/TrialForm.js b/src/components/subscription/TrialForm.js
new file mode 100644
index 000000000..9ed548f16
--- /dev/null
+++ b/src/components/subscription/TrialForm.js
@@ -0,0 +1,115 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+import injectSheet from 'react-jss';
+
+import { H3, H2 } from '@meetfranz/ui';
+
+import { Button } from '@meetfranz/forms';
+import { FeatureList } from '../ui/FeatureList';
+import { FeatureItem } from '../ui/FeatureItem';
+
+const messages = defineMessages({
+  submitButtonLabel: {
+    id: 'subscription.cta.activateTrial',
+    defaultMessage: '!!!Yes, start the free Franz Professional trial',
+  },
+  allOptionsButton: {
+    id: 'subscription.cta.allOptions',
+    defaultMessage: '!!!See all options',
+  },
+  teaserHeadline: {
+    id: 'settings.account.headlineTrialUpgrade',
+    defaultMessage: '!!!Get the free 14 day Franz Professional Trial',
+  },
+  includedFeatures: {
+    id: 'subscription.includedProFeatures',
+    defaultMessage: '!!!The Franz Professional Plan includes:',
+  },
+  noStringsAttachedHeadline: {
+    id: 'pricing.trial.terms.headline',
+    defaultMessage: '!!!No strings attached',
+  },
+  noCreditCard: {
+    id: 'pricing.trial.terms.noCreditCard',
+    defaultMessage: '!!!No credit card required',
+  },
+  automaticTrialEnd: {
+    id: 'pricing.trial.terms.automaticTrialEnd',
+    defaultMessage: '!!!Your free trial ends automatically after 14 days',
+  },
+});
+
+const styles = theme => ({
+  activateTrialButton: {
+    margin: [40, 0, 10],
+  },
+  allOptionsButton: {
+    margin: [0, 0, 40],
+    background: 'none',
+    border: 'none',
+    color: theme.colorText,
+  },
+  keyTerms: {
+    marginTop: 20,
+  },
+});
+
+export default @observer @injectSheet(styles) class TrialForm extends Component {
+  static propTypes = {
+    activateTrial: PropTypes.func.isRequired,
+    isActivatingTrial: PropTypes.bool.isRequired,
+    showAllOptions: PropTypes.func.isRequired,
+    classes: PropTypes.object.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  render() {
+    const {
+      isActivatingTrial,
+      activateTrial,
+      showAllOptions,
+      classes,
+    } = this.props;
+    const { intl } = this.context;
+
+    return (
+      <>
+        <H2>{intl.formatMessage(messages.teaserHeadline)}</H2>
+        <H3 className={classes.keyTerms}>
+          {intl.formatMessage(messages.noStringsAttachedHeadline)}
+        </H3>
+        <ul>
+          <FeatureItem icon="👉" name={intl.formatMessage(messages.noCreditCard)} />
+          <FeatureItem icon="👉" name={intl.formatMessage(messages.automaticTrialEnd)} />
+        </ul>
+
+        <Button
+          label={intl.formatMessage(messages.submitButtonLabel)}
+          className={classes.activateTrialButton}
+          busy={isActivatingTrial}
+          onClick={activateTrial}
+          stretch
+        />
+        <Button
+          label={intl.formatMessage(messages.allOptionsButton)}
+          className={classes.allOptionsButton}
+          onClick={showAllOptions}
+          stretch
+        />
+        <div className="subscription__premium-info">
+          <H3>
+            {intl.formatMessage(messages.includedFeatures)}
+          </H3>
+          <div className="subscription">
+            <FeatureList />
+          </div>
+        </div>
+      </>
+    );
+  }
+}
diff --git a/src/components/ui/ActivateTrialButton/index.js b/src/components/ui/ActivateTrialButton/index.js
new file mode 100644
index 000000000..c3e5f4a6f
--- /dev/null
+++ b/src/components/ui/ActivateTrialButton/index.js
@@ -0,0 +1,115 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { inject, observer } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+import classnames from 'classnames';
+
+import { Button } from '@meetfranz/forms';
+import { gaEvent } from '../../../lib/analytics';
+
+import UserStore from '../../../stores/UserStore';
+
+const messages = defineMessages({
+  action: {
+    id: 'feature.delayApp.upgrade.action',
+    defaultMessage: '!!!Get a Franz Supporter License',
+  },
+  actionTrial: {
+    id: 'feature.delayApp.trial.action',
+    defaultMessage: '!!!Yes, I want the free 14 day trial of Franz Professional',
+  },
+  shortAction: {
+    id: 'feature.delayApp.upgrade.actionShort',
+    defaultMessage: '!!!Upgrade account',
+  },
+  shortActionTrial: {
+    id: 'feature.delayApp.trial.actionShort',
+    defaultMessage: '!!!Activate the free Franz Professional trial',
+  },
+});
+
+@inject('stores', 'actions') @observer
+class ActivateTrialButton extends Component {
+  static propTypes = {
+    // eslint-disable-next-line
+    classes: PropTypes.object.isRequired,
+    className: PropTypes.string,
+    short: PropTypes.bool,
+    gaEventInfo: PropTypes.shape({
+      category: PropTypes.string.isRequired,
+      event: PropTypes.string.isRequired,
+      label: PropTypes.string,
+    }),
+  };
+
+  static defaultProps = {
+    className: '',
+    short: false,
+    gaEventInfo: null,
+  }
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  handleCTAClick() {
+    const { actions, stores, gaEventInfo } = this.props;
+    const { hadSubscription } = stores.user.data;
+    const { defaultTrialPlan } = stores.features.features;
+
+    let label = '';
+    if (!hadSubscription) {
+      actions.user.activateTrial({ planId: defaultTrialPlan });
+
+      label = 'Start Trial';
+    } else {
+      actions.ui.openSettings({ path: 'user' });
+
+      label = 'Upgrade Account';
+    }
+
+    if (gaEventInfo) {
+      const { category, event } = gaEventInfo;
+      gaEvent(category, event, label);
+    }
+  }
+
+  render() {
+    const { stores, className, short } = this.props;
+    const { intl } = this.context;
+
+    const { hadSubscription } = stores.user.data;
+
+    let label;
+    if (hadSubscription) {
+      label = short ? messages.shortAction : messages.action;
+    } else {
+      label = short ? messages.shortActionTrial : messages.actionTrial;
+    }
+
+    return (
+      <Button
+        label={intl.formatMessage(label)}
+        className={classnames({
+          [className]: className,
+        })}
+        buttonType="inverted"
+        onClick={this.handleCTAClick.bind(this)}
+        busy={stores.user.activateTrialRequest.isExecuting}
+      />
+    );
+  }
+}
+
+export default ActivateTrialButton;
+
+ActivateTrialButton.wrappedComponent.propTypes = {
+  stores: PropTypes.shape({
+    user: PropTypes.instanceOf(UserStore).isRequired,
+  }).isRequired,
+  actions: PropTypes.shape({
+    ui: PropTypes.shape({
+      openSettings: PropTypes.func.isRequired,
+    }).isRequired,
+  }).isRequired,
+};
diff --git a/src/components/ui/FeatureItem.js b/src/components/ui/FeatureItem.js
new file mode 100644
index 000000000..7c482c4d4
--- /dev/null
+++ b/src/components/ui/FeatureItem.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import injectSheet from 'react-jss';
+import { Icon } from '@meetfranz/ui';
+import classnames from 'classnames';
+import { mdiCheckCircle } from '@mdi/js';
+
+const styles = theme => ({
+  featureItem: {
+    borderBottom: [1, 'solid', theme.defaultContentBorder],
+    padding: [8, 0],
+    display: 'flex',
+    alignItems: 'center',
+  },
+  featureIcon: {
+    fill: theme.brandSuccess,
+    marginRight: 10,
+  },
+});
+
+export const FeatureItem = injectSheet(styles)(({
+  classes, className, name, icon,
+}) => (
+  <li className={classnames({
+    [classes.featureItem]: true,
+    [className]: className,
+  })}
+  >
+    {icon ? (
+      <span className={classes.featureIcon}>{icon}</span>
+    ) : (
+      <Icon icon={mdiCheckCircle} className={classes.featureIcon} size={1.5} />
+    )}
+    {name}
+  </li>
+));
+
+export default FeatureItem;
diff --git a/src/components/ui/FeatureList.js b/src/components/ui/FeatureList.js
new file mode 100644
index 000000000..62944ad75
--- /dev/null
+++ b/src/components/ui/FeatureList.js
@@ -0,0 +1,89 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { defineMessages, intlShape } from 'react-intl';
+
+import { FeatureItem } from './FeatureItem';
+
+const messages = defineMessages({
+  unlimitedServices: {
+    id: 'pricing.features.unlimitedServices',
+    defaultMessage: '!!!Add unlimited services',
+  },
+  spellchecker: {
+    id: 'pricing.features.spellchecker',
+    defaultMessage: '!!!Spellchecker support',
+  },
+  workspaces: {
+    id: 'pricing.features.workspaces',
+    defaultMessage: '!!!Workspaces',
+  },
+  customWebsites: {
+    id: 'pricing.features.customWebsites',
+    defaultMessage: '!!!Add Custom Websites',
+  },
+  onPremise: {
+    id: 'pricing.features.onPremise',
+    defaultMessage: '!!!On-premise & other Hosted Services',
+  },
+  thirdPartyServices: {
+    id: 'pricing.features.thirdPartyServices',
+    defaultMessage: '!!!Install 3rd party services',
+  },
+  serviceProxies: {
+    id: 'pricing.features.serviceProxies',
+    defaultMessage: '!!!Service Proxies',
+  },
+  teamManagement: {
+    id: 'pricing.features.teamManagement',
+    defaultMessage: '!!!Team Management',
+  },
+  appDelays: {
+    id: 'pricing.features.appDelays',
+    defaultMessage: '!!!No Waiting Screens',
+  },
+  adFree: {
+    id: 'pricing.features.adFree',
+    defaultMessage: '!!!Forever ad-free',
+  },
+});
+
+export class FeatureList extends Component {
+  static propTypes = {
+    className: PropTypes.string,
+    featureClassName: PropTypes.string,
+  };
+
+  static defaultProps = {
+    className: '',
+    featureClassName: '',
+  }
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  render() {
+    const {
+      className,
+      featureClassName,
+    } = this.props;
+    const { intl } = this.context;
+
+    return (
+      <ul className={className}>
+        <FeatureItem name={intl.formatMessage(messages.unlimitedServices)} className={featureClassName} />
+        <FeatureItem name={intl.formatMessage(messages.spellchecker)} className={featureClassName} />
+        <FeatureItem name={intl.formatMessage(messages.workspaces)} className={featureClassName} />
+        <FeatureItem name={intl.formatMessage(messages.customWebsites)} className={featureClassName} />
+        <FeatureItem name={intl.formatMessage(messages.onPremise)} className={featureClassName} />
+        <FeatureItem name={intl.formatMessage(messages.thirdPartyServices)} className={featureClassName} />
+        <FeatureItem name={intl.formatMessage(messages.serviceProxies)} className={featureClassName} />
+        <FeatureItem name={intl.formatMessage(messages.teamManagement)} className={featureClassName} />
+        <FeatureItem name={intl.formatMessage(messages.appDelays)} className={featureClassName} />
+        <FeatureItem name={intl.formatMessage(messages.adFree)} className={featureClassName} />
+      </ul>
+    );
+  }
+}
+
+export default FeatureList;
diff --git a/src/components/ui/Modal/index.js b/src/components/ui/Modal/index.js
index 0b7154760..63d858c47 100644
--- a/src/components/ui/Modal/index.js
+++ b/src/components/ui/Modal/index.js
@@ -5,6 +5,7 @@ import classnames from 'classnames';
 import injectCSS from 'react-jss';
 import { Icon } from '@meetfranz/ui';
 
+import { mdiClose } from '@mdi/js';
 import styles from './styles';
 
 // ReactModal.setAppElement('#root');
@@ -59,7 +60,7 @@ export default @injectCSS(styles) class Modal extends Component {
             className={classes.close}
             onClick={close}
           >
-            <Icon icon="mdiClose" size={1.5} />
+            <Icon icon={mdiClose} size={1.5} />
           </button>
         )}
         <div className={classes.content}>
diff --git a/src/components/ui/PremiumFeatureContainer/index.js b/src/components/ui/PremiumFeatureContainer/index.js
index 3c1e0fac3..8d2746e22 100644
--- a/src/components/ui/PremiumFeatureContainer/index.js
+++ b/src/components/ui/PremiumFeatureContainer/index.js
@@ -10,6 +10,7 @@ import UserStore from '../../../stores/UserStore';
 
 import styles from './styles';
 import { gaEvent } from '../../../lib/analytics';
+import { FeatureStore } from '../../../features/utils/FeatureStore';
 
 const messages = defineMessages({
   action: {
@@ -22,7 +23,10 @@ const messages = defineMessages({
 class PremiumFeatureContainer extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
-    condition: PropTypes.bool,
+    condition: PropTypes.oneOfType([
+      PropTypes.bool,
+      PropTypes.func,
+    ]),
     gaEventInfo: PropTypes.shape({
       category: PropTypes.string.isRequired,
       event: PropTypes.string.isRequired,
@@ -31,7 +35,7 @@ class PremiumFeatureContainer extends Component {
   };
 
   static defaultProps = {
-    condition: true,
+    condition: null,
     gaEventInfo: null,
   };
 
@@ -51,7 +55,18 @@ class PremiumFeatureContainer extends Component {
 
     const { intl } = this.context;
 
-    return !stores.user.data.isPremium && !!condition ? (
+    let showWrapper = !!condition;
+
+    if (condition === null) {
+      showWrapper = !stores.user.data.isPremium;
+    } else if (typeof condition === 'function') {
+      showWrapper = condition({
+        isPremium: stores.user.data.isPremium,
+        features: stores.features.features,
+      });
+    }
+
+    return showWrapper ? (
       <div className={classes.container}>
         <div className={classes.titleContainer}>
           <p className={classes.title}>Premium Feature</p>
@@ -81,6 +96,7 @@ PremiumFeatureContainer.wrappedComponent.propTypes = {
   children: oneOrManyChildElements.isRequired,
   stores: PropTypes.shape({
     user: PropTypes.instanceOf(UserStore).isRequired,
+    features: PropTypes.instanceOf(FeatureStore).isRequired,
   }).isRequired,
   actions: PropTypes.shape({
     ui: PropTypes.shape({
diff --git a/src/config.js b/src/config.js
index 471f8d5a6..fba739ddd 100644
--- a/src/config.js
+++ b/src/config.js
@@ -19,7 +19,8 @@ export const DEV_WS_API = 'wss://dev.franzinfra.com';
 export const LIVE_WS_API = 'wss://api.franzinfra.com';
 
 export const LOCAL_API_WEBSITE = 'http://localhost:3333';
-export const DEV_API_WEBSITE = 'https://meetfranz.com';
+// export const DEV_API_WEBSITE = 'https://meetfranz.com';t
+export const DEV_API_WEBSITE = 'http://hash-3ac3ccd2472269cf585c58a4f6973d86f3c9e7bd.franzstaging.com/'; // TODO: revert me
 export const LIVE_API_WEBSITE = 'https://meetfranz.com';
 
 export const STATS_API = 'https://stats.franzinfra.com';
@@ -49,16 +50,16 @@ export const DEFAULT_APP_SETTINGS = {
 };
 
 export const DEFAULT_FEATURES_CONFIG = {
-  isSpellcheckerPremiumFeature: false,
+  isSpellcheckerIncludedInCurrentPlan: true,
   needToWaitToProceed: false,
   needToWaitToProceedConfig: {
     delayOffset: ms('1h'),
     wait: ms('10s'),
   },
   isServiceProxyEnabled: false,
-  isServiceProxyPremiumFeature: true,
+  isServiceProxyIncludedInCurrentPlan: false,
   isAnnouncementsEnabled: true,
-  isWorkspacePremiumFeature: true,
+  isWorkspaceIncludedInCurrentPlan: true,
   isWorkspaceEnabled: false,
 };
 
@@ -71,6 +72,7 @@ export const DEFAULT_WINDOW_OPTIONS = {
 
 export const FRANZ_SERVICE_REQUEST = 'https://bit.ly/franz-plugin-docs';
 export const FRANZ_TRANSLATION = 'https://bit.ly/franz-translate';
+export const FRANZ_DEV_DOCS = 'http://bit.ly/franz-dev-hub';
 
 export const FILE_SYSTEM_SETTINGS_TYPES = [
   'app',
@@ -87,3 +89,25 @@ export const ALLOWED_PROTOCOLS = [
   'http:',
   'ftp:',
 ];
+
+export const PLANS = {
+  PERSONAL: 'PERSONAL',
+  PRO: 'PRO',
+  LEGACY: 'LEGACY',
+  FREE: 'FREE',
+};
+
+export const PLANS_MAPPING = {
+  'franz-personal-monthly': PLANS.PERSONAL,
+  'franz-personal-yearly': PLANS.PERSONAL,
+  'franz-pro-monthly': PLANS.PRO,
+  'franz-pro-yearly': PLANS.PRO,
+  'franz-supporter-license': PLANS.LEGACY,
+  'franz-supporter-license-x1': PLANS.LEGACY,
+  'franz-supporter-license-x2': PLANS.LEGACY,
+  'franz-supporter-license-year': PLANS.LEGACY,
+  'franz-supporter-license-year-x1': PLANS.LEGACY,
+  'franz-supporter-license-year-x2': PLANS.LEGACY,
+  'franz-supporter-license-year-2019': PLANS.LEGACY,
+  free: PLANS.FREE,
+};
diff --git a/src/containers/auth/PricingScreen.js b/src/containers/auth/PricingScreen.js
index 8d179a170..af1651931 100644
--- a/src/containers/auth/PricingScreen.js
+++ b/src/containers/auth/PricingScreen.js
@@ -5,7 +5,6 @@ import { RouterStore } from 'mobx-react-router';
 
 import Pricing from '../../components/auth/Pricing';
 import UserStore from '../../stores/UserStore';
-import PaymentStore from '../../stores/PaymentStore';
 
 import { globalError as globalErrorPropType } from '../../prop-types';
 
@@ -14,20 +13,40 @@ export default @inject('stores', 'actions') @observer class PricingScreen extend
     error: globalErrorPropType.isRequired,
   };
 
+  async submit() {
+    const {
+      actions,
+      stores,
+    } = this.props;
+
+    const { activateTrialRequest } = stores.user;
+    const { defaultTrialPlan } = stores.features.features;
+
+    actions.user.activateTrial({ planId: defaultTrialPlan });
+    await activateTrialRequest._promise;
+
+    if (!activateTrialRequest.isError) {
+      stores.router.push('/');
+      stores.user.hasCompletedSignup = true;
+    }
+  }
+
   render() {
-    const { actions, stores, error } = this.props;
+    const {
+      error,
+      stores,
+    } = this.props;
 
-    const nextStepRoute = stores.user.legacyServices.length ? stores.user.importRoute : stores.user.inviteRoute;
+    const { getUserInfoRequest, activateTrialRequest } = stores.user;
+    const { featuresRequest } = stores.features;
 
     return (
       <Pricing
-        donor={stores.user.data.donor || {}}
-        onSubmit={actions.user.signup}
-        onCloseSubscriptionWindow={() => this.props.stores.router.push(nextStepRoute)}
-        isLoading={stores.payment.plansRequest.isExecuting}
-        isLoadingUser={stores.user.getUserInfoRequest.isExecuting}
+        onSubmit={this.submit.bind(this)}
+        isLoadingRequiredData={(getUserInfoRequest.isExecuting || !getUserInfoRequest.wasExecuted) || (featuresRequest.isExecuting || !featuresRequest.wasExecuted)}
+        isActivatingTrial={activateTrialRequest.isExecuting}
+        trialActivationError={activateTrialRequest.isError}
         error={error}
-        skipAction={() => this.props.stores.router.push(nextStepRoute)}
       />
     );
   }
@@ -36,12 +55,11 @@ export default @inject('stores', 'actions') @observer class PricingScreen extend
 PricingScreen.wrappedComponent.propTypes = {
   actions: PropTypes.shape({
     user: PropTypes.shape({
-      signup: PropTypes.func.isRequired,
+      activateTrial: PropTypes.func.isRequired,
     }).isRequired,
   }).isRequired,
   stores: PropTypes.shape({
     user: PropTypes.instanceOf(UserStore).isRequired,
-    payment: PropTypes.instanceOf(PaymentStore).isRequired,
     router: PropTypes.instanceOf(RouterStore).isRequired,
   }).isRequired,
 };
diff --git a/src/containers/layout/AppLayoutContainer.js b/src/containers/layout/AppLayoutContainer.js
index cf3da71e8..a14a98554 100644
--- a/src/containers/layout/AppLayoutContainer.js
+++ b/src/containers/layout/AppLayoutContainer.js
@@ -10,6 +10,7 @@ import FeaturesStore from '../../stores/FeaturesStore';
 import UIStore from '../../stores/UIStore';
 import NewsStore from '../../stores/NewsStore';
 import SettingsStore from '../../stores/SettingsStore';
+import UserStore from '../../stores/UserStore';
 import RequestStore from '../../stores/RequestStore';
 import GlobalErrorStore from '../../stores/GlobalErrorStore';
 
@@ -39,6 +40,7 @@ export default @inject('stores', 'actions') @observer class AppLayoutContainer e
       settings,
       globalError,
       requests,
+      user,
     } = this.props.stores;
 
     const {
@@ -125,6 +127,8 @@ export default @inject('stores', 'actions') @observer class AppLayoutContainer e
         reload={reload}
         openSettings={openSettings}
         update={updateService}
+        userHasCompletedSignup={user.hasCompletedSignup}
+        hasActivatedTrial={user.hasActivatedTrial}
       />
     );
 
@@ -149,6 +153,7 @@ export default @inject('stores', 'actions') @observer class AppLayoutContainer e
           retryRequiredRequests={retryRequiredRequests}
           areRequiredRequestsLoading={requests.areRequiredRequestsLoading}
           isDelayAppScreenVisible={delayAppState.isDelayAppScreenVisible}
+          hasActivatedTrial={user.hasActivatedTrial}
         >
           {React.Children.count(children) > 0 ? children : null}
         </AppLayout>
@@ -166,6 +171,7 @@ AppLayoutContainer.wrappedComponent.propTypes = {
     ui: PropTypes.instanceOf(UIStore).isRequired,
     news: PropTypes.instanceOf(NewsStore).isRequired,
     settings: PropTypes.instanceOf(SettingsStore).isRequired,
+    user: PropTypes.instanceOf(UserStore).isRequired,
     requests: PropTypes.instanceOf(RequestStore).isRequired,
     globalError: PropTypes.instanceOf(GlobalErrorStore).isRequired,
   }).isRequired,
diff --git a/src/containers/settings/AccountScreen.js b/src/containers/settings/AccountScreen.js
index 66076504f..2b5eba91c 100644
--- a/src/containers/settings/AccountScreen.js
+++ b/src/containers/settings/AccountScreen.js
@@ -26,7 +26,7 @@ export default @inject('stores', 'actions') @observer class AccountScreen extend
   handleWebsiteLink(route) {
     const { actions, stores } = this.props;
 
-    const url = `${WEBSITE}${route}?authToken=${stores.user.authToken}&utm_source=app&utm_medium=account_dashboard`;
+    const url = stores.user.getAuthURL(`${WEBSITE}${route}?utm_source=app&utm_medium=account_dashboard`);
 
     actions.app.openExternalUrl({ url });
   }
@@ -42,6 +42,7 @@ export default @inject('stores', 'actions') @observer class AccountScreen extend
       <ErrorBoundary>
         <AccountDashboard
           user={user.data}
+          isProUser={user.isPro}
           isLoading={isLoadingUserInfo}
           isLoadingPlans={isLoadingPlans}
           userInfoRequestFailed={user.getUserInfoRequest.wasExecuted && user.getUserInfoRequest.isError}
@@ -51,6 +52,7 @@ export default @inject('stores', 'actions') @observer class AccountScreen extend
           isLoadingDeleteAccount={user.deleteAccountRequest.isExecuting}
           isDeleteAccountSuccessful={user.deleteAccountRequest.wasExecuted && !user.deleteAccountRequest.isError}
           openEditAccount={() => this.handleWebsiteLink('/user/profile')}
+          upgradeToPro={() => this.handleWebsiteLink('/inapp/user/licenses')}
           openBilling={() => this.handleWebsiteLink('/user/billing')}
           openInvoices={() => this.handleWebsiteLink('/user/invoices')}
         />
diff --git a/src/containers/settings/EditServiceScreen.js b/src/containers/settings/EditServiceScreen.js
index 870ca4ecd..e4ff03bb3 100644
--- a/src/containers/settings/EditServiceScreen.js
+++ b/src/containers/settings/EditServiceScreen.js
@@ -330,8 +330,8 @@ export default @inject('stores', 'actions') @observer class EditServiceScreen ex
           onSubmit={d => this.onSubmit(d)}
           onDelete={() => this.deleteService()}
           isProxyFeatureEnabled={proxyFeature.isEnabled}
-          isProxyPremiumFeature={proxyFeature.isPremium}
-          isSpellcheckerPremiumFeature={spellcheckerFeature.isPremium}
+          isServiceProxyIncludedInCurrentPlan={proxyFeature.isIncludedInCurrentPlan}
+          isSpellcheckerIncludedInCurrentPlan={spellcheckerFeature.isIncludedInCurrentPlan}
         />
       </ErrorBoundary>
     );
diff --git a/src/containers/settings/EditSettingsScreen.js b/src/containers/settings/EditSettingsScreen.js
index 97c1fa3b1..67d52f102 100644
--- a/src/containers/settings/EditSettingsScreen.js
+++ b/src/containers/settings/EditSettingsScreen.js
@@ -159,8 +159,8 @@ export default @inject('stores', 'actions') @observer class EditSettingsScreen e
         },
         enableSpellchecking: {
           label: intl.formatMessage(messages.enableSpellchecking),
-          value: !this.props.stores.user.data.isPremium && spellcheckerConfig.isPremium ? false : settings.all.app.enableSpellchecking,
-          default: !this.props.stores.user.data.isPremium && spellcheckerConfig.isPremium ? false : DEFAULT_APP_SETTINGS.enableSpellchecking,
+          value: !this.props.stores.user.data.isPremium && !spellcheckerConfig.isIncludedInCurrentPlan ? false : settings.all.app.enableSpellchecking,
+          default: !this.props.stores.user.data.isPremium && !spellcheckerConfig.isIncludedInCurrentPlan ? false : DEFAULT_APP_SETTINGS.enableSpellchecking,
         },
         spellcheckerLanguage: {
           label: intl.formatMessage(globalMessages.spellcheckerLanguage),
@@ -223,7 +223,7 @@ export default @inject('stores', 'actions') @observer class EditSettingsScreen e
           cacheSize={cacheSize}
           isClearingAllCache={isClearingAllCache}
           onClearAllCache={clearAllCache}
-          isSpellcheckerPremiumFeature={spellcheckerConfig.isPremium}
+          isSpellcheckerIncludedInCurrentPlan={spellcheckerConfig.isIncludedInCurrentPlan}
         />
       </ErrorBoundary>
     );
diff --git a/src/containers/settings/RecipesScreen.js b/src/containers/settings/RecipesScreen.js
index eda5ae54c..132820b6f 100644
--- a/src/containers/settings/RecipesScreen.js
+++ b/src/containers/settings/RecipesScreen.js
@@ -1,7 +1,9 @@
+import { remote, shell } from 'electron';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { autorun } from 'mobx';
 import { inject, observer } from 'mobx-react';
+import path from 'path';
 
 import RecipePreviewsStore from '../../stores/RecipePreviewsStore';
 import RecipeStore from '../../stores/RecipesStore';
@@ -10,6 +12,11 @@ import UserStore from '../../stores/UserStore';
 
 import RecipesDashboard from '../../components/settings/recipes/RecipesDashboard';
 import ErrorBoundary from '../../components/util/ErrorBoundary';
+import { FRANZ_DEV_DOCS } from '../../config';
+import { gaEvent } from '../../lib/analytics';
+import { communityRecipesStore } from '../../features/communityRecipes';
+
+const { app } = remote;
 
 export default @inject('stores', 'actions') @observer class RecipesScreen extends Component {
   static propTypes = {
@@ -67,9 +74,16 @@ export default @inject('stores', 'actions') @observer class RecipesScreen extend
 
   render() {
     const {
-      recipePreviews, recipes, services, user,
+      recipePreviews,
+      recipes,
+      services,
+      user,
     } = this.props.stores;
-    const { showAddServiceInterface } = this.props.actions.service;
+
+    const {
+      app: appActions,
+      service: serviceActions,
+    } = this.props.actions;
 
     const { filter } = this.props.params;
     let recipeFilter;
@@ -77,7 +91,7 @@ export default @inject('stores', 'actions') @observer class RecipesScreen extend
     if (filter === 'all') {
       recipeFilter = recipePreviews.all;
     } else if (filter === 'dev') {
-      recipeFilter = recipePreviews.dev;
+      recipeFilter = communityRecipesStore.communityRecipes;
     } else {
       recipeFilter = recipePreviews.featured;
     }
@@ -89,6 +103,8 @@ export default @inject('stores', 'actions') @observer class RecipesScreen extend
       || recipes.installRecipeRequest.isExecuting
       || recipePreviews.searchRecipePreviewsRequest.isExecuting;
 
+    const recipeDirectory = path.join(app.getPath('userData'), 'recipes', 'dev');
+
     return (
       <ErrorBoundary>
         <RecipesDashboard
@@ -97,12 +113,23 @@ export default @inject('stores', 'actions') @observer class RecipesScreen extend
           addedServiceCount={services.all.length}
           isPremium={user.data.isPremium}
           hasLoadedRecipes={recipePreviews.featuredRecipePreviewsRequest.wasExecuted}
-          showAddServiceInterface={showAddServiceInterface}
+          showAddServiceInterface={serviceActions.showAddServiceInterface}
           searchRecipes={e => this.searchRecipes(e)}
           resetSearch={() => this.resetSearch()}
           searchNeedle={this.state.needle}
           serviceStatus={services.actionStatus}
-          devRecipesCount={recipePreviews.dev.length}
+          recipeFilter={filter}
+          recipeDirectory={recipeDirectory}
+          openRecipeDirectory={() => {
+            shell.openItem(recipeDirectory);
+            gaEvent('Recipe', 'open-recipe-folder', 'Open Folder');
+          }}
+          openDevDocs={() => {
+            appActions.openExternalUrl({ url: FRANZ_DEV_DOCS });
+            gaEvent('Recipe', 'open-dev-docs', 'Developer Documentation');
+          }}
+          isCommunityRecipesIncludedInCurrentPlan={communityRecipesStore.isCommunityRecipesIncludedInCurrentPlan}
+          isUserPremiumUser={user.isPremium}
         />
       </ErrorBoundary>
     );
@@ -117,6 +144,9 @@ RecipesScreen.wrappedComponent.propTypes = {
     user: PropTypes.instanceOf(UserStore).isRequired,
   }).isRequired,
   actions: PropTypes.shape({
+    app: PropTypes.shape({
+      openExternalUrl: PropTypes.func.isRequired,
+    }).isRequired,
     service: PropTypes.shape({
       showAddServiceInterface: PropTypes.func.isRequired,
     }).isRequired,
diff --git a/src/containers/settings/TeamScreen.js b/src/containers/settings/TeamScreen.js
index c69d5ad08..b7b1b78cb 100644
--- a/src/containers/settings/TeamScreen.js
+++ b/src/containers/settings/TeamScreen.js
@@ -14,7 +14,6 @@ export default @inject('stores', 'actions') @observer class TeamScreen extends C
     const { actions, stores } = this.props;
 
     const url = `${WEBSITE}${route}?authToken=${stores.user.authToken}&utm_source=app&utm_medium=account_dashboard`;
-    console.log(url);
 
     actions.app.openExternalUrl({ url });
   }
diff --git a/src/containers/subscription/SubscriptionFormScreen.js b/src/containers/subscription/SubscriptionFormScreen.js
index aa1166f5e..e9e457084 100644
--- a/src/containers/subscription/SubscriptionFormScreen.js
+++ b/src/containers/subscription/SubscriptionFormScreen.js
@@ -1,4 +1,3 @@
-import { remote } from 'electron';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
@@ -6,96 +5,50 @@ import { inject, observer } from 'mobx-react';
 import PaymentStore from '../../stores/PaymentStore';
 
 import SubscriptionForm from '../../components/subscription/SubscriptionForm';
-
-const { BrowserWindow } = remote;
+import TrialForm from '../../components/subscription/TrialForm';
 
 export default @inject('stores', 'actions') @observer class SubscriptionFormScreen extends Component {
-  static propTypes = {
-    onCloseWindow: PropTypes.func,
-    content: PropTypes.node,
-    showSkipOption: PropTypes.bool,
-    skipAction: PropTypes.func,
-    skipButtonLabel: PropTypes.string,
-    hideInfo: PropTypes.bool,
-  }
-
-  static defaultProps = {
-    onCloseWindow: () => null,
-    content: '',
-    showSkipOption: false,
-    skipAction: () => null,
-    skipButtonLabel: '',
-    hideInfo: false,
-  }
-
-  async handlePayment(plan) {
+  async openBrowser() {
     const {
       actions,
       stores,
-      onCloseWindow,
     } = this.props;
 
-    const interval = plan;
-
-    const { id } = stores.payment.plan[interval];
-    actions.payment.createHostedPage({
-      planId: id,
-    });
-
-    const hostedPage = await stores.payment.createHostedPageRequest;
+    const {
+      user,
+      features,
+    } = stores;
 
-    if (hostedPage.url) {
-      if (hostedPage.legacyCheckoutFlow) {
-        const paymentWindow = new BrowserWindow({
-          parent: remote.getCurrentWindow(),
-          modal: true,
-          title: '🔒 Franz Supporter License',
-          width: 600,
-          height: window.innerHeight - 100,
-          maxWidth: 600,
-          minWidth: 600,
-          webPreferences: {
-            nodeIntegration: true,
-            webviewTag: true,
-          },
-        });
-        paymentWindow.loadURL(`file://${__dirname}/../../index.html#/payment/${encodeURIComponent(hostedPage.url)}`);
+    let hostedPageURL = !user.data.hadSubscription ? features.features.planSelectionURL : features.features.subscribeURL;
+    hostedPageURL = user.getAuthURL(hostedPageURL);
 
-        paymentWindow.on('closed', () => {
-          onCloseWindow();
-        });
-      } else {
-        actions.app.openExternalUrl({
-          url: hostedPage.url,
-        });
-      }
-    }
+    actions.app.openExternalUrl({ url: hostedPageURL });
   }
 
   render() {
     const {
-      content,
       actions,
       stores,
-      showSkipOption,
-      skipAction,
-      skipButtonLabel,
-      hideInfo,
     } = this.props;
+
+    const { data: user } = stores.user;
+
+    if (user.hadSubscription) {
+      return (
+        <SubscriptionForm
+          plan={stores.payment.plan}
+          selectPlan={() => this.openBrowser()}
+          isActivatingTrial={stores.user.activateTrialRequest.isExecuting || stores.user.getUserInfoRequest.isExecuting}
+        />
+      );
+    }
+
     return (
-      <SubscriptionForm
+      <TrialForm
         plan={stores.payment.plan}
-        isLoading={stores.payment.plansRequest.isExecuting}
-        retryPlanRequest={() => stores.payment.plansRequest.reload()}
-        isCreatingHostedPage={stores.payment.createHostedPageRequest.isExecuting}
-        handlePayment={price => this.handlePayment(price)}
-        content={content}
-        error={stores.payment.plansRequest.isError}
-        showSkipOption={showSkipOption}
-        skipAction={skipAction}
-        skipButtonLabel={skipButtonLabel}
-        hideInfo={hideInfo}
-        openExternalUrl={actions.app.openExternalUrl}
+        activateTrial={() => actions.user.activateTrial({ planId: stores.features.features.defaultTrialPlan })}
+        showAllOptions={() => this.openBrowser()}
+        isActivatingTrial={stores.user.activateTrialRequest.isExecuting || stores.user.getUserInfoRequest.isExecuting}
       />
     );
   }
diff --git a/src/containers/subscription/SubscriptionPopupScreen.js b/src/containers/subscription/SubscriptionPopupScreen.js
index f76d6c5a6..0de5a87c4 100644
--- a/src/containers/subscription/SubscriptionPopupScreen.js
+++ b/src/containers/subscription/SubscriptionPopupScreen.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 
 import SubscriptionPopup from '../../components/subscription/SubscriptionPopup';
+import { isDevMode } from '../../environment';
 
 
 export default @inject('stores', 'actions') @observer class SubscriptionPopupScreen extends Component {
@@ -13,7 +14,7 @@ export default @inject('stores', 'actions') @observer class SubscriptionPopupScr
   completeCheck(event) {
     const { url } = event;
 
-    if ((url.includes('recurly') && url.includes('confirmation')) || (url.includes('meetfranz') && url.includes('success'))) {
+    if ((url.includes('recurly') && url.includes('confirmation')) || ((url.includes('meetfranz') || isDevMode) && url.includes('success'))) {
       this.setState({
         complete: true,
       });
diff --git a/src/features/basicAuth/Component.js b/src/features/basicAuth/Component.js
index a8252acb7..ba9ae2273 100644
--- a/src/features/basicAuth/Component.js
+++ b/src/features/basicAuth/Component.js
@@ -27,7 +27,6 @@ export default @injectSheet(styles) @observer class BasicAuthModal extends Compo
     e.preventDefault();
 
     const values = Form.values();
-    console.log('form submit', values);
 
     sendCredentials(values.user, values.password);
     resetState();
diff --git a/src/features/communityRecipes/index.js b/src/features/communityRecipes/index.js
new file mode 100644
index 000000000..4d050f90e
--- /dev/null
+++ b/src/features/communityRecipes/index.js
@@ -0,0 +1,28 @@
+import { reaction } from 'mobx';
+import { CommunityRecipesStore } from './store';
+
+const debug = require('debug')('Franz:feature:communityRecipes');
+
+export const DEFAULT_SERVICE_LIMIT = 3;
+
+export const communityRecipesStore = new CommunityRecipesStore();
+
+export default function initCommunityRecipes(stores, actions) {
+  const { features } = stores;
+
+  communityRecipesStore.start(stores, actions);
+
+  // Toggle communityRecipe premium status
+  reaction(
+    () => (
+      features.features.isCommunityRecipesIncludedInCurrentPlan
+    ),
+    (isPremiumFeature) => {
+      debug('Community recipes is premium feature: ', isPremiumFeature);
+      communityRecipesStore.isCommunityRecipesIncludedInCurrentPlan = isPremiumFeature;
+    },
+    {
+      fireImmediately: true,
+    },
+  );
+}
diff --git a/src/features/communityRecipes/store.js b/src/features/communityRecipes/store.js
new file mode 100644
index 000000000..4d45c3b33
--- /dev/null
+++ b/src/features/communityRecipes/store.js
@@ -0,0 +1,31 @@
+import { computed, observable } from 'mobx';
+import { FeatureStore } from '../utils/FeatureStore';
+
+const debug = require('debug')('Franz:feature:communityRecipes:store');
+
+export class CommunityRecipesStore extends FeatureStore {
+  @observable isCommunityRecipesIncludedInCurrentPlan = false;
+
+  start(stores, actions) {
+    debug('start');
+    this.stores = stores;
+    this.actions = actions;
+  }
+
+  stop() {
+    debug('stop');
+    super.stop();
+  }
+
+  @computed get communityRecipes() {
+    if (!this.stores) return [];
+
+    return this.stores.recipePreviews.dev.map((r) => {
+      r.isDevRecipe = !!r.author.find(a => a.email === this.stores.user.data.email);
+
+      return r;
+    });
+  }
+}
+
+export default CommunityRecipesStore;
diff --git a/src/features/delayApp/Component.js b/src/features/delayApp/Component.js
index ff0f1f2f8..de5653f04 100644
--- a/src/features/delayApp/Component.js
+++ b/src/features/delayApp/Component.js
@@ -4,29 +4,39 @@ import { inject, observer } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
 import injectSheet from 'react-jss';
 
+import { Button } from '@meetfranz/forms';
 import { gaEvent } from '../../lib/analytics';
 
-import Button from '../../components/ui/Button';
+// import Button from '../../components/ui/Button';
 
 import { config } from '.';
 import styles from './styles';
+import UserStore from '../../stores/UserStore';
 
 const messages = defineMessages({
   headline: {
     id: 'feature.delayApp.headline',
     defaultMessage: '!!!Please purchase license to skip waiting',
   },
+  headlineTrial: {
+    id: 'feature.delayApp.trial.headline',
+    defaultMessage: '!!!Get the free Franz Professional 14 day trial and skip the line',
+  },
   action: {
-    id: 'feature.delayApp.action',
+    id: 'feature.delayApp.upgrade.action',
     defaultMessage: '!!!Get a Franz Supporter License',
   },
+  actionTrial: {
+    id: 'feature.delayApp.trial.action',
+    defaultMessage: '!!!Yes, I want the free 14 day trial of Franz Professional',
+  },
   text: {
     id: 'feature.delayApp.text',
     defaultMessage: '!!!Franz will continue in {seconds} seconds.',
   },
 });
 
-export default @inject('actions') @injectSheet(styles) @observer class DelayApp extends Component {
+export default @inject('stores', 'actions') @injectSheet(styles) @observer class DelayApp extends Component {
   static propTypes = {
     // eslint-disable-next-line
     classes: PropTypes.object.isRequired,
@@ -62,25 +72,37 @@ export default @inject('actions') @injectSheet(styles) @observer class DelayApp
   }
 
   handleCTAClick() {
-    const { actions } = this.props;
+    const { actions, stores } = this.props;
+    const { hadSubscription } = stores.user.data;
+    const { defaultTrialPlan } = stores.features.features;
+
+    if (!hadSubscription) {
+      console.log('directly activate trial');
+      actions.user.activateTrial({ planId: defaultTrialPlan });
 
-    actions.ui.openSettings({ path: 'user' });
+      gaEvent('DelayApp', 'subscribe_click', 'Delay App Feature');
+    } else {
+      actions.ui.openSettings({ path: 'user' });
 
-    gaEvent('DelayApp', 'subscribe_click', 'Delay App Feature');
+      gaEvent('DelayApp', 'subscribe_click', 'Delay App Feature');
+    }
   }
 
   render() {
-    const { classes } = this.props;
+    const { classes, stores } = this.props;
     const { intl } = this.context;
 
+    const { hadSubscription } = stores.user.data;
+
     return (
       <div className={`${classes.container}`}>
-        <h1 className={classes.headline}>{intl.formatMessage(messages.headline)}</h1>
+        <h1 className={classes.headline}>{intl.formatMessage(hadSubscription ? messages.headline : messages.headlineTrial)}</h1>
         <Button
-          label={intl.formatMessage(messages.action)}
+          label={intl.formatMessage(hadSubscription ? messages.action : messages.actionTrial)}
           className={classes.button}
           buttonType="inverted"
           onClick={this.handleCTAClick.bind(this)}
+          busy={stores.user.activateTrialRequest.isExecuting}
         />
         <p className="footnote">
           {intl.formatMessage(messages.text, {
@@ -93,6 +115,9 @@ export default @inject('actions') @injectSheet(styles) @observer class DelayApp
 }
 
 DelayApp.wrappedComponent.propTypes = {
+  stores: PropTypes.shape({
+    user: PropTypes.instanceOf(UserStore).isRequired,
+  }).isRequired,
   actions: PropTypes.shape({
     ui: PropTypes.shape({
       openSettings: PropTypes.func.isRequired,
diff --git a/src/features/delayApp/index.js b/src/features/delayApp/index.js
index 39fae3b20..627537de7 100644
--- a/src/features/delayApp/index.js
+++ b/src/features/delayApp/index.js
@@ -44,7 +44,7 @@ export default function init(stores) {
         config.delayDuration = globalConfig.wait !== undefined ? globalConfig.wait : DEFAULT_FEATURES_CONFIG.needToWaitToProceedConfig.wait;
 
         autorun(() => {
-          if (stores.services.all.length === 0) {
+          if (stores.services.allDisplayed.length === 0) {
             debug('seas', stores.services.all.length);
             shownAfterLaunch = true;
             return;
diff --git a/src/features/serviceLimit/components/LimitReachedInfobox.js b/src/features/serviceLimit/components/LimitReachedInfobox.js
new file mode 100644
index 000000000..fc54dcf85
--- /dev/null
+++ b/src/features/serviceLimit/components/LimitReachedInfobox.js
@@ -0,0 +1,78 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { inject, observer } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+import injectSheet from 'react-jss';
+import { Infobox } from '@meetfranz/ui';
+
+import { gaEvent } from '../../../lib/analytics';
+
+const messages = defineMessages({
+  limitReached: {
+    id: 'feature.serviceLimit.limitReached',
+    defaultMessage: '!!!You have added {amount} of {limit} services. Please upgrade your account to add more services.',
+  },
+  action: {
+    id: 'premiumFeature.button.upgradeAccount',
+    defaultMessage: '!!!Upgrade account',
+  },
+});
+
+const styles = theme => ({
+  container: {
+    height: 'auto',
+    background: theme.styleTypes.primary.accent,
+    color: theme.styleTypes.primary.contrast,
+    borderRadius: 0,
+    marginBottom: 0,
+
+    '& > div': {
+      marginBottom: 0,
+    },
+
+    '& button': {
+      color: theme.styleTypes.primary.contrast,
+    },
+  },
+});
+
+
+@inject('stores', 'actions') @injectSheet(styles) @observer
+class LimitReachedInfobox extends Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    stores: PropTypes.object.isRequired,
+    actions: PropTypes.object.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  render() {
+    const { classes, stores, actions } = this.props;
+    const { intl } = this.context;
+
+    const {
+      serviceLimit,
+    } = stores;
+
+    if (!serviceLimit.userHasReachedServiceLimit) return null;
+
+    return (
+      <Infobox
+        icon="mdiInformation"
+        className={classes.container}
+        ctaLabel={intl.formatMessage(messages.action)}
+        ctaOnClick={() => {
+          actions.ui.openSettings({ path: 'user' });
+          gaEvent('Service Limit', 'upgrade', 'Upgrade account');
+        }}
+      >
+        {intl.formatMessage(messages.limitReached, { amount: serviceLimit.serviceCount, limit: serviceLimit.serviceLimit })}
+      </Infobox>
+    );
+  }
+}
+
+export default LimitReachedInfobox;
diff --git a/src/features/serviceLimit/index.js b/src/features/serviceLimit/index.js
new file mode 100644
index 000000000..92ad8bb98
--- /dev/null
+++ b/src/features/serviceLimit/index.js
@@ -0,0 +1,33 @@
+import { reaction } from 'mobx';
+import { ServiceLimitStore } from './store';
+
+const debug = require('debug')('Franz:feature:serviceLimit');
+
+export const DEFAULT_SERVICE_LIMIT = 3;
+
+let store = null;
+
+export const serviceLimitStore = new ServiceLimitStore();
+
+export default function initServiceLimit(stores, actions) {
+  const { features } = stores;
+
+  // Toggle serviceLimit feature
+  reaction(
+    () => (
+      features.features.isServiceLimitEnabled
+    ),
+    (isEnabled) => {
+      if (isEnabled) {
+        debug('Initializing `serviceLimit` feature');
+        store = serviceLimitStore.start(stores, actions);
+      } else if (store) {
+        debug('Disabling `serviceLimit` feature');
+        serviceLimitStore.stop();
+      }
+    },
+    {
+      fireImmediately: true,
+    },
+  );
+}
diff --git a/src/features/serviceLimit/store.js b/src/features/serviceLimit/store.js
new file mode 100644
index 000000000..9836c5f51
--- /dev/null
+++ b/src/features/serviceLimit/store.js
@@ -0,0 +1,41 @@
+import { computed, observable } from 'mobx';
+import { FeatureStore } from '../utils/FeatureStore';
+import { DEFAULT_SERVICE_LIMIT } from '.';
+
+const debug = require('debug')('Franz:feature:serviceLimit:store');
+
+export class ServiceLimitStore extends FeatureStore {
+  @observable isServiceLimitEnabled = false;
+
+  start(stores, actions) {
+    debug('start');
+    this.stores = stores;
+    this.actions = actions;
+
+    this.isServiceLimitEnabled = true;
+  }
+
+  stop() {
+    super.stop();
+
+    this.isServiceLimitEnabled = false;
+  }
+
+  @computed get userHasReachedServiceLimit() {
+    if (!this.isServiceLimitEnabled) return false;
+
+    return this.serviceLimit !== 0 && this.serviceCount >= this.serviceLimit;
+  }
+
+  @computed get serviceLimit() {
+    if (!this.isServiceLimitEnabled || this.stores.features.features.serviceLimitCount === 0) return 0;
+
+    return this.stores.features.features.serviceLimitCount || DEFAULT_SERVICE_LIMIT;
+  }
+
+  @computed get serviceCount() {
+    return this.stores.services.all.length;
+  }
+}
+
+export default ServiceLimitStore;
diff --git a/src/features/serviceProxy/index.js b/src/features/serviceProxy/index.js
index 4bea327ad..55c600de4 100644
--- a/src/features/serviceProxy/index.js
+++ b/src/features/serviceProxy/index.js
@@ -9,17 +9,17 @@ const debug = require('debug')('Franz:feature:serviceProxy');
 
 export const config = observable({
   isEnabled: DEFAULT_FEATURES_CONFIG.isServiceProxyEnabled,
-  isPremium: DEFAULT_FEATURES_CONFIG.isServiceProxyPremiumFeature,
+  isPremium: DEFAULT_FEATURES_CONFIG.isServiceProxyIncludedInCurrentPlan,
 });
 
 export default function init(stores) {
   debug('Initializing `serviceProxy` feature');
 
   autorun(() => {
-    const { isServiceProxyEnabled, isServiceProxyPremiumFeature } = stores.features.features;
+    const { isServiceProxyEnabled, isServiceProxyIncludedInCurrentPlan } = stores.features.features;
 
     config.isEnabled = isServiceProxyEnabled !== undefined ? isServiceProxyEnabled : DEFAULT_FEATURES_CONFIG.isServiceProxyEnabled;
-    config.isPremium = isServiceProxyPremiumFeature !== undefined ? isServiceProxyPremiumFeature : DEFAULT_FEATURES_CONFIG.isServiceProxyPremiumFeature;
+    config.isIncludedInCurrentPlan = isServiceProxyIncludedInCurrentPlan !== undefined ? isServiceProxyIncludedInCurrentPlan : DEFAULT_FEATURES_CONFIG.isServiceProxyIncludedInCurrentPlan;
 
     const services = stores.services.enabled;
     const isPremiumUser = stores.user.data.isPremium;
@@ -30,7 +30,7 @@ export default function init(stores) {
     services.forEach((service) => {
       const s = session.fromPartition(`persist:service-${service.id}`);
 
-      if (config.isEnabled && (isPremiumUser || !config.isPremium)) {
+      if (config.isEnabled && (isPremiumUser || !config.isIncludedInCurrentPlan)) {
         const serviceProxyConfig = proxySettings[service.id];
 
         if (serviceProxyConfig && serviceProxyConfig.isEnabled && serviceProxyConfig.host) {
diff --git a/src/features/shareFranz/Component.js b/src/features/shareFranz/Component.js
index 8d1d595c5..a33315e17 100644
--- a/src/features/shareFranz/Component.js
+++ b/src/features/shareFranz/Component.js
@@ -6,6 +6,9 @@ import { defineMessages, intlShape } from 'react-intl';
 import { Button } from '@meetfranz/forms';
 import { H1, Icon } from '@meetfranz/ui';
 
+import {
+  mdiHeart, mdiEmail, mdiFacebookBox, mdiTwitter,
+} from '@mdi/js';
 import Modal from '../../components/ui/Modal';
 import { state } from '.';
 import { gaEvent } from '../../lib/analytics';
@@ -75,7 +78,7 @@ const styles = theme => ({
   },
   cta: {
     background: theme.styleTypes.primary.contrast,
-    color: theme.styleTypes.primary.accent,
+    color: `${theme.styleTypes.primary.accent} !important`,
 
     '& svg': {
       fill: theme.styleTypes.primary.accent,
@@ -116,7 +119,7 @@ export default @injectSheet(styles) @inject('stores') @observer class ShareFranz
         close={this.close.bind(this)}
       >
         <div className={classes.heartContainer}>
-          <Icon icon="mdiHeart" className={classes.heart} size={4} />
+          <Icon icon={mdiHeart} className={classes.heart} size={4} />
         </div>
         <H1 className={classes.headline}>
           {intl.formatMessage(messages.headline)}
@@ -126,7 +129,7 @@ export default @injectSheet(styles) @inject('stores') @observer class ShareFranz
           <Button
             label={intl.formatMessage(messages.actionsEmail)}
             className={classes.cta}
-            icon="mdiEmail"
+            icon={mdiEmail}
             href={`mailto:?subject=Meet the cool app Franz&body=${intl.formatMessage(messages.shareTextEmail, { count: serviceCount })}}`}
             target="_blank"
             onClick={() => {
@@ -136,7 +139,7 @@ export default @injectSheet(styles) @inject('stores') @observer class ShareFranz
           <Button
             label={intl.formatMessage(messages.actionsFacebook)}
             className={classes.cta}
-            icon="mdiFacebookBox"
+            icon={mdiFacebookBox}
             href="https://www.facebook.com/sharer/sharer.php?u=https://www.meetfranz.com?utm_source=facebook&utm_medium=referral&utm_campaign=share-button"
             target="_blank"
             onClick={() => {
@@ -146,7 +149,7 @@ export default @injectSheet(styles) @inject('stores') @observer class ShareFranz
           <Button
             label={intl.formatMessage(messages.actionsTwitter)}
             className={classes.cta}
-            icon="mdiTwitter"
+            icon={mdiTwitter}
             href={`http://twitter.com/intent/tweet?status=${intl.formatMessage(messages.shareTextTwitter, { count: serviceCount })}`}
             target="_blank"
             onClick={() => {
diff --git a/src/features/spellchecker/index.js b/src/features/spellchecker/index.js
index 79a2172b4..a07f9f63a 100644
--- a/src/features/spellchecker/index.js
+++ b/src/features/spellchecker/index.js
@@ -5,18 +5,18 @@ import { DEFAULT_FEATURES_CONFIG } from '../../config';
 const debug = require('debug')('Franz:feature:spellchecker');
 
 export const config = observable({
-  isPremium: DEFAULT_FEATURES_CONFIG.isSpellcheckerPremiumFeature,
+  isIncludedInCurrentPlan: DEFAULT_FEATURES_CONFIG.isSpellcheckerIncludedInCurrentPlan,
 });
 
 export default function init(stores) {
   debug('Initializing `spellchecker` feature');
 
   autorun(() => {
-    const { isSpellcheckerPremiumFeature } = stores.features.features;
+    const { isSpellcheckerIncludedInCurrentPlan } = stores.features.features;
 
-    config.isPremium = isSpellcheckerPremiumFeature !== undefined ? isSpellcheckerPremiumFeature : DEFAULT_FEATURES_CONFIG.isSpellcheckerPremiumFeature;
+    config.isIncludedInCurrentPlan = isSpellcheckerIncludedInCurrentPlan !== undefined ? isSpellcheckerIncludedInCurrentPlan : DEFAULT_FEATURES_CONFIG.isSpellcheckerIncludedInCurrentPlan;
 
-    if (!stores.user.data.isPremium && config.isPremium && stores.settings.app.enableSpellchecking) {
+    if (!stores.user.data.isPremium && config.isIncludedInCurrentPlan && stores.settings.app.enableSpellchecking) {
       debug('Override settings.spellcheckerEnabled flag to false');
 
       Object.assign(stores.settings.app, {
diff --git a/src/features/todos/components/TodosWebview.js b/src/features/todos/components/TodosWebview.js
index 9dd313109..143955a7b 100644
--- a/src/features/todos/components/TodosWebview.js
+++ b/src/features/todos/components/TodosWebview.js
@@ -4,12 +4,31 @@ import { observer } from 'mobx-react';
 import injectSheet from 'react-jss';
 import Webview from 'react-electron-web-view';
 import { Icon } from '@meetfranz/ui';
+import { defineMessages, intlShape } from 'react-intl';
 
+import { mdiChevronRight, mdiCheckAll } from '@mdi/js';
 import * as environment from '../../../environment';
+import Appear from '../../../components/ui/effects/Appear';
+import ActivateTrialButton from '../../../components/ui/ActivateTrialButton';
 
 const OPEN_TODOS_BUTTON_SIZE = 45;
 const CLOSE_TODOS_BUTTON_SIZE = 35;
 
+const messages = defineMessages({
+  premiumInfo: {
+    id: 'feature.todos.premium.info',
+    defaultMessage: '!!!The Franz Todos Preview is currently only available for Franz Premium accounts.',
+  },
+  upgradeCTA: {
+    id: 'feature.todos.premium.upgrade',
+    defaultMessage: '!!!Upgrade Account',
+  },
+  rolloutInfo: {
+    id: 'feature.todos.premium.rollout',
+    defaultMessage: '!!!Franz Todos will be available to everyone soon.',
+  },
+});
+
 const styles = theme => ({
   root: {
     background: theme.colorBackground,
@@ -47,7 +66,7 @@ const styles = theme => ({
     height: OPEN_TODOS_BUTTON_SIZE,
     background: theme.todos.toggleButton.background,
     position: 'absolute',
-    bottom: 80,
+    bottom: 120,
     right: props => (props.width + (props.isVisible ? -OPEN_TODOS_BUTTON_SIZE / 2 : 0)),
     borderRadius: OPEN_TODOS_BUTTON_SIZE / 2,
     opacity: props => (props.isVisible ? 0 : 1),
@@ -71,10 +90,10 @@ const styles = theme => ({
     height: CLOSE_TODOS_BUTTON_SIZE,
     background: theme.todos.toggleButton.background,
     position: 'absolute',
-    bottom: 80,
+    bottom: 120,
     right: ({ width }) => (width + -CLOSE_TODOS_BUTTON_SIZE / 2),
     borderRadius: CLOSE_TODOS_BUTTON_SIZE / 2,
-    opacity: 0,
+    opacity: ({ isTodosIncludedInCurrentPlan }) => (!isTodosIncludedInCurrentPlan ? 1 : 0),
     transition: 'opacity 0.5s',
     zIndex: 600,
     display: 'flex',
@@ -86,6 +105,26 @@ const styles = theme => ({
       fill: theme.todos.toggleButton.textColor,
     },
   },
+  premiumContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '80%',
+    maxWidth: 300,
+    margin: [-50, 'auto', 0],
+    textAlign: 'center',
+  },
+  premiumIcon: {
+    marginBottom: 40,
+    background: theme.styleTypes.primary.accent,
+    fill: theme.styleTypes.primary.contrast,
+    padding: 10,
+    borderRadius: 10,
+  },
+  premiumCTA: {
+    marginTop: 40,
+  },
 });
 
 @injectSheet(styles) @observer
@@ -99,6 +138,7 @@ class TodosWebview extends Component {
     resize: PropTypes.func.isRequired,
     width: PropTypes.number.isRequired,
     minWidth: PropTypes.number.isRequired,
+    isTodosIncludedInCurrentPlan: PropTypes.bool.isRequired,
   };
 
   state = {
@@ -106,6 +146,10 @@ class TodosWebview extends Component {
     width: 300,
   };
 
+  static contextTypes = {
+    intl: intlShape,
+  };
+
   componentWillMount() {
     const { width } = this.props;
 
@@ -182,9 +226,19 @@ class TodosWebview extends Component {
 
   render() {
     const {
-      classes, isVisible, togglePanel,
+      classes,
+      isVisible,
+      togglePanel,
+      isTodosIncludedInCurrentPlan,
     } = this.props;
-    const { width, delta, isDragging } = this.state;
+
+    const {
+      width,
+      delta,
+      isDragging,
+    } = this.state;
+
+    const { intl } = this.context;
 
     return (
       <div
@@ -198,7 +252,7 @@ class TodosWebview extends Component {
           className={isVisible ? classes.closeTodosButton : classes.openTodosButton}
           type="button"
         >
-          <Icon icon={isVisible ? 'mdiChevronRight' : 'mdiCheckAll'} size={2} />
+          <Icon icon={isVisible ? mdiChevronRight : mdiCheckAll} size={2} />
         </button>
         <div
           className={classes.resizeHandler}
@@ -211,18 +265,33 @@ class TodosWebview extends Component {
             style={{ left: delta }} // This hack is required as resizing with webviews beneath behaves quite bad
           />
         )}
-        <Webview
-          className={classes.webview}
-          onDidAttach={() => {
-            const { setTodosWebview } = this.props;
-            setTodosWebview(this.webview);
-            this.startListeningToIpcMessages();
-          }}
-          partition="persist:todos"
-          preload="./features/todos/preload.js"
-          ref={(webview) => { this.webview = webview ? webview.view : null; }}
-          src={environment.TODOS_FRONTEND}
-        />
+        {isTodosIncludedInCurrentPlan ? (
+          <Webview
+            className={classes.webview}
+            onDidAttach={() => {
+              const { setTodosWebview } = this.props;
+              setTodosWebview(this.webview);
+              this.startListeningToIpcMessages();
+            }}
+            partition="persist:todos"
+            preload="./features/todos/preload.js"
+            ref={(webview) => { this.webview = webview ? webview.view : null; }}
+            src={environment.TODOS_FRONTEND}
+          />
+        ) : (
+          <Appear>
+            <div className={classes.premiumContainer}>
+              <Icon icon={mdiCheckAll} className={classes.premiumIcon} size={5} />
+              <p>{intl.formatMessage(messages.premiumInfo)}</p>
+              <p>{intl.formatMessage(messages.rolloutInfo)}</p>
+              <ActivateTrialButton
+                className={classes.premiumCTA}
+                gaEventInfo={{ category: 'Todos', event: 'upgrade' }}
+                short
+              />
+            </div>
+          </Appear>
+        )}
       </div>
     );
   }
diff --git a/src/features/todos/containers/TodosScreen.js b/src/features/todos/containers/TodosScreen.js
index d071d0677..65afc985b 100644
--- a/src/features/todos/containers/TodosScreen.js
+++ b/src/features/todos/containers/TodosScreen.js
@@ -1,12 +1,14 @@
 import React, { Component } from 'react';
-import { observer } from 'mobx-react';
+import { observer, inject } from 'mobx-react';
+import PropTypes from 'prop-types';
 
+import FeaturesStore from '../../../stores/FeaturesStore';
 import TodosWebview from '../components/TodosWebview';
 import ErrorBoundary from '../../../components/util/ErrorBoundary';
 import { TODOS_MIN_WIDTH, todosStore } from '..';
 import { todoActions } from '../actions';
 
-@observer
+@inject('stores', 'actions') @observer
 class TodosScreen extends Component {
   render() {
     if (!todosStore || !todosStore.isFeatureActive) {
@@ -23,6 +25,7 @@ class TodosScreen extends Component {
           width={todosStore.width}
           minWidth={TODOS_MIN_WIDTH}
           resize={width => todoActions.resize({ width })}
+          isTodosIncludedInCurrentPlan={this.props.stores.features.features.isTodosIncludedInCurrentPlan || false}
         />
       </ErrorBoundary>
     );
@@ -30,3 +33,9 @@ class TodosScreen extends Component {
 }
 
 export default TodosScreen;
+
+TodosScreen.wrappedComponent.propTypes = {
+  stores: PropTypes.shape({
+    features: PropTypes.instanceOf(FeaturesStore).isRequired,
+  }).isRequired,
+};
diff --git a/src/features/todos/store.js b/src/features/todos/store.js
index 242b38bf7..170408ebb 100644
--- a/src/features/todos/store.js
+++ b/src/features/todos/store.js
@@ -12,6 +12,7 @@ import { createReactions } from '../../stores/lib/Reaction';
 import { createActionBindings } from '../utils/ActionBinding';
 import { DEFAULT_TODOS_WIDTH, TODOS_MIN_WIDTH, DEFAULT_TODOS_VISIBLE } from '.';
 import { IPC } from './constants';
+import { state as delayAppState } from '../delayApp';
 
 const debug = require('debug')('Franz:feature:todos:store');
 
@@ -29,6 +30,7 @@ export default class TodoStore extends FeatureStore {
   }
 
   @computed get isTodosPanelVisible() {
+    if (this.stores.services.all.length === 0 || delayAppState.isDelayAppScreenVisible) return false;
     if (this.settings.isTodosPanelVisible === undefined) return DEFAULT_TODOS_VISIBLE;
 
     return this.settings.isTodosPanelVisible;
diff --git a/src/features/workspaces/components/WorkspaceDrawer.js b/src/features/workspaces/components/WorkspaceDrawer.js
index 684e50dd0..e7bc0b157 100644
--- a/src/features/workspaces/components/WorkspaceDrawer.js
+++ b/src/features/workspaces/components/WorkspaceDrawer.js
@@ -7,6 +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 WorkspaceDrawerItem from './WorkspaceDrawerItem';
 import { workspaceActions } from '../actions';
 import { GA_CATEGORY_WORKSPACES, workspaceStore } from '../index';
@@ -159,7 +160,7 @@ class WorkspaceDrawer extends Component {
             data-tip={`${intl.formatMessage(messages.workspacesSettingsTooltip)}`}
           >
             <Icon
-              icon="mdiSettings"
+              icon={mdiSettings}
               size={1.5}
               className={classes.workspacesSettingsButtonIcon}
             />
@@ -184,7 +185,7 @@ class WorkspaceDrawer extends Component {
                 className={classes.premiumCtaButton}
                 buttonType="primary"
                 label={intl.formatMessage(messages.premiumCtaButtonLabel)}
-                icon="mdiPlusBox"
+                icon={mdiPlusBox}
                 onClick={() => {
                   workspaceActions.openWorkspaceSettings();
                   gaEvent(GA_CATEGORY_WORKSPACES, 'add', 'drawerPremiumCta');
@@ -227,7 +228,7 @@ class WorkspaceDrawer extends Component {
               }}
             >
               <Icon
-                icon="mdiPlusBox"
+                icon={mdiPlusBox}
                 size={1}
                 className={classes.workspacesSettingsButtonIcon}
               />
diff --git a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
index c4a800a7b..a70d1d66f 100644
--- a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
+++ b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
@@ -21,11 +21,8 @@ const styles = theme => ({
     alignItems: 'flex-start',
     position: 'absolute',
     transition: 'width 0.5s ease',
-    width: '100%',
-    marginTop: '20px',
-  },
-  wrapperWhenDrawerIsOpen: {
     width: `calc(100% - ${theme.workspaces.drawer.width}px)`,
+    marginTop: '20px',
   },
   component: {
     background: 'rgba(20, 20, 20, 0.4)',
@@ -64,14 +61,13 @@ class WorkspaceSwitchingIndicator extends Component {
   render() {
     const { classes, theme } = this.props;
     const { intl } = this.context;
-    const { isSwitchingWorkspace, isWorkspaceDrawerOpen, nextWorkspace } = workspaceStore;
+    const { isSwitchingWorkspace, nextWorkspace } = workspaceStore;
     if (!isSwitchingWorkspace) return null;
     const nextWorkspaceName = nextWorkspace ? nextWorkspace.name : 'All services';
     return (
       <div
         className={classnames([
           classes.wrapper,
-          isWorkspaceDrawerOpen ? classes.wrapperWhenDrawerIsOpen : null,
         ])}
       >
         <div className={classes.component}>
diff --git a/src/features/workspaces/components/WorkspacesDashboard.js b/src/features/workspaces/components/WorkspacesDashboard.js
index 09c98ab8c..059a681de 100644
--- a/src/features/workspaces/components/WorkspacesDashboard.js
+++ b/src/features/workspaces/components/WorkspacesDashboard.js
@@ -1,6 +1,6 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
+import { observer, PropTypes as MobxPropTypes, inject } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
 import injectSheet from 'react-jss';
 import { Infobox } from '@meetfranz/ui';
@@ -12,6 +12,8 @@ import Request from '../../../stores/lib/Request';
 import Appear from '../../../components/ui/effects/Appear';
 import { workspaceStore } from '../index';
 import PremiumFeatureContainer from '../../../components/ui/PremiumFeatureContainer';
+import UIStore from '../../../stores/UIStore';
+import ActivateTrialButton from '../../../components/ui/ActivateTrialButton';
 
 const messages = defineMessages({
   headline: {
@@ -62,17 +64,27 @@ const styles = theme => ({
     height: 'auto',
   },
   premiumAnnouncement: {
-    padding: '20px',
-    backgroundColor: '#3498db',
-    marginLeft: '-20px',
-    marginBottom: '20px',
+    padding: 20,
+    // backgroundColor: '#3498db',
+    marginLeft: -20,
+    marginBottom: 40,
+    paddingBottom: 40,
     height: 'auto',
-    color: 'white',
-    borderRadius: theme.borderRadius,
+    display: 'flex',
+    borderBottom: [1, 'solid', theme.inputBackground],
+  },
+  teaserImage: {
+    width: 200,
+    height: '100%',
+    float: 'left',
+    margin: [-8, 0, 0, -20],
+  },
+  upgradeCTA: {
+    marginTop: 20,
   },
 });
 
-@injectSheet(styles) @observer
+@inject('stores') @injectSheet(styles) @observer
 class WorkspacesDashboard extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
@@ -100,7 +112,9 @@ class WorkspacesDashboard extends Component {
       onWorkspaceClick,
       workspaces,
     } = this.props;
+
     const { intl } = this.context;
+
     return (
       <div className="settings__main">
         <div className="settings__header">
@@ -138,13 +152,21 @@ class WorkspacesDashboard extends Component {
 
           {workspaceStore.isPremiumUpgradeRequired && (
             <div className={classes.premiumAnnouncement}>
-              <h2>{intl.formatMessage(messages.workspaceFeatureHeadline)}</h2>
-              <p>{intl.formatMessage(messages.workspaceFeatureInfo)}</p>
+              <img src={`./assets/images/workspaces/teaser_${this.props.stores.ui.isDarkThemeActive ? 'dark' : 'light'}.png`} className={classes.teaserImage} alt="" />
+              <div>
+                <h2>{intl.formatMessage(messages.workspaceFeatureHeadline)}</h2>
+                <p>{intl.formatMessage(messages.workspaceFeatureInfo)}</p>
+                <ActivateTrialButton
+                  className={classes.upgradeCTA}
+                  gaEventInfo={{ category: 'Workspaces', event: 'upgrade' }}
+                  short
+                />
+              </div>
             </div>
           )}
 
           <PremiumFeatureContainer
-            condition={workspaceStore.isPremiumFeature}
+            condition={() => workspaceStore.isPremiumUpgradeRequired}
             gaEventInfo={{ category: 'User', event: 'upgrade', label: 'workspaces' }}
           >
             {/* ===== Create workspace form ===== */}
@@ -207,3 +229,9 @@ class WorkspacesDashboard extends Component {
 }
 
 export default WorkspacesDashboard;
+
+WorkspacesDashboard.wrappedComponent.propTypes = {
+  stores: PropTypes.shape({
+    ui: PropTypes.instanceOf(UIStore).isRequired,
+  }).isRequired,
+};
diff --git a/src/features/workspaces/store.js b/src/features/workspaces/store.js
index a82f6895c..4a1f80b4e 100644
--- a/src/features/workspaces/store.js
+++ b/src/features/workspaces/store.js
@@ -253,11 +253,10 @@ export default class WorkspacesStore extends FeatureStore {
   };
 
   _setIsPremiumFeatureReaction = () => {
-    const { features, user } = this.stores;
-    const { isPremium } = user.data;
-    const { isWorkspacePremiumFeature } = features.features;
-    this.isPremiumFeature = isWorkspacePremiumFeature;
-    this.isPremiumUpgradeRequired = isWorkspacePremiumFeature && !isPremium;
+    const { features } = this.stores;
+    const { isWorkspaceIncludedInCurrentPlan } = features.features;
+    this.isPremiumFeature = !isWorkspaceIncludedInCurrentPlan;
+    this.isPremiumUpgradeRequired = !isWorkspaceIncludedInCurrentPlan;
   };
 
   _setWorkspaceBeingEditedReaction = () => {
diff --git a/src/helpers/plan-helpers.js b/src/helpers/plan-helpers.js
new file mode 100644
index 000000000..e0f1fd89a
--- /dev/null
+++ b/src/helpers/plan-helpers.js
@@ -0,0 +1,45 @@
+import { defineMessages } from 'react-intl';
+import { PLANS_MAPPING, PLANS } from '../config';
+
+const messages = defineMessages({
+  [PLANS.PRO]: {
+    id: 'pricing.plan.pro',
+    defaultMessage: '!!!Franz Professional',
+  },
+  [PLANS.PERSONAL]: {
+    id: 'pricing.plan.personal',
+    defaultMessage: '!!!Franz Personal',
+  },
+  [PLANS.FREE]: {
+    id: 'pricing.plan.free',
+    defaultMessage: '!!!Franz Free',
+  },
+  [PLANS.LEGACY]: {
+    id: 'pricing.plan.legacy',
+    defaultMessage: '!!!Franz Premium',
+  },
+});
+
+export function i18nPlanName(planId, intl) {
+  if (!planId) {
+    throw new Error('planId is required');
+  }
+
+  if (!intl) {
+    throw new Error('intl context is required');
+  }
+
+  const plan = PLANS_MAPPING[planId];
+
+  return intl.formatMessage(messages[plan]);
+}
+
+export function getPlan(planId) {
+  if (!planId) {
+    throw new Error('planId is required');
+  }
+
+  const plan = PLANS_MAPPING[planId];
+
+  return plan;
+}
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index 5959fb059..367184c01 100644
--- a/src/i18n/locales/defaultMessages.json
+++ b/src/i18n/locales/defaultMessages.json
@@ -417,55 +417,120 @@
   {
     "descriptors": [
       {
-        "defaultMessage": "!!!Support Franz",
+        "defaultMessage": "!!!Franz Professional",
         "end": {
           "column": 3,
-          "line": 16
+          "line": 18
         },
         "file": "src/components/auth/Pricing.js",
-        "id": "pricing.headline",
+        "id": "pricing.trial.headline",
         "start": {
           "column": 12,
-          "line": 13
+          "line": 15
         }
       },
       {
-        "defaultMessage": "!!!Select your support plan",
+        "defaultMessage": "!!!Your personal welcome offer:",
         "end": {
           "column": 3,
-          "line": 20
+          "line": 22
         },
         "file": "src/components/auth/Pricing.js",
-        "id": "pricing.support.label",
+        "id": "pricing.trial.subheadline",
         "start": {
-          "column": 23,
-          "line": 17
+          "column": 17,
+          "line": 19
         }
       },
       {
-        "defaultMessage": "!!!Support the development of Franz",
+        "defaultMessage": "!!!No strings attached",
         "end": {
           "column": 3,
-          "line": 24
+          "line": 26
         },
         "file": "src/components/auth/Pricing.js",
-        "id": "pricing.submit.label",
+        "id": "pricing.trial.terms.headline",
+        "start": {
+          "column": 29,
+          "line": 23
+        }
+      },
+      {
+        "defaultMessage": "!!!No credit card required",
+        "end": {
+          "column": 3,
+          "line": 30
+        },
+        "file": "src/components/auth/Pricing.js",
+        "id": "pricing.trial.terms.noCreditCard",
+        "start": {
+          "column": 16,
+          "line": 27
+        }
+      },
+      {
+        "defaultMessage": "!!!Your free trial ends automatically after 14 days",
+        "end": {
+          "column": 3,
+          "line": 34
+        },
+        "file": "src/components/auth/Pricing.js",
+        "id": "pricing.trial.terms.automaticTrialEnd",
         "start": {
           "column": 21,
-          "line": 21
+          "line": 31
         }
       },
       {
-        "defaultMessage": "!!!I don't want to support the development of Franz.",
+        "defaultMessage": "!!!Sorry, we could not activate your trial!",
         "end": {
           "column": 3,
-          "line": 28
+          "line": 38
         },
         "file": "src/components/auth/Pricing.js",
-        "id": "pricing.link.skipPayment",
+        "id": "pricing.trial.error",
         "start": {
-          "column": 15,
-          "line": 25
+          "column": 19,
+          "line": 35
+        }
+      },
+      {
+        "defaultMessage": "!!!Yes, upgrade my account to Franz Professional",
+        "end": {
+          "column": 3,
+          "line": 42
+        },
+        "file": "src/components/auth/Pricing.js",
+        "id": "pricing.trial.cta.accept",
+        "start": {
+          "column": 13,
+          "line": 39
+        }
+      },
+      {
+        "defaultMessage": "!!!Continue to Franz",
+        "end": {
+          "column": 3,
+          "line": 46
+        },
+        "file": "src/components/auth/Pricing.js",
+        "id": "pricing.trial.cta.skip",
+        "start": {
+          "column": 11,
+          "line": 43
+        }
+      },
+      {
+        "defaultMessage": "!!!Franz Professional includes:",
+        "end": {
+          "column": 3,
+          "line": 50
+        },
+        "file": "src/components/auth/Pricing.js",
+        "id": "pricing.trial.features.headline",
+        "start": {
+          "column": 20,
+          "line": 47
         }
       }
     ],
@@ -477,156 +542,143 @@
         "defaultMessage": "!!!Sign up",
         "end": {
           "column": 3,
-          "line": 21
+          "line": 20
         },
         "file": "src/components/auth/Signup.js",
         "id": "signup.headline",
         "start": {
           "column": 12,
-          "line": 18
+          "line": 17
         }
       },
       {
         "defaultMessage": "!!!Firstname",
         "end": {
           "column": 3,
-          "line": 25
+          "line": 24
         },
         "file": "src/components/auth/Signup.js",
         "id": "signup.firstname.label",
         "start": {
           "column": 18,
-          "line": 22
+          "line": 21
         }
       },
       {
         "defaultMessage": "!!!Lastname",
         "end": {
           "column": 3,
-          "line": 29
+          "line": 28
         },
         "file": "src/components/auth/Signup.js",
         "id": "signup.lastname.label",
         "start": {
           "column": 17,
-          "line": 26
+          "line": 25
         }
       },
       {
         "defaultMessage": "!!!Email address",
         "end": {
           "column": 3,
-          "line": 33
+          "line": 32
         },
         "file": "src/components/auth/Signup.js",
         "id": "signup.email.label",
         "start": {
           "column": 14,
-          "line": 30
-        }
-      },
-      {
-        "defaultMessage": "!!!Company",
-        "end": {
-          "column": 3,
-          "line": 37
-        },
-        "file": "src/components/auth/Signup.js",
-        "id": "signup.company.label",
-        "start": {
-          "column": 16,
-          "line": 34
+          "line": 29
         }
       },
       {
         "defaultMessage": "!!!Password",
         "end": {
           "column": 3,
-          "line": 41
+          "line": 40
         },
         "file": "src/components/auth/Signup.js",
         "id": "signup.password.label",
         "start": {
           "column": 17,
-          "line": 38
+          "line": 37
         }
       },
       {
         "defaultMessage": "!!!By creating a Franz account you accept the",
         "end": {
           "column": 3,
-          "line": 45
+          "line": 44
         },
         "file": "src/components/auth/Signup.js",
         "id": "signup.legal.info",
         "start": {
           "column": 13,
-          "line": 42
+          "line": 41
         }
       },
       {
         "defaultMessage": "!!!Terms of service",
         "end": {
           "column": 3,
-          "line": 49
+          "line": 48
         },
         "file": "src/components/auth/Signup.js",
         "id": "signup.legal.terms",
         "start": {
           "column": 9,
-          "line": 46
+          "line": 45
         }
       },
       {
         "defaultMessage": "!!!Privacy Statement",
         "end": {
           "column": 3,
-          "line": 53
+          "line": 52
         },
         "file": "src/components/auth/Signup.js",
         "id": "signup.legal.privacy",
         "start": {
           "column": 11,
-          "line": 50
+          "line": 49
         }
       },
       {
         "defaultMessage": "!!!Create account",
         "end": {
           "column": 3,
-          "line": 57
+          "line": 56
         },
         "file": "src/components/auth/Signup.js",
         "id": "signup.submit.label",
         "start": {
           "column": 21,
-          "line": 54
+          "line": 53
         }
       },
       {
         "defaultMessage": "!!!Already have an account, sign in?",
         "end": {
           "column": 3,
-          "line": 61
+          "line": 60
         },
         "file": "src/components/auth/Signup.js",
         "id": "signup.link.login",
         "start": {
           "column": 13,
-          "line": 58
+          "line": 57
         }
       },
       {
         "defaultMessage": "!!!A user with that email address already exists",
         "end": {
           "column": 3,
-          "line": 65
+          "line": 64
         },
         "file": "src/components/auth/Signup.js",
         "id": "signup.emailDuplicate",
         "start": {
           "column": 18,
-          "line": 62
+          "line": 61
         }
       }
     ],
@@ -669,39 +721,39 @@
         "defaultMessage": "!!!Your services have been updated.",
         "end": {
           "column": 3,
-          "line": 30
+          "line": 31
         },
         "file": "src/components/layout/AppLayout.js",
         "id": "infobar.servicesUpdated",
         "start": {
           "column": 19,
-          "line": 27
+          "line": 28
         }
       },
       {
         "defaultMessage": "!!!Reload services",
         "end": {
           "column": 3,
-          "line": 34
+          "line": 35
         },
         "file": "src/components/layout/AppLayout.js",
         "id": "infobar.buttonReloadServices",
         "start": {
           "column": 24,
-          "line": 31
+          "line": 32
         }
       },
       {
         "defaultMessage": "!!!Could not load services and user information",
         "end": {
           "column": 3,
-          "line": 38
+          "line": 39
         },
         "file": "src/components/layout/AppLayout.js",
         "id": "infobar.requiredRequestsFailed",
         "start": {
           "column": 26,
-          "line": 35
+          "line": 36
         }
       }
     ],
@@ -894,29 +946,99 @@
   {
     "descriptors": [
       {
-        "defaultMessage": "!!!Welcome to Franz",
+        "defaultMessage": "!!!You have reached your service limit.",
         "end": {
           "column": 3,
           "line": 14
         },
+        "file": "src/components/services/content/ServiceRestricted.js",
+        "id": "service.restrictedHandler.serviceLimit.headline",
+        "start": {
+          "column": 24,
+          "line": 11
+        }
+      },
+      {
+        "defaultMessage": "!!!Please upgrade your account to use more than {count} services.",
+        "end": {
+          "column": 3,
+          "line": 18
+        },
+        "file": "src/components/services/content/ServiceRestricted.js",
+        "id": "service.restrictedHandler.serviceLimit.text",
+        "start": {
+          "column": 20,
+          "line": 15
+        }
+      },
+      {
+        "defaultMessage": "!!!Franz Professional Plan required",
+        "end": {
+          "column": 3,
+          "line": 22
+        },
+        "file": "src/components/services/content/ServiceRestricted.js",
+        "id": "service.restrictedHandler.customUrl.headline",
+        "start": {
+          "column": 21,
+          "line": 19
+        }
+      },
+      {
+        "defaultMessage": "!!!Please upgrade to the Franz Professional plan to use custom urls & self hosted services.",
+        "end": {
+          "column": 3,
+          "line": 26
+        },
+        "file": "src/components/services/content/ServiceRestricted.js",
+        "id": "service.restrictedHandler.customUrl.text",
+        "start": {
+          "column": 17,
+          "line": 23
+        }
+      },
+      {
+        "defaultMessage": "!!!Upgrade Account",
+        "end": {
+          "column": 3,
+          "line": 30
+        },
+        "file": "src/components/services/content/ServiceRestricted.js",
+        "id": "service.restrictedHandler.action",
+        "start": {
+          "column": 10,
+          "line": 27
+        }
+      }
+    ],
+    "path": "src/components/services/content/ServiceRestricted.json"
+  },
+  {
+    "descriptors": [
+      {
+        "defaultMessage": "!!!Welcome to Franz",
+        "end": {
+          "column": 3,
+          "line": 17
+        },
         "file": "src/components/services/content/Services.js",
         "id": "services.welcome",
         "start": {
           "column": 11,
-          "line": 11
+          "line": 14
         }
       },
       {
         "defaultMessage": "!!!Get started",
         "end": {
           "column": 3,
-          "line": 18
+          "line": 21
         },
         "file": "src/components/services/content/Services.js",
         "id": "services.getStarted",
         "start": {
           "column": 14,
-          "line": 15
+          "line": 18
         }
       }
     ],
@@ -1107,38 +1229,25 @@
         "defaultMessage": "!!!Account",
         "end": {
           "column": 3,
-          "line": 17
+          "line": 21
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.headline",
         "start": {
           "column": 12,
-          "line": 14
+          "line": 18
         }
       },
       {
         "defaultMessage": "!!!Your Subscription",
         "end": {
           "column": 3,
-          "line": 21
+          "line": 25
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.headlineSubscription",
         "start": {
           "column": 24,
-          "line": 18
-        }
-      },
-      {
-        "defaultMessage": "!!!Upgrade your Account",
-        "end": {
-          "column": 3,
-          "line": 25
-        },
-        "file": "src/components/settings/account/AccountDashboard.js",
-        "id": "settings.account.headlineUpgrade",
-        "start": {
-          "column": 19,
           "line": 22
         }
       },
@@ -1169,133 +1278,198 @@
         }
       },
       {
-        "defaultMessage": "!!!Basic Account",
+        "defaultMessage": "!!!Upgrade to Franz Professional",
         "end": {
           "column": 3,
           "line": 37
         },
         "file": "src/components/settings/account/AccountDashboard.js",
+        "id": "settings.account.upgradeToPro.label",
+        "start": {
+          "column": 23,
+          "line": 34
+        }
+      },
+      {
+        "defaultMessage": "!!!Basic Account",
+        "end": {
+          "column": 3,
+          "line": 41
+        },
+        "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.accountType.basic",
         "start": {
           "column": 20,
-          "line": 34
+          "line": 38
         }
       },
       {
         "defaultMessage": "!!!Premium Supporter Account",
         "end": {
           "column": 3,
-          "line": 41
+          "line": 45
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.accountType.premium",
         "start": {
           "column": 22,
-          "line": 38
+          "line": 42
         }
       },
       {
         "defaultMessage": "!!!Edit Account",
         "end": {
           "column": 3,
-          "line": 45
+          "line": 49
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.account.editButton",
         "start": {
           "column": 21,
-          "line": 42
+          "line": 46
         }
       },
       {
         "defaultMessage": "!!Invoices",
         "end": {
           "column": 3,
-          "line": 49
+          "line": 53
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.headlineInvoices",
         "start": {
           "column": 18,
-          "line": 46
+          "line": 50
         }
       },
       {
         "defaultMessage": "!!!Download",
         "end": {
           "column": 3,
-          "line": 53
+          "line": 57
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.invoiceDownload",
         "start": {
           "column": 19,
-          "line": 50
+          "line": 54
         }
       },
       {
         "defaultMessage": "!!!Could not load user information",
         "end": {
           "column": 3,
-          "line": 57
+          "line": 61
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.userInfoRequestFailed",
         "start": {
           "column": 25,
-          "line": 54
+          "line": 58
         }
       },
       {
         "defaultMessage": "!!!Try again",
         "end": {
           "column": 3,
-          "line": 61
+          "line": 65
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.tryReloadUserInfoRequest",
         "start": {
           "column": 28,
-          "line": 58
+          "line": 62
         }
       },
       {
         "defaultMessage": "!!!Delete account",
         "end": {
           "column": 3,
-          "line": 65
+          "line": 69
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.deleteAccount",
         "start": {
           "column": 17,
-          "line": 62
+          "line": 66
         }
       },
       {
         "defaultMessage": "!!!If you don't need your Franz account any longer, you can delete your account and all related data here.",
         "end": {
           "column": 3,
-          "line": 69
+          "line": 73
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.deleteInfo",
         "start": {
           "column": 14,
-          "line": 66
+          "line": 70
         }
       },
       {
         "defaultMessage": "!!!You have received an email with a link to confirm your account deletion. Your account and data cannot be restored!",
         "end": {
           "column": 3,
-          "line": 73
+          "line": 77
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.deleteEmailSent",
         "start": {
           "column": 19,
-          "line": 70
+          "line": 74
+        }
+      },
+      {
+        "defaultMessage": "!!!Free Trial",
+        "end": {
+          "column": 3,
+          "line": 81
+        },
+        "file": "src/components/settings/account/AccountDashboard.js",
+        "id": "settings.account.trial",
+        "start": {
+          "column": 9,
+          "line": 78
+        }
+      },
+      {
+        "defaultMessage": "!!!Your Franz License:",
+        "end": {
+          "column": 3,
+          "line": 85
+        },
+        "file": "src/components/settings/account/AccountDashboard.js",
+        "id": "settings.account.yourLicense",
+        "start": {
+          "column": 15,
+          "line": 82
+        }
+      },
+      {
+        "defaultMessage": "!!!Your free trial ends in {duration}.",
+        "end": {
+          "column": 3,
+          "line": 89
+        },
+        "file": "src/components/settings/account/AccountDashboard.js",
+        "id": "settings.account.trialEndsIn",
+        "start": {
+          "column": 15,
+          "line": 86
+        }
+      },
+      {
+        "defaultMessage": "!!!Please update your billing info to continue using {license} after your trial period.",
+        "end": {
+          "column": 3,
+          "line": 93
+        },
+        "file": "src/components/settings/account/AccountDashboard.js",
+        "id": "settings.account.trialUpdateBillingInfo",
+        "start": {
+          "column": 33,
+          "line": 90
         }
       }
     ],
@@ -1307,104 +1481,104 @@
         "defaultMessage": "!!!Available services",
         "end": {
           "column": 3,
-          "line": 16
+          "line": 17
         },
         "file": "src/components/settings/navigation/SettingsNavigation.js",
         "id": "settings.navigation.availableServices",
         "start": {
           "column": 21,
-          "line": 13
+          "line": 14
         }
       },
       {
         "defaultMessage": "!!!Your services",
         "end": {
           "column": 3,
-          "line": 20
+          "line": 21
         },
         "file": "src/components/settings/navigation/SettingsNavigation.js",
         "id": "settings.navigation.yourServices",
         "start": {
           "column": 16,
-          "line": 17
+          "line": 18
         }
       },
       {
         "defaultMessage": "!!!Your workspaces",
         "end": {
           "column": 3,
-          "line": 24
+          "line": 25
         },
         "file": "src/components/settings/navigation/SettingsNavigation.js",
         "id": "settings.navigation.yourWorkspaces",
         "start": {
           "column": 18,
-          "line": 21
+          "line": 22
         }
       },
       {
         "defaultMessage": "!!!Account",
         "end": {
           "column": 3,
-          "line": 28
+          "line": 29
         },
         "file": "src/components/settings/navigation/SettingsNavigation.js",
         "id": "settings.navigation.account",
         "start": {
           "column": 11,
-          "line": 25
+          "line": 26
         }
       },
       {
         "defaultMessage": "!!!Manage Team",
         "end": {
           "column": 3,
-          "line": 32
+          "line": 33
         },
         "file": "src/components/settings/navigation/SettingsNavigation.js",
         "id": "settings.navigation.team",
         "start": {
           "column": 8,
-          "line": 29
+          "line": 30
         }
       },
       {
         "defaultMessage": "!!!Settings",
         "end": {
           "column": 3,
-          "line": 36
+          "line": 37
         },
         "file": "src/components/settings/navigation/SettingsNavigation.js",
         "id": "settings.navigation.settings",
         "start": {
           "column": 12,
-          "line": 33
+          "line": 34
         }
       },
       {
         "defaultMessage": "!!!Invite Friends",
         "end": {
           "column": 3,
-          "line": 40
+          "line": 41
         },
         "file": "src/components/settings/navigation/SettingsNavigation.js",
         "id": "settings.navigation.inviteFriends",
         "start": {
           "column": 17,
-          "line": 37
+          "line": 38
         }
       },
       {
         "defaultMessage": "!!!Logout",
         "end": {
           "column": 3,
-          "line": 44
+          "line": 45
         },
         "file": "src/components/settings/navigation/SettingsNavigation.js",
         "id": "settings.navigation.logout",
         "start": {
           "column": 10,
-          "line": 41
+          "line": 42
         }
       }
     ],
@@ -1416,104 +1590,182 @@
         "defaultMessage": "!!!Available Services",
         "end": {
           "column": 3,
-          "line": 18
+          "line": 23
         },
         "file": "src/components/settings/recipes/RecipesDashboard.js",
         "id": "settings.recipes.headline",
         "start": {
           "column": 12,
-          "line": 15
+          "line": 20
         }
       },
       {
         "defaultMessage": "!!!Search service",
         "end": {
           "column": 3,
-          "line": 22
+          "line": 27
         },
         "file": "src/components/settings/recipes/RecipesDashboard.js",
         "id": "settings.searchService",
         "start": {
           "column": 17,
-          "line": 19
+          "line": 24
         }
       },
       {
         "defaultMessage": "!!!Most popular",
         "end": {
           "column": 3,
-          "line": 26
+          "line": 31
         },
         "file": "src/components/settings/recipes/RecipesDashboard.js",
         "id": "settings.recipes.mostPopular",
         "start": {
           "column": 22,
-          "line": 23
+          "line": 28
         }
       },
       {
         "defaultMessage": "!!!All services",
         "end": {
           "column": 3,
-          "line": 30
+          "line": 35
         },
         "file": "src/components/settings/recipes/RecipesDashboard.js",
         "id": "settings.recipes.all",
         "start": {
           "column": 14,
-          "line": 27
+          "line": 32
         }
       },
       {
-        "defaultMessage": "!!!Development",
+        "defaultMessage": "!!!Custom Services",
         "end": {
           "column": 3,
-          "line": 34
+          "line": 39
         },
         "file": "src/components/settings/recipes/RecipesDashboard.js",
-        "id": "settings.recipes.dev",
+        "id": "settings.recipes.custom",
         "start": {
-          "column": 14,
-          "line": 31
+          "column": 17,
+          "line": 36
         }
       },
       {
         "defaultMessage": "!!!Sorry, but no service matched your search term.",
         "end": {
           "column": 3,
-          "line": 38
+          "line": 43
         },
         "file": "src/components/settings/recipes/RecipesDashboard.js",
         "id": "settings.recipes.nothingFound",
         "start": {
           "column": 16,
-          "line": 35
+          "line": 40
         }
       },
       {
         "defaultMessage": "!!!Service successfully added",
         "end": {
           "column": 3,
-          "line": 42
+          "line": 47
         },
         "file": "src/components/settings/recipes/RecipesDashboard.js",
         "id": "settings.recipes.servicesSuccessfulAddedInfo",
         "start": {
           "column": 31,
-          "line": 39
+          "line": 44
         }
       },
       {
         "defaultMessage": "!!!Missing a service?",
         "end": {
           "column": 3,
-          "line": 46
+          "line": 51
         },
         "file": "src/components/settings/recipes/RecipesDashboard.js",
         "id": "settings.recipes.missingService",
         "start": {
           "column": 18,
-          "line": 43
+          "line": 48
+        }
+      },
+      {
+        "defaultMessage": "!!!To add a custom service, copy the recipe folder into:",
+        "end": {
+          "column": 3,
+          "line": 55
+        },
+        "file": "src/components/settings/recipes/RecipesDashboard.js",
+        "id": "settings.recipes.customService.intro",
+        "start": {
+          "column": 21,
+          "line": 52
+        }
+      },
+      {
+        "defaultMessage": "!!!Open directory",
+        "end": {
+          "column": 3,
+          "line": 59
+        },
+        "file": "src/components/settings/recipes/RecipesDashboard.js",
+        "id": "settings.recipes.customService.openFolder",
+        "start": {
+          "column": 14,
+          "line": 56
+        }
+      },
+      {
+        "defaultMessage": "!!!Developer Documentation",
+        "end": {
+          "column": 3,
+          "line": 63
+        },
+        "file": "src/components/settings/recipes/RecipesDashboard.js",
+        "id": "settings.recipes.customService.openDevDocs",
+        "start": {
+          "column": 15,
+          "line": 60
+        }
+      },
+      {
+        "defaultMessage": "!!!Custom Service Recipes",
+        "end": {
+          "column": 3,
+          "line": 67
+        },
+        "file": "src/components/settings/recipes/RecipesDashboard.js",
+        "id": "settings.recipes.customService.headline.customRecipes",
+        "start": {
+          "column": 25,
+          "line": 64
+        }
+      },
+      {
+        "defaultMessage": "!!!Community Services",
+        "end": {
+          "column": 3,
+          "line": 71
+        },
+        "file": "src/components/settings/recipes/RecipesDashboard.js",
+        "id": "settings.recipes.customService.headline.communityRecipes",
+        "start": {
+          "column": 28,
+          "line": 68
+        }
+      },
+      {
+        "defaultMessage": "!!!Your Development Service Recipes",
+        "end": {
+          "column": 3,
+          "line": 75
+        },
+        "file": "src/components/settings/recipes/RecipesDashboard.js",
+        "id": "settings.recipes.customService.headline.devRecipes",
+        "start": {
+          "column": 22,
+          "line": 72
         }
       }
     ],
@@ -1525,286 +1777,286 @@
         "defaultMessage": "!!!Save service",
         "end": {
           "column": 3,
-          "line": 25
+          "line": 27
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.saveButton",
         "start": {
           "column": 15,
-          "line": 22
+          "line": 24
         }
       },
       {
         "defaultMessage": "!!!Delete Service",
         "end": {
           "column": 3,
-          "line": 29
+          "line": 31
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.deleteButton",
         "start": {
           "column": 17,
-          "line": 26
+          "line": 28
         }
       },
       {
         "defaultMessage": "!!!Available services",
         "end": {
           "column": 3,
-          "line": 33
+          "line": 35
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.availableServices",
         "start": {
           "column": 21,
-          "line": 30
+          "line": 32
         }
       },
       {
         "defaultMessage": "!!!Your services",
         "end": {
           "column": 3,
-          "line": 37
+          "line": 39
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.yourServices",
         "start": {
           "column": 16,
-          "line": 34
+          "line": 36
         }
       },
       {
         "defaultMessage": "!!!Add {name}",
         "end": {
           "column": 3,
-          "line": 41
+          "line": 43
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.addServiceHeadline",
         "start": {
           "column": 22,
-          "line": 38
+          "line": 40
         }
       },
       {
         "defaultMessage": "!!!Edit {name}",
         "end": {
           "column": 3,
-          "line": 45
+          "line": 47
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.editServiceHeadline",
         "start": {
           "column": 23,
-          "line": 42
+          "line": 44
         }
       },
       {
         "defaultMessage": "!!!Hosted",
         "end": {
           "column": 3,
-          "line": 49
+          "line": 51
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.tabHosted",
         "start": {
           "column": 13,
-          "line": 46
+          "line": 48
         }
       },
       {
         "defaultMessage": "!!!Self hosted ⭐️",
         "end": {
           "column": 3,
-          "line": 53
+          "line": 55
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.tabOnPremise",
         "start": {
           "column": 16,
-          "line": 50
+          "line": 52
         }
       },
       {
         "defaultMessage": "!!!Use the hosted {name} service.",
         "end": {
           "column": 3,
-          "line": 57
+          "line": 59
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.useHostedService",
         "start": {
           "column": 20,
-          "line": 54
+          "line": 56
         }
       },
       {
         "defaultMessage": "!!!Could not validate custom {name} server.",
         "end": {
           "column": 3,
-          "line": 61
+          "line": 63
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.customUrlValidationError",
         "start": {
           "column": 28,
-          "line": 58
+          "line": 60
         }
       },
       {
         "defaultMessage": "!!!To add self hosted services, you need a Franz Premium Supporter Account.",
         "end": {
           "column": 3,
-          "line": 65
+          "line": 67
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.customUrlPremiumInfo",
         "start": {
           "column": 24,
-          "line": 62
+          "line": 64
         }
       },
       {
         "defaultMessage": "!!!Upgrade your account",
         "end": {
           "column": 3,
-          "line": 69
+          "line": 71
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.customUrlUpgradeAccount",
         "start": {
           "column": 27,
-          "line": 66
+          "line": 68
         }
       },
       {
         "defaultMessage": "!!!You will be notified about all new messages in a channel, not just @username, @channel, @here, ...",
         "end": {
           "column": 3,
-          "line": 73
+          "line": 75
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.indirectMessageInfo",
         "start": {
           "column": 23,
-          "line": 70
+          "line": 72
         }
       },
       {
         "defaultMessage": "!!!When disabled, all notification sounds and audio playback are muted",
         "end": {
           "column": 3,
-          "line": 77
+          "line": 79
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.isMutedInfo",
         "start": {
           "column": 15,
-          "line": 74
+          "line": 76
         }
       },
       {
         "defaultMessage": "!!!Notifications",
         "end": {
           "column": 3,
-          "line": 81
+          "line": 83
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.headlineNotifications",
         "start": {
           "column": 25,
-          "line": 78
+          "line": 80
         }
       },
       {
         "defaultMessage": "!!!Unread message badges",
         "end": {
           "column": 3,
-          "line": 85
+          "line": 87
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.headlineBadges",
         "start": {
           "column": 18,
-          "line": 82
+          "line": 84
         }
       },
       {
         "defaultMessage": "!!!General",
         "end": {
           "column": 3,
-          "line": 89
+          "line": 91
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.headlineGeneral",
         "start": {
           "column": 19,
-          "line": 86
+          "line": 88
         }
       },
       {
         "defaultMessage": "!!!Delete",
         "end": {
           "column": 3,
-          "line": 93
+          "line": 95
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.iconDelete",
         "start": {
           "column": 14,
-          "line": 90
+          "line": 92
         }
       },
       {
         "defaultMessage": "!!!Drop your image, or click here",
         "end": {
           "column": 3,
-          "line": 97
+          "line": 99
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.iconUpload",
         "start": {
           "column": 14,
-          "line": 94
+          "line": 96
         }
       },
       {
         "defaultMessage": "!!!HTTP/HTTPS Proxy Settings",
         "end": {
           "column": 3,
-          "line": 101
+          "line": 103
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.proxy.headline",
         "start": {
           "column": 17,
-          "line": 98
+          "line": 100
         }
       },
       {
         "defaultMessage": "!!!Please restart Franz after changing proxy Settings.",
         "end": {
           "column": 3,
-          "line": 105
+          "line": 107
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.proxy.restartInfo",
         "start": {
           "column": 20,
-          "line": 102
+          "line": 104
         }
       },
       {
         "defaultMessage": "!!!Proxy settings will not be synchronized with the Franz servers.",
         "end": {
           "column": 3,
-          "line": 109
+          "line": 111
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.proxy.info",
         "start": {
           "column": 13,
-          "line": 106
+          "line": 108
         }
       }
     ],
@@ -1917,117 +2169,117 @@
         "defaultMessage": "!!!Your services",
         "end": {
           "column": 3,
-          "line": 17
+          "line": 18
         },
         "file": "src/components/settings/services/ServicesDashboard.js",
         "id": "settings.services.headline",
         "start": {
           "column": 12,
-          "line": 14
+          "line": 15
         }
       },
       {
         "defaultMessage": "!!!Search service",
         "end": {
           "column": 3,
-          "line": 21
+          "line": 22
         },
         "file": "src/components/settings/services/ServicesDashboard.js",
         "id": "settings.searchService",
         "start": {
           "column": 17,
-          "line": 18
+          "line": 19
         }
       },
       {
         "defaultMessage": "!!!You haven't added any services yet.",
         "end": {
           "column": 3,
-          "line": 25
+          "line": 26
         },
         "file": "src/components/settings/services/ServicesDashboard.js",
         "id": "settings.services.noServicesAdded",
         "start": {
           "column": 19,
-          "line": 22
+          "line": 23
         }
       },
       {
         "defaultMessage": "!!!Sorry, but no service matched your search term.",
         "end": {
           "column": 3,
-          "line": 29
+          "line": 30
         },
         "file": "src/components/settings/services/ServicesDashboard.js",
         "id": "settings.recipes.nothingFound",
         "start": {
           "column": 18,
-          "line": 26
+          "line": 27
         }
       },
       {
         "defaultMessage": "!!!Discover services",
         "end": {
           "column": 3,
-          "line": 33
+          "line": 34
         },
         "file": "src/components/settings/services/ServicesDashboard.js",
         "id": "settings.services.discoverServices",
         "start": {
           "column": 20,
-          "line": 30
+          "line": 31
         }
       },
       {
         "defaultMessage": "!!!Could not load your services",
         "end": {
           "column": 3,
-          "line": 37
+          "line": 38
         },
         "file": "src/components/settings/services/ServicesDashboard.js",
         "id": "settings.services.servicesRequestFailed",
         "start": {
           "column": 25,
-          "line": 34
+          "line": 35
         }
       },
       {
         "defaultMessage": "!!!Try again",
         "end": {
           "column": 3,
-          "line": 41
+          "line": 42
         },
         "file": "src/components/settings/services/ServicesDashboard.js",
         "id": "settings.account.tryReloadServices",
         "start": {
           "column": 21,
-          "line": 38
+          "line": 39
         }
       },
       {
         "defaultMessage": "!!!Your changes have been saved",
         "end": {
           "column": 3,
-          "line": 45
+          "line": 46
         },
         "file": "src/components/settings/services/ServicesDashboard.js",
         "id": "settings.services.updatedInfo",
         "start": {
           "column": 15,
-          "line": 42
+          "line": 43
         }
       },
       {
         "defaultMessage": "!!!Service has been deleted",
         "end": {
           "column": 3,
-          "line": 49
+          "line": 50
         },
         "file": "src/components/settings/services/ServicesDashboard.js",
         "id": "settings.services.deletedInfo",
         "start": {
           "column": 15,
-          "line": 46
+          "line": 47
         }
       }
     ],
@@ -2441,220 +2693,396 @@
   {
     "descriptors": [
       {
-        "defaultMessage": "!!!Support the development of Franz",
+        "defaultMessage": "!!!Choose your plan",
+        "end": {
+          "column": 3,
+          "line": 16
+        },
+        "file": "src/components/subscription/SubscriptionForm.js",
+        "id": "subscription.cta.choosePlan",
+        "start": {
+          "column": 21,
+          "line": 13
+        }
+      },
+      {
+        "defaultMessage": "!!!Upgrade your account and get the full Franz experience",
         "end": {
           "column": 3,
+          "line": 20
+        },
+        "file": "src/components/subscription/SubscriptionForm.js",
+        "id": "settings.account.headlineUpgradeAccount",
+        "start": {
+          "column": 18,
           "line": 17
+        }
+      },
+      {
+        "defaultMessage": "!!!Franz 5 comes with a wide range of new features to boost up your everyday communication - batteries included. Check out our new plans and find out which one suits you most!",
+        "end": {
+          "column": 3,
+          "line": 24
+        },
+        "file": "src/components/subscription/SubscriptionForm.js",
+        "id": "subscription.teaser.intro",
+        "start": {
+          "column": 14,
+          "line": 21
+        }
+      },
+      {
+        "defaultMessage": "!!!Paid Franz Plans include:",
+        "end": {
+          "column": 3,
+          "line": 28
         },
         "file": "src/components/subscription/SubscriptionForm.js",
-        "id": "subscription.submit.label",
+        "id": "subscription.teaser.includedFeatures",
+        "start": {
+          "column": 20,
+          "line": 25
+        }
+      }
+    ],
+    "path": "src/components/subscription/SubscriptionForm.json"
+  },
+  {
+    "descriptors": [
+      {
+        "defaultMessage": "!!!Cancel",
+        "end": {
+          "column": 3,
+          "line": 14
+        },
+        "file": "src/components/subscription/SubscriptionPopup.js",
+        "id": "subscriptionPopup.buttonCancel",
+        "start": {
+          "column": 16,
+          "line": 11
+        }
+      },
+      {
+        "defaultMessage": "!!!Done",
+        "end": {
+          "column": 3,
+          "line": 18
+        },
+        "file": "src/components/subscription/SubscriptionPopup.js",
+        "id": "subscriptionPopup.buttonDone",
+        "start": {
+          "column": 14,
+          "line": 15
+        }
+      }
+    ],
+    "path": "src/components/subscription/SubscriptionPopup.json"
+  },
+  {
+    "descriptors": [
+      {
+        "defaultMessage": "!!!Yes, start the free Franz Professional trial",
+        "end": {
+          "column": 3,
+          "line": 17
+        },
+        "file": "src/components/subscription/TrialForm.js",
+        "id": "subscription.cta.activateTrial",
         "start": {
           "column": 21,
           "line": 14
         }
       },
       {
-        "defaultMessage": "!!!Could not initialize payment form",
+        "defaultMessage": "!!!See all options",
         "end": {
           "column": 3,
           "line": 21
         },
-        "file": "src/components/subscription/SubscriptionForm.js",
-        "id": "subscription.paymentSessionError",
+        "file": "src/components/subscription/TrialForm.js",
+        "id": "subscription.cta.allOptions",
         "start": {
-          "column": 23,
+          "column": 20,
           "line": 18
         }
       },
       {
-        "defaultMessage": "!!!free",
+        "defaultMessage": "!!!Get the free 14 day Franz Professional Trial",
         "end": {
           "column": 3,
           "line": 25
         },
-        "file": "src/components/subscription/SubscriptionForm.js",
-        "id": "subscription.type.free",
+        "file": "src/components/subscription/TrialForm.js",
+        "id": "settings.account.headlineTrialUpgrade",
         "start": {
-          "column": 12,
+          "column": 18,
           "line": 22
         }
       },
       {
-        "defaultMessage": "!!!month",
+        "defaultMessage": "!!!The Franz Professional Plan includes:",
         "end": {
           "column": 3,
           "line": 29
         },
-        "file": "src/components/subscription/SubscriptionForm.js",
-        "id": "subscription.type.month",
+        "file": "src/components/subscription/TrialForm.js",
+        "id": "subscription.includedProFeatures",
         "start": {
-          "column": 15,
+          "column": 20,
           "line": 26
         }
       },
       {
-        "defaultMessage": "!!!year",
+        "defaultMessage": "!!!No strings attached",
         "end": {
           "column": 3,
           "line": 33
         },
-        "file": "src/components/subscription/SubscriptionForm.js",
-        "id": "subscription.type.year",
+        "file": "src/components/subscription/TrialForm.js",
+        "id": "pricing.trial.terms.headline",
         "start": {
-          "column": 14,
+          "column": 29,
           "line": 30
         }
       },
       {
-        "defaultMessage": "!!!The Franz Premium Supporter Account includes",
+        "defaultMessage": "!!!No credit card required",
         "end": {
           "column": 3,
           "line": 37
         },
-        "file": "src/components/subscription/SubscriptionForm.js",
-        "id": "subscription.includedFeatures",
+        "file": "src/components/subscription/TrialForm.js",
+        "id": "pricing.trial.terms.noCreditCard",
         "start": {
-          "column": 20,
+          "column": 16,
           "line": 34
         }
       },
       {
-        "defaultMessage": "!!!Add on-premise/hosted services like Mattermost",
+        "defaultMessage": "!!!Your free trial ends automatically after 14 days",
         "end": {
           "column": 3,
           "line": 41
         },
-        "file": "src/components/subscription/SubscriptionForm.js",
-        "id": "subscription.features.onpremise.mattermost",
+        "file": "src/components/subscription/TrialForm.js",
+        "id": "pricing.trial.terms.automaticTrialEnd",
         "start": {
-          "column": 13,
+          "column": 21,
           "line": 38
         }
+      }
+    ],
+    "path": "src/components/subscription/TrialForm.json"
+  },
+  {
+    "descriptors": [
+      {
+        "defaultMessage": "!!!Your trial was successfully activated. Happy messaging!",
+        "end": {
+          "column": 3,
+          "line": 14
+        },
+        "file": "src/components/TrialActivationInfoBar.js",
+        "id": "infobar.trialActivated",
+        "start": {
+          "column": 11,
+          "line": 11
+        }
+      }
+    ],
+    "path": "src/components/TrialActivationInfoBar.json"
+  },
+  {
+    "descriptors": [
+      {
+        "defaultMessage": "!!!Get a Franz Supporter License",
+        "end": {
+          "column": 3,
+          "line": 16
+        },
+        "file": "src/components/ui/ActivateTrialButton/index.js",
+        "id": "feature.delayApp.upgrade.action",
+        "start": {
+          "column": 10,
+          "line": 13
+        }
       },
       {
-        "defaultMessage": "!!!No app delays & nagging to upgrade license",
+        "defaultMessage": "!!!Yes, I want the free 14 day trial of Franz Professional",
         "end": {
           "column": 3,
-          "line": 45
+          "line": 20
         },
-        "file": "src/components/subscription/SubscriptionForm.js",
-        "id": "subscription.features.noInterruptions",
+        "file": "src/components/ui/ActivateTrialButton/index.js",
+        "id": "feature.delayApp.trial.action",
         "start": {
-          "column": 19,
-          "line": 42
+          "column": 15,
+          "line": 17
         }
       },
       {
-        "defaultMessage": "!!!Proxy support for services",
+        "defaultMessage": "!!!Upgrade account",
         "end": {
           "column": 3,
-          "line": 49
+          "line": 24
         },
-        "file": "src/components/subscription/SubscriptionForm.js",
-        "id": "subscription.features.proxy",
+        "file": "src/components/ui/ActivateTrialButton/index.js",
+        "id": "feature.delayApp.upgrade.actionShort",
         "start": {
-          "column": 9,
-          "line": 46
+          "column": 15,
+          "line": 21
         }
       },
       {
-        "defaultMessage": "!!!Support for Spellchecker",
+        "defaultMessage": "!!!Activate the free Franz Professional trial",
         "end": {
           "column": 3,
-          "line": 53
+          "line": 28
         },
-        "file": "src/components/subscription/SubscriptionForm.js",
-        "id": "subscription.features.spellchecker",
+        "file": "src/components/ui/ActivateTrialButton/index.js",
+        "id": "feature.delayApp.trial.actionShort",
+        "start": {
+          "column": 20,
+          "line": 25
+        }
+      }
+    ],
+    "path": "src/components/ui/ActivateTrialButton/index.json"
+  },
+  {
+    "descriptors": [
+      {
+        "defaultMessage": "!!!Add unlimited services",
+        "end": {
+          "column": 3,
+          "line": 11
+        },
+        "file": "src/components/ui/FeatureList.js",
+        "id": "pricing.features.unlimitedServices",
+        "start": {
+          "column": 21,
+          "line": 8
+        }
+      },
+      {
+        "defaultMessage": "!!!Spellchecker support",
+        "end": {
+          "column": 3,
+          "line": 15
+        },
+        "file": "src/components/ui/FeatureList.js",
+        "id": "pricing.features.spellchecker",
         "start": {
           "column": 16,
-          "line": 50
+          "line": 12
         }
       },
       {
-        "defaultMessage": "!!!Organize your services in workspaces",
+        "defaultMessage": "!!!Workspaces",
         "end": {
           "column": 3,
-          "line": 57
+          "line": 19
         },
-        "file": "src/components/subscription/SubscriptionForm.js",
-        "id": "subscription.features.workspaces",
+        "file": "src/components/ui/FeatureList.js",
+        "id": "pricing.features.workspaces",
         "start": {
           "column": 14,
-          "line": 54
+          "line": 16
         }
       },
       {
-        "defaultMessage": "!!!No ads, ever!",
+        "defaultMessage": "!!!Add Custom Websites",
         "end": {
           "column": 3,
-          "line": 61
+          "line": 23
         },
-        "file": "src/components/subscription/SubscriptionForm.js",
-        "id": "subscription.features.ads",
+        "file": "src/components/ui/FeatureList.js",
+        "id": "pricing.features.customWebsites",
         "start": {
-          "column": 7,
-          "line": 58
+          "column": 18,
+          "line": 20
         }
       },
       {
-        "defaultMessage": "!!!coming soon",
+        "defaultMessage": "!!!On-premise & other Hosted Services",
         "end": {
           "column": 3,
-          "line": 65
+          "line": 27
         },
-        "file": "src/components/subscription/SubscriptionForm.js",
-        "id": "subscription.features.comingSoon",
+        "file": "src/components/ui/FeatureList.js",
+        "id": "pricing.features.onPremise",
         "start": {
-          "column": 14,
-          "line": 62
+          "column": 13,
+          "line": 24
         }
       },
       {
-        "defaultMessage": "!!!EU residents: local sales tax may apply",
+        "defaultMessage": "!!!Install 3rd party services",
         "end": {
           "column": 3,
-          "line": 69
+          "line": 31
         },
-        "file": "src/components/subscription/SubscriptionForm.js",
-        "id": "subscription.euTaxInfo",
+        "file": "src/components/ui/FeatureList.js",
+        "id": "pricing.features.thirdPartyServices",
         "start": {
-          "column": 13,
-          "line": 66
+          "column": 22,
+          "line": 28
         }
-      }
-    ],
-    "path": "src/components/subscription/SubscriptionForm.json"
-  },
-  {
-    "descriptors": [
+      },
       {
-        "defaultMessage": "!!!Cancel",
+        "defaultMessage": "!!!Service Proxies",
         "end": {
           "column": 3,
-          "line": 14
+          "line": 35
         },
-        "file": "src/components/subscription/SubscriptionPopup.js",
-        "id": "subscriptionPopup.buttonCancel",
+        "file": "src/components/ui/FeatureList.js",
+        "id": "pricing.features.serviceProxies",
         "start": {
-          "column": 16,
-          "line": 11
+          "column": 18,
+          "line": 32
         }
       },
       {
-        "defaultMessage": "!!!Done",
+        "defaultMessage": "!!!Team Management",
         "end": {
           "column": 3,
-          "line": 18
+          "line": 39
         },
-        "file": "src/components/subscription/SubscriptionPopup.js",
-        "id": "subscriptionPopup.buttonDone",
+        "file": "src/components/ui/FeatureList.js",
+        "id": "pricing.features.teamManagement",
         "start": {
-          "column": 14,
-          "line": 15
+          "column": 18,
+          "line": 36
+        }
+      },
+      {
+        "defaultMessage": "!!!No Waiting Screens",
+        "end": {
+          "column": 3,
+          "line": 43
+        },
+        "file": "src/components/ui/FeatureList.js",
+        "id": "pricing.features.appDelays",
+        "start": {
+          "column": 13,
+          "line": 40
+        }
+      },
+      {
+        "defaultMessage": "!!!Forever ad-free",
+        "end": {
+          "column": 3,
+          "line": 47
+        },
+        "file": "src/components/ui/FeatureList.js",
+        "id": "pricing.features.adFree",
+        "start": {
+          "column": 10,
+          "line": 44
         }
       }
     ],
-    "path": "src/components/subscription/SubscriptionPopup.json"
+    "path": "src/components/ui/FeatureList.json"
   },
   {
     "descriptors": [
@@ -2662,13 +3090,13 @@
         "defaultMessage": "!!!Upgrade account",
         "end": {
           "column": 3,
-          "line": 18
+          "line": 19
         },
         "file": "src/components/ui/PremiumFeatureContainer/index.js",
         "id": "premiumFeature.button.upgradeAccount",
         "start": {
           "column": 10,
-          "line": 15
+          "line": 16
         }
       }
     ],
@@ -3230,39 +3658,65 @@
         "defaultMessage": "!!!Please purchase license to skip waiting",
         "end": {
           "column": 3,
-          "line": 18
+          "line": 20
         },
         "file": "src/features/delayApp/Component.js",
         "id": "feature.delayApp.headline",
         "start": {
           "column": 12,
-          "line": 15
+          "line": 17
+        }
+      },
+      {
+        "defaultMessage": "!!!Get the free Franz Professional 14 day trial and skip the line",
+        "end": {
+          "column": 3,
+          "line": 24
+        },
+        "file": "src/features/delayApp/Component.js",
+        "id": "feature.delayApp.trial.headline",
+        "start": {
+          "column": 17,
+          "line": 21
         }
       },
       {
         "defaultMessage": "!!!Get a Franz Supporter License",
         "end": {
           "column": 3,
-          "line": 22
+          "line": 28
         },
         "file": "src/features/delayApp/Component.js",
-        "id": "feature.delayApp.action",
+        "id": "feature.delayApp.upgrade.action",
         "start": {
           "column": 10,
-          "line": 19
+          "line": 25
+        }
+      },
+      {
+        "defaultMessage": "!!!Yes, I want the free 14 day trial of Franz Professional",
+        "end": {
+          "column": 3,
+          "line": 32
+        },
+        "file": "src/features/delayApp/Component.js",
+        "id": "feature.delayApp.trial.action",
+        "start": {
+          "column": 15,
+          "line": 29
         }
       },
       {
         "defaultMessage": "!!!Franz will continue in {seconds} seconds.",
         "end": {
           "column": 3,
-          "line": 26
+          "line": 36
         },
         "file": "src/features/delayApp/Component.js",
         "id": "feature.delayApp.text",
         "start": {
           "column": 8,
-          "line": 23
+          "line": 33
         }
       }
     ],
@@ -3271,94 +3725,143 @@
   {
     "descriptors": [
       {
-        "defaultMessage": "!!!Franz is better together!",
+        "defaultMessage": "!!!Changes in Franz {version}",
+        "end": {
+          "column": 3,
+          "line": 23
+        },
+        "file": "src/features/serviceLimit/components/AnnouncementScreen.js",
+        "id": "feature.announcements.changelog.headline",
+        "start": {
+          "column": 12,
+          "line": 20
+        }
+      }
+    ],
+    "path": "src/features/serviceLimit/components/AnnouncementScreen.json"
+  },
+  {
+    "descriptors": [
+      {
+        "defaultMessage": "!!!You have added {amount} of {limit} services. Please upgrade your account to add more services.",
+        "end": {
+          "column": 3,
+          "line": 14
+        },
+        "file": "src/features/serviceLimit/components/LimitReachedInfobox.js",
+        "id": "feature.serviceLimit.limitReached",
+        "start": {
+          "column": 16,
+          "line": 11
+        }
+      },
+      {
+        "defaultMessage": "!!!Upgrade account",
         "end": {
           "column": 3,
           "line": 18
         },
+        "file": "src/features/serviceLimit/components/LimitReachedInfobox.js",
+        "id": "premiumFeature.button.upgradeAccount",
+        "start": {
+          "column": 10,
+          "line": 15
+        }
+      }
+    ],
+    "path": "src/features/serviceLimit/components/LimitReachedInfobox.json"
+  },
+  {
+    "descriptors": [
+      {
+        "defaultMessage": "!!!Franz is better together!",
+        "end": {
+          "column": 3,
+          "line": 21
+        },
         "file": "src/features/shareFranz/Component.js",
         "id": "feature.shareFranz.headline",
         "start": {
           "column": 12,
-          "line": 15
+          "line": 18
         }
       },
       {
         "defaultMessage": "!!!Tell your friends and colleagues how awesome Franz is and help us to spread the word.",
         "end": {
           "column": 3,
-          "line": 22
+          "line": 25
         },
         "file": "src/features/shareFranz/Component.js",
         "id": "feature.shareFranz.text",
         "start": {
           "column": 8,
-          "line": 19
+          "line": 22
         }
       },
       {
         "defaultMessage": "!!!Share as email",
         "end": {
           "column": 3,
-          "line": 26
+          "line": 29
         },
         "file": "src/features/shareFranz/Component.js",
         "id": "feature.shareFranz.action.email",
         "start": {
           "column": 16,
-          "line": 23
+          "line": 26
         }
       },
       {
         "defaultMessage": "!!!Share on Facebook",
         "end": {
           "column": 3,
-          "line": 30
+          "line": 33
         },
         "file": "src/features/shareFranz/Component.js",
         "id": "feature.shareFranz.action.facebook",
         "start": {
           "column": 19,
-          "line": 27
+          "line": 30
         }
       },
       {
         "defaultMessage": "!!!Share on Twitter",
         "end": {
           "column": 3,
-          "line": 34
+          "line": 37
         },
         "file": "src/features/shareFranz/Component.js",
         "id": "feature.shareFranz.action.twitter",
         "start": {
           "column": 18,
-          "line": 31
+          "line": 34
         }
       },
       {
         "defaultMessage": "!!! I've added {count} services to Franz! Get the free app for WhatsApp, Messenger, Slack, Skype and co at www.meetfranz.com",
         "end": {
           "column": 3,
-          "line": 38
+          "line": 41
         },
         "file": "src/features/shareFranz/Component.js",
         "id": "feature.shareFranz.shareText.email",
         "start": {
           "column": 18,
-          "line": 35
+          "line": 38
         }
       },
       {
         "defaultMessage": "!!! I've added {count} services to Franz! Get the free app for WhatsApp, Messenger, Slack, Skype and co at www.meetfranz.com /cc @FranzMessenger",
         "end": {
           "column": 3,
-          "line": 42
+          "line": 45
         },
         "file": "src/features/shareFranz/Component.js",
         "id": "feature.shareFranz.shareText.twitter",
         "start": {
           "column": 20,
-          "line": 39
+          "line": 42
         }
       }
     ],
@@ -3367,6 +3870,50 @@
   {
     "descriptors": [
       {
+        "defaultMessage": "!!!The Franz Todos Preview is currently only available for Franz Premium accounts.",
+        "end": {
+          "column": 3,
+          "line": 22
+        },
+        "file": "src/features/todos/components/TodosWebview.js",
+        "id": "feature.todos.premium.info",
+        "start": {
+          "column": 15,
+          "line": 19
+        }
+      },
+      {
+        "defaultMessage": "!!!Upgrade Account",
+        "end": {
+          "column": 3,
+          "line": 26
+        },
+        "file": "src/features/todos/components/TodosWebview.js",
+        "id": "feature.todos.premium.upgrade",
+        "start": {
+          "column": 14,
+          "line": 23
+        }
+      },
+      {
+        "defaultMessage": "!!!Franz Todos will be available to everyone soon.",
+        "end": {
+          "column": 3,
+          "line": 30
+        },
+        "file": "src/features/todos/components/TodosWebview.js",
+        "id": "feature.todos.premium.rollout",
+        "start": {
+          "column": 15,
+          "line": 27
+        }
+      }
+    ],
+    "path": "src/features/todos/components/TodosWebview.json"
+  },
+  {
+    "descriptors": [
+      {
         "defaultMessage": "!!!Create workspace",
         "end": {
           "column": 3,
@@ -3497,104 +4044,104 @@
         "defaultMessage": "!!!Workspaces",
         "end": {
           "column": 3,
-          "line": 19
+          "line": 20
         },
         "file": "src/features/workspaces/components/WorkspaceDrawer.js",
         "id": "workspaceDrawer.headline",
         "start": {
           "column": 12,
-          "line": 16
+          "line": 17
         }
       },
       {
         "defaultMessage": "!!!All services",
         "end": {
           "column": 3,
-          "line": 23
+          "line": 24
         },
         "file": "src/features/workspaces/components/WorkspaceDrawer.js",
         "id": "workspaceDrawer.allServices",
         "start": {
           "column": 15,
-          "line": 20
+          "line": 21
         }
       },
       {
         "defaultMessage": "!!!Workspaces settings",
         "end": {
           "column": 3,
-          "line": 27
+          "line": 28
         },
         "file": "src/features/workspaces/components/WorkspaceDrawer.js",
         "id": "workspaceDrawer.workspacesSettingsTooltip",
         "start": {
           "column": 29,
-          "line": 24
+          "line": 25
         }
       },
       {
         "defaultMessage": "!!!Info about workspace feature",
         "end": {
           "column": 3,
-          "line": 31
+          "line": 32
         },
         "file": "src/features/workspaces/components/WorkspaceDrawer.js",
         "id": "workspaceDrawer.workspaceFeatureInfo",
         "start": {
           "column": 24,
-          "line": 28
+          "line": 29
         }
       },
       {
         "defaultMessage": "!!!Create your first workspace",
         "end": {
           "column": 3,
-          "line": 35
+          "line": 36
         },
         "file": "src/features/workspaces/components/WorkspaceDrawer.js",
         "id": "workspaceDrawer.premiumCtaButtonLabel",
         "start": {
           "column": 25,
-          "line": 32
+          "line": 33
         }
       },
       {
         "defaultMessage": "!!!Reactivate premium account",
         "end": {
           "column": 3,
-          "line": 39
+          "line": 40
         },
         "file": "src/features/workspaces/components/WorkspaceDrawer.js",
         "id": "workspaceDrawer.reactivatePremiumAccountLabel",
         "start": {
           "column": 28,
-          "line": 36
+          "line": 37
         }
       },
       {
         "defaultMessage": "!!!add new workspace",
         "end": {
           "column": 3,
-          "line": 43
+          "line": 44
         },
         "file": "src/features/workspaces/components/WorkspaceDrawer.js",
         "id": "workspaceDrawer.addNewWorkspaceLabel",
         "start": {
           "column": 24,
-          "line": 40
+          "line": 41
         }
       },
       {
         "defaultMessage": "!!!Premium feature",
         "end": {
           "column": 3,
-          "line": 47
+          "line": 48
         },
         "file": "src/features/workspaces/components/WorkspaceDrawer.js",
         "id": "workspaceDrawer.proFeatureBadge",
         "start": {
           "column": 23,
-          "line": 44
+          "line": 45
         }
       }
     ],
@@ -3637,104 +4184,104 @@
         "defaultMessage": "!!!Your workspaces",
         "end": {
           "column": 3,
-          "line": 20
+          "line": 22
         },
         "file": "src/features/workspaces/components/WorkspacesDashboard.js",
         "id": "settings.workspaces.headline",
         "start": {
           "column": 12,
-          "line": 17
+          "line": 19
         }
       },
       {
         "defaultMessage": "!!!You haven't added any workspaces yet.",
         "end": {
           "column": 3,
-          "line": 24
+          "line": 26
         },
         "file": "src/features/workspaces/components/WorkspacesDashboard.js",
         "id": "settings.workspaces.noWorkspacesAdded",
         "start": {
           "column": 19,
-          "line": 21
+          "line": 23
         }
       },
       {
         "defaultMessage": "!!!Could not load your workspaces",
         "end": {
           "column": 3,
-          "line": 28
+          "line": 30
         },
         "file": "src/features/workspaces/components/WorkspacesDashboard.js",
         "id": "settings.workspaces.workspacesRequestFailed",
         "start": {
           "column": 27,
-          "line": 25
+          "line": 27
         }
       },
       {
         "defaultMessage": "!!!Try again",
         "end": {
           "column": 3,
-          "line": 32
+          "line": 34
         },
         "file": "src/features/workspaces/components/WorkspacesDashboard.js",
         "id": "settings.workspaces.tryReloadWorkspaces",
         "start": {
           "column": 23,
-          "line": 29
+          "line": 31
         }
       },
       {
         "defaultMessage": "!!!Your changes have been saved",
         "end": {
           "column": 3,
-          "line": 36
+          "line": 38
         },
         "file": "src/features/workspaces/components/WorkspacesDashboard.js",
         "id": "settings.workspaces.updatedInfo",
         "start": {
           "column": 15,
-          "line": 33
+          "line": 35
         }
       },
       {
         "defaultMessage": "!!!Workspace has been deleted",
         "end": {
           "column": 3,
-          "line": 40
+          "line": 42
         },
         "file": "src/features/workspaces/components/WorkspacesDashboard.js",
         "id": "settings.workspaces.deletedInfo",
         "start": {
           "column": 15,
-          "line": 37
+          "line": 39
         }
       },
       {
         "defaultMessage": "!!!Info about workspace feature",
         "end": {
           "column": 3,
-          "line": 44
+          "line": 46
         },
         "file": "src/features/workspaces/components/WorkspacesDashboard.js",
         "id": "settings.workspaces.workspaceFeatureInfo",
         "start": {
           "column": 24,
-          "line": 41
+          "line": 43
         }
       },
       {
         "defaultMessage": "!!!Less is More: Introducing Franz Workspaces",
         "end": {
           "column": 3,
-          "line": 48
+          "line": 50
         },
         "file": "src/features/workspaces/components/WorkspacesDashboard.js",
         "id": "settings.workspaces.workspaceFeatureHeadline",
         "start": {
           "column": 28,
-          "line": 45
+          "line": 47
         }
       }
     ],
@@ -3761,6 +4308,146 @@
   {
     "descriptors": [
       {
+        "defaultMessage": "!!!Franz Professional",
+        "end": {
+          "column": 3,
+          "line": 8
+        },
+        "file": "src/helpers/plan-helpers.js",
+        "id": "pricing.plan.pro",
+        "start": {
+          "column": 15,
+          "line": 5
+        }
+      },
+      {
+        "defaultMessage": "!!!Franz Personal",
+        "end": {
+          "column": 3,
+          "line": 12
+        },
+        "file": "src/helpers/plan-helpers.js",
+        "id": "pricing.plan.personal",
+        "start": {
+          "column": 20,
+          "line": 9
+        }
+      },
+      {
+        "defaultMessage": "!!!Franz Free",
+        "end": {
+          "column": 3,
+          "line": 16
+        },
+        "file": "src/helpers/plan-helpers.js",
+        "id": "pricing.plan.free",
+        "start": {
+          "column": 16,
+          "line": 13
+        }
+      },
+      {
+        "defaultMessage": "!!!Franz Premium",
+        "end": {
+          "column": 3,
+          "line": 20
+        },
+        "file": "src/helpers/plan-helpers.js",
+        "id": "pricing.plan.legacy",
+        "start": {
+          "column": 18,
+          "line": 17
+        }
+      }
+    ],
+    "path": "src/helpers/plan-helpers.json"
+  },
+  {
+    "descriptors": [
+      {
+        "defaultMessage": "!!!Franz Professional Yearly",
+        "end": {
+          "column": 3,
+          "line": 8
+        },
+        "file": "src/helpers/pricing-helpers.js",
+        "id": "pricing.plan.pro-yearly",
+        "start": {
+          "column": 22,
+          "line": 5
+        }
+      },
+      {
+        "defaultMessage": "!!!Franz Professional Monthly",
+        "end": {
+          "column": 3,
+          "line": 12
+        },
+        "file": "src/helpers/pricing-helpers.js",
+        "id": "pricing.plan.pro-monthly",
+        "start": {
+          "column": 23,
+          "line": 9
+        }
+      },
+      {
+        "defaultMessage": "!!!Franz Personal Yearly",
+        "end": {
+          "column": 3,
+          "line": 16
+        },
+        "file": "src/helpers/pricing-helpers.js",
+        "id": "pricing.plan.personal-yearly",
+        "start": {
+          "column": 27,
+          "line": 13
+        }
+      },
+      {
+        "defaultMessage": "!!!Franz Personal Monthly",
+        "end": {
+          "column": 3,
+          "line": 20
+        },
+        "file": "src/helpers/pricing-helpers.js",
+        "id": "pricing.plan.personal-monthly",
+        "start": {
+          "column": 28,
+          "line": 17
+        }
+      },
+      {
+        "defaultMessage": "!!!Franz Free",
+        "end": {
+          "column": 3,
+          "line": 24
+        },
+        "file": "src/helpers/pricing-helpers.js",
+        "id": "pricing.plan.free",
+        "start": {
+          "column": 16,
+          "line": 21
+        }
+      },
+      {
+        "defaultMessage": "!!!Franz Premium",
+        "end": {
+          "column": 3,
+          "line": 28
+        },
+        "file": "src/helpers/pricing-helpers.js",
+        "id": "pricing.plan.legacy",
+        "start": {
+          "column": 18,
+          "line": 25
+        }
+      }
+    ],
+    "path": "src/helpers/pricing-helpers.json"
+  },
+  {
+    "descriptors": [
+      {
         "defaultMessage": "!!!Field is required",
         "end": {
           "column": 3,
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index cee42c350..f11d5ca91 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -2,9 +2,14 @@
   "app.errorHandler.action": "Reload",
   "app.errorHandler.headline": "Something went wrong",
   "feature.announcements.changelog.headline": "Changes in Franz {version}",
-  "feature.delayApp.action": "Get a Franz Supporter License",
   "feature.delayApp.headline": "Please purchase a Franz Supporter License to skip waiting",
   "feature.delayApp.text": "Franz will continue in {seconds} seconds.",
+  "feature.delayApp.trial.action": "Yes, I want the free 14 day trial of Franz Professional",
+  "feature.delayApp.trial.actionShort": "Activate the free Franz Professional trial",
+  "feature.delayApp.trial.headline": "Get the free Franz Professional 14 day trial and skip the line",
+  "feature.delayApp.upgrade.action": "Get a Franz Supporter License",
+  "feature.delayApp.upgrade.actionShort": "Upgrade account",
+  "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",
@@ -12,6 +17,9 @@
   "feature.shareFranz.shareText.email": "I've added {count} services to Franz! Get the free app for WhatsApp, Messenger, Slack, Skype and co at www.meetfranz.com",
   "feature.shareFranz.shareText.twitter": "I've added {count} services to Franz! Get the free app for WhatsApp, Messenger, Slack, Skype and co at www.meetfranz.com /cc @FranzMessenger",
   "feature.shareFranz.text": "Tell your friends and colleagues how awesome Franz is and help us to spread the word.",
+  "feature.todos.premium.info": "The Franz Todos Preview is currently only available for Franz Premium accounts.",
+  "feature.todos.premium.rollout": "Franz Todos will be available to everyone soon.",
+  "feature.todos.premium.upgrade": "Upgrade Account",
   "global.api.unhealthy": "Can't connect to Franz online services",
   "global.notConnectedToTheInternet": "You are not connected to the internet.",
   "global.spellchecker.useDefault": "Use System Default ({default})",
@@ -27,6 +35,7 @@
   "infobar.buttonReloadServices": "Reload services",
   "infobar.requiredRequestsFailed": "Could not load services and user information",
   "infobar.servicesUpdated": "Your services have been updated.",
+  "infobar.trialActivated": "Your trial was successfully activated. Happy messaging!",
   "infobar.updateAvailable": "A new update for Franz is available.",
   "invite.email.label": "Email address",
   "invite.headline.friends": "Invite 3 of your friends or colleagues",
@@ -91,7 +100,7 @@
   "menu.view.toggleDevTools": "Toggle Developer Tools",
   "menu.view.toggleFullScreen": "Toggle Full Screen",
   "menu.view.toggleServiceDevTools": "Toggle Service Developer Tools",
-  "menu.view.toggleTodosDevTools": "!!!Toggle Todos Developer Tools",
+  "menu.view.toggleTodosDevTools": "Toggle Todos Developer Tools",
   "menu.view.zoomIn": "Zoom In",
   "menu.view.zoomOut": "Zoom Out",
   "menu.window": "Window",
@@ -110,10 +119,33 @@
   "password.submit.label": "Submit",
   "password.successInfo": "Please check your email",
   "premiumFeature.button.upgradeAccount": "Upgrade account",
-  "pricing.headline": "Support Franz",
-  "pricing.link.skipPayment": "I don't want to support the development of Franz.",
-  "pricing.submit.label": "I want to support the development of Franz",
-  "pricing.support.label": "Select your support plan",
+  "pricing.features.adFree": "Forever ad-free",
+  "pricing.features.appDelays": "No Waiting Screens",
+  "pricing.features.customWebsites": "Add Custom Websites",
+  "pricing.features.onPremise": "On-premise & other Hosted Services",
+  "pricing.features.serviceProxies": "Service Proxies",
+  "pricing.features.spellchecker": "Spellchecker support",
+  "pricing.features.teamManagement": "Team Management",
+  "pricing.features.thirdPartyServices": "Install 3rd party services",
+  "pricing.features.unlimitedServices": "Add unlimited services",
+  "pricing.features.workspaces": "Workspaces",
+  "pricing.plan.free": "Franz Free",
+  "pricing.plan.legacy": "Franz Premium",
+  "pricing.plan.personal": "Franz Personal",
+  "pricing.plan.personal-monthly": "Franz Personal Monthly",
+  "pricing.plan.personal-yearly": "Franz Personal Yearly",
+  "pricing.plan.pro": "Franz Professional",
+  "pricing.plan.pro-monthly": "Franz Professional Monthly",
+  "pricing.plan.pro-yearly": "Franz Professional Yearly",
+  "pricing.trial.cta.accept": "Yes, upgrade my account to Franz Professional",
+  "pricing.trial.cta.skip": "Continue to Franz",
+  "pricing.trial.error": "Sorry, we could not activate your trial!",
+  "pricing.trial.features.headline": "Franz Professional includes:",
+  "pricing.trial.headline": "Franz Professional",
+  "pricing.trial.subheadline": "Your personal welcome offer:",
+  "pricing.trial.terms.automaticTrialEnd": "Your free trial ends automatically after 14 days",
+  "pricing.trial.terms.headline": "No strings attached",
+  "pricing.trial.terms.noCreditCard": "No credit card required",
   "service.crashHandler.action": "Reload {name}",
   "service.crashHandler.autoReload": "Trying to automatically restore {name} in {seconds} seconds",
   "service.crashHandler.headline": "Oh no!",
@@ -125,6 +157,11 @@
   "service.errorHandler.headline": "Oh no!",
   "service.errorHandler.message": "Error",
   "service.errorHandler.text": "{name} has failed to load.",
+  "service.restrictedHandler.action": "Upgrade Account",
+  "service.restrictedHandler.customUrl.headline": "Franz Professional Plan required",
+  "service.restrictedHandler.customUrl.text": "Please upgrade to the Franz Professional plan to use custom urls & self hosted services.",
+  "service.restrictedHandler.serviceLimit.headline": "You have reached your service limit.",
+  "service.restrictedHandler.serviceLimit.text": "Please upgrade your account to use more than {count} services.",
   "service.webviewLoader.loading": "Loading",
   "services.getStarted": "Get started",
   "services.welcome": "Welcome to Franz",
@@ -142,13 +179,19 @@
   "settings.account.headlinePassword": "Change password",
   "settings.account.headlineProfile": "Update profile",
   "settings.account.headlineSubscription": "Your subscription",
-  "settings.account.headlineUpgrade": "Upgrade your account & support Franz",
+  "settings.account.headlineTrialUpgrade": "Get the free 14 day Franz Professional Trial",
+  "settings.account.headlineUpgradeAccount": "Upgrade your account & get the full Franz experience",
   "settings.account.invoiceDownload": "Download",
   "settings.account.manageSubscription.label": "Manage your subscription",
   "settings.account.successInfo": "Your changes have been saved",
+  "settings.account.trial": "Free Trial",
+  "settings.account.trialEndsIn": "Your free trial ends in {duration}.",
+  "settings.account.trialUpdateBillingInfo": "Please update your billing info to continue using {license} after your trial period.",
   "settings.account.tryReloadServices": "Try again",
   "settings.account.tryReloadUserInfoRequest": "Try again",
+  "settings.account.upgradeToPro.label": "Upgrade to Franz Professional",
   "settings.account.userInfoRequestFailed": "Could not load user information",
+  "settings.account.yourLicense": "Your Franz License",
   "settings.app.buttonClearAllCache": "Clear cache",
   "settings.app.buttonInstallUpdate": "Restart & install update",
   "settings.app.buttonSearchForUpdate": "Check for updates",
@@ -189,7 +232,13 @@
   "settings.navigation.yourServices": "Your services",
   "settings.navigation.yourWorkspaces": "Your workspaces",
   "settings.recipes.all": "All services",
-  "settings.recipes.dev": "Development",
+  "settings.recipes.custom": "Custom Services",
+  "settings.recipes.customService.headline.communityRecipes": "Community Services",
+  "settings.recipes.customService.headline.customRecipes": "Custom Service Recipes",
+  "settings.recipes.customService.headline.devRecipes": "Your Development Service Recipes",
+  "settings.recipes.customService.intro": "To add a custom service, copy the service recipe to:",
+  "settings.recipes.customService.openDevDocs": "Developer Documentation",
+  "settings.recipes.customService.openFolder": "Open folder",
   "settings.recipes.headline": "Available services",
   "settings.recipes.missingService": "Missing a service?",
   "settings.recipes.mostPopular": "Most popular",
@@ -281,7 +330,6 @@
   "sidebar.openWorkspaceDrawer": "Open workspace drawer",
   "sidebar.settings": "Settings",
   "sidebar.unmuteApp": "Enable notifications & audio",
-  "signup.company.label": "Company",
   "signup.email.label": "Email address",
   "signup.emailDuplicate": "A user with that email address already exists",
   "signup.firstname.label": "First Name",
@@ -293,20 +341,12 @@
   "signup.link.login": "Already have an account, sign in?",
   "signup.password.label": "Password",
   "signup.submit.label": "Create account",
-  "subscription.euTaxInfo": "EU residents: local sales tax may apply",
-  "subscription.features.ads": "No ads, ever!",
-  "subscription.features.comingSoon": "coming soon",
-  "subscription.features.noInterruptions": "No app delays & nagging to upgrade license",
-  "subscription.features.onpremise.mattermost": "Add on-premise/hosted services like Mattermost",
-  "subscription.features.proxy": "Proxy support for services",
-  "subscription.features.spellchecker": "Support for spellchecker",
-  "subscription.features.workspaces": "Organize your services in workspaces",
-  "subscription.includedFeatures": "Paid Franz Premium Supporter Account includes",
-  "subscription.paymentSessionError": "Could not initialize payment form",
-  "subscription.submit.label": "I want to support the development of Franz",
-  "subscription.type.free": "free",
-  "subscription.type.month": "month",
-  "subscription.type.year": "year",
+  "subscription.cta.activateTrial": "Yes, start the free Franz Professional trial",
+  "subscription.cta.allOptions": "See all options",
+  "subscription.cta.choosePlan": "Choose your plan",
+  "subscription.includedProFeatures": "The Franz Professional Plan includes:",
+  "subscription.teaser.includedFeatures": "Paid Franz Plans include:",
+  "subscription.teaser.intro": "Franz 5 comes with a wide range of new features to boost up your everyday communication - batteries included. Check out our new plans and find out which one suits you most!",
   "subscriptionPopup.buttonCancel": "Cancel",
   "subscriptionPopup.buttonDone": "Done",
   "tabs.item.deleteService": "Delete service",
diff --git a/src/i18n/messages/src/components/TrialActivationInfoBar.json b/src/i18n/messages/src/components/TrialActivationInfoBar.json
new file mode 100644
index 000000000..65dd964a6
--- /dev/null
+++ b/src/i18n/messages/src/components/TrialActivationInfoBar.json
@@ -0,0 +1,15 @@
+[
+  {
+    "id": "infobar.trialActivated",
+    "defaultMessage": "!!!Your trial was successfully activated. Happy messaging!",
+    "file": "src/components/TrialActivationInfoBar.js",
+    "start": {
+      "line": 11,
+      "column": 11
+    },
+    "end": {
+      "line": 14,
+      "column": 3
+    }
+  }
+]
\ No newline at end of file
diff --git a/src/i18n/messages/src/components/auth/Pricing.json b/src/i18n/messages/src/components/auth/Pricing.json
index f711a55b4..f15617ca5 100644
--- a/src/i18n/messages/src/components/auth/Pricing.json
+++ b/src/i18n/messages/src/components/auth/Pricing.json
@@ -1,53 +1,118 @@
 [
   {
-    "id": "pricing.headline",
-    "defaultMessage": "!!!Support Franz",
+    "id": "pricing.trial.headline",
+    "defaultMessage": "!!!Franz Professional",
     "file": "src/components/auth/Pricing.js",
     "start": {
-      "line": 13,
+      "line": 15,
       "column": 12
     },
     "end": {
-      "line": 16,
+      "line": 18,
       "column": 3
     }
   },
   {
-    "id": "pricing.support.label",
-    "defaultMessage": "!!!Select your support plan",
+    "id": "pricing.trial.subheadline",
+    "defaultMessage": "!!!Your personal welcome offer:",
     "file": "src/components/auth/Pricing.js",
     "start": {
-      "line": 17,
-      "column": 23
+      "line": 19,
+      "column": 17
     },
     "end": {
-      "line": 20,
+      "line": 22,
       "column": 3
     }
   },
   {
-    "id": "pricing.submit.label",
-    "defaultMessage": "!!!Support the development of Franz",
+    "id": "pricing.trial.terms.headline",
+    "defaultMessage": "!!!No strings attached",
     "file": "src/components/auth/Pricing.js",
     "start": {
-      "line": 21,
+      "line": 23,
+      "column": 29
+    },
+    "end": {
+      "line": 26,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.trial.terms.noCreditCard",
+    "defaultMessage": "!!!No credit card required",
+    "file": "src/components/auth/Pricing.js",
+    "start": {
+      "line": 27,
+      "column": 16
+    },
+    "end": {
+      "line": 30,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.trial.terms.automaticTrialEnd",
+    "defaultMessage": "!!!Your free trial ends automatically after 14 days",
+    "file": "src/components/auth/Pricing.js",
+    "start": {
+      "line": 31,
       "column": 21
     },
     "end": {
-      "line": 24,
+      "line": 34,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.trial.error",
+    "defaultMessage": "!!!Sorry, we could not activate your trial!",
+    "file": "src/components/auth/Pricing.js",
+    "start": {
+      "line": 35,
+      "column": 19
+    },
+    "end": {
+      "line": 38,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.trial.cta.accept",
+    "defaultMessage": "!!!Yes, upgrade my account to Franz Professional",
+    "file": "src/components/auth/Pricing.js",
+    "start": {
+      "line": 39,
+      "column": 13
+    },
+    "end": {
+      "line": 42,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.trial.cta.skip",
+    "defaultMessage": "!!!Continue to Franz",
+    "file": "src/components/auth/Pricing.js",
+    "start": {
+      "line": 43,
+      "column": 11
+    },
+    "end": {
+      "line": 46,
       "column": 3
     }
   },
   {
-    "id": "pricing.link.skipPayment",
-    "defaultMessage": "!!!I don't want to support the development of Franz.",
+    "id": "pricing.trial.features.headline",
+    "defaultMessage": "!!!Franz Professional includes:",
     "file": "src/components/auth/Pricing.js",
     "start": {
-      "line": 25,
-      "column": 15
+      "line": 47,
+      "column": 20
     },
     "end": {
-      "line": 28,
+      "line": 50,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/components/auth/Signup.json b/src/i18n/messages/src/components/auth/Signup.json
index a09745048..2ea71e5ff 100644
--- a/src/i18n/messages/src/components/auth/Signup.json
+++ b/src/i18n/messages/src/components/auth/Signup.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Sign up",
     "file": "src/components/auth/Signup.js",
     "start": {
-      "line": 18,
+      "line": 17,
       "column": 12
     },
     "end": {
-      "line": 21,
+      "line": 20,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!Firstname",
     "file": "src/components/auth/Signup.js",
     "start": {
-      "line": 22,
+      "line": 21,
       "column": 18
     },
     "end": {
-      "line": 25,
+      "line": 24,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!Lastname",
     "file": "src/components/auth/Signup.js",
     "start": {
-      "line": 26,
+      "line": 25,
       "column": 17
     },
     "end": {
-      "line": 29,
+      "line": 28,
       "column": 3
     }
   },
@@ -43,24 +43,11 @@
     "defaultMessage": "!!!Email address",
     "file": "src/components/auth/Signup.js",
     "start": {
-      "line": 30,
+      "line": 29,
       "column": 14
     },
     "end": {
-      "line": 33,
-      "column": 3
-    }
-  },
-  {
-    "id": "signup.company.label",
-    "defaultMessage": "!!!Company",
-    "file": "src/components/auth/Signup.js",
-    "start": {
-      "line": 34,
-      "column": 16
-    },
-    "end": {
-      "line": 37,
+      "line": 32,
       "column": 3
     }
   },
@@ -69,11 +56,11 @@
     "defaultMessage": "!!!Password",
     "file": "src/components/auth/Signup.js",
     "start": {
-      "line": 38,
+      "line": 37,
       "column": 17
     },
     "end": {
-      "line": 41,
+      "line": 40,
       "column": 3
     }
   },
@@ -82,11 +69,11 @@
     "defaultMessage": "!!!By creating a Franz account you accept the",
     "file": "src/components/auth/Signup.js",
     "start": {
-      "line": 42,
+      "line": 41,
       "column": 13
     },
     "end": {
-      "line": 45,
+      "line": 44,
       "column": 3
     }
   },
@@ -95,11 +82,11 @@
     "defaultMessage": "!!!Terms of service",
     "file": "src/components/auth/Signup.js",
     "start": {
-      "line": 46,
+      "line": 45,
       "column": 9
     },
     "end": {
-      "line": 49,
+      "line": 48,
       "column": 3
     }
   },
@@ -108,11 +95,11 @@
     "defaultMessage": "!!!Privacy Statement",
     "file": "src/components/auth/Signup.js",
     "start": {
-      "line": 50,
+      "line": 49,
       "column": 11
     },
     "end": {
-      "line": 53,
+      "line": 52,
       "column": 3
     }
   },
@@ -121,11 +108,11 @@
     "defaultMessage": "!!!Create account",
     "file": "src/components/auth/Signup.js",
     "start": {
-      "line": 54,
+      "line": 53,
       "column": 21
     },
     "end": {
-      "line": 57,
+      "line": 56,
       "column": 3
     }
   },
@@ -134,11 +121,11 @@
     "defaultMessage": "!!!Already have an account, sign in?",
     "file": "src/components/auth/Signup.js",
     "start": {
-      "line": 58,
+      "line": 57,
       "column": 13
     },
     "end": {
-      "line": 61,
+      "line": 60,
       "column": 3
     }
   },
@@ -147,11 +134,11 @@
     "defaultMessage": "!!!A user with that email address already exists",
     "file": "src/components/auth/Signup.js",
     "start": {
-      "line": 62,
+      "line": 61,
       "column": 18
     },
     "end": {
-      "line": 65,
+      "line": 64,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/components/layout/AppLayout.json b/src/i18n/messages/src/components/layout/AppLayout.json
index b71889155..44cf4fab9 100644
--- a/src/i18n/messages/src/components/layout/AppLayout.json
+++ b/src/i18n/messages/src/components/layout/AppLayout.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Your services have been updated.",
     "file": "src/components/layout/AppLayout.js",
     "start": {
-      "line": 27,
+      "line": 28,
       "column": 19
     },
     "end": {
-      "line": 30,
+      "line": 31,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!Reload services",
     "file": "src/components/layout/AppLayout.js",
     "start": {
-      "line": 31,
+      "line": 32,
       "column": 24
     },
     "end": {
-      "line": 34,
+      "line": 35,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!Could not load services and user information",
     "file": "src/components/layout/AppLayout.js",
     "start": {
-      "line": 35,
+      "line": 36,
       "column": 26
     },
     "end": {
-      "line": 38,
+      "line": 39,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/components/services/content/ServiceRestricted.json b/src/i18n/messages/src/components/services/content/ServiceRestricted.json
new file mode 100644
index 000000000..c1984afe3
--- /dev/null
+++ b/src/i18n/messages/src/components/services/content/ServiceRestricted.json
@@ -0,0 +1,67 @@
+[
+  {
+    "id": "service.restrictedHandler.serviceLimit.headline",
+    "defaultMessage": "!!!You have reached your service limit.",
+    "file": "src/components/services/content/ServiceRestricted.js",
+    "start": {
+      "line": 11,
+      "column": 24
+    },
+    "end": {
+      "line": 14,
+      "column": 3
+    }
+  },
+  {
+    "id": "service.restrictedHandler.serviceLimit.text",
+    "defaultMessage": "!!!Please upgrade your account to use more than {count} services.",
+    "file": "src/components/services/content/ServiceRestricted.js",
+    "start": {
+      "line": 15,
+      "column": 20
+    },
+    "end": {
+      "line": 18,
+      "column": 3
+    }
+  },
+  {
+    "id": "service.restrictedHandler.customUrl.headline",
+    "defaultMessage": "!!!Franz Professional Plan required",
+    "file": "src/components/services/content/ServiceRestricted.js",
+    "start": {
+      "line": 19,
+      "column": 21
+    },
+    "end": {
+      "line": 22,
+      "column": 3
+    }
+  },
+  {
+    "id": "service.restrictedHandler.customUrl.text",
+    "defaultMessage": "!!!Please upgrade to the Franz Professional plan to use custom urls & self hosted services.",
+    "file": "src/components/services/content/ServiceRestricted.js",
+    "start": {
+      "line": 23,
+      "column": 17
+    },
+    "end": {
+      "line": 26,
+      "column": 3
+    }
+  },
+  {
+    "id": "service.restrictedHandler.action",
+    "defaultMessage": "!!!Upgrade Account",
+    "file": "src/components/services/content/ServiceRestricted.js",
+    "start": {
+      "line": 27,
+      "column": 10
+    },
+    "end": {
+      "line": 30,
+      "column": 3
+    }
+  }
+]
\ No newline at end of file
diff --git a/src/i18n/messages/src/components/services/content/Services.json b/src/i18n/messages/src/components/services/content/Services.json
index 884ab0c90..eb466c0ac 100644
--- a/src/i18n/messages/src/components/services/content/Services.json
+++ b/src/i18n/messages/src/components/services/content/Services.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Welcome to Franz",
     "file": "src/components/services/content/Services.js",
     "start": {
-      "line": 11,
+      "line": 14,
       "column": 11
     },
     "end": {
-      "line": 14,
+      "line": 17,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!Get started",
     "file": "src/components/services/content/Services.js",
     "start": {
-      "line": 15,
+      "line": 18,
       "column": 14
     },
     "end": {
-      "line": 18,
+      "line": 21,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/components/settings/account/AccountDashboard.json b/src/i18n/messages/src/components/settings/account/AccountDashboard.json
index 4969db910..06d53e41d 100644
--- a/src/i18n/messages/src/components/settings/account/AccountDashboard.json
+++ b/src/i18n/messages/src/components/settings/account/AccountDashboard.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Account",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 14,
+      "line": 18,
       "column": 12
     },
     "end": {
-      "line": 17,
+      "line": 21,
       "column": 3
     }
   },
@@ -17,21 +17,8 @@
     "defaultMessage": "!!!Your Subscription",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 18,
-      "column": 24
-    },
-    "end": {
-      "line": 21,
-      "column": 3
-    }
-  },
-  {
-    "id": "settings.account.headlineUpgrade",
-    "defaultMessage": "!!!Upgrade your Account",
-    "file": "src/components/settings/account/AccountDashboard.js",
-    "start": {
       "line": 22,
-      "column": 19
+      "column": 24
     },
     "end": {
       "line": 25,
@@ -65,15 +52,28 @@
     }
   },
   {
+    "id": "settings.account.upgradeToPro.label",
+    "defaultMessage": "!!!Upgrade to Franz Professional",
+    "file": "src/components/settings/account/AccountDashboard.js",
+    "start": {
+      "line": 34,
+      "column": 23
+    },
+    "end": {
+      "line": 37,
+      "column": 3
+    }
+  },
+  {
     "id": "settings.account.accountType.basic",
     "defaultMessage": "!!!Basic Account",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 34,
+      "line": 38,
       "column": 20
     },
     "end": {
-      "line": 37,
+      "line": 41,
       "column": 3
     }
   },
@@ -82,11 +82,11 @@
     "defaultMessage": "!!!Premium Supporter Account",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 38,
+      "line": 42,
       "column": 22
     },
     "end": {
-      "line": 41,
+      "line": 45,
       "column": 3
     }
   },
@@ -95,11 +95,11 @@
     "defaultMessage": "!!!Edit Account",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 42,
+      "line": 46,
       "column": 21
     },
     "end": {
-      "line": 45,
+      "line": 49,
       "column": 3
     }
   },
@@ -108,11 +108,11 @@
     "defaultMessage": "!!Invoices",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 46,
+      "line": 50,
       "column": 18
     },
     "end": {
-      "line": 49,
+      "line": 53,
       "column": 3
     }
   },
@@ -121,11 +121,11 @@
     "defaultMessage": "!!!Download",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 50,
+      "line": 54,
       "column": 19
     },
     "end": {
-      "line": 53,
+      "line": 57,
       "column": 3
     }
   },
@@ -134,11 +134,11 @@
     "defaultMessage": "!!!Could not load user information",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 54,
+      "line": 58,
       "column": 25
     },
     "end": {
-      "line": 57,
+      "line": 61,
       "column": 3
     }
   },
@@ -147,11 +147,11 @@
     "defaultMessage": "!!!Try again",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 58,
+      "line": 62,
       "column": 28
     },
     "end": {
-      "line": 61,
+      "line": 65,
       "column": 3
     }
   },
@@ -160,11 +160,11 @@
     "defaultMessage": "!!!Delete account",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 62,
+      "line": 66,
       "column": 17
     },
     "end": {
-      "line": 65,
+      "line": 69,
       "column": 3
     }
   },
@@ -173,11 +173,11 @@
     "defaultMessage": "!!!If you don't need your Franz account any longer, you can delete your account and all related data here.",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 66,
+      "line": 70,
       "column": 14
     },
     "end": {
-      "line": 69,
+      "line": 73,
       "column": 3
     }
   },
@@ -186,11 +186,63 @@
     "defaultMessage": "!!!You have received an email with a link to confirm your account deletion. Your account and data cannot be restored!",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 70,
+      "line": 74,
       "column": 19
     },
     "end": {
-      "line": 73,
+      "line": 77,
+      "column": 3
+    }
+  },
+  {
+    "id": "settings.account.trial",
+    "defaultMessage": "!!!Free Trial",
+    "file": "src/components/settings/account/AccountDashboard.js",
+    "start": {
+      "line": 78,
+      "column": 9
+    },
+    "end": {
+      "line": 81,
+      "column": 3
+    }
+  },
+  {
+    "id": "settings.account.yourLicense",
+    "defaultMessage": "!!!Your Franz License:",
+    "file": "src/components/settings/account/AccountDashboard.js",
+    "start": {
+      "line": 82,
+      "column": 15
+    },
+    "end": {
+      "line": 85,
+      "column": 3
+    }
+  },
+  {
+    "id": "settings.account.trialEndsIn",
+    "defaultMessage": "!!!Your free trial ends in {duration}.",
+    "file": "src/components/settings/account/AccountDashboard.js",
+    "start": {
+      "line": 86,
+      "column": 15
+    },
+    "end": {
+      "line": 89,
+      "column": 3
+    }
+  },
+  {
+    "id": "settings.account.trialUpdateBillingInfo",
+    "defaultMessage": "!!!Please update your billing info to continue using {license} after your trial period.",
+    "file": "src/components/settings/account/AccountDashboard.js",
+    "start": {
+      "line": 90,
+      "column": 33
+    },
+    "end": {
+      "line": 93,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/components/settings/navigation/SettingsNavigation.json b/src/i18n/messages/src/components/settings/navigation/SettingsNavigation.json
index 70a989211..7dfb3ce04 100644
--- a/src/i18n/messages/src/components/settings/navigation/SettingsNavigation.json
+++ b/src/i18n/messages/src/components/settings/navigation/SettingsNavigation.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Available services",
     "file": "src/components/settings/navigation/SettingsNavigation.js",
     "start": {
-      "line": 13,
+      "line": 14,
       "column": 21
     },
     "end": {
-      "line": 16,
+      "line": 17,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!Your services",
     "file": "src/components/settings/navigation/SettingsNavigation.js",
     "start": {
-      "line": 17,
+      "line": 18,
       "column": 16
     },
     "end": {
-      "line": 20,
+      "line": 21,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!Your workspaces",
     "file": "src/components/settings/navigation/SettingsNavigation.js",
     "start": {
-      "line": 21,
+      "line": 22,
       "column": 18
     },
     "end": {
-      "line": 24,
+      "line": 25,
       "column": 3
     }
   },
@@ -43,11 +43,11 @@
     "defaultMessage": "!!!Account",
     "file": "src/components/settings/navigation/SettingsNavigation.js",
     "start": {
-      "line": 25,
+      "line": 26,
       "column": 11
     },
     "end": {
-      "line": 28,
+      "line": 29,
       "column": 3
     }
   },
@@ -56,11 +56,11 @@
     "defaultMessage": "!!!Manage Team",
     "file": "src/components/settings/navigation/SettingsNavigation.js",
     "start": {
-      "line": 29,
+      "line": 30,
       "column": 8
     },
     "end": {
-      "line": 32,
+      "line": 33,
       "column": 3
     }
   },
@@ -69,11 +69,11 @@
     "defaultMessage": "!!!Settings",
     "file": "src/components/settings/navigation/SettingsNavigation.js",
     "start": {
-      "line": 33,
+      "line": 34,
       "column": 12
     },
     "end": {
-      "line": 36,
+      "line": 37,
       "column": 3
     }
   },
@@ -82,11 +82,11 @@
     "defaultMessage": "!!!Invite Friends",
     "file": "src/components/settings/navigation/SettingsNavigation.js",
     "start": {
-      "line": 37,
+      "line": 38,
       "column": 17
     },
     "end": {
-      "line": 40,
+      "line": 41,
       "column": 3
     }
   },
@@ -95,11 +95,11 @@
     "defaultMessage": "!!!Logout",
     "file": "src/components/settings/navigation/SettingsNavigation.js",
     "start": {
-      "line": 41,
+      "line": 42,
       "column": 10
     },
     "end": {
-      "line": 44,
+      "line": 45,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/components/settings/recipes/RecipesDashboard.json b/src/i18n/messages/src/components/settings/recipes/RecipesDashboard.json
index 7d9ed3283..8afaaed50 100644
--- a/src/i18n/messages/src/components/settings/recipes/RecipesDashboard.json
+++ b/src/i18n/messages/src/components/settings/recipes/RecipesDashboard.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Available Services",
     "file": "src/components/settings/recipes/RecipesDashboard.js",
     "start": {
-      "line": 15,
+      "line": 20,
       "column": 12
     },
     "end": {
-      "line": 18,
+      "line": 23,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!Search service",
     "file": "src/components/settings/recipes/RecipesDashboard.js",
     "start": {
-      "line": 19,
+      "line": 24,
       "column": 17
     },
     "end": {
-      "line": 22,
+      "line": 27,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!Most popular",
     "file": "src/components/settings/recipes/RecipesDashboard.js",
     "start": {
-      "line": 23,
+      "line": 28,
       "column": 22
     },
     "end": {
-      "line": 26,
+      "line": 31,
       "column": 3
     }
   },
@@ -43,24 +43,24 @@
     "defaultMessage": "!!!All services",
     "file": "src/components/settings/recipes/RecipesDashboard.js",
     "start": {
-      "line": 27,
+      "line": 32,
       "column": 14
     },
     "end": {
-      "line": 30,
+      "line": 35,
       "column": 3
     }
   },
   {
-    "id": "settings.recipes.dev",
-    "defaultMessage": "!!!Development",
+    "id": "settings.recipes.custom",
+    "defaultMessage": "!!!Custom Services",
     "file": "src/components/settings/recipes/RecipesDashboard.js",
     "start": {
-      "line": 31,
-      "column": 14
+      "line": 36,
+      "column": 17
     },
     "end": {
-      "line": 34,
+      "line": 39,
       "column": 3
     }
   },
@@ -69,11 +69,11 @@
     "defaultMessage": "!!!Sorry, but no service matched your search term.",
     "file": "src/components/settings/recipes/RecipesDashboard.js",
     "start": {
-      "line": 35,
+      "line": 40,
       "column": 16
     },
     "end": {
-      "line": 38,
+      "line": 43,
       "column": 3
     }
   },
@@ -82,11 +82,11 @@
     "defaultMessage": "!!!Service successfully added",
     "file": "src/components/settings/recipes/RecipesDashboard.js",
     "start": {
-      "line": 39,
+      "line": 44,
       "column": 31
     },
     "end": {
-      "line": 42,
+      "line": 47,
       "column": 3
     }
   },
@@ -95,11 +95,89 @@
     "defaultMessage": "!!!Missing a service?",
     "file": "src/components/settings/recipes/RecipesDashboard.js",
     "start": {
-      "line": 43,
+      "line": 48,
       "column": 18
     },
     "end": {
-      "line": 46,
+      "line": 51,
+      "column": 3
+    }
+  },
+  {
+    "id": "settings.recipes.customService.intro",
+    "defaultMessage": "!!!To add a custom service, copy the recipe folder into:",
+    "file": "src/components/settings/recipes/RecipesDashboard.js",
+    "start": {
+      "line": 52,
+      "column": 21
+    },
+    "end": {
+      "line": 55,
+      "column": 3
+    }
+  },
+  {
+    "id": "settings.recipes.customService.openFolder",
+    "defaultMessage": "!!!Open directory",
+    "file": "src/components/settings/recipes/RecipesDashboard.js",
+    "start": {
+      "line": 56,
+      "column": 14
+    },
+    "end": {
+      "line": 59,
+      "column": 3
+    }
+  },
+  {
+    "id": "settings.recipes.customService.openDevDocs",
+    "defaultMessage": "!!!Developer Documentation",
+    "file": "src/components/settings/recipes/RecipesDashboard.js",
+    "start": {
+      "line": 60,
+      "column": 15
+    },
+    "end": {
+      "line": 63,
+      "column": 3
+    }
+  },
+  {
+    "id": "settings.recipes.customService.headline.customRecipes",
+    "defaultMessage": "!!!Custom Service Recipes",
+    "file": "src/components/settings/recipes/RecipesDashboard.js",
+    "start": {
+      "line": 64,
+      "column": 25
+    },
+    "end": {
+      "line": 67,
+      "column": 3
+    }
+  },
+  {
+    "id": "settings.recipes.customService.headline.communityRecipes",
+    "defaultMessage": "!!!Community Services",
+    "file": "src/components/settings/recipes/RecipesDashboard.js",
+    "start": {
+      "line": 68,
+      "column": 28
+    },
+    "end": {
+      "line": 71,
+      "column": 3
+    }
+  },
+  {
+    "id": "settings.recipes.customService.headline.devRecipes",
+    "defaultMessage": "!!!Your Development Service Recipes",
+    "file": "src/components/settings/recipes/RecipesDashboard.js",
+    "start": {
+      "line": 72,
+      "column": 22
+    },
+    "end": {
+      "line": 75,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/components/settings/services/EditServiceForm.json b/src/i18n/messages/src/components/settings/services/EditServiceForm.json
index 42b741b7a..e66db807d 100644
--- a/src/i18n/messages/src/components/settings/services/EditServiceForm.json
+++ b/src/i18n/messages/src/components/settings/services/EditServiceForm.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Save service",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 22,
+      "line": 24,
       "column": 15
     },
     "end": {
-      "line": 25,
+      "line": 27,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!Delete Service",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 26,
+      "line": 28,
       "column": 17
     },
     "end": {
-      "line": 29,
+      "line": 31,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!Available services",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 30,
+      "line": 32,
       "column": 21
     },
     "end": {
-      "line": 33,
+      "line": 35,
       "column": 3
     }
   },
@@ -43,11 +43,11 @@
     "defaultMessage": "!!!Your services",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 34,
+      "line": 36,
       "column": 16
     },
     "end": {
-      "line": 37,
+      "line": 39,
       "column": 3
     }
   },
@@ -56,11 +56,11 @@
     "defaultMessage": "!!!Add {name}",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 38,
+      "line": 40,
       "column": 22
     },
     "end": {
-      "line": 41,
+      "line": 43,
       "column": 3
     }
   },
@@ -69,11 +69,11 @@
     "defaultMessage": "!!!Edit {name}",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 42,
+      "line": 44,
       "column": 23
     },
     "end": {
-      "line": 45,
+      "line": 47,
       "column": 3
     }
   },
@@ -82,11 +82,11 @@
     "defaultMessage": "!!!Hosted",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 46,
+      "line": 48,
       "column": 13
     },
     "end": {
-      "line": 49,
+      "line": 51,
       "column": 3
     }
   },
@@ -95,11 +95,11 @@
     "defaultMessage": "!!!Self hosted ⭐️",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 50,
+      "line": 52,
       "column": 16
     },
     "end": {
-      "line": 53,
+      "line": 55,
       "column": 3
     }
   },
@@ -108,11 +108,11 @@
     "defaultMessage": "!!!Use the hosted {name} service.",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 54,
+      "line": 56,
       "column": 20
     },
     "end": {
-      "line": 57,
+      "line": 59,
       "column": 3
     }
   },
@@ -121,11 +121,11 @@
     "defaultMessage": "!!!Could not validate custom {name} server.",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 58,
+      "line": 60,
       "column": 28
     },
     "end": {
-      "line": 61,
+      "line": 63,
       "column": 3
     }
   },
@@ -134,11 +134,11 @@
     "defaultMessage": "!!!To add self hosted services, you need a Franz Premium Supporter Account.",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 62,
+      "line": 64,
       "column": 24
     },
     "end": {
-      "line": 65,
+      "line": 67,
       "column": 3
     }
   },
@@ -147,11 +147,11 @@
     "defaultMessage": "!!!Upgrade your account",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 66,
+      "line": 68,
       "column": 27
     },
     "end": {
-      "line": 69,
+      "line": 71,
       "column": 3
     }
   },
@@ -160,11 +160,11 @@
     "defaultMessage": "!!!You will be notified about all new messages in a channel, not just @username, @channel, @here, ...",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 70,
+      "line": 72,
       "column": 23
     },
     "end": {
-      "line": 73,
+      "line": 75,
       "column": 3
     }
   },
@@ -173,11 +173,11 @@
     "defaultMessage": "!!!When disabled, all notification sounds and audio playback are muted",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 74,
+      "line": 76,
       "column": 15
     },
     "end": {
-      "line": 77,
+      "line": 79,
       "column": 3
     }
   },
@@ -186,11 +186,11 @@
     "defaultMessage": "!!!Notifications",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 78,
+      "line": 80,
       "column": 25
     },
     "end": {
-      "line": 81,
+      "line": 83,
       "column": 3
     }
   },
@@ -199,11 +199,11 @@
     "defaultMessage": "!!!Unread message badges",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 82,
+      "line": 84,
       "column": 18
     },
     "end": {
-      "line": 85,
+      "line": 87,
       "column": 3
     }
   },
@@ -212,11 +212,11 @@
     "defaultMessage": "!!!General",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 86,
+      "line": 88,
       "column": 19
     },
     "end": {
-      "line": 89,
+      "line": 91,
       "column": 3
     }
   },
@@ -225,11 +225,11 @@
     "defaultMessage": "!!!Delete",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 90,
+      "line": 92,
       "column": 14
     },
     "end": {
-      "line": 93,
+      "line": 95,
       "column": 3
     }
   },
@@ -238,11 +238,11 @@
     "defaultMessage": "!!!Drop your image, or click here",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 94,
+      "line": 96,
       "column": 14
     },
     "end": {
-      "line": 97,
+      "line": 99,
       "column": 3
     }
   },
@@ -251,11 +251,11 @@
     "defaultMessage": "!!!HTTP/HTTPS Proxy Settings",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 98,
+      "line": 100,
       "column": 17
     },
     "end": {
-      "line": 101,
+      "line": 103,
       "column": 3
     }
   },
@@ -264,11 +264,11 @@
     "defaultMessage": "!!!Please restart Franz after changing proxy Settings.",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 102,
+      "line": 104,
       "column": 20
     },
     "end": {
-      "line": 105,
+      "line": 107,
       "column": 3
     }
   },
@@ -277,11 +277,11 @@
     "defaultMessage": "!!!Proxy settings will not be synchronized with the Franz servers.",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 106,
+      "line": 108,
       "column": 13
     },
     "end": {
-      "line": 109,
+      "line": 111,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/components/settings/services/ServicesDashboard.json b/src/i18n/messages/src/components/settings/services/ServicesDashboard.json
index 3803c6512..fa661ea2f 100644
--- a/src/i18n/messages/src/components/settings/services/ServicesDashboard.json
+++ b/src/i18n/messages/src/components/settings/services/ServicesDashboard.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Your services",
     "file": "src/components/settings/services/ServicesDashboard.js",
     "start": {
-      "line": 14,
+      "line": 15,
       "column": 12
     },
     "end": {
-      "line": 17,
+      "line": 18,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!Search service",
     "file": "src/components/settings/services/ServicesDashboard.js",
     "start": {
-      "line": 18,
+      "line": 19,
       "column": 17
     },
     "end": {
-      "line": 21,
+      "line": 22,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!You haven't added any services yet.",
     "file": "src/components/settings/services/ServicesDashboard.js",
     "start": {
-      "line": 22,
+      "line": 23,
       "column": 19
     },
     "end": {
-      "line": 25,
+      "line": 26,
       "column": 3
     }
   },
@@ -43,11 +43,11 @@
     "defaultMessage": "!!!Sorry, but no service matched your search term.",
     "file": "src/components/settings/services/ServicesDashboard.js",
     "start": {
-      "line": 26,
+      "line": 27,
       "column": 18
     },
     "end": {
-      "line": 29,
+      "line": 30,
       "column": 3
     }
   },
@@ -56,11 +56,11 @@
     "defaultMessage": "!!!Discover services",
     "file": "src/components/settings/services/ServicesDashboard.js",
     "start": {
-      "line": 30,
+      "line": 31,
       "column": 20
     },
     "end": {
-      "line": 33,
+      "line": 34,
       "column": 3
     }
   },
@@ -69,11 +69,11 @@
     "defaultMessage": "!!!Could not load your services",
     "file": "src/components/settings/services/ServicesDashboard.js",
     "start": {
-      "line": 34,
+      "line": 35,
       "column": 25
     },
     "end": {
-      "line": 37,
+      "line": 38,
       "column": 3
     }
   },
@@ -82,11 +82,11 @@
     "defaultMessage": "!!!Try again",
     "file": "src/components/settings/services/ServicesDashboard.js",
     "start": {
-      "line": 38,
+      "line": 39,
       "column": 21
     },
     "end": {
-      "line": 41,
+      "line": 42,
       "column": 3
     }
   },
@@ -95,11 +95,11 @@
     "defaultMessage": "!!!Your changes have been saved",
     "file": "src/components/settings/services/ServicesDashboard.js",
     "start": {
-      "line": 42,
+      "line": 43,
       "column": 15
     },
     "end": {
-      "line": 45,
+      "line": 46,
       "column": 3
     }
   },
@@ -108,11 +108,11 @@
     "defaultMessage": "!!!Service has been deleted",
     "file": "src/components/settings/services/ServicesDashboard.js",
     "start": {
-      "line": 46,
+      "line": 47,
       "column": 15
     },
     "end": {
-      "line": 49,
+      "line": 50,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/components/subscription/SubscriptionForm.json b/src/i18n/messages/src/components/subscription/SubscriptionForm.json
index f98eb986f..6d235254e 100644
--- a/src/i18n/messages/src/components/subscription/SubscriptionForm.json
+++ b/src/i18n/messages/src/components/subscription/SubscriptionForm.json
@@ -1,183 +1,53 @@
 [
   {
-    "id": "subscription.submit.label",
-    "defaultMessage": "!!!Support the development of Franz",
+    "id": "subscription.cta.choosePlan",
+    "defaultMessage": "!!!Choose your plan",
     "file": "src/components/subscription/SubscriptionForm.js",
     "start": {
-      "line": 14,
+      "line": 13,
       "column": 21
     },
     "end": {
-      "line": 17,
-      "column": 3
-    }
-  },
-  {
-    "id": "subscription.paymentSessionError",
-    "defaultMessage": "!!!Could not initialize payment form",
-    "file": "src/components/subscription/SubscriptionForm.js",
-    "start": {
-      "line": 18,
-      "column": 23
-    },
-    "end": {
-      "line": 21,
-      "column": 3
-    }
-  },
-  {
-    "id": "subscription.type.free",
-    "defaultMessage": "!!!free",
-    "file": "src/components/subscription/SubscriptionForm.js",
-    "start": {
-      "line": 22,
-      "column": 12
-    },
-    "end": {
-      "line": 25,
+      "line": 16,
       "column": 3
     }
   },
   {
-    "id": "subscription.type.month",
-    "defaultMessage": "!!!month",
+    "id": "settings.account.headlineUpgradeAccount",
+    "defaultMessage": "!!!Upgrade your account and get the full Franz experience",
     "file": "src/components/subscription/SubscriptionForm.js",
     "start": {
-      "line": 26,
-      "column": 15
+      "line": 17,
+      "column": 18
     },
     "end": {
-      "line": 29,
+      "line": 20,
       "column": 3
     }
   },
   {
-    "id": "subscription.type.year",
-    "defaultMessage": "!!!year",
+    "id": "subscription.teaser.intro",
+    "defaultMessage": "!!!Franz 5 comes with a wide range of new features to boost up your everyday communication - batteries included. Check out our new plans and find out which one suits you most!",
     "file": "src/components/subscription/SubscriptionForm.js",
     "start": {
-      "line": 30,
+      "line": 21,
       "column": 14
     },
     "end": {
-      "line": 33,
+      "line": 24,
       "column": 3
     }
   },
   {
-    "id": "subscription.includedFeatures",
-    "defaultMessage": "!!!The Franz Premium Supporter Account includes",
+    "id": "subscription.teaser.includedFeatures",
+    "defaultMessage": "!!!Paid Franz Plans include:",
     "file": "src/components/subscription/SubscriptionForm.js",
     "start": {
-      "line": 34,
+      "line": 25,
       "column": 20
     },
     "end": {
-      "line": 37,
-      "column": 3
-    }
-  },
-  {
-    "id": "subscription.features.onpremise.mattermost",
-    "defaultMessage": "!!!Add on-premise/hosted services like Mattermost",
-    "file": "src/components/subscription/SubscriptionForm.js",
-    "start": {
-      "line": 38,
-      "column": 13
-    },
-    "end": {
-      "line": 41,
-      "column": 3
-    }
-  },
-  {
-    "id": "subscription.features.noInterruptions",
-    "defaultMessage": "!!!No app delays & nagging to upgrade license",
-    "file": "src/components/subscription/SubscriptionForm.js",
-    "start": {
-      "line": 42,
-      "column": 19
-    },
-    "end": {
-      "line": 45,
-      "column": 3
-    }
-  },
-  {
-    "id": "subscription.features.proxy",
-    "defaultMessage": "!!!Proxy support for services",
-    "file": "src/components/subscription/SubscriptionForm.js",
-    "start": {
-      "line": 46,
-      "column": 9
-    },
-    "end": {
-      "line": 49,
-      "column": 3
-    }
-  },
-  {
-    "id": "subscription.features.spellchecker",
-    "defaultMessage": "!!!Support for Spellchecker",
-    "file": "src/components/subscription/SubscriptionForm.js",
-    "start": {
-      "line": 50,
-      "column": 16
-    },
-    "end": {
-      "line": 53,
-      "column": 3
-    }
-  },
-  {
-    "id": "subscription.features.workspaces",
-    "defaultMessage": "!!!Organize your services in workspaces",
-    "file": "src/components/subscription/SubscriptionForm.js",
-    "start": {
-      "line": 54,
-      "column": 14
-    },
-    "end": {
-      "line": 57,
-      "column": 3
-    }
-  },
-  {
-    "id": "subscription.features.ads",
-    "defaultMessage": "!!!No ads, ever!",
-    "file": "src/components/subscription/SubscriptionForm.js",
-    "start": {
-      "line": 58,
-      "column": 7
-    },
-    "end": {
-      "line": 61,
-      "column": 3
-    }
-  },
-  {
-    "id": "subscription.features.comingSoon",
-    "defaultMessage": "!!!coming soon",
-    "file": "src/components/subscription/SubscriptionForm.js",
-    "start": {
-      "line": 62,
-      "column": 14
-    },
-    "end": {
-      "line": 65,
-      "column": 3
-    }
-  },
-  {
-    "id": "subscription.euTaxInfo",
-    "defaultMessage": "!!!EU residents: local sales tax may apply",
-    "file": "src/components/subscription/SubscriptionForm.js",
-    "start": {
-      "line": 66,
-      "column": 13
-    },
-    "end": {
-      "line": 69,
+      "line": 28,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/components/subscription/TrialForm.json b/src/i18n/messages/src/components/subscription/TrialForm.json
new file mode 100644
index 000000000..8b387ba36
--- /dev/null
+++ b/src/i18n/messages/src/components/subscription/TrialForm.json
@@ -0,0 +1,93 @@
+[
+  {
+    "id": "subscription.cta.activateTrial",
+    "defaultMessage": "!!!Yes, start the free Franz Professional trial",
+    "file": "src/components/subscription/TrialForm.js",
+    "start": {
+      "line": 14,
+      "column": 21
+    },
+    "end": {
+      "line": 17,
+      "column": 3
+    }
+  },
+  {
+    "id": "subscription.cta.allOptions",
+    "defaultMessage": "!!!See all options",
+    "file": "src/components/subscription/TrialForm.js",
+    "start": {
+      "line": 18,
+      "column": 20
+    },
+    "end": {
+      "line": 21,
+      "column": 3
+    }
+  },
+  {
+    "id": "settings.account.headlineTrialUpgrade",
+    "defaultMessage": "!!!Get the free 14 day Franz Professional Trial",
+    "file": "src/components/subscription/TrialForm.js",
+    "start": {
+      "line": 22,
+      "column": 18
+    },
+    "end": {
+      "line": 25,
+      "column": 3
+    }
+  },
+  {
+    "id": "subscription.includedProFeatures",
+    "defaultMessage": "!!!The Franz Professional Plan includes:",
+    "file": "src/components/subscription/TrialForm.js",
+    "start": {
+      "line": 26,
+      "column": 20
+    },
+    "end": {
+      "line": 29,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.trial.terms.headline",
+    "defaultMessage": "!!!No strings attached",
+    "file": "src/components/subscription/TrialForm.js",
+    "start": {
+      "line": 30,
+      "column": 29
+    },
+    "end": {
+      "line": 33,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.trial.terms.noCreditCard",
+    "defaultMessage": "!!!No credit card required",
+    "file": "src/components/subscription/TrialForm.js",
+    "start": {
+      "line": 34,
+      "column": 16
+    },
+    "end": {
+      "line": 37,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.trial.terms.automaticTrialEnd",
+    "defaultMessage": "!!!Your free trial ends automatically after 14 days",
+    "file": "src/components/subscription/TrialForm.js",
+    "start": {
+      "line": 38,
+      "column": 21
+    },
+    "end": {
+      "line": 41,
+      "column": 3
+    }
+  }
+]
\ No newline at end of file
diff --git a/src/i18n/messages/src/components/ui/ActivateTrialButton/index.json b/src/i18n/messages/src/components/ui/ActivateTrialButton/index.json
new file mode 100644
index 000000000..08c1a9293
--- /dev/null
+++ b/src/i18n/messages/src/components/ui/ActivateTrialButton/index.json
@@ -0,0 +1,54 @@
+[
+  {
+    "id": "feature.delayApp.upgrade.action",
+    "defaultMessage": "!!!Get a Franz Supporter License",
+    "file": "src/components/ui/ActivateTrialButton/index.js",
+    "start": {
+      "line": 13,
+      "column": 10
+    },
+    "end": {
+      "line": 16,
+      "column": 3
+    }
+  },
+  {
+    "id": "feature.delayApp.trial.action",
+    "defaultMessage": "!!!Yes, I want the free 14 day trial of Franz Professional",
+    "file": "src/components/ui/ActivateTrialButton/index.js",
+    "start": {
+      "line": 17,
+      "column": 15
+    },
+    "end": {
+      "line": 20,
+      "column": 3
+    }
+  },
+  {
+    "id": "feature.delayApp.upgrade.actionShort",
+    "defaultMessage": "!!!Upgrade account",
+    "file": "src/components/ui/ActivateTrialButton/index.js",
+    "start": {
+      "line": 21,
+      "column": 15
+    },
+    "end": {
+      "line": 24,
+      "column": 3
+    }
+  },
+  {
+    "id": "feature.delayApp.trial.actionShort",
+    "defaultMessage": "!!!Activate the free Franz Professional trial",
+    "file": "src/components/ui/ActivateTrialButton/index.js",
+    "start": {
+      "line": 25,
+      "column": 20
+    },
+    "end": {
+      "line": 28,
+      "column": 3
+    }
+  }
+]
\ No newline at end of file
diff --git a/src/i18n/messages/src/components/ui/FeatureList.json b/src/i18n/messages/src/components/ui/FeatureList.json
new file mode 100644
index 000000000..497e299a4
--- /dev/null
+++ b/src/i18n/messages/src/components/ui/FeatureList.json
@@ -0,0 +1,132 @@
+[
+  {
+    "id": "pricing.features.unlimitedServices",
+    "defaultMessage": "!!!Add unlimited services",
+    "file": "src/components/ui/FeatureList.js",
+    "start": {
+      "line": 8,
+      "column": 21
+    },
+    "end": {
+      "line": 11,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.features.spellchecker",
+    "defaultMessage": "!!!Spellchecker support",
+    "file": "src/components/ui/FeatureList.js",
+    "start": {
+      "line": 12,
+      "column": 16
+    },
+    "end": {
+      "line": 15,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.features.workspaces",
+    "defaultMessage": "!!!Workspaces",
+    "file": "src/components/ui/FeatureList.js",
+    "start": {
+      "line": 16,
+      "column": 14
+    },
+    "end": {
+      "line": 19,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.features.customWebsites",
+    "defaultMessage": "!!!Add Custom Websites",
+    "file": "src/components/ui/FeatureList.js",
+    "start": {
+      "line": 20,
+      "column": 18
+    },
+    "end": {
+      "line": 23,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.features.onPremise",
+    "defaultMessage": "!!!On-premise & other Hosted Services",
+    "file": "src/components/ui/FeatureList.js",
+    "start": {
+      "line": 24,
+      "column": 13
+    },
+    "end": {
+      "line": 27,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.features.thirdPartyServices",
+    "defaultMessage": "!!!Install 3rd party services",
+    "file": "src/components/ui/FeatureList.js",
+    "start": {
+      "line": 28,
+      "column": 22
+    },
+    "end": {
+      "line": 31,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.features.serviceProxies",
+    "defaultMessage": "!!!Service Proxies",
+    "file": "src/components/ui/FeatureList.js",
+    "start": {
+      "line": 32,
+      "column": 18
+    },
+    "end": {
+      "line": 35,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.features.teamManagement",
+    "defaultMessage": "!!!Team Management",
+    "file": "src/components/ui/FeatureList.js",
+    "start": {
+      "line": 36,
+      "column": 18
+    },
+    "end": {
+      "line": 39,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.features.appDelays",
+    "defaultMessage": "!!!No Waiting Screens",
+    "file": "src/components/ui/FeatureList.js",
+    "start": {
+      "line": 40,
+      "column": 13
+    },
+    "end": {
+      "line": 43,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.features.adFree",
+    "defaultMessage": "!!!Forever ad-free",
+    "file": "src/components/ui/FeatureList.js",
+    "start": {
+      "line": 44,
+      "column": 10
+    },
+    "end": {
+      "line": 47,
+      "column": 3
+    }
+  }
+]
\ No newline at end of file
diff --git a/src/i18n/messages/src/components/ui/PremiumFeatureContainer/index.json b/src/i18n/messages/src/components/ui/PremiumFeatureContainer/index.json
index 320d3ca3e..0cde4cee5 100644
--- a/src/i18n/messages/src/components/ui/PremiumFeatureContainer/index.json
+++ b/src/i18n/messages/src/components/ui/PremiumFeatureContainer/index.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Upgrade account",
     "file": "src/components/ui/PremiumFeatureContainer/index.js",
     "start": {
-      "line": 15,
+      "line": 16,
       "column": 10
     },
     "end": {
-      "line": 18,
+      "line": 19,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/features/delayApp/Component.json b/src/i18n/messages/src/features/delayApp/Component.json
index bacd9444a..0d345a47b 100644
--- a/src/i18n/messages/src/features/delayApp/Component.json
+++ b/src/i18n/messages/src/features/delayApp/Component.json
@@ -4,24 +4,50 @@
     "defaultMessage": "!!!Please purchase license to skip waiting",
     "file": "src/features/delayApp/Component.js",
     "start": {
-      "line": 15,
+      "line": 17,
       "column": 12
     },
     "end": {
-      "line": 18,
+      "line": 20,
       "column": 3
     }
   },
   {
-    "id": "feature.delayApp.action",
+    "id": "feature.delayApp.trial.headline",
+    "defaultMessage": "!!!Get the free Franz Professional 14 day trial and skip the line",
+    "file": "src/features/delayApp/Component.js",
+    "start": {
+      "line": 21,
+      "column": 17
+    },
+    "end": {
+      "line": 24,
+      "column": 3
+    }
+  },
+  {
+    "id": "feature.delayApp.upgrade.action",
     "defaultMessage": "!!!Get a Franz Supporter License",
     "file": "src/features/delayApp/Component.js",
     "start": {
-      "line": 19,
+      "line": 25,
       "column": 10
     },
     "end": {
-      "line": 22,
+      "line": 28,
+      "column": 3
+    }
+  },
+  {
+    "id": "feature.delayApp.trial.action",
+    "defaultMessage": "!!!Yes, I want the free 14 day trial of Franz Professional",
+    "file": "src/features/delayApp/Component.js",
+    "start": {
+      "line": 29,
+      "column": 15
+    },
+    "end": {
+      "line": 32,
       "column": 3
     }
   },
@@ -30,11 +56,11 @@
     "defaultMessage": "!!!Franz will continue in {seconds} seconds.",
     "file": "src/features/delayApp/Component.js",
     "start": {
-      "line": 23,
+      "line": 33,
       "column": 8
     },
     "end": {
-      "line": 26,
+      "line": 36,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/features/serviceLimit/components/AnnouncementScreen.json b/src/i18n/messages/src/features/serviceLimit/components/AnnouncementScreen.json
new file mode 100644
index 000000000..e6e3cef99
--- /dev/null
+++ b/src/i18n/messages/src/features/serviceLimit/components/AnnouncementScreen.json
@@ -0,0 +1,15 @@
+[
+  {
+    "id": "feature.announcements.changelog.headline",
+    "defaultMessage": "!!!Changes in Franz {version}",
+    "file": "src/features/serviceLimit/components/AnnouncementScreen.js",
+    "start": {
+      "line": 20,
+      "column": 12
+    },
+    "end": {
+      "line": 23,
+      "column": 3
+    }
+  }
+]
\ No newline at end of file
diff --git a/src/i18n/messages/src/features/serviceLimit/components/LimitReachedInfobox.json b/src/i18n/messages/src/features/serviceLimit/components/LimitReachedInfobox.json
new file mode 100644
index 000000000..df5bc03e8
--- /dev/null
+++ b/src/i18n/messages/src/features/serviceLimit/components/LimitReachedInfobox.json
@@ -0,0 +1,28 @@
+[
+  {
+    "id": "feature.serviceLimit.limitReached",
+    "defaultMessage": "!!!You have added {amount} of {limit} services. Please upgrade your account to add more services.",
+    "file": "src/features/serviceLimit/components/LimitReachedInfobox.js",
+    "start": {
+      "line": 11,
+      "column": 16
+    },
+    "end": {
+      "line": 14,
+      "column": 3
+    }
+  },
+  {
+    "id": "premiumFeature.button.upgradeAccount",
+    "defaultMessage": "!!!Upgrade account",
+    "file": "src/features/serviceLimit/components/LimitReachedInfobox.js",
+    "start": {
+      "line": 15,
+      "column": 10
+    },
+    "end": {
+      "line": 18,
+      "column": 3
+    }
+  }
+]
\ No newline at end of file
diff --git a/src/i18n/messages/src/features/shareFranz/Component.json b/src/i18n/messages/src/features/shareFranz/Component.json
index 34a43d5a0..72150f2b0 100644
--- a/src/i18n/messages/src/features/shareFranz/Component.json
+++ b/src/i18n/messages/src/features/shareFranz/Component.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Franz is better together!",
     "file": "src/features/shareFranz/Component.js",
     "start": {
-      "line": 15,
+      "line": 18,
       "column": 12
     },
     "end": {
-      "line": 18,
+      "line": 21,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!Tell your friends and colleagues how awesome Franz is and help us to spread the word.",
     "file": "src/features/shareFranz/Component.js",
     "start": {
-      "line": 19,
+      "line": 22,
       "column": 8
     },
     "end": {
-      "line": 22,
+      "line": 25,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!Share as email",
     "file": "src/features/shareFranz/Component.js",
     "start": {
-      "line": 23,
+      "line": 26,
       "column": 16
     },
     "end": {
-      "line": 26,
+      "line": 29,
       "column": 3
     }
   },
@@ -43,11 +43,11 @@
     "defaultMessage": "!!!Share on Facebook",
     "file": "src/features/shareFranz/Component.js",
     "start": {
-      "line": 27,
+      "line": 30,
       "column": 19
     },
     "end": {
-      "line": 30,
+      "line": 33,
       "column": 3
     }
   },
@@ -56,11 +56,11 @@
     "defaultMessage": "!!!Share on Twitter",
     "file": "src/features/shareFranz/Component.js",
     "start": {
-      "line": 31,
+      "line": 34,
       "column": 18
     },
     "end": {
-      "line": 34,
+      "line": 37,
       "column": 3
     }
   },
@@ -69,11 +69,11 @@
     "defaultMessage": "!!! I've added {count} services to Franz! Get the free app for WhatsApp, Messenger, Slack, Skype and co at www.meetfranz.com",
     "file": "src/features/shareFranz/Component.js",
     "start": {
-      "line": 35,
+      "line": 38,
       "column": 18
     },
     "end": {
-      "line": 38,
+      "line": 41,
       "column": 3
     }
   },
@@ -82,11 +82,11 @@
     "defaultMessage": "!!! I've added {count} services to Franz! Get the free app for WhatsApp, Messenger, Slack, Skype and co at www.meetfranz.com /cc @FranzMessenger",
     "file": "src/features/shareFranz/Component.js",
     "start": {
-      "line": 39,
+      "line": 42,
       "column": 20
     },
     "end": {
-      "line": 42,
+      "line": 45,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/features/todos/components/TodosWebview.json b/src/i18n/messages/src/features/todos/components/TodosWebview.json
new file mode 100644
index 000000000..2387112b4
--- /dev/null
+++ b/src/i18n/messages/src/features/todos/components/TodosWebview.json
@@ -0,0 +1,41 @@
+[
+  {
+    "id": "feature.todos.premium.info",
+    "defaultMessage": "!!!The Franz Todos Preview is currently only available for Franz Premium accounts.",
+    "file": "src/features/todos/components/TodosWebview.js",
+    "start": {
+      "line": 18,
+      "column": 15
+    },
+    "end": {
+      "line": 21,
+      "column": 3
+    }
+  },
+  {
+    "id": "feature.todos.premium.upgrade",
+    "defaultMessage": "!!!Upgrade Account",
+    "file": "src/features/todos/components/TodosWebview.js",
+    "start": {
+      "line": 22,
+      "column": 14
+    },
+    "end": {
+      "line": 25,
+      "column": 3
+    }
+  },
+  {
+    "id": "feature.todos.premium.rollout",
+    "defaultMessage": "!!!Franz Todos will be available to everyone soon.",
+    "file": "src/features/todos/components/TodosWebview.js",
+    "start": {
+      "line": 26,
+      "column": 15
+    },
+    "end": {
+      "line": 29,
+      "column": 3
+    }
+  }
+]
\ No newline at end of file
diff --git a/src/i18n/messages/src/features/workspaces/components/WorkspaceDrawer.json b/src/i18n/messages/src/features/workspaces/components/WorkspaceDrawer.json
index 9f0935620..2f340f1e9 100644
--- a/src/i18n/messages/src/features/workspaces/components/WorkspaceDrawer.json
+++ b/src/i18n/messages/src/features/workspaces/components/WorkspaceDrawer.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Workspaces",
     "file": "src/features/workspaces/components/WorkspaceDrawer.js",
     "start": {
-      "line": 16,
+      "line": 17,
       "column": 12
     },
     "end": {
-      "line": 19,
+      "line": 20,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!All services",
     "file": "src/features/workspaces/components/WorkspaceDrawer.js",
     "start": {
-      "line": 20,
+      "line": 21,
       "column": 15
     },
     "end": {
-      "line": 23,
+      "line": 24,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!Workspaces settings",
     "file": "src/features/workspaces/components/WorkspaceDrawer.js",
     "start": {
-      "line": 24,
+      "line": 25,
       "column": 29
     },
     "end": {
-      "line": 27,
+      "line": 28,
       "column": 3
     }
   },
@@ -43,11 +43,11 @@
     "defaultMessage": "!!!Info about workspace feature",
     "file": "src/features/workspaces/components/WorkspaceDrawer.js",
     "start": {
-      "line": 28,
+      "line": 29,
       "column": 24
     },
     "end": {
-      "line": 31,
+      "line": 32,
       "column": 3
     }
   },
@@ -56,11 +56,11 @@
     "defaultMessage": "!!!Create your first workspace",
     "file": "src/features/workspaces/components/WorkspaceDrawer.js",
     "start": {
-      "line": 32,
+      "line": 33,
       "column": 25
     },
     "end": {
-      "line": 35,
+      "line": 36,
       "column": 3
     }
   },
@@ -69,11 +69,11 @@
     "defaultMessage": "!!!Reactivate premium account",
     "file": "src/features/workspaces/components/WorkspaceDrawer.js",
     "start": {
-      "line": 36,
+      "line": 37,
       "column": 28
     },
     "end": {
-      "line": 39,
+      "line": 40,
       "column": 3
     }
   },
@@ -82,11 +82,11 @@
     "defaultMessage": "!!!add new workspace",
     "file": "src/features/workspaces/components/WorkspaceDrawer.js",
     "start": {
-      "line": 40,
+      "line": 41,
       "column": 24
     },
     "end": {
-      "line": 43,
+      "line": 44,
       "column": 3
     }
   },
@@ -95,11 +95,11 @@
     "defaultMessage": "!!!Premium feature",
     "file": "src/features/workspaces/components/WorkspaceDrawer.js",
     "start": {
-      "line": 44,
+      "line": 45,
       "column": 23
     },
     "end": {
-      "line": 47,
+      "line": 48,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/features/workspaces/components/WorkspacesDashboard.json b/src/i18n/messages/src/features/workspaces/components/WorkspacesDashboard.json
index ef8f1bebc..7eb4fab50 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": 17,
+      "line": 19,
       "column": 12
     },
     "end": {
-      "line": 20,
+      "line": 22,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!You haven't added any workspaces yet.",
     "file": "src/features/workspaces/components/WorkspacesDashboard.js",
     "start": {
-      "line": 21,
+      "line": 23,
       "column": 19
     },
     "end": {
-      "line": 24,
+      "line": 26,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!Could not load your workspaces",
     "file": "src/features/workspaces/components/WorkspacesDashboard.js",
     "start": {
-      "line": 25,
+      "line": 27,
       "column": 27
     },
     "end": {
-      "line": 28,
+      "line": 30,
       "column": 3
     }
   },
@@ -43,11 +43,11 @@
     "defaultMessage": "!!!Try again",
     "file": "src/features/workspaces/components/WorkspacesDashboard.js",
     "start": {
-      "line": 29,
+      "line": 31,
       "column": 23
     },
     "end": {
-      "line": 32,
+      "line": 34,
       "column": 3
     }
   },
@@ -56,11 +56,11 @@
     "defaultMessage": "!!!Your changes have been saved",
     "file": "src/features/workspaces/components/WorkspacesDashboard.js",
     "start": {
-      "line": 33,
+      "line": 35,
       "column": 15
     },
     "end": {
-      "line": 36,
+      "line": 38,
       "column": 3
     }
   },
@@ -69,11 +69,11 @@
     "defaultMessage": "!!!Workspace has been deleted",
     "file": "src/features/workspaces/components/WorkspacesDashboard.js",
     "start": {
-      "line": 37,
+      "line": 39,
       "column": 15
     },
     "end": {
-      "line": 40,
+      "line": 42,
       "column": 3
     }
   },
@@ -82,11 +82,11 @@
     "defaultMessage": "!!!Info about workspace feature",
     "file": "src/features/workspaces/components/WorkspacesDashboard.js",
     "start": {
-      "line": 41,
+      "line": 43,
       "column": 24
     },
     "end": {
-      "line": 44,
+      "line": 46,
       "column": 3
     }
   },
@@ -95,11 +95,11 @@
     "defaultMessage": "!!!Less is More: Introducing Franz Workspaces",
     "file": "src/features/workspaces/components/WorkspacesDashboard.js",
     "start": {
-      "line": 45,
+      "line": 47,
       "column": 28
     },
     "end": {
-      "line": 48,
+      "line": 50,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/helpers/plan-helpers.json b/src/i18n/messages/src/helpers/plan-helpers.json
new file mode 100644
index 000000000..df8ee19e3
--- /dev/null
+++ b/src/i18n/messages/src/helpers/plan-helpers.json
@@ -0,0 +1,54 @@
+[
+  {
+    "id": "pricing.plan.pro",
+    "defaultMessage": "!!!Franz Professional",
+    "file": "src/helpers/plan-helpers.js",
+    "start": {
+      "line": 5,
+      "column": 15
+    },
+    "end": {
+      "line": 8,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.plan.personal",
+    "defaultMessage": "!!!Franz Personal",
+    "file": "src/helpers/plan-helpers.js",
+    "start": {
+      "line": 9,
+      "column": 20
+    },
+    "end": {
+      "line": 12,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.plan.free",
+    "defaultMessage": "!!!Franz Free",
+    "file": "src/helpers/plan-helpers.js",
+    "start": {
+      "line": 13,
+      "column": 16
+    },
+    "end": {
+      "line": 16,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.plan.legacy",
+    "defaultMessage": "!!!Franz Premium",
+    "file": "src/helpers/plan-helpers.js",
+    "start": {
+      "line": 17,
+      "column": 18
+    },
+    "end": {
+      "line": 20,
+      "column": 3
+    }
+  }
+]
\ No newline at end of file
diff --git a/src/i18n/messages/src/helpers/pricing-helpers.json b/src/i18n/messages/src/helpers/pricing-helpers.json
new file mode 100644
index 000000000..4030a3e3b
--- /dev/null
+++ b/src/i18n/messages/src/helpers/pricing-helpers.json
@@ -0,0 +1,80 @@
+[
+  {
+    "id": "pricing.plan.pro-yearly",
+    "defaultMessage": "!!!Franz Professional Yearly",
+    "file": "src/helpers/pricing-helpers.js",
+    "start": {
+      "line": 5,
+      "column": 22
+    },
+    "end": {
+      "line": 8,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.plan.pro-monthly",
+    "defaultMessage": "!!!Franz Professional Monthly",
+    "file": "src/helpers/pricing-helpers.js",
+    "start": {
+      "line": 9,
+      "column": 23
+    },
+    "end": {
+      "line": 12,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.plan.personal-yearly",
+    "defaultMessage": "!!!Franz Personal Yearly",
+    "file": "src/helpers/pricing-helpers.js",
+    "start": {
+      "line": 13,
+      "column": 27
+    },
+    "end": {
+      "line": 16,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.plan.personal-monthly",
+    "defaultMessage": "!!!Franz Personal Monthly",
+    "file": "src/helpers/pricing-helpers.js",
+    "start": {
+      "line": 17,
+      "column": 28
+    },
+    "end": {
+      "line": 20,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.plan.free",
+    "defaultMessage": "!!!Franz Free",
+    "file": "src/helpers/pricing-helpers.js",
+    "start": {
+      "line": 21,
+      "column": 16
+    },
+    "end": {
+      "line": 24,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.plan.legacy",
+    "defaultMessage": "!!!Franz Premium",
+    "file": "src/helpers/pricing-helpers.js",
+    "start": {
+      "line": 25,
+      "column": 18
+    },
+    "end": {
+      "line": 28,
+      "column": 3
+    }
+  }
+]
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 55592c328..d9d51fd5b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -105,35 +105,6 @@ if (!gotTheLock) {
     }
   });
 }
-// const isSecondInstance = app.makeSingleInstance((argv) => {
-//   if (mainWindow) {
-//     if (mainWindow.isMinimized()) mainWindow.restore();
-//     mainWindow.focus();
-
-//     if (process.platform === 'win32') {
-//       // Keep only command line / deep linked arguments
-//       const url = argv.slice(1);
-
-//       if (url) {
-//         handleDeepLink(mainWindow, url.toString());
-//       }
-//     }
-//   }
-
-//   if (argv.includes('--reset-window')) {
-//     // Needs to be delayed to not interfere with mainWindow.restore();
-//     setTimeout(() => {
-//       debug('Resetting windows via Task');
-//       mainWindow.setPosition(DEFAULT_WINDOW_OPTIONS.x + 100, DEFAULT_WINDOW_OPTIONS.y + 100);
-//       mainWindow.setSize(DEFAULT_WINDOW_OPTIONS.width, DEFAULT_WINDOW_OPTIONS.height);
-//     }, 1);
-//   }
-// });
-
-// if (isSecondInstance) {
-//   console.log('An instance of Franz is already running. Exiting...');
-//   app.exit();
-// }
 
 // Fix Unity indicator issue
 // https://github.com/electron/electron/issues/9046
diff --git a/src/models/Service.js b/src/models/Service.js
index 88bce3360..848a84aa2 100644
--- a/src/models/Service.js
+++ b/src/models/Service.js
@@ -4,6 +4,11 @@ import normalizeUrl from 'normalize-url';
 
 const debug = require('debug')('Franz:Service');
 
+export const RESTRICTION_TYPES = {
+  SERVICE_LIMIT: 0,
+  CUSTOM_URL: 1,
+};
+
 export default class Service {
   id = '';
 
@@ -59,6 +64,12 @@ export default class Service {
 
   @observable errorMessage = '';
 
+  @observable isUsingCustomUrl = false;
+
+  @observable isServiceAccessRestricted = false;
+
+  @observable restrictionType = null;
+
   constructor(data, recipe) {
     if (!data) {
       console.error('Service config not valid');
@@ -111,6 +122,10 @@ export default class Service {
         this.unreadDirectMessageCount = 0;
         this.unreadIndirectMessageCount = 0;
       }
+
+      if (this.recipe.hasCustomUrl && this.customUrl) {
+        this.isUsingCustomUrl = true;
+      }
     });
   }
 
diff --git a/src/models/User.js b/src/models/User.js
index bec78fc16..0a2b1f62a 100644
--- a/src/models/User.js
+++ b/src/models/User.js
@@ -20,6 +20,10 @@ export default class User {
 
   @observable isSubscriptionOwner = false;
 
+  @observable hasSubscription = false;
+
+  @observable hadSubscription = false;
+
   @observable isPremium = false;
 
   @observable beta = false;
@@ -32,6 +36,9 @@ export default class User {
 
   @observable locale = false;
 
+  @observable team = {};
+
+
   constructor(data) {
     if (!data.id) {
       throw Error('User requires Id');
@@ -47,8 +54,13 @@ export default class User {
     this.beta = data.beta || this.beta;
     this.donor = data.donor || this.donor;
     this.isDonor = data.isDonor || this.isDonor;
-    this.isSubscriptionOwner = data.isSubscriptionOwner || this.isSubscriptionOwner;
     this.isMiner = data.isMiner || this.isMiner;
     this.locale = data.locale || this.locale;
+
+    this.isSubscriptionOwner = data.isSubscriptionOwner || this.isSubscriptionOwner;
+    this.hasSubscription = data.hasSubscription || this.hasSubscription;
+    this.hadSubscription = data.hadSubscription || this.hadSubscription;
+
+    this.team = data.team || this.team;
   }
 }
diff --git a/src/stores/AppStore.js b/src/stores/AppStore.js
index 2ac306a2a..6054e6721 100644
--- a/src/stores/AppStore.js
+++ b/src/stores/AppStore.js
@@ -357,6 +357,8 @@ export default class AppStore extends Store {
       this.locale = this._getDefaultLocale();
     }
 
+    moment.locale(this.locale);
+
     debug(`Set locale to "${this.locale}"`);
   }
 
diff --git a/src/stores/FeaturesStore.js b/src/stores/FeaturesStore.js
index 35a050c67..cf28b6bec 100644
--- a/src/stores/FeaturesStore.js
+++ b/src/stores/FeaturesStore.js
@@ -16,6 +16,8 @@ import workspaces from '../features/workspaces';
 import shareFranz from '../features/shareFranz';
 import announcements from '../features/announcements';
 import settingsWS from '../features/settingsWS';
+import serviceLimit from '../features/serviceLimit';
+import communityRecipes from '../features/communityRecipes';
 import todos from '../features/todos';
 
 import { DEFAULT_FEATURES_CONFIG } from '../config';
@@ -76,6 +78,8 @@ export default class FeaturesStore extends Store {
     shareFranz(this.stores, this.actions);
     announcements(this.stores, this.actions);
     settingsWS(this.stores, this.actions);
+    serviceLimit(this.stores, this.actions);
+    communityRecipes(this.stores, this.actions);
     todos(this.stores, this.actions);
   }
 }
diff --git a/src/stores/ServicesStore.js b/src/stores/ServicesStore.js
index b13425249..2fc543192 100644
--- a/src/stores/ServicesStore.js
+++ b/src/stores/ServicesStore.js
@@ -13,6 +13,8 @@ import CachedRequest from './lib/CachedRequest';
 import { matchRoute } from '../helpers/routing-helpers';
 import { gaEvent, statsEvent } from '../lib/analytics';
 import { workspaceStore } from '../features/workspaces';
+import { serviceLimitStore } from '../features/serviceLimit';
+import { RESTRICTION_TYPES } from '../models/Service';
 
 const debug = require('debug')('Franz:ServiceStore');
 
@@ -75,6 +77,7 @@ export default class ServicesStore extends Store {
       this._saveActiveService.bind(this),
       this._logoutReaction.bind(this),
       this._handleMuteSettings.bind(this),
+      this._restrictServiceAccess.bind(this),
     ]);
 
     // Just bind this
@@ -98,7 +101,10 @@ export default class ServicesStore extends Store {
     if (this.stores.user.isLoggedIn) {
       const services = this.allServicesRequest.execute().result;
       if (services) {
-        return observable(services.slice().slice().sort((a, b) => a.order - b.order));
+        return observable(services.slice().slice().sort((a, b) => a.order - b.order).map((s, index) => {
+          s.index = index;
+          return s;
+        }));
       }
     }
     return [];
@@ -153,6 +159,8 @@ export default class ServicesStore extends Store {
 
   // Actions
   @action async _createService({ recipeId, serviceData, redirect = true }) {
+    if (serviceLimitStore.userHasReachedServiceLimit) return;
+
     const data = this._cleanUpTeamIdAndCustomUrl(recipeId, serviceData);
 
     const response = await this.createServiceRequest.execute(recipeId, data)._promise;
@@ -681,6 +689,35 @@ export default class ServicesStore extends Store {
     return serviceData;
   }
 
+  _restrictServiceAccess() {
+    const { features } = this.stores.features;
+    const { userHasReachedServiceLimit, serviceLimit } = this.stores.serviceLimit;
+
+    this.all.map((service, index) => {
+      if (userHasReachedServiceLimit) {
+        service.isServiceAccessRestricted = index >= serviceLimit;
+
+        if (service.isServiceAccessRestricted) {
+          service.restrictionType = RESTRICTION_TYPES.SERVICE_LIMIT;
+
+          debug('Restricting access to server due to service limit');
+        }
+      }
+
+      if (service.isUsingCustomUrl) {
+        service.isServiceAccessRestricted = !features.isCustomUrlIncludedInCurrentPlan;
+
+        if (service.isServiceAccessRestricted) {
+          service.restrictionType = RESTRICTION_TYPES.CUSTOM_URL;
+
+          debug('Restricting access to server due to custom url');
+        }
+      }
+
+      return service;
+    });
+  }
+
   // Helper
   _initializeServiceRecipeInWebview(serviceId) {
     const service = this.one(serviceId);
diff --git a/src/stores/UIStore.js b/src/stores/UIStore.js
index 9680c5bcc..2c785111f 100644
--- a/src/stores/UIStore.js
+++ b/src/stores/UIStore.js
@@ -46,6 +46,7 @@ export default class UIStore extends Store {
   // Actions
   @action _openSettings({ path = '/settings' }) {
     const settingsPath = path !== '/settings' ? `/settings/${path}` : path;
+    console.log(settingsPath);
     this.stores.router.push(settingsPath);
   }
 
diff --git a/src/stores/UserStore.js b/src/stores/UserStore.js
index b5423af3b..7ac7d2375 100644
--- a/src/stores/UserStore.js
+++ b/src/stores/UserStore.js
@@ -2,12 +2,16 @@ import { observable, computed, action } from 'mobx';
 import moment from 'moment';
 import jwt from 'jsonwebtoken';
 import localStorage from 'mobx-localstorage';
+import ms from 'ms';
 
 import { isDevMode } from '../environment';
 import Store from './lib/Store';
 import Request from './lib/Request';
 import CachedRequest from './lib/CachedRequest';
 import { gaEvent } from '../lib/analytics';
+import { sleep } from '../helpers/async-helpers';
+import { getPlan } from '../helpers/plan-helpers';
+import { PLANS } from '../config';
 
 const debug = require('debug')('Franz:UserStore');
 
@@ -37,6 +41,8 @@ export default class UserStore extends Store {
 
   @observable passwordRequest = new Request(this.api.user, 'password');
 
+  @observable activateTrialRequest = new Request(this.api.user, 'activateTrial');
+
   @observable inviteRequest = new Request(this.api.user, 'invite');
 
   @observable getUserInfoRequest = new CachedRequest(this.api.user, 'getInfo');
@@ -57,7 +63,9 @@ export default class UserStore extends Store {
 
   @observable accountType;
 
-  @observable hasCompletedSignup = null;
+  @observable hasCompletedSignup = false;
+
+  @observable hasActivatedTrial = false;
 
   @observable userData = {};
 
@@ -77,6 +85,7 @@ export default class UserStore extends Store {
     this.actions.user.retrievePassword.listen(this._retrievePassword.bind(this));
     this.actions.user.logout.listen(this._logout.bind(this));
     this.actions.user.signup.listen(this._signup.bind(this));
+    this.actions.user.activateTrial.listen(this._activateTrial.bind(this));
     this.actions.user.invite.listen(this._invite.bind(this));
     this.actions.user.update.listen(this._update.bind(this));
     this.actions.user.resetStatus.listen(this._resetStatus.bind(this));
@@ -87,6 +96,7 @@ export default class UserStore extends Store {
     this.registerReactions([
       this._requireAuthenticatedUser,
       this._getUserData.bind(this),
+      this._resetTrialActivationState.bind(this),
     ]);
   }
 
@@ -142,10 +152,30 @@ export default class UserStore extends Store {
     return this.getUserInfoRequest.execute().result || {};
   }
 
+  @computed get team() {
+    return this.data.team || null;
+  }
+
   @computed get isPremium() {
     return !!this.data.isPremium;
   }
 
+  @computed get isPersonal() {
+    if (!this.team.plan) return false;
+    const plan = getPlan(this.team.plan);
+
+    return plan === PLANS.PERSONAL;
+  }
+
+  @computed get isPro() {
+    if (!this.team.plan && this.isPremium) return true;
+
+    if (!this.team.plan) return false;
+    const plan = getPlan(this.team.plan);
+
+    return plan === PLANS.PRO;
+  }
+
   @computed get legacyServices() {
     return this.getLegacyServicesRequest.execute() || {};
   }
@@ -199,6 +229,24 @@ export default class UserStore extends Store {
     gaEvent('User', 'retrievePassword');
   }
 
+  @action async _activateTrial({ planId }) {
+    debug('activate trial', planId);
+
+    this.activateTrialRequest.execute({
+      plan: planId,
+    });
+
+    await this.activateTrialRequest._promise;
+
+    this.hasActivatedTrial = true;
+
+    this.stores.features.featuresRequest.invalidate({ immediately: true });
+    this.stores.user.getUserInfoRequest.invalidate({ immediately: true });
+
+
+    gaEvent('User', 'activateTrial');
+  }
+
   @action async _invite({ invites }) {
     const data = invites.filter(invite => invite.email !== '');
 
@@ -318,6 +366,14 @@ export default class UserStore extends Store {
     }
   }
 
+  async _resetTrialActivationState() {
+    if (this.hasActivatedTrial) {
+      await sleep(ms('12s'));
+
+      this.hasActivatedTrial = false;
+    }
+  }
+
   // Helpers
   _parseToken(authToken) {
     try {
@@ -347,6 +403,15 @@ export default class UserStore extends Store {
     }
   }
 
+  getAuthURL(url) {
+    const parsedUrl = new URL(url);
+    const params = new URLSearchParams(parsedUrl.search.slice(1));
+
+    params.append('authToken', this.authToken);
+
+    return `${parsedUrl.origin}${parsedUrl.pathname}?${params.toString()}`;
+  }
+
   async _migrateUserLocale() {
     await this.getUserInfoRequest._promise;
 
diff --git a/src/stores/index.js b/src/stores/index.js
index e9ef523f8..10dd56665 100644
--- a/src/stores/index.js
+++ b/src/stores/index.js
@@ -12,6 +12,8 @@ import RequestStore from './RequestStore';
 import GlobalErrorStore from './GlobalErrorStore';
 import { workspaceStore } from '../features/workspaces';
 import { announcementsStore } from '../features/announcements';
+import { serviceLimitStore } from '../features/serviceLimit';
+import { communityRecipesStore } from '../features/communityRecipes';
 import { todosStore } from '../features/todos';
 
 export default (api, actions, router) => {
@@ -32,6 +34,8 @@ export default (api, actions, router) => {
     globalError: new GlobalErrorStore(stores, api, actions),
     workspaces: workspaceStore,
     announcements: announcementsStore,
+    serviceLimit: serviceLimitStore,
+    communityRecipes: communityRecipesStore,
     todos: todosStore,
   });
   // Initialize all stores
diff --git a/src/styles/auth.scss b/src/styles/auth.scss
index 0a075036a..154a71a36 100644
--- a/src/styles/auth.scss
+++ b/src/styles/auth.scss
@@ -9,7 +9,7 @@
   }
 
   .auth__logo.auth__logo--sm {
-    border: 4px solid $dark-theme-black;
+    border: none;
     box-shadow: 0 0 6px rgba($dark-theme-black, .5);
   }
 
diff --git a/src/styles/recipes.scss b/src/styles/recipes.scss
index 84222e1fe..5bdc60a57 100644
--- a/src/styles/recipes.scss
+++ b/src/styles/recipes.scss
@@ -2,6 +2,7 @@
 
 .theme__dark .recipe-teaser {
   background-color: $dark-theme-gray-dark;
+  color: $dark-theme-text-color;
 
   &:hover { background-color: $dark-theme-gray; }
 }
@@ -12,7 +13,7 @@
     display: flex;
     flex-flow: row wrap;
     height: auto;
-    min-height: 70%;
+    // min-height: 70%;
 
     &.recipes__list--disabled {
       filter: grayscale(100%);
diff --git a/src/styles/reset.scss b/src/styles/reset.scss
index f46ede4a2..d87ce652a 100644
--- a/src/styles/reset.scss
+++ b/src/styles/reset.scss
@@ -51,7 +51,6 @@ button {
   padding: 0;
 
   &:focus { outline: 0; }
-  .theme__dark & { color: $dark-theme-gray-smoke; }
 }
 
 html {
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index 1baff8b54..0955aaa0c 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -360,6 +360,7 @@
     .account__subscription-button { margin-left: auto; }
     .franz-form__button { white-space: nowrap; }
     div { height: auto; }
+    [data-type="franz-button"] div { height: 100% }
 
     .invoices {
       width: 100%;
diff --git a/uidev/src/stories/button.stories.tsx b/uidev/src/stories/button.stories.tsx
index f7537895c..5c1c9246d 100644
--- a/uidev/src/stories/button.stories.tsx
+++ b/uidev/src/stories/button.stories.tsx
@@ -1,10 +1,10 @@
+import { mdiInformation } from '@mdi/js';
 import { observable } from 'mobx';
 import { observer } from 'mobx-react';
 import React from 'react';
 import injectSheet from 'react-jss';
 
 import { Button, Input } from '@meetfranz/forms';
-import { classes } from 'istanbul-lib-coverage';
 import { Classes } from 'jss';
 import { storiesOf } from '../stores/stories';
 
@@ -92,7 +92,7 @@ storiesOf('Button')
   ))
   .add('With icon', () => (
     <WithStoreButton store={createStore({
-      icon: 'mdiInformation',
+      icon: mdiInformation,
     })} />
   ))
   .add('As link', () => (
@@ -131,7 +131,7 @@ storiesOf('Button')
       <div className={classes.combinedElements}>
         <Input showLabel={false} className={classes.input} noMargin />
         <WithStoreButton store={createStore({
-          icon: 'mdiInformation',
+          icon: mdiInformation,
         })} />
       </div>
     )),
diff --git a/uidev/src/stories/icon.stories.tsx b/uidev/src/stories/icon.stories.tsx
index c8e7f8ced..f9aa1635b 100644
--- a/uidev/src/stories/icon.stories.tsx
+++ b/uidev/src/stories/icon.stories.tsx
@@ -1,53 +1,14 @@
-import { observable } from 'mobx';
-import { observer } from 'mobx-react';
+import { mdiAccountCircle } from '@mdi/js';
 import React from 'react';
-import uuid from 'uuid/v4';
 
 import { Icon } from '@meetfranz/ui';
 import { storiesOf } from '../stores/stories';
 
-// interface IStoreArgs {
-//   value?: boolean;
-//   checked?: boolean;
-//   label?: string;
-//   id?: string;
-//   name?: string;
-//   disabled?: boolean;
-//   error?: string;
-// }
-
-// const createStore = (args?: IStoreArgs) => {
-//   return observable(Object.assign({
-//     id: `element-${uuid()}`,
-//     name: 'toggle',
-//     label: 'Label',
-//     value: true,
-//     checked: false,
-//     disabled: false,
-//     error: '',
-//   },                              args));
-// };
-
-// const WithStoreToggle = observer(({ store }: { store: any }) => (
-//   <>
-//     <Toggle
-//       value={store.value}
-//       checked={store.checked}
-//       label={store.label}
-//       id={store.id}
-//       name={store.name}
-//       disabled={store.disabled}
-//       error={store.error}
-//       onChange={() => store.checked = !store.checked}
-//     />
-//   </>
-// ));
-
 storiesOf('Icon')
   .add('Basic', () => (
     <>
-      <Icon icon="mdiAccountCircle" />
-      <Icon icon="mdiAccountCircle" size={2} />
-      <Icon icon="mdiAccountCircle" size={3} />
+      <Icon icon={mdiAccountCircle} />
+      <Icon icon={mdiAccountCircle} size={2} />
+      <Icon icon={mdiAccountCircle} size={3} />
     </>
   ));
diff --git a/uidev/src/stories/infobox.stories.tsx b/uidev/src/stories/infobox.stories.tsx
index 144855376..c3442da0d 100644
--- a/uidev/src/stories/infobox.stories.tsx
+++ b/uidev/src/stories/infobox.stories.tsx
@@ -1,3 +1,4 @@
+import { mdiEarth } from '@mdi/js';
 import { observable } from 'mobx';
 import { observer } from 'mobx-react';
 import React from 'react';
@@ -44,7 +45,7 @@ storiesOf('Infobox')
   .add('Icon + Dismissable', () => (
     <WithStoreInfobox
       store={createStore({
-        icon: 'mdiEarth',
+        icon: mdiEarth,
         dismissable: true,
       })}
     >
@@ -54,7 +55,7 @@ storiesOf('Infobox')
   .add('With CTA', () => (
     <WithStoreInfobox
       store={createStore({
-        icon: 'mdiEarth',
+        icon: mdiEarth,
         ctaLabel: 'Ok, hi!',
       })}
     >
@@ -64,7 +65,7 @@ storiesOf('Infobox')
   .add('With long text', () => (
     <WithStoreInfobox
       store={createStore({
-        icon: 'mdiEarth',
+        icon: mdiEarth,
         ctaLabel: 'Ok, hi!',
       })}
     >
@@ -74,7 +75,7 @@ storiesOf('Infobox')
   .add('Secondary', () => (
     <WithStoreInfobox
       store={createStore({
-        icon: 'mdiEarth',
+        icon: mdiEarth,
         ctaLabel: 'Ok, hi!',
         type: 'secondary',
       })}
@@ -85,7 +86,7 @@ storiesOf('Infobox')
   .add('Success', () => (
     <WithStoreInfobox
       store={createStore({
-        icon: 'mdiEarth',
+        icon: mdiEarth,
         ctaLabel: 'Ok, hi!',
         type: 'success',
       })}
@@ -96,7 +97,7 @@ storiesOf('Infobox')
   .add('Warning', () => (
     <WithStoreInfobox
       store={createStore({
-        icon: 'mdiEarth',
+        icon: mdiEarth,
         ctaLabel: 'Ok, hi!',
         type: 'warning',
       })}
@@ -107,7 +108,7 @@ storiesOf('Infobox')
   .add('Danger', () => (
     <WithStoreInfobox
       store={createStore({
-        icon: 'mdiEarth',
+        icon: mdiEarth,
         ctaLabel: 'Ok, hi!',
         type: 'danger',
       })}
@@ -118,7 +119,7 @@ storiesOf('Infobox')
   .add('Inverted', () => (
     <WithStoreInfobox
       store={createStore({
-        icon: 'mdiEarth',
+        icon: mdiEarth,
         ctaLabel: 'Ok, hi!',
         type: 'inverted',
       })}