29 files changed, 715 insertions, 147 deletions

diff --git a/src/components/AppUpdateInfoBar.js b/src/components/AppUpdateInfoBar.js
index 4fb3a8b71..4108fdf12 100644
--- a/src/components/AppUpdateInfoBar.js
+++ b/src/components/AppUpdateInfoBar.js
@@ -8,7 +8,7 @@ import InfoBar from './ui/InfoBar';
 const messages = defineMessages({
   updateAvailable: {
     id: 'infobar.updateAvailable',
-    defaultMessage: '!!!A new update for Franz is available.',
+    defaultMessage: '!!!A new update for Ferdi is available.',
   },
   changelog: {
     id: 'infobar.buttonChangelog',
diff --git a/src/components/auth/AuthLayout.js b/src/components/auth/AuthLayout.js
index 75a8cfc61..0c5198583 100644
--- a/src/components/auth/AuthLayout.js
+++ b/src/components/auth/AuthLayout.js
@@ -52,7 +52,7 @@ export default @observer class AuthLayout extends Component {
 
     return (
       <>
-        {isWindows && !isFullScreen && <TitleBar menu={window.franz.menu.template} icon="assets/images/logo.svg" />}
+        {isWindows && !isFullScreen && <TitleBar menu={window.ferdi.menu.template} icon="assets/images/logo.svg" />}
         <div className="auth">
           {!isOnline && (
             <InfoBar
@@ -87,7 +87,7 @@ export default @observer class AuthLayout extends Component {
             })}
           </div>
           {/* </div> */}
-          <Link to="https://adlk.io" className="auth__adlk" target="_blank">
+          <Link to="https://github.com/getferdi/ferdi" className="auth__adlk" target="_blank">
             <img src="./assets/images/adlk.svg" alt="" />
           </Link>
         </div>
diff --git a/src/components/auth/Import.js b/src/components/auth/Import.js
index 0d5feb274..3e34c3162 100644
--- a/src/components/auth/Import.js
+++ b/src/components/auth/Import.js
@@ -12,11 +12,11 @@ import Button from '../ui/Button';
 const messages = defineMessages({
   headline: {
     id: 'import.headline',
-    defaultMessage: '!!!Import your Franz 4 services',
+    defaultMessage: '!!!Import your Ferdi 4 services',
   },
   notSupportedHeadline: {
     id: 'import.notSupportedHeadline',
-    defaultMessage: '!!!Services not yet supported in Franz 5',
+    defaultMessage: '!!!Services not yet supported in Ferdi 5',
   },
   submitButtonLabel: {
     id: 'import.submit.label',
diff --git a/src/components/auth/Locked.js b/src/components/auth/Locked.js
new file mode 100644
index 000000000..045621d0a
--- /dev/null
+++ b/src/components/auth/Locked.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 Form from '../../lib/Form';
+import { required } from '../../helpers/validation-helpers';
+import Input from '../ui/Input';
+import Button from '../ui/Button';
+import Infobox from '../ui/Infobox';
+
+import { globalError as globalErrorPropType } from '../../prop-types';
+
+const messages = defineMessages({
+  headline: {
+    id: 'locked.headline',
+    defaultMessage: '!!!Locked',
+  },
+  info: {
+    id: 'locked.info',
+    defaultMessage: '!!!Ferdi is currently locked. Please unlock Ferdi with your password to see your messages.',
+  },
+  passwordLabel: {
+    id: 'locked.password.label',
+    defaultMessage: '!!!Password',
+  },
+  submitButtonLabel: {
+    id: 'locked.submit.label',
+    defaultMessage: '!!!Unlock',
+  },
+  invalidCredentials: {
+    id: 'locked.invalidCredentials',
+    defaultMessage: '!!!Password invalid',
+  },
+});
+
+export default @observer class Locked extends Component {
+  static propTypes = {
+    onSubmit: PropTypes.func.isRequired,
+    isSubmitting: PropTypes.bool.isRequired,
+    error: globalErrorPropType.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  form = new Form({
+    fields: {
+      password: {
+        label: this.context.intl.formatMessage(messages.passwordLabel),
+        value: '',
+        validators: [required],
+        type: 'password',
+      },
+    },
+  }, this.context.intl);
+
+  submit(e) {
+    e.preventDefault();
+    this.form.submit({
+      onSuccess: (form) => {
+        this.props.onSubmit(form.values());
+      },
+      onError: () => { },
+    });
+  }
+
+  render() {
+    const { form } = this;
+    const { intl } = this.context;
+    const {
+      isSubmitting,
+      error,
+    } = this.props;
+
+    return (
+      <div className="auth__container">
+        <form className="franz-form auth__form" onSubmit={e => this.submit(e)}>
+          <img
+            src="./assets/images/logo.svg"
+            className="auth__logo"
+            alt=""
+          />
+          <h1>{intl.formatMessage(messages.headline)}</h1>
+          <Infobox type="warning">
+            {intl.formatMessage(messages.info)}
+          </Infobox>
+          <Input
+            field={form.$('password')}
+            showPasswordToggle
+          />
+          {error.code === 'invalid-credentials' && (
+            <p className="error-message center">{intl.formatMessage(messages.invalidCredentials)}</p>
+          )}
+          {isSubmitting ? (
+            <Button
+              className="auth__button is-loading"
+              buttonType="secondary"
+              label={`${intl.formatMessage(messages.submitButtonLabel)} ...`}
+              loaded={false}
+              disabled
+            />
+          ) : (
+            <Button
+              type="submit"
+              className="auth__button"
+              label={intl.formatMessage(messages.submitButtonLabel)}
+            />
+          )}
+        </form>
+      </div>
+    );
+  }
+}
diff --git a/src/components/auth/Login.js b/src/components/auth/Login.js
index 5d21f8b60..eea5a09bf 100644
--- a/src/components/auth/Login.js
+++ b/src/components/auth/Login.js
@@ -34,6 +34,14 @@ const messages = defineMessages({
     id: 'login.invalidCredentials',
     defaultMessage: '!!!Email or password not valid',
   },
+  customServerQuestion: {
+    id: 'login.customServerQuestion',
+    defaultMessage: '!!!Using a Franz account to log in?',
+  },
+  customServerSuggestion: {
+    id: 'login.customServerSuggestion',
+    defaultMessage: '!!!Try importing your Franz account into Ferdi',
+  },
   tokenExpired: {
     id: 'login.tokenExpired',
     defaultMessage: '!!!Your session expired, please login again.',
@@ -137,7 +145,22 @@ export default @observer class Login extends Component {
             showPasswordToggle
           />
           {error.code === 'invalid-credentials' && (
-            <p className="error-message center">{intl.formatMessage(messages.invalidCredentials)}</p>
+            <>
+              <p className="error-message center">{intl.formatMessage(messages.invalidCredentials)}</p>
+              { window.ferdi.stores.settings.all.app.server !== 'https://api.franzinfra.com' && (
+                <p className="error-message center">
+                    {intl.formatMessage(messages.customServerQuestion)}
+                  {' '}
+                  <Link
+                    to={`${window.ferdi.stores.settings.all.app.server.replace('v1', '')}/import`}
+                    target="_blank"
+                    style={{ cursor: 'pointer', textDecoration: 'underline' }}
+                  >
+                    {intl.formatMessage(messages.customServerSuggestion)}
+                  </Link>
+                </p>
+              )}
+            </>
           )}
           {isSubmitting ? (
             <Button
@@ -156,6 +179,7 @@ export default @observer class Login extends Component {
           )}
         </form>
         <div className="auth__links">
+          <Link to="/settings/app">Change server</Link>
           <Link to={signupRoute}>{intl.formatMessage(messages.signupLink)}</Link>
           <Link to={passwordRoute}>{intl.formatMessage(messages.passwordLink)}</Link>
         </div>
diff --git a/src/components/auth/Pricing.js b/src/components/auth/Pricing.js
index cbeaaa5d9..a77ad7742 100644
--- a/src/components/auth/Pricing.js
+++ b/src/components/auth/Pricing.js
@@ -42,7 +42,7 @@ const messages = defineMessages({
   },
   ctaSkip: {
     id: 'pricing.trial.cta.skip',
-    defaultMessage: '!!!Continue to Franz',
+    defaultMessage: '!!!Continue to Ferdi',
   },
   featuresHeadline: {
     id: 'pricing.trial.features.headline',
diff --git a/src/components/auth/Signup.js b/src/components/auth/Signup.js
index 0499d764b..b36e71ce1 100644
--- a/src/components/auth/Signup.js
+++ b/src/components/auth/Signup.js
@@ -40,7 +40,7 @@ const messages = defineMessages({
   },
   legalInfo: {
     id: 'signup.legal.info',
-    defaultMessage: '!!!By creating a Franz account you accept the',
+    defaultMessage: '!!!By creating a Ferdi account you accept the',
   },
   terms: {
     id: 'signup.legal.terms',
@@ -117,6 +117,8 @@ export default @observer class Signup extends Component {
     const { intl } = this.context;
     const { isSubmitting, loginRoute, error } = this.props;
 
+    const termsBase = window.ferdi.stores.settings.all.app.server !== 'https://api.franzinfra.com' ? window.ferdi.stores.settings.all.app.server : 'https://meetfranz.com';
+
     return (
       <div className="auth__scroll-container">
         <div className="auth__container auth__container--signup">
@@ -163,7 +165,7 @@ export default @observer class Signup extends Component {
               {intl.formatMessage(messages.legalInfo)}
               <br />
               <Link
-                to="https://meetfranz.com/terms"
+                to={`${termsBase}/terms`}
                 target="_blank"
                 className="link"
               >
@@ -171,7 +173,7 @@ export default @observer class Signup extends Component {
               </Link>
               &nbsp;&amp;&nbsp;
               <Link
-                to="https://meetfranz.com/privacy"
+                to={`${termsBase}/privacy`}
                 target="_blank"
                 className="link"
               >
@@ -181,6 +183,7 @@ export default @observer class Signup extends Component {
             </p>
           </form>
           <div className="auth__links">
+            <Link to="/settings/app">Change server</Link>
             <Link to={loginRoute}>{intl.formatMessage(messages.loginLink)}</Link>
           </div>
         </div>
diff --git a/src/components/auth/Welcome.js b/src/components/auth/Welcome.js
index f6d77f70f..ef917e336 100644
--- a/src/components/auth/Welcome.js
+++ b/src/components/auth/Welcome.js
@@ -41,7 +41,7 @@ export default @observer class Login extends Component {
           <img src="./assets/images/logo.svg" className="welcome__logo" alt="" />
           {/* <img src="./assets/images/welcome.png" className="welcome__services" alt="" /> */}
           <div className="welcome__text">
-            <h1>Franz</h1>
+            <h1>Ferdi</h1>
           </div>
         </div>
         <div className="welcome__buttons">
@@ -51,6 +51,19 @@ export default @observer class Login extends Component {
           <Link to={loginRoute} className="button">
             {intl.formatMessage(messages.loginButton)}
           </Link>
+          <br />
+          <br />
+
+          <Link to="settings/app">
+            <span style={{
+              textAlign: 'center',
+              width: '100%',
+              cursor: 'pointer',
+            }}
+            >
+              Change server
+            </span>
+          </Link>
         </div>
         <div className="welcome__featured-services">
           {recipes.map(recipe => (
diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js
index 200777ae6..2b0719f92 100644
--- a/src/components/layout/AppLayout.js
+++ b/src/components/layout/AppLayout.js
@@ -6,9 +6,9 @@ import { TitleBar } from 'electron-react-titlebar';
 import injectSheet from 'react-jss';
 
 import InfoBar from '../ui/InfoBar';
-import { Component as DelayApp } from '../../features/delayApp';
 import { Component as BasicAuth } from '../../features/basicAuth';
 import { Component as ShareFranz } from '../../features/shareFranz';
+import { Component as QuickSwitch } from '../../features/quickSwitch';
 import ErrorBoundary from '../util/ErrorBoundary';
 
 // import globalMessages from '../../i18n/globalMessages';
@@ -37,6 +37,10 @@ const messages = defineMessages({
     id: 'infobar.requiredRequestsFailed',
     defaultMessage: '!!!Could not load services and user information',
   },
+  authRequestFailed: {
+    id: 'infobar.authRequestFailed',
+    defaultMessage: '!!!There were errors while trying to perform an authenticated request. Please try logging out and back in if this error persists.',
+  },
 });
 
 const styles = theme => ({
@@ -63,6 +67,7 @@ class AppLayout extends Component {
     showServicesUpdatedInfoBar: PropTypes.bool.isRequired,
     appUpdateIsDownloaded: PropTypes.bool.isRequired,
     nextAppReleaseVersion: PropTypes.string,
+    authRequestFailed: PropTypes.bool.isRequired,
     removeNewsItem: PropTypes.func.isRequired,
     reloadServicesAfterUpdate: PropTypes.func.isRequired,
     installAppUpdate: PropTypes.func.isRequired,
@@ -70,7 +75,6 @@ class AppLayout extends Component {
     areRequiredRequestsSuccessful: PropTypes.bool.isRequired,
     retryRequiredRequests: PropTypes.func.isRequired,
     areRequiredRequestsLoading: PropTypes.bool.isRequired,
-    isDelayAppScreenVisible: PropTypes.bool.isRequired,
     hasActivatedTrial: PropTypes.bool.isRequired,
   };
 
@@ -95,6 +99,7 @@ class AppLayout extends Component {
       showServicesUpdatedInfoBar,
       appUpdateIsDownloaded,
       nextAppReleaseVersion,
+      authRequestFailed,
       removeNewsItem,
       reloadServicesAfterUpdate,
       installAppUpdate,
@@ -102,7 +107,6 @@ class AppLayout extends Component {
       areRequiredRequestsSuccessful,
       retryRequiredRequests,
       areRequiredRequestsLoading,
-      isDelayAppScreenVisible,
       hasActivatedTrial,
     } = this.props;
 
@@ -111,7 +115,7 @@ class AppLayout extends Component {
     return (
       <ErrorBoundary>
         <div className="app">
-          {isWindows && !isFullScreen && <TitleBar menu={window.franz.menu.template} icon="assets/images/logo.svg" />}
+          {isWindows && !isFullScreen && <TitleBar menu={window.ferdi.menu.template} icon="assets/images/logo.svg" />}
           <div className={`app__content ${classes.appContent}`}>
             {workspacesDrawer}
             {sidebar}
@@ -151,6 +155,18 @@ class AppLayout extends Component {
                 {intl.formatMessage(messages.requiredRequestsFailed)}
               </InfoBar>
               )}
+              {authRequestFailed && (
+                <InfoBar
+                  type="danger"
+                  ctaLabel="Try again"
+                  ctaLoading={areRequiredRequestsLoading}
+                  sticky
+                  onClick={retryRequiredRequests}
+                >
+                  <span className="mdi mdi-flash" />
+                  {intl.formatMessage(messages.authRequestFailed)}
+                </InfoBar>
+              )}
               {showServicesUpdatedInfoBar && (
                 <InfoBar
                   type="primary"
@@ -168,9 +184,9 @@ class AppLayout extends Component {
                   onInstallUpdate={installAppUpdate}
                 />
               )}
-              {isDelayAppScreenVisible && (<DelayApp />)}
               <BasicAuth />
               <ShareFranz />
+              <QuickSwitch />
               {services}
               {children}
             </div>
diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.js
index 918298011..d0cae3443 100644
--- a/src/components/layout/Sidebar.js
+++ b/src/components/layout/Sidebar.js
@@ -2,13 +2,13 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import ReactTooltip from 'react-tooltip';
 import { defineMessages, intlShape } from 'react-intl';
-import { observer } from 'mobx-react';
+import { inject, observer } from 'mobx-react';
+import { Link } from 'react-router';
 
 import Tabbar from '../services/tabs/Tabbar';
 import { ctrlKey } from '../../environment';
-import { GA_CATEGORY_WORKSPACES, workspaceStore } from '../../features/workspaces';
-import { gaEvent } from '../../lib/analytics';
-import { todosStore, GA_CATEGORY_TODOS } from '../../features/todos';
+import { workspaceStore } from '../../features/workspaces';
+import { todosStore } from '../../features/todos';
 import { todoActions } from '../../features/todos/actions';
 
 const messages = defineMessages({
@@ -44,9 +44,13 @@ const messages = defineMessages({
     id: 'sidebar.closeTodosDrawer',
     defaultMessage: '!!!Close Franz Todos',
   },
+  lockFerdi: {
+    id: 'sidebar.lockFerdi',
+    defaultMessage: '!!!Lock Ferdi',
+  },
 });
 
-export default @observer class Sidebar extends Component {
+export default @inject('stores', 'actions') @observer class Sidebar extends Component {
   static propTypes = {
     openSettings: PropTypes.func.isRequired,
     toggleMuteApp: PropTypes.func.isRequired,
@@ -87,6 +91,8 @@ export default @observer class Sidebar extends Component {
       isAppMuted,
       isWorkspaceDrawerOpen,
       toggleWorkspaceDrawer,
+      stores,
+      actions,
     } = this.props;
     const { intl } = this.context;
     const todosToggleMessage = (
@@ -96,6 +102,7 @@ export default @observer class Sidebar extends Component {
     const workspaceToggleMessage = (
       isWorkspaceDrawerOpen ? messages.closeWorkspaceDrawer : messages.openWorkspaceDrawer
     );
+    const isLoggedIn = Boolean(localStorage.getItem('authToken'));
 
     return (
       <div className="sidebar">
@@ -104,53 +111,89 @@ export default @observer class Sidebar extends Component {
           enableToolTip={() => this.enableToolTip()}
           disableToolTip={() => this.disableToolTip()}
         />
-        {todosStore.isFeatureEnabled && todosStore.isFeatureEnabledByUser ? (
-          <button
-            type="button"
-            onClick={() => {
-              todoActions.toggleTodosPanel();
-              this.updateToolTip();
-              gaEvent(GA_CATEGORY_TODOS, 'toggleDrawer', 'sidebar');
-            }}
-            className={`sidebar__button sidebar__button--todos  ${todosStore.isTodosPanelVisible ? 'is-active' : ''}`}
-            data-tip={`${intl.formatMessage(todosToggleMessage)} (${ctrlKey}+T)`}
-          >
-            <i className="mdi mdi-check-all" />
-          </button>
-        ) : null}
-        {workspaceStore.isFeatureEnabled ? (
-          <button
-            type="button"
-            onClick={() => {
-              toggleWorkspaceDrawer();
-              this.updateToolTip();
-              gaEvent(GA_CATEGORY_WORKSPACES, 'toggleDrawer', 'sidebar');
-            }}
-            className={`sidebar__button sidebar__button--workspaces ${isWorkspaceDrawerOpen ? 'is-active' : ''}`}
-            data-tip={`${intl.formatMessage(workspaceToggleMessage)} (${ctrlKey}+D)`}
+        { isLoggedIn ? (
+          <>
+            { stores.settings.all.app.lockingFeatureEnabled ? (
+              <button
+                type="button"
+                className={`sidebar__button sidebar__button--audio ${isAppMuted ? 'is-muted' : ''}`}
+                onClick={() => {
+                  // Disable lock first - otherwise the application might not update correctly
+                  actions.settings.update({
+                    type: 'app',
+                    data: {
+                      locked: false,
+                    },
+                  });
+                  setTimeout(() => {
+                    actions.settings.update({
+                      type: 'app',
+                      data: {
+                        locked: true,
+                      },
+                    });
+                  }, 0);
+                }}
+                data-tip={`${intl.formatMessage(messages.lockFerdi)} (${ctrlKey}+Shift+L)`}
+              >
+                <i className="mdi mdi-lock" />
+              </button>
+            ) : null}
+            {todosStore.isFeatureEnabled && todosStore.isFeatureEnabledByUser ? (
+              <button
+                type="button"
+                onClick={() => {
+                  todoActions.toggleTodosPanel();
+                  this.updateToolTip();
+                }}
+                className={`sidebar__button sidebar__button--todos  ${todosStore.isTodosPanelVisible ? 'is-active' : ''}`}
+                data-tip={`${intl.formatMessage(todosToggleMessage)} (${ctrlKey}+T)`}
+              >
+                <i className="mdi mdi-check-all" />
+              </button>
+            ) : null}
+            {workspaceStore.isFeatureEnabled ? (
+              <button
+                type="button"
+                onClick={() => {
+                  toggleWorkspaceDrawer();
+                  this.updateToolTip();
+                }}
+                className={`sidebar__button sidebar__button--workspaces ${isWorkspaceDrawerOpen ? 'is-active' : ''}`}
+                data-tip={`${intl.formatMessage(workspaceToggleMessage)} (${ctrlKey}+D)`}
+              >
+                <i className="mdi mdi-view-grid" />
+              </button>
+            ) : null}
+            <button
+              type="button"
+              onClick={() => {
+                toggleMuteApp();
+                this.updateToolTip();
+              }}
+              className={`sidebar__button sidebar__button--audio ${isAppMuted ? 'is-muted' : ''}`}
+              data-tip={`${intl.formatMessage(isAppMuted ? messages.unmute : messages.mute)} (${ctrlKey}+Shift+M)`}
+            >
+              <i className={`mdi mdi-bell${isAppMuted ? '-off' : ''}`} />
+            </button>
+            <button
+              type="button"
+              onClick={() => openSettings({ path: 'recipes' })}
+              className="sidebar__button sidebar__button--new-service"
+              data-tip={`${intl.formatMessage(messages.addNewService)} (${ctrlKey}+N)`}
+            >
+              <i className="mdi mdi-plus-box" />
+            </button>
+          </>
+        ) : (
+          <Link
+            to="/auth/welcome"
+            className="sidebar__button sidebar__button--new-service"
+            data-tip="Login"
           >
-            <i className="mdi mdi-view-grid" />
-          </button>
-        ) : null}
-        <button
-          type="button"
-          onClick={() => {
-            toggleMuteApp();
-            this.updateToolTip();
-          }}
-          className={`sidebar__button sidebar__button--audio ${isAppMuted ? 'is-muted' : ''}`}
-          data-tip={`${intl.formatMessage(isAppMuted ? messages.unmute : messages.mute)} (${ctrlKey}+Shift+M)`}
-        >
-          <i className={`mdi mdi-bell${isAppMuted ? '-off' : ''}`} />
-        </button>
-        <button
-          type="button"
-          onClick={() => openSettings({ path: 'recipes' })}
-          className="sidebar__button sidebar__button--new-service"
-          data-tip={`${intl.formatMessage(messages.addNewService)} (${ctrlKey}+N)`}
-        >
-          <i className="mdi mdi-plus-box" />
-        </button>
+            <i className="mdi mdi-login-variant" />
+          </Link>
+        )}
         <button
           type="button"
           onClick={() => openSettings({ path: 'app' })}
diff --git a/src/components/services/content/ServiceView.js b/src/components/services/content/ServiceView.js
index 3b09518c5..273653ea2 100644
--- a/src/components/services/content/ServiceView.js
+++ b/src/components/services/content/ServiceView.js
@@ -1,7 +1,7 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { autorun } from 'mobx';
-import { observer } from 'mobx-react';
+import { autorun, reaction } from 'mobx';
+import { observer, inject } from 'mobx-react';
 import classnames from 'classnames';
 
 import ServiceModel from '../../../models/Service';
@@ -10,12 +10,12 @@ 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';
+import SettingsStore from '../../../stores/SettingsStore';
 import WebControlsScreen from '../../../features/webControls/containers/WebControlsScreen';
 import { CUSTOM_WEBSITE_ID } from '../../../features/webControls/constants';
 
-export default @observer class ServiceView extends Component {
+export default @observer @inject('stores') class ServiceView extends Component {
   static propTypes = {
     service: PropTypes.instanceOf(ServiceModel).isRequired,
     setWebviewReference: PropTypes.func.isRequired,
@@ -24,7 +24,9 @@ export default @observer class ServiceView extends Component {
     edit: PropTypes.func.isRequired,
     enable: PropTypes.func.isRequired,
     isActive: PropTypes.bool,
-    upgrade: PropTypes.func.isRequired,
+    stores: PropTypes.shape({
+      settings: PropTypes.instanceOf(SettingsStore).isRequired,
+    }).isRequired,
   };
 
   static defaultProps = {
@@ -35,12 +37,20 @@ export default @observer class ServiceView extends Component {
     forceRepaint: false,
     targetUrl: '',
     statusBarVisible: false,
+    hibernate: false,
+    hibernationTimer: null,
   };
 
   autorunDisposer = null;
 
   forceRepaintTimeout = null;
 
+  constructor(props) {
+    super(props);
+
+    this.startHibernationTimer = this.startHibernationTimer.bind(this);
+  }
+
   componentDidMount() {
     this.autorunDisposer = autorun(() => {
       if (this.props.service.isActive) {
@@ -50,6 +60,31 @@ export default @observer class ServiceView extends Component {
         }, 100);
       }
     });
+
+    reaction(
+      () => this.props.service.isActive,
+      () => {
+        if (!this.props.service.isActive && this.props.stores.settings.all.app.hibernate) {
+          // Service is inactive - start hibernation countdown
+          this.startHibernationTimer();
+        } else {
+          if (this.state.hibernationTimer) {
+            // Service is active but we have an active hibernation timer: Clear timeout
+            clearTimeout(this.state.hibernationTimer);
+          }
+
+          // Service is active, wake up service from hibernation
+          this.setState({
+            hibernate: false,
+          });
+        }
+      },
+    );
+
+    // Start hibernation counter if we are in background
+    if (!this.props.service.isActive && this.props.stores.settings.all.app.hibernate) {
+      this.startHibernationTimer();
+    }
   }
 
   componentWillUnmount() {
@@ -68,6 +103,20 @@ export default @observer class ServiceView extends Component {
     });
   };
 
+  startHibernationTimer() {
+    const timerDuration = (Number(this.props.stores.settings.all.app.hibernationStrategy) || 300) * 1000;
+
+    const hibernationTimer = setTimeout(() => {
+      this.setState({
+        hibernate: true,
+      });
+    }, timerDuration);
+
+    this.setState({
+      hibernationTimer,
+    });
+  }
+
   render() {
     const {
       detachService,
@@ -76,7 +125,6 @@ export default @observer class ServiceView extends Component {
       reload,
       edit,
       enable,
-      upgrade,
     } = this.props;
 
     const webviewClasses = classnames({
@@ -132,13 +180,10 @@ export default @observer class ServiceView extends Component {
           </Fragment>
         ) : (
           <>
-            {service.isServiceAccessRestricted ? (
-              <ServiceRestricted
-                name={service.recipe.name}
-                upgrade={upgrade}
-                type={service.restrictionType}
-              />
-            ) : (
+            {service.recipe.id === 'franz-custom-website' && (
+              <WebControlsScreen service={service} />
+            )}
+            {!this.state.hibernate ? (
               <>
                 {service.recipe.id === CUSTOM_WEBSITE_ID && (
                   <WebControlsScreen service={service} />
@@ -149,6 +194,12 @@ export default @observer class ServiceView extends Component {
                   detachService={detachService}
                 />
               </>
+            ) : (
+              <div>
+                <span role="img" aria-label="Sleeping Emoji">😴</span>
+                {' '}
+                This service is currently hibernating. If this page doesn&#x27;t close soon, please try reloading Ferdi.
+              </div>
             )}
           </>
         )}
diff --git a/src/components/services/content/ServiceWebview.js b/src/components/services/content/ServiceWebview.js
index 4bab4a964..e6ebb6afb 100644
--- a/src/components/services/content/ServiceWebview.js
+++ b/src/components/services/content/ServiceWebview.js
@@ -1,10 +1,13 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
+import { observable, reaction } from 'mobx';
 import ElectronWebView from 'react-electron-web-view';
 
 import ServiceModel from '../../../models/Service';
 
+const debug = require('debug')('Ferdi:Services');
+
 @observer
 class ServiceWebview extends Component {
   static propTypes = {
@@ -13,7 +16,22 @@ class ServiceWebview extends Component {
     detachService: PropTypes.func.isRequired,
   };
 
-  webview = null;
+  @observable webview = null;
+
+  constructor(props) {
+    super(props);
+
+    reaction(
+      () => this.webview,
+      () => {
+        if (this.webview && this.webview.view) {
+          this.webview.view.addEventListener('console-message', (e) => {
+            debug('Service logged a message:', e.message);
+          });
+        }
+      },
+    );
+  }
 
   componentWillUnmount() {
     const { service, detachService } = this.props;
diff --git a/src/components/services/content/Services.js b/src/components/services/content/Services.js
index b6291666b..edff29ae8 100644
--- a/src/components/services/content/Services.js
+++ b/src/components/services/content/Services.js
@@ -13,12 +13,20 @@ import Appear from '../../ui/effects/Appear';
 const messages = defineMessages({
   welcome: {
     id: 'services.welcome',
-    defaultMessage: '!!!Welcome to Franz',
+    defaultMessage: '!!!Welcome to Ferdi',
   },
   getStarted: {
     id: 'services.getStarted',
     defaultMessage: '!!!Get started',
   },
+  login: {
+    id: 'services.login',
+    defaultMessage: '!!!Please login to use Ferdi.',
+  },
+  serverInfo: {
+    id: 'services.serverInfo',
+    defaultMessage: '!!!Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner.',
+  },
 });
 
 
@@ -94,6 +102,7 @@ export default @observer @injectSheet(styles) class Services extends Component {
     } = this.state;
 
     const { intl } = this.context;
+    const isLoggedIn = Boolean(localStorage.getItem('authToken'));
 
     return (
       <div className="services">
@@ -112,14 +121,20 @@ export default @observer @injectSheet(styles) class Services extends Component {
             transitionName="slideUp"
           >
             <div className="services__no-service">
-              <img src="./assets/images/logo.svg" alt="" />
+              <img src="./assets/images/logo.svg" alt="Logo" style={{ maxHeight: '50vh' }} />
               <h1>{intl.formatMessage(messages.welcome)}</h1>
+              { !isLoggedIn && (
+                <>
+                  <p>{intl.formatMessage(messages.login)}</p>
+                  <p>{intl.formatMessage(messages.serverInfo)}</p>
+                </>
+              ) }
               <Appear
                 timeout={300}
                 transitionName="slideUp"
               >
-                <Link to="/settings/recipes" className="button">
-                  {intl.formatMessage(messages.getStarted)}
+                <Link to={isLoggedIn ? '/settings/services' : '/auth/welcome'} className="button">
+                  { isLoggedIn ? intl.formatMessage(messages.getStarted) : 'Login' }
                 </Link>
               </Appear>
             </div>
diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js
index ac2594604..f588449f4 100644
--- a/src/components/settings/account/AccountDashboard.js
+++ b/src/components/settings/account/AccountDashboard.js
@@ -69,7 +69,7 @@ const messages = defineMessages({
   },
   deleteInfo: {
     id: 'settings.account.deleteInfo',
-    defaultMessage: '!!!If you don\'t need your Franz account any longer, you can delete your account and all related data here.',
+    defaultMessage: '!!!If you don\'t need your Ferdi account any longer, you can delete your account and all related data here.',
   },
   deleteEmailSent: {
     id: 'settings.account.deleteEmailSent',
diff --git a/src/components/settings/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.js
index 4696b82eb..2711bc107 100644
--- a/src/components/settings/navigation/SettingsNavigation.js
+++ b/src/components/settings/navigation/SettingsNavigation.js
@@ -35,9 +35,9 @@ const messages = defineMessages({
     id: 'settings.navigation.settings',
     defaultMessage: '!!!Settings',
   },
-  inviteFriends: {
-    id: 'settings.navigation.inviteFriends',
-    defaultMessage: '!!!Invite Friends',
+  supportFerdi: {
+    id: 'settings.navigation.supportFerdi',
+    defaultMessage: '!!!Support Ferdi',
   },
   logout: {
     id: 'settings.navigation.logout',
@@ -64,6 +64,7 @@ export default @inject('stores') @observer class SettingsNavigation extends Comp
     const { isDarkThemeActive } = stores.ui;
     const { router, user } = stores;
     const { intl } = this.context;
+    const isLoggedIn = Boolean(localStorage.getItem('authToken'));
 
     return (
       <div className="settings-navigation">
@@ -128,18 +129,18 @@ export default @inject('stores') @observer class SettingsNavigation extends Comp
           {intl.formatMessage(messages.settings)}
         </Link>
         <Link
-          to="/settings/invite"
+          to="/settings/support"
           className="settings-navigation__link"
           activeClassName="is-active"
         >
-          {intl.formatMessage(messages.inviteFriends)}
+          {intl.formatMessage(messages.supportFerdi)}
         </Link>
         <span className="settings-navigation__expander" />
         <Link
-          to="/auth/logout"
+          to={isLoggedIn ? '/auth/logout' : '/auth/welcome'}
           className="settings-navigation__link"
         >
-          {intl.formatMessage(messages.logout)}
+          { isLoggedIn ? intl.formatMessage(messages.logout) : 'Login'}
         </Link>
       </div>
     );
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index 5cde0db8e..5fe00cb8b 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -63,7 +63,7 @@ const messages = defineMessages({
   },
   customUrlPremiumInfo: {
     id: 'settings.service.form.customUrlPremiumInfo',
-    defaultMessage: '!!!To add self hosted services, you need a Franz Premium Supporter Account.',
+    defaultMessage: '!!!To add self hosted services, you need a Ferdi Premium Supporter Account.',
   },
   customUrlUpgradeAccount: {
     id: 'settings.service.form.customUrlUpgradeAccount',
@@ -103,11 +103,11 @@ const messages = defineMessages({
   },
   proxyRestartInfo: {
     id: 'settings.service.form.proxy.restartInfo',
-    defaultMessage: '!!!Please restart Franz after changing proxy Settings.',
+    defaultMessage: '!!!Please restart Ferdi after changing proxy Settings.',
   },
   proxyInfo: {
     id: 'settings.service.form.proxy.info',
-    defaultMessage: '!!!Proxy settings will not be synchronized with the Franz servers.',
+    defaultMessage: '!!!Proxy settings will not be synchronized with the Ferdi servers.',
   },
 });
 
@@ -155,7 +155,7 @@ export default @observer class EditServiceForm extends Component {
         const values = form.values();
         let isValid = true;
 
-        const files = form.$('customIcon').files;
+        const { files } = form.$('customIcon');
         if (files) {
           values.iconFile = files[0];
         }
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index 0b69f7514..1030f3164 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -9,9 +9,19 @@ import Button from '../../ui/Button';
 import Toggle from '../../ui/Toggle';
 import Select from '../../ui/Select';
 import PremiumFeatureContainer from '../../ui/PremiumFeatureContainer';
+import Input from '../../ui/Input';
 
 import { FRANZ_TRANSLATION } from '../../../config';
 
+function escapeHtml(unsafe) {
+  return unsafe
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;');
+}
+
 const messages = defineMessages({
   headline: {
     id: 'settings.app.headline',
@@ -21,6 +31,42 @@ const messages = defineMessages({
     id: 'settings.app.headlineGeneral',
     defaultMessage: '!!!General',
   },
+  hibernateInfo: {
+    id: 'settings.app.hibernateInfo',
+    defaultMessage: '!!!By default, Ferdi will keep all your services open and loaded in the background so they are ready when you want to use them. Service Hibernation will unload your services after a specified amount. This is useful to save RAM or keeping services from slowing down your computer.',
+  },
+  serverInfo: {
+    id: 'settings.app.serverInfo',
+    defaultMessage: '!!!We advice you to logout after changing your server as your settings might not be saved otherwise.',
+  },
+  serverMoneyInfo: {
+    id: 'settings.app.serverMoneyInfo',
+    defaultMessage: '!!!You are using the official Franz Server for Ferdi.\nWe know that Ferdi allows you to use all its features for free but you are still using Franz\'s server resources - which Franz\'s creator has to pay for.\nPlease still consider [Link 1]paying for a Franz account[/Link] or [Link 2]using a self-hosted ferdi-server[/Link] (if you have the knowledge and resources to do so). \nBy using Ferdi, you still profit greatly from Franz\'s recipe store, server resources and its development.',
+  },
+  todoServerInfo: {
+    id: 'settings.app.todoServerInfo',
+    defaultMessage: '!!!This server will be used for the "Franz Todo" feature. (default: https://app.franztodos.com)',
+  },
+  lockedPassword: {
+    id: 'settings.app.lockedPassword',
+    defaultMessage: '!!!Ferdi Lock Password',
+  },
+  lockedPasswordInfo: {
+    id: 'settings.app.lockedPasswordInfo',
+    defaultMessage: '!!!Please make sure to set a password you\'ll remember.\nIf you loose this password, you will have to reinstall Ferdi.',
+  },
+  lockInfo: {
+    id: 'settings.app.lockInfo',
+    defaultMessage: '!!!Ferdi password lock allows you to keep your messages protected.\nUsing Ferdi password lock, you will be prompted to enter your password everytime you start Ferdi or lock Ferdi yourself using the lock symbol in the bottom left corner or the shortcut CMD/CTRL+Shift+L.',
+  },
+  scheduledDNDTimeInfo: {
+    id: 'settings.app.scheduledDNDTimeInfo',
+    defaultMessage: '!!!Times in 24-Hour-Format. End time can be before start time (e.g. start 17:00, end 09:00) to enable Do-not-Disturb overnight.',
+  },
+  scheduledDNDInfo: {
+    id: 'settings.app.scheduledDNDInfo',
+    defaultMessage: '!!!Scheduled Do-not-Disturb allows you to define a period of time in which you do not want to get Notifications from Ferdi.',
+  },
   headlineLanguage: {
     id: 'settings.app.headlineLanguage',
     defaultMessage: '!!!Language',
@@ -39,7 +85,7 @@ const messages = defineMessages({
   },
   translationHelp: {
     id: 'settings.app.translationHelp',
-    defaultMessage: '!!!Help us to translate Franz into your language.',
+    defaultMessage: '!!!Help us to translate Ferdi into your language.',
   },
   subheadlineCache: {
     id: 'settings.app.subheadlineCache',
@@ -47,7 +93,7 @@ const messages = defineMessages({
   },
   cacheInfo: {
     id: 'settings.app.cacheInfo',
-    defaultMessage: '!!!Franz cache is currently using {size} of disk space.',
+    defaultMessage: '!!!Ferdi cache is currently using {size} of disk space.',
   },
   buttonClearAllCache: {
     id: 'settings.app.buttonClearAllCache',
@@ -71,7 +117,7 @@ const messages = defineMessages({
   },
   updateStatusUpToDate: {
     id: 'settings.app.updateStatusUpToDate',
-    defaultMessage: '!!!You are using the latest version of Franz',
+    defaultMessage: '!!!You are using the latest version of Ferdi',
   },
   currentVersion: {
     id: 'settings.app.currentVersion',
@@ -103,6 +149,10 @@ export default @observer class EditSettingsForm extends Component {
     isSpellcheckerIncludedInCurrentPlan: PropTypes.bool.isRequired,
     isTodosEnabled: PropTypes.bool.isRequired,
     isWorkspaceEnabled: PropTypes.bool.isRequired,
+    server: PropTypes.string.isRequired,
+    noUpdates: PropTypes.bool.isRequired,
+    hibernationEnabled: PropTypes.bool.isRequired,
+    openProcessManager: PropTypes.func.isRequired,
   };
 
   static contextTypes = {
@@ -135,6 +185,10 @@ export default @observer class EditSettingsForm extends Component {
       isSpellcheckerIncludedInCurrentPlan,
       isTodosEnabled,
       isWorkspaceEnabled,
+      server,
+      noUpdates,
+      hibernationEnabled,
+      openProcessManager,
     } = this.props;
     const { intl } = this.context;
 
@@ -147,6 +201,13 @@ export default @observer class EditSettingsForm extends Component {
       updateButtonLabelMessage = messages.buttonSearchForUpdate;
     }
 
+    const isLoggedIn = Boolean(localStorage.getItem('authToken'));
+
+    const {
+      lockingFeatureEnabled,
+      scheduledDNDEnabled,
+    } = window.ferdi.stores.settings.all.app;
+
     return (
       <div className="settings__main">
         <div className="settings__header">
@@ -163,15 +224,148 @@ export default @observer class EditSettingsForm extends Component {
             <Toggle field={form.$('autoLaunchOnStart')} />
             <Toggle field={form.$('runInBackground')} />
             <Toggle field={form.$('enableSystemTray')} />
+            <Toggle field={form.$('privateNotifications')} />
+            <Toggle field={form.$('hibernate')} />
+            {hibernationEnabled && (
+              <Select field={form.$('hibernationStrategy')} />
+            )}
+            <p
+              className="settings__message"
+              style={{
+                borderTop: 0, marginTop: 0, paddingTop: 0, marginBottom: '2rem',
+              }}
+            >
+              <span>
+                { intl.formatMessage(messages.hibernateInfo) }
+              </span>
+            </p>
             {process.platform === 'win32' && (
               <Toggle field={form.$('minimizeToSystemTray')} />
             )}
+            <Input
+              placeholder="Server"
+              onChange={e => this.submit(e)}
+              field={form.$('server')}
+              autoFocus
+            />
+            {isLoggedIn && (
+              <p>{ intl.formatMessage(messages.serverInfo) }</p>
+            )}
+            {server === 'https://api.franzinfra.com' && (
+              <p
+                className="settings__message"
+                style={{
+                  borderTop: 0, marginTop: 0, paddingTop: 0, marginBottom: '2rem',
+                }}
+              >
+                <span
+                  dangerouslySetInnerHTML={{
+                    __html:
+                  // Needed to make links work
+                  escapeHtml(
+                    intl.formatMessage(messages.serverMoneyInfo),
+                  ).replace('[Link 1]', '<a href="https://www.meetfranz.com/pricing" target="_blank">')
+                    .replace('[Link 2]', '<a href="https://github.com/getferdi/server" target="_blank">')
+                    .replace(/\[\/Link]/g, '</a>'),
+                  }}
+                  style={{
+                    whiteSpace: 'pre-wrap',
+                  }}
+                />
+              </p>
+            )}
             {isWorkspaceEnabled && (
               <Toggle field={form.$('keepAllWorkspacesLoaded')} />
             )}
             {isTodosEnabled && (
-              <Toggle field={form.$('enableTodos')} />
+              <>
+                <Toggle field={form.$('enableTodos')} />
+                <Input
+                  placeholder="Todo Server"
+                  onChange={e => this.submit(e)}
+                  field={form.$('todoServer')}
+                />
+                <p>{ intl.formatMessage(messages.todoServerInfo) }</p>
+              </>
+            )}
+
+            <Toggle field={form.$('lockingFeatureEnabled')} />
+            {lockingFeatureEnabled && (
+              <>
+                <Input
+                  placeholder={intl.formatMessage(messages.lockedPassword)}
+                  onChange={e => this.submit(e)}
+                  field={form.$('lockedPassword')}
+                  type="password"
+                  scorePassword
+                  showPasswordToggle
+                />
+                <p>
+                  { intl.formatMessage(messages.lockedPasswordInfo) }
+                </p>
+              </>
             )}
+            <p
+              className="settings__message"
+              style={{
+                borderTop: 0, marginTop: 0, paddingTop: 0, marginBottom: '2rem',
+              }}
+            >
+              <span>
+                { intl.formatMessage(messages.lockInfo) }
+              </span>
+            </p>
+
+
+            <Toggle field={form.$('scheduledDNDEnabled')} />
+            {scheduledDNDEnabled && (
+              <>
+                <div style={{
+                  display: 'flex',
+                  justifyContent: 'center',
+                }}
+                >
+                  <div style={{
+                    padding: '0 1rem',
+                    width: '100%',
+                  }}
+                  >
+                    <Input
+                      placeholder="17:00"
+                      onChange={e => this.submit(e)}
+                      field={form.$('scheduledDNDStart')}
+                      type="time"
+                    />
+                  </div>
+                  <div style={{
+                    padding: '0 1rem',
+                    width: '100%',
+                  }}
+                  >
+                    <Input
+                      placeholder="09:00"
+                      onChange={e => this.submit(e)}
+                      field={form.$('scheduledDNDEnd')}
+                      type="time"
+                    />
+                  </div>
+                </div>
+                <p>
+                  { intl.formatMessage(messages.scheduledDNDTimeInfo) }
+                </p>
+              </>
+            )}
+            <p
+              className="settings__message"
+              style={{
+                borderTop: 0, marginTop: 0, paddingTop: 0, marginBottom: '2rem',
+              }}
+            >
+              <span>
+                { intl.formatMessage(messages.scheduledDNDInfo) }
+              </span>
+            </p>
+
 
             {/* Appearance */}
             <h2 id="apperance">{intl.formatMessage(messages.headlineAppearance)}</h2>
@@ -227,6 +421,16 @@ export default @observer class EditSettingsForm extends Component {
                   loaded={!isClearingAllCache}
                 />
               </p>
+              <div style={{
+                marginTop: 20,
+              }}
+              >
+                <Button
+                  buttonType="secondary"
+                  label="Open Process Manager"
+                  onClick={openProcessManager}
+                />
+              </div>
             </div>
 
             {/* Updates */}
@@ -241,7 +445,7 @@ export default @observer class EditSettingsForm extends Component {
                 buttonType="secondary"
                 label={intl.formatMessage(updateButtonLabelMessage)}
                 onClick={checkForUpdates}
-                disabled={isCheckingForUpdates || isUpdateAvailable}
+                disabled={noUpdates || isCheckingForUpdates || isUpdateAvailable}
                 loaded={!isCheckingForUpdates || !isUpdateAvailable}
               />
             )}
@@ -250,6 +454,7 @@ export default @observer class EditSettingsForm extends Component {
             )}
             <br />
             <Toggle field={form.$('beta')} />
+            <Toggle field={form.$('noUpdates')} />
             {intl.formatMessage(messages.currentVersion)}
             {' '}
             {remote.app.getVersion()}
@@ -257,6 +462,18 @@ export default @observer class EditSettingsForm extends Component {
               <span className="mdi mdi-information" />
               {intl.formatMessage(messages.languageDisclaimer)}
             </p>
+            <p className="settings__message">
+              <span className="mdi mdi-github-face" />
+              <span>
+                Ferdi is based on
+                {' '}
+                <a href="https://github.com/meetfranz/franz" target="_blank">Franz</a>
+                , a project published
+                under the
+                {' '}
+                <a href="https://github.com/meetfranz/franz/blob/master/LICENSE" target="_blank">Apache-2.0 License</a>
+              </span>
+            </p>
           </form>
         </div>
       </div>
diff --git a/src/components/settings/supportFerdi/SupportFerdiDashboard.js b/src/components/settings/supportFerdi/SupportFerdiDashboard.js
new file mode 100644
index 000000000..57920a4a2
--- /dev/null
+++ b/src/components/settings/supportFerdi/SupportFerdiDashboard.js
@@ -0,0 +1,73 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { defineMessages, intlShape } from 'react-intl';
+
+import Button from '../../ui/Button';
+
+const messages = defineMessages({
+  headline: {
+    id: 'settings.supportFerdi.headline',
+    defaultMessage: '!!!Support Ferdi',
+  },
+  title: {
+    id: 'settings.supportFerdi.title',
+    defaultMessage: '!!!Do you like Ferdi? Spread the love!',
+  },
+  github: {
+    id: 'settings.supportFerdi.github',
+    defaultMessage: '!!!Star on GitHub',
+  },
+  share: {
+    id: 'settings.supportFerdi.share',
+    defaultMessage: '!!!Tell your Friends',
+  },
+  openCollective: {
+    id: 'settings.supportFerdi.openCollective',
+    defaultMessage: '!!!Support our Open Collective',
+  },
+});
+
+class SupportFerdiDashboard extends Component {
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  static propTypes = {
+    openLink: PropTypes.func.isRequired,
+  };
+
+  render() {
+    const { openLink } = this.props;
+    const { intl } = this.context;
+
+    return (
+      <div className="settings__main">
+        <div className="settings__header">
+          <span className="settings__header-item">
+            {intl.formatMessage(messages.headline)}
+          </span>
+        </div>
+        <div className="settings__body">
+          <h1>{intl.formatMessage(messages.title)}</h1>
+          <Button
+            label={intl.formatMessage(messages.github)}
+            className="franz-form__button--inverted franz-form__button--large"
+            onClick={() => openLink('https://github.com/getferdi/ferdi')}
+          />
+          <Button
+            label={intl.formatMessage(messages.share)}
+            className="franz-form__button--inverted franz-form__button--large"
+            onClick={() => openLink('https://twitter.com/intent/tweet?text=Ferdi%3A%20A%20messaging%20browser%20that%20allows%20you%20to%20combine%20your%20favourite%20messaging%20services%20into%20one%20application.%0A%0ACheck%20out%20Ferdi%20at%20https%3A//getferdi.com')}
+          />
+          <Button
+            label={intl.formatMessage(messages.openCollective)}
+            className="franz-form__button--inverted franz-form__button--large"
+            onClick={() => openLink('https://opencollective.com/getferdi')}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default SupportFerdiDashboard;
diff --git a/src/components/settings/team/TeamDashboard.js b/src/components/settings/team/TeamDashboard.js
index 366b0113a..2bf46b48d 100644
--- a/src/components/settings/team/TeamDashboard.js
+++ b/src/components/settings/team/TeamDashboard.js
@@ -20,7 +20,7 @@ const messages = defineMessages({
   },
   contentHeadline: {
     id: 'settings.team.contentHeadline',
-    defaultMessage: '!!!Franz for Teams',
+    defaultMessage: '!!!Ferdi for Teams',
   },
   intro: {
     id: 'settings.team.intro',
@@ -28,7 +28,7 @@ const messages = defineMessages({
   },
   copy: {
     id: 'settings.team.copy',
-    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!',
+    defaultMessage: '!!!Ferdi for Teams gives you the option to invite co-workers to your team by sending them email invitations and manage their subscriptions in your account’s preferences. Don’t waste time setting up subscriptions for every team member individually, forget about multiple invoices and different billing cycles - one team to rule them all!',
   },
   manageButton: {
     id: 'settings.team.manageAction',
diff --git a/src/components/ui/ActivateTrialButton/index.js b/src/components/ui/ActivateTrialButton/index.js
index e0637da90..340123c2f 100644
--- a/src/components/ui/ActivateTrialButton/index.js
+++ b/src/components/ui/ActivateTrialButton/index.js
@@ -5,7 +5,6 @@ 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';
 
@@ -63,25 +62,9 @@ class ActivateTrialButton extends Component {
   };
 
   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 {
-      label = 'Upgrade Account';
-    }
+    const { actions } = this.props;
 
     actions.ui.openSettings({ path: 'user' });
-
-    if (gaEventInfo) {
-      const { category, event } = gaEventInfo;
-      gaEvent(category, event, label);
-    }
   }
 
   render() {
diff --git a/src/components/ui/AppLoader/index.js b/src/components/ui/AppLoader/index.js
index b0c7fed7b..1fd247d17 100644
--- a/src/components/ui/AppLoader/index.js
+++ b/src/components/ui/AppLoader/index.js
@@ -9,14 +9,13 @@ import { shuffleArray } from '../../../helpers/array-helpers';
 import styles from './styles';
 
 const textList = shuffleArray([
-  'Looking for Sisi',
-  'Contacting the herald',
-  'Saddling the unicorn',
-  'Learning the Waltz',
-  'Visiting Horst & Grete',
-  'Twisting my moustache',
-  'Playing the trumpet',
-  'Traveling through space & time',
+  'Adding free features',
+  'Making application usable',
+  'Removing unproductive paywalls',
+  'Creating custom server software',
+  'Increasing productivity',
+  'Listening to our userbase',
+  'Fixing bugs',
 ]);
 
 export default @injectSheet(styles) @withTheme class AppLoader extends Component {
@@ -49,7 +48,7 @@ export default @injectSheet(styles) @withTheme class AppLoader extends Component
 
     return (
       <FullscreenLoader
-        title="Franz"
+        title="Ferdi"
         className={classes.component}
         spinnerColor={theme.colorAppLoaderSpinner}
       >
diff --git a/src/components/ui/Button.js b/src/components/ui/Button.js
index ffc7f7051..e2d7cea83 100644
--- a/src/components/ui/Button.js
+++ b/src/components/ui/Button.js
@@ -69,7 +69,7 @@ export default @observer class Button extends Component {
           loaded={loaded}
           lines={10}
           scale={0.4}
-          color={buttonType !== 'secondary' ? '#FFF' : '#373a3c'}
+          color={buttonType !== 'secondary' ? '#FFF' : '#7367F0'}
           component="span"
         />
         {label}
diff --git a/src/components/ui/FullscreenLoader/styles.js b/src/components/ui/FullscreenLoader/styles.js
index 64d24e4ce..d516781a8 100644
--- a/src/components/ui/FullscreenLoader/styles.js
+++ b/src/components/ui/FullscreenLoader/styles.js
@@ -4,6 +4,7 @@ export default {
     alignItems: 'center',
     position: 'absolute',
     width: '100%',
+    background: 'linear-gradient( 135deg, #CE9FFC 10%, #7367F0 100%)',
   },
   component: {
     width: '100%',
diff --git a/src/components/ui/Input.js b/src/components/ui/Input.js
index 9b070c4df..4e3eb4ab8 100644
--- a/src/components/ui/Input.js
+++ b/src/components/ui/Input.js
@@ -68,7 +68,7 @@ export default @observer class Input extends Component {
 
     const { passwordScore } = this.state;
 
-    let type = field.type;
+    let { type } = field;
     if (type === 'password' && this.state.showPassword) {
       type = 'text';
     }
diff --git a/src/components/ui/Link.js b/src/components/ui/Link.js
index b88686d5e..5f729844b 100644
--- a/src/components/ui/Link.js
+++ b/src/components/ui/Link.js
@@ -25,6 +25,7 @@ export default @inject('stores') @observer class Link extends Component {
       className,
       activeClassName,
       strictFilter,
+      style,
     } = this.props;
     const { router } = stores;
 
@@ -44,6 +45,7 @@ export default @inject('stores') @observer class Link extends Component {
       <a
         href={router.history.createHref(to)}
         className={linkClasses}
+        style={style}
         onClick={e => this.onClick(e)}
       >
         {children}
@@ -65,6 +67,7 @@ Link.wrappedComponent.propTypes = {
   activeClassName: PropTypes.string,
   strictFilter: PropTypes.bool,
   target: PropTypes.string,
+  style: PropTypes.object,
 };
 
 Link.wrappedComponent.defaultProps = {
@@ -72,4 +75,5 @@ Link.wrappedComponent.defaultProps = {
   activeClassName: '',
   strictFilter: false,
   target: '',
+  style: {},
 };
diff --git a/src/components/ui/Loader.js b/src/components/ui/Loader.js
index f73296bb6..de8769b6c 100644
--- a/src/components/ui/Loader.js
+++ b/src/components/ui/Loader.js
@@ -16,7 +16,7 @@ export default class LoaderComponent extends Component {
     children: null,
     loaded: false,
     className: '',
-    color: '#373a3c',
+    color: '#7367F0',
   };
 
   render() {
diff --git a/src/components/ui/Modal/index.js b/src/components/ui/Modal/index.js
index 63d858c47..0af521452 100644
--- a/src/components/ui/Modal/index.js
+++ b/src/components/ui/Modal/index.js
@@ -41,6 +41,8 @@ export default @injectCSS(styles) class Modal extends Component {
       showClose,
     } = this.props;
 
+    const appRoot = document.getElementById('root');
+
     return (
       <ReactModal
         isOpen={isOpen}
@@ -53,6 +55,7 @@ export default @injectCSS(styles) class Modal extends Component {
         portal={portal}
         onRequestClose={close}
         shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}
+        appElement={appRoot}
       >
         {showClose && close && (
           <button
diff --git a/src/components/ui/PremiumFeatureContainer/index.js b/src/components/ui/PremiumFeatureContainer/index.js
index 8d2746e22..7ba353be3 100644
--- a/src/components/ui/PremiumFeatureContainer/index.js
+++ b/src/components/ui/PremiumFeatureContainer/index.js
@@ -9,8 +9,7 @@ import { oneOrManyChildElements } from '../../../prop-types';
 import UserStore from '../../../stores/UserStore';
 
 import styles from './styles';
-import { gaEvent } from '../../../lib/analytics';
-import { FeatureStore } from '../../../features/utils/FeatureStore';
+import FeatureStore from '../../../stores/FeaturesStore';
 
 const messages = defineMessages({
   action: {
@@ -50,7 +49,6 @@ class PremiumFeatureContainer extends Component {
       actions,
       condition,
       stores,
-      gaEventInfo,
     } = this.props;
 
     const { intl } = this.context;
@@ -75,10 +73,6 @@ class PremiumFeatureContainer extends Component {
             type="button"
             onClick={() => {
               actions.ui.openSettings({ path: 'user' });
-              if (gaEventInfo) {
-                const { category, event, label } = gaEventInfo;
-                gaEvent(category, event, label);
-              }
             }}
           >
             {intl.formatMessage(messages.action)}
diff --git a/src/components/ui/UpgradeButton/index.js b/src/components/ui/UpgradeButton/index.js
index 73762f0bf..1b764bd90 100644
--- a/src/components/ui/UpgradeButton/index.js
+++ b/src/components/ui/UpgradeButton/index.js
@@ -4,7 +4,6 @@ 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';
@@ -41,13 +40,9 @@ class UpgradeButton extends Component {
   };
 
   handleCTAClick() {
-    const { actions, gaEventInfo } = this.props;
+    const { actions } = this.props;
 
     actions.ui.openSettings({ path: 'user' });
-    if (gaEventInfo) {
-      const { category, event } = gaEventInfo;
-      gaEvent(category, event, 'Upgrade Account');
-    }
   }
 
   render() {