Merge branch 'develop' into i18n

# Conflicts:
#	src/i18n/languages.js

53 files changed, 1097 insertions, 247 deletions

diff --git a/electron-builder.yml b/electron-builder.yml
index 03e59e462..96bd63cc2 100644
--- a/electron-builder.yml
+++ b/electron-builder.yml
@@ -34,3 +34,7 @@ linux:
 nsis:
   perMachine: false
   oneClick: true
+
+protocols: 
+  name: Franz
+  schemes: [franz] 
diff --git a/gulpfile.babel.js b/gulpfile.babel.js
index d947974b3..95b026f66 100644
--- a/gulpfile.babel.js
+++ b/gulpfile.babel.js
@@ -110,7 +110,9 @@ export function watch() {
 }
 
 export function webserver() {
-  gulp.src(paths.dest)
+  gulp.src([
+    paths.dest,
+  ])
     .pipe(server({
       livereload: true,
     }));
diff --git a/package.json b/package.json
index 8a5eee7b2..5f5dd4182 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
   "description": "Messaging app for WhatsApp, Slack, Telegram, HipChat, Hangouts and many many more.",
   "copyright": "adlk x franz - Stefan Malzner",
   "main": "index.js",
+  "homepage": "https://meetfranz.com",
   "repository": "https://github.com/meetfranz/franz.git",
   "private": true,
   "scripts": {
@@ -33,8 +34,9 @@
     "babel-polyfill": "^6.23.0",
     "babel-runtime": "^6.23.0",
     "classnames": "^2.2.5",
+    "du": "^0.1.0",
     "electron-fetch": "^1.1.0",
-    "electron-spellchecker": "^1.2.0",
+    "electron-spellchecker": "^1.1.2",
     "electron-updater": "^2.4.3",
     "electron-window-state": "^4.1.0",
     "fs-extra": "^3.0.1",
@@ -49,15 +51,17 @@
     "mkdirp": "^0.5.1",
     "mobx": "^3.1.0",
     "mobx-react": "^4.1.0",
-    "mobx-react-form": "1.24.0",
+    "mobx-react-form": "^1.32.2",
     "mobx-react-router": "^3.1.2",
     "moment": "^2.17.1",
     "normalize-url": "^1.9.1",
+    "pretty-bytes": "^4.0.2",
     "prop-types": "^15.5.10",
     "prop-types-extended": "^0.2.1",
     "react": "^15.4.1",
     "react-addons-css-transition-group": "^15.4.2",
     "react-dom": "^15.4.1",
+    "react-dropzone": "^4.2.1",
     "react-electron-web-view": "^2.0.1",
     "react-intl": "^2.3.0",
     "react-loader": "^2.4.0",
@@ -103,7 +107,7 @@
     "gulp-sass": "^3.1.0",
     "gulp-sass-variables": "^1.1.1",
     "gulp-server-livereload": "^1.9.2",
-    "node-sass": "^4.5.3"
+    "node-sass": "^4.7.2"
   },
   "config": {
     "commitizen": {
diff --git a/src/actions/app.js b/src/actions/app.js
index e4f648fc9..e6f7f22ba 100644
--- a/src/actions/app.js
+++ b/src/actions/app.js
@@ -25,4 +25,5 @@ export default {
     overrideSystemMute: PropTypes.bool,
   },
   toggleMuteApp: {},
+  clearAllCache: {},
 };
diff --git a/src/actions/service.js b/src/actions/service.js
index e3100e986..5d483b12a 100644
--- a/src/actions/service.js
+++ b/src/actions/service.js
@@ -25,6 +25,9 @@ export default {
     serviceId: PropTypes.string.isRequired,
     redirect: PropTypes.string,
   },
+  clearCache: {
+    serviceId: PropTypes.string.isRequired,
+  },
   setUnreadMessageCount: {
     serviceId: PropTypes.string.isRequired,
     count: PropTypes.object.isRequired,
diff --git a/src/api/LocalApi.js b/src/api/LocalApi.js
index 6f2b049d6..3f84f8a0b 100644
--- a/src/api/LocalApi.js
+++ b/src/api/LocalApi.js
@@ -15,4 +15,12 @@ export default class LocalApi {
   removeKey(key) {
     return this.local.removeKey(key);
   }
+
+  getAppCacheSize() {
+    return this.local.getAppCacheSize();
+  }
+
+  clearAppCache() {
+    return this.local.clearAppCache();
+  }
 }
diff --git a/src/api/ServicesApi.js b/src/api/ServicesApi.js
index 3cb40ba0d..36ed9482f 100644
--- a/src/api/ServicesApi.js
+++ b/src/api/ServicesApi.js
@@ -1,5 +1,6 @@
 export default class ServicesApi {
-  constructor(server) {
+  constructor(server, local) {
+    this.local = local;
     this.server = server;
   }
 
@@ -30,4 +31,8 @@ export default class ServicesApi {
   reorder(data) {
     return this.server.reorderService(data);
   }
+
+  clearCache(serviceId) {
+    return this.local.clearCache(serviceId);
+  }
 }
diff --git a/src/api/server/LocalApi.js b/src/api/server/LocalApi.js
index eba236f16..e95d750ac 100644
--- a/src/api/server/LocalApi.js
+++ b/src/api/server/LocalApi.js
@@ -1,4 +1,9 @@
-import SettingsModel from '../../models/Settings';
+import { remote } from 'electron';
+import du from 'du';
+
+import { getServicePartitionsDirectory } from '../../helpers/service-helpers.js';
+
+const { session } = remote;
 
 export default class LocalApi {
   // App
@@ -15,7 +20,7 @@ export default class LocalApi {
   async getAppSettings() {
     const settingsString = localStorage.getItem('app');
     try {
-      const settings = new SettingsModel(JSON.parse(settingsString) || {});
+      const settings = JSON.parse(settingsString) || {};
       console.debug('LocalApi::getAppSettings resolves', settings);
 
       return settings;
@@ -32,4 +37,31 @@ export default class LocalApi {
       localStorage.setItem('app', JSON.stringify(settings));
     }
   }
+
+  // Services
+  async getAppCacheSize() {
+    const partitionsDir = getServicePartitionsDirectory();
+    return new Promise((resolve, reject) => {
+      du(partitionsDir, (err, size) => {
+        if (err) reject(err);
+
+        console.debug('LocalApi::getAppCacheSize resolves', size);
+        resolve(size);
+      });
+    });
+  }
+
+  async clearCache(serviceId) {
+    const s = session.fromPartition(`persist:service-${serviceId}`);
+
+    console.debug('LocalApi::clearCache resolves', serviceId);
+    return new Promise(resolve => s.clearCache(resolve));
+  }
+
+  async clearAppCache() {
+    const s = session.defaultSession;
+
+    console.debug('LocalApi::clearCache clearAppCache');
+    return new Promise(resolve => s.clearCache(resolve));
+  }
 }
diff --git a/src/api/server/ServerApi.js b/src/api/server/ServerApi.js
index 644bf20cd..a684ff98b 100644
--- a/src/api/server/ServerApi.js
+++ b/src/api/server/ServerApi.js
@@ -12,6 +12,8 @@ import NewsModel from '../../models/News';
 import UserModel from '../../models/User';
 import OrderModel from '../../models/Order';
 
+import { sleep } from '../../helpers/async-helpers';
+
 import { API } from '../../environment';
 
 import {
@@ -20,6 +22,10 @@ import {
   loadRecipeConfig,
 } from '../../helpers/recipe-helpers';
 
+import {
+  removeServicePartitionDirectory,
+} from '../../helpers/service-helpers.js';
+
 module.paths.unshift(
   getDevRecipeDirectory(),
   getRecipeDirectory(),
@@ -165,27 +171,65 @@ export default class ServerApi {
       throw request;
     }
     const serviceData = await request.json();
+
+    if (data.iconFile) {
+      const iconUrl = await this.uploadServiceIcon(serviceData.data.id, data.iconFile);
+
+      serviceData.data.iconUrl = iconUrl;
+    }
+
     const service = Object.assign(serviceData, { data: await this._prepareServiceModel(serviceData.data) });
 
     console.debug('ServerApi::createService resolves', service);
     return service;
   }
 
-  async updateService(recipeId, data) {
-    const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/service/${recipeId}`, this._prepareAuthRequest({
+  async updateService(serviceId, rawData) {
+    const data = rawData;
+
+    if (data.iconFile) {
+      await this.uploadServiceIcon(serviceId, data.iconFile);
+    }
+
+    const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/service/${serviceId}`, this._prepareAuthRequest({
       method: 'PUT',
       body: JSON.stringify(data),
     }));
+
     if (!request.ok) {
       throw request;
     }
+
     const serviceData = await request.json();
+
     const service = Object.assign(serviceData, { data: await this._prepareServiceModel(serviceData.data) });
 
     console.debug('ServerApi::updateService resolves', service);
     return service;
   }
 
+  async uploadServiceIcon(serviceId, icon) {
+    const formData = new FormData();
+    formData.append('icon', icon);
+
+    const requestData = this._prepareAuthRequest({
+      method: 'PUT',
+      body: formData,
+    });
+
+    delete requestData.headers['Content-Type'];
+
+    const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/service/${serviceId}`, requestData);
+
+    if (!request.ok) {
+      throw request;
+    }
+
+    const serviceData = await request.json();
+
+    return serviceData.data.iconUrl;
+  }
+
   async reorderService(data) {
     const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/service/reorder`, this._prepareAuthRequest({
       method: 'PUT',
@@ -208,6 +252,8 @@ export default class ServerApi {
     }
     const data = await request.json();
 
+    removeServicePartitionDirectory(id, true);
+
     console.debug('ServerApi::deleteService resolves', data);
     return data;
   }
@@ -303,18 +349,25 @@ export default class ServerApi {
 
       fs.ensureDirSync(recipeTempDirectory);
       const res = await fetch(packageUrl);
+      console.debug('Recipe downloaded', recipeId);
       const buffer = await res.buffer();
       fs.writeFileSync(archivePath, buffer);
 
-      tar.x({
+      await sleep(10);
+
+      await tar.x({
         file: archivePath,
         cwd: recipeTempDirectory,
-        sync: true,
+        preservePaths: true,
+        unlink: true,
+        preserveOwner: false,
+        onwarn: x => console.log('warn', recipeId, x),
       });
 
+      await sleep(10);
+
       const { id } = fs.readJsonSync(path.join(recipeTempDirectory, 'package.json'));
       const recipeDirectory = path.join(recipesDirectory, id);
-
       fs.copySync(recipeTempDirectory, recipeDirectory);
       fs.remove(recipeTempDirectory);
       fs.remove(path.join(recipesDirectory, recipeId, 'recipe.tar.gz'));
diff --git a/src/app.js b/src/app.js
index a0b88611c..8e62776d2 100644
--- a/src/app.js
+++ b/src/app.js
@@ -105,3 +105,5 @@ window.addEventListener('load', () => {
 // Prevent drag and drop into window from redirecting
 window.addEventListener('dragover', event => event.preventDefault());
 window.addEventListener('drop', event => event.preventDefault());
+window.addEventListener('dragover', event => event.stopPropagation());
+window.addEventListener('drop', event => event.stopPropagation());
diff --git a/src/components/services/content/ServiceWebview.js b/src/components/services/content/ServiceWebview.js
index faa356d3d..c146abf4e 100644
--- a/src/components/services/content/ServiceWebview.js
+++ b/src/components/services/content/ServiceWebview.js
@@ -65,6 +65,7 @@ export default class ServiceWebview extends Component {
 
     const webviewClasses = classnames({
       services__webview: true,
+      'services__webview-wrapper': true,
       'is-active': service.isActive,
       'services__webview--force-repaint': this.state.forceRepaint,
     });
@@ -105,7 +106,6 @@ export default class ServiceWebview extends Component {
             onUpdateTargetUrl={this.updateTargetUrl}
             useragent={service.userAgent}
             muted={isAppMuted || service.isMuted}
-            disablewebsecurity
             allowpopups
           />
         )}
diff --git a/src/components/services/tabs/TabItem.js b/src/components/services/tabs/TabItem.js
index 8403d9462..7aed8fda7 100644
--- a/src/components/services/tabs/TabItem.js
+++ b/src/components/services/tabs/TabItem.js
@@ -126,7 +126,7 @@ class TabItem extends Component {
     const menu = Menu.buildFromTemplate(menuTemplate);
 
     let notificationBadge = null;
-    if ((showMessageBadgeWhenMutedSetting || service.isNotificationEnabled) && showMessageBadgesEvenWhenMuted) {
+    if ((showMessageBadgeWhenMutedSetting || service.isNotificationEnabled) && showMessageBadgesEvenWhenMuted && service.isBadgeEnabled) {
       notificationBadge = (
         <span>
           {service.unreadDirectMessageCount > 0 && (
diff --git a/src/components/settings/recipes/RecipesDashboard.js b/src/components/settings/recipes/RecipesDashboard.js
index b6ade5da4..4610c69a5 100644
--- a/src/components/settings/recipes/RecipesDashboard.js
+++ b/src/components/settings/recipes/RecipesDashboard.js
@@ -16,6 +16,10 @@ const messages = defineMessages({
     id: 'settings.recipes.headline',
     defaultMessage: '!!!Available Services',
   },
+  searchService: {
+    id: 'settings.searchService',
+    defaultMessage: '!!!Search service',
+  },
   mostPopularRecipes: {
     id: 'settings.recipes.mostPopular',
     defaultMessage: '!!!Most popular',
@@ -81,13 +85,7 @@ export default class RecipesDashboard extends Component {
     return (
       <div className="settings__main">
         <div className="settings__header">
-          <SearchInput
-            className="settings__search-header"
-            defaultValue={intl.formatMessage(messages.headline)}
-            onChange={e => searchRecipes(e)}
-            onReset={() => resetSearch()}
-            throttle
-          />
+          <h1>{intl.formatMessage(messages.headline)}</h1>
         </div>
         <div className="settings__body recipes">
           {serviceStatus.length > 0 && serviceStatus.includes('created') && (
@@ -101,7 +99,13 @@ export default class RecipesDashboard extends Component {
               </Infobox>
             </Appear>
           )}
-          {/* {!searchNeedle && ( */}
+          <SearchInput
+            placeholder={intl.formatMessage(messages.searchService)}
+            onChange={e => searchRecipes(e)}
+            onReset={() => resetSearch()}
+            autoFocus
+            throttle
+          />
           <div className="recipes__navigation">
             <Link
               to="/settings/recipes"
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index 36cefe87c..f6f2df2f3 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -13,6 +13,7 @@ import Tabs, { TabItem } from '../../ui/Tabs';
 import Input from '../../ui/Input';
 import Toggle from '../../ui/Toggle';
 import Button from '../../ui/Button';
+import ImageUpload from '../../ui/ImageUpload';
 
 const messages = defineMessages({
   saveService: {
@@ -47,6 +48,10 @@ const messages = defineMessages({
     id: 'settings.service.form.tabOnPremise',
     defaultMessage: '!!!Self hosted ⭐️',
   },
+  useHostedService: {
+    id: 'settings.service.form.useHostedService',
+    defaultMessage: '!!!Use the hosted {name} service.',
+  },
   customUrlValidationError: {
     id: 'settings.service.form.customUrlValidationError',
     defaultMessage: '!!!Could not validate custom {name} server.',
@@ -67,6 +72,26 @@ const messages = defineMessages({
     id: 'settings.service.form.isMutedInfo',
     defaultMessage: '!!!When disabled, all notification sounds and audio playback are muted',
   },
+  headlineNotifications: {
+    id: 'settings.service.form.headlineNotifications',
+    defaultMessage: '!!!Notifications',
+  },
+  headlineBadges: {
+    id: 'settings.service.form.headlineBadges',
+    defaultMessage: '!!!Unread message badges',
+  },
+  headlineGeneral: {
+    id: 'settings.service.form.headlineGeneral',
+    defaultMessage: '!!!General',
+  },
+  iconDelete: {
+    id: 'settings.service.form.iconDelete',
+    defaultMessage: '!!!Delete',
+  },
+  iconUpload: {
+    id: 'settings.service.form.iconUpload',
+    defaultMessage: '!!!Drop your image, or click here',
+  },
 });
 
 @observer
@@ -108,9 +133,13 @@ export default class EditServiceForm extends Component {
     this.props.form.submit({
       onSuccess: async (form) => {
         const values = form.values();
-
         let isValid = true;
 
+        const files = form.$('customIcon').files;
+        if (files) {
+          values.iconFile = files[0];
+        }
+
         if (recipe.validateUrl && values.customUrl) {
           this.setState({ isValidatingCustomUrl: true });
           try {
@@ -166,6 +195,13 @@ export default class EditServiceForm extends Component {
       />
     );
 
+    let activeTabIndex = 0;
+    if (recipe.hasHostedOption && service.team) {
+      activeTabIndex = 1;
+    } else if (recipe.hasHostedOption && service.customUrl) {
+      activeTabIndex = 2;
+    }
+
     return (
       <div className="settings__main">
         <div className="settings__header">
@@ -195,14 +231,25 @@ export default class EditServiceForm extends Component {
         </div>
         <div className="settings__body">
           <form onSubmit={e => this.submit(e)} id="form">
-            <Input field={form.$('name')} focus />
+            <div className="service-name">
+              <Input field={form.$('name')} focus />
+            </div>
             {(recipe.hasTeamId || recipe.hasCustomUrl) && (
               <Tabs
-                active={service.customUrl ? 1 : 0}
+                active={activeTabIndex}
               >
+                {recipe.hasHostedOption && (
+                  <TabItem title={recipe.name}>
+                    {intl.formatMessage(messages.useHostedService, { name: recipe.name })}
+                  </TabItem>
+                )}
                 {recipe.hasTeamId && (
                   <TabItem title={intl.formatMessage(messages.tabHosted)}>
-                    <Input field={form.$('team')} suffix={recipe.urlInputSuffix} />
+                    <Input
+                      field={form.$('team')}
+                      prefix={recipe.urlInputPrefix}
+                      suffix={recipe.urlInputSuffix}
+                    />
                   </TabItem>
                 )}
                 {recipe.hasCustomUrl && (
@@ -230,21 +277,42 @@ export default class EditServiceForm extends Component {
                 )}
               </Tabs>
             )}
-            <div className="settings__options">
-              <Toggle field={form.$('isNotificationEnabled')} />
-              {recipe.hasIndirectMessages && (
-                <div>
-                  <Toggle field={form.$('isIndirectMessageBadgeEnabled')} />
+            <div className="service-flex-grid">
+              <div className="settings__options">
+                <div className="settings__settings-group">
+                  <h3>{intl.formatMessage(messages.headlineNotifications)}</h3>
+                  <Toggle field={form.$('isNotificationEnabled')} />
+                  <Toggle field={form.$('isMuted')} />
                   <p className="settings__help">
-                    {intl.formatMessage(messages.indirectMessageInfo)}
+                    {intl.formatMessage(messages.isMutedInfo)}
                   </p>
                 </div>
-              )}
-              <Toggle field={form.$('isMuted')} />
-              <p className="settings__help">
-                {intl.formatMessage(messages.isMutedInfo)}
-              </p>
-              <Toggle field={form.$('isEnabled')} />
+
+                <div className="settings__settings-group">
+                  <h3>{intl.formatMessage(messages.headlineBadges)}</h3>
+                  <Toggle field={form.$('isBadgeEnabled')} />
+                  {recipe.hasIndirectMessages && form.$('isBadgeEnabled').value && (
+                    <div>
+                      <Toggle field={form.$('isIndirectMessageBadgeEnabled')} />
+                      <p className="settings__help">
+                        {intl.formatMessage(messages.indirectMessageInfo)}
+                      </p>
+                    </div>
+                  )}
+                </div>
+
+                <div className="settings__settings-group">
+                  <h3>{intl.formatMessage(messages.headlineGeneral)}</h3>
+                  <Toggle field={form.$('isEnabled')} />
+                </div>
+              </div>
+              <div className="service-icon">
+                <ImageUpload
+                  field={form.$('customIcon')}
+                  textDelete={intl.formatMessage(messages.iconDelete)}
+                  textUpload={intl.formatMessage(messages.iconUpload)}
+                />
+              </div>
             </div>
             {recipe.message && (
               <p className="settings__message">
diff --git a/src/components/settings/services/ServicesDashboard.js b/src/components/settings/services/ServicesDashboard.js
index 5f146b5f3..20e451f01 100644
--- a/src/components/settings/services/ServicesDashboard.js
+++ b/src/components/settings/services/ServicesDashboard.js
@@ -15,10 +15,18 @@ const messages = defineMessages({
     id: 'settings.services.headline',
     defaultMessage: '!!!Your services',
   },
+  searchService: {
+    id: 'settings.searchService',
+    defaultMessage: '!!!Search service',
+  },
   noServicesAdded: {
     id: 'settings.services.noServicesAdded',
     defaultMessage: '!!!You haven\'t added any services yet.',
   },
+  noServiceFound: {
+    id: 'settings.recipes.nothingFound',
+    defaultMessage: '!!!Sorry, but no service matched your search term.',
+  },
   discoverServices: {
     id: 'settings.services.discoverServices',
     defaultMessage: '!!!Discover services',
@@ -53,7 +61,13 @@ export default class ServicesDashboard extends Component {
     servicesRequestFailed: PropTypes.bool.isRequired,
     retryServicesRequest: PropTypes.func.isRequired,
     status: MobxPropTypes.arrayOrObservableArray.isRequired,
+    searchNeedle: PropTypes.string,
   };
+
+  static defaultProps = {
+    searchNeedle: '',
+  }
+
   static contextTypes = {
     intl: intlShape,
   };
@@ -69,20 +83,24 @@ export default class ServicesDashboard extends Component {
       servicesRequestFailed,
       retryServicesRequest,
       status,
+      searchNeedle,
     } = this.props;
     const { intl } = this.context;
 
     return (
       <div className="settings__main">
         <div className="settings__header">
-          <SearchInput
-            className="settings__search-header"
-            defaultValue={intl.formatMessage(messages.headline)}
-            onChange={needle => filterServices({ needle })}
-            onReset={() => resetFilter()}
-          />
+          <h1>{intl.formatMessage(messages.headline)}</h1>
         </div>
         <div className="settings__body">
+          {!isLoading && (
+            <SearchInput
+              placeholder={intl.formatMessage(messages.searchService)}
+              onChange={needle => filterServices({ needle })}
+              onReset={() => resetFilter()}
+              autoFocus
+            />
+          )}
           {!isLoading && servicesRequestFailed && (
             <div>
               <Infobox
@@ -121,7 +139,7 @@ export default class ServicesDashboard extends Component {
             </Appear>
           )}
 
-          {!isLoading && services.length === 0 && (
+          {!isLoading && services.length === 0 && !searchNeedle && (
             <div className="align-middle settings__empty-state">
               <p className="settings__empty-text">
                 <span className="emoji">
@@ -132,6 +150,16 @@ export default class ServicesDashboard extends Component {
               <Link to="/settings/recipes" className="button">{intl.formatMessage(messages.discoverServices)}</Link>
             </div>
           )}
+          {!isLoading && services.length === 0 && searchNeedle && (
+            <div className="align-middle settings__empty-state">
+              <p className="settings__empty-text">
+                <span className="emoji">
+                  <img src="./assets/images/emoji/dontknow.png" alt="" />
+                </span>
+                {intl.formatMessage(messages.noServiceFound)}
+              </p>
+            </div>
+          )}
           {isLoading ? (
             <Loader />
           ) : (
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index 878e46d6d..72aa5a8af 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -40,6 +40,18 @@ const messages = defineMessages({
     id: 'settings.app.translationHelp',
     defaultMessage: '!!!Help us to translate Franz into your language.',
   },
+  subheadlineCache: {
+    id: 'settings.app.subheadlineCache',
+    defaultMessage: '!!!Cache',
+  },
+  cacheInfo: {
+    id: 'settings.app.cacheInfo',
+    defaultMessage: '!!!Franz cache is currently using {size} of disk space.',
+  },
+  buttonClearAllCache: {
+    id: 'settings.app.buttonClearAllCache',
+    defaultMessage: '!!!Clear cache',
+  },
   buttonSearchForUpdate: {
     id: 'settings.app.buttonSearchForUpdate',
     defaultMessage: '!!!Check for updates',
@@ -64,10 +76,6 @@ const messages = defineMessages({
     id: 'settings.app.currentVersion',
     defaultMessage: '!!!Current version:',
   },
-  restartRequired: {
-    id: 'settings.app.restartRequired',
-    defaultMessage: '!!!Changes require restart',
-  },
 });
 
 @observer
@@ -81,6 +89,9 @@ export default class EditSettingsForm extends Component {
     isUpdateAvailable: PropTypes.bool.isRequired,
     noUpdateAvailable: PropTypes.bool.isRequired,
     updateIsReadyToInstall: PropTypes.bool.isRequired,
+    isClearingAllCache: PropTypes.bool.isRequired,
+    onClearAllCache: PropTypes.func.isRequired,
+    cacheSize: PropTypes.string.isRequired,
   };
 
   static contextTypes = {
@@ -107,6 +118,9 @@ export default class EditSettingsForm extends Component {
       isUpdateAvailable,
       noUpdateAvailable,
       updateIsReadyToInstall,
+      isClearingAllCache,
+      onClearAllCache,
+      cacheSize,
     } = this.props;
     const { intl } = this.context;
 
@@ -158,8 +172,26 @@ export default class EditSettingsForm extends Component {
             {/* Advanced */}
             <h2 id="advanced">{intl.formatMessage(messages.headlineAdvanced)}</h2>
             <Toggle field={form.$('enableSpellchecking')} />
-            <p className="settings__help">{intl.formatMessage(messages.restartRequired)}</p>
             {/* <Select field={form.$('spellcheckingLanguage')} /> */}
+            <div className="settings__settings-group">
+              <h3>
+                {intl.formatMessage(messages.subheadlineCache)}
+              </h3>
+              <p>
+                {intl.formatMessage(messages.cacheInfo, {
+                  size: cacheSize,
+                })}
+              </p>
+              <p>
+                <Button
+                  buttonType="secondary"
+                  label={intl.formatMessage(messages.buttonClearAllCache)}
+                  onClick={onClearAllCache}
+                  disabled={isClearingAllCache}
+                  loaded={!isClearingAllCache}
+                />
+              </p>
+            </div>
 
             {/* Updates */}
             <h2 id="updates">{intl.formatMessage(messages.headlineUpdates)}</h2>
@@ -170,6 +202,7 @@ export default class EditSettingsForm extends Component {
               />
             ) : (
               <Button
+                buttonType="secondary"
                 label={intl.formatMessage(updateButtonLabelMessage)}
                 onClick={checkForUpdates}
                 disabled={isCheckingForUpdates || isUpdateAvailable}
diff --git a/src/components/ui/ImageUpload.js b/src/components/ui/ImageUpload.js
new file mode 100644
index 000000000..81c3b8da6
--- /dev/null
+++ b/src/components/ui/ImageUpload.js
@@ -0,0 +1,108 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import { Field } from 'mobx-react-form';
+// import Loader from 'react-loader';
+import classnames from 'classnames';
+import Dropzone from 'react-dropzone';
+
+@observer
+export default class ImageUpload extends Component {
+  static propTypes = {
+    field: PropTypes.instanceOf(Field).isRequired,
+    className: PropTypes.string,
+    multiple: PropTypes.bool,
+    textDelete: PropTypes.string.isRequired,
+    textUpload: PropTypes.string.isRequired,
+  };
+
+  static defaultProps = {
+    className: null,
+    multiple: false,
+  };
+
+  state = {
+    path: null,
+  }
+
+  onDrop(acceptedFiles) {
+    const { field } = this.props;
+
+    acceptedFiles.forEach((file) => {
+      this.setState({
+        path: file.path,
+      });
+      this.props.field.onDrop(file);
+    });
+
+    field.set('');
+  }
+
+  dropzoneRef = null;
+
+  render() {
+    const {
+      field,
+      className,
+      multiple,
+      textDelete,
+      textUpload,
+    } = this.props;
+
+    const cssClasses = classnames({
+      'image-upload__dropzone': true,
+      [`${className}`]: className,
+    });
+
+    return (
+      <div className="image-upload-wrapper">
+        <label className="franz-form__label" htmlFor="iconUpload">{field.label}</label>
+        <div className="image-upload">
+          {(field.value && field.value !== 'delete') || this.state.path ? (
+            <div>
+              <div
+                className="image-upload__preview"
+                style={({
+                  backgroundImage: `url("${this.state.path || field.value}")`,
+                })}
+              />
+              <div className="image-upload__action">
+                <button
+                  type="button"
+                  onClick={() => {
+                    if (field.value) {
+                      field.set('delete');
+                    } else {
+                      this.setState({
+                        path: null,
+                      });
+                    }
+                  }}
+                >
+                  <i className="mdi mdi-delete" />
+                  <p>
+                    {textDelete}
+                  </p>
+                </button>
+                <div className="image-upload__action-background" />
+              </div>
+            </div>
+          ) : (
+            <Dropzone
+              ref={(node) => { this.dropzoneRef = node; }}
+              onDrop={this.onDrop.bind(this)}
+              className={cssClasses}
+              multiple={multiple}
+              accept="image/jpeg, image/png"
+            >
+              <i className="mdi mdi-file-image" />
+              <p>
+                {textUpload}
+              </p>
+            </Dropzone>
+          )}
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/src/components/ui/SearchInput.js b/src/components/ui/SearchInput.js
index bca412cef..a94cde201 100644
--- a/src/components/ui/SearchInput.js
+++ b/src/components/ui/SearchInput.js
@@ -9,36 +9,46 @@ import { debounce } from 'lodash';
 export default class SearchInput extends Component {
   static propTypes = {
     value: PropTypes.string,
-    defaultValue: PropTypes.string,
+    placeholder: PropTypes.string,
     className: PropTypes.string,
     onChange: PropTypes.func,
     onReset: PropTypes.func,
     name: PropTypes.string,
     throttle: PropTypes.bool,
     throttleDelay: PropTypes.number,
+    autoFocus: PropTypes.bool,
   };
 
   static defaultProps = {
     value: '',
-    defaultValue: '',
+    placeholder: '',
     className: '',
     name: uuidv1(),
     throttle: false,
     throttleDelay: 250,
     onChange: () => null,
     onReset: () => null,
+    autoFocus: false,
   }
 
   constructor(props) {
     super(props);
 
     this.state = {
-      value: props.value || props.defaultValue,
+      value: props.value,
     };
 
     this.throttledOnChange = debounce(this.throttledOnChange, this.props.throttleDelay);
   }
 
+  componentDidMount() {
+    const { autoFocus } = this.props;
+
+    if (autoFocus) {
+      this.input.focus();
+    }
+  }
+
   onChange(e) {
     const { throttle, onChange } = this.props;
     const { value } = e.target;
@@ -52,26 +62,6 @@ export default class SearchInput extends Component {
     }
   }
 
-  onClick() {
-    const { defaultValue } = this.props;
-    const { value } = this.state;
-
-    if (value === defaultValue) {
-      this.setState({ value: '' });
-    }
-
-    this.input.focus();
-  }
-
-  onBlur() {
-    const { defaultValue } = this.props;
-    const { value } = this.state;
-
-    if (value === '') {
-      this.setState({ value: defaultValue });
-    }
-  }
-
   throttledOnChange(e) {
     const { onChange } = this.props;
 
@@ -79,8 +69,8 @@ export default class SearchInput extends Component {
   }
 
   reset() {
-    const { defaultValue, onReset } = this.props;
-    this.setState({ value: defaultValue });
+    const { onReset } = this.props;
+    this.setState({ value: '' });
 
     onReset();
   }
@@ -88,7 +78,7 @@ export default class SearchInput extends Component {
   input = null;
 
   render() {
-    const { className, name, defaultValue } = this.props;
+    const { className, name, placeholder } = this.props;
     const { value } = this.state;
 
     return (
@@ -101,18 +91,16 @@ export default class SearchInput extends Component {
         <label
           htmlFor={name}
           className="mdi mdi-magnify"
-          onClick={() => this.onClick()}
         />
         <input
           name={name}
           type="text"
+          placeholder={placeholder}
           value={value}
           onChange={e => this.onChange(e)}
-          onClick={() => this.onClick()}
-          onBlur={() => this.onBlur()}
           ref={(ref) => { this.input = ref; }}
         />
-        {value !== defaultValue && value.length > 0 && (
+        {value.length > 0 && (
           <span
             className="mdi mdi-close-circle-outline"
             onClick={() => this.reset()}
diff --git a/src/components/ui/SubscriptionPopup.js b/src/components/ui/SubscriptionPopup.js
index 5aae2c47a..528d02907 100644
--- a/src/components/ui/SubscriptionPopup.js
+++ b/src/components/ui/SubscriptionPopup.js
@@ -58,7 +58,6 @@ export default class SubscriptionPopup extends Component {
 
             autosize
             src={encodeURI(url)}
-            disablewebsecurity
             onDidNavigate={completeCheck}
             // onNewWindow={(event, url, frameName, options) =>
             //   openWindow({ event, url, frameName, options })}
diff --git a/src/config.js b/src/config.js
index e6d8958e6..e66594c59 100644
--- a/src/config.js
+++ b/src/config.js
@@ -14,7 +14,8 @@ export const DEFAULT_APP_SETTINGS = {
   showMessageBadgeWhenMuted: true,
   enableSpellchecking: true,
   // spellcheckingLanguage: 'auto',
-  locale: 'en-US',
+  locale: '',
+  fallbackLocale: 'en-US',
   beta: false,
   isAppMuted: false,
 };
diff --git a/src/containers/settings/EditServiceScreen.js b/src/containers/settings/EditServiceScreen.js
index 191ef447b..c26195a1e 100644
--- a/src/containers/settings/EditServiceScreen.js
+++ b/src/containers/settings/EditServiceScreen.js
@@ -26,6 +26,10 @@ const messages = defineMessages({
     id: 'settings.service.form.enableNotification',
     defaultMessage: '!!!Enable Notifications',
   },
+  enableBadge: {
+    id: 'settings.service.form.enableBadge',
+    defaultMessage: '!!!Show unread message badges',
+  },
   enableAudio: {
     id: 'settings.service.form.enableAudio',
     defaultMessage: '!!!Enable audio',
@@ -42,6 +46,10 @@ const messages = defineMessages({
     id: 'settings.service.form.indirectMessages',
     defaultMessage: '!!!Show message badge for all new messages',
   },
+  icon: {
+    id: 'settings.service.form.icon',
+    defaultMessage: '!!!Custom icon',
+  },
 });
 
 @inject('stores', 'actions') @observer
@@ -88,11 +96,22 @@ export default class EditServiceScreen extends Component {
           value: service.isNotificationEnabled,
           default: true,
         },
+        isBadgeEnabled: {
+          label: intl.formatMessage(messages.enableBadge),
+          value: service.isBadgeEnabled,
+          default: true,
+        },
         isMuted: {
           label: intl.formatMessage(messages.enableAudio),
           value: !service.isMuted,
           default: true,
         },
+        customIcon: {
+          label: intl.formatMessage(messages.icon),
+          value: service.hasCustomUploadedIcon ? service.icon : false,
+          default: null,
+          type: 'file',
+        },
       },
     };
 
@@ -118,11 +137,22 @@ export default class EditServiceScreen extends Component {
       });
     }
 
+    // More fine grained and use case specific validation rules
     if (recipe.hasTeamId && recipe.hasCustomUrl) {
       config.fields.team.validate = [oneRequired(['team', 'customUrl'])];
       config.fields.customUrl.validate = [url, oneRequired(['team', 'customUrl'])];
     }
 
+    // If a service can be hosted and has a teamId or customUrl
+    if (recipe.hasHostedOption && (recipe.hasTeamId || recipe.hasCustomUrl)) {
+      if (config.fields.team) {
+        config.fields.team.validate = [];
+      }
+      if (config.fields.customUrl) {
+        config.fields.customUrl.validate = [url];
+      }
+    }
+
     if (recipe.hasIndirectMessages) {
       Object.assign(config.fields, {
         isIndirectMessageBadgeEnabled: {
@@ -179,6 +209,12 @@ export default class EditServiceScreen extends Component {
       return (<div>Loading...</div>);
     }
 
+    if (!recipe) {
+      return (
+        <div>something went wrong</div>
+      );
+    }
+
     const form = this.prepareForm(recipe, service);
 
     return (
diff --git a/src/containers/settings/EditSettingsScreen.js b/src/containers/settings/EditSettingsScreen.js
index 1a297f41f..1fa7ce8bc 100644
--- a/src/containers/settings/EditSettingsScreen.js
+++ b/src/containers/settings/EditSettingsScreen.js
@@ -193,8 +193,17 @@ export default class EditSettingsScreen extends Component {
   }
 
   render() {
-    const { updateStatus, updateStatusTypes } = this.props.stores.app;
-    const { checkForUpdates, installUpdate } = this.props.actions.app;
+    const {
+      updateStatus,
+      cacheSize,
+      updateStatusTypes,
+      isClearingAllCache,
+    } = this.props.stores.app;
+    const {
+      checkForUpdates,
+      installUpdate,
+      clearAllCache,
+    } = this.props.actions.app;
     const form = this.prepareForm();
 
     return (
@@ -207,6 +216,9 @@ export default class EditSettingsScreen extends Component {
         noUpdateAvailable={updateStatus === updateStatusTypes.NOT_AVAILABLE}
         updateIsReadyToInstall={updateStatus === updateStatusTypes.DOWNLOADED}
         onSubmit={d => this.onSubmit(d)}
+        cacheSize={cacheSize}
+        isClearingAllCache={isClearingAllCache}
+        onClearAllCache={clearAllCache}
       />
     );
   }
@@ -223,6 +235,7 @@ EditSettingsScreen.wrappedComponent.propTypes = {
       launchOnStartup: PropTypes.func.isRequired,
       checkForUpdates: PropTypes.func.isRequired,
       installUpdate: PropTypes.func.isRequired,
+      clearAllCache: PropTypes.func.isRequired,
     }).isRequired,
     settings: PropTypes.shape({
       update: PropTypes.func.isRequired,
diff --git a/src/containers/settings/ServicesScreen.js b/src/containers/settings/ServicesScreen.js
index 8cfe5efbf..12db1bcd3 100644
--- a/src/containers/settings/ServicesScreen.js
+++ b/src/containers/settings/ServicesScreen.js
@@ -53,6 +53,7 @@ export default class ServicesScreen extends Component {
         goTo={router.push}
         servicesRequestFailed={services.allServicesRequest.wasExecuted && services.allServicesRequest.isError}
         retryServicesRequest={() => services.allServicesRequest.reload()}
+        searchNeedle={services.filterNeedle}
       />
     );
   }
diff --git a/src/electron/deepLinking.js b/src/electron/deepLinking.js
new file mode 100644
index 000000000..ef23fd3c5
--- /dev/null
+++ b/src/electron/deepLinking.js
@@ -0,0 +1,7 @@
+export default function handleDeepLink(window, rawUrl) {
+  const url = rawUrl.replace('franz://', '');
+
+  if (!url) return;
+
+  window.webContents.send('navigateFromDeepLink', { url });
+}
diff --git a/src/electron/ipc-api/autoUpdate.js b/src/electron/ipc-api/autoUpdate.js
index 7bc193e2d..ba49a2f97 100644
--- a/src/electron/ipc-api/autoUpdate.js
+++ b/src/electron/ipc-api/autoUpdate.js
@@ -1,8 +1,9 @@
 import { app, ipcMain } from 'electron';
 import { autoUpdater } from 'electron-updater';
+import { isDevMode } from '../../environment.js';
 
 export default (params) => {
-  if (process.platform === 'darwin' || process.platform === 'win32') {
+  if (!isDevMode && (process.platform === 'darwin' || process.platform === 'win32')) {
     // autoUpdater.setFeedURL(updateUrl);
     ipcMain.on('autoUpdate', (event, args) => {
       try {
diff --git a/src/helpers/async-helpers.js b/src/helpers/async-helpers.js
new file mode 100644
index 000000000..2ef01ee09
--- /dev/null
+++ b/src/helpers/async-helpers.js
@@ -0,0 +1,5 @@
+/* eslint-disable import/prefer-default-export */
+
+export function sleep(ms = 0) {
+  return new Promise(r => setTimeout(r, ms));
+}
diff --git a/src/helpers/service-helpers.js b/src/helpers/service-helpers.js
new file mode 100644
index 000000000..5f63f6b7c
--- /dev/null
+++ b/src/helpers/service-helpers.js
@@ -0,0 +1,20 @@
+import path from 'path';
+import { remote } from 'electron';
+import fs from 'fs-extra';
+
+const app = remote.app;
+
+export function getServicePartitionsDirectory() {
+  return path.join(app.getPath('userData'), 'Partitions');
+}
+
+export function removeServicePartitionDirectory(id = '', addServicePrefix = false) {
+  const servicePartition = path.join(getServicePartitionsDirectory(), `${addServicePrefix ? 'service-' : ''}${id}`);
+
+  return fs.remove(servicePartition);
+}
+
+export async function getServiceIdsFromPartitions() {
+  const files = await fs.readdir(getServicePartitionsDirectory());
+  return files.filter(n => n !== '__chrome_extension');
+}
diff --git a/src/helpers/webview-ime-focus-helpers.js b/src/helpers/webview-ime-focus-helpers.js
deleted file mode 100644
index 2593a5f26..000000000
--- a/src/helpers/webview-ime-focus-helpers.js
+++ /dev/null
@@ -1,38 +0,0 @@
-module.exports.releaseDocumentFocus = () => {
-  const element = document.createElement('span');
-  document.body.appendChild(element);
-
-  const range = document.createRange();
-  range.setStart(element, 0);
-
-  const selection = window.getSelection();
-  selection.removeAllRanges();
-  selection.addRange(range);
-  selection.removeAllRanges();
-
-  document.body.removeChild(element);
-};
-
-module.exports.claimDocumentFocus = () => {
-  const { activeElement } = document;
-  const selection = window.getSelection();
-
-  let selectionStart;
-  let selectionEnd;
-  let range;
-
-  if (activeElement) ({ selectionStart, selectionEnd } = activeElement);
-  if (selection.rangeCount) range = selection.getRangeAt(0);
-
-  const restoreOriginalSelection = () => {
-    if (selectionStart >= 0 && selectionEnd >= 0) {
-      activeElement.selectionStart = selectionStart;
-      activeElement.selectionEnd = selectionEnd;
-    } else if (range) {
-      selection.addRange(range);
-    }
-  };
-
-  exports.releaseDocumentFocus();
-  window.requestAnimationFrame(restoreOriginalSelection);
-};
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 48b408e59..7fc9eac1c 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -66,6 +66,7 @@
   "sidebar.unmuteApp": "Enable notifications & audio",
   "services.welcome": "Welcome to Franz",
   "services.getStarted": "Get started",
+  "settings.searchService": "Search service",
   "settings.account.headline": "Account",
   "settings.account.headlineSubscription": "Your subscription",
   "settings.account.headlineUpgrade": "Upgrade your account & support Franz",
@@ -110,6 +111,7 @@
   "settings.service.form.editServiceHeadline": "Edit {name}",
   "settings.service.form.tabHosted": "Hosted",
   "settings.service.form.tabOnPremise": "Self hosted ⭐️",
+  "settings.service.form.useHostedService": "Use the hosted {name} service.",
   "settings.service.form.customUrlValidationError": "Could not validate custom {name} server.",
   "settings.service.form.customUrlPremiumInfo": "To add self hosted services, you need a Franz Premium Supporter Account.",
   "settings.service.form.customUrlUpgradeAccount": "Upgrade your account",
@@ -117,11 +119,18 @@
   "settings.service.form.name": "Name",
   "settings.service.form.enableService": "Enable service",
   "settings.service.form.enableNotification": "Enable notifications",
+  "settings.service.form.enableBadge": "Show unread message badges",
   "settings.service.form.team": "Team",
   "settings.service.form.customUrl": "Custom server",
   "settings.service.form.indirectMessages": "Show message badge for all new messages",
   "settings.service.form.enableAudio": "Enable audio",
   "settings.service.form.isMutedInfo": "When disabled, all notification sounds and audio playback are muted",
+  "settings.service.form.headlineNotifications": "Notifications",
+  "settings.service.form.headlineBadges": "Unread message badges",
+  "settings.service.form.headlineGeneral": "General",
+  "settings.service.form.icon": "Custom icon",
+  "settings.service.form.iconDelete": "Delete",
+  "settings.service.form.iconUpload": "Drop your image, or click here",
   "settings.service.error.headline": "Error",
   "settings.service.error.goBack": "Back to services",
   "settings.service.error.message": "Could not load service recipe.",
@@ -144,6 +153,9 @@
   "settings.app.updateStatusSearching": "Is searching for update",
   "settings.app.updateStatusAvailable": "Update available, downloading...",
   "settings.app.updateStatusUpToDate": "You are using the latest version of Franz",
+  "settings.app.subheadlineCache": "Cache",
+  "settings.app.cacheInfo": "Franz cache is currently using {size} of disk space.",
+  "settings.app.buttonClearAllCache": "Clear cache",
   "settings.app.form.autoLaunchOnStart": "Launch Franz on start",
   "settings.app.form.autoLaunchInBackground": "Open in background",
   "settings.app.form.enableSystemTray": "Show Franz in system tray",
diff --git a/src/index.html b/src/index.html
index 05a93e37b..9e5acd705 100644
--- a/src/index.html
+++ b/src/index.html
@@ -23,6 +23,24 @@
         s.async = true;
         s.setAttribute('src', lrHost + '/livereload.js');
         document.body.appendChild(s);
+
+        s.onload = () => {
+          console.log('livereload loaded');
+          const originalReloadBehaviour = window._onLiveReloadFileChanged;
+
+          window._onLiveReloadFileChanged = (file) => {
+            if (!file.path.includes('/build/webview/') && !file.path.includes('/build/index.js') && !file.path.includes('/build/electron/')) {
+              originalReloadBehaviour(file);
+            } else {              
+              if (file.path.includes('/build/webview/')) {
+                console.log('Livereload: Reloading all webvies');
+                const webviews = document.querySelectorAll('webview').forEach(webview => webview.reload());
+              } else {
+                console.log('Livereload: skip reload as only main process files have changed');
+              }
+            }
+          }
+        }
       })();
     }
   </script>
diff --git a/src/index.js b/src/index.js
index 6a08e5e5a..f82bb3590 100644
--- a/src/index.js
+++ b/src/index.js
@@ -8,6 +8,7 @@ import { isDevMode, isWindows } from './environment';
 import ipcApi from './electron/ipc-api';
 import Tray from './lib/Tray';
 import Settings from './electron/Settings';
+import handleDeepLink from './electron/deepLinking';
 import { appId } from './package.json'; // eslint-disable-line import/no-unresolved
 import './electron/exception';
 
@@ -26,14 +27,24 @@ if (isWindows) {
 }
 
 // Force single window
-const isSecondInstance = app.makeSingleInstance(() => {
+const isSecondInstance = app.makeSingleInstance((argv) => {
   if (mainWindow) {
     if (mainWindow.isMinimized()) mainWindow.restore();
     mainWindow.focus();
+
+    if (process.platform === 'win32') {
+      // Keep only command line / deep linked arguments
+      const url = argv.slice(1);
+
+      if (url) {
+        handleDeepLink(mainWindow, url.toString());
+      }
+    }
   }
 });
 
 if (isSecondInstance) {
+  console.log('An instance of Franz is already running. Exiting...');
   app.exit();
 }
 
@@ -176,3 +187,15 @@ app.on('activate', () => {
     mainWindow.show();
   }
 });
+
+app.on('will-finish-launching', () => {
+  // Protocol handler for osx
+  app.on('open-url', (event, url) => {
+    event.preventDefault();
+    console.log(`open-url event: ${url}`);
+    handleDeepLink(mainWindow, url);
+  });
+});
+
+// Register App URL
+app.setAsDefaultProtocolClient('franz');
diff --git a/src/lib/Menu.js b/src/lib/Menu.js
index d9c30466b..d01666d49 100644
--- a/src/lib/Menu.js
+++ b/src/lib/Menu.js
@@ -167,7 +167,7 @@ export default class FranzMenu {
             label: 'Settings',
             accelerator: 'CmdOrCtrl+,',
             click: () => {
-              this.actions.ui.openSettings({ path: '' });
+              this.actions.ui.openSettings({ path: 'app' });
             },
           },
           {
diff --git a/src/models/Recipe.js b/src/models/Recipe.js
index 9971df77c..1fc23ac89 100644
--- a/src/models/Recipe.js
+++ b/src/models/Recipe.js
@@ -1,10 +1,11 @@
 import emailParser from 'address-rfc2822';
+import semver from 'semver';
 
 export default class Recipe {
   id = '';
   name = '';
   description = '';
-  version = '1.0';
+  version = '';
   path = '';
 
   serviceURL = '';
@@ -15,6 +16,7 @@ export default class Recipe {
   hasTeamId = false;
   hasPredefinedUrl = false;
   hasCustomUrl = false;
+  hasHostedOption = false;
   urlInputPrefix = '';
   urlInputSuffix = '';
 
@@ -30,6 +32,10 @@ export default class Recipe {
       throw Error(`Recipe '${data.name}' requires Id`);
     }
 
+    if (!semver.valid(data.version)) {
+      throw Error(`Version ${data.version} of recipe '${data.name}' is not a valid semver version`);
+    }
+
     this.id = data.id || this.id;
     this.name = data.name || this.name;
     this.rawAuthor = data.author || this.author;
@@ -45,6 +51,7 @@ export default class Recipe {
     this.hasTeamId = data.config.hasTeamId || this.hasTeamId;
     this.hasPredefinedUrl = data.config.hasPredefinedUrl || this.hasPredefinedUrl;
     this.hasCustomUrl = data.config.hasCustomUrl || this.hasCustomUrl;
+    this.hasHostedOption = data.config.hasHostedOption || this.hasHostedOption;
 
     this.urlInputPrefix = data.config.urlInputPrefix || this.urlInputPrefix;
     this.urlInputSuffix = data.config.urlInputSuffix || this.urlInputSuffix;
diff --git a/src/models/Service.js b/src/models/Service.js
index 958e4b11e..423510c7d 100644
--- a/src/models/Service.js
+++ b/src/models/Service.js
@@ -22,8 +22,10 @@ export default class Service {
   @observable team = '';
   @observable customUrl = '';
   @observable isNotificationEnabled = true;
+  @observable isBadgeEnabled = true;
   @observable isIndirectMessageBadgeEnabled = true;
-  @observable customIconUrl = '';
+  @observable iconUrl = '';
+  @observable hasCustomUploadedIcon = false;
   @observable hasCrashed = false;
 
   constructor(data, recipe) {
@@ -41,7 +43,8 @@ export default class Service {
     this.name = data.name || this.name;
     this.team = data.team || this.team;
     this.customUrl = data.customUrl || this.customUrl;
-    this.customIconUrl = data.customIconUrl || this.customIconUrl;
+    // this.customIconUrl = data.customIconUrl || this.customIconUrl;
+    this.iconUrl = data.iconUrl || this.iconUrl;
 
     this.order = data.order !== undefined
       ? data.order : this.order;
@@ -52,11 +55,16 @@ export default class Service {
     this.isNotificationEnabled = data.isNotificationEnabled !== undefined
       ? data.isNotificationEnabled : this.isNotificationEnabled;
 
+    this.isBadgeEnabled = data.isBadgeEnabled !== undefined
+      ? data.isBadgeEnabled : this.isBadgeEnabled;
+
     this.isIndirectMessageBadgeEnabled = data.isIndirectMessageBadgeEnabled !== undefined
       ? data.isIndirectMessageBadgeEnabled : this.isIndirectMessageBadgeEnabled;
 
     this.isMuted = data.isMuted !== undefined ? data.isMuted : this.isMuted;
 
+    this.hasCustomUploadedIcon = data.hasCustomIcon !== undefined ? data.hasCustomIcon : this.hasCustomUploadedIcon;
+
     this.recipe = recipe;
 
     autorun(() => {
@@ -93,15 +101,15 @@ export default class Service {
   }
 
   @computed get icon() {
-    if (this.hasCustomIcon) {
-      return this.customIconUrl;
+    if (this.iconUrl) {
+      return this.iconUrl;
     }
 
     return path.join(this.recipe.path, 'icon.svg');
   }
 
   @computed get hasCustomIcon() {
-    return (this.customIconUrl !== '');
+    return Boolean(this.iconUrl);
   }
 
   @computed get iconPNG() {
diff --git a/src/models/Settings.js b/src/models/Settings.js
index 35bfe0d05..ca44da258 100644
--- a/src/models/Settings.js
+++ b/src/models/Settings.js
@@ -1,4 +1,4 @@
-import { observable } from 'mobx';
+import { observable, extendObservable } from 'mobx';
 import { DEFAULT_APP_SETTINGS } from '../config';
 
 export default class Settings {
@@ -17,4 +17,8 @@ export default class Settings {
   constructor(data) {
     Object.assign(this, data);
   }
+
+  update(data) {
+    extendObservable(this, data);
+  }
 }
diff --git a/src/stores/AppStore.js b/src/stores/AppStore.js
index 17ec832cf..e33f50f05 100644
--- a/src/stores/AppStore.js
+++ b/src/stores/AppStore.js
@@ -1,10 +1,11 @@
 import { remote, ipcRenderer, shell } from 'electron';
-import { action, observable } from 'mobx';
+import { action, computed, observable } from 'mobx';
 import moment from 'moment';
 import key from 'keymaster';
 import { getDoNotDisturb } from '@meetfranz/electron-notification-state';
 import idleTimer from '@paulcbetts/system-idle-time';
 import AutoLaunch from 'auto-launch';
+import prettyBytes from 'pretty-bytes';
 
 import Store from './lib/Store';
 import Request from './lib/Request';
@@ -14,7 +15,10 @@ import locales from '../i18n/translations';
 import { gaEvent } from '../lib/analytics';
 import Miner from '../lib/Miner';
 
-const { app, powerMonitor } = remote;
+import { getServiceIdsFromPartitions, removeServicePartitionDirectory } from '../helpers/service-helpers.js';
+
+const { app } = remote;
+
 const defaultLocale = DEFAULT_APP_SETTINGS.locale;
 const autoLauncher = new AutoLaunch({
   name: 'Franz',
@@ -30,6 +34,8 @@ export default class AppStore extends Store {
   };
 
   @observable healthCheckRequest = new Request(this.api.app, 'health');
+  @observable getAppCacheSizeRequest = new Request(this.api.local, 'getAppCacheSize');
+  @observable clearAppCacheRequest = new Request(this.api.local, 'clearAppCache');
 
   @observable autoLaunchOnStart = true;
 
@@ -47,6 +53,8 @@ export default class AppStore extends Store {
 
   @observable isSystemMuteOverridden = false;
 
+  @observable isClearingAllCache = false;
+
   constructor(...args) {
     super(...args);
 
@@ -61,6 +69,7 @@ export default class AppStore extends Store {
     this.actions.app.healthCheck.listen(this._healthCheck.bind(this));
     this.actions.app.muteApp.listen(this._muteApp.bind(this));
     this.actions.app.toggleMuteApp.listen(this._toggleMuteApp.bind(this));
+    this.actions.app.clearAllCache.listen(this._clearAllCache.bind(this));
 
     this.registerReactions([
       this._offlineCheck.bind(this),
@@ -116,15 +125,31 @@ export default class AppStore extends Store {
       }
     });
 
+    // Handle deep linking (franz://)
+    ipcRenderer.on('navigateFromDeepLink', (event, data) => {
+      const { url } = data;
+      if (!url) return;
+
+      this.stores.router.push(data.url);
+    });
+
+    const TIMEOUT = 5000;
     // Check system idle time every minute
     setInterval(() => {
       this.idleTime = idleTimer.getIdleTime();
-    }, 60000);
+    }, TIMEOUT);
 
     // Reload all services after a healthy nap
-    powerMonitor.on('resume', () => {
-      setTimeout(window.location.reload, 5000);
-    });
+    // Alternative solution for powerMonitor as the resume event is not fired
+    // More information: https://github.com/electron/electron/issues/1615
+    let lastTime = (new Date()).getTime();
+    setInterval(() => {
+      const currentTime = (new Date()).getTime();
+      if (currentTime > (lastTime + TIMEOUT + 2000)) {
+        this._reactivateServices();
+      }
+      lastTime = currentTime;
+    }, TIMEOUT);
 
     // Set active the next service
     key(
@@ -149,6 +174,10 @@ export default class AppStore extends Store {
     this._healthCheck();
   }
 
+  @computed get cacheSize() {
+    return prettyBytes(this.getAppCacheSizeRequest.execute().result || 0);
+  }
+
   // Actions
   @action _notify({ title, options, notificationId, serviceId = null }) {
     if (this.stores.settings.all.isAppMuted) return;
@@ -239,6 +268,23 @@ export default class AppStore extends Store {
     this._muteApp({ isMuted: !this.stores.settings.all.isAppMuted });
   }
 
+  @action async _clearAllCache() {
+    this.isClearingAllCache = true;
+    const clearAppCache = this.clearAppCacheRequest.execute();
+    const allServiceIds = await getServiceIdsFromPartitions();
+    const allOrphanedServiceIds = allServiceIds.filter(id => !this.stores.services.all.find(s => id.replace('service-', '') === s.id));
+
+    await Promise.all(allOrphanedServiceIds.map(id => removeServicePartitionDirectory(id)));
+
+    await Promise.all(this.stores.services.all.map(s => this.actions.service.clearCache({ serviceId: s.id })));
+
+    await clearAppCache._promise;
+
+    this.getAppCacheSizeRequest.execute();
+
+    this.isClearingAllCache = false;
+  }
+
   // Reactions
   _offlineCheck() {
     if (!this.isOnline) {
@@ -255,8 +301,10 @@ export default class AppStore extends Store {
   _setLocale() {
     const locale = this.stores.settings.all.locale;
 
-    if (locale && locale !== this.locale) {
+    if (locale && Object.prototype.hasOwnProperty.call(locales, locale) && locale !== this.locale) {
       this.locale = locale;
+    } else if (!locale) {
+      this.locale = this._getDefaultLocale();
     }
   }
 
@@ -281,6 +329,10 @@ export default class AppStore extends Store {
       locale = defaultLocale;
     }
 
+    if (!locale) {
+      locale = DEFAULT_APP_SETTINGS.fallbackLocale;
+    }
+
     return locale;
   }
 
@@ -343,6 +395,16 @@ export default class AppStore extends Store {
     return autoLauncher.isEnabled() || false;
   }
 
+  _reactivateServices(retryCount = 0) {
+    if (!this.isOnline) {
+      console.debug('reactivateServices: computer is offline, trying again in 5s, retries:', retryCount);
+      setTimeout(() => this._reactivateServices(retryCount + 1), 5000);
+    } else {
+      console.debug('reactivateServices: reload all services');
+      this.actions.service.reloadAll();
+    }
+  }
+
   _systemDND() {
     const dnd = getDoNotDisturb();
     if (dnd === this.stores.settings.all.isAppMuted || !this.isSystemMuteOverriden) {
diff --git a/src/stores/ServicesStore.js b/src/stores/ServicesStore.js
index b04aafd78..7300a76c8 100644
--- a/src/stores/ServicesStore.js
+++ b/src/stores/ServicesStore.js
@@ -16,6 +16,7 @@ export default class ServicesStore extends Store {
   @observable updateServiceRequest = new Request(this.api.services, 'update');
   @observable reorderServicesRequest = new Request(this.api.services, 'reorder');
   @observable deleteServiceRequest = new Request(this.api.services, 'delete');
+  @observable clearCacheRequest = new Request(this.api.services, 'clearCache');
 
   @observable filterNeedle = null;
 
@@ -31,6 +32,7 @@ export default class ServicesStore extends Store {
     this.actions.service.createFromLegacyService.listen(this._createFromLegacyService.bind(this));
     this.actions.service.updateService.listen(this._updateService.bind(this));
     this.actions.service.deleteService.listen(this._deleteService.bind(this));
+    this.actions.service.clearCache.listen(this._clearCache.bind(this));
     this.actions.service.setWebviewReference.listen(this._setWebviewReference.bind(this));
     this.actions.service.focusService.listen(this._focusService.bind(this));
     this.actions.service.focusActiveService.listen(this._focusActiveService.bind(this));
@@ -172,9 +174,29 @@ export default class ServicesStore extends Store {
     const data = this._cleanUpTeamIdAndCustomUrl(service.recipe.id, serviceData);
     const request = this.updateServiceRequest.execute(serviceId, data);
 
+    const newData = serviceData;
+    if (serviceData.iconFile) {
+      await request._promise;
+
+      newData.iconUrl = request.result.data.iconUrl;
+      newData.hasCustomUploadedIcon = true;
+    }
+
     this.allServicesRequest.patch((result) => {
       if (!result) return;
-      Object.assign(result.find(c => c.id === serviceId), serviceData);
+
+      // patch custom icon deletion
+      if (data.customIcon === 'delete') {
+        data.iconUrl = '';
+        data.hasCustomUploadedIcon = false;
+      }
+
+      // patch custom icon url
+      if (data.customIconUrl) {
+        data.iconUrl = data.customIconUrl;
+      }
+
+      Object.assign(result.find(c => c.id === serviceId), newData);
     });
 
     await request._promise;
@@ -205,6 +227,13 @@ export default class ServicesStore extends Store {
     gaEvent('Service', 'delete', service.recipe.id);
   }
 
+  @action async _clearCache({ serviceId }) {
+    this.clearCacheRequest.reset();
+    const request = this.clearCacheRequest.execute(serviceId);
+    await request._promise;
+    gaEvent('Service', 'clear cache');
+  }
+
   @action _setActive({ serviceId }) {
     const service = this.one(serviceId);
 
@@ -297,7 +326,7 @@ export default class ServicesStore extends Store {
       });
     } else if (channel === 'notification') {
       const options = args[0].options;
-      if (service.recipe.hasNotificationSound || service.isMuted) {
+      if (service.recipe.hasNotificationSound || service.isMuted || this.stores.settings.all.isAppMuted) {
         Object.assign(options, {
           silent: true,
         });
@@ -316,7 +345,7 @@ export default class ServicesStore extends Store {
       }
     } else if (channel === 'avatar') {
       const url = args[0];
-      if (service.customIconUrl !== url) {
+      if (service.iconUrl !== url && !service.hasCustomUploadedIcon) {
         service.customIconUrl = url;
 
         this.actions.service.updateService({
@@ -327,6 +356,10 @@ export default class ServicesStore extends Store {
           redirect: false,
         });
       }
+    } else if (channel === 'new-window') {
+      const url = args[0];
+
+      this.actions.app.openExternalUrl({ url });
     }
   }
 
@@ -368,7 +401,7 @@ export default class ServicesStore extends Store {
     const service = this.one(serviceId);
     service.resetMessageCount();
 
-    service.webview.reload();
+    service.webview.loadURL(service.url);
   }
 
   @action _reloadActive() {
@@ -491,18 +524,19 @@ export default class ServicesStore extends Store {
     const showMessageBadgeWhenMuted = this.stores.settings.all.showMessageBadgeWhenMuted;
     const showMessageBadgesEvenWhenMuted = this.stores.ui.showMessageBadgesEvenWhenMuted;
 
-    const unreadDirectMessageCount = this.enabled
-      .filter(s => (showMessageBadgeWhenMuted || s.isNotificationEnabled) && showMessageBadgesEvenWhenMuted)
+    const unreadDirectMessageCount = this.allDisplayed
+      .filter(s => (showMessageBadgeWhenMuted || s.isNotificationEnabled) && showMessageBadgesEvenWhenMuted && s.isBadgeEnabled)
       .map(s => s.unreadDirectMessageCount)
       .reduce((a, b) => a + b, 0);
 
-    const unreadIndirectMessageCount = this.enabled
-      .filter(s => (showMessageBadgeWhenMuted || s.isIndirectMessageBadgeEnabled) && showMessageBadgesEvenWhenMuted)
+    const unreadIndirectMessageCount = this.allDisplayed
+      .filter(s => (showMessageBadgeWhenMuted && showMessageBadgesEvenWhenMuted) && (s.isBadgeEnabled && s.isIndirectMessageBadgeEnabled))
       .map(s => s.unreadIndirectMessageCount)
       .reduce((a, b) => a + b, 0);
 
     // We can't just block this earlier, otherwise the mobx reaction won't be aware of the vars to watch in some cases
     if (showMessageBadgesEvenWhenMuted) {
+      console.log('set badge', unreadDirectMessageCount, unreadIndirectMessageCount);
       this.actions.app.setBadge({
         unreadDirectMessageCount,
         unreadIndirectMessageCount,
diff --git a/src/stores/SettingsStore.js b/src/stores/SettingsStore.js
index 33473f16d..da99a720f 100644
--- a/src/stores/SettingsStore.js
+++ b/src/stores/SettingsStore.js
@@ -26,7 +26,7 @@ export default class SettingsStore extends Store {
   }
 
   @computed get all() {
-    return this.allSettingsRequest.result || new SettingsModel();
+    return new SettingsModel(this.allSettingsRequest.result);
   }
 
   @action async _update({ settings }) {
diff --git a/src/styles/button.scss b/src/styles/button.scss
index 75d2cb1d4..8d2adbbcc 100644
--- a/src/styles/button.scss
+++ b/src/styles/button.scss
@@ -48,6 +48,18 @@
     }
   }
 
+  &.franz-form__button--warning {
+    background: $theme-brand-warning;
+
+    &:hover {
+      background: darken($theme-brand-warning, 5%);
+    }
+
+    &:active {
+      background: lighten($theme-brand-warning, 5%);
+    }
+  }
+
   &.franz-form__button--inverted {
     background: none;
     padding: 10px 20px;
diff --git a/src/styles/content-tabs.scss b/src/styles/content-tabs.scss
index aa3c8594b..47dfea2c4 100644
--- a/src/styles/content-tabs.scss
+++ b/src/styles/content-tabs.scss
@@ -12,15 +12,17 @@
       flex: 1;
       // border: 1px solid $theme-gray-lightest;
       color: $theme-gray-dark;
-      background: $theme-gray-lightest;
-      border-bottom: 1px solid $theme-gray-lighter;
-      box-shadow: inset 0px -3px 10px rgba(black, 0.05);
-      transition: all $theme-transition-time;
+      background: linear-gradient($theme-gray-lightest 80%, darken($theme-gray-lightest, 3%));
+      border-right: 1px solid $theme-gray-lighter;
+      transition: background $theme-transition-time;
+
+      &:last-of-type {
+        border-right: 0;
+      }
 
       &.is-active {
         background: $theme-brand-primary;
         color: #FFF;
-        border-bottom: 1px solid $theme-brand-primary;
         box-shadow: none;
       }
     }
diff --git a/src/styles/image-upload.scss b/src/styles/image-upload.scss
new file mode 100644
index 000000000..06176a7af
--- /dev/null
+++ b/src/styles/image-upload.scss
@@ -0,0 +1,91 @@
+.image-upload {
+  position: absolute;
+  width: 140px;
+  height: 140px;
+  border: 1px solid $theme-gray-lighter;
+  border-radius: $theme-border-radius-small;
+  background: $theme-gray-lightest;
+  overflow: hidden;
+  margin-top: 5px;
+
+  &__preview,
+  &__action {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+  }
+
+  &__preview {
+    z-index: 1;
+    background-size: cover;
+    background-size: 100%;
+    background-repeat: no-repeat;
+    background-position: center center;
+    border-radius: 3px;
+  }
+
+  &__action {
+    position: relative;
+    z-index: 10;
+    opacity: 0;
+    transition: opacity 0.5s;
+    display: flex;
+    justify-content: center;
+
+    &-background {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba($theme-gray, 0.7);
+      z-index: 10;
+    }
+
+    button {
+      position: relative;
+      z-index: 100;
+      color: #FFF;
+
+      .mdi {
+        color: #FFF;
+      }
+    }
+  }
+
+  &__dropzone {
+    text-align: center;
+    border-radius: 5px;
+    padding: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+  }
+
+  &__dropzone, 
+  button {
+    .mdi {
+      margin-bottom: 5px;
+    }
+
+    p {
+      font-size: 10px;
+      line-height: 10px;
+    }
+  }
+
+  &:hover {
+    .image-upload__action {
+      opacity: 1;
+    }
+  }
+}
+
+.image-upload-wrapper {
+  .mdi {
+    font-size: 40px;
+    color: $theme-gray-light;
+  }
+}
\ No newline at end of file
diff --git a/src/styles/input.scss b/src/styles/input.scss
index 814dce5f8..7042f56e8 100644
--- a/src/styles/input.scss
+++ b/src/styles/input.scss
@@ -47,6 +47,10 @@
     padding: 8px;
     // font-size: 18px;
     color: $theme-gray;
+
+    &::placeholder {
+      color: lighten($theme-gray-light, 10%);
+    }
   }
 
   .franz-form__input-prefix,
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 0a082729c..261396f6f 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -35,3 +35,4 @@ $mdi-font-path: '../node_modules/mdi/fonts';
 @import './button.scss';
 @import './searchInput.scss';
 @import './select.scss';
+@import './image-upload.scss';
diff --git a/src/styles/searchInput.scss b/src/styles/searchInput.scss
index 28ff09fc4..633a31e09 100644
--- a/src/styles/searchInput.scss
+++ b/src/styles/searchInput.scss
@@ -1,4 +1,20 @@
 .search-input {
   width: 100%;
   height: auto;
+  display: flex;
+  align-items: center;
+  padding: 0 10px;
+  border-radius: 30px;
+  background: $theme-gray-lightest;
+  padding: 5px 10px;
+  @extend %headline;
+  color: $theme-gray-light;
+
+  input {
+    padding-left: 10px;
+    background: none;
+    border: 0;
+    flex: 1;
+    color: $theme-gray-light;
+  }
 }
diff --git a/src/styles/services.scss b/src/styles/services.scss
index 282c15121..9f6cfc772 100644
--- a/src/styles/services.scss
+++ b/src/styles/services.scss
@@ -24,6 +24,7 @@
       display: inline-flex;
       width: 0px;
       height: 0px;
+      background: $theme-gray-lighter;
     }
 
     &.is-active {
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index 73cef0813..2182c9b5f 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -111,6 +111,26 @@
     &::-webkit-scrollbar-thumb:window-inactive {
         background: none;
     }
+    
+    .service-flex-grid {
+      display: flex;
+    }
+
+    .service-name {
+      flex: 1px;
+    }
+
+    .service-icon {
+      width: 140px;
+      float: right;
+      margin-top: 30px;
+      margin-left: 40px;
+
+      label {
+        font-weight: bold;
+        letter-spacing: -0.1px;
+      }
+    }
   }
 
   .settings__close {
@@ -129,30 +149,28 @@
     }
   }
 
-  .settings__search-header {
-    display: flex;
-    align-items: center;
-    padding: 0 10px;
-    border-radius: $theme-border-radius;
-    transition: background $theme-transition-time;
-    @extend %headline;
-    font-size: 22px;
-
-    &:hover {
-      background: darken($theme-gray-lighter, 5%);
-    }
+  .search-input {
+    margin-bottom: 30px;
+  }
 
-    input {
-      padding-left: 10px;
-      background: none;
-      border: 0;
-      flex: 1;
-      @extend %headline;
-    }
+  &__options {
+    margin-top: 20px;
+    flex: 1;
   }
 
-  .settings__options {
-    margin-top: 30px;
+  &__settings-group {
+    margin-top: 10px;
+
+    h3 {
+      font-weight: bold;
+      margin: 25px 0 15px;
+      color: $theme-gray-light;
+      letter-spacing: -0.1px;
+
+      &:first-of-type {
+        margin-top: 0;
+      }
+    }
   }
 
   .settings__message {
@@ -173,10 +191,6 @@
     margin: -10px 0 20px 55px;;
     font-size: 12px;
     color: $theme-gray-light;
-
-    &:last-of-type {
-      margin-bottom: 30px;
-    }
   }
 
   .settings__controls {
@@ -312,12 +326,6 @@
     }
   }
 
-  // @include element(add-service-teaser) {
-  //   height: auto;
-  //   margin-top: 20px;
-  //   display: block;
-  //   text-align: center;
-  // }
   .emoji {
     display: block;
     font-size: 40px;
diff --git a/src/styles/welcome.scss b/src/styles/welcome.scss
index cfdcc80ad..46299b966 100644
--- a/src/styles/welcome.scss
+++ b/src/styles/welcome.scss
@@ -73,15 +73,8 @@
       width: 35px;
       height: 35px;
       margin: 0 10px 15px;
-      filter: grayscale(1)
-      opacity(0.5);
       transition: 0.5s filter, 0.5s opacity;
 
-      &:hover {
-        filter: grayscale(0);
-        opacity: (1);
-      }
-
       img {
         width: 35px;
       }
diff --git a/src/webview/ime.js b/src/webview/ime.js
deleted file mode 100644
index 43df6267c..000000000
--- a/src/webview/ime.js
+++ /dev/null
@@ -1,10 +0,0 @@
-const { ipcRenderer } = require('electron');
-const { claimDocumentFocus } = require('../helpers/webview-ime-focus-helpers');
-
-ipcRenderer.on('claim-document-focus', claimDocumentFocus);
-
-window.addEventListener('DOMContentLoaded', () => {
-  if (document.querySelector('[autofocus]')) {
-    ipcRenderer.sendToHost('autofocus');
-  }
-});
diff --git a/src/webview/lib/RecipeWebview.js b/src/webview/lib/RecipeWebview.js
index 048beea69..be29142af 100644
--- a/src/webview/lib/RecipeWebview.js
+++ b/src/webview/lib/RecipeWebview.js
@@ -40,8 +40,8 @@ class RecipeWebview {
       && this.countCache.indirect === indirect) return;
 
     const count = {
-      direct,
-      indirect,
+      direct: direct > 0 ? direct : 0,
+      indirect: indirect > 0 ? indirect : 0,
     };
 
     ipcRenderer.sendToHost('messages', count);
diff --git a/src/webview/notifications.js b/src/webview/notifications.js
index 4f602bfdb..2020bbdc6 100644
--- a/src/webview/notifications.js
+++ b/src/webview/notifications.js
@@ -16,7 +16,9 @@ class Notification {
     }));
 
     ipcRenderer.once(`notification-onclick:${this.notificationId}`, () => {
-      this.onclick();
+      if (typeof this.onclick === 'function') {
+        this.onclick();
+      }
     });
   }
 
diff --git a/src/webview/plugin.js b/src/webview/plugin.js
index c877132b1..d9e021e6d 100644
--- a/src/webview/plugin.js
+++ b/src/webview/plugin.js
@@ -1,13 +1,12 @@
 import { ipcRenderer } from 'electron';
+import { ContextMenuListener, ContextMenuBuilder } from 'electron-spellchecker';
 import path from 'path';
 
+import { isDevMode } from '../environment';
 import RecipeWebview from './lib/RecipeWebview';
 
-import Spellchecker from './spellchecker.js';
-import './notifications.js';
-import './ime.js';
-
-const spellchecker = new Spellchecker();
+import Spellchecker from './spellchecker';
+import './notifications';
 
 ipcRenderer.on('initializeRecipe', (e, data) => {
   const modulePath = path.join(data.recipe.path, 'webview.js');
@@ -21,20 +20,34 @@ ipcRenderer.on('initializeRecipe', (e, data) => {
   }
 });
 
+const spellchecker = new Spellchecker();
+spellchecker.initialize();
+
+const contextMenuBuilder = new ContextMenuBuilder(spellchecker.handler, null, isDevMode);
+
+new ContextMenuListener((info) => { // eslint-disable-line
+  contextMenuBuilder.showPopupMenu(info);
+});
+
 ipcRenderer.on('settings-update', (e, data) => {
-  if (data.enableSpellchecking) {
-    if (!spellchecker.isEnabled) {
-      spellchecker.enable();
-
-      // TODO: this does not work yet, needs more testing
-      // if (data.spellcheckingLanguage !== 'auto') {
-      //   console.log('set spellchecking language to', data.spellcheckingLanguage);
-      //   spellchecker.switchLanguage(data.spellcheckingLanguage);
-      // }
-    }
-  }
+  console.log('settings-update', data);
+  spellchecker.toggleSpellchecker(data.enableSpellchecking);
 });
 
+// initSpellche
+
 document.addEventListener('DOMContentLoaded', () => {
   ipcRenderer.sendToHost('hello');
 }, false);
+
+// Patching window.open
+const originalWindowOpen = window.open;
+
+window.open = (url, frameName, features) => {
+  // We need to differentiate if the link should be opened in a popup or in the systems default browser 
+  if (!frameName && !features) {
+    return ipcRenderer.sendToHost('new-window', url);
+  }
+
+  return originalWindowOpen(url, frameName, features);
+};
diff --git a/src/webview/spellchecker.js b/src/webview/spellchecker.js
index 5beb77e03..a504a4039 100644
--- a/src/webview/spellchecker.js
+++ b/src/webview/spellchecker.js
@@ -1,30 +1,63 @@
-import { SpellCheckHandler, ContextMenuListener, ContextMenuBuilder } from 'electron-spellchecker';
+import { SpellCheckHandler } from 'electron-spellchecker';
 
 import { isMac } from '../environment';
 
 export default class Spellchecker {
-  isEnabled = false;
-  spellchecker = null;
+  isInitialized = false;
+  handler = null;
+  initRetries = 0;
+  DOMCheckInterval = null;
+
+  get inputs() {
+    return document.querySelectorAll('input[type="text"], [contenteditable="true"], textarea');
+  }
+
+  initialize() {
+    this.handler = new SpellCheckHandler();
 
-  enable() {
-    this.spellchecker = new SpellCheckHandler();
     if (!isMac) {
-      this.spellchecker.attachToInput();
-      this.spellchecker.switchLanguage(navigator.language);
+      this.attach();
+    } else {
+      this.isInitialized = true;
+    }
+  }
+
+  attach() {
+    let initFailed = false;
+
+    if (this.initRetries > 3) {
+      console.error('Could not initialize spellchecker');
+      return;
     }
 
-    const contextMenuBuilder = new ContextMenuBuilder(this.spellchecker);
+    try {
+      this.handler.attachToInput();
+      this.handler.switchLanguage(navigator.language);
+    } catch (err) {
+      initFailed = true;
+      this.initRetries = +1;
+      setTimeout(() => { this.attach(); console.warn('Spellchecker init failed, trying again in 5s'); }, 5000);
+    }
 
-    new ContextMenuListener((info) => { // eslint-disable-line
-      contextMenuBuilder.showPopupMenu(info);
+    if (!initFailed) {
+      this.isInitialized = true;
+    }
+  }
+
+  toggleSpellchecker(enable = false) {
+    this.inputs.forEach((input) => {
+      input.setAttribute('spellcheck', enable);
     });
+
+    this.intervalHandler(enable);
   }
 
-  // TODO: this does not work yet, needs more testing
-  // switchLanguage(language) {
-  //   if (language !== 'auto') {
-  //     this.spellchecker.switchLanguage(language);
-  //   }
-  // }
+  intervalHandler(enable) {
+    clearInterval(this.DOMCheckInterval);
+
+    if (enable) {
+      this.DOMCheckInterval = setInterval(() => this.toggleSpellchecker(enable), 30000);
+    }
+  }
 }
 
diff --git a/yarn.lock b/yarn.lock
index c662ce63f..58befebf1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -39,7 +39,7 @@
     rimraf "^2.4.0"
     underscore "^1.6.0"
 
-"@paulcbetts/spellchecker@^4.0.5":
+"@paulcbetts/spellchecker@^4.0.6":
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/@paulcbetts/spellchecker/-/spellchecker-4.0.6.tgz#79ef1f9c19c5a3156921ccaa9ffdc3efbbee47e3"
   dependencies:
@@ -333,10 +333,18 @@ async@^0.9.0:
   version "0.9.2"
   resolved "https://registry.yarnpkg.com/async/-/async-0.9.2.tgz#aea74d5e61c1f899613bf64bda66d4c78f2fd17d"
 
+async@~0.1.22:
+  version "0.1.22"
+  resolved "https://registry.yarnpkg.com/async/-/async-0.1.22.tgz#0fc1aaa088a0e3ef0ebe2d8831bab0dcf8845061"
+
 asynckit@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
 
+attr-accept@^1.0.3:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/attr-accept/-/attr-accept-1.1.0.tgz#b5cd35227f163935a8f1de10ed3eba16941f6be6"
+
 "auto-launch@https://github.com/meetfranz/node-auto-launch.git":
   version "5.0.1"
   resolved "https://github.com/meetfranz/node-auto-launch.git#b90a0470467eb84435e6554ae9db1e2c6db79e61"
@@ -1303,6 +1311,10 @@ capture-stack-trace@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/capture-stack-trace/-/capture-stack-trace-1.0.0.tgz#4a6fa07399c26bba47f0b2496b4d0fb408c5550d"
 
+caseless@~0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.11.0.tgz#715b96ea9841593cc33067923f5ec60ebda4f7d7"
+
 caseless@~0.12.0:
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
@@ -1779,6 +1791,12 @@ dotenv@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-4.0.0.tgz#864ef1379aced55ce6f95debecdce179f7a0cd1d"
 
+du@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/du/-/du-0.1.0.tgz#f26e340a09c7bc5b6fd69af6dbadea60fa8c6f4d"
+  dependencies:
+    async "~0.1.22"
+
 duplexer2@0.0.2, duplexer2@~0.0.2:
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/duplexer2/-/duplexer2-0.0.2.tgz#c614dcf67e2fb14995a91711e5a617e8a60a31db"
@@ -2013,12 +2031,12 @@ electron-remote@^1.1.1:
     rxjs "^5.0.0-beta.12"
     xmlhttprequest "^1.8.0"
 
-electron-spellchecker@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/electron-spellchecker/-/electron-spellchecker-1.2.0.tgz#f6306afd4078244c1e6311370667d95b873fbcbb"
+electron-spellchecker@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/electron-spellchecker/-/electron-spellchecker-1.1.2.tgz#5fbe1e65d246b77e6e7433ee2387d9d26010f7a8"
   dependencies:
     "@paulcbetts/cld" "^2.4.6"
-    "@paulcbetts/spellchecker" "^4.0.5"
+    "@paulcbetts/spellchecker" "^4.0.6"
     bcp47 "^1.1.2"
     debug "^2.6.3"
     electron-remote "^1.1.1"
@@ -2724,6 +2742,16 @@ gaze@^1.0.0:
   dependencies:
     globule "^1.0.0"
 
+generate-function@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/generate-function/-/generate-function-2.0.0.tgz#6858fe7c0969b7d4e9093337647ac79f60dfbe74"
+
+generate-object-property@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/generate-object-property/-/generate-object-property-1.2.0.tgz#9c0e1c40308ce804f4783618b937fa88f99d50d0"
+  dependencies:
+    is-property "^1.0.0"
+
 get-caller-file@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.2.tgz#f702e63127e7e231c160a80c1554acb70d5047e5"
@@ -3118,6 +3146,15 @@ har-schema@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-1.0.5.tgz#d263135f43307c02c602afc8fe95970c0151369e"
 
+har-validator@~2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-2.0.6.tgz#cdcbc08188265ad119b6a5a7c8ab70eecfb5d27d"
+  dependencies:
+    chalk "^1.1.1"
+    commander "^2.9.0"
+    is-my-json-valid "^2.12.4"
+    pinkie-promise "^2.0.0"
+
 har-validator@~4.2.1:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-4.2.1.tgz#33481d0f1bbff600dd203d75812a6a5fba002e2a"
@@ -3433,6 +3470,15 @@ is-glob@^3.1.0:
   dependencies:
     is-extglob "^2.1.0"
 
+is-my-json-valid@^2.12.4:
+  version "2.17.1"
+  resolved "https://registry.yarnpkg.com/is-my-json-valid/-/is-my-json-valid-2.17.1.tgz#3da98914a70a22f0a8563ef1511a246c6fc55471"
+  dependencies:
+    generate-function "^2.0.0"
+    generate-object-property "^1.1.0"
+    jsonpointer "^4.0.0"
+    xtend "^4.0.0"
+
 is-npm@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-1.0.0.tgz#f2fb63a65e4905b406c86072765a1a4dc793b9f4"
@@ -3491,6 +3537,10 @@ is-promise@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.1.0.tgz#79a2a9ece7f096e80f36d2b2f3bc16c1ff4bf3fa"
 
+is-property@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-property/-/is-property-1.0.2.tgz#57fe1c4e48474edd65b09911f26b1cd4095dda84"
+
 is-redirect@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-redirect/-/is-redirect-1.0.0.tgz#1d03dded53bd8db0f30c26e4f95d36fc7c87dc24"
@@ -3686,6 +3736,10 @@ jsonify@~0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/jsonify/-/jsonify-0.0.0.tgz#2c74b6ee41d93ca51b7b5aaee8f503631d252a73"
 
+jsonpointer@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/jsonpointer/-/jsonpointer-4.0.1.tgz#4fd92cb34e0e9db3c89c8622ecf51f9b978c6cb9"
+
 jsonwebtoken@^7.4.1:
   version "7.4.3"
   resolved "https://registry.yarnpkg.com/jsonwebtoken/-/jsonwebtoken-7.4.3.tgz#77f5021de058b605a1783fa1283e99812e645638"
@@ -4227,9 +4281,9 @@ mksnapshot@^0.3.0:
     fs-extra "0.26.7"
     request "^2.79.0"
 
-mobx-react-form@1.24.0:
-  version "1.24.0"
-  resolved "https://registry.yarnpkg.com/mobx-react-form/-/mobx-react-form-1.24.0.tgz#bc9fbd652e65fb1f2b51917865d465fcaab7f0d9"
+mobx-react-form@^1.32.2:
+  version "1.32.2"
+  resolved "https://registry.yarnpkg.com/mobx-react-form/-/mobx-react-form-1.32.2.tgz#5610dd0e4fab006acf2daf1becbedecad182a5a0"
   dependencies:
     lodash "^4.16.2"
 
@@ -4354,7 +4408,7 @@ node-pre-gyp@^0.6.36:
     tar "^2.2.1"
     tar-pack "^3.4.0"
 
-node-sass@^4.2.0, node-sass@^4.5.3:
+node-sass@^4.2.0:
   version "4.5.3"
   resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.5.3.tgz#d09c9d1179641239d1b97ffc6231fdcec53e1568"
   dependencies:
@@ -4377,6 +4431,30 @@ node-sass@^4.2.0, node-sass@^4.5.3:
     sass-graph "^2.1.1"
     stdout-stream "^1.4.0"
 
+node-sass@^4.7.2:
+  version "4.7.2"
+  resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.7.2.tgz#9366778ba1469eb01438a9e8592f4262bcb6794e"
+  dependencies:
+    async-foreach "^0.1.3"
+    chalk "^1.1.1"
+    cross-spawn "^3.0.0"
+    gaze "^1.0.0"
+    get-stdin "^4.0.1"
+    glob "^7.0.3"
+    in-publish "^2.0.0"
+    lodash.assign "^4.2.0"
+    lodash.clonedeep "^4.3.2"
+    lodash.mergewith "^4.6.0"
+    meow "^3.7.0"
+    mkdirp "^0.5.1"
+    nan "^2.3.2"
+    node-gyp "^3.3.1"
+    npmlog "^4.0.0"
+    request "~2.79.0"
+    sass-graph "^2.2.4"
+    stdout-stream "^1.4.0"
+    "true-case-path" "^1.0.2"
+
 node-watch@^0.3.4:
   version "0.3.5"
   resolved "https://registry.yarnpkg.com/node-watch/-/node-watch-0.3.5.tgz#a07f253a4f538de9d4ca522dd7f1996eeec0d97e"
@@ -4831,6 +4909,10 @@ pretty-bytes@^1.0.2, pretty-bytes@^1.0.4:
     get-stdin "^4.0.1"
     meow "^3.1.0"
 
+pretty-bytes@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-4.0.2.tgz#b2bf82e7350d65c6c33aa95aaa5a4f6327f61cd9"
+
 pretty-hrtime@^1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
@@ -4907,6 +4989,10 @@ q@^1.1.2:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.0.tgz#dd01bac9d06d30e6f219aecb8253ee9ebdc308f1"
 
+qs@~6.3.0:
+  version "6.3.2"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.3.2.tgz#e75bd5f6e268122a2a0e0bda630b2550c166502c"
+
 qs@~6.4.0:
   version "6.4.0"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.0.tgz#13e26d28ad6b0ffaa91312cd3bf708ed351e7233"
@@ -4963,6 +5049,13 @@ react-dom@^15.4.1:
     object-assign "^4.1.0"
     prop-types "^15.5.10"
 
+react-dropzone@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-4.2.1.tgz#695e80bd0b065f1181e69f2d0f6d1d5cc72664c9"
+  dependencies:
+    attr-accept "^1.0.3"
+    prop-types "^15.5.7"
+
 react-electron-web-view@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/react-electron-web-view/-/react-electron-web-view-2.0.1.tgz#984b7bbbeb77e35bcca921dc50120fc8f2b0f27d"
@@ -5251,6 +5344,31 @@ request@2, request@^2.45.0, request@^2.54.0, request@^2.79.0, request@^2.81.0:
     tunnel-agent "^0.6.0"
     uuid "^3.0.0"
 
+request@~2.79.0:
+  version "2.79.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.79.0.tgz#4dfe5bf6be8b8cdc37fcf93e04b65577722710de"
+  dependencies:
+    aws-sign2 "~0.6.0"
+    aws4 "^1.2.1"
+    caseless "~0.11.0"
+    combined-stream "~1.0.5"
+    extend "~3.0.0"
+    forever-agent "~0.6.1"
+    form-data "~2.1.1"
+    har-validator "~2.0.6"
+    hawk "~3.1.3"
+    http-signature "~1.1.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.7"
+    oauth-sign "~0.8.1"
+    qs "~6.3.0"
+    stringstream "~0.0.4"
+    tough-cookie "~2.3.0"
+    tunnel-agent "~0.4.1"
+    uuid "^3.0.0"
+
 require-directory@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
@@ -5354,7 +5472,7 @@ sanitize-filename@^1.6.0, sanitize-filename@^1.6.1:
   dependencies:
     truncate-utf8-bytes "^1.0.0"
 
-sass-graph@^2.1.1:
+sass-graph@^2.1.1, sass-graph@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/sass-graph/-/sass-graph-2.2.4.tgz#13fbd63cd1caf0908b9fd93476ad43a51d1e0b49"
   dependencies:
@@ -5924,6 +6042,12 @@ trim-right@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/trim-right/-/trim-right-1.0.1.tgz#cb2e1203067e0c8de1f614094b9fe45704ea6003"
 
+"true-case-path@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/true-case-path/-/true-case-path-1.0.2.tgz#7ec91130924766c7f573be3020c34f8fdfd00d62"
+  dependencies:
+    glob "^6.0.4"
+
 truncate-utf8-bytes@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/truncate-utf8-bytes/-/truncate-utf8-bytes-1.0.2.tgz#405923909592d56f78a5818434b0b78489ca5f2b"
@@ -5940,6 +6064,10 @@ tunnel-agent@^0.6.0:
   dependencies:
     safe-buffer "^5.0.1"
 
+tunnel-agent@~0.4.1:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.4.3.tgz#6373db76909fe570e08d73583365ed828a74eeeb"
+
 tweetnacl@^0.14.3, tweetnacl@~0.14.0:
   version "0.14.5"
   resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
@@ -6299,7 +6427,7 @@ xmlhttprequest@^1.8.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/xmlhttprequest/-/xmlhttprequest-1.8.0.tgz#67fe075c5c24fef39f9d65f5f7b7fe75171968fc"
 
-"xtend@>=4.0.0 <4.1.0-0", xtend@^4.0.1, xtend@~4.0.0, xtend@~4.0.1:
+"xtend@>=4.0.0 <4.1.0-0", xtend@^4.0.0, xtend@^4.0.1, xtend@~4.0.0, xtend@~4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"