Merge branch 'develop' of https://github.com/meetfranz/franz into develop

32 files changed, 519 insertions, 271 deletions

diff --git a/src/assets/images/workspaces/teaser_dark.png b/src/assets/images/workspaces/teaser_dark.png
deleted file mode 100644
index 5b6d7334b..000000000
--- a/src/assets/images/workspaces/teaser_dark.png
+++ /dev/null
diff --git a/src/assets/images/workspaces/teaser_light.png b/src/assets/images/workspaces/teaser_light.png
deleted file mode 100644
index 635af43fa..000000000
--- a/src/assets/images/workspaces/teaser_light.png
+++ /dev/null
diff --git a/src/components/TrialActivationInfoBar.js b/src/components/TrialActivationInfoBar.js
index acdf51d08..77ab97565 100644
--- a/src/components/TrialActivationInfoBar.js
+++ b/src/components/TrialActivationInfoBar.js
@@ -20,7 +20,7 @@ const styles = {
     position: 'absolute',
     top: -50,
     transition: 'top 0.3s',
-    zIndex: 300,
+    zIndex: 500,
     width: 'calc(100% - 300px)',
   },
   show: {
diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js
index 4fd1e8163..ac2594604 100644
--- a/src/components/settings/account/AccountDashboard.js
+++ b/src/components/settings/account/AccountDashboard.js
@@ -97,6 +97,7 @@ const messages = defineMessages({
 class AccountDashboard extends Component {
   static propTypes = {
     user: MobxPropTypes.observableObject.isRequired,
+    isPremiumOverrideUser: PropTypes.bool.isRequired,
     isProUser: PropTypes.bool.isRequired,
     isLoading: PropTypes.bool.isRequired,
     userInfoRequestFailed: PropTypes.bool.isRequired,
@@ -117,6 +118,7 @@ class AccountDashboard extends Component {
   render() {
     const {
       user,
+      isPremiumOverrideUser,
       isProUser,
       isLoading,
       userInfoRequestFailed,
@@ -213,7 +215,7 @@ class AccountDashboard extends Component {
                           {intl.formatMessage(messages.yourLicense)}
                         </H2>
                         <p>
-                          {planName}
+                          {isPremiumOverrideUser ? 'Franz Premium' : planName}
                           {user.team.isTrial && (
                             <>
                               {' – '}
diff --git a/src/components/settings/team/TeamDashboard.js b/src/components/settings/team/TeamDashboard.js
index 990ee52e7..366b0113a 100644
--- a/src/components/settings/team/TeamDashboard.js
+++ b/src/components/settings/team/TeamDashboard.js
@@ -4,11 +4,14 @@ import { observer } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
 import ReactTooltip from 'react-tooltip';
 import injectSheet from 'react-jss';
+import classnames from 'classnames';
 
+import { Badge } from '@meetfranz/ui';
 import Loader from '../../ui/Loader';
 import Button from '../../ui/Button';
 import Infobox from '../../ui/Infobox';
-import PremiumFeatureContainer from '../../ui/PremiumFeatureContainer';
+import globalMessages from '../../../i18n/globalMessages';
+import UpgradeButton from '../../ui/UpgradeButton';
 
 const messages = defineMessages({
   headline: {
@@ -40,6 +43,7 @@ const messages = defineMessages({
 const styles = {
   cta: {
     margin: [40, 'auto'],
+    height: 'auto',
   },
   container: {
     display: 'flex',
@@ -69,6 +73,20 @@ const styles = {
       order: 1,
     },
   },
+  headline: {
+    marginBottom: 0,
+  },
+  headlineWithSpacing: {
+    marginBottom: 'inherit',
+  },
+  proRequired: {
+    margin: [10, 0, 40],
+    height: 'auto',
+  },
+  buttonContainer: {
+    display: 'flex',
+    height: 'auto',
+  },
 };
 
 
@@ -79,6 +97,7 @@ export default @injectSheet(styles) @observer class TeamDashboard extends Compon
     retryUserInfoRequest: PropTypes.func.isRequired,
     openTeamManagement: PropTypes.func.isRequired,
     classes: PropTypes.object.isRequired,
+    isProUser: PropTypes.bool.isRequired,
   };
 
   static contextTypes = {
@@ -91,6 +110,7 @@ export default @injectSheet(styles) @observer class TeamDashboard extends Compon
       userInfoRequestFailed,
       retryUserInfoRequest,
       openTeamManagement,
+      isProUser,
       classes,
     } = this.props;
     const { intl } = this.context;
@@ -123,23 +143,42 @@ export default @injectSheet(styles) @observer class TeamDashboard extends Compon
             <>
               {!isLoading && (
                 <>
-                  <PremiumFeatureContainer>
-                    <>
-                      <h1>{intl.formatMessage(messages.contentHeadline)}</h1>
-                      <div className={classes.container}>
-                        <div className={classes.content}>
-                          <p>{intl.formatMessage(messages.intro)}</p>
-                          <p>{intl.formatMessage(messages.copy)}</p>
-                        </div>
-                        <img className={classes.image} src="https://cdn.franzinfra.com/announcements/assets/teams.png" alt="Franz for Teams" />
+                  <>
+                    <h1 className={classnames({
+                      [classes.headline]: true,
+                      [classes.headlineWithSpacing]: isProUser,
+                    })}
+                    >
+                      {intl.formatMessage(messages.contentHeadline)}
+
+                    </h1>
+                    {!isProUser && (
+                      <Badge className={classes.proRequired}>{intl.formatMessage(globalMessages.proRequired)}</Badge>
+                    )}
+                    <div className={classes.container}>
+                      <div className={classes.content}>
+                        <p>{intl.formatMessage(messages.intro)}</p>
+                        <p>{intl.formatMessage(messages.copy)}</p>
                       </div>
-                    </>
-                  </PremiumFeatureContainer>
-                  <Button
-                    label={intl.formatMessage(messages.manageButton)}
-                    onClick={openTeamManagement}
-                    className={classes.cta}
-                  />
+                      <img className={classes.image} src="https://cdn.franzinfra.com/announcements/assets/teams.png" alt="Franz for Teams" />
+                    </div>
+                    <div className={classes.buttonContainer}>
+                      {!isProUser ? (
+                        <UpgradeButton
+                          className={classes.cta}
+                          gaEventInfo={{ category: 'Todos', event: 'upgrade' }}
+                          requiresPro
+                          short
+                        />
+                      ) : (
+                        <Button
+                          label={intl.formatMessage(messages.manageButton)}
+                          onClick={openTeamManagement}
+                          className={classes.cta}
+                        />
+                      )}
+                    </div>
+                  </>
                 </>
               )}
             </>
diff --git a/src/components/ui/UpgradeButton/index.js b/src/components/ui/UpgradeButton/index.js
new file mode 100644
index 000000000..73762f0bf
--- /dev/null
+++ b/src/components/ui/UpgradeButton/index.js
@@ -0,0 +1,89 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { inject, observer } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+
+import { Button } from '@meetfranz/forms';
+import { gaEvent } from '../../../lib/analytics';
+
+import UserStore from '../../../stores/UserStore';
+import ActivateTrialButton from '../ActivateTrialButton';
+
+const messages = defineMessages({
+  upgradeToPro: {
+    id: 'global.upgradeButton.upgradeToPro',
+    defaultMessage: '!!!Upgrade to Franz Professional',
+  },
+});
+
+@inject('stores', 'actions') @observer
+class UpgradeButton extends Component {
+  static propTypes = {
+    // eslint-disable-next-line
+    classes: PropTypes.object.isRequired,
+    className: PropTypes.string,
+    gaEventInfo: PropTypes.shape({
+      category: PropTypes.string.isRequired,
+      event: PropTypes.string.isRequired,
+      label: PropTypes.string,
+    }),
+    requiresPro: PropTypes.bool,
+  };
+
+  static defaultProps = {
+    className: '',
+    gaEventInfo: null,
+    requiresPro: false,
+  }
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  handleCTAClick() {
+    const { actions, gaEventInfo } = this.props;
+
+    actions.ui.openSettings({ path: 'user' });
+    if (gaEventInfo) {
+      const { category, event } = gaEventInfo;
+      gaEvent(category, event, 'Upgrade Account');
+    }
+  }
+
+  render() {
+    const { stores, requiresPro } = this.props;
+    const { intl } = this.context;
+
+    const { isPremium, isPersonal } = stores.user;
+
+    if (isPremium && isPersonal && requiresPro) {
+      return (
+        <Button
+          label={intl.formatMessage(messages.upgradeToPro)}
+          onClick={this.handleCTAClick.bind(this)}
+          className={this.props.className}
+          buttonType="inverted"
+        />
+      );
+    }
+
+    if (!isPremium) {
+      return <ActivateTrialButton {...this.props} />;
+    }
+
+    return null;
+  }
+}
+
+export default UpgradeButton;
+
+UpgradeButton.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/config.js b/src/config.js
index fba739ddd..78a92d948 100644
--- a/src/config.js
+++ b/src/config.js
@@ -20,7 +20,7 @@ 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';t
-export const DEV_API_WEBSITE = 'http://hash-3ac3ccd2472269cf585c58a4f6973d86f3c9e7bd.franzstaging.com/'; // TODO: revert me
+export const DEV_API_WEBSITE = 'http://hash-58883791519ef6288c952316bdce7fb462283893.franzstaging.com/'; // TODO: revert me
 export const LIVE_API_WEBSITE = 'https://meetfranz.com';
 
 export const STATS_API = 'https://stats.franzinfra.com';
diff --git a/src/containers/settings/AccountScreen.js b/src/containers/settings/AccountScreen.js
index 2b5eba91c..9c74cf2ab 100644
--- a/src/containers/settings/AccountScreen.js
+++ b/src/containers/settings/AccountScreen.js
@@ -42,6 +42,7 @@ export default @inject('stores', 'actions') @observer class AccountScreen extend
       <ErrorBoundary>
         <AccountDashboard
           user={user.data}
+          isPremiumOverrideUser={user.isPremiumOverride}
           isProUser={user.isPro}
           isLoading={isLoadingUserInfo}
           isLoadingPlans={isLoadingPlans}
diff --git a/src/containers/settings/TeamScreen.js b/src/containers/settings/TeamScreen.js
index b7b1b78cb..f600c9947 100644
--- a/src/containers/settings/TeamScreen.js
+++ b/src/containers/settings/TeamScreen.js
@@ -30,6 +30,7 @@ export default @inject('stores', 'actions') @observer class TeamScreen extends C
           userInfoRequestFailed={user.getUserInfoRequest.wasExecuted && user.getUserInfoRequest.isError}
           retryUserInfoRequest={() => this.reloadData()}
           openTeamManagement={() => this.handleWebsiteLink('/user/team')}
+          isProUser={user.isPro}
         />
       </ErrorBoundary>
     );
diff --git a/src/containers/subscription/SubscriptionFormScreen.js b/src/containers/subscription/SubscriptionFormScreen.js
index e9e457084..726b10628 100644
--- a/src/containers/subscription/SubscriptionFormScreen.js
+++ b/src/containers/subscription/SubscriptionFormScreen.js
@@ -19,7 +19,7 @@ export default @inject('stores', 'actions') @observer class SubscriptionFormScre
       features,
     } = stores;
 
-    let hostedPageURL = !user.data.hadSubscription ? features.features.planSelectionURL : features.features.subscribeURL;
+    let hostedPageURL = features.features.planSelectionURL;
     hostedPageURL = user.getAuthURL(hostedPageURL);
 
     actions.app.openExternalUrl({ url: hostedPageURL });
diff --git a/src/environment.js b/src/environment.js
index 707449e09..4be2c7d70 100644
--- a/src/environment.js
+++ b/src/environment.js
@@ -37,8 +37,10 @@ let web;
 let todos;
 if (!isDevMode || (isDevMode && useLiveAPI)) {
   api = LIVE_API;
+  // api = DEV_API;
   wsApi = LIVE_WS_API;
   web = LIVE_API_WEBSITE;
+  // web = DEV_API_WEBSITE;
   todos = PRODUCTION_TODOS_FRONTEND_URL;
 } else if (isDevMode && useLocalAPI) {
   api = LOCAL_API;
diff --git a/src/features/delayApp/Component.js b/src/features/delayApp/Component.js
index de5653f04..6344edb89 100644
--- a/src/features/delayApp/Component.js
+++ b/src/features/delayApp/Component.js
@@ -77,7 +77,6 @@ export default @inject('stores', 'actions') @injectSheet(styles) @observer class
     const { defaultTrialPlan } = stores.features.features;
 
     if (!hadSubscription) {
-      console.log('directly activate trial');
       actions.user.activateTrial({ planId: defaultTrialPlan });
 
       gaEvent('DelayApp', 'subscribe_click', 'Delay App Feature');
diff --git a/src/features/todos/components/TodosWebview.js b/src/features/todos/components/TodosWebview.js
index 143955a7b..c06183e37 100644
--- a/src/features/todos/components/TodosWebview.js
+++ b/src/features/todos/components/TodosWebview.js
@@ -9,7 +9,7 @@ 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';
+import UpgradeButton from '../../../components/ui/UpgradeButton';
 
 const OPEN_TODOS_BUTTON_SIZE = 45;
 const CLOSE_TODOS_BUTTON_SIZE = 35;
@@ -17,7 +17,7 @@ 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.',
+    defaultMessage: '!!!Franz Todos are available to premium users now!',
   },
   upgradeCTA: {
     id: 'feature.todos.premium.upgrade',
@@ -25,7 +25,7 @@ const messages = defineMessages({
   },
   rolloutInfo: {
     id: 'feature.todos.premium.rollout',
-    defaultMessage: '!!!Franz Todos will be available to everyone soon.',
+    defaultMessage: '!!!Everyone else will have to wait a little longer.',
   },
 });
 
@@ -112,7 +112,7 @@ const styles = theme => ({
     alignItems: 'center',
     width: '80%',
     maxWidth: 300,
-    margin: [-50, 'auto', 0],
+    margin: [0, 'auto'],
     textAlign: 'center',
   },
   premiumIcon: {
@@ -281,10 +281,10 @@ class TodosWebview extends Component {
         ) : (
           <Appear>
             <div className={classes.premiumContainer}>
-              <Icon icon={mdiCheckAll} className={classes.premiumIcon} size={5} />
+              <Icon icon={mdiCheckAll} className={classes.premiumIcon} size={4} />
               <p>{intl.formatMessage(messages.premiumInfo)}</p>
               <p>{intl.formatMessage(messages.rolloutInfo)}</p>
-              <ActivateTrialButton
+              <UpgradeButton
                 className={classes.premiumCTA}
                 gaEventInfo={{ category: 'Todos', event: 'upgrade' }}
                 short
diff --git a/src/features/todos/store.js b/src/features/todos/store.js
index 170408ebb..aebe0dcbe 100644
--- a/src/features/todos/store.js
+++ b/src/features/todos/store.js
@@ -30,7 +30,7 @@ export default class TodoStore extends FeatureStore {
   }
 
   @computed get isTodosPanelVisible() {
-    if (this.stores.services.all.length === 0 || delayAppState.isDelayAppScreenVisible) return false;
+    if (delayAppState.isDelayAppScreenVisible) return false;
     if (this.settings.isTodosPanelVisible === undefined) return DEFAULT_TODOS_VISIBLE;
 
     return this.settings.isTodosPanelVisible;
@@ -62,6 +62,7 @@ export default class TodoStore extends FeatureStore {
     this._allReactions = createReactions([
       this._setFeatureEnabledReaction,
       this._updateTodosConfig,
+      this._firstLaunchReaction,
     ]);
 
     this._registerReactions(this._allReactions);
@@ -156,5 +157,20 @@ export default class TodoStore extends FeatureStore {
   _updateTodosConfig = () => {
     // Resend the config if any part changes in Franz:
     this._onTodosClientInitialized();
-  }
+  };
+
+  _firstLaunchReaction = () => {
+    const { stats } = this.stores.settings.all;
+
+    // Hide todos layer on first app start but show on second
+    if (stats.appStarts <= 1) {
+      this._updateSettings({
+        isTodosPanelVisible: false,
+      });
+    } else if (stats.appStarts <= 2) {
+      this._updateSettings({
+        isTodosPanelVisible: true,
+      });
+    }
+  };
 }
diff --git a/src/features/workspaces/components/WorkspacesDashboard.js b/src/features/workspaces/components/WorkspacesDashboard.js
index 059a681de..70e213912 100644
--- a/src/features/workspaces/components/WorkspacesDashboard.js
+++ b/src/features/workspaces/components/WorkspacesDashboard.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 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';
+import { Infobox, Badge } from '@meetfranz/ui';
 
 import Loader from '../../../components/ui/Loader';
 import WorkspaceItem from './WorkspaceItem';
@@ -11,9 +11,9 @@ import CreateWorkspaceForm from './CreateWorkspaceForm';
 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';
+import globalMessages from '../../../i18n/globalMessages';
+import UpgradeButton from '../../../components/ui/UpgradeButton';
 
 const messages = defineMessages({
   headline: {
@@ -50,7 +50,7 @@ const messages = defineMessages({
   },
 });
 
-const styles = theme => ({
+const styles = () => ({
   table: {
     width: '100%',
     '& td': {
@@ -64,23 +64,24 @@ const styles = theme => ({
     height: 'auto',
   },
   premiumAnnouncement: {
-    padding: 20,
-    // backgroundColor: '#3498db',
-    marginLeft: -20,
-    marginBottom: 40,
-    paddingBottom: 40,
     height: 'auto',
+  },
+  premiumAnnouncementContainer: {
     display: 'flex',
-    borderBottom: [1, 'solid', theme.inputBackground],
+  },
+  announcementHeadline: {
+    marginBottom: 0,
   },
   teaserImage: {
-    width: 200,
-    height: '100%',
-    float: 'left',
-    margin: [-8, 0, 0, -20],
+    width: 250,
+    margin: [-8, 0, 0, 20],
+    alignSelf: 'center',
   },
   upgradeCTA: {
-    marginTop: 20,
+    margin: [40, 'auto'],
+  },
+  proRequired: {
+    margin: [10, 0, 40],
   },
 });
 
@@ -152,76 +153,80 @@ class WorkspacesDashboard extends Component {
 
           {workspaceStore.isPremiumUpgradeRequired && (
             <div className={classes.premiumAnnouncement}>
-              <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
-                />
+
+              <h1 className={classes.announcementHeadline}>{intl.formatMessage(messages.workspaceFeatureHeadline)}</h1>
+              <Badge className={classes.proRequired}>{intl.formatMessage(globalMessages.proRequired)}</Badge>
+              <div className={classes.premiumAnnouncementContainer}>
+                <div className={classes.premiumAnnouncementContent}>
+                  <p>{intl.formatMessage(messages.workspaceFeatureInfo)}</p>
+                  <UpgradeButton
+                    className={classes.upgradeCTA}
+                    gaEventInfo={{ category: 'Workspaces', event: 'upgrade' }}
+                    short
+                    requiresPro
+                  />
+                </div>
+                <img src={`https://cdn.franzinfra.com/announcements/assets/workspaces_${this.props.stores.ui.isDarkThemeActive ? 'dark' : 'light'}.png`} className={classes.teaserImage} alt="" />
               </div>
             </div>
           )}
 
-          <PremiumFeatureContainer
-            condition={() => workspaceStore.isPremiumUpgradeRequired}
-            gaEventInfo={{ category: 'User', event: 'upgrade', label: 'workspaces' }}
-          >
-            {/* ===== Create workspace form ===== */}
-            <div className={classes.createForm}>
-              <CreateWorkspaceForm
-                isSubmitting={createWorkspaceRequest.isExecuting}
-                onSubmit={onCreateWorkspaceSubmit}
-              />
-            </div>
-            {getUserWorkspacesRequest.isExecuting ? (
-              <Loader />
-            ) : (
-              <Fragment>
-                {/* ===== Workspace could not be loaded error ===== */}
-                {getUserWorkspacesRequest.error ? (
-                  <Infobox
-                    icon="alert"
-                    type="danger"
-                    ctaLabel={intl.formatMessage(messages.tryReloadWorkspaces)}
-                    ctaLoading={getUserWorkspacesRequest.isExecuting}
-                    ctaOnClick={getUserWorkspacesRequest.retry}
-                  >
-                    {intl.formatMessage(messages.workspacesRequestFailed)}
-                  </Infobox>
-                ) : (
-                  <Fragment>
-                    {workspaces.length === 0 ? (
-                      <div className="align-middle settings__empty-state">
-                        {/* ===== Workspaces empty state ===== */}
-                        <p className="settings__empty-text">
-                          <span className="emoji">
-                            <img src="./assets/images/emoji/sad.png" alt="" />
-                          </span>
-                          {intl.formatMessage(messages.noServicesAdded)}
-                        </p>
-                      </div>
-                    ) : (
-                      <table className={classes.table}>
-                        {/* ===== Workspaces list ===== */}
-                        <tbody>
-                          {workspaces.map(workspace => (
-                            <WorkspaceItem
-                              key={workspace.id}
-                              workspace={workspace}
-                              onItemClick={w => onWorkspaceClick(w)}
-                            />
-                          ))}
-                        </tbody>
-                      </table>
-                    )}
-                  </Fragment>
-                )}
-              </Fragment>
-            )}
-          </PremiumFeatureContainer>
+          {!workspaceStore.isPremiumUpgradeRequired && (
+            <>
+              {/* ===== Create workspace form ===== */}
+              <div className={classes.createForm}>
+                <CreateWorkspaceForm
+                  isSubmitting={createWorkspaceRequest.isExecuting}
+                  onSubmit={onCreateWorkspaceSubmit}
+                />
+              </div>
+              {getUserWorkspacesRequest.isExecuting ? (
+                <Loader />
+              ) : (
+                <Fragment>
+                  {/* ===== Workspace could not be loaded error ===== */}
+                  {getUserWorkspacesRequest.error ? (
+                    <Infobox
+                      icon="alert"
+                      type="danger"
+                      ctaLabel={intl.formatMessage(messages.tryReloadWorkspaces)}
+                      ctaLoading={getUserWorkspacesRequest.isExecuting}
+                      ctaOnClick={getUserWorkspacesRequest.retry}
+                    >
+                      {intl.formatMessage(messages.workspacesRequestFailed)}
+                    </Infobox>
+                  ) : (
+                    <Fragment>
+                      {workspaces.length === 0 ? (
+                        <div className="align-middle settings__empty-state">
+                          {/* ===== Workspaces empty state ===== */}
+                          <p className="settings__empty-text">
+                            <span className="emoji">
+                              <img src="./assets/images/emoji/sad.png" alt="" />
+                            </span>
+                            {intl.formatMessage(messages.noServicesAdded)}
+                          </p>
+                        </div>
+                      ) : (
+                        <table className={classes.table}>
+                          {/* ===== Workspaces list ===== */}
+                          <tbody>
+                            {workspaces.map(workspace => (
+                              <WorkspaceItem
+                                key={workspace.id}
+                                workspace={workspace}
+                                onItemClick={w => onWorkspaceClick(w)}
+                              />
+                            ))}
+                          </tbody>
+                        </table>
+                      )}
+                    </Fragment>
+                  )}
+                </Fragment>
+              )}
+            </>
+          )}
         </div>
       </div>
     );
diff --git a/src/features/workspaces/containers/WorkspacesScreen.js b/src/features/workspaces/containers/WorkspacesScreen.js
index 2ab565fa1..affbd230d 100644
--- a/src/features/workspaces/containers/WorkspacesScreen.js
+++ b/src/features/workspaces/containers/WorkspacesScreen.js
@@ -11,7 +11,7 @@ import {
   updateWorkspaceRequest,
 } from '../api';
 
-@inject('actions') @observer
+@inject('stores', 'actions') @observer
 class WorkspacesScreen extends Component {
   static propTypes = {
     actions: PropTypes.shape({
diff --git a/src/i18n/globalMessages.js b/src/i18n/globalMessages.js
index 1b5ece223..af8479c59 100644
--- a/src/i18n/globalMessages.js
+++ b/src/i18n/globalMessages.js
@@ -25,4 +25,8 @@ export default defineMessages({
     id: 'global.spellchecking.autodetect.short',
     defaultMessage: '!!!Automatic',
   },
+  proRequired: {
+    id: 'global.franzProRequired',
+    defaultMessage: '!!!Franz Professional Required',
+  },
 });
diff --git a/src/i18n/locales/cs.json b/src/i18n/locales/cs.json
index 809c5d5a8..36732b44d 100644
--- a/src/i18n/locales/cs.json
+++ b/src/i18n/locales/cs.json
@@ -8,7 +8,7 @@
    "feature.shareFranz.action.email" : "Poslat jako e-mail",
    "feature.shareFranz.action.facebook" : "Sdílet na Facebooku",
    "feature.shareFranz.action.twitter" : "Sdílet na Twitteru",
-   "feature.shareFranz.headline" : "Franz is better together!",
+   "feature.shareFranz.headline" : "Společně je Franz ještě lepší!",
    "feature.shareFranz.shareText.email" : "Přidali jsme {count} služeb do Franze. Získejte zdarma aplikace pro WhatsApp, Messenger, SLack, Skype a další na 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.",
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index 367184c01..1204005dc 100644
--- a/src/i18n/locales/defaultMessages.json
+++ b/src/i18n/locales/defaultMessages.json
@@ -2530,78 +2530,78 @@
         "defaultMessage": "!!!Team",
         "end": {
           "column": 3,
-          "line": 17
+          "line": 19
         },
         "file": "src/components/settings/team/TeamDashboard.js",
         "id": "settings.team.headline",
         "start": {
           "column": 12,
-          "line": 14
+          "line": 16
         }
       },
       {
         "defaultMessage": "!!!Franz for Teams",
         "end": {
           "column": 3,
-          "line": 21
+          "line": 23
         },
         "file": "src/components/settings/team/TeamDashboard.js",
         "id": "settings.team.contentHeadline",
         "start": {
           "column": 19,
-          "line": 18
+          "line": 20
         }
       },
       {
         "defaultMessage": "!!!You and your team use Franz? You can now manage Premium subscriptions for as many colleagues, friends or family members as you want, all from within one account.",
         "end": {
           "column": 3,
-          "line": 25
+          "line": 27
         },
         "file": "src/components/settings/team/TeamDashboard.js",
         "id": "settings.team.intro",
         "start": {
           "column": 9,
-          "line": 22
+          "line": 24
         }
       },
       {
         "defaultMessage": "!!!Franz for Teams gives you the option to invite co-workers to your team by sending them email invitations and manage their subscriptions in your account’s preferences. Don’t waste time setting up subscriptions for every team member individually, forget about multiple invoices and different billing cycles - one team to rule them all!",
         "end": {
           "column": 3,
-          "line": 29
+          "line": 31
         },
         "file": "src/components/settings/team/TeamDashboard.js",
         "id": "settings.team.copy",
         "start": {
           "column": 8,
-          "line": 26
+          "line": 28
         }
       },
       {
         "defaultMessage": "!!!Manage your Team on meetfranz.com",
         "end": {
           "column": 3,
-          "line": 33
+          "line": 35
         },
         "file": "src/components/settings/team/TeamDashboard.js",
         "id": "settings.team.manageAction",
         "start": {
           "column": 16,
-          "line": 30
+          "line": 32
         }
       },
       {
         "defaultMessage": "!!!Upgrade your Account",
         "end": {
           "column": 3,
-          "line": 37
+          "line": 39
         },
         "file": "src/components/settings/team/TeamDashboard.js",
         "id": "settings.team.upgradeAction",
         "start": {
           "column": 17,
-          "line": 34
+          "line": 36
         }
       }
     ],
@@ -3105,6 +3105,24 @@
   {
     "descriptors": [
       {
+        "defaultMessage": "!!!Upgrade to Franz Professional",
+        "end": {
+          "column": 3,
+          "line": 16
+        },
+        "file": "src/components/ui/UpgradeButton/index.js",
+        "id": "global.upgradeButton.upgradeToPro",
+        "start": {
+          "column": 16,
+          "line": 13
+        }
+      }
+    ],
+    "path": "src/components/ui/UpgradeButton/index.json"
+  },
+  {
+    "descriptors": [
+      {
         "defaultMessage": "!!!Loading",
         "end": {
           "column": 3,
@@ -3870,42 +3888,42 @@
   {
     "descriptors": [
       {
-        "defaultMessage": "!!!The Franz Todos Preview is currently only available for Franz Premium accounts.",
+        "defaultMessage": "!!!Franz Todos are available to premium users now!",
         "end": {
           "column": 3,
-          "line": 22
+          "line": 21
         },
         "file": "src/features/todos/components/TodosWebview.js",
         "id": "feature.todos.premium.info",
         "start": {
           "column": 15,
-          "line": 19
+          "line": 18
         }
       },
       {
         "defaultMessage": "!!!Upgrade Account",
         "end": {
           "column": 3,
-          "line": 26
+          "line": 25
         },
         "file": "src/features/todos/components/TodosWebview.js",
         "id": "feature.todos.premium.upgrade",
         "start": {
           "column": 14,
-          "line": 23
+          "line": 22
         }
       },
       {
-        "defaultMessage": "!!!Franz Todos will be available to everyone soon.",
+        "defaultMessage": "!!!Everyone else will have to wait a little longer.",
         "end": {
           "column": 3,
-          "line": 30
+          "line": 29
         },
         "file": "src/features/todos/components/TodosWebview.js",
         "id": "feature.todos.premium.rollout",
         "start": {
           "column": 15,
-          "line": 27
+          "line": 26
         }
       }
     ],
@@ -4594,6 +4612,19 @@
           "column": 39,
           "line": 24
         }
+      },
+      {
+        "defaultMessage": "!!!Franz Professional Required",
+        "end": {
+          "column": 3,
+          "line": 31
+        },
+        "file": "src/i18n/globalMessages.js",
+        "id": "global.franzProRequired",
+        "start": {
+          "column": 15,
+          "line": 28
+        }
       }
     ],
     "path": "src/i18n/globalMessages.json"
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index f11d5ca91..4fe9bd52a 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -17,15 +17,17 @@
   "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.info": "Franz Todos are available to premium users now!",
+  "feature.todos.premium.rollout": "Everyone else will have to wait a little longer.",
   "feature.todos.premium.upgrade": "Upgrade Account",
   "global.api.unhealthy": "Can't connect to Franz online services",
+  "global.franzProRequired": "Franz Professional Required",
   "global.notConnectedToTheInternet": "You are not connected to the internet.",
   "global.spellchecker.useDefault": "Use System Default ({default})",
   "global.spellchecking.autodetect": "Detect language automatically",
   "global.spellchecking.autodetect.short": "Automatic",
   "global.spellchecking.language": "Spell checking language",
+  "global.upgradeButton.upgradeToPro": "Upgrade to Franz Professional",
   "import.headline": "Import your Franz 4 services",
   "import.notSupportedHeadline": "Services not yet supported in Franz 5",
   "import.skip.label": "I want to add services manually",
diff --git a/src/i18n/locales/fr.json b/src/i18n/locales/fr.json
index 9227ff28f..451247c8b 100644
--- a/src/i18n/locales/fr.json
+++ b/src/i18n/locales/fr.json
@@ -1,5 +1,5 @@
 {
-   "app.errorHandler.action" : "Recharger",
+   "app.errorHandler.action" : "Rafraîchir",
    "app.errorHandler.headline" : "Une erreur s'est produite",
    "feature.announcements.changelog.headline" : "Changements dans Franz {version}",
    "feature.delayApp.action" : "Obtenez une licence de Supporter Franz",
diff --git a/src/i18n/locales/nl.json b/src/i18n/locales/nl.json
index a05297a64..fd80dbdb9 100644
--- a/src/i18n/locales/nl.json
+++ b/src/i18n/locales/nl.json
@@ -1,6 +1,6 @@
 {
    "app.errorHandler.action" : "Herladen",
-   "app.errorHandler.headline" : "Er ging iets mis",
+   "app.errorHandler.headline" : "Er is iets mis gegaan",
    "feature.announcements.changelog.headline" : "Wijzigingen in Franz {version}",
    "feature.delayApp.action" : "Sponsor Franz",
    "feature.delayApp.headline" : "Sponsor Franz om wachten over te slaan",
@@ -9,27 +9,27 @@
    "feature.shareFranz.action.facebook" : "Deel op Facebook",
    "feature.shareFranz.action.twitter" : "Deel op Twitter",
    "feature.shareFranz.headline" : "Franz is leuker samen!",
-   "feature.shareFranz.shareText.email" : "Ik heb {count} diensten toegevoegd aan Franz! Download de gratis app voor Whatsapp, Messenger, Slack, Skype en co op www.meetfranz.com",
-   "feature.shareFranz.shareText.twitter" : "Ik heb {count} diensten toegevoegd aan Franz! Download de gratis app voor Whatsapp, Messenger, Slack, Skype en co op www.meetfranz.com \/cc @FranzMessenger",
-   "feature.shareFranz.text" : "Vertel je vrienden en collega's hoe geweldig Franz is en help ons om bekender te worden",
-   "global.api.unhealthy" : "Kan geen verbinding maken met de Franz-services",
+   "feature.shareFranz.shareText.email" : "Ik heb {count} services toegevoegd aan Franz! Download de gratis app voor Whatsapp, Messenger, Slack, Skype en co op www.meetfranz.com",
+   "feature.shareFranz.shareText.twitter" : "Ik heb {count} services toegevoegd aan Franz! Download de gratis app voor Whatsapp, Messenger, Slack, Skype en co op www.meetfranz.com \/cc @FranzMessenger",
+   "feature.shareFranz.text" : "Vertel je vrienden en collega's hoe geweldig Franz is en help ons om bekender te worden.",
+   "global.api.unhealthy" : "Kan geen verbinding maken met de Franz-services.",
    "global.notConnectedToTheInternet" : "U bent niet verbonden met het internet.",
    "global.spellchecker.useDefault" : "Gebruik systeemstandaard ({default})",
    "global.spellchecking.autodetect" : "Taal automatisch herkennen",
    "global.spellchecking.autodetect.short" : "Automatisch",
-   "global.spellchecking.language" : "Spelling checken",
+   "global.spellchecking.language" : "Taal voor spellingcontrole",
    "import.headline" : "Importeer uw Franz 4-services",
-   "import.notSupportedHeadline" : "Services die nog niet ondersteund worden in Franz 5",
-   "import.skip.label" : "Ik wil services handmatig toevoegen",
+   "import.notSupportedHeadline" : "Services die (nog) niet ondersteund worden in Franz 5",
+   "import.skip.label" : "Ik wil diensten handmatig toevoegen",
    "import.submit.label" : "Importeer services",
    "infobar.buttonChangelog" : "Wat is er nieuw?",
    "infobar.buttonInstallUpdate" : "Opnieuw opstarten & update installeren",
    "infobar.buttonReloadServices" : "Services opnieuw laden",
    "infobar.requiredRequestsFailed" : "Kan de services en gebruikersinformatie niet laden",
    "infobar.servicesUpdated" : "Je services zijn bijgewerkt.",
-   "infobar.updateAvailable" : "Er is een nieuwe update voor Franz beschikbaar.",
+   "infobar.updateAvailable" : "Een nieuwe update voor Franz is beschikbaar.",
    "invite.email.label" : "E-mailadres",
-   "invite.headline.friends" : "Nodig 3 van je vrienden of collega's uit",
+   "invite.headline.friends" : "Nodig 3 vrienden of collega's uit",
    "invite.name.label" : "Naam",
    "invite.skip.label" : "Ik wil dit later doen",
    "invite.submit.label" : "Uitnodigingen verzenden",
@@ -62,20 +62,20 @@
    "menu.edit.selectAll" : "Selecteer alles",
    "menu.edit.speech" : "Spraak",
    "menu.edit.startDictation" : "Beginnen met dicteren",
-   "menu.edit.startSpeaking" : "Beginnen met praten",
-   "menu.edit.stopSpeaking" : "Stoppen met spreken",
+   "menu.edit.startSpeaking" : "Begin met spreken",
+   "menu.edit.stopSpeaking" : "Stop met spreken",
    "menu.edit.undo" : "Ongedaan maken",
    "menu.file" : "Bestand",
    "menu.help" : "Hulp",
    "menu.help.changelog" : "Wijzigingenlogboek",
    "menu.help.learnMore" : "Meer informatie",
-   "menu.help.privacy" : "Privacy Voorwaarden",
+   "menu.help.privacy" : "Privacyvoorwaarden",
    "menu.help.support" : "Ondersteuning",
    "menu.help.tos" : "Servicevoorwaarden",
-   "menu.services" : "Diensten",
-   "menu.services.activatePreviousService" : "Activeer vorige dienst",
-   "menu.services.addNewService" : "Nieuwe dienst toevoegen",
-   "menu.services.setNextServiceActive" : "Activeer volgende dienst",
+   "menu.services" : "Services",
+   "menu.services.activatePreviousService" : "Activeer vorige service",
+   "menu.services.addNewService" : "Nieuwe service toevoegen...",
+   "menu.services.setNextServiceActive" : "Activeer volgende service",
    "menu.view" : "Weergave",
    "menu.view.enterFullScreen" : "Gebruik volledig scherm",
    "menu.view.exitFullScreen" : "Volledig scherm verlaten",
@@ -101,14 +101,14 @@
    "password.link.signup" : "Maak een gratis account",
    "password.noUser" : "Geen gebruiker bekend met dat e-mailadres",
    "password.submit.label" : "Verzenden",
-   "password.successInfo" : "Controleer alsjeblieft je e-mail",
+   "password.successInfo" : "Controleer je e-mail",
    "premiumFeature.button.upgradeAccount" : "Upgrade Account",
    "pricing.headline" : "Steun Franz",
-   "pricing.link.skipPayment" : "Ik wil de ontwikkeling van Franz niet ondersteunen.",
+   "pricing.link.skipPayment" : "Ik wil de ontwikkeling van Franz (nog) niet ondersteunen.",
    "pricing.submit.label" : "Ik wil de ontwikkeling van Franz steunen",
    "pricing.support.label" : "Selecteer je ondersteuningsplan",
    "service.crashHandler.action" : "Laad {name} opnieuw",
-   "service.crashHandler.autoReload" : "Ga proberen om {name} te herstellen over {seconds} seconden",
+   "service.crashHandler.autoReload" : "Bezig om {name} te herstellen over {seconds} seconden",
    "service.crashHandler.headline" : "Oh nee!",
    "service.crashHandler.text" : "{name} heeft een fout veroorzaakt.",
    "service.disabledHandler.action" : "Activeer {name}",
@@ -126,8 +126,8 @@
    "settings.account.accountType.premium" : "Premium Supporter Account",
    "settings.account.buttonSave" : "Update profiel",
    "settings.account.deleteAccount" : "Verwijder account",
-   "settings.account.deleteEmailSent" : "Je hebt een e-mail ontvangen met een link om de aanvraag tot verwijderen van het account te bevestigen. Je accountgegevens en -data kunnen niet worden teruggehaald!",
-   "settings.account.deleteInfo" : "Wanneer je je Franz-account niet langer wilt gebruiken, kan je je account en alle gerelateerde data hier verwijderen.",
+   "settings.account.deleteEmailSent" : "Je hebt een e-mail ontvangen met een link om het verwijderen van je account te bevestigen. Je accountgegevens en -data kunnen na verwijderen niet meer worden teruggehaald!",
+   "settings.account.deleteInfo" : "Wanneer je je Franz-account niet langer wilt gebruiken, kun je je account en alle gerelateerde data verwijderen.",
    "settings.account.headline" : "Account",
    "settings.account.headlineAccount" : "Accountinformatie",
    "settings.account.headlineDangerZone" : "Gevarenzone",
@@ -143,20 +143,20 @@
    "settings.account.tryReloadUserInfoRequest" : "Probeer opnieuw",
    "settings.account.userInfoRequestFailed" : "Kon gebruikersinformatie niet laden",
    "settings.app.buttonClearAllCache" : "Cache legen",
-   "settings.app.buttonInstallUpdate" : "Herstart & installeer update",
+   "settings.app.buttonInstallUpdate" : "Opnieuw opstarten en updates installeren",
    "settings.app.buttonSearchForUpdate" : "Controleer op updates",
-   "settings.app.cacheInfo" : "De Franz-cache gebruikt op dit moment {size} schijfruimte.",
+   "settings.app.cacheInfo" : "Franz gebruikt op dit moment {size} schijfruimte aan tijdelijke bestanden.",
    "settings.app.currentVersion" : "Huidige versie:",
    "settings.app.form.autoLaunchInBackground" : "Open op de achtergrond",
    "settings.app.form.autoLaunchOnStart" : "Open Franz bij opstarten",
    "settings.app.form.beta" : "Inclusief bètaversies",
    "settings.app.form.darkMode" : "Stap over naar de donkere kant",
-   "settings.app.form.enableGPUAcceleration" : "Schakel videokaart acceleratie in ",
+   "settings.app.form.enableGPUAcceleration" : "Schakel videokaart-acceleratie in ",
    "settings.app.form.enableSpellchecking" : "Zet spellingcontrole aan",
-   "settings.app.form.enableSystemTray" : "Toon Franz in de systeembalk",
+   "settings.app.form.enableSystemTray" : "Pictogram voor Franz in systeemvak tonen",
    "settings.app.form.language" : "Taal",
-   "settings.app.form.minimizeToSystemTray" : "Minimaliseer Franz naar de systeembalk",
-   "settings.app.form.runInBackground" : "Houd Franz op de achtergrond wanneer het venster gesloten wordt",
+   "settings.app.form.minimizeToSystemTray" : "Minimaliseer Franz naar systeemvak",
+   "settings.app.form.runInBackground" : "Houd Franz open op de achtergrond wanneer het venster gesloten wordt",
    "settings.app.form.showDisabledServices" : "Toon uitgeschakelde services",
    "settings.app.form.showMessagesBadgesWhenMuted" : "Toon badge met ongelezen berichten wanneer meldingen zijn uitgeschakeld",
    "settings.app.headline" : "Instellingen",
@@ -165,10 +165,10 @@
    "settings.app.headlineGeneral" : "Algemeen",
    "settings.app.headlineLanguage" : "Taal",
    "settings.app.headlineUpdates" : "Updates",
-   "settings.app.languageDisclaimer" : "Officiële vertalingen zijn in het Engels en Duits. Alle andere talen zijn beheerd door de community.",
+   "settings.app.languageDisclaimer" : "Franz spreekt officieel Engels en Duits. Alle andere talen worden beheerd door de community.",
    "settings.app.restartRequired" : "Deze wijziging heeft een herstart nodig",
    "settings.app.subheadlineCache" : "Cache",
-   "settings.app.translationHelp" : "Help ons om Franz te vertalen naar uw taal.",
+   "settings.app.translationHelp" : "Help ons om Franz uw taal te laten spreken.",
    "settings.app.updateStatusAvailable" : "Update beschikbaar, downloaden...",
    "settings.app.updateStatusSearching" : "Zoekt naar updates",
    "settings.app.updateStatusUpToDate" : "Je gebruikt de laatste versie van Franz",
@@ -184,7 +184,7 @@
    "settings.recipes.all" : "Alle services",
    "settings.recipes.dev" : "Ontwikkeling",
    "settings.recipes.headline" : "Beschikbare services",
-   "settings.recipes.missingService" : "Mist er een dienst?",
+   "settings.recipes.missingService" : "Mis je een service?",
    "settings.recipes.mostPopular" : "Meest populair",
    "settings.recipes.nothingFound" : "Sorry, geen service gevonden met deze zoekterm.",
    "settings.recipes.servicesSuccessfulAddedInfo" : "Service succesvol toegevoegd",
@@ -213,7 +213,7 @@
    "settings.service.form.iconUpload" : "Sleep en drop je afbeelding, of klik hier",
    "settings.service.form.indirectMessageInfo" : "Je ontvangt meldingen van alle nieuwe berichten in een kanaal, niet alleen @username, @channel, @here, ...",
    "settings.service.form.indirectMessages" : "Toon berichtenbadge voor alle nieuwe berichten",
-   "settings.service.form.isMutedInfo" : "Indien uitgeschakeld zullen alle meldinggeluiden en afgespeelde audio uitgeschakeld zijn",
+   "settings.service.form.isMutedInfo" : "Indien uitgeschakeld, worden meldingen en audio niet afgespeeld",
    "settings.service.form.name" : "Naam",
    "settings.service.form.proxy.headline" : "HTTP\/HTTPS Proxy instellingen",
    "settings.service.form.proxy.host" : "Proxy Host\/IP",
@@ -233,15 +233,15 @@
    "settings.services.discoverServices" : "Ontdek services",
    "settings.services.headline" : "Jouw services",
    "settings.services.noServicesAdded" : "Je hebt nog geen services toegevoegd.",
-   "settings.services.servicesRequestFailed" : "Kan jouw diensten niet laden",
+   "settings.services.servicesRequestFailed" : "Kan jouw services niet laden",
    "settings.services.tooltip.isDisabled" : "Service is uitgeschakeld",
-   "settings.services.tooltip.isMuted" : "Alle geluiden zijn uitgeschakeld",
+   "settings.services.tooltip.isMuted" : "Geluid is uitgeschakeld",
    "settings.services.tooltip.notificationsDisabled" : "Meldingen zijn uitgeschakeld",
    "settings.services.updatedInfo" : "Je wijzigingen zijn opgeslagen",
-   "settings.team.contentHeadline" : "Franz voor groepen",
-   "settings.team.copy" : "Franz voor Teams geeft je de mogelijkheid om collega's uit te nodigen voor je team door hen een e-mail te sturen en hun inschrijvingen te beheren in je accountvoorkeuren. Verspil geen tijd met het instellen van inschrijvingen voor elk teamlid apart, vergeet meerdere facturen en verschillende afrekeningsperiodes - één team regeert alles!",
+   "settings.team.contentHeadline" : "Franz voor Teams",
+   "settings.team.copy" : "Franz voor Teams geeft je de mogelijkheid om collega's uit te nodigen voor je team door hen een e-mail te sturen en hun inschrijvingen te beheren in je accountvoorkeuren. Verspil geen tijd met het instellen van inschrijvingen voor elk individueel teamlid, vergeet meerdere facturen en verschillende afrekeningsperiodes - één team om alles te regelen!",
    "settings.team.headline" : "Team",
-   "settings.team.intro" : "Gebruiken jij en je team Franz? Je kunt nu Premium inschrijvingen beheren voor zoveel collega's, vrienden, of familieleden als je wilt, allemaal vanaf één account.",
+   "settings.team.intro" : "Gebruiken jij en je team Franz? Je kunt nu Premium inschrijvingen beheren voor zoveel collega's, vrienden, of familieleden als je wilt. En dat alles vanuit één account.",
    "settings.team.manageAction" : "Beheer je Team op meetfranz.com",
    "settings.team.upgradeAction" : "Jouw Account opwaarderen",
    "settings.user.form.accountType.company" : "Bedrijf",
@@ -258,7 +258,7 @@
    "settings.workspace.form.buttonDelete" : "Verwijder werkruimte",
    "settings.workspace.form.buttonSave" : "Sla werkruimte op",
    "settings.workspace.form.name" : "Naam",
-   "settings.workspace.form.servicesInWorkspaceHeadline" : "Diensten in deze werkruimte",
+   "settings.workspace.form.servicesInWorkspaceHeadline" : "Services in deze werkruimte",
    "settings.workspace.form.yourWorkspaces" : "Jouw werkruimtes",
    "settings.workspaces.deletedInfo" : "Werkruimte is verwijderd",
    "settings.workspaces.headline" : "Jouw werkplaatsen",
@@ -266,11 +266,11 @@
    "settings.workspaces.tryReloadWorkspaces" : "Probeer opnieuw",
    "settings.workspaces.updatedInfo" : "Je wijzigingen zijn opgeslagen",
    "settings.workspaces.workspaceFeatureHeadline" : "Less is More: Zie hier Franz Werkruimtes",
-   "settings.workspaces.workspaceFeatureInfo" : "Franz werkruimtes laat je aandacht geven aan wat nu belangrijk is. Maak verschillende sets van diensten aan en schakel gelijk wanneer tussen de verschillende sets.Jij beslist welke diensten je wanneer en waar nodig hebt, enkel zo kunnen wij jou helpen je focus te behouden. Of net makkelijk de switch te maken van werk naar ontspanning.",
+   "settings.workspaces.workspaceFeatureInfo" : "Franz werkruimtes laat je aandacht geven aan wat nu belangrijk is. Maak verschillende sets van services aan en schakel wanneer je wilt tussen de verschillende sets. Jij beslist welke services je wanneer en waar nodig hebt. Zo helpen wij jou je focus te behouden - of net zo gemakkelijk te switchen van werk naar ontspanning.",
    "settings.workspaces.workspacesRequestFailed" : "Kan jouw werkruimtes niet laden",
    "sidebar.addNewService" : "Voeg service toe",
    "sidebar.closeWorkspaceDrawer" : "Werkruimte pagina sluiten",
-   "sidebar.muteApp" : "Schakel berichten & geluid uit",
+   "sidebar.muteApp" : "Berichten & geluid uitschakelen",
    "sidebar.openWorkspaceDrawer" : "Werkruimte pagina openen",
    "sidebar.settings" : "Instellingen",
    "sidebar.unmuteApp" : "Berichten & geluid inschakelen",
@@ -281,18 +281,18 @@
    "signup.headline" : "Aanmelden",
    "signup.lastname.label" : "Achternaam",
    "signup.legal.info" : "Door een Franz-account aan te maken ga je akkoord met de",
-   "signup.legal.privacy" : "Privacy Voorwaarden",
+   "signup.legal.privacy" : "Privacyvoorwaarden",
    "signup.legal.terms" : "Gebruiksvoorwaarden",
-   "signup.link.login" : "Al een account? Log in!",
+   "signup.link.login" : "Heb je al een account? Log in!",
    "signup.password.label" : "Wachtwoord",
    "signup.submit.label" : "Account aanmaken",
-   "subscription.euTaxInfo" : "Bewoners binnen EU: lokale belasting kan van toepassing zijn",
+   "subscription.euTaxInfo" : "EU-bewoners: lokale belastingen kunnen van toepassing zijn",
    "subscription.features.ads" : "Geen advertenties, nooit!",
-   "subscription.features.comingSoon" : "komt binnenkort",
+   "subscription.features.comingSoon" : "Binnenkort",
    "subscription.features.noInterruptions" : "Geen haperingen & pop ups over upgrades",
    "subscription.features.onpremise.mattermost" : "Voeg op-locatie\/gehoste diensten zoals Mattermost toe",
-   "subscription.features.proxy" : "Proxy understeuning voor diensten",
-   "subscription.features.spellchecker" : "Ondersteuning voor spellingscheck",
+   "subscription.features.proxy" : "Proxy understeuning voor services",
+   "subscription.features.spellchecker" : "Ondersteuning voor spellingcontrole",
    "subscription.features.workspaces" : "Beheer je diensten in de werkruimtes",
    "subscription.includedFeatures" : "Betaald Franz Premium Supporter Account bevat",
    "subscription.paymentSessionError" : "Kan betaalformulier niet initialiseren",
@@ -303,30 +303,30 @@
    "subscriptionPopup.buttonCancel" : "Annuleer",
    "subscriptionPopup.buttonDone" : "Klaar",
    "tabs.item.deleteService" : "Verwijder service",
-   "tabs.item.disableAudio" : "Schakel audio uit",
-   "tabs.item.disableNotifications" : "Schakel meldingen uit",
-   "tabs.item.disableService" : "Schakel service uit",
+   "tabs.item.disableAudio" : "Audio uitschakelen",
+   "tabs.item.disableNotifications" : "Meldingen uitschakelen",
+   "tabs.item.disableService" : "Service uitschakelen",
    "tabs.item.edit" : "Bewerken",
    "tabs.item.enableAudio" : "Audio inschakelen",
    "tabs.item.enableNotification" : "Meldingen inschakelen",
    "tabs.item.enableService" : "Service inschakelen",
    "tabs.item.reload" : "Herladen",
    "validation.email" : "{field} is niet geldig",
-   "validation.minLength" : "{field} moet minimaal {length} karakters lang zijn",
-   "validation.oneRequired" : "Er is op zijn minst één vereist",
+   "validation.minLength" : "{field} dient minimaal {length} karakters lang te zijn",
+   "validation.oneRequired" : "Minstens één vereist",
    "validation.required" : "{field} is vereist",
-   "validation.url" : "{field} is niet een geldige URL",
+   "validation.url" : "{field} is geen geldige URL",
    "welcome.loginButton" : "Log in op je account",
    "welcome.signupButton" : "Maak een gratis account",
    "workspaceDrawer.addNewWorkspaceLabel" : "Voeg een nieuwe werkruimte toe",
-   "workspaceDrawer.allServices" : "Alle diensten",
+   "workspaceDrawer.allServices" : "Alle services",
    "workspaceDrawer.headline" : "Werkruimtes",
    "workspaceDrawer.item.contextMenuEdit" : "bewerken",
-   "workspaceDrawer.item.noServicesAddedYet" : "Nog geen diensten toegevoegd",
+   "workspaceDrawer.item.noServicesAddedYet" : "Nog geen services toegevoegd",
    "workspaceDrawer.premiumCtaButtonLabel" : "Maak je eerste werkruimte",
    "workspaceDrawer.proFeatureBadge" : "Premium feature",
-   "workspaceDrawer.reactivatePremiumAccountLabel" : "Heractiveer premium account",
-   "workspaceDrawer.workspaceFeatureInfo" : "<p>Franz werkruimtes laat je aandacht geven aan wat nu belangrijk is. Maak verschillende sets van diensten aan en schakel gelijk wanneer tussen de verschillende sets.<\/p><p>Jij beslist welke diensten je wanneer en waar nodig hebt, enkel zo kunnen wij jou helpen je focus te behouden. Of net makkelijk de switch te maken van werk naar ontspanning.<\/p>",
-   "workspaceDrawer.workspacesSettingsTooltip" : "Pas werkruimte instellingen aan",
+   "workspaceDrawer.reactivatePremiumAccountLabel" : "Premium account heractiveren",
+   "workspaceDrawer.workspaceFeatureInfo" : "Franz werkruimtes laat je aandacht geven aan wat nu belangrijk is. Maak verschillende sets van services aan en schakel wanneer je wilt tussen de verschillende sets. Jij beslist welke services je wanneer en waar nodig hebt. Zo helpen wij jou je focus te behouden - of net zo gemakkelijk te switchen van werk naar ontspanning.",
+   "workspaceDrawer.workspacesSettingsTooltip" : "Werkruimte instellingen aanpassen",
    "workspaces.switchingIndicator.switchingTo" : "Overschakelen naar"
 }
diff --git a/src/i18n/locales/sk.json b/src/i18n/locales/sk.json
index 3b051e975..bd08d5e4d 100644
--- a/src/i18n/locales/sk.json
+++ b/src/i18n/locales/sk.json
@@ -3,15 +3,15 @@
    "app.errorHandler.headline" : "Niečo sa pokazilo",
    "feature.announcements.changelog.headline" : "Zmeny vo Franz {version}",
    "feature.delayApp.action" : "Získajte licenciu pre Franz podporu",
-   "feature.delayApp.headline" : "Please purchase a Franz Supporter License to skip waiting",
-   "feature.delayApp.text" : "Franz bude pokračovať v {seconds} seundách.",
+   "feature.delayApp.headline" : "Prosím, kúp si licenciu Franz Supporter a nebudeš musieť čakať",
+   "feature.delayApp.text" : "Franz bude pokračovať v {seconds} sekundách.",
    "feature.shareFranz.action.email" : "Odoslať ako e-mail",
    "feature.shareFranz.action.facebook" : "Zdielať na Facebook-u",
    "feature.shareFranz.action.twitter" : "Zdieľať na Twitter-i",
-   "feature.shareFranz.headline" : "Franz is better together!",
-   "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.shareFranz.headline" : "Franz je lepší spolu!",
+   "feature.shareFranz.shareText.email" : "Pridali sme {count} služieb do Franz! Získajte zadarmo aplikáciu pre WhatsApp, Messenger, Slack, Skype a iné na www.meetfranz.com",
+   "feature.shareFranz.shareText.twitter" : "Pridal som {count} služieb do Franz! Získajte zadarmo aplikáciu pre WhatsApp, Messenger, Slack, Skype a iné na www.meetfranz.com \/cc @FranzMessenger",
+   "feature.shareFranz.text" : "Povedzte vašim priateľom a známym aký je Franz skvelý a pomôžte nám rozšíriť sa do sveta.",
    "global.api.unhealthy" : "Nedá sa pripojiť k online službám Franz",
    "global.notConnectedToTheInternet" : "Nie ste pripojení k internetu.",
    "global.spellchecker.useDefault" : "Použiť predvolené nastavenie systému ({default})",
@@ -92,9 +92,9 @@
    "menu.window.minimize" : "Minimalizovať",
    "menu.workspaces" : "Pracovný priestor",
    "menu.workspaces.addNewWorkspace" : "Pridať nový pracovný priestor ...",
-   "menu.workspaces.closeWorkspaceDrawer" : "Close workspace drawer",
+   "menu.workspaces.closeWorkspaceDrawer" : "Zavrieť workspace záložku",
    "menu.workspaces.defaultWorkspace" : "Všetky služby",
-   "menu.workspaces.openWorkspaceDrawer" : "Open workspace drawer",
+   "menu.workspaces.openWorkspaceDrawer" : "Otvoriť workspace záložku",
    "password.email.label" : "E-mailová adresa",
    "password.headline" : "Obnoviť heslo",
    "password.link.login" : "Prihlásiť sa do vášho účtu",
@@ -117,7 +117,7 @@
    "service.errorHandler.editAction" : "Upraviť {name}",
    "service.errorHandler.headline" : "Ale nie!",
    "service.errorHandler.message" : "Chyba",
-   "service.errorHandler.text" : "{name} has failed to load.",
+   "service.errorHandler.text" : "{name} sa nepodarilo načítať.",
    "service.webviewLoader.loading" : "Načítava",
    "services.getStarted" : "Začíname",
    "services.welcome" : "Vítajte v aplikácii Franz",
@@ -266,12 +266,12 @@
    "settings.workspaces.tryReloadWorkspaces" : "Skúsiť znova",
    "settings.workspaces.updatedInfo" : "Vaše zmeny boli uložené",
    "settings.workspaces.workspaceFeatureHeadline" : "Menej je viac: Predstavenie Franz Pracovné priestory",
-   "settings.workspaces.workspaceFeatureInfo" : "Franz Workspaces let you focus on what’s important right now. Set up different sets of services and easily switch between them at any time. You decide which services you need when and where, so we can help you stay on top of your game - or easily switch off from work whenever you want.",
-   "settings.workspaces.workspacesRequestFailed" : "Could not load your workspaces",
+   "settings.workspaces.workspaceFeatureInfo" : "Franz Workspace vám umožňujú sústrediť sa na to, čo je práve dôležité. Nastavte si rozličné skupiny služieb a jednoducho medzi nimi kedykoľvek prepínajte. Vy rozhodujete ktoré služby, kedy a kde potrebujete, a my vám potom vieme pomôcť sústrediť sa na prácu - alebo jednoducho prepnúť z práce na čokoľvek iné.",
+   "settings.workspaces.workspacesRequestFailed" : "Nebolo možné načítať vaše workspace",
    "sidebar.addNewService" : "Pridať novú službu",
-   "sidebar.closeWorkspaceDrawer" : "Close workspace drawer",
+   "sidebar.closeWorkspaceDrawer" : "Zavrieť workspace záložku",
    "sidebar.muteApp" : "Vypnúť upozornenia a zvuky",
-   "sidebar.openWorkspaceDrawer" : "Open workspace drawer",
+   "sidebar.openWorkspaceDrawer" : "Otvoriť workspace záložku",
    "sidebar.settings" : "Nastavenia",
    "sidebar.unmuteApp" : "Povoliť oznámenia a zvuky",
    "signup.company.label" : "Spoločnosť",
@@ -289,11 +289,11 @@
    "subscription.euTaxInfo" : "Pre obyvateľov EÚ: môže byť aplikovaná miestna daň",
    "subscription.features.ads" : "Žiadne reklamy, nikdy!",
    "subscription.features.comingSoon" : "už čoskoro",
-   "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.features.noInterruptions" : "Žiadne oneskorenia a obťažovania po aktivovaní licencie",
+   "subscription.features.onpremise.mattermost" : "Pridať on-premise\/hostovanú službu ako Mattermost",
+   "subscription.features.proxy" : "Podpora proxy pre služby",
+   "subscription.features.spellchecker" : "Podpora pre kontrolovanie pravopisných chýb",
+   "subscription.features.workspaces" : "Organizujte vaše služby vo workspace",
    "subscription.includedFeatures" : "Platený účet Premium Supporter Franz zahŕňa",
    "subscription.paymentSessionError" : "Nepodarilo sa inicializovať platbu od",
    "subscription.submit.label" : "Chcem podporiť vývoj aplikácie Franz",
@@ -313,20 +313,20 @@
    "tabs.item.reload" : "Obnoviť",
    "validation.email" : "{field} je neplatný",
    "validation.minLength" : "{field} by malo byť dlhé aspoň {length} znakov",
-   "validation.oneRequired" : "At least one is required",
+   "validation.oneRequired" : "Je nutné zadať aspoň jeden",
    "validation.required" : "{field} je povinné",
    "validation.url" : "{field} nie je platné URL",
    "welcome.loginButton" : "Prihlásiť sa do vášho účtu",
    "welcome.signupButton" : "Vytvoriť účet zdarma",
-   "workspaceDrawer.addNewWorkspaceLabel" : "Add new workspace",
+   "workspaceDrawer.addNewWorkspaceLabel" : "Pridať nový workspace",
    "workspaceDrawer.allServices" : "Všetky služby",
-   "workspaceDrawer.headline" : "Pracovn�� priestor",
-   "workspaceDrawer.item.contextMenuEdit" : "edit",
-   "workspaceDrawer.item.noServicesAddedYet" : "No services added yet",
-   "workspaceDrawer.premiumCtaButtonLabel" : "Create your first workspace",
-   "workspaceDrawer.proFeatureBadge" : "Premium feature",
-   "workspaceDrawer.reactivatePremiumAccountLabel" : "Reactivate premium account",
-   "workspaceDrawer.workspaceFeatureInfo" : "<p>Franz Workspaces let you focus on what’s important right now. Set up different sets of services and easily switch between them at any time.<\/p><p>You decide which services you need when and where, so we can help you stay on top of your game - or easily switch off from work whenever you want.<\/p>",
-   "workspaceDrawer.workspacesSettingsTooltip" : "Edit workspaces settings",
-   "workspaces.switchingIndicator.switchingTo" : "Switching to"
+   "workspaceDrawer.headline" : "Pracovn�� plochy",
+   "workspaceDrawer.item.contextMenuEdit" : "Upraviť",
+   "workspaceDrawer.item.noServicesAddedYet" : "Zatiaľ žiadne služby",
+   "workspaceDrawer.premiumCtaButtonLabel" : "Vytvorte váš prvý workspace",
+   "workspaceDrawer.proFeatureBadge" : "Prémiová funkcia",
+   "workspaceDrawer.reactivatePremiumAccountLabel" : "Obnovte svoj prémiový účet",
+   "workspaceDrawer.workspaceFeatureInfo" : "<p>Franz Workspace vám umožňujú sústrediť sa na to, čo je práve dôležité. Nastavte si rozličné skupiny služieb a jednoducho medzi nimi kedykoľvek prepínajte.<\/p><p>Vy rozhodujete ktoré služby, kedy a kde potrebujete, a my vám potom vieme pomôcť sústrediť sa na prácu - alebo jednoducho prepnúť z práce na čokoľvek iné. <\/p>",
+   "workspaceDrawer.workspacesSettingsTooltip" : "Upraviť nastavenia workspace",
+   "workspaces.switchingIndicator.switchingTo" : "Prepínanie na"
 }
diff --git a/src/i18n/messages/src/components/settings/team/TeamDashboard.json b/src/i18n/messages/src/components/settings/team/TeamDashboard.json
index 6bccc25ff..0c33fee5f 100644
--- a/src/i18n/messages/src/components/settings/team/TeamDashboard.json
+++ b/src/i18n/messages/src/components/settings/team/TeamDashboard.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Team",
     "file": "src/components/settings/team/TeamDashboard.js",
     "start": {
-      "line": 14,
+      "line": 17,
       "column": 12
     },
     "end": {
-      "line": 17,
+      "line": 20,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!Franz for Teams",
     "file": "src/components/settings/team/TeamDashboard.js",
     "start": {
-      "line": 18,
+      "line": 21,
       "column": 19
     },
     "end": {
-      "line": 21,
+      "line": 24,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!You and your team use Franz? You can now manage Premium subscriptions for as many colleagues, friends or family members as you want, all from within one account.",
     "file": "src/components/settings/team/TeamDashboard.js",
     "start": {
-      "line": 22,
+      "line": 25,
       "column": 9
     },
     "end": {
-      "line": 25,
+      "line": 28,
       "column": 3
     }
   },
@@ -43,11 +43,11 @@
     "defaultMessage": "!!!Franz for Teams gives you the option to invite co-workers to your team by sending them email invitations and manage their subscriptions in your account’s preferences. Don’t waste time setting up subscriptions for every team member individually, forget about multiple invoices and different billing cycles - one team to rule them all!",
     "file": "src/components/settings/team/TeamDashboard.js",
     "start": {
-      "line": 26,
+      "line": 29,
       "column": 8
     },
     "end": {
-      "line": 29,
+      "line": 32,
       "column": 3
     }
   },
@@ -56,11 +56,11 @@
     "defaultMessage": "!!!Manage your Team on meetfranz.com",
     "file": "src/components/settings/team/TeamDashboard.js",
     "start": {
-      "line": 30,
+      "line": 33,
       "column": 16
     },
     "end": {
-      "line": 33,
+      "line": 36,
       "column": 3
     }
   },
@@ -69,11 +69,11 @@
     "defaultMessage": "!!!Upgrade your Account",
     "file": "src/components/settings/team/TeamDashboard.js",
     "start": {
-      "line": 34,
+      "line": 37,
       "column": 17
     },
     "end": {
-      "line": 37,
+      "line": 40,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/components/ui/UpgradeButton/index.json b/src/i18n/messages/src/components/ui/UpgradeButton/index.json
new file mode 100644
index 000000000..28e44cb66
--- /dev/null
+++ b/src/i18n/messages/src/components/ui/UpgradeButton/index.json
@@ -0,0 +1,15 @@
+[
+  {
+    "id": "global.upgradeButton.upgradeToPro",
+    "defaultMessage": "!!!Upgrade to Franz Professional",
+    "file": "src/components/ui/UpgradeButton/index.js",
+    "start": {
+      "line": 13,
+      "column": 16
+    },
+    "end": {
+      "line": 16,
+      "column": 3
+    }
+  }
+]
\ No newline at end of file
diff --git a/src/i18n/messages/src/features/todos/components/TodosWebview.json b/src/i18n/messages/src/features/todos/components/TodosWebview.json
index 2387112b4..9cc3325d1 100644
--- a/src/i18n/messages/src/features/todos/components/TodosWebview.json
+++ b/src/i18n/messages/src/features/todos/components/TodosWebview.json
@@ -1,7 +1,7 @@
 [
   {
     "id": "feature.todos.premium.info",
-    "defaultMessage": "!!!The Franz Todos Preview is currently only available for Franz Premium accounts.",
+    "defaultMessage": "!!!Franz Todos are available to premium users now!",
     "file": "src/features/todos/components/TodosWebview.js",
     "start": {
       "line": 18,
@@ -27,7 +27,7 @@
   },
   {
     "id": "feature.todos.premium.rollout",
-    "defaultMessage": "!!!Franz Todos will be available to everyone soon.",
+    "defaultMessage": "!!!Everyone else will have to wait a little longer.",
     "file": "src/features/todos/components/TodosWebview.js",
     "start": {
       "line": 26,
diff --git a/src/i18n/messages/src/i18n/globalMessages.json b/src/i18n/messages/src/i18n/globalMessages.json
index 28001614f..f4fd5b8b0 100644
--- a/src/i18n/messages/src/i18n/globalMessages.json
+++ b/src/i18n/messages/src/i18n/globalMessages.json
@@ -76,5 +76,18 @@
       "line": 27,
       "column": 3
     }
+  },
+  {
+    "id": "global.franzProRequired",
+    "defaultMessage": "!!!Franz Professional Required",
+    "file": "src/i18n/globalMessages.js",
+    "start": {
+      "line": 28,
+      "column": 15
+    },
+    "end": {
+      "line": 31,
+      "column": 3
+    }
   }
 ]
\ No newline at end of file
diff --git a/src/stores/AppStore.js b/src/stores/AppStore.js
index 6054e6721..315235ba4 100644
--- a/src/stores/AppStore.js
+++ b/src/stores/AppStore.js
@@ -94,6 +94,7 @@ export default class AppStore extends Store {
       this._offlineCheck.bind(this),
       this._setLocale.bind(this),
       this._muteAppHandler.bind(this),
+      this._handleFullScreen.bind(this),
     ]);
   }
 
@@ -379,6 +380,16 @@ export default class AppStore extends Store {
     }
   }
 
+  _handleFullScreen() {
+    const body = document.querySelector('body');
+
+    if (this.isFullScreen) {
+      body.classList.add('isFullScreen');
+    } else {
+      body.classList.remove('isFullScreen');
+    }
+  }
+
   // Helpers
   _appStartsCounter() {
     this.actions.settings.update({
diff --git a/src/stores/UIStore.js b/src/stores/UIStore.js
index 2c785111f..9680c5bcc 100644
--- a/src/stores/UIStore.js
+++ b/src/stores/UIStore.js
@@ -46,7 +46,6 @@ 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 7ac7d2375..6e6f745c7 100644
--- a/src/stores/UserStore.js
+++ b/src/stores/UserStore.js
@@ -160,6 +160,10 @@ export default class UserStore extends Store {
     return !!this.data.isPremium;
   }
 
+  @computed get isPremiumOverride() {
+    return (!this.team.plan && this.isPremium) || (this.team.state === 'expired' && this.isPremium);
+  }
+
   @computed get isPersonal() {
     if (!this.team.plan) return false;
     const plan = getPlan(this.team.plan);
@@ -168,12 +172,12 @@ export default class UserStore extends Store {
   }
 
   @computed get isPro() {
-    if (!this.team.plan && this.isPremium) return true;
+    if (this.isPremiumOverride) return true;
 
-    if (!this.team.plan) return false;
+    if ((!this.team.plan || this.team.state === 'expired')) return false;
     const plan = getPlan(this.team.plan);
 
-    return plan === PLANS.PRO;
+    return plan === PLANS.PRO || plan === PLANS.LEGACY;
   }
 
   @computed get legacyServices() {
diff --git a/src/styles/layout.scss b/src/styles/layout.scss
index 10027da60..b18bd6dcf 100644
--- a/src/styles/layout.scss
+++ b/src/styles/layout.scss
@@ -32,9 +32,11 @@ html { overflow: hidden; }
   .app-loader .app-loader__title { color: $dark-theme-gray-lightest; }
 }
 
-.app {
-  //display: flex;
+body.win32:not(.isFullScreen) .app .app__content {
+  height: calc(100% - 28px);
+}
 
+.app {
   .app__content {
     display: flex;
     width: calc(100% + 300px);
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index 0955aaa0c..bb95ab5d2 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -1,45 +1,39 @@
 @import './config.scss';
 
 %headline {
-  color: $theme-gray-light;
+  color: #FFF;
   font-size: 20px;
   font-weight: 400;
   letter-spacing: -1px;
 
-  a { color: $theme-gray-light; }
+  a { color: #FFF }
 }
 
 %headline__dark {
-  color: $dark-theme-gray-lightest;
+  color: #FFF;
+  font-size: 20px;
+  font-weight: 400;
+  letter-spacing: -1px;
 
-  a { color: $dark-theme-gray-lightest; }
+  a { color: #FFF }
 }
 
 .theme__dark {
   .settings-wrapper { background: rgba($dark-theme-black, .8); }
 
   .settings {
-    background: $dark-theme-gray-darkest;
-    box-shadow: 0 20px 50px rgba($dark-theme-black, .5);
-
     .settings__header {
-      background: $dark-theme-gray-darker;
-
-      h1,
-      .settings__header-item { @extend %headline__dark; }
+      .mdi { color: #FFF }
+    }
 
-      .separator { border-right: 1px solid $dark-theme-gray-dark; }
-      .mdi { color: $dark-theme-gray-lightest; }
+    .settings__main {
+      background: $dark-theme-gray-darkest;
     }
 
     .settings__body::-webkit-scrollbar-thumb { background: $dark-theme-gray; }
 
     .settings__close {
-      background: $dark-theme-gray-darker;
-      border-left: none;
-      color: $dark-theme-gray-lightest;
-
-      &:hover { background: darken($dark-theme-gray-darker, 5%); }
+      color: #FFF;
     }
 
     &__settings-group h3 { color: $dark-theme-gray-lightest; }
@@ -76,6 +70,11 @@
 
     .settings-navigation__link {
       color: $dark-theme-gray-lightest;
+      border-bottom: 1px solid darken($dark-theme-gray-darker, 3%);
+
+      &:last-child {
+        border: 0,
+      }
 
       .badge {
         background: $dark-theme-gray-lighter;
@@ -129,15 +128,14 @@
 }
 
 .settings {
-  background: #FFF;
   border-radius: $theme-border-radius;
-  box-shadow: 0 20px 50px rgba(black, .5);
+  // box-shadow: 0 20px 50px rgba(black, .5);
   display: flex;
   height: 100%;
   max-height: 720px;
   max-width: 900px;
   min-height: 400px;
-  overflow: hidden;
+  // overflow: hidden;
   position: relative;
   width: 100%;
   z-index: 9999;
@@ -147,25 +145,32 @@
     flex: 1;
     flex-direction: column;
     height: auto;
+    border-radius: $theme-border-radius;
+    overflow: hidden;
+    box-shadow: 0 20px 50px rgba($dark-theme-black, .5);
+    background: #FFF;
   }
 
   .settings__header {
     align-items: center;
-    background: $theme-gray-lighter;
+    background: $theme-brand-primary;
     display: flex;
     height: 50px;
     padding: 0 40px;
     width: calc(100% - 60px);
+    color: #FFF;
 
     h1 {
       @extend %headline;
       margin: 0;
     }
 
-    .settings__header-item { @extend %headline; }
+    .settings__header-item {
+      @extend %headline;
+    }
 
     .separator {
-      border-right: 1px solid darken($theme-gray-lighter, 10%);
+      border-right: 1px solid darken($theme-brand-primary, 8%);
       height: 100%;
       margin: 0 15px;
       transform: skew(15deg) rotate(2deg);
@@ -218,17 +223,18 @@
   }
 
   .settings__close {
-    background: $theme-gray-lighter;
-    border-left: 1px solid darken($theme-gray-lighter, 5%);
-    color: $theme-gray-light;
+    background: $theme-brand-primary;
+    border-left: 1px solid darken($theme-brand-primary, 8%);
+    color: #FFF;
     font-size: 20px;
     height: 50px;
     padding: 0 20px;
     position: absolute;
     right: 0;
     transition: background $theme-transition-time;
+    border-top-right-radius: $theme-border-radius;
 
-    &:hover { background: darken($theme-gray-lighter, 5%); }
+    &:hover { background: darken($theme-brand-primary, 5%); }
   }
 
   .search-input { margin-bottom: 30px; }
@@ -414,7 +420,13 @@
   background: $theme-gray-lightest;
   flex-direction: column;
   height: auto;
-  width: 200px;
+  width: 240px;
+  height: calc(100% - 100px);
+  align-self: center;
+  border-top-left-radius: $theme-border-radius;;
+  border-bottom-left-radius: $theme-border-radius;;
+  overflow: hidden;
+  box-shadow: 0 20px 50px rgba($dark-theme-black, .5);
 
   .settings-navigation__link {
     align-items: center;
@@ -426,6 +438,7 @@
     padding: 0 20px;
     text-decoration: none;
     transition: background $theme-transition-time, color $theme-transition-time;
+    border-bottom: 1px solid darken($theme-gray-lightest, 3%);
 
     &:hover {
       background: darken($theme-gray-lightest, 5%);