211 files changed, 12987 insertions, 0 deletions

diff --git a/src/I18n.js b/src/I18n.js
new file mode 100644
index 000000000..ae3ba2fa9
--- /dev/null
+++ b/src/I18n.js
@@ -0,0 +1,28 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { inject, observer } from 'mobx-react';
+import { IntlProvider } from 'react-intl';
+
+import { oneOrManyChildElements } from './prop-types';
+import translations from './i18n/translations';
+import UserStore from './stores/UserStore';
+
+@inject('stores') @observer
+export default class I18N extends Component {
+  render() {
+    const { stores, children } = this.props;
+    const { locale } = stores.app;
+    return (
+      <IntlProvider {...{ locale, key: locale, messages: translations[locale] }}>
+        {children}
+      </IntlProvider>
+    );
+  }
+}
+
+I18N.wrappedComponent.propTypes = {
+  stores: PropTypes.shape({
+    user: PropTypes.instanceOf(UserStore).isRequired,
+  }).isRequired,
+  children: oneOrManyChildElements.isRequired,
+};
diff --git a/src/actions/app.js b/src/actions/app.js
new file mode 100644
index 000000000..5db4b739e
--- /dev/null
+++ b/src/actions/app.js
@@ -0,0 +1,23 @@
+import PropTypes from 'prop-types';
+
+export default {
+  setBadge: {
+    unreadDirectMessageCount: PropTypes.number.isRequired,
+    unreadIndirectMessageCount: PropTypes.number,
+  },
+  notify: {
+    title: PropTypes.string.isRequired,
+    options: PropTypes.object.isRequired,
+    serviceId: PropTypes.string,
+  },
+  launchOnStartup: {
+    enable: PropTypes.bool.isRequired,
+  },
+  openExternalUrl: {
+    url: PropTypes.string.isRequired,
+  },
+  checkForUpdates: {},
+  resetUpdateStatus: {},
+  installUpdate: {},
+  healthCheck: {},
+};
diff --git a/src/actions/index.js b/src/actions/index.js
new file mode 100644
index 000000000..59acabb0b
--- /dev/null
+++ b/src/actions/index.js
@@ -0,0 +1,28 @@
+import PropTypes from 'prop-types';
+
+import defineActions from './lib/actions';
+import service from './service';
+import recipe from './recipe';
+import recipePreview from './recipePreview';
+import ui from './ui';
+import app from './app';
+import user from './user';
+import payment from './payment';
+import news from './news';
+import settings from './settings';
+import requests from './requests';
+
+const actions = Object.assign({}, {
+  service,
+  recipe,
+  recipePreview,
+  ui,
+  app,
+  user,
+  payment,
+  news,
+  settings,
+  requests,
+});
+
+export default defineActions(actions, PropTypes.checkPropTypes);
diff --git a/src/actions/lib/actions.js b/src/actions/lib/actions.js
new file mode 100644
index 000000000..499018d70
--- /dev/null
+++ b/src/actions/lib/actions.js
@@ -0,0 +1,18 @@
+export default (definitions, validate) => {
+  const newActions = {};
+  Object.keys(definitions).forEach((scopeName) => {
+    newActions[scopeName] = {};
+    Object.keys(definitions[scopeName]).forEach((actionName) => {
+      const action = (params) => {
+        const schema = definitions[scopeName][actionName];
+        validate(schema, params, actionName);
+        action.notify(params);
+      };
+      newActions[scopeName][actionName] = action;
+      action.listeners = [];
+      action.listen = listener => action.listeners.push(listener);
+      action.notify = params => action.listeners.forEach(listener => listener(params));
+    });
+  });
+  return newActions;
+};
diff --git a/src/actions/news.js b/src/actions/news.js
new file mode 100644
index 000000000..db106e84f
--- /dev/null
+++ b/src/actions/news.js
@@ -0,0 +1,7 @@
+import PropTypes from 'prop-types';
+
+export default {
+  hide: {
+    newsId: PropTypes.string.isRequired,
+  },
+};
diff --git a/src/actions/payment.js b/src/actions/payment.js
new file mode 100644
index 000000000..2aaefc025
--- /dev/null
+++ b/src/actions/payment.js
@@ -0,0 +1,8 @@
+import PropTypes from 'prop-types';
+
+export default {
+  createHostedPage: {
+    planId: PropTypes.string.isRequired,
+  },
+  createDashboardUrl: {},
+};
diff --git a/src/actions/recipe.js b/src/actions/recipe.js
new file mode 100644
index 000000000..29b0a151f
--- /dev/null
+++ b/src/actions/recipe.js
@@ -0,0 +1,9 @@
+import PropTypes from 'prop-types';
+
+export default {
+  install: {
+    recipeId: PropTypes.string.isRequired,
+    update: PropTypes.bool,
+  },
+  update: {},
+};
diff --git a/src/actions/recipePreview.js b/src/actions/recipePreview.js
new file mode 100644
index 000000000..36de3d844
--- /dev/null
+++ b/src/actions/recipePreview.js
@@ -0,0 +1,7 @@
+import PropTypes from 'prop-types';
+
+export default {
+  search: {
+    needle: PropTypes.string.isRequired,
+  },
+};
diff --git a/src/actions/requests.js b/src/actions/requests.js
new file mode 100644
index 000000000..89296e7ec
--- /dev/null
+++ b/src/actions/requests.js
@@ -0,0 +1,3 @@
+export default {
+  retryRequiredRequests: {},
+};
diff --git a/src/actions/service.js b/src/actions/service.js
new file mode 100644
index 000000000..7f429ca32
--- /dev/null
+++ b/src/actions/service.js
@@ -0,0 +1,75 @@
+import PropTypes from 'prop-types';
+
+export default {
+  setActive: {
+    serviceId: PropTypes.string.isRequired,
+  },
+  showAddServiceInterface: {
+    recipeId: PropTypes.string.isRequired,
+  },
+  createService: {
+    recipeId: PropTypes.string.isRequired,
+    serviceData: PropTypes.object.isRequired,
+  },
+  createFromLegacyService: {
+    data: PropTypes.object.isRequired,
+  },
+  updateService: {
+    serviceId: PropTypes.string.isRequired,
+    serviceData: PropTypes.object.isRequired,
+    redirect: PropTypes.bool,
+  },
+  deleteService: {
+    serviceId: PropTypes.string.isRequired,
+    redirect: PropTypes.string,
+  },
+  setUnreadMessageCount: {
+    serviceId: PropTypes.string.isRequired,
+    count: PropTypes.object.isRequired,
+  },
+  setWebviewReference: {
+    serviceId: PropTypes.string.isRequired,
+    webview: PropTypes.object.isRequired,
+  },
+  focusService: {
+    serviceId: PropTypes.string.isRequired,
+  },
+  focusActiveService: {},
+  toggleService: {
+    serviceId: PropTypes.string.isRequired,
+  },
+  handleIPCMessage: {
+    serviceId: PropTypes.string.isRequired,
+    channel: PropTypes.string.isRequired,
+    args: PropTypes.array.isRequired,
+  },
+  sendIPCMessage: {
+    serviceId: PropTypes.string.isRequired,
+    channel: PropTypes.string.isRequired,
+    args: PropTypes.object.isRequired,
+  },
+  openWindow: {
+    event: PropTypes.object.isRequired,
+  },
+  reload: {
+    serviceId: PropTypes.string.isRequired,
+  },
+  reloadActive: {},
+  reloadAll: {},
+  reloadUpdatedServices: {},
+  filter: {
+    needle: PropTypes.string.isRequired,
+  },
+  resetFilter: {},
+  reorder: {
+    oldIndex: PropTypes.number.isRequired,
+    newIndex: PropTypes.number.isRequired,
+  },
+  toggleNotifications: {
+    serviceId: PropTypes.string.isRequired,
+  },
+  openDevTools: {
+    serviceId: PropTypes.string.isRequired,
+  },
+  openDevToolsForActiveService: {},
+};
diff --git a/src/actions/settings.js b/src/actions/settings.js
new file mode 100644
index 000000000..3d53cd674
--- /dev/null
+++ b/src/actions/settings.js
@@ -0,0 +1,10 @@
+import PropTypes from 'prop-types';
+
+export default {
+  update: {
+    settings: PropTypes.object.isRequired,
+  },
+  remove: {
+    key: PropTypes.string.isRequired,
+  },
+};
diff --git a/src/actions/ui.js b/src/actions/ui.js
new file mode 100644
index 000000000..b913b430b
--- /dev/null
+++ b/src/actions/ui.js
@@ -0,0 +1,11 @@
+import PropTypes from 'prop-types';
+
+export default {
+  openSettings: {
+    path: PropTypes.string,
+  },
+  closeSettings: {},
+  toggleServiceUpdatedInfoBar: {
+    visible: PropTypes.bool,
+  },
+};
diff --git a/src/actions/user.js b/src/actions/user.js
new file mode 100644
index 000000000..fe32b8a05
--- /dev/null
+++ b/src/actions/user.js
@@ -0,0 +1,30 @@
+import PropTypes from 'prop-types';
+
+export default {
+  login: {
+    email: PropTypes.string.isRequired,
+    password: PropTypes.string.isRequired,
+  },
+  logout: {},
+  signup: {
+    firstname: PropTypes.string.isRequired,
+    lastname: PropTypes.string.isRequired,
+    email: PropTypes.string.isRequired,
+    password: PropTypes.string.isRequired,
+    accountType: PropTypes.string.isRequired,
+    company: PropTypes.string,
+  },
+  retrievePassword: {
+    email: PropTypes.string.isRequired,
+  },
+  invite: {
+    invites: PropTypes.array.isRequired,
+  },
+  update: {
+    userData: PropTypes.object.isRequired,
+  },
+  resetStatus: {},
+  importLegacyServices: PropTypes.arrayOf(PropTypes.shape({
+    recipe: PropTypes.string.isRequired,
+  })).isRequired,
+};
diff --git a/src/api/AppApi.js b/src/api/AppApi.js
new file mode 100644
index 000000000..411c187f4
--- /dev/null
+++ b/src/api/AppApi.js
@@ -0,0 +1,9 @@
+export default class AppApi {
+  constructor(server) {
+    this.server = server;
+  }
+
+  health() {
+    return this.server.healthCheck();
+  }
+}
diff --git a/src/api/LocalApi.js b/src/api/LocalApi.js
new file mode 100644
index 000000000..6f2b049d6
--- /dev/null
+++ b/src/api/LocalApi.js
@@ -0,0 +1,18 @@
+export default class LocalApi {
+  constructor(server, local) {
+    this.server = server;
+    this.local = local;
+  }
+
+  getSettings() {
+    return this.local.getAppSettings();
+  }
+
+  updateSettings(data) {
+    return this.local.updateAppSettings(data);
+  }
+
+  removeKey(key) {
+    return this.local.removeKey(key);
+  }
+}
diff --git a/src/api/NewsApi.js b/src/api/NewsApi.js
new file mode 100644
index 000000000..294957511
--- /dev/null
+++ b/src/api/NewsApi.js
@@ -0,0 +1,14 @@
+export default class NewsApi {
+  constructor(server, local) {
+    this.server = server;
+    this.local = local;
+  }
+
+  latest() {
+    return this.server.getLatestNews();
+  }
+
+  hide(id) {
+    return this.server.hideNews(id);
+  }
+}
diff --git a/src/api/PaymentApi.js b/src/api/PaymentApi.js
new file mode 100644
index 000000000..3f6bb442e
--- /dev/null
+++ b/src/api/PaymentApi.js
@@ -0,0 +1,22 @@
+export default class PaymentApi {
+  constructor(server, local) {
+    this.server = server;
+    this.local = local;
+  }
+
+  plans() {
+    return this.server.getPlans();
+  }
+
+  getHostedPage(planId) {
+    return this.server.getHostedPage(planId);
+  }
+
+  getDashboardUrl() {
+    return this.server.getPaymentDashboardUrl();
+  }
+
+  getOrders() {
+    return this.server.getSubscriptionOrders();
+  }
+}
diff --git a/src/api/RecipePreviewsApi.js b/src/api/RecipePreviewsApi.js
new file mode 100644
index 000000000..d9c675d76
--- /dev/null
+++ b/src/api/RecipePreviewsApi.js
@@ -0,0 +1,17 @@
+export default class ServicesApi {
+  constructor(server) {
+    this.server = server;
+  }
+
+  all() {
+    return this.server.getRecipePreviews();
+  }
+
+  featured() {
+    return this.server.getFeaturedRecipePreviews();
+  }
+
+  search(needle) {
+    return this.server.searchRecipePreviews(needle);
+  }
+}
diff --git a/src/api/RecipesApi.js b/src/api/RecipesApi.js
new file mode 100644
index 000000000..0573dacaf
--- /dev/null
+++ b/src/api/RecipesApi.js
@@ -0,0 +1,17 @@
+export default class ServicesApi {
+  constructor(server) {
+    this.server = server;
+  }
+
+  all() {
+    return this.server.getInstalledRecipes();
+  }
+
+  install(recipeId) {
+    return this.server.getRecipePackage(recipeId);
+  }
+
+  update(recipes) {
+    return this.server.getRecipeUpdates(recipes);
+  }
+}
diff --git a/src/api/ServicesApi.js b/src/api/ServicesApi.js
new file mode 100644
index 000000000..3cb40ba0d
--- /dev/null
+++ b/src/api/ServicesApi.js
@@ -0,0 +1,33 @@
+export default class ServicesApi {
+  constructor(server) {
+    this.server = server;
+  }
+
+  all() {
+    return this.server.getServices();
+  }
+
+  // one(customerId) {
+  //   return this.server.getCustomer(customerId);
+  // }
+  //
+  // search(needle) {
+  //   return this.server.searchCustomers(needle);
+  // }
+  //
+  create(recipeId, data) {
+    return this.server.createService(recipeId, data);
+  }
+
+  delete(serviceId) {
+    return this.server.deleteService(serviceId);
+  }
+
+  update(serviceId, data) {
+    return this.server.updateService(serviceId, data);
+  }
+
+  reorder(data) {
+    return this.server.reorderService(data);
+  }
+}
diff --git a/src/api/UserApi.js b/src/api/UserApi.js
new file mode 100644
index 000000000..e8fd75bed
--- /dev/null
+++ b/src/api/UserApi.js
@@ -0,0 +1,49 @@
+import { hash } from '../helpers/password-helpers';
+
+export default class UserApi {
+  constructor(server, local) {
+    this.server = server;
+    this.local = local;
+  }
+
+  login(email, password) {
+    return this.server.login(email, hash(password));
+  }
+
+  logout() {
+    return this;
+  }
+
+  signup(data) {
+    Object.assign(data, {
+      password: hash(data.password),
+    });
+    return this.server.signup(data);
+  }
+
+  password(email) {
+    return this.server.retrievePassword(email);
+  }
+
+  invite(data) {
+    return this.server.inviteUser(data);
+  }
+
+  getInfo() {
+    return this.server.userInfo();
+  }
+
+  updateInfo(data) {
+    const userData = data;
+    if (userData.oldPassword && userData.newPassword) {
+      userData.oldPassword = hash(userData.oldPassword);
+      userData.newPassword = hash(userData.newPassword);
+    }
+
+    return this.server.updateUserInfo(userData);
+  }
+
+  getLegacyServices() {
+    return this.server.getLegacyServices();
+  }
+}
diff --git a/src/api/index.js b/src/api/index.js
new file mode 100644
index 000000000..3fc18c4b5
--- /dev/null
+++ b/src/api/index.js
@@ -0,0 +1,19 @@
+import AppApi from './AppApi';
+import ServicesApi from './ServicesApi';
+import RecipePreviewsApi from './RecipePreviewsApi';
+import RecipesApi from './RecipesApi';
+import UserApi from './UserApi';
+import LocalApi from './LocalApi';
+import PaymentApi from './PaymentApi';
+import NewsApi from './NewsApi';
+
+export default (server, local) => ({
+  app: new AppApi(server, local),
+  services: new ServicesApi(server, local),
+  recipePreviews: new RecipePreviewsApi(server, local),
+  recipes: new RecipesApi(server, local),
+  user: new UserApi(server, local),
+  local: new LocalApi(server, local),
+  payment: new PaymentApi(server, local),
+  news: new NewsApi(server, local),
+});
diff --git a/src/api/server/LocalApi.js b/src/api/server/LocalApi.js
new file mode 100644
index 000000000..79ac6e12f
--- /dev/null
+++ b/src/api/server/LocalApi.js
@@ -0,0 +1,33 @@
+export default class LocalApi {
+  // App
+  async updateAppSettings(data) {
+    const currentSettings = await this.getAppSettings();
+    const settings = Object.assign(currentSettings, data);
+
+    localStorage.setItem('app', JSON.stringify(settings));
+    console.debug('LocalApi::updateAppSettings resolves', settings);
+
+    return settings;
+  }
+
+  async getAppSettings() {
+    const settingsString = localStorage.getItem('app');
+    try {
+      const settings = JSON.parse(settingsString) || {};
+      console.debug('LocalApi::getAppSettings resolves', settings);
+
+      return settings;
+    } catch (err) {
+      return {};
+    }
+  }
+
+  async removeKey(key) {
+    const settings = await this.getAppSettings();
+
+    if (Object.hasOwnProperty.call(settings, key)) {
+      delete settings[key];
+      localStorage.setItem('app', JSON.stringify(settings));
+    }
+  }
+}
diff --git a/src/api/server/ServerApi.js b/src/api/server/ServerApi.js
new file mode 100644
index 000000000..b369796e8
--- /dev/null
+++ b/src/api/server/ServerApi.js
@@ -0,0 +1,574 @@
+import os from 'os';
+import path from 'path';
+import targz from 'tar.gz';
+import fs from 'fs-extra';
+import { remote } from 'electron';
+
+import ServiceModel from '../../models/Service';
+import RecipePreviewModel from '../../models/RecipePreview';
+import RecipeModel from '../../models/Recipe';
+import PlanModel from '../../models/Plan';
+import NewsModel from '../../models/News';
+import UserModel from '../../models/User';
+import OrderModel from '../../models/Order';
+
+import { API } from '../../environment';
+
+import {
+  getRecipeDirectory,
+  getDevRecipeDirectory,
+  loadRecipeConfig,
+} from '../../helpers/recipe-helpers';
+
+module.paths.unshift(
+  getDevRecipeDirectory(),
+  getRecipeDirectory(),
+);
+
+const { app } = remote;
+const fetch = remote.require('electron-fetch');
+
+const SERVER_URL = API;
+const API_VERSION = 'v1';
+
+export default class ServerApi {
+  recipePreviews = [];
+  recipes = [];
+
+  // User
+  async login(email, passwordHash) {
+    const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/auth/login`, this._prepareAuthRequest({
+      method: 'POST',
+      headers: {
+        Authorization: `Basic ${window.btoa(`${email}:${passwordHash}`)}`,
+      },
+    }, false));
+    if (!request.ok) {
+      throw request;
+    }
+    const u = await request.json();
+
+    console.debug('ServerApi::login resolves', u);
+    return u.token;
+  }
+
+  async signup(data) {
+    const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/auth/signup`, this._prepareAuthRequest({
+      method: 'POST',
+      body: JSON.stringify(data),
+    }, false));
+    if (!request.ok) {
+      throw request;
+    }
+    const u = await request.json();
+
+    console.debug('ServerApi::signup resolves', u);
+    return u.token;
+  }
+
+  async inviteUser(data) {
+    const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/invite`, this._prepareAuthRequest({
+      method: 'POST',
+      body: JSON.stringify(data),
+    }));
+    if (!request.ok) {
+      throw request;
+    }
+
+    console.debug('ServerApi::inviteUser');
+    return true;
+  }
+
+  async retrievePassword(email) {
+    const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/auth/password`, this._prepareAuthRequest({
+      method: 'POST',
+      body: JSON.stringify({
+        email,
+      }),
+    }, false));
+    if (!request.ok) {
+      throw request;
+    }
+    const r = await request.json();
+
+    console.debug('ServerApi::retrievePassword');
+    return r;
+  }
+
+  async userInfo() {
+    const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/me`, this._prepareAuthRequest({
+      method: 'GET',
+    }));
+    if (!request.ok) {
+      throw request;
+    }
+    const data = await request.json();
+
+    const user = new UserModel(data);
+    console.debug('ServerApi::userInfo resolves', user);
+
+    return user;
+  }
+
+  async updateUserInfo(data) {
+    const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/me`, this._prepareAuthRequest({
+      method: 'PUT',
+      body: JSON.stringify(data),
+    }));
+    if (!request.ok) {
+      throw request;
+    }
+    const updatedData = await request.json();
+
+    const user = Object.assign(updatedData, { data: new UserModel(updatedData.data) });
+    console.debug('ServerApi::updateUserInfo resolves', user);
+    return user;
+  }
+
+  // Services
+  async getServices() {
+    const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/me/services`, this._prepareAuthRequest({
+      method: 'GET',
+    }));
+    if (!request.ok) {
+      throw request;
+    }
+    const data = await request.json();
+
+    let services = await this._mapServiceModels(data);
+    services = services.filter(service => service !== null);
+    console.debug('ServerApi::getServices resolves', services);
+    return services;
+  }
+
+  async createService(recipeId, data) {
+    const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/service`, this._prepareAuthRequest({
+      method: 'POST',
+      body: JSON.stringify(Object.assign({
+        recipeId,
+      }, 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::createService resolves', service);
+    return service;
+  }
+
+  async updateService(recipeId, data) {
+    const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/service/${recipeId}`, 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 reorderService(data) {
+    const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/service/reorder`, this._prepareAuthRequest({
+      method: 'PUT',
+      body: JSON.stringify(data),
+    }));
+    if (!request.ok) {
+      throw request;
+    }
+    const serviceData = await request.json();
+    console.debug('ServerApi::reorderService resolves', serviceData);
+    return serviceData;
+  }
+
+  async deleteService(id) {
+    const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/service/${id}`, this._prepareAuthRequest({
+      method: 'DELETE',
+    }));
+    if (!request.ok) {
+      throw request;
+    }
+    const data = await request.json();
+
+    console.debug('ServerApi::deleteService resolves', data);
+    return data;
+  }
+
+  // Recipes
+  async getInstalledRecipes() {
+    const recipesDirectory = getRecipeDirectory();
+    const paths = fs.readdirSync(recipesDirectory)
+      .filter(file => (
+        fs.statSync(path.join(recipesDirectory, file)).isDirectory()
+        && file !== 'temp'
+        && file !== 'dev'
+      ));
+
+    this.recipes = paths.map((id) => {
+      // eslint-disable-next-line
+      const Recipe = require(id)(RecipeModel);
+      return new Recipe(loadRecipeConfig(id));
+    }).filter(recipe => recipe.id);
+
+    this.recipes = this.recipes.concat(this._getDevRecipes());
+
+    console.debug('StubServerApi::getInstalledRecipes resolves', this.recipes);
+    return this.recipes;
+  }
+
+  async getRecipeUpdates(recipeVersions) {
+    const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/recipes/update`, this._prepareAuthRequest({
+      method: 'POST',
+      body: JSON.stringify(recipeVersions),
+    }));
+    if (!request.ok) {
+      throw request;
+    }
+    const recipes = await request.json();
+    console.debug('ServerApi::getRecipeUpdates resolves', recipes);
+    return recipes;
+  }
+
+  // Recipes Previews
+  async getRecipePreviews() {
+    const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/recipes`, this._prepareAuthRequest({
+      method: 'GET',
+    }));
+    if (!request.ok) {
+      throw request;
+    }
+    const data = await request.json();
+
+    const recipePreviews = this._mapRecipePreviewModel(data);
+    console.debug('ServerApi::getRecipes resolves', recipePreviews);
+
+    return recipePreviews;
+  }
+
+  async getFeaturedRecipePreviews() {
+    const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/recipes/popular`, this._prepareAuthRequest({
+      method: 'GET',
+    }));
+    if (!request.ok) {
+      throw request;
+    }
+    const data = await request.json();
+
+    // data = this._addLocalRecipesToPreviews(data);
+
+    const recipePreviews = this._mapRecipePreviewModel(data);
+    console.debug('ServerApi::getFeaturedRecipes resolves', recipePreviews);
+    return recipePreviews;
+  }
+
+  async searchRecipePreviews(needle) {
+    const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/recipes/search?needle=${needle}`, this._prepareAuthRequest({
+      method: 'GET',
+    }));
+    if (!request.ok) {
+      throw request;
+    }
+    const data = await request.json();
+
+    const recipePreviews = this._mapRecipePreviewModel(data);
+    console.debug('ServerApi::searchRecipePreviews resolves', recipePreviews);
+    return recipePreviews;
+  }
+
+  async getRecipePackage(recipeId) {
+    try {
+      const recipesDirectory = path.join(app.getPath('userData'), 'recipes');
+
+      const recipeTempDirectory = path.join(recipesDirectory, 'temp', recipeId);
+      const archivePath = path.join(recipeTempDirectory, 'recipe.tar.gz');
+      const packageUrl = `${SERVER_URL}/${API_VERSION}/recipes/download/${recipeId}`;
+
+      fs.ensureDirSync(recipeTempDirectory);
+      const res = await fetch(packageUrl);
+      const buffer = await res.buffer();
+      fs.writeFileSync(archivePath, buffer);
+
+      await targz().extract(archivePath, recipeTempDirectory);
+
+      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'));
+
+      return id;
+    } catch (err) {
+      console.error(err);
+
+      return false;
+    }
+  }
+
+  // Payment
+  async getPlans() {
+    const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/payment/plans`, this._prepareAuthRequest({
+      method: 'GET',
+    }));
+    if (!request.ok) {
+      throw request;
+    }
+    const data = await request.json();
+
+    const plan = new PlanModel(data);
+    console.debug('ServerApi::getPlans resolves', plan);
+    return plan;
+  }
+
+  async getHostedPage(planId) {
+    const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/payment/init`, this._prepareAuthRequest({
+      method: 'POST',
+      body: JSON.stringify({
+        planId,
+      }),
+    }));
+    if (!request.ok) {
+      throw request;
+    }
+    const data = await request.json();
+
+    console.debug('ServerApi::getHostedPage resolves', data);
+    return data;
+  }
+
+  async getPaymentDashboardUrl() {
+    const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/me/billing`, this._prepareAuthRequest({
+      method: 'GET',
+    }));
+    if (!request.ok) {
+      throw request;
+    }
+    const data = await request.json();
+
+    console.debug('ServerApi::getPaymentDashboardUrl resolves', data);
+    return data;
+  }
+
+  async getSubscriptionOrders() {
+    const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/me/subscription`, this._prepareAuthRequest({
+      method: 'GET',
+    }));
+    if (!request.ok) {
+      throw request;
+    }
+    const data = await request.json();
+    const orders = this._mapOrderModels(data);
+    console.debug('ServerApi::getSubscriptionOrders resolves', orders);
+    return orders;
+  }
+
+  // News
+  async getLatestNews() {
+    // eslint-disable-next-line
+    const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/news?platform=${os.platform()}&arch=${os.arch()}version=${app.getVersion()}`,
+      this._prepareAuthRequest({
+        method: 'GET',
+      }));
+
+    if (!request.ok) {
+      throw request;
+    }
+    const data = await request.json();
+    const news = this._mapNewsModels(data);
+    console.debug('ServerApi::getLatestNews resolves', news);
+    return news;
+  }
+
+  async hideNews(id) {
+    const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/news/${id}/read`,
+      this._prepareAuthRequest({
+        method: 'GET',
+      }));
+
+    if (!request.ok) {
+      throw request;
+    }
+
+    console.debug('ServerApi::hideNews resolves', id);
+  }
+
+  // Health Check
+  async healthCheck() {
+    const request = await window.fetch(`${SERVER_URL}/health`, this._prepareAuthRequest({
+      method: 'GET',
+    }, false));
+    if (!request.ok) {
+      throw request;
+    }
+    console.debug('ServerApi::healthCheck resolves');
+  }
+
+  async getLegacyServices() {
+    const file = path.join(app.getPath('userData'), 'settings', 'services.json');
+
+    try {
+      const config = fs.readJsonSync(file);
+
+      if (Object.prototype.hasOwnProperty.call(config, 'services')) {
+        const services = await Promise.all(config.services.map(async (s) => {
+          const service = s;
+          const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/recipes/${s.service}`,
+            this._prepareAuthRequest({
+              method: 'GET',
+            }),
+          );
+
+          if (request.status === 200) {
+            const data = await request.json();
+            service.recipe = new RecipePreviewModel(data);
+          }
+
+          return service;
+        }));
+
+        console.debug('ServerApi::getLegacyServices resolves', services);
+        return services;
+      }
+    } catch (err) {
+      throw (new Error('ServerApi::getLegacyServices no config found'));
+    }
+
+    return [];
+  }
+
+  // Helper
+  async _mapServiceModels(services) {
+    return Promise.all(services
+      .map(async service => await this._prepareServiceModel(service)) // eslint-disable-line
+    );
+  }
+
+  async _prepareServiceModel(service) {
+    let recipe;
+    try {
+      recipe = this.recipes.find(r => r.id === service.recipeId);
+
+      if (!recipe) {
+        console.warn(`Recipe '${service.recipeId}' not installed, trying to fetch from server`);
+
+        await this.getRecipePackage(service.recipeId);
+
+        console.debug('Rerun ServerAPI::getInstalledRecipes');
+        await this.getInstalledRecipes();
+
+        recipe = this.recipes.find(r => r.id === service.recipeId);
+
+        if (!recipe) {
+          console.warn(`Could not load recipe ${service.recipeId}`);
+          return null;
+        }
+      }
+
+      return new ServiceModel(service, recipe);
+    } catch (e) {
+      console.debug(e);
+      return null;
+    }
+  }
+
+  _mapRecipePreviewModel(recipes) {
+    return recipes.map((recipe) => {
+      try {
+        return new RecipePreviewModel(recipe);
+      } catch (e) {
+        console.error(e);
+        return null;
+      }
+    }).filter(recipe => recipe !== null);
+  }
+
+  _mapNewsModels(news) {
+    return news.map((newsItem) => {
+      try {
+        return new NewsModel(newsItem);
+      } catch (e) {
+        console.error(e);
+        return null;
+      }
+    }).filter(newsItem => newsItem !== null);
+  }
+
+  _mapOrderModels(orders) {
+    return orders.map((orderItem) => {
+      try {
+        return new OrderModel(orderItem);
+      } catch (e) {
+        console.error(e);
+        return null;
+      }
+    }).filter(orderItem => orderItem !== null);
+  }
+
+  _prepareAuthRequest(options, auth = true) {
+    const request = Object.assign(options, {
+      mode: 'cors',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-Franz-Source': 'desktop',
+        'X-Franz-Version': app.getVersion(),
+        'X-Franz-platform': process.platform,
+        'X-Franz-Timezone-Offset': new Date().getTimezoneOffset(),
+        'X-Franz-System-Locale': app.getLocale(),
+      },
+    });
+
+    // const headers = new window.Headers();
+    // headers.append('foo', 'bar');
+    // console.log(headers, request.headers);
+    //
+    //
+    // // request.headers.map((value, header) => headers.append(header, value));
+    // Object.keys(request.headers).map((key) => {
+    //   console.log(key);
+    //   return headers.append(key, request.headers[key]);
+    // });
+    // request.headers = headers;
+
+    // console.log(request);
+
+    if (auth) {
+      request.headers.Authorization = `Bearer ${localStorage.getItem('authToken')}`;
+    }
+
+    return request;
+  }
+
+  _getDevRecipes() {
+    const recipesDirectory = getDevRecipeDirectory();
+    try {
+      const paths = fs.readdirSync(recipesDirectory)
+        .filter(file => fs.statSync(path.join(recipesDirectory, file)).isDirectory() && file !== 'temp');
+
+      const recipes = paths.map((id) => {
+        // eslint-disable-next-line
+        const Recipe = require(id)(RecipeModel);
+        return new Recipe(loadRecipeConfig(id));
+      }).filter(recipe => recipe.id).map((data) => {
+        const recipe = data;
+
+        recipe.icons = {
+          svg: `${recipe.path}/icon.svg`,
+          png: `${recipe.path}/icon.png`,
+        };
+        recipe.local = true;
+
+        return data;
+      });
+
+      return recipes;
+    } catch (err) {
+      console.debug('Folder `recipe/dev` does not exist');
+      return false;
+    }
+  }
+}
diff --git a/src/app.js b/src/app.js
new file mode 100644
index 000000000..b539ea494
--- /dev/null
+++ b/src/app.js
@@ -0,0 +1,103 @@
+import { webFrame } from 'electron';
+
+import React from 'react';
+import { render } from 'react-dom';
+import { Provider } from 'mobx-react';
+import { syncHistoryWithStore, RouterStore } from 'mobx-react-router';
+import { Router, Route, hashHistory, IndexRedirect } from 'react-router';
+
+import 'babel-polyfill';
+import smoothScroll from 'smoothscroll-polyfill';
+
+import ServerApi from './api/server/ServerApi';
+import LocalApi from './api/server/LocalApi';
+import storeFactory from './stores';
+import apiFactory from './api';
+import actions from './actions';
+import MenuFactory from './lib/Menu';
+import TouchBarFactory from './lib/TouchBar';
+import * as analytics from './lib/analytics';
+
+import I18N from './I18n';
+import AppLayoutContainer from './containers/layout/AppLayoutContainer';
+import SettingsWindow from './containers/settings/SettingsWindow';
+import RecipesScreen from './containers/settings/RecipesScreen';
+import ServicesScreen from './containers/settings/ServicesScreen';
+import EditServiceScreen from './containers/settings/EditServiceScreen';
+import AccountScreen from './containers/settings/AccountScreen';
+import EditUserScreen from './containers/settings/EditUserScreen';
+import EditSettingsScreen from './containers/settings/EditSettingsScreen';
+import WelcomeScreen from './containers/auth/WelcomeScreen';
+import LoginScreen from './containers/auth/LoginScreen';
+import PasswordScreen from './containers/auth/PasswordScreen';
+import SignupScreen from './containers/auth/SignupScreen';
+import ImportScreen from './containers/auth/ImportScreen';
+import PricingScreen from './containers/auth/PricingScreen';
+import InviteScreen from './containers/auth/InviteScreen';
+import AuthLayoutContainer from './containers/auth/AuthLayoutContainer';
+import SubscriptionPopupScreen from './containers/ui/SubscriptionPopupScreen';
+
+// Add Polyfills
+smoothScroll.polyfill();
+
+// Basic electron Setup
+webFrame.setVisualZoomLevelLimits(1, 1);
+webFrame.setLayoutZoomLevelLimits(0, 0);
+
+window.addEventListener('load', () => {
+  const api = apiFactory(new ServerApi(), new LocalApi());
+  const router = new RouterStore();
+  const history = syncHistoryWithStore(hashHistory, router);
+  const stores = storeFactory(api, actions, router);
+  const menu = new MenuFactory(stores, actions);
+  const touchBar = new TouchBarFactory(stores, actions);
+
+  window.franz = {
+    stores,
+    actions,
+    api,
+    menu,
+    touchBar,
+    analytics,
+    render() {
+      const preparedApp = (
+        <Provider stores={stores} actions={actions}>
+          <I18N>
+            <Router history={history}>
+              <Route path="/" component={AppLayoutContainer}>
+                <Route path="/settings" component={SettingsWindow}>
+                  <IndexRedirect to="/settings/recipes" />
+                  <Route path="/settings/recipes" component={RecipesScreen} />
+                  <Route path="/settings/recipes/:filter" component={RecipesScreen} />
+                  <Route path="/settings/services" component={ServicesScreen} />
+                  <Route path="/settings/services/:action/:id" component={EditServiceScreen} />
+                  <Route path="/settings/user" component={AccountScreen} />
+                  <Route path="/settings/user/edit" component={EditUserScreen} />
+                  <Route path="/settings/app" component={EditSettingsScreen} />
+                </Route>
+              </Route>
+              <Route path="/auth" component={AuthLayoutContainer}>
+                <IndexRedirect to="/auth/welcome" />
+                <Route path="/auth/welcome" component={WelcomeScreen} />
+                <Route path="/auth/login" component={LoginScreen} />
+                <Route path="/auth/signup">
+                  <IndexRedirect to="/auth/signup/form" />
+                  <Route path="/auth/signup/form" component={SignupScreen} />
+                  <Route path="/auth/signup/pricing" component={PricingScreen} />
+                  <Route path="/auth/signup/import" component={ImportScreen} />
+                  <Route path="/auth/signup/invite" component={InviteScreen} />
+                </Route>
+                <Route path="/auth/password" component={PasswordScreen} />
+                <Route path="/auth/logout" component={LoginScreen} />
+              </Route>
+              <Route path="/payment/:url" component={SubscriptionPopupScreen} />
+              <Route path="*" component={AppLayoutContainer} />
+            </Router>
+          </I18N>
+        </Provider>
+      );
+      render(preparedApp, document.getElementById('root'));
+    },
+  };
+  window.franz.render();
+});
diff --git a/src/assets/fonts/OpenSans-Bold.ttf b/src/assets/fonts/OpenSans-Bold.ttf
new file mode 100755
index 000000000..fd79d43be
--- /dev/null
+++ b/src/assets/fonts/OpenSans-Bold.ttf
diff --git a/src/assets/fonts/OpenSans-BoldItalic.ttf b/src/assets/fonts/OpenSans-BoldItalic.ttf
new file mode 100755
index 000000000..9bc800958
--- /dev/null
+++ b/src/assets/fonts/OpenSans-BoldItalic.ttf
diff --git a/src/assets/fonts/OpenSans-ExtraBold.ttf b/src/assets/fonts/OpenSans-ExtraBold.ttf
new file mode 100755
index 000000000..21f6f84a0
--- /dev/null
+++ b/src/assets/fonts/OpenSans-ExtraBold.ttf
diff --git a/src/assets/fonts/OpenSans-ExtraBoldItalic.ttf b/src/assets/fonts/OpenSans-ExtraBoldItalic.ttf
new file mode 100755
index 000000000..31cb68834
--- /dev/null
+++ b/src/assets/fonts/OpenSans-ExtraBoldItalic.ttf
diff --git a/src/assets/fonts/OpenSans-Light.ttf b/src/assets/fonts/OpenSans-Light.ttf
new file mode 100755
index 000000000..0d381897d
--- /dev/null
+++ b/src/assets/fonts/OpenSans-Light.ttf
diff --git a/src/assets/fonts/OpenSans-Regular.ttf b/src/assets/fonts/OpenSans-Regular.ttf
new file mode 100755
index 000000000..db433349b
--- /dev/null
+++ b/src/assets/fonts/OpenSans-Regular.ttf
diff --git a/src/assets/images/adlk.svg b/src/assets/images/adlk.svg
new file mode 100644
index 000000000..eb50f345a
--- /dev/null
+++ b/src/assets/images/adlk.svg
@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="120px" height="65px" viewBox="0 0 120 65" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
+    <title>adlk-group</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-1">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <linearGradient x1="30.4719662%" y1="95.2408507%" x2="68.063052%" y2="3.5648771%" id="linearGradient-2">
+            <stop stop-color="#318CC8" offset="0%"></stop>
+            <stop stop-color="#5EC0FF" offset="100%"></stop>
+        </linearGradient>
+        <path d="M29.5671186,59.9675705 C13.237647,59.9675705 0,46.7299236 0,30.4004519 C0,14.0709803 13.237647,0.833333333 29.5671186,0.833333333 C45.8965902,0.833333333 59.1342372,14.0709803 59.1342372,30.4004519 C59.1342372,46.7299236 45.8965902,59.9675705 29.5671186,59.9675705 Z" id="path-3"></path>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-4">
+            <feMorphology radius="1.25" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
+            <feOffset dx="0" dy="1" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="logo" transform="translate(-1.000000, 0.000000)">
+            <g id="adlk-group" transform="translate(4.000000, 1.000000)">
+                <g id="Page-1" filter="url(#filter-1)" transform="translate(53.333333, 0.000000)">
+                    <path d="M29.951734,59.6153846 C13.6222624,59.6153846 0.384615385,46.3777376 0.384615385,30.048266 C0.384615385,13.7187944 13.6222624,0.481147424 29.951734,0.481147424 C46.2812056,0.481147424 59.5188526,13.7187944 59.5188526,30.048266 C59.5188526,46.3777376 46.2812056,59.6153846 29.951734,59.6153846 Z" id="Fill-1" stroke="#FFFFFF" stroke-width="2.5" fill="url(#linearGradient-2)"></path>
+                    <path d="M40.8193218,39.7759515 C40.2991334,39.7759515 39.777752,39.7461242 39.2560451,39.6885303 L39.2560451,43.1660699 C39.2560451,44.2684875 40.4320006,44.8564652 42.0489665,44.8564652 C43.6659324,44.8564652 47.3407661,45.1505083 48.8106562,42.5780922 C49.5666431,41.2550609 50.049954,39.777253 50.341611,38.5380637 C47.7706048,39.3483905 44.5464347,39.7759515 40.8193218,39.7759515" id="Fill-3" fill="#FEFEFE"></path>
+                    <path d="M50.721253,36.0215602 C50.7213615,36.014727 50.7215784,36.0067007 50.7215784,36.0001929 C50.7215784,35.7047398 50.6497759,34.0216115 50.5562809,31.8479052 C50.5492308,31.8480137 50.5428315,31.8482306 50.5356729,31.8482306 C48.6476581,31.8482306 45.8548452,30.9165338 44.4370173,29.8136823 C44.0945997,29.5474057 43.7123762,29.1917557 43.3041216,28.7844772 C41.4215299,31.2340049 39.6248409,34.689418 39.3072613,37.4257217 C39.8033709,37.4891725 40.3081576,37.5235553 40.8193435,37.5235553 C44.8576366,37.5235553 48.2724847,36.9929545 50.721253,36.0215602" id="Fill-5" fill="#FEFEFE"></path>
+                    <path d="M45.8200177,28.0358333 C46.832411,28.8233829 49.0605657,29.5681981 50.4596295,29.5945546 C50.3027921,25.9124538 50.1335898,21.76201 50.1335898,20.3820357 C50.1335898,17.809728 50.2079954,15.494586 49.3986448,15.494586 C47.3407769,15.494586 47.8552168,24.4244504 45.2828006,26.6292856 C45.1214077,26.7676843 44.956544,26.9196409 44.7892941,27.0838539 C45.1781339,27.4760559 45.5348686,27.8140265 45.8200177,28.0358333" id="Fill-7" fill="#FEFEFE"></path>
+                    <path d="M10.0610578,29.5501499 C11.4368021,29.3757414 13.2421681,28.7220351 14.1242974,28.0358984 C14.475609,27.7625717 14.9354919,27.3128843 15.4306254,26.8023491 C15.3653307,26.7431283 15.3002529,26.6843414 15.2360428,26.6293506 C12.6636267,24.424407 13.1780665,15.4945426 11.1201987,15.4945426 C10.3109565,15.4945426 10.3852536,17.8096846 10.3852536,20.3821008 C10.3852536,21.756435 10.2173529,25.8792208 10.0610578,29.5501499" id="Fill-9" fill="#FEFEFE"></path>
+                    <path d="M21.2005731,37.3395804 C20.8402592,34.4934037 18.9129807,30.8970972 16.9604304,28.4603682 C16.4311312,29.0030084 15.9377331,29.4788355 15.5071352,29.8137691 C14.2229336,30.812713 11.8100665,31.6713058 9.96359298,31.8240217 C9.86966405,34.0092251 9.79721079,35.7036335 9.79721079,36.0001713 C9.79721079,36.0653575 9.80024775,36.1457286 9.80577936,36.2371628 C12.2015093,37.0708092 15.3970452,37.5235336 19.1249174,37.5235336 C19.8311197,37.5235336 20.5248489,37.4573712 21.2005731,37.3395804" id="Fill-11" fill="#FEFEFE"></path>
+                    <path d="M19.1249499,39.7759515 C15.6917717,39.7759515 12.6843105,39.4137936 10.2218758,38.7234269 C10.517329,39.9228103 10.9894682,41.3204641 11.7081439,42.5780922 C13.1781424,45.1505083 16.8529762,44.8564652 18.4698336,44.8564652 C20.0867995,44.8564652 21.262755,44.2684875 21.262755,43.1660699 L21.262755,39.6133655 C20.549394,39.7209608 19.8361416,39.7759515 19.1249499,39.7759515" id="Fill-13" fill="#FEFEFE"></path>
+                    <path d="M52.954538,31.2252844 C52.5192762,31.2252844 52.057007,31.3746379 51.5802038,31.6691149 C51.5121975,31.7110901 51.2357254,31.8481872 50.5357054,31.8481872 C48.6475821,31.8481872 45.8548777,30.9165988 44.4370498,29.8137474 C43.7290036,29.2630809 42.8517551,28.3324687 41.9229867,27.3472996 C39.9696772,25.2753315 38.1247221,23.3183342 36.5281473,23.3183342 C35.3931908,23.3183342 34.0862121,23.8471997 32.8221847,24.3588195 C31.7693347,24.784862 30.6805834,25.2254386 29.9721033,25.2254386 C29.2636232,25.2254386 28.1749804,24.784862 27.1221304,24.3588195 C25.858103,23.8471997 24.5510158,23.3183342 23.4161678,23.3183342 C21.8194845,23.3183342 19.974421,25.27544 18.0212199,27.347408 C17.0924515,28.3325771 16.2152031,29.2630809 15.5071568,29.8137474 C14.0895459,30.9164904 11.296733,31.8480788 9.40850121,31.8481872 C8.7085897,31.8481872 8.4321176,31.7110901 8.36411132,31.6691149 C7.88730812,31.3746379 7.4249305,31.2252844 6.98977708,31.2252844 C6.3738159,31.2252844 5.85416983,31.547311 5.63366462,32.0656555 C5.36185643,32.7047193 5.58821864,33.4896658 6.23899643,34.1654985 C8.29393578,36.2996158 12.9907076,37.5235119 19.1249391,37.5235119 C23.1527113,37.5235119 26.7888237,35.4106533 28.8485355,33.4333735 C29.2664433,33.0322774 29.8115781,33.0118864 29.9165703,33.0118864 L29.9199326,33.0114525 L29.9396729,33.0186111 L30.0136446,33.0121033 L30.0276364,33.0118864 C30.1326285,33.0118864 30.6778718,33.0322774 31.0957796,33.4333735 C33.1554914,35.4106533 36.7914954,37.5235119 40.8192676,37.5235119 C46.9534991,37.5235119 51.6502709,36.2996158 53.7053187,34.1654985 C54.3560965,33.4897742 54.5822418,32.7047193 54.310542,32.0656555 C54.0900368,31.547311 53.5703908,31.2252844 52.954538,31.2252844" id="Fill-15" fill="#FEFEFE"></path>
+                </g>
+                <g id="Fill-1">
+                    <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
+                    <use stroke="#FFFFFF" stroke-width="2.5" fill="#E51F5B" fill-rule="evenodd" xlink:href="#path-3"></use>
+                </g>
+                <path d="M18.53613,36.1383525 C18.402105,36.1383525 18.134205,36.1215525 17.882955,36.0378525 C17.531205,35.9373525 17.045505,35.6693775 16.44258,34.1787525 C15.42093,31.6330275 12.79143,24.7158525 12.54018,24.0794775 C12.339255,23.5602525 12.272205,23.4764775 12.171705,23.4764775 C12.071205,23.4764775 12.00423,23.5769775 11.803305,24.1297275 L8.001405,34.5305025 C7.699905,35.3679525 7.364955,36.0043275 6.59448,36.1048275 C6.46053,36.1215525 6.30978,36.1383525 6.192555,36.1383525 C6.041805,36.1383525 5.95803,36.1718025 5.95803,36.2388525 C5.95803,36.3393525 6.05853,36.3728025 6.276255,36.3728025 C7.063455,36.3728025 7.984605,36.3225525 8.16888,36.3225525 C8.35308,36.3225525 9.023055,36.3728025 9.42498,36.3728025 C9.57573,36.3728025 9.72648,36.3393525 9.72648,36.2388525 C9.72648,36.1718025 9.67623,36.1383525 9.508755,36.1383525 L9.358005,36.1383525 C9.073305,36.1383525 8.755005,35.9876025 8.755005,35.6525775 C8.755005,35.3511525 8.83878,34.9492275 8.98953,34.5305025 L11.76978,26.1897525 C11.85348,25.9385025 11.937255,25.9385025 12.020955,26.1897525 L15.47118,35.6525775 C15.57168,35.9206275 15.47118,36.0713025 15.37068,36.1048275 C15.303705,36.1215525 15.253455,36.1550775 15.253455,36.2220525 C15.253455,36.3225525 15.437655,36.3225525 15.75588,36.3393525 C16.911555,36.3728025 18.134205,36.3728025 18.38538,36.3728025 C18.569655,36.3728025 18.720405,36.3393525 18.720405,36.2388525 C18.720405,36.1550775 18.63663,36.1383525 18.53613,36.1383525" id="Fill-3" fill="#FEFEFE"></path>
+                <path d="M22.0194975,30.37683 C22.0194975,32.15223 22.0362225,33.693105 22.0530225,34.011255 C22.0697475,34.42998 22.1032725,35.099955 22.2372225,35.284155 C22.4549475,35.60238 23.1081225,35.954055 25.0844475,35.954055 C26.6420475,35.954055 28.0824225,35.384655 29.0706225,34.39653 C29.9415225,33.54228 30.4104225,31.934505 30.4104225,30.39363 C30.4104225,28.266555 29.4892725,26.893155 28.8025725,26.173005 C27.2282475,24.514905 25.3189725,24.280455 23.3258475,24.280455 C22.9908975,24.280455 22.3711725,24.330705 22.2372225,24.397605 C22.0864725,24.464655 22.0362225,24.548355 22.0362225,24.73263 C22.0194975,25.302105 22.0194975,27.01038 22.0194975,28.30008 L22.0194975,30.37683 Z M20.6126475,28.568055 C20.6126475,25.95528 20.6126475,25.486305 20.5791225,24.950355 C20.5456725,24.380955 20.4618975,24.112905 19.9092225,23.99568 C19.7751975,23.96223 19.4904975,23.94543 19.3397475,23.94543 C19.2225225,23.94543 19.1554725,23.91198 19.1554725,23.84493 C19.1554725,23.74443 19.2392475,23.71098 19.4235225,23.71098 C20.1771975,23.71098 21.2322975,23.76123 21.3160725,23.76123 C21.5170725,23.76123 22.5721725,23.71098 23.5770975,23.71098 C25.2351975,23.71098 28.3001475,23.56023 30.2932725,25.620255 C31.1307225,26.491155 31.9177725,27.881355 31.9177725,29.874405 C31.9177725,31.98468 31.0469475,33.60933 30.1089975,34.597455 C29.3887725,35.35113 27.8814225,36.52353 25.0341975,36.52353 C24.3140475,36.52353 23.4263475,36.47328 22.7061975,36.42303 C21.9692475,36.37278 21.3997725,36.32253 21.3160725,36.32253 C21.2825475,36.32253 20.9978475,36.32253 20.6460975,36.33933 C20.3111475,36.33933 19.9259475,36.37278 19.6746975,36.37278 C19.4904975,36.37278 19.4067225,36.33933 19.4067225,36.23883 C19.4067225,36.18858 19.4402475,36.13833 19.5741975,36.13833 C19.7584725,36.121605 19.8924225,36.104805 20.0431725,36.071355 C20.3781225,36.004305 20.4618975,35.63583 20.5288725,35.150205 C20.6126475,34.44678 20.6126475,33.12363 20.6126475,31.51578 L20.6126475,28.568055 Z" id="Fill-5" fill="#FEFEFE"></path>
+                <path d="M35.61885,31.54929 C35.61885,34.01124 35.685825,35.08314 35.98725,35.38464 C36.2553,35.652615 36.690675,35.76984 37.997025,35.76984 C38.884725,35.76984 39.621675,35.753115 40.0236,35.267415 C40.241325,34.99944 40.408875,34.580715 40.459125,34.26249 C40.47585,34.12854 40.509375,34.044765 40.609875,34.044765 C40.69365,34.044765 40.710375,34.11174 40.710375,34.296015 C40.710375,34.480215 40.59315,35.48514 40.459125,35.97084 C40.341975,36.35604 40.291575,36.423015 39.404025,36.423015 C37.96365,36.423015 36.539925,36.32259 34.915425,36.32259 C34.396125,36.32259 33.8937,36.372765 33.27405,36.372765 C33.089775,36.372765 33.006,36.339315 33.006,36.238815 C33.006,36.188565 33.039525,36.13839 33.140025,36.13839 C33.290775,36.13839 33.491775,36.10479 33.64245,36.07134 C33.977475,36.00429 34.06125,35.635815 34.128225,35.15019 C34.212,34.446765 34.212,33.123615 34.212,31.515765 L34.212,28.56804 C34.212,25.955265 34.212,25.48629 34.178475,24.950415 C34.14495,24.38094 34.011075,24.112965 33.458175,23.995665 C33.3243,23.962215 33.039525,23.945415 32.88885,23.945415 C32.821875,23.945415 32.75475,23.911965 32.75475,23.844915 C32.75475,23.74449 32.8386,23.710965 33.022875,23.710965 C33.77655,23.710965 34.83165,23.761215 34.915425,23.761215 C34.99905,23.761215 36.221775,23.710965 36.7242,23.710965 C36.908475,23.710965 36.992175,23.74449 36.992175,23.844915 C36.992175,23.911965 36.9252,23.945415 36.858225,23.945415 C36.740925,23.945415 36.50655,23.962215 36.30555,23.995665 C35.81985,24.07944 35.685825,24.36414 35.652225,24.950415 C35.61885,25.48629 35.61885,25.955265 35.61885,28.56804 L35.61885,31.54929 Z" id="Fill-7" fill="#FEFEFE"></path>
+                <path d="M44.428275,29.63994 C44.947575,29.137515 47.2254,26.74239 48.246975,25.68729 C49.251825,24.64884 49.31895,24.48144 49.31895,24.28044 C49.31895,24.146415 49.235175,24.012465 49.10115,23.962215 C48.983925,23.911965 48.9504,23.878515 48.9504,23.811465 C48.9504,23.74449 49.0509,23.710965 49.20165,23.710965 C49.68735,23.710965 49.6371,23.761215 50.2065,23.761215 C50.7258,23.761215 51.71385,23.710965 51.9819,23.710965 C52.216425,23.710965 52.266675,23.761215 52.266675,23.828265 C52.266675,23.895165 52.233075,23.928765 52.0824,23.945415 C51.76425,23.979015 51.46275,24.045915 51.228225,24.146415 C50.809425,24.31389 50.491275,24.51489 49.48635,25.48629 C48.01245,26.90994 46.103175,28.80249 45.66765,29.288265 C46.722825,30.443865 49.771125,33.542265 50.558175,34.279215 C51.93165,35.568915 52.51785,35.93739 53.321775,36.08814 C53.472525,36.12159 53.639925,36.13839 53.80755,36.13839 C53.941425,36.13839 54.041925,36.17184 54.041925,36.25554 C54.041925,36.339315 53.97495,36.372765 53.790675,36.372765 L52.5513,36.372765 C51.0942,36.372765 50.708925,36.188565 49.921875,35.568915 C48.916875,34.781715 45.902175,31.54929 44.428275,29.79069 L44.428275,31.515765 C44.428275,33.123615 44.428275,34.446765 44.51205,35.15019 C44.5623,35.635815 44.6628,36.00429 45.165225,36.07134 C45.39975,36.10479 45.734775,36.13839 45.835275,36.13839 C45.986025,36.13839 46.0362,36.20529 46.0362,36.25554 C46.0362,36.339315 45.96915,36.372765 45.785025,36.372765 C44.8638,36.372765 43.808625,36.32259 43.72485,36.32259 C43.641225,36.32259 42.653025,36.372765 42.1506,36.372765 C41.966325,36.372765 41.88255,36.35604 41.88255,36.25554 C41.88255,36.20529 41.916075,36.13839 42.066825,36.13839 C42.167325,36.13839 42.3516,36.12159 42.502275,36.08814 C42.8373,36.02109 42.9378,35.635815 43.004775,35.15019 C43.08855,34.446765 43.08855,33.123615 43.08855,31.515765 L43.08855,28.56804 C43.08855,25.955265 43.08855,25.48629 43.05495,24.950415 C43.021425,24.38094 42.854025,24.096165 42.485475,24.012465 C42.30135,23.962215 41.99985,23.945415 41.88255,23.945415 C41.7486,23.945415 41.698425,23.911965 41.698425,23.844915 C41.698425,23.74449 41.78205,23.710965 41.966325,23.710965 C42.519,23.710965 43.641225,23.761215 43.72485,23.761215 C43.808625,23.761215 44.8638,23.710965 45.366225,23.710965 C45.5505,23.710965 45.634275,23.74449 45.634275,23.828265 C45.634275,23.895165 45.60075,23.928765 45.45,23.945415 C45.265725,23.962215 45.249,23.962215 45.0816,23.979015 C44.629275,24.02919 44.4954,24.36414 44.4618,24.950415 C44.428275,25.48629 44.428275,25.955265 44.428275,28.56804 L44.428275,29.63994 Z" id="Fill-9" fill="#FEFEFE"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/emoji/dontknow.png b/src/assets/images/emoji/dontknow.png
new file mode 100644
index 000000000..a4473d862
--- /dev/null
+++ b/src/assets/images/emoji/dontknow.png
diff --git a/src/assets/images/emoji/sad.png b/src/assets/images/emoji/sad.png
new file mode 100644
index 000000000..b8b6ff69b
--- /dev/null
+++ b/src/assets/images/emoji/sad.png
diff --git a/src/assets/images/emoji/star.png b/src/assets/images/emoji/star.png
new file mode 100755
index 000000000..0b9aa67da
--- /dev/null
+++ b/src/assets/images/emoji/star.png
diff --git a/src/assets/images/logo.svg b/src/assets/images/logo.svg
new file mode 100644
index 000000000..87188f4aa
--- /dev/null
+++ b/src/assets/images/logo.svg
@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="80px" height="80px" viewBox="0 0 80 80" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
+    <title>franz</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-1">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.3 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <linearGradient x1="30.4719662%" y1="95.2408507%" x2="68.063052%" y2="3.5648771%" id="linearGradient-2">
+            <stop stop-color="#318CC8" offset="0%"></stop>
+            <stop stop-color="#5EC0FF" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="franz">
+            <g id="Page-1" filter="url(#filter-1)" transform="translate(4.000000, 4.000000)">
+                <path d="M35.9420808,71.5384615 C16.3467148,71.5384615 0.461538462,55.6532852 0.461538462,36.0579192 C0.461538462,16.4625533 16.3467148,0.577376909 35.9420808,0.577376909 C55.5374467,0.577376909 71.4226231,16.4625533 71.4226231,36.0579192 C71.4226231,55.6532852 55.5374467,71.5384615 35.9420808,71.5384615 Z" id="Fill-1" stroke="#FFFFFF" stroke-width="2.5" fill="url(#linearGradient-2)"></path>
+                <path d="M48.9831862,47.7311418 C48.3589601,47.7311418 47.7333024,47.695349 47.1072541,47.6262364 L47.1072541,51.7992839 C47.1072541,53.122185 48.5184007,53.8277583 50.4587598,53.8277583 C52.3991188,53.8277583 56.8089193,54.18061 58.5727874,51.0937106 C59.4799717,49.5060731 60.0599449,47.7327036 60.4099332,46.2456764 C57.3247258,47.2180686 53.4557216,47.7311418 48.9831862,47.7311418" id="Fill-3" fill="#FEFEFE"></path>
+                <path d="M60.8655036,43.2258722 C60.8656338,43.2176724 60.8658941,43.2080409 60.8658941,43.2002315 C60.8658941,42.8456878 60.7797311,40.8259338 60.667537,38.2174863 C60.6590769,38.2176164 60.6513977,38.2178768 60.6428075,38.2178768 C58.3771897,38.2178768 55.0258142,37.0998405 53.3244207,35.7764188 C52.9135196,35.4568869 52.4548514,35.0301068 51.9649459,34.5413727 C49.7058359,37.4808058 47.549809,41.6273016 47.1687136,44.910866 C47.7640451,44.9870071 48.3697891,45.0282664 48.9832122,45.0282664 C53.829164,45.0282664 57.9269816,44.3915454 60.8655036,43.2258722" id="Fill-5" fill="#FEFEFE"></path>
+                <path d="M54.9840212,33.643 C56.1988932,34.5880595 58.8726789,35.4818377 60.5515554,35.5134655 C60.3633505,31.0949446 60.1603078,26.114412 60.1603078,24.4584428 C60.1603078,21.3716736 60.2495945,18.5935032 59.2783737,18.5935032 C56.8089323,18.5935032 57.4262601,29.3093405 54.3393608,31.9551427 C54.1456893,32.1212212 53.9478528,32.3035691 53.747153,32.5006246 C54.2137606,32.9712671 54.6418423,33.3768319 54.9840212,33.643" id="Fill-7" fill="#FEFEFE"></path>
+                <path d="M12.0732694,35.4601798 C13.7241625,35.2508897 15.8906017,34.4664421 16.9491569,33.6430781 C17.3707308,33.3150861 17.9225903,32.7754611 18.5167504,32.1628189 C18.4383968,32.091754 18.3603035,32.0212096 18.2832514,31.9552208 C15.196352,29.3092884 15.8136798,18.5934511 13.3442384,18.5934511 C12.3731478,18.5934511 12.4623043,21.3716215 12.4623043,24.4585209 C12.4623043,26.107722 12.2608235,31.0550649 12.0732694,35.4601798" id="Fill-9" fill="#FEFEFE"></path>
+                <path d="M25.4406878,44.8074965 C25.008311,41.3920845 22.6955769,37.0765166 20.3525165,34.1524418 C19.7173574,34.8036101 19.1252797,35.3746025 18.6085622,35.7765229 C17.0675204,36.9752556 14.1720798,38.005567 11.9563116,38.188826 C11.8435969,40.8110701 11.7566529,42.8443602 11.7566529,43.2002055 C11.7566529,43.278429 11.7602973,43.3748743 11.7669352,43.4845954 C14.6418112,44.484971 18.4764543,45.0282403 22.9499008,45.0282403 C23.7973437,45.0282403 24.6298186,44.9488454 25.4406878,44.8074965" id="Fill-11" fill="#FEFEFE"></path>
+                <path d="M22.9499399,47.7311418 C18.830126,47.7311418 15.2211727,47.2965524 12.266251,46.4681122 C12.6207947,47.9073724 13.1873619,49.5845569 14.0497726,51.0937106 C15.8137709,54.18061 20.2235714,53.8277583 22.1638003,53.8277583 C24.1041594,53.8277583 25.515306,53.122185 25.515306,51.7992839 L25.515306,47.5360386 C24.6592728,47.6651529 23.8033699,47.7311418 22.9499399,47.7311418" id="Fill-13" fill="#FEFEFE"></path>
+                <path d="M63.5454456,37.4703413 C63.0231314,37.4703413 62.4684084,37.6495655 61.8962446,38.0029379 C61.814637,38.0533081 61.4828705,38.2178247 60.6428465,38.2178247 C58.3770986,38.2178247 55.0258532,37.0999186 53.3244598,35.7764969 C52.4748043,35.1156971 51.4221061,33.9989624 50.3075841,32.8167595 C47.9636126,30.3303978 45.7496666,27.9820011 43.8337767,27.9820011 C42.471829,27.9820011 40.9034545,28.6166396 39.3866216,29.2305834 C38.1232016,29.7418344 36.8167001,30.2705263 35.966524,30.2705263 C35.1163479,30.2705263 33.8099765,29.7418344 32.5465565,29.2305834 C31.0297236,28.6166396 29.461219,27.9820011 28.0994014,27.9820011 C26.1833814,27.9820011 23.9693052,30.330528 21.6254639,32.8168896 C20.5109419,33.9990926 19.4582437,35.1156971 18.6085882,35.7764969 C16.9074551,37.0997884 13.5560796,38.2176945 11.2902015,38.2178247 C10.4503076,38.2178247 10.1185411,38.0533081 10.0369336,38.0029379 C9.46476974,37.6495655 8.9099166,37.4703413 8.3877325,37.4703413 C7.64857908,37.4703413 7.0250038,37.8567732 6.76039755,38.4787866 C6.43422772,39.2456631 6.70586237,40.1875989 7.48679572,40.9985982 C9.95272293,43.559539 15.5888491,45.0282143 22.9499269,45.0282143 C27.7832535,45.0282143 32.1465885,42.492784 34.6182426,40.1200482 C35.1197319,39.6387329 35.7738938,39.6142637 35.8998843,39.6142637 L35.9039192,39.6137431 L35.9276075,39.6223333 L36.0163736,39.614524 L36.0331636,39.6142637 C36.1591542,39.6142637 36.8134462,39.6387329 37.3149356,40.1200482 C39.7865896,42.492784 44.1497944,45.0282143 48.9831211,45.0282143 C56.3441989,45.0282143 61.980325,43.559539 64.4463824,40.9985982 C65.2273158,40.1877291 65.4986901,39.2456631 65.1726504,38.4787866 C64.9080442,37.8567732 64.2844689,37.4703413 63.5454456,37.4703413" id="Fill-15" fill="#FEFEFE"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/sm.png b/src/assets/images/sm.png
new file mode 100644
index 000000000..2bf169bee
--- /dev/null
+++ b/src/assets/images/sm.png
diff --git a/src/assets/images/taskbar/win32/taskbar-1.ico b/src/assets/images/taskbar/win32/taskbar-1.ico
new file mode 100644
index 000000000..32ba334f3
--- /dev/null
+++ b/src/assets/images/taskbar/win32/taskbar-1.ico
diff --git a/src/assets/images/taskbar/win32/taskbar-10.ico b/src/assets/images/taskbar/win32/taskbar-10.ico
new file mode 100644
index 000000000..815a02ef7
--- /dev/null
+++ b/src/assets/images/taskbar/win32/taskbar-10.ico
diff --git a/src/assets/images/taskbar/win32/taskbar-2.ico b/src/assets/images/taskbar/win32/taskbar-2.ico
new file mode 100644
index 000000000..975295f3c
--- /dev/null
+++ b/src/assets/images/taskbar/win32/taskbar-2.ico
diff --git a/src/assets/images/taskbar/win32/taskbar-3.ico b/src/assets/images/taskbar/win32/taskbar-3.ico
new file mode 100644
index 000000000..a3798e486
--- /dev/null
+++ b/src/assets/images/taskbar/win32/taskbar-3.ico
diff --git a/src/assets/images/taskbar/win32/taskbar-4.ico b/src/assets/images/taskbar/win32/taskbar-4.ico
new file mode 100644
index 000000000..cd01ce0bf
--- /dev/null
+++ b/src/assets/images/taskbar/win32/taskbar-4.ico
diff --git a/src/assets/images/taskbar/win32/taskbar-5.ico b/src/assets/images/taskbar/win32/taskbar-5.ico
new file mode 100644
index 000000000..7119a5544
--- /dev/null
+++ b/src/assets/images/taskbar/win32/taskbar-5.ico
diff --git a/src/assets/images/taskbar/win32/taskbar-6.ico b/src/assets/images/taskbar/win32/taskbar-6.ico
new file mode 100644
index 000000000..17f41f04b
--- /dev/null
+++ b/src/assets/images/taskbar/win32/taskbar-6.ico
diff --git a/src/assets/images/taskbar/win32/taskbar-7.ico b/src/assets/images/taskbar/win32/taskbar-7.ico
new file mode 100644
index 000000000..c4aa16200
--- /dev/null
+++ b/src/assets/images/taskbar/win32/taskbar-7.ico
diff --git a/src/assets/images/taskbar/win32/taskbar-8.ico b/src/assets/images/taskbar/win32/taskbar-8.ico
new file mode 100644
index 000000000..896ff7b4b
--- /dev/null
+++ b/src/assets/images/taskbar/win32/taskbar-8.ico
diff --git a/src/assets/images/taskbar/win32/taskbar-9.ico b/src/assets/images/taskbar/win32/taskbar-9.ico
new file mode 100644
index 000000000..e3613e344
--- /dev/null
+++ b/src/assets/images/taskbar/win32/taskbar-9.ico
diff --git a/src/assets/images/taskbar/win32/taskbar-alert.ico b/src/assets/images/taskbar/win32/taskbar-alert.ico
new file mode 100644
index 000000000..5b349c2b6
--- /dev/null
+++ b/src/assets/images/taskbar/win32/taskbar-alert.ico
diff --git a/src/assets/images/tray/darwin/tray-active.png b/src/assets/images/tray/darwin/tray-active.png
new file mode 100644
index 000000000..489533dbf
--- /dev/null
+++ b/src/assets/images/tray/darwin/tray-active.png
diff --git a/src/assets/images/tray/darwin/tray-active@2x.png b/src/assets/images/tray/darwin/tray-active@2x.png
new file mode 100644
index 000000000..76f212b52
--- /dev/null
+++ b/src/assets/images/tray/darwin/tray-active@2x.png
diff --git a/src/assets/images/tray/darwin/tray-unread-active.png b/src/assets/images/tray/darwin/tray-unread-active.png
new file mode 100644
index 000000000..e2fd1a822
--- /dev/null
+++ b/src/assets/images/tray/darwin/tray-unread-active.png
diff --git a/src/assets/images/tray/darwin/tray-unread-active@2x.png b/src/assets/images/tray/darwin/tray-unread-active@2x.png
new file mode 100644
index 000000000..9a64b3ef8
--- /dev/null
+++ b/src/assets/images/tray/darwin/tray-unread-active@2x.png
diff --git a/src/assets/images/tray/darwin/tray-unread.png b/src/assets/images/tray/darwin/tray-unread.png
new file mode 100644
index 000000000..a94ad81fb
--- /dev/null
+++ b/src/assets/images/tray/darwin/tray-unread.png
diff --git a/src/assets/images/tray/darwin/tray-unread@2x.png b/src/assets/images/tray/darwin/tray-unread@2x.png
new file mode 100644
index 000000000..56e74b16a
--- /dev/null
+++ b/src/assets/images/tray/darwin/tray-unread@2x.png
diff --git a/src/assets/images/tray/darwin/tray.png b/src/assets/images/tray/darwin/tray.png
new file mode 100644
index 000000000..583f34df8
--- /dev/null
+++ b/src/assets/images/tray/darwin/tray.png
diff --git a/src/assets/images/tray/darwin/tray@2x.png b/src/assets/images/tray/darwin/tray@2x.png
new file mode 100644
index 000000000..479a2cf95
--- /dev/null
+++ b/src/assets/images/tray/darwin/tray@2x.png
diff --git a/src/assets/images/tray/linux/tray-unread.png b/src/assets/images/tray/linux/tray-unread.png
new file mode 100644
index 000000000..a94ad81fb
--- /dev/null
+++ b/src/assets/images/tray/linux/tray-unread.png
diff --git a/src/assets/images/tray/linux/tray-unread@2x.png b/src/assets/images/tray/linux/tray-unread@2x.png
new file mode 100644
index 000000000..56e74b16a
--- /dev/null
+++ b/src/assets/images/tray/linux/tray-unread@2x.png
diff --git a/src/assets/images/tray/linux/tray.png b/src/assets/images/tray/linux/tray.png
new file mode 100644
index 000000000..583f34df8
--- /dev/null
+++ b/src/assets/images/tray/linux/tray.png
diff --git a/src/assets/images/tray/linux/tray@2x.png b/src/assets/images/tray/linux/tray@2x.png
new file mode 100644
index 000000000..479a2cf95
--- /dev/null
+++ b/src/assets/images/tray/linux/tray@2x.png
diff --git a/src/assets/images/tray/win32/tray-unread.ico b/src/assets/images/tray/win32/tray-unread.ico
new file mode 100644
index 000000000..a59428cfb
--- /dev/null
+++ b/src/assets/images/tray/win32/tray-unread.ico
diff --git a/src/assets/images/tray/win32/tray-unread@2x.ico b/src/assets/images/tray/win32/tray-unread@2x.ico
new file mode 100644
index 000000000..f6fe65093
--- /dev/null
+++ b/src/assets/images/tray/win32/tray-unread@2x.ico
diff --git a/src/assets/images/tray/win32/tray.ico b/src/assets/images/tray/win32/tray.ico
new file mode 100644
index 000000000..d3aa25d68
--- /dev/null
+++ b/src/assets/images/tray/win32/tray.ico
diff --git a/src/assets/images/tray/win32/tray@2x.ico b/src/assets/images/tray/win32/tray@2x.ico
new file mode 100644
index 000000000..c1b7a73a5
--- /dev/null
+++ b/src/assets/images/tray/win32/tray@2x.ico
diff --git a/src/components/auth/AuthLayout.js b/src/components/auth/AuthLayout.js
new file mode 100644
index 000000000..2741b8a15
--- /dev/null
+++ b/src/components/auth/AuthLayout.js
@@ -0,0 +1,88 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import { RouteTransition } from 'react-router-transition';
+import { intlShape } from 'react-intl';
+
+import Link from '../ui/Link';
+import InfoBar from '../ui/InfoBar';
+
+import { oneOrManyChildElements, globalError as globalErrorPropType } from '../../prop-types';
+import globalMessages from '../../i18n/globalMessages';
+
+@observer
+export default class AuthLayout extends Component {
+  static propTypes = {
+    children: oneOrManyChildElements.isRequired,
+    pathname: PropTypes.string.isRequired,
+    error: globalErrorPropType.isRequired,
+    isOnline: PropTypes.bool.isRequired,
+    isAPIHealthy: PropTypes.bool.isRequired,
+    retryHealthCheck: PropTypes.func.isRequired,
+    isHealthCheckLoading: PropTypes.bool.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  render() {
+    const {
+      children,
+      pathname,
+      error,
+      isOnline,
+      isAPIHealthy,
+      retryHealthCheck,
+      isHealthCheckLoading,
+    } = this.props;
+    const { intl } = this.context;
+
+    return (
+      <div className="auth">
+        {!isOnline && (
+          <InfoBar
+            type="warning"
+          >
+            <span className="mdi mdi-flash" />
+            {intl.formatMessage(globalMessages.notConnectedToTheInternet)}
+          </InfoBar>
+        )}
+        {isOnline && !isAPIHealthy && (
+          <InfoBar
+            type="danger"
+            ctaLabel="Try again"
+            ctaLoading={isHealthCheckLoading}
+            sticky
+            onClick={retryHealthCheck}
+          >
+            <span className="mdi mdi-flash" />
+            {intl.formatMessage(globalMessages.APIUnhealthy)}
+          </InfoBar>
+        )}
+        <div className="auth__layout">
+          <RouteTransition
+            pathname={pathname}
+            atEnter={{ opacity: 0 }}
+            atLeave={{ opacity: 0 }}
+            atActive={{ opacity: 1 }}
+            mapStyles={styles => ({
+              transform: `translateX(${styles.translateX}%)`,
+              opacity: styles.opacity,
+            })}
+            component="span"
+          >
+            {/* Inject globalError into children  */}
+            {React.cloneElement(children, {
+              error,
+            })}
+          </RouteTransition>
+        </div>
+        {/* </div> */}
+        <Link to="https://adlk.io" 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
new file mode 100644
index 000000000..cf83aa9c8
--- /dev/null
+++ b/src/components/auth/Import.js
@@ -0,0 +1,168 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+import { Link } from 'react-router';
+import classnames from 'classnames';
+
+import Form from '../../lib/Form';
+import Toggle from '../ui/Toggle';
+import Button from '../ui/Button';
+
+const messages = defineMessages({
+  headline: {
+    id: 'import.headline',
+    defaultMessage: '!!!Import your Franz 4 services',
+  },
+  notSupportedHeadline: {
+    id: 'import.notSupportedHeadline',
+    defaultMessage: '!!!Services not yet supported in Franz 5',
+  },
+  submitButtonLabel: {
+    id: 'import.submit.label',
+    defaultMessage: '!!!Import {count} services',
+  },
+  skipButtonLabel: {
+    id: 'import.skip.label',
+    defaultMessage: '!!!I want add services manually',
+  },
+});
+
+@observer
+export default class Import extends Component {
+  static propTypes = {
+    services: MobxPropTypes.arrayOrObservableArray.isRequired,
+    onSubmit: PropTypes.func.isRequired,
+    isSubmitting: PropTypes.bool.isRequired,
+    inviteRoute: PropTypes.string.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  prepareForm() {
+    const { services } = this.props;
+
+    const config = {
+      fields: {
+        import: [...services.filter(s => s.recipe).map(s => ({
+          add: {
+            default: true,
+            options: s,
+          },
+        }))],
+      },
+    };
+
+    return new Form(config, this.context.intl);
+  }
+
+  submit(e) {
+    const { services } = this.props;
+    e.preventDefault();
+    this.form.submit({
+      onSuccess: (form) => {
+        const servicesImport = form.values().import
+          .map((value, i) => !value.add || services.filter(s => s.recipe)[i])
+          .filter(s => typeof s !== 'boolean');
+
+        this.props.onSubmit({ services: servicesImport });
+      },
+      onError: () => {},
+    });
+  }
+
+  render() {
+    this.form = this.prepareForm();
+    const { intl } = this.context;
+    const { services, isSubmitting, inviteRoute } = this.props;
+
+    const availableServices = services.filter(s => s.recipe);
+    const unavailableServices = services.filter(s => !s.recipe);
+
+    return (
+      <div className="auth__scroll-container">
+        <div className="auth__container auth__container--signup">
+          <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>
+            <table className="service-table available-services">
+              <tbody>
+                {this.form.$('import').map((service, i) => (
+                  <tr
+                    key={service.id}
+                    className="service-table__row"
+                    onClick={() => service.$('add').set(!service.$('add').value)}
+                  >
+                    <td className="service-table__toggle">
+                      <Toggle
+                        field={service.$('add')}
+                        showLabel={false}
+                      />
+                    </td>
+                    <td className="service-table__column-icon">
+                      <img
+                        src={availableServices[i].custom_icon || availableServices[i].recipe.icons.svg}
+                        className={classnames({
+                          'service-table__icon': true,
+                          'has-custom-icon': availableServices[i].custom_icon,
+                        })}
+                        alt=""
+                      />
+                    </td>
+                    <td className="service-table__column-name">
+                      {availableServices[i].name !== ''
+                        ? availableServices[i].name
+                        : availableServices[i].recipe.name}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+            {unavailableServices.length > 0 && (
+              <div className="unavailable-services">
+                <strong>{intl.formatMessage(messages.notSupportedHeadline)}</strong>
+                <p>
+                  {services.filter(s => !s.recipe).map((service, i) => (
+                    <span key={service.id}>
+                      {service.name !== '' ? service.name : service.service}
+                      {unavailableServices.length > i + 1 ? ', ' : ''}
+                    </span>
+                  ))}
+                </p>
+              </div>
+            )}
+
+            {isSubmitting ? (
+              <Button
+                className="auth__button is-loading"
+                label={`${intl.formatMessage(messages.submitButtonLabel)} ...`}
+                loaded={false}
+                disabled
+              />
+            ) : (
+              <Button
+                type="submit"
+                className="auth__button"
+                label={intl.formatMessage(messages.submitButtonLabel)}
+              />
+            )}
+            <Link
+              to={inviteRoute}
+              className="franz-form__button franz-form__button--secondary auth__button auth__button--skip"
+            >
+              {intl.formatMessage(messages.skipButtonLabel)}
+            </Link>
+          </form>
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/src/components/auth/Invite.js b/src/components/auth/Invite.js
new file mode 100644
index 000000000..c1d815dcd
--- /dev/null
+++ b/src/components/auth/Invite.js
@@ -0,0 +1,111 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+import { Link } from 'react-router';
+
+import Form from '../../lib/Form';
+import { email } from '../../helpers/validation-helpers';
+import Input from '../ui/Input';
+import Button from '../ui/Button';
+
+const messages = defineMessages({
+  headline: {
+    id: 'invite.headline.friends',
+    defaultMessage: '!!!Invite 3 of your friends or colleagues',
+  },
+  nameLabel: {
+    id: 'invite.name.label',
+    defaultMessage: '!!!Name',
+  },
+  emailLabel: {
+    id: 'invite.email.label',
+    defaultMessage: '!!!Email address',
+  },
+  submitButtonLabel: {
+    id: 'invite.submit.label',
+    defaultMessage: '!!!Send invites',
+  },
+  skipButtonLabel: {
+    id: 'invite.skip.label',
+    defaultMessage: '!!!I want to do this later',
+  },
+});
+
+@observer
+export default class Invite extends Component {
+  static propTypes = {
+    onSubmit: PropTypes.func.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  form = new Form({
+    fields: {
+      invite: [...Array(3).fill({
+        name: {
+          label: this.context.intl.formatMessage(messages.nameLabel),
+          // value: '',
+          placeholder: this.context.intl.formatMessage(messages.nameLabel),
+        },
+        email: {
+          label: this.context.intl.formatMessage(messages.emailLabel),
+          // value: '',
+          validate: [email],
+          placeholder: this.context.intl.formatMessage(messages.emailLabel),
+        },
+      })],
+    },
+  }, this.context.intl);
+
+  submit(e) {
+    e.preventDefault();
+    this.form.submit({
+      onSuccess: (form) => {
+        this.props.onSubmit({ invites: form.values().invite });
+      },
+      onError: () => {},
+    });
+  }
+
+  render() {
+    const { form } = this;
+    const { intl } = this.context;
+
+    return (
+      <div className="auth__container auth__container--signup">
+        <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>
+          {form.$('invite').map(invite => (
+            <div className="grid" key={invite.key}>
+              <div className="grid__row">
+                <Input field={invite.$('name')} showLabel={false} />
+                <Input field={invite.$('email')} showLabel={false} />
+              </div>
+            </div>
+          ))}
+          <Button
+            type="submit"
+            className="auth__button"
+            label={intl.formatMessage(messages.submitButtonLabel)}
+          />
+          <Link
+            to="/"
+            className="franz-form__button franz-form__button--secondary auth__button auth__button--skip"
+          >
+            {intl.formatMessage(messages.skipButtonLabel)}
+          </Link>
+        </form>
+      </div>
+    );
+  }
+}
diff --git a/src/components/auth/Login.js b/src/components/auth/Login.js
new file mode 100644
index 000000000..015079f02
--- /dev/null
+++ b/src/components/auth/Login.js
@@ -0,0 +1,161 @@
+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, email } from '../../helpers/validation-helpers';
+import Input from '../ui/Input';
+import Button from '../ui/Button';
+import Link from '../ui/Link';
+
+import { globalError as globalErrorPropType } from '../../prop-types';
+
+// import Appear from '../ui/effects/Appear';
+
+const messages = defineMessages({
+  headline: {
+    id: 'login.headline',
+    defaultMessage: '!!!Sign in',
+  },
+  emailLabel: {
+    id: 'login.email.label',
+    defaultMessage: '!!!Email address',
+  },
+  passwordLabel: {
+    id: 'login.password.label',
+    defaultMessage: '!!!Password',
+  },
+  submitButtonLabel: {
+    id: 'login.submit.label',
+    defaultMessage: '!!!Sign in',
+  },
+  invalidCredentials: {
+    id: 'login.invalidCredentials',
+    defaultMessage: '!!!Email or password not valid',
+  },
+  tokenExpired: {
+    id: 'login.tokenExpired',
+    defaultMessage: '!!!Your session expired, please login again.',
+  },
+  serverLogout: {
+    id: 'login.serverLogout',
+    defaultMessage: '!!!Your session expired, please login again.',
+  },
+  signupLink: {
+    id: 'login.link.signup',
+    defaultMessage: '!!!Create a free account',
+  },
+  passwordLink: {
+    id: 'login.link.password',
+    defaultMessage: '!!!Forgot password',
+  },
+});
+
+@observer
+export default class Login extends Component {
+  static propTypes = {
+    onSubmit: PropTypes.func.isRequired,
+    isSubmitting: PropTypes.bool.isRequired,
+    isTokenExpired: PropTypes.bool.isRequired,
+    isServerLogout: PropTypes.bool.isRequired,
+    signupRoute: PropTypes.string.isRequired,
+    passwordRoute: PropTypes.string.isRequired,
+    error: globalErrorPropType.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  form = new Form({
+    fields: {
+      email: {
+        label: this.context.intl.formatMessage(messages.emailLabel),
+        value: '',
+        validate: [required, email],
+      },
+      password: {
+        label: this.context.intl.formatMessage(messages.passwordLabel),
+        value: '',
+        validate: [required],
+        type: 'password',
+      },
+    },
+  }, this.context.intl);
+
+  submit(e) {
+    e.preventDefault();
+    this.form.submit({
+      onSuccess: (form) => {
+        this.props.onSubmit(form.values());
+      },
+      onError: () => {},
+    });
+  }
+
+  emailField = null;
+
+  render() {
+    const { form } = this;
+    const { intl } = this.context;
+    const {
+      isSubmitting,
+      isTokenExpired,
+      isServerLogout,
+      signupRoute,
+      passwordRoute,
+      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>
+          {isTokenExpired && (
+            <p className="error-message center">{intl.formatMessage(messages.tokenExpired)}</p>
+          )}
+          {isServerLogout && (
+            <p className="error-message center">{intl.formatMessage(messages.serverLogout)}</p>
+          )}
+          <Input
+            field={form.$('email')}
+            ref={(element) => { this.emailField = element; }}
+            focus
+          />
+          <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 className="auth__links">
+          <Link to={signupRoute}>{intl.formatMessage(messages.signupLink)}</Link>
+          <Link to={passwordRoute}>{intl.formatMessage(messages.passwordLink)}</Link>
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/src/components/auth/Password.js b/src/components/auth/Password.js
new file mode 100644
index 000000000..d2b196853
--- /dev/null
+++ b/src/components/auth/Password.js
@@ -0,0 +1,135 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+
+import Form from '../../lib/Form';
+import { required, email } from '../../helpers/validation-helpers';
+import Input from '../ui/Input';
+import Button from '../ui/Button';
+import Link from '../ui/Link';
+import Infobox from '../ui/Infobox';
+
+const messages = defineMessages({
+  headline: {
+    id: 'password.headline',
+    defaultMessage: '!!!Forgot password',
+  },
+  emailLabel: {
+    id: 'password.email.label',
+    defaultMessage: '!!!Email address',
+  },
+  submitButtonLabel: {
+    id: 'password.submit.label',
+    defaultMessage: '!!!Submit',
+  },
+  successInfo: {
+    id: 'password.successInfo',
+    defaultMessage: '!!!Your new password was sent to your email address',
+  },
+  noUser: {
+    id: 'password.noUser',
+    defaultMessage: '!!!No user affiliated with that email address',
+  },
+  signupLink: {
+    id: 'password.link.signup',
+    defaultMessage: '!!!Create a free account',
+  },
+  loginLink: {
+    id: 'password.link.login',
+    defaultMessage: '!!!Sign in to your account',
+  },
+});
+
+@observer
+export default class Password extends Component {
+  static propTypes = {
+    onSubmit: PropTypes.func.isRequired,
+    isSubmitting: PropTypes.bool.isRequired,
+    signupRoute: PropTypes.string.isRequired,
+    loginRoute: PropTypes.string.isRequired,
+    status: MobxPropTypes.arrayOrObservableArray.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  form = new Form({
+    fields: {
+      email: {
+        label: this.context.intl.formatMessage(messages.emailLabel),
+        value: '',
+        validate: [required, email],
+      },
+    },
+  }, 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,
+      signupRoute,
+      loginRoute,
+      status,
+    } = 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>
+          {status.length > 0 && status.includes('sent') && (
+            <Infobox
+              type="success"
+              icon="checkbox-marked-circle-outline"
+            >
+              {intl.formatMessage(messages.successInfo)}
+            </Infobox>
+          )}
+          <Input
+            field={form.$('email')}
+            focus
+          />
+          {status.length > 0 && status.includes('no-user') && (
+            <p className="error-message center">{intl.formatMessage(messages.noUser)}</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 className="auth__links">
+          <Link to={loginRoute}>{intl.formatMessage(messages.loginLink)}</Link>
+          <Link to={signupRoute}>{intl.formatMessage(messages.signupLink)}</Link>
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/src/components/auth/Pricing.js b/src/components/auth/Pricing.js
new file mode 100644
index 000000000..761561a89
--- /dev/null
+++ b/src/components/auth/Pricing.js
@@ -0,0 +1,130 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+// import { Link } from 'react-router';
+
+// import Button from '../ui/Button';
+import Loader from '../ui/Loader';
+import Appear from '../ui/effects/Appear';
+import SubscriptionForm from '../../containers/ui/SubscriptionFormScreen';
+
+const messages = defineMessages({
+  headline: {
+    id: 'pricing.headline',
+    defaultMessage: '!!!Support Franz',
+  },
+  monthlySupportLabel: {
+    id: 'pricing.support.label',
+    defaultMessage: '!!!Select your support plan',
+  },
+  submitButtonLabel: {
+    id: 'pricing.submit.label',
+    defaultMessage: '!!!Support the development of Franz',
+  },
+  skipPayment: {
+    id: 'pricing.link.skipPayment',
+    defaultMessage: '!!!I don\'t want to support the development of Franz.',
+  },
+});
+
+@observer
+export default class Signup extends Component {
+  static propTypes = {
+    donor: MobxPropTypes.objectOrObservableObject.isRequired,
+    isLoading: PropTypes.bool.isRequired,
+    isLoadingUser: PropTypes.bool.isRequired,
+    onCloseSubscriptionWindow: PropTypes.func.isRequired,
+    skipAction: PropTypes.func.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  render() {
+    const {
+      donor,
+      isLoading,
+      isLoadingUser,
+      onCloseSubscriptionWindow,
+      skipAction,
+    } = this.props;
+    const { intl } = this.context;
+
+    return (
+      <div className="auth__scroll-container">
+        <div className="auth__container auth__container--signup">
+          <form className="franz-form auth__form">
+            <img
+              src="./assets/images/sm.png"
+              className="auth__logo auth__logo--sm"
+              alt=""
+            />
+            <h1>{intl.formatMessage(messages.headline)}</h1>
+            <div className="auth__letter">
+              {isLoadingUser && (
+                <p>Loading</p>
+              )}
+              {!isLoadingUser && (
+                donor.amount ? (
+                  <span>
+                    <p>
+                      Thank you so much for your previous donation of <strong>$ {donor.amount}</strong>.
+                      <br />
+                      Your support allowed us to get where we are today.
+                      <br />
+                    </p>
+                    <p>
+                      As an early supporter, you get <strong>a lifetime premium supporter license</strong> without any
+                      additional charges.
+                    </p>
+                    <p>
+                      However, If you want to keep supporting us, you are more than welcome to subscribe to a plan.
+                      <br /><br />
+                    </p>
+                  </span>
+                ) : (
+                  <span>
+                    <p>
+                      We built Franz with a lot of effort, manpower and love,
+                      to bring you the best messaging experience.
+                      <br />
+                    </p>
+                    <p>
+                      Getting a Franz Premium Supporter License will allow us to keep improving Franz for you.
+                    </p>
+                  </span>
+                )
+              )}
+              <p>
+                Thanks for being a hero.
+              </p>
+              <p>
+                <strong>Stefan Malzner</strong>
+              </p>
+            </div>
+            <Loader loaded={!isLoading}>
+              <Appear transitionName="slideDown">
+                <span className="label">{intl.formatMessage(messages.monthlySupportLabel)}</span>
+                <SubscriptionForm
+                  onCloseWindow={onCloseSubscriptionWindow}
+                  showSkipOption
+                  skipAction={skipAction}
+                  hideInfo={Boolean(donor.amount)}
+                  skipButtonLabel={intl.formatMessage(messages.skipPayment)}
+                />
+                {/* <Link
+                  to={inviteRoute}
+                  className="franz-form__button franz-form__button--secondary auth__button auth__button--skip"
+                >
+                  {intl.formatMessage(messages.skipPayment)}
+                </Link> */}
+              </Appear>
+            </Loader>
+          </form>
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/src/components/auth/Signup.js b/src/components/auth/Signup.js
new file mode 100644
index 000000000..71ca16111
--- /dev/null
+++ b/src/components/auth/Signup.js
@@ -0,0 +1,206 @@
+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, email, minLength } from '../../helpers/validation-helpers';
+import Input from '../ui/Input';
+import Radio from '../ui/Radio';
+import Button from '../ui/Button';
+import Link from '../ui/Link';
+
+import { globalError as globalErrorPropType } from '../../prop-types';
+
+const messages = defineMessages({
+  headline: {
+    id: 'signup.headline',
+    defaultMessage: '!!!Sign up',
+  },
+  firstnameLabel: {
+    id: 'signup.firstname.label',
+    defaultMessage: '!!!Firstname',
+  },
+  lastnameLabel: {
+    id: 'signup.lastname.label',
+    defaultMessage: '!!!Lastname',
+  },
+  emailLabel: {
+    id: 'signup.email.label',
+    defaultMessage: '!!!Email address',
+  },
+  companyLabel: {
+    id: 'signup.company.label',
+    defaultMessage: '!!!Company',
+  },
+  passwordLabel: {
+    id: 'signup.password.label',
+    defaultMessage: '!!!Password',
+  },
+  legalInfo: {
+    id: 'signup.legal.info',
+    defaultMessage: '!!!By creating a Franz account you accept the',
+  },
+  terms: {
+    id: 'signup.legal.terms',
+    defaultMessage: '!!!Terms of service',
+  },
+  privacy: {
+    id: 'signup.legal.privacy',
+    defaultMessage: '!!!Privacy Statement',
+  },
+  submitButtonLabel: {
+    id: 'signup.submit.label',
+    defaultMessage: '!!!Create account',
+  },
+  loginLink: {
+    id: 'signup.link.login',
+    defaultMessage: '!!!Already have an account, sign in?',
+  },
+  emailDuplicate: {
+    id: 'signup.emailDuplicate',
+    defaultMessage: '!!!A user with that email address already exists',
+  },
+});
+
+@observer
+export default class Signup extends Component {
+  static propTypes = {
+    onSubmit: PropTypes.func.isRequired,
+    isSubmitting: PropTypes.bool.isRequired,
+    loginRoute: PropTypes.string.isRequired,
+    error: globalErrorPropType.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  form = new Form({
+    fields: {
+      accountType: {
+        value: 'individual',
+        validate: [required],
+        options: [{
+          value: 'individual',
+          label: 'Individual',
+        }, {
+          value: 'non-profit',
+          label: 'Non-Profit',
+        }, {
+          value: 'company',
+          label: 'Company',
+        }],
+      },
+      firstname: {
+        label: this.context.intl.formatMessage(messages.firstnameLabel),
+        value: '',
+        validate: [required],
+      },
+      lastname: {
+        label: this.context.intl.formatMessage(messages.lastnameLabel),
+        value: '',
+        validate: [required],
+      },
+      email: {
+        label: this.context.intl.formatMessage(messages.emailLabel),
+        value: '',
+        validate: [required, email],
+      },
+      organization: {
+        label: this.context.intl.formatMessage(messages.companyLabel),
+        value: '', // TODO: make required when accountType: company
+      },
+      password: {
+        label: this.context.intl.formatMessage(messages.passwordLabel),
+        value: '',
+        validate: [required, minLength(6)],
+        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, loginRoute, error } = this.props;
+
+    return (
+      <div className="auth__scroll-container">
+        <div className="auth__container auth__container--signup">
+          <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>
+            <Radio field={form.$('accountType')} showLabel={false} />
+            <div className="grid__row">
+              <Input field={form.$('firstname')} focus />
+              <Input field={form.$('lastname')} />
+            </div>
+            <Input field={form.$('email')} />
+            <Input
+              field={form.$('password')}
+              showPasswordToggle
+              scorePassword
+            />
+            {form.$('accountType').value === 'company' && (
+              <Input field={form.$('organization')} />
+            )}
+            {error.code === 'email-duplicate' && (
+              <p className="error-message center">{intl.formatMessage(messages.emailDuplicate)}</p>
+            )}
+            {isSubmitting ? (
+              <Button
+                className="auth__button is-loading"
+                label={`${intl.formatMessage(messages.submitButtonLabel)} ...`}
+                loaded={false}
+                disabled
+              />
+            ) : (
+              <Button
+                type="submit"
+                className="auth__button"
+                label={intl.formatMessage(messages.submitButtonLabel)}
+              />
+            )}
+            <p className="legal">
+              {intl.formatMessage(messages.legalInfo)}
+              <br />
+              <Link
+                to="http://meetfranz.com/terms"
+                target="_blank"
+                className="link"
+              >
+                {intl.formatMessage(messages.terms)}
+              </Link>
+              &nbsp;&amp;&nbsp;
+              <Link
+                to="http://meetfranz.com/privacy"
+                target="_blank"
+                className="link"
+              >
+                {intl.formatMessage(messages.privacy)}
+              </Link>.
+            </p>
+          </form>
+          <div className="auth__links">
+            <Link to={loginRoute}>{intl.formatMessage(messages.loginLink)}</Link>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/src/components/auth/Welcome.js b/src/components/auth/Welcome.js
new file mode 100644
index 000000000..06b10ecfe
--- /dev/null
+++ b/src/components/auth/Welcome.js
@@ -0,0 +1,69 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+
+import Link from '../ui/Link';
+
+const messages = defineMessages({
+  signupButton: {
+    id: 'welcome.signupButton',
+    defaultMessage: '!!!Create a free account',
+  },
+  loginButton: {
+    id: 'welcome.loginButton',
+    defaultMessage: '!!!Login to your account',
+  },
+});
+
+@observer
+export default class Login extends Component {
+  static propTypes = {
+    loginRoute: PropTypes.string.isRequired,
+    signupRoute: PropTypes.string.isRequired,
+    recipes: MobxPropTypes.arrayOrObservableArray.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  render() {
+    const { intl } = this.context;
+    const {
+      loginRoute,
+      signupRoute,
+      recipes,
+    } = this.props;
+
+    return (
+      <div className="welcome">
+        <div className="welcome__content">
+          <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>
+          </div>
+        </div>
+        <div className="welcome__buttons">
+          <Link to={signupRoute} className="button">
+            {intl.formatMessage(messages.signupButton)}
+          </Link>
+          <Link to={loginRoute} className="button">
+            {intl.formatMessage(messages.loginButton)}
+          </Link>
+        </div>
+        <div className="welcome__featured-services">
+          {recipes.map(recipe => (
+            <img
+              key={recipe.id}
+              src={recipe.icons.svg}
+              className="welcome__featured-service"
+              alt=""
+            />
+          ))}
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js
new file mode 100644
index 000000000..f60c170a8
--- /dev/null
+++ b/src/components/layout/AppLayout.js
@@ -0,0 +1,148 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+
+import InfoBar from '../ui/InfoBar';
+import globalMessages from '../../i18n/globalMessages';
+
+function createMarkup(HTMLString) {
+  return { __html: HTMLString };
+}
+
+const messages = defineMessages({
+  servicesUpdated: {
+    id: 'infobar.servicesUpdated',
+    defaultMessage: '!!!Your services have been updated.',
+  },
+  updateAvailable: {
+    id: 'infobar.updateAvailable',
+    defaultMessage: '!!!A new update for Franz is available.',
+  },
+  buttonReloadServices: {
+    id: 'infobar.buttonReloadServices',
+    defaultMessage: '!!!Reload services',
+  },
+  buttonInstallUpdate: {
+    id: 'infobar.buttonInstallUpdate',
+    defaultMessage: '!!!Restart & install update',
+  },
+  requiredRequestsFailed: {
+    id: 'infobar.requiredRequestsFailed',
+    defaultMessage: '!!!Could not load services and user information',
+  },
+});
+
+@observer
+export default class AppLayout extends Component {
+  static propTypes = {
+    sidebar: PropTypes.element.isRequired,
+    services: PropTypes.element.isRequired,
+    children: PropTypes.element,
+    news: MobxPropTypes.arrayOrObservableArray.isRequired,
+    isOnline: PropTypes.bool.isRequired,
+    showServicesUpdatedInfoBar: PropTypes.bool.isRequired,
+    appUpdateIsDownloaded: PropTypes.bool.isRequired,
+    removeNewsItem: PropTypes.func.isRequired,
+    reloadServicesAfterUpdate: PropTypes.func.isRequired,
+    installAppUpdate: PropTypes.func.isRequired,
+    showRequiredRequestsError: PropTypes.bool.isRequired,
+    areRequiredRequestsSuccessful: PropTypes.bool.isRequired,
+    retryRequiredRequests: PropTypes.func.isRequired,
+    areRequiredRequestsLoading: PropTypes.bool.isRequired,
+  };
+
+  static defaultProps = {
+    children: [],
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  render() {
+    const {
+      sidebar,
+      services,
+      children,
+      isOnline,
+      news,
+      showServicesUpdatedInfoBar,
+      appUpdateIsDownloaded,
+      removeNewsItem,
+      reloadServicesAfterUpdate,
+      installAppUpdate,
+      showRequiredRequestsError,
+      areRequiredRequestsSuccessful,
+      retryRequiredRequests,
+      areRequiredRequestsLoading,
+    } = this.props;
+
+    const { intl } = this.context;
+
+    return (
+      <div>
+        <div className="app">
+          {sidebar}
+          <div className="app__service">
+            {news.length > 0 && news.map(item => (
+              <InfoBar
+                key={item.id}
+                position="top"
+                type={item.type}
+                sticky={item.sticky}
+                onHide={() => removeNewsItem({ newsId: item.id })}
+              >
+                <span dangerouslySetInnerHTML={createMarkup(item.message)} />
+              </InfoBar>
+            ))}
+            {!isOnline && (
+              <InfoBar
+                type="danger"
+              >
+                <span className="mdi mdi-flash" />
+                {intl.formatMessage(globalMessages.notConnectedToTheInternet)}
+              </InfoBar>
+            )}
+            {!areRequiredRequestsSuccessful && showRequiredRequestsError && (
+              <InfoBar
+                type="danger"
+                ctaLabel="Try again"
+                ctaLoading={areRequiredRequestsLoading}
+                sticky
+                onClick={retryRequiredRequests}
+              >
+                <span className="mdi mdi-flash" />
+                {intl.formatMessage(messages.requiredRequestsFailed)}
+              </InfoBar>
+            )}
+            {showServicesUpdatedInfoBar && (
+              <InfoBar
+                type="primary"
+                ctaLabel={intl.formatMessage(messages.buttonReloadServices)}
+                onClick={reloadServicesAfterUpdate}
+                sticky
+              >
+                <span className="mdi mdi-power-plug" />
+                {intl.formatMessage(messages.servicesUpdated)}
+              </InfoBar>
+            )}
+            {appUpdateIsDownloaded && (
+              <InfoBar
+                type="primary"
+                ctaLabel={intl.formatMessage(messages.buttonInstallUpdate)}
+                onClick={installAppUpdate}
+                sticky
+              >
+                <span className="mdi mdi-information" />
+                {intl.formatMessage(messages.updateAvailable)}
+              </InfoBar>
+            )}
+            {services}
+          </div>
+        </div>
+        {children}
+      </div>
+    );
+  }
+}
diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.js
new file mode 100644
index 000000000..4aee1ec60
--- /dev/null
+++ b/src/components/layout/Sidebar.js
@@ -0,0 +1,75 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import ReactTooltip from 'react-tooltip';
+import { defineMessages, intlShape } from 'react-intl';
+
+import Tabbar from '../services/tabs/Tabbar';
+import { ctrlKey } from '../../environment';
+
+const messages = defineMessages({
+  settings: {
+    id: 'sidebar.settings',
+    defaultMessage: '!!!Settings',
+  },
+});
+
+export default class Sidebar extends Component {
+  static propTypes = {
+    openSettings: PropTypes.func.isRequired,
+    isPremiumUser: PropTypes.bool,
+  }
+
+  static defaultProps = {
+    isPremiumUser: false,
+  }
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  state = {
+    tooltipEnabled: true,
+  };
+
+  enableToolTip() {
+    this.setState({ tooltipEnabled: true });
+  }
+
+  disableToolTip() {
+    this.setState({ tooltipEnabled: false });
+  }
+
+  render() {
+    const { openSettings, isPremiumUser } = this.props;
+    const { intl } = this.context;
+    return (
+      <div className="sidebar">
+        <Tabbar
+          {...this.props}
+          enableToolTip={() => this.enableToolTip()}
+          disableToolTip={() => this.disableToolTip()}
+        />
+        <button
+          onClick={openSettings}
+          className="sidebar__settings-button"
+          data-tip={`Settings (${ctrlKey}+,)`}
+        >
+          {isPremiumUser && (
+            <span className="emoji">
+              <img src="./assets/images/emoji/star.png" alt="" />
+            </span>
+          )}
+          <img
+            src="./assets/images/logo.svg"
+            className="sidebar__logo"
+            alt=""
+          />
+          {intl.formatMessage(messages.settings)}
+        </button>
+        {this.state.tooltipEnabled && (
+          <ReactTooltip place="right" type="dark" effect="solid" />
+        )}
+      </div>
+    );
+  }
+}
diff --git a/src/components/services/content/ServiceWebview.js b/src/components/services/content/ServiceWebview.js
new file mode 100644
index 000000000..043ff42ea
--- /dev/null
+++ b/src/components/services/content/ServiceWebview.js
@@ -0,0 +1,73 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { autorun } from 'mobx';
+import { observer } from 'mobx-react';
+import Webview from 'react-electron-web-view';
+import classnames from 'classnames';
+
+import ServiceModel from '../../../models/Service';
+
+@observer
+export default class ServiceWebview extends Component {
+  static propTypes = {
+    service: PropTypes.instanceOf(ServiceModel).isRequired,
+    setWebviewReference: PropTypes.func.isRequired,
+  };
+
+  static defaultProps = {
+    isActive: false,
+  };
+
+  state = {
+    forceRepaint: false,
+  };
+
+  componentDidMount() {
+    autorun(() => {
+      if (this.props.service.isActive) {
+        this.setState({ forceRepaint: true });
+        setTimeout(() => {
+          this.setState({ forceRepaint: false });
+        }, 100);
+      }
+    });
+  }
+
+  webview = null;
+
+  render() {
+    const {
+      service,
+      setWebviewReference,
+    } = this.props;
+
+    const webviewClasses = classnames({
+      services__webview: true,
+      'is-active': service.isActive,
+      'services__webview--force-repaint': this.state.forceRepaint,
+    });
+
+    return (
+      <div className={webviewClasses}>
+        <Webview
+          ref={(element) => { this.webview = element; }}
+
+          autosize
+          src={service.url}
+          preload="./webview/plugin.js"
+          partition={`persist:service-${service.id}`}
+
+          onDidAttach={() => setWebviewReference({
+            serviceId: service.id,
+            webview: this.webview.view,
+          })}
+
+          useragent={service.userAgent}
+
+          disablewebsecurity
+          allowpopups
+        />
+      </div>
+    );
+  }
+}
diff --git a/src/components/services/content/Services.js b/src/components/services/content/Services.js
new file mode 100644
index 000000000..03c68b06f
--- /dev/null
+++ b/src/components/services/content/Services.js
@@ -0,0 +1,81 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
+import { Link } from 'react-router';
+import { defineMessages, intlShape } from 'react-intl';
+
+import Webview from './ServiceWebview';
+import Appear from '../../ui/effects/Appear';
+
+const messages = defineMessages({
+  welcome: {
+    id: 'services.welcome',
+    defaultMessage: '!!!Welcome to Franz',
+  },
+  getStarted: {
+    id: 'services.getStarted',
+    defaultMessage: '!!!Get started',
+  },
+});
+
+@observer
+export default class Services extends Component {
+  static propTypes = {
+    services: MobxPropTypes.arrayOrObservableArray.isRequired,
+    setWebviewReference: PropTypes.func.isRequired,
+    handleIPCMessage: PropTypes.func.isRequired,
+    openWindow: PropTypes.func.isRequired,
+  };
+
+  static defaultProps = {
+    services: [],
+    activeService: '',
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  render() {
+    const {
+      services,
+      handleIPCMessage,
+      setWebviewReference,
+      openWindow,
+    } = this.props;
+    const { intl } = this.context;
+
+    return (
+      <div className="services">
+        {services.length === 0 && (
+          <Appear
+            timeout={1500}
+            transitionName="slideUp"
+          >
+            <div className="services__no-service">
+              <img src="./assets/images/logo.svg" alt="" />
+              <h1>{intl.formatMessage(messages.welcome)}</h1>
+              <Appear
+                timeout={300}
+                transitionName="slideUp"
+              >
+                <Link to="/settings/recipes" className="button">
+                  {intl.formatMessage(messages.getStarted)}
+                </Link>
+              </Appear>
+            </div>
+          </Appear>
+        )}
+        {services.map(service => (
+          <Webview
+            key={service.id}
+            service={service}
+            handleIPCMessage={handleIPCMessage}
+            setWebviewReference={setWebviewReference}
+            openWindow={openWindow}
+          />
+        ))}
+      </div>
+    );
+  }
+}
diff --git a/src/components/services/tabs/TabBarSortableList.js b/src/components/services/tabs/TabBarSortableList.js
new file mode 100644
index 000000000..c0a68d1a5
--- /dev/null
+++ b/src/components/services/tabs/TabBarSortableList.js
@@ -0,0 +1,44 @@
+import React from 'react';
+import { observer } from 'mobx-react';
+import { SortableContainer } from 'react-sortable-hoc';
+
+import TabItem from './TabItem';
+import { ctrlKey } from '../../../environment';
+
+export default SortableContainer(observer(({
+  services,
+  setActive,
+  reload,
+  toggleNotifications,
+  deleteService,
+  disableService,
+  openSettings,
+}) => (
+  <ul
+    className="tabs"
+  >
+    {services.map((service, index) => (
+      <TabItem
+        key={service.id}
+        clickHandler={() => setActive({ serviceId: service.id })}
+        service={service}
+        index={index}
+        shortcutIndex={index + 1}
+        reload={() => reload({ serviceId: service.id })}
+        toggleNotifications={() => toggleNotifications({ serviceId: service.id })}
+        deleteService={() => deleteService({ serviceId: service.id })}
+        disableService={() => disableService({ serviceId: service.id })}
+        openSettings={openSettings}
+      />
+    ))}
+    <li>
+      <button
+        className="sidebar__add-service"
+        onClick={() => openSettings({ path: 'recipes' })}
+        data-tip={`Add new service (${ctrlKey}+N)`}
+      >
+        <span className="mdi mdi-plus" />
+      </button>
+    </li>
+  </ul>
+)));
diff --git a/src/components/services/tabs/TabItem.js b/src/components/services/tabs/TabItem.js
new file mode 100644
index 000000000..9e03d2e21
--- /dev/null
+++ b/src/components/services/tabs/TabItem.js
@@ -0,0 +1,136 @@
+import { remote } from 'electron';
+import React, { Component } from 'react';
+import { defineMessages, intlShape } from 'react-intl';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import classnames from 'classnames';
+import { SortableElement } from 'react-sortable-hoc';
+
+import ServiceModel from '../../../models/Service';
+import { ctrlKey } from '../../../environment';
+
+const { Menu } = remote;
+
+const messages = defineMessages({
+  reload: {
+    id: 'tabs.item.reload',
+    defaultMessage: '!!!Reload',
+  },
+  edit: {
+    id: 'tabs.item.edit',
+    defaultMessage: '!!!Edit',
+  },
+  disableNotifications: {
+    id: 'tabs.item.disableNotifications',
+    defaultMessage: '!!!Disable notifications',
+  },
+  enableNotifications: {
+    id: 'tabs.item.enableNotification',
+    defaultMessage: '!!!Enable notifications',
+  },
+  disableService: {
+    id: 'tabs.item.disableService',
+    defaultMessage: '!!!Disable Service',
+  },
+  deleteService: {
+    id: 'tabs.item.deleteService',
+    defaultMessage: '!!!Delete Service',
+  },
+});
+
+@observer
+class TabItem extends Component {
+  static propTypes = {
+    service: PropTypes.instanceOf(ServiceModel).isRequired,
+    clickHandler: PropTypes.func.isRequired,
+    shortcutIndex: PropTypes.number.isRequired,
+    reload: PropTypes.func.isRequired,
+    toggleNotifications: PropTypes.func.isRequired,
+    openSettings: PropTypes.func.isRequired,
+    deleteService: PropTypes.func.isRequired,
+    disableService: PropTypes.func.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  render() {
+    const {
+      service,
+      clickHandler,
+      shortcutIndex,
+      reload,
+      toggleNotifications,
+      deleteService,
+      disableService,
+      openSettings,
+    } = this.props;
+    const { intl } = this.context;
+
+
+    const menuTemplate = [{
+      label: service.name || service.recipe.name,
+      enabled: false,
+    }, {
+      type: 'separator',
+    }, {
+      label: intl.formatMessage(messages.reload),
+      click: reload,
+    }, {
+      label: intl.formatMessage(messages.edit),
+      click: () => openSettings({
+        path: `services/edit/${service.id}`,
+      }),
+    }, {
+      type: 'separator',
+    }, {
+      label: service.isNotificationEnabled
+        ? intl.formatMessage(messages.disableNotifications)
+        : intl.formatMessage(messages.enableNotifications),
+      click: () => toggleNotifications(),
+    }, {
+      label: intl.formatMessage(messages.disableService),
+      click: () => disableService(),
+    }, {
+      type: 'separator',
+    }, {
+      label: intl.formatMessage(messages.deleteService),
+      click: () => deleteService(),
+    }];
+    const menu = Menu.buildFromTemplate(menuTemplate);
+
+    return (
+      <li
+        className={classnames({
+          'tab-item': true,
+          'is-active': service.isActive,
+          'has-custom-icon': service.hasCustomIcon,
+        })}
+        onClick={clickHandler}
+        onContextMenu={() => menu.popup(remote.getCurrentWindow())}
+        data-tip={`${service.name} ${shortcutIndex <= 9 ? `(${ctrlKey}+${shortcutIndex})` : ''}`}
+      >
+        <img
+          src={service.icon}
+          className="tab-item__icon"
+          alt=""
+        />
+        {service.unreadDirectMessageCount > 0 && (
+          <span className="tab-item__message-count">
+            {service.unreadDirectMessageCount}
+          </span>
+        )}
+        {service.unreadIndirectMessageCount > 0
+          && service.unreadDirectMessageCount === 0
+          && service.isIndirectMessageBadgeEnabled && (
+            <span className="tab-item__message-count is-indirect">
+            •
+            </span>
+          )}
+      </li>
+    );
+  }
+}
+
+export default SortableElement(TabItem);
diff --git a/src/components/services/tabs/Tabbar.js b/src/components/services/tabs/Tabbar.js
new file mode 100644
index 000000000..fdb2c0a59
--- /dev/null
+++ b/src/components/services/tabs/Tabbar.js
@@ -0,0 +1,77 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
+
+import TabBarSortableList from './TabBarSortableList';
+
+@observer
+export default class TabBar extends Component {
+  static propTypes = {
+    services: MobxPropTypes.arrayOrObservableArray.isRequired,
+    setActive: PropTypes.func.isRequired,
+    openSettings: PropTypes.func.isRequired,
+    enableToolTip: PropTypes.func.isRequired,
+    disableToolTip: PropTypes.func.isRequired,
+    reorder: PropTypes.func.isRequired,
+    reload: PropTypes.func.isRequired,
+    toggleNotifications: PropTypes.func.isRequired,
+    deleteService: PropTypes.func.isRequired,
+    updateService: PropTypes.func.isRequired,
+  }
+
+  onSortEnd = ({ oldIndex, newIndex }) => {
+    const {
+      enableToolTip,
+      reorder,
+    } = this.props;
+
+    enableToolTip();
+    reorder({ oldIndex, newIndex });
+  };
+
+  disableService = ({ serviceId }) => {
+    const { updateService } = this.props;
+
+    if (serviceId) {
+      updateService({
+        serviceId,
+        serviceData: {
+          isEnabled: false,
+        },
+        redirect: false,
+      });
+    }
+  }
+
+  render() {
+    const {
+      services,
+      setActive,
+      openSettings,
+      disableToolTip,
+      reload,
+      toggleNotifications,
+      deleteService,
+    } = this.props;
+
+    return (
+      <div>
+        <TabBarSortableList
+          services={services}
+          setActive={setActive}
+          onSortEnd={this.onSortEnd}
+          onSortStart={disableToolTip}
+          reload={reload}
+          toggleNotifications={toggleNotifications}
+          deleteService={deleteService}
+          disableService={this.disableService}
+          openSettings={openSettings}
+          distance={20}
+          axis="y"
+          lockAxis="y"
+          helperClass="is-reordering"
+        />
+      </div>
+    );
+  }
+}
diff --git a/src/components/settings/SettingsLayout.js b/src/components/settings/SettingsLayout.js
new file mode 100644
index 000000000..d5392ddba
--- /dev/null
+++ b/src/components/settings/SettingsLayout.js
@@ -0,0 +1,56 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+
+import { oneOrManyChildElements } from '../../prop-types';
+import Appear from '../ui/effects/Appear';
+
+@observer
+export default class SettingsLayout extends Component {
+  static propTypes = {
+    navigation: PropTypes.element.isRequired,
+    children: oneOrManyChildElements.isRequired,
+    closeSettings: PropTypes.func.isRequired,
+  };
+
+  componentWillMount() {
+    document.addEventListener('keydown', this.handleKeyDown.bind(this), false);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.handleKeyDown.bind(this), false);
+  }
+
+  handleKeyDown(e) {
+    if (e.keyCode === 27) { // escape key
+      this.props.closeSettings();
+    }
+  }
+
+  render() {
+    const {
+      navigation,
+      children,
+      closeSettings,
+    } = this.props;
+
+    return (
+      <Appear transitionName="fadeIn-fast">
+        <div className="settings-wrapper">
+          <button
+            className="settings-wrapper__action"
+            onClick={closeSettings}
+          />
+          <div className="settings franz-form">
+            {navigation}
+            {children}
+            <button
+              className="settings__close mdi mdi-close"
+              onClick={closeSettings}
+            />
+          </div>
+        </div>
+      </Appear>
+    );
+  }
+}
diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js
new file mode 100644
index 000000000..75dbdef49
--- /dev/null
+++ b/src/components/settings/account/AccountDashboard.js
@@ -0,0 +1,286 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
+import { defineMessages, intlShape, FormattedMessage } from 'react-intl';
+import ReactTooltip from 'react-tooltip';
+import moment from 'moment';
+
+import Loader from '../../ui/Loader';
+import Button from '../../ui/Button';
+import Infobox from '../../ui/Infobox';
+import Link from '../../ui/Link';
+import SubscriptionForm from '../../../containers/ui/SubscriptionFormScreen';
+
+const messages = defineMessages({
+  headline: {
+    id: 'settings.account.headline',
+    defaultMessage: '!!!Account',
+  },
+  headlineSubscription: {
+    id: 'settings.account.headlineSubscription',
+    defaultMessage: '!!!Your Subscription',
+  },
+  headlineUpgrade: {
+    id: 'settings.account.headlineUpgrade',
+    defaultMessage: '!!!Upgrade your Account',
+  },
+  headlineInvoices: {
+    id: 'settings.account.headlineInvoices',
+    defaultMessage: '!!Invoices',
+  },
+  manageSubscriptionButtonLabel: {
+    id: 'settings.account.manageSubscription.label',
+    defaultMessage: '!!!Manage your subscription',
+  },
+  accountTypeBasic: {
+    id: 'settings.account.accountType.basic',
+    defaultMessage: '!!!Basic Account',
+  },
+  accountTypePremium: {
+    id: 'settings.account.accountType.premium',
+    defaultMessage: '!!!Premium Supporter Account',
+  },
+  accountEditButton: {
+    id: 'settings.account.account.editButton',
+    defaultMessage: '!!!Edit Account',
+  },
+  invoiceDownload: {
+    id: 'settings.account.invoiceDownload',
+    defaultMessage: '!!!Download',
+  },
+  userInfoRequestFailed: {
+    id: 'settings.account.userInfoRequestFailed',
+    defaultMessage: '!!!Could not load user information',
+  },
+  tryReloadUserInfoRequest: {
+    id: 'settings.account.tryReloadUserInfoRequest',
+    defaultMessage: '!!!Try again',
+  },
+  miningActive: {
+    id: 'settings.account.mining.active',
+    defaultMessage: '!!!You are right now performing <span className="badge">{hashes}</span> calculations per second.',
+  },
+  miningThankYou: {
+    id: 'settings.account.mining.thankyou',
+    defaultMessage: '!!!Thank you for supporting Franz with your processing power.',
+  },
+  miningMoreInfo: {
+    id: 'settings.account.mining.moreInformation',
+    defaultMessage: '!!!Get more information',
+  },
+  cancelMining: {
+    id: 'settings.account.mining.cancel',
+    defaultMessage: '!!!Cancel mining',
+  },
+});
+
+@observer
+export default class AccountDashboard extends Component {
+  static propTypes = {
+    user: MobxPropTypes.observableObject.isRequired,
+    orders: MobxPropTypes.arrayOrObservableArray.isRequired,
+    hashrate: PropTypes.number.isRequired,
+    isLoading: PropTypes.bool.isRequired,
+    isLoadingOrdersInfo: PropTypes.bool.isRequired,
+    isLoadingPlans: PropTypes.bool.isRequired,
+    isCreatingPaymentDashboardUrl: PropTypes.bool.isRequired,
+    userInfoRequestFailed: PropTypes.bool.isRequired,
+    retryUserInfoRequest: PropTypes.func.isRequired,
+    openDashboard: PropTypes.func.isRequired,
+    openExternalUrl: PropTypes.func.isRequired,
+    onCloseSubscriptionWindow: PropTypes.func.isRequired,
+    stopMiner: PropTypes.func.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  render() {
+    const {
+      user,
+      orders,
+      hashrate,
+      isLoading,
+      isCreatingPaymentDashboardUrl,
+      openDashboard,
+      openExternalUrl,
+      isLoadingOrdersInfo,
+      isLoadingPlans,
+      userInfoRequestFailed,
+      retryUserInfoRequest,
+      onCloseSubscriptionWindow,
+      stopMiner,
+    } = 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">
+          {isLoading && (
+            <Loader />
+          )}
+
+          {!isLoading && userInfoRequestFailed && (
+            <div>
+              <Infobox
+                icon="alert"
+                type="danger"
+                ctaLabel={intl.formatMessage(messages.tryReloadUserInfoRequest)}
+                ctaLoading={isLoading}
+                ctaOnClick={retryUserInfoRequest}
+              >
+                {intl.formatMessage(messages.userInfoRequestFailed)}
+              </Infobox>
+            </div>
+          )}
+
+          {!userInfoRequestFailed && (
+            <div>
+              {!isLoading && (
+                <div className="account">
+                  <div className="account__box account__box--flex">
+                    <div className="account__avatar">
+                      <img
+                        src="./assets/images/logo.svg"
+                        alt=""
+                      />
+                      {user.isPremium && (
+                        <span
+                          className="account__avatar-premium emoji"
+                          data-tip="Premium Supporter Account"
+                        >
+                          <img src="./assets/images/emoji/star.png" alt="" />
+                        </span>
+                      )}
+                    </div>
+                    <div className="account__info">
+                      <h2>
+                        {`${user.firstname} ${user.lastname}`}
+                      </h2>
+                      {user.organization && `${user.organization}, `}
+                      {user.email}<br />
+                      {!user.isPremium && (
+                        <span className="badge badge">{intl.formatMessage(messages.accountTypeBasic)}</span>
+                      )}
+                      {user.isPremium && (
+                        <span className="badge badge--premium">{intl.formatMessage(messages.accountTypePremium)}</span>
+                      )}
+                    </div>
+                    <Link to="/settings/user/edit" className="button">
+                      {intl.formatMessage(messages.accountEditButton)}
+                    </Link>
+
+                    {user.emailValidated}
+                  </div>
+                </div>
+              )}
+
+              {user.isSubscriptionOwner && (
+                isLoadingOrdersInfo ? (
+                  <Loader />
+                ) : (
+                  <div className="account franz-form">
+                    {orders.length > 0 && (
+                      <div>
+                        <div className="account__box">
+                          <h2>{intl.formatMessage(messages.headlineSubscription)}</h2>
+                          <div className="account__subscription">
+                            {orders[0].name}
+                            <span className="badge">{orders[0].price}</span>
+                            <Button
+                              label={intl.formatMessage(messages.manageSubscriptionButtonLabel)}
+                              className="account__subscription-button franz-form__button--inverted"
+                              loaded={!isCreatingPaymentDashboardUrl}
+                              onClick={() => openDashboard()}
+                            />
+                          </div>
+                        </div>
+                        <div className="account__box account__box--last">
+                          <h2>{intl.formatMessage(messages.headlineInvoices)}</h2>
+                          <table className="invoices">
+                            <tbody>
+                              {orders.map(order => (
+                                <tr key={order.id}>
+                                  <td className="invoices__date">
+                                    {moment(order.date).format('DD.MM.YYYY')}
+                                  </td>
+                                  <td className="invoices__action">
+                                    <button
+                                      onClick={() => openExternalUrl(order.invoiceUrl)}
+                                    >
+                                      {intl.formatMessage(messages.invoiceDownload)}
+                                    </button>
+                                  </td>
+                                </tr>
+                              ))}
+                            </tbody>
+                          </table>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                )
+              )}
+
+              {user.isMiner && (
+                <div className="account franz-form">
+                  <div className="account__box">
+                    <h2>{intl.formatMessage(messages.headlineSubscription)}</h2>
+                    <div className="account__subscription">
+                      <div>
+                        <p>{intl.formatMessage(messages.miningThankYou)}</p>
+                        <FormattedMessage
+                          {...messages.miningActive}
+                          values={{
+                            hashes: <span className="badge">{hashrate.toFixed(2)}</span>,
+                          }}
+                          tagName="p"
+                        />
+                        <p>
+                          <Link
+                            to="http://meetfranz.com/mining"
+                            target="_blank"
+                            className="link"
+                          >
+                            {intl.formatMessage(messages.miningMoreInfo)}
+                          </Link>
+                        </p>
+                      </div>
+                      <Button
+                        label={intl.formatMessage(messages.cancelMining)}
+                        className="account__subscription-button franz-form__button--inverted"
+                        onClick={() => stopMiner()}
+                      />
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {!user.isPremium && !user.isMiner && (
+                isLoadingPlans ? (
+                  <Loader />
+                ) : (
+                  <div className="account franz-form">
+                    <div className="account__box account__box--last">
+                      <h2>{intl.formatMessage(messages.headlineUpgrade)}</h2>
+                      <SubscriptionForm
+                        onCloseWindow={onCloseSubscriptionWindow}
+                      />
+                    </div>
+                  </div>
+                )
+              )}
+            </div>
+          )}
+        </div>
+        <ReactTooltip place="right" type="dark" effect="solid" />
+      </div>
+    );
+  }
+}
diff --git a/src/components/settings/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.js
new file mode 100644
index 000000000..3b21a7765
--- /dev/null
+++ b/src/components/settings/navigation/SettingsNavigation.js
@@ -0,0 +1,84 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { defineMessages, intlShape } from 'react-intl';
+
+import Link from '../../ui/Link';
+
+const messages = defineMessages({
+  availableServices: {
+    id: 'settings.navigation.availableServices',
+    defaultMessage: '!!!Available services',
+  },
+  yourServices: {
+    id: 'settings.navigation.yourServices',
+    defaultMessage: '!!!Your services',
+  },
+  account: {
+    id: 'settings.navigation.account',
+    defaultMessage: '!!!Account',
+  },
+  settings: {
+    id: 'settings.navigation.settings',
+    defaultMessage: '!!!Settings',
+  },
+  logout: {
+    id: 'settings.navigation.logout',
+    defaultMessage: '!!!Logout',
+  },
+});
+
+export default class SettingsNavigation extends Component {
+  static propTypes = {
+    serviceCount: PropTypes.number.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  render() {
+    const { serviceCount } = this.props;
+    const { intl } = this.context;
+
+    return (
+      <div className="settings-navigation">
+        <Link
+          to="/settings/recipes"
+          className="settings-navigation__link"
+          activeClassName="is-active"
+        >
+          {intl.formatMessage(messages.availableServices)}
+        </Link>
+        <Link
+          to="/settings/services"
+          className="settings-navigation__link"
+          activeClassName="is-active"
+        >
+          {intl.formatMessage(messages.yourServices)} <span className="badge">{serviceCount}</span>
+        </Link>
+        <Link
+          to="/settings/user"
+          className="settings-navigation__link"
+          activeClassName="is-active"
+        >
+          {intl.formatMessage(messages.account)}
+        </Link>
+        <Link
+          to="/settings/app"
+          className="settings-navigation__link"
+          activeClassName="is-active"
+        >
+          {intl.formatMessage(messages.settings)}
+        </Link>
+        <span className="settings-navigation__expander" />
+        <Link
+          to="/auth/logout"
+          className="settings-navigation__link"
+          activeClassName="is-active"
+        >
+          {intl.formatMessage(messages.logout)}
+        </Link>
+      </div>
+    );
+  }
+}
diff --git a/src/components/settings/recipes/RecipeItem.js b/src/components/settings/recipes/RecipeItem.js
new file mode 100644
index 000000000..7b2f64d26
--- /dev/null
+++ b/src/components/settings/recipes/RecipeItem.js
@@ -0,0 +1,34 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+
+import RecipePreviewModel from '../../../models/RecipePreview';
+
+@observer
+export default class RecipeItem extends Component {
+  static propTypes = {
+    recipe: PropTypes.instanceOf(RecipePreviewModel).isRequired,
+    onClick: PropTypes.func.isRequired,
+  };
+
+  render() {
+    const { recipe, onClick } = this.props;
+
+    return (
+      <button
+        className="recipe-teaser"
+        onClick={onClick}
+      >
+        {recipe.local && (
+          <span className="recipe-teaser__dev-badge">dev</span>
+        )}
+        <img
+          src={recipe.icons.svg}
+          className="recipe-teaser__icon"
+          alt=""
+        />
+        <span className="recipe-teaser__label">{recipe.name}</span>
+      </button>
+    );
+  }
+}
diff --git a/src/components/settings/recipes/RecipesDashboard.js b/src/components/settings/recipes/RecipesDashboard.js
new file mode 100644
index 000000000..02ea04e35
--- /dev/null
+++ b/src/components/settings/recipes/RecipesDashboard.js
@@ -0,0 +1,151 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+import { Link } from 'react-router';
+
+import SearchInput from '../../ui/SearchInput';
+import Infobox from '../../ui/Infobox';
+import RecipeItem from './RecipeItem';
+import Loader from '../../ui/Loader';
+import Appear from '../../ui/effects/Appear';
+
+const messages = defineMessages({
+  headline: {
+    id: 'settings.recipes.headline',
+    defaultMessage: '!!!Available Services',
+  },
+  mostPopularRecipes: {
+    id: 'settings.recipes.mostPopular',
+    defaultMessage: '!!!Most popular',
+  },
+  allRecipes: {
+    id: 'settings.recipes.all',
+    defaultMessage: '!!!All services',
+  },
+  devRecipes: {
+    id: 'settings.recipes.dev',
+    defaultMessage: '!!!Development',
+  },
+  nothingFound: {
+    id: 'settings.recipes.nothingFound',
+    defaultMessage: '!!!Sorry, but no service matched your search term.',
+  },
+  servicesSuccessfulAddedInfo: {
+    id: 'settings.recipes.servicesSuccessfulAddedInfo',
+    defaultMessage: '!!!Service successfully added',
+  },
+});
+
+@observer
+export default class RecipesDashboard extends Component {
+  static propTypes = {
+    recipes: MobxPropTypes.arrayOrObservableArray.isRequired,
+    isLoading: PropTypes.bool.isRequired,
+    hasLoadedRecipes: PropTypes.bool.isRequired,
+    showAddServiceInterface: PropTypes.func.isRequired,
+    searchRecipes: PropTypes.func.isRequired,
+    resetSearch: PropTypes.func.isRequired,
+    serviceStatus: MobxPropTypes.arrayOrObservableArray.isRequired,
+    devRecipesCount: PropTypes.number.isRequired,
+    searchNeedle: PropTypes.string,
+  };
+
+  static defaultProps = {
+    searchNeedle: '',
+  }
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  render() {
+    const {
+      recipes,
+      isLoading,
+      hasLoadedRecipes,
+      showAddServiceInterface,
+      searchRecipes,
+      resetSearch,
+      serviceStatus,
+      devRecipesCount,
+      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={e => searchRecipes(e)}
+            onReset={() => resetSearch()}
+            throttle
+          />
+        </div>
+        <div className="settings__body recipes">
+          {serviceStatus.length > 0 && serviceStatus.includes('created') && (
+            <Appear>
+              <Infobox
+                type="success"
+                icon="checkbox-marked-circle-outline"
+                dismissable
+              >
+                {intl.formatMessage(messages.servicesSuccessfulAddedInfo)}
+              </Infobox>
+            </Appear>
+          )}
+          {!searchNeedle && (
+            <div className="recipes__navigation">
+              <Link
+                to="/settings/recipes"
+                className="badge"
+                activeClassName="badge--primary"
+              >
+                {intl.formatMessage(messages.mostPopularRecipes)}
+              </Link>
+              <Link
+                to="/settings/recipes/all"
+                className="badge"
+                activeClassName="badge--primary"
+              >
+                {intl.formatMessage(messages.allRecipes)}
+              </Link>
+              {devRecipesCount > 0 && (
+                <Link
+                  to="/settings/recipes/dev"
+                  className="badge"
+                  activeClassName="badge--primary"
+                >
+                  {intl.formatMessage(messages.devRecipes)} ({devRecipesCount})
+                </Link>
+              )}
+            </div>
+          )}
+          {isLoading ? (
+            <Loader />
+          ) : (
+            <div className="recipes__list">
+              {hasLoadedRecipes && recipes.length === 0 && (
+                <p className="align-middle settings__empty-state">
+                  <span className="emoji">
+                    <img src="./assets/images/emoji/dontknow.png" alt="" />
+                  </span>
+                  {intl.formatMessage(messages.nothingFound)}
+                </p>
+              )}
+              {recipes.map(recipe => (
+                <RecipeItem
+                  key={recipe.id}
+                  recipe={recipe}
+                  onClick={() => showAddServiceInterface({ recipeId: recipe.id })}
+                />
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
new file mode 100644
index 000000000..fac0f6b9a
--- /dev/null
+++ b/src/components/settings/services/EditServiceForm.js
@@ -0,0 +1,277 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import { Link } from 'react-router';
+import { defineMessages, intlShape } from 'react-intl';
+import normalizeUrl from 'normalize-url';
+
+import Form from '../../../lib/Form';
+import User from '../../../models/User';
+import Recipe from '../../../models/Recipe';
+import Service from '../../../models/Service';
+import Tabs, { TabItem } from '../../ui/Tabs';
+import Input from '../../ui/Input';
+import Toggle from '../../ui/Toggle';
+import Button from '../../ui/Button';
+
+const messages = defineMessages({
+  saveService: {
+    id: 'settings.service.form.saveButton',
+    defaultMessage: '!!!Save service',
+  },
+  deleteService: {
+    id: 'settings.service.form.deleteButton',
+    defaultMessage: '!!!Delete Service',
+  },
+  availableServices: {
+    id: 'settings.service.form.availableServices',
+    defaultMessage: '!!!Available services',
+  },
+  yourServices: {
+    id: 'settings.service.form.yourServices',
+    defaultMessage: '!!!Your services',
+  },
+  addServiceHeadline: {
+    id: 'settings.service.form.addServiceHeadline',
+    defaultMessage: '!!!Add {name}',
+  },
+  editServiceHeadline: {
+    id: 'settings.service.form.editServiceHeadline',
+    defaultMessage: '!!!Edit {name}',
+  },
+  tabHosted: {
+    id: 'settings.service.form.tabHosted',
+    defaultMessage: '!!!Hosted',
+  },
+  tabOnPremise: {
+    id: 'settings.service.form.tabOnPremise',
+    defaultMessage: '!!!Self hosted ⭐️',
+  },
+  customUrlValidationError: {
+    id: 'settings.service.form.customUrlValidationError',
+    defaultMessage: '!!!Could not validate custom {name} server.',
+  },
+  customUrlPremiumInfo: {
+    id: 'settings.service.form.customUrlPremiumInfo',
+    defaultMessage: '!!!To add self hosted services, you need a Franz Premium Supporter Account.',
+  },
+  customUrlUpgradeAccount: {
+    id: 'settings.service.form.customUrlUpgradeAccount',
+    defaultMessage: '!!!Upgrade your account',
+  },
+  indirectMessageInfo: {
+    id: 'settings.service.form.indirectMessageInfo',
+    defaultMessage: '!!!You will be notified about all new messages in a channel, not just @username, @channel, @here, ...', // eslint-disable-line
+  },
+});
+
+@observer
+export default class EditServiceForm extends Component {
+  static propTypes = {
+    recipe: PropTypes.instanceOf(Recipe).isRequired,
+    // service: PropTypes.oneOfType([
+    //   PropTypes.object,
+    //   PropTypes.instanceOf(Service),
+    // ]),
+    service(props, propName) {
+      if (props.action === 'edit' && !(props[propName] instanceof Service)) {
+        return new Error(`'${propName}'' is expected to be of type 'Service'
+          when editing a Service`);
+      }
+
+      return null;
+    },
+    user: PropTypes.instanceOf(User).isRequired,
+    action: PropTypes.string.isRequired,
+    form: PropTypes.instanceOf(Form).isRequired,
+    onSubmit: PropTypes.func.isRequired,
+    onDelete: PropTypes.func.isRequired,
+    isSaving: PropTypes.bool.isRequired,
+    isDeleting: PropTypes.bool.isRequired,
+  };
+
+  static defaultProps = {
+    service: {},
+  };
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  state = {
+    isValidatingCustomUrl: false,
+  }
+
+  submit(e) {
+    const { recipe } = this.props;
+
+    e.preventDefault();
+    this.props.form.submit({
+      onSuccess: async (form) => {
+        const values = form.values();
+
+        let isValid = true;
+
+        if (recipe.validateUrl && values.customUrl) {
+          this.setState({ isValidatingCustomUrl: true });
+          try {
+            values.customUrl = normalizeUrl(values.customUrl);
+            isValid = await recipe.validateUrl(values.customUrl);
+          } catch (err) {
+            console.warn('ValidateURL', err);
+            isValid = false;
+          }
+        }
+
+        if (isValid) {
+          this.props.onSubmit(values);
+        } else {
+          form.invalidate('url-validation-error');
+        }
+
+        this.setState({ isValidatingCustomUrl: false });
+      },
+      onError: () => {},
+    });
+  }
+
+  render() {
+    const {
+      recipe,
+      service,
+      action,
+      user,
+      form,
+      isSaving,
+      isDeleting,
+      onDelete,
+    } = this.props;
+    const { intl } = this.context;
+
+    const { isValidatingCustomUrl } = this.state;
+
+    const deleteButton = isDeleting ? (
+      <Button
+        label={intl.formatMessage(messages.deleteService)}
+        loaded={false}
+        buttonType="secondary"
+        className="settings__delete-button"
+        disabled
+      />
+    ) : (
+      <Button
+        buttonType="danger"
+        label={intl.formatMessage(messages.deleteService)}
+        className="settings__delete-button"
+        onClick={onDelete}
+      />
+    );
+
+    return (
+      <div className="settings__main">
+        <div className="settings__header">
+          <span className="settings__header-item">
+            {action === 'add' ? (
+              <Link to="/settings/recipes">
+                {intl.formatMessage(messages.availableServices)}
+              </Link>
+            ) : (
+              <Link to="/settings/services">
+                {intl.formatMessage(messages.yourServices)}
+              </Link>
+            )}
+          </span>
+          <span className="separator" />
+          <span className="settings__header-item">
+            {action === 'add' ? (
+              intl.formatMessage(messages.addServiceHeadline, {
+                name: recipe.name,
+              })
+            ) : (
+              intl.formatMessage(messages.editServiceHeadline, {
+                name: service.name !== '' ? service.name : recipe.name,
+              })
+            )}
+          </span>
+        </div>
+        <div className="settings__body">
+          <form onSubmit={e => this.submit(e)} id="form">
+            <Input field={form.$('name')} focus />
+            {(recipe.hasTeamId || recipe.hasCustomUrl) && (
+              <Tabs
+                active={service.customUrl ? 1 : 0}
+              >
+                {recipe.hasTeamId && (
+                  <TabItem title={intl.formatMessage(messages.tabHosted)}>
+                    <Input field={form.$('team')} suffix={recipe.urlInputSuffix} />
+                  </TabItem>
+                )}
+                {recipe.hasCustomUrl && (
+                  <TabItem title={intl.formatMessage(messages.tabOnPremise)}>
+                    {user.isPremium ? (
+                      <div>
+                        <Input field={form.$('customUrl')} />
+                        {form.error === 'url-validation-error' && (
+                          <p className="franz-form__error">
+                            {intl.formatMessage(messages.customUrlValidationError, { name: recipe.name })}
+                          </p>
+                        )}
+                      </div>
+                    ) : (
+                      <div className="center premium-info">
+                        <p>{intl.formatMessage(messages.customUrlPremiumInfo)}</p>
+                        <p>
+                          <Link to="/settings/user" className="button">
+                            {intl.formatMessage(messages.customUrlUpgradeAccount)}
+                          </Link>
+                        </p>
+                      </div>
+                    )}
+                  </TabItem>
+                )}
+              </Tabs>
+            )}
+            <div className="settings__options">
+              <Toggle field={form.$('isNotificationEnabled')} />
+              {recipe.hasIndirectMessages && (
+                <div>
+                  <Toggle field={form.$('isIndirectMessageBadgeEnabled')} />
+                  <p className="settings__indirect-message-help">
+                    {intl.formatMessage(messages.indirectMessageInfo)}
+                  </p>
+                </div>
+              )}
+              <Toggle field={form.$('isEnabled')} />
+            </div>
+            {recipe.message && (
+              <p className="settings__message">
+                <span className="mdi mdi-information" />
+                {recipe.message}
+              </p>
+            )}
+          </form>
+        </div>
+        <div className="settings__controls">
+          {/* Delete Button */}
+          {action === 'edit' && deleteButton}
+
+          {/* Save Button */}
+          {isSaving || isValidatingCustomUrl ? (
+            <Button
+              type="submit"
+              label={intl.formatMessage(messages.saveService)}
+              loaded={false}
+              buttonType="secondary"
+              disabled
+            />
+          ) : (
+            <Button
+              type="submit"
+              label={intl.formatMessage(messages.saveService)}
+              htmlForm="form"
+            />
+          )}
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/src/components/settings/services/ServiceError.js b/src/components/settings/services/ServiceError.js
new file mode 100644
index 000000000..923053296
--- /dev/null
+++ b/src/components/settings/services/ServiceError.js
@@ -0,0 +1,68 @@
+import React, { Component } from 'react';
+import { observer } from 'mobx-react';
+import { Link } from 'react-router';
+import { defineMessages, intlShape } from 'react-intl';
+
+import Infobox from '../../ui/Infobox';
+import Button from '../../ui/Button';
+
+const messages = defineMessages({
+  headline: {
+    id: 'settings.service.error.headline',
+    defaultMessage: '!!!Error',
+  },
+  goBack: {
+    id: 'settings.service.error.goBack',
+    defaultMessage: '!!!Back to services',
+  },
+  availableServices: {
+    id: 'settings.service.form.availableServices',
+    defaultMessage: '!!!Available services',
+  },
+  errorMessage: {
+    id: 'settings.service.error.message',
+    defaultMessage: '!!!Could not load service recipe.',
+  },
+});
+
+@observer
+export default class EditServiceForm extends Component {
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  render() {
+    const { intl } = this.context;
+
+    return (
+      <div className="settings__main">
+        <div className="settings__header">
+          <span className="settings__header-item">
+            <Link to="/settings/recipes">
+              {intl.formatMessage(messages.availableServices)}
+            </Link>
+          </span>
+          <span className="separator" />
+          <span className="settings__header-item">
+            {intl.formatMessage(messages.headline)}
+          </span>
+        </div>
+        <div className="settings__body">
+          <Infobox
+            type="danger"
+            icon="alert"
+          >
+            {intl.formatMessage(messages.errorMessage)}
+          </Infobox>
+        </div>
+        <div className="settings__controls">
+          <Button
+            label={intl.formatMessage(messages.goBack)}
+            htmlForm="form"
+            onClick={() => window.history.back()}
+          />
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/src/components/settings/services/ServiceItem.js b/src/components/settings/services/ServiceItem.js
new file mode 100644
index 000000000..20d8581d0
--- /dev/null
+++ b/src/components/settings/services/ServiceItem.js
@@ -0,0 +1,98 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { defineMessages, intlShape } from 'react-intl';
+import ReactTooltip from 'react-tooltip';
+import { observer } from 'mobx-react';
+import classnames from 'classnames';
+
+import ServiceModel from '../../../models/Service';
+
+const messages = defineMessages({
+  tooltipIsDisabled: {
+    id: 'settings.services.tooltip.isDisabled',
+    defaultMessage: '!!!Service is disabled',
+  },
+  tooltipNotificationsDisabled: {
+    id: 'settings.services.tooltip.notificationsDisabled',
+    defaultMessage: '!!!Notifications are disabled',
+  },
+});
+
+@observer
+export default class ServiceItem extends Component {
+  static propTypes = {
+    service: PropTypes.instanceOf(ServiceModel).isRequired,
+    goToServiceForm: PropTypes.func.isRequired,
+  };
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  render() {
+    const {
+      service,
+      // toggleAction,
+      goToServiceForm,
+    } = this.props;
+    const { intl } = this.context;
+
+    return (
+      <tr
+        className={classnames({
+          'service-table__row': true,
+          'service-table__row--disabled': !service.isEnabled,
+        })}
+      >
+        <td
+          className="service-table__column-icon"
+          onClick={goToServiceForm}
+        >
+          <img
+            src={service.icon}
+            className={classnames({
+              'service-table__icon': true,
+              'has-custom-icon': service.hasCustomIcon,
+            })}
+            alt=""
+          />
+        </td>
+        <td
+          className="service-table__column-name"
+          onClick={goToServiceForm}
+        >
+          {service.name !== '' ? service.name : service.recipe.name}
+        </td>
+        <td
+          className="service-table__column-info"
+          onClick={goToServiceForm}
+        >
+          {!service.isEnabled && (
+            <span
+              className="mdi mdi-power"
+              data-tip={intl.formatMessage(messages.tooltipIsDisabled)}
+            />
+          )}
+        </td>
+        <td
+          className="service-table__column-info"
+          onClick={goToServiceForm}
+        >
+          {!service.isNotificationEnabled && (
+            <span
+              className="mdi mdi-message-bulleted-off"
+              data-tip={intl.formatMessage(messages.tooltipNotificationsDisabled)}
+            />
+          )}
+          <ReactTooltip place="top" type="dark" effect="solid" />
+        </td>
+        {/* <td className="service-table__column-action">
+          <input
+            type="checkbox"
+            onChange={toggleAction}
+            checked={service.isEnabled}
+          />
+        </td> */}
+      </tr>
+    );
+  }
+}
diff --git a/src/components/settings/services/ServicesDashboard.js b/src/components/settings/services/ServicesDashboard.js
new file mode 100644
index 000000000..5f146b5f3
--- /dev/null
+++ b/src/components/settings/services/ServicesDashboard.js
@@ -0,0 +1,155 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
+import { Link } from 'react-router';
+import { defineMessages, intlShape } from 'react-intl';
+
+import SearchInput from '../../ui/SearchInput';
+import Infobox from '../../ui/Infobox';
+import Loader from '../../ui/Loader';
+import ServiceItem from './ServiceItem';
+import Appear from '../../ui/effects/Appear';
+
+const messages = defineMessages({
+  headline: {
+    id: 'settings.services.headline',
+    defaultMessage: '!!!Your services',
+  },
+  noServicesAdded: {
+    id: 'settings.services.noServicesAdded',
+    defaultMessage: '!!!You haven\'t added any services yet.',
+  },
+  discoverServices: {
+    id: 'settings.services.discoverServices',
+    defaultMessage: '!!!Discover services',
+  },
+  servicesRequestFailed: {
+    id: 'settings.services.servicesRequestFailed',
+    defaultMessage: '!!!Could not load your services',
+  },
+  tryReloadServices: {
+    id: 'settings.account.tryReloadServices',
+    defaultMessage: '!!!Try again',
+  },
+  updatedInfo: {
+    id: 'settings.services.updatedInfo',
+    defaultMessage: '!!!Your changes have been saved',
+  },
+  deletedInfo: {
+    id: 'settings.services.deletedInfo',
+    defaultMessage: '!!!Service has been deleted',
+  },
+});
+
+@observer
+export default class ServicesDashboard extends Component {
+  static propTypes = {
+    services: MobxPropTypes.arrayOrObservableArray.isRequired,
+    isLoading: PropTypes.bool.isRequired,
+    toggleService: PropTypes.func.isRequired,
+    filterServices: PropTypes.func.isRequired,
+    resetFilter: PropTypes.func.isRequired,
+    goTo: PropTypes.func.isRequired,
+    servicesRequestFailed: PropTypes.bool.isRequired,
+    retryServicesRequest: PropTypes.func.isRequired,
+    status: MobxPropTypes.arrayOrObservableArray.isRequired,
+  };
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  render() {
+    const {
+      services,
+      isLoading,
+      toggleService,
+      filterServices,
+      resetFilter,
+      goTo,
+      servicesRequestFailed,
+      retryServicesRequest,
+      status,
+    } = 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()}
+          />
+        </div>
+        <div className="settings__body">
+          {!isLoading && servicesRequestFailed && (
+            <div>
+              <Infobox
+                icon="alert"
+                type="danger"
+                ctaLabel={intl.formatMessage(messages.tryReloadServices)}
+                ctaLoading={isLoading}
+                ctaOnClick={retryServicesRequest}
+              >
+                {intl.formatMessage(messages.servicesRequestFailed)}
+              </Infobox>
+            </div>
+          )}
+
+          {status.length > 0 && status.includes('updated') && (
+            <Appear>
+              <Infobox
+                type="success"
+                icon="checkbox-marked-circle-outline"
+                dismissable
+              >
+                {intl.formatMessage(messages.updatedInfo)}
+              </Infobox>
+            </Appear>
+          )}
+
+          {status.length > 0 && status.includes('service-deleted') && (
+            <Appear>
+              <Infobox
+                type="success"
+                icon="checkbox-marked-circle-outline"
+                dismissable
+              >
+                {intl.formatMessage(messages.deletedInfo)}
+              </Infobox>
+            </Appear>
+          )}
+
+          {!isLoading && services.length === 0 && (
+            <div className="align-middle settings__empty-state">
+              <p className="settings__empty-text">
+                <span className="emoji">
+                  <img src="./assets/images/emoji/sad.png" alt="" />
+                </span>
+                {intl.formatMessage(messages.noServicesAdded)}
+              </p>
+              <Link to="/settings/recipes" className="button">{intl.formatMessage(messages.discoverServices)}</Link>
+            </div>
+          )}
+          {isLoading ? (
+            <Loader />
+          ) : (
+            <table className="service-table">
+              <tbody>
+                {services.map(service => (
+                  <ServiceItem
+                    key={service.id}
+                    service={service}
+                    toggleAction={() => toggleService({ serviceId: service.id })}
+                    goToServiceForm={() => goTo(`/settings/services/edit/${service.id}`)}
+                  />
+                ))}
+              </tbody>
+            </table>
+          )}
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
new file mode 100644
index 000000000..02736dbb9
--- /dev/null
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -0,0 +1,148 @@
+import { remote } from 'electron';
+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 Button from '../../ui/Button';
+import Toggle from '../../ui/Toggle';
+import Select from '../../ui/Select';
+
+const messages = defineMessages({
+  headline: {
+    id: 'settings.app.headline',
+    defaultMessage: '!!!Settings',
+  },
+  headlineGeneral: {
+    id: 'settings.app.headlineGeneral',
+    defaultMessage: '!!!General',
+  },
+  headlineLanguage: {
+    id: 'settings.app.headlineLanguage',
+    defaultMessage: '!!!Language',
+  },
+  headlineUpdates: {
+    id: 'settings.app.headlineUpdates',
+    defaultMessage: '!!!Updates',
+  },
+  buttonSearchForUpdate: {
+    id: 'settings.app.buttonSearchForUpdate',
+    defaultMessage: '!!!Check for updates',
+  },
+  buttonInstallUpdate: {
+    id: 'settings.app.buttonInstallUpdate',
+    defaultMessage: '!!!Restart & install update',
+  },
+  updateStatusSearching: {
+    id: 'settings.app.updateStatusSearching',
+    defaultMessage: '!!!Is searching for update',
+  },
+  updateStatusAvailable: {
+    id: 'settings.app.updateStatusAvailable',
+    defaultMessage: '!!!Update available, downloading...',
+  },
+  updateStatusUpToDate: {
+    id: 'settings.app.updateStatusUpToDate',
+    defaultMessage: '!!!You are using the latest version of Franz',
+  },
+  currentVersion: {
+    id: 'settings.app.currentVersion',
+    defaultMessage: '!!!Current version:',
+  },
+});
+
+@observer
+export default class EditSettingsForm extends Component {
+  static propTypes = {
+    checkForUpdates: PropTypes.func.isRequired,
+    installUpdate: PropTypes.func.isRequired,
+    form: PropTypes.instanceOf(Form).isRequired,
+    onSubmit: PropTypes.func.isRequired,
+    isCheckingForUpdates: PropTypes.bool.isRequired,
+    isUpdateAvailable: PropTypes.bool.isRequired,
+    noUpdateAvailable: PropTypes.bool.isRequired,
+    updateIsReadyToInstall: PropTypes.bool.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  submit(e) {
+    e.preventDefault();
+    this.props.form.submit({
+      onSuccess: (form) => {
+        const values = form.values();
+        this.props.onSubmit(values);
+      },
+      onError: () => {},
+    });
+  }
+
+  render() {
+    const {
+      checkForUpdates,
+      installUpdate,
+      form,
+      isCheckingForUpdates,
+      isUpdateAvailable,
+      noUpdateAvailable,
+      updateIsReadyToInstall,
+    } = this.props;
+    const { intl } = this.context;
+
+    let updateButtonLabelMessage = messages.buttonSearchForUpdate;
+    if (isCheckingForUpdates) {
+      updateButtonLabelMessage = messages.updateStatusSearching;
+    } else if (isUpdateAvailable) {
+      updateButtonLabelMessage = messages.updateStatusAvailable;
+    } else {
+      updateButtonLabelMessage = messages.buttonSearchForUpdate;
+    }
+
+    return (
+      <div className="settings__main">
+        <div className="settings__header">
+          <h1>{intl.formatMessage(messages.headline)}</h1>
+        </div>
+        <div className="settings__body">
+          <form
+            onSubmit={e => this.submit(e)}
+            onChange={e => this.submit(e)}
+            id="form"
+          >
+            <h2>{intl.formatMessage(messages.headlineGeneral)}</h2>
+            <Toggle field={form.$('autoLaunchOnStart')} />
+            <Toggle field={form.$('runInBackground')} />
+            {process.platform === 'win32' && (
+              <Toggle field={form.$('minimizeToSystemTray')} />
+            )}
+            <h2>{intl.formatMessage(messages.headlineLanguage)}</h2>
+            <Select field={form.$('locale')} showLabel={false} />
+            <h2>{intl.formatMessage(messages.headlineUpdates)}</h2>
+            {updateIsReadyToInstall ? (
+              <Button
+                label={intl.formatMessage(messages.buttonInstallUpdate)}
+                onClick={installUpdate}
+              />
+            ) : (
+              <Button
+                label={intl.formatMessage(updateButtonLabelMessage)}
+                onClick={checkForUpdates}
+                disabled={isCheckingForUpdates || isUpdateAvailable}
+                loaded={!isCheckingForUpdates || !isUpdateAvailable}
+              />
+            )}
+            {noUpdateAvailable && (
+              <p>{intl.formatMessage(messages.updateStatusUpToDate)}</p>
+            )}
+            <br />
+            <Toggle field={form.$('beta')} />
+            {intl.formatMessage(messages.currentVersion)} {remote.app.getVersion()}
+          </form>
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/src/components/settings/user/EditUserForm.js b/src/components/settings/user/EditUserForm.js
new file mode 100644
index 000000000..f36887fc2
--- /dev/null
+++ b/src/components/settings/user/EditUserForm.js
@@ -0,0 +1,145 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+import { Link } from 'react-router';
+
+// import { Link } from 'react-router';
+
+import Form from '../../../lib/Form';
+import Input from '../../ui/Input';
+import Button from '../../ui/Button';
+import Radio from '../../ui/Radio';
+import Infobox from '../../ui/Infobox';
+
+const messages = defineMessages({
+  headline: {
+    id: 'settings.account.headline',
+    defaultMessage: '!!!Account',
+  },
+  headlineProfile: {
+    id: 'settings.account.headlineProfile',
+    defaultMessage: '!!!Update Profile',
+  },
+  headlineAccount: {
+    id: 'settings.account.headlineAccount',
+    defaultMessage: '!!!Account Information',
+  },
+  headlinePassword: {
+    id: 'settings.account.headlinePassword',
+    defaultMessage: '!!!Change Password',
+  },
+  successInfo: {
+    id: 'settings.account.successInfo',
+    defaultMessage: '!!!Your changes have been saved',
+  },
+  buttonSave: {
+    id: 'settings.account.buttonSave',
+    defaultMessage: '!!!Update profile',
+  },
+});
+
+@observer
+export default class EditServiceForm extends Component {
+  static propTypes = {
+    status: MobxPropTypes.observableArray.isRequired,
+    form: PropTypes.instanceOf(Form).isRequired,
+    onSubmit: PropTypes.func.isRequired,
+    isSaving: PropTypes.bool.isRequired,
+  };
+
+  static defaultProps = {
+    service: {},
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  submit(e) {
+    e.preventDefault();
+    this.props.form.submit({
+      onSuccess: (form) => {
+        const values = form.values();
+        this.props.onSubmit(values);
+      },
+      onError: () => {},
+    });
+  }
+
+  render() {
+    const {
+      // user,
+      status,
+      form,
+      isSaving,
+    } = this.props;
+    const { intl } = this.context;
+
+    return (
+      <div className="settings__main">
+        <div className="settings__header">
+          <span className="settings__header-item">
+            <Link to="/settings/user">
+              {intl.formatMessage(messages.headline)}
+            </Link>
+          </span>
+          <span className="separator" />
+          <span className="settings__header-item">
+            {intl.formatMessage(messages.headlineProfile)}
+          </span>
+        </div>
+        <div className="settings__body">
+          <form onSubmit={e => this.submit(e)} id="form">
+            {status.length > 0 && status.includes('data-updated') && (
+              <Infobox
+                type="success"
+                icon="checkbox-marked-circle-outline"
+              >
+                {intl.formatMessage(messages.successInfo)}
+              </Infobox>
+            )}
+            <h2>{intl.formatMessage(messages.headlineAccount)}</h2>
+            <div className="grid__row">
+              <Input field={form.$('firstname')} focus />
+              <Input field={form.$('lastname')} />
+            </div>
+            <Input field={form.$('email')} />
+            <Radio field={form.$('accountType')} />
+            {form.$('accountType').value === 'company' && (
+              <Input field={form.$('organization')} />
+            )}
+            <h2>{intl.formatMessage(messages.headlinePassword)}</h2>
+            <Input
+              field={form.$('oldPassword')}
+              showPasswordToggle
+            />
+            <Input
+              field={form.$('newPassword')}
+              showPasswordToggle
+              scorePassword
+            />
+          </form>
+        </div>
+        <div className="settings__controls">
+          {/* Save Button */}
+          {isSaving ? (
+            <Button
+              type="submit"
+              label={intl.formatMessage(messages.buttonSave)}
+              loaded={!isSaving}
+              buttonType="secondary"
+              disabled
+            />
+          ) : (
+            <Button
+              type="submit"
+              label={intl.formatMessage(messages.buttonSave)}
+              htmlForm="form"
+            />
+          )}
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/src/components/ui/AppLoader.js b/src/components/ui/AppLoader.js
new file mode 100644
index 000000000..64a212969
--- /dev/null
+++ b/src/components/ui/AppLoader.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+import Appear from '../../components/ui/effects/Appear';
+import Loader from '../../components/ui/Loader';
+
+export default function () {
+  return (
+    <div className="app-loader">
+      <Appear>
+        <h1 className="app-loader__title">Franz</h1>
+        <Loader />
+      </Appear>
+    </div>
+  );
+}
diff --git a/src/components/ui/Button.js b/src/components/ui/Button.js
new file mode 100644
index 000000000..07e94192f
--- /dev/null
+++ b/src/components/ui/Button.js
@@ -0,0 +1,78 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import Loader from 'react-loader';
+import classnames from 'classnames';
+
+@observer
+export default class Button extends Component {
+  static propTypes = {
+    className: PropTypes.string,
+    label: PropTypes.string.isRequired,
+    disabled: PropTypes.bool,
+    onClick: PropTypes.func,
+    type: PropTypes.string,
+    buttonType: PropTypes.string,
+    loaded: PropTypes.bool,
+    htmlForm: PropTypes.string,
+  };
+
+  static defaultProps = {
+    className: null,
+    disabled: false,
+    onClick: () => {},
+    type: 'button',
+    buttonType: '',
+    loaded: true,
+    htmlForm: '',
+  };
+
+  element = null;
+
+  render() {
+    const {
+      label,
+      className,
+      disabled,
+      onClick,
+      type,
+      buttonType,
+      loaded,
+      htmlForm,
+    } = this.props;
+
+    const buttonProps = {
+      className: classnames({
+        'franz-form__button': true,
+        [`franz-form__button--${buttonType}`]: buttonType,
+        [`${className}`]: className,
+      }),
+      type,
+    };
+
+    if (disabled) {
+      buttonProps.disabled = true;
+    }
+
+    if (onClick) {
+      buttonProps.onClick = onClick;
+    }
+
+    if (htmlForm) {
+      buttonProps.form = htmlForm;
+    }
+
+    return (
+      <button {...buttonProps}>
+        <Loader
+          loaded={loaded}
+          lines={10}
+          scale={0.4}
+          color={buttonType === '' ? '#FFF' : '#373a3c'}
+          component="span"
+        />
+        {label}
+      </button>
+    );
+  }
+}
diff --git a/src/components/ui/InfoBar.js b/src/components/ui/InfoBar.js
new file mode 100644
index 000000000..aea2bd888
--- /dev/null
+++ b/src/components/ui/InfoBar.js
@@ -0,0 +1,88 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import classnames from 'classnames';
+import Loader from 'react-loader';
+
+// import { oneOrManyChildElements } from '../../prop-types';
+import Appear from '../ui/effects/Appear';
+
+@observer
+export default class InfoBar extends Component {
+  static propTypes = {
+    // eslint-disable-next-line
+    children: PropTypes.any.isRequired,
+    onClick: PropTypes.func,
+    type: PropTypes.string,
+    className: PropTypes.string,
+    ctaLabel: PropTypes.string,
+    ctaLoading: PropTypes.bool,
+    position: PropTypes.string,
+    sticky: PropTypes.bool,
+    onHide: PropTypes.func,
+  };
+
+  static defaultProps = {
+    onClick: () => null,
+    type: 'primary',
+    className: '',
+    ctaLabel: '',
+    ctaLoading: false,
+    position: 'bottom',
+    sticky: false,
+    onHide: () => null,
+  };
+
+  render() {
+    const {
+      children,
+      type,
+      className,
+      ctaLabel,
+      ctaLoading,
+      onClick,
+      position,
+      sticky,
+      onHide,
+    } = this.props;
+
+    let transitionName = 'slideUp';
+    if (position === 'top') {
+      transitionName = 'slideDown';
+    }
+
+    return (
+      <Appear
+        transitionName={transitionName}
+        className={classnames({
+          'info-bar': true,
+          [`info-bar--${type}`]: true,
+          [`info-bar--${position}`]: true,
+          [`${className}`]: true,
+        })}
+      >
+        <div onClick={onClick} className="info-bar__content">
+          {children}
+          {ctaLabel && (
+            <button className="info-bar__cta">
+              <Loader
+                loaded={!ctaLoading}
+                lines={10}
+                scale={0.3}
+                color="#FFF"
+                component="span"
+              />
+              {ctaLabel}
+            </button>
+          )}
+        </div>
+        {!sticky && (
+          <button
+            className="info-bar__close mdi mdi-close"
+            onClick={onHide}
+          />
+        )}
+      </Appear>
+    );
+  }
+}
diff --git a/src/components/ui/Infobox.js b/src/components/ui/Infobox.js
new file mode 100644
index 000000000..2d063c7ef
--- /dev/null
+++ b/src/components/ui/Infobox.js
@@ -0,0 +1,87 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import classnames from 'classnames';
+import Loader from 'react-loader';
+
+@observer
+export default class Infobox extends Component {
+  static propTypes = {
+    children: PropTypes.any.isRequired, // eslint-disable-line
+    icon: PropTypes.string,
+    type: PropTypes.string,
+    ctaOnClick: PropTypes.func,
+    ctaLabel: PropTypes.string,
+    ctaLoading: PropTypes.bool,
+    dismissable: PropTypes.bool,
+  };
+
+  static defaultProps = {
+    icon: '',
+    type: 'primary',
+    dismissable: false,
+    ctaOnClick: () => null,
+    ctaLabel: '',
+    ctaLoading: false,
+  };
+
+  state = {
+    dismissed: false,
+  };
+
+  render() {
+    const {
+      children,
+      icon,
+      type,
+      ctaLabel,
+      ctaLoading,
+      ctaOnClick,
+      dismissable,
+    } = this.props;
+
+    if (this.state.dismissed) {
+      return null;
+    }
+
+    return (
+      <div
+        className={classnames({
+          infobox: true,
+          [`infobox--${type}`]: type,
+          'infobox--default': !type,
+        })}
+      >
+        {icon && (
+          <i className={`mdi mdi-${icon}`} />
+        )}
+        <div className="infobox__content">
+          {children}
+        </div>
+        {ctaLabel && (
+          <button
+            className="infobox__cta"
+            onClick={ctaOnClick}
+          >
+            <Loader
+              loaded={!ctaLoading}
+              lines={10}
+              scale={0.3}
+              color="#FFF"
+              component="span"
+            />
+            {ctaLabel}
+          </button>
+        )}
+        {dismissable && (
+          <button
+            onClick={() => this.setState({
+              dismissed: true,
+            })}
+            className="infobox__delete mdi mdi-close"
+          />
+        )}
+      </div>
+    );
+  }
+}
diff --git a/src/components/ui/Input.js b/src/components/ui/Input.js
new file mode 100644
index 000000000..0bb9f23bf
--- /dev/null
+++ b/src/components/ui/Input.js
@@ -0,0 +1,148 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import { Field } from 'mobx-react-form';
+import classnames from 'classnames';
+
+import { scorePassword as scorePasswordFunc } from '../../helpers/password-helpers';
+
+@observer
+export default class Input extends Component {
+  static propTypes = {
+    field: PropTypes.instanceOf(Field).isRequired,
+    className: PropTypes.string,
+    focus: PropTypes.bool,
+    showPasswordToggle: PropTypes.bool,
+    showLabel: PropTypes.bool,
+    scorePassword: PropTypes.bool,
+    prefix: PropTypes.string,
+    suffix: PropTypes.string,
+  };
+
+  static defaultProps = {
+    className: null,
+    focus: false,
+    showPasswordToggle: false,
+    showLabel: true,
+    scorePassword: false,
+    prefix: '',
+    suffix: '',
+  };
+
+  state = {
+    showPassword: false,
+    passwordScore: 0,
+  }
+
+  componentDidMount() {
+    if (this.props.focus) {
+      this.focus();
+    }
+  }
+
+  onChange(e) {
+    const { field, scorePassword } = this.props;
+
+    field.onChange(e);
+
+    if (scorePassword) {
+      this.setState({ passwordScore: scorePasswordFunc(field.value) });
+    }
+  }
+
+  focus() {
+    this.inputElement.focus();
+  }
+
+  inputElement = null;
+
+  render() {
+    const {
+      field,
+      className,
+      showPasswordToggle,
+      showLabel,
+      scorePassword,
+      prefix,
+      suffix,
+    } = this.props;
+
+    const { passwordScore } = this.state;
+
+    let type = field.type;
+    if (type === 'password' && this.state.showPassword) {
+      type = 'text';
+    }
+
+    return (
+      <div
+        className={classnames({
+          'franz-form__field': true,
+          'has-error': field.error,
+          [`${className}`]: className,
+        })}
+      >
+        <div className="franz-form__input-wrapper">
+          {prefix && (
+            <span className="franz-form__input-prefix">{prefix}</span>
+          )}
+          <input
+            id={field.id}
+            type={type}
+            className="franz-form__input"
+            name={field.name}
+            value={field.value}
+            placeholder={field.placeholder}
+            onChange={e => this.onChange(e)}
+            onBlur={field.onBlur}
+            onFocus={field.onFocus}
+            ref={(element) => { this.inputElement = element; }}
+          />
+          {suffix && (
+            <span className="franz-form__input-suffix">{suffix}</span>
+          )}
+          {showPasswordToggle && (
+            <button
+              type="button"
+              className={classnames({
+                'franz-form__input-modifier': true,
+                mdi: true,
+                'mdi-eye': !this.state.showPassword,
+                'mdi-eye-off': this.state.showPassword,
+              })}
+              onClick={() => this.setState({ showPassword: !this.state.showPassword })}
+              tabIndex="-1"
+            />
+          )}
+          {scorePassword && (
+            <div className="franz-form__password-score">
+              {/* <progress value={this.state.passwordScore} max="100" /> */}
+              <meter
+                value={passwordScore < 5 ? 5 : passwordScore}
+                low="30"
+                high="75"
+                optimum="100"
+                max="100"
+              />
+            </div>
+          )}
+        </div>
+        {field.label && showLabel && (
+          <label
+            className="franz-form__label"
+            htmlFor={field.name}
+          >
+            {field.label}
+          </label>
+        )}
+        {field.error && (
+          <div
+            className="franz-form__error"
+          >
+            {field.error}
+          </div>
+        )}
+      </div>
+    );
+  }
+}
diff --git a/src/components/ui/Link.js b/src/components/ui/Link.js
new file mode 100644
index 000000000..f5da921fa
--- /dev/null
+++ b/src/components/ui/Link.js
@@ -0,0 +1,78 @@
+import { shell } from 'electron';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { inject, observer } from 'mobx-react';
+import { RouterStore } from 'mobx-react-router';
+import classnames from 'classnames';
+
+import { oneOrManyChildElements } from '../../prop-types';
+import { matchRoute } from '../../helpers/routing-helpers';
+
+// TODO: create container component for this component
+
+@inject('stores') @observer
+export default class Link extends Component {
+  onClick(e) {
+    if (this.props.target === '_blank') {
+      e.preventDefault();
+      shell.openExternal(this.props.to);
+    }
+  }
+
+  render() {
+    const {
+      children,
+      stores,
+      to,
+      className,
+      activeClassName,
+      strictFilter,
+    } = this.props;
+    const { router } = stores;
+
+    let filter = `${to}(*action)`;
+    if (strictFilter) {
+      filter = `${to}`;
+    }
+
+    const match = matchRoute(filter, router.location.pathname);
+
+    const linkClasses = classnames({
+      [`${className}`]: true,
+      [`${activeClassName}`]: match,
+    });
+
+    return (
+      <a
+        href={router.history.createHref(to)}
+        className={linkClasses}
+        onClick={e => this.onClick(e)}
+      >
+        {children}
+      </a>
+    );
+  }
+}
+
+Link.wrappedComponent.propTypes = {
+  stores: PropTypes.shape({
+    router: PropTypes.instanceOf(RouterStore).isRequired,
+  }).isRequired,
+  children: PropTypes.oneOfType([
+    oneOrManyChildElements,
+    PropTypes.string,
+  ]).isRequired,
+  to: PropTypes.string.isRequired,
+  className: PropTypes.string,
+  activeClassName: PropTypes.string,
+  strictFilter: PropTypes.bool,
+  target: PropTypes.string,
+};
+
+Link.wrappedComponent.defaultProps = {
+  className: '',
+  activeClassName: '',
+  strictFilter: false,
+  target: '',
+  openInBrowser: false,
+};
diff --git a/src/components/ui/Loader.js b/src/components/ui/Loader.js
new file mode 100644
index 000000000..e4fbd96a2
--- /dev/null
+++ b/src/components/ui/Loader.js
@@ -0,0 +1,41 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Loader from 'react-loader';
+
+import { oneOrManyChildElements } from '../../prop-types';
+
+export default class LoaderComponent extends Component {
+  static propTypes = {
+    children: oneOrManyChildElements,
+    loaded: PropTypes.bool,
+    className: PropTypes.string,
+  };
+
+  static defaultProps = {
+    children: null,
+    loaded: false,
+    className: '',
+  };
+
+  render() {
+    const {
+      children,
+      loaded,
+      className,
+    } = this.props;
+
+    return (
+      <Loader
+        loaded={loaded}
+        // lines={10}
+        width={4}
+        scale={0.6}
+        color="#373a3c"
+        component="span"
+        className={className}
+      >
+        {children}
+      </Loader>
+    );
+  }
+}
diff --git a/src/components/ui/Radio.js b/src/components/ui/Radio.js
new file mode 100644
index 000000000..b54cfc820
--- /dev/null
+++ b/src/components/ui/Radio.js
@@ -0,0 +1,89 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import { Field } from 'mobx-react-form';
+import classnames from 'classnames';
+
+@observer
+export default class Radio extends Component {
+  static propTypes = {
+    field: PropTypes.instanceOf(Field).isRequired,
+    className: PropTypes.string,
+    focus: PropTypes.bool,
+    showLabel: PropTypes.bool,
+  };
+
+  static defaultProps = {
+    className: null,
+    focus: false,
+    showLabel: true,
+  };
+
+  componentDidMount() {
+    if (this.props.focus) {
+      this.focus();
+    }
+  }
+
+  focus() {
+    this.inputElement.focus();
+  }
+
+  inputElement = null;
+
+  render() {
+    const {
+      field,
+      className,
+      showLabel,
+    } = this.props;
+
+    return (
+      <div
+        className={classnames({
+          'franz-form__field': true,
+          'has-error': field.error,
+          [`${className}`]: className,
+        })}
+      >
+        {field.label && showLabel && (
+          <label
+            className="franz-form__label"
+            htmlFor={field.name}
+          >
+            {field.label}
+          </label>
+        )}
+        <div className="franz-form__radio-wrapper">
+          {field.options.map(type => (
+            <label
+              key={type.value}
+              htmlFor={`${field.id}-${type.value}`}
+              className={classnames({
+                'franz-form__radio': true,
+                'is-selected': field.value === type.value,
+              })}
+            >
+              <input
+                id={`${field.id}-${type.value}`}
+                type="radio"
+                name="type"
+                value={type.value}
+                onChange={field.onChange}
+                checked={field.value === type.value}
+              />
+              {type.label}
+            </label>
+          ))}
+        </div>
+        {field.error && (
+          <div
+            className="franz-form__error"
+          >
+            {field.error}
+          </div>
+        )}
+      </div>
+    );
+  }
+}
diff --git a/src/components/ui/SearchInput.js b/src/components/ui/SearchInput.js
new file mode 100644
index 000000000..bca412cef
--- /dev/null
+++ b/src/components/ui/SearchInput.js
@@ -0,0 +1,124 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import classnames from 'classnames';
+import uuidv1 from 'uuid/v1';
+import { debounce } from 'lodash';
+
+@observer
+export default class SearchInput extends Component {
+  static propTypes = {
+    value: PropTypes.string,
+    defaultValue: PropTypes.string,
+    className: PropTypes.string,
+    onChange: PropTypes.func,
+    onReset: PropTypes.func,
+    name: PropTypes.string,
+    throttle: PropTypes.bool,
+    throttleDelay: PropTypes.number,
+  };
+
+  static defaultProps = {
+    value: '',
+    defaultValue: '',
+    className: '',
+    name: uuidv1(),
+    throttle: false,
+    throttleDelay: 250,
+    onChange: () => null,
+    onReset: () => null,
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      value: props.value || props.defaultValue,
+    };
+
+    this.throttledOnChange = debounce(this.throttledOnChange, this.props.throttleDelay);
+  }
+
+  onChange(e) {
+    const { throttle, onChange } = this.props;
+    const { value } = e.target;
+    this.setState({ value });
+
+    if (throttle) {
+      e.persist();
+      this.throttledOnChange(value);
+    } else {
+      onChange(value);
+    }
+  }
+
+  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;
+
+    onChange(e);
+  }
+
+  reset() {
+    const { defaultValue, onReset } = this.props;
+    this.setState({ value: defaultValue });
+
+    onReset();
+  }
+
+  input = null;
+
+  render() {
+    const { className, name, defaultValue } = this.props;
+    const { value } = this.state;
+
+    return (
+      <div
+        className={classnames([
+          className,
+          'search-input',
+        ])}
+      >
+        <label
+          htmlFor={name}
+          className="mdi mdi-magnify"
+          onClick={() => this.onClick()}
+        />
+        <input
+          name={name}
+          type="text"
+          value={value}
+          onChange={e => this.onChange(e)}
+          onClick={() => this.onClick()}
+          onBlur={() => this.onBlur()}
+          ref={(ref) => { this.input = ref; }}
+        />
+        {value !== defaultValue && value.length > 0 && (
+          <span
+            className="mdi mdi-close-circle-outline"
+            onClick={() => this.reset()}
+          />
+        )}
+      </div>
+    );
+  }
+}
diff --git a/src/components/ui/Select.js b/src/components/ui/Select.js
new file mode 100644
index 000000000..2a877af3e
--- /dev/null
+++ b/src/components/ui/Select.js
@@ -0,0 +1,70 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import { Field } from 'mobx-react-form';
+import classnames from 'classnames';
+
+@observer
+export default class Select extends Component {
+  static propTypes = {
+    field: PropTypes.instanceOf(Field).isRequired,
+    className: PropTypes.string,
+    showLabel: PropTypes.bool,
+  };
+
+  static defaultProps = {
+    className: null,
+    focus: false,
+    showLabel: true,
+  };
+
+  render() {
+    const {
+      field,
+      className,
+      showLabel,
+    } = this.props;
+
+    return (
+      <div
+        className={classnames({
+          'franz-form__field': true,
+          'has-error': field.error,
+          [`${className}`]: className,
+        })}
+      >
+        {field.label && showLabel && (
+          <label
+            className="franz-form__label"
+            htmlFor={field.name}
+          >
+            {field.label}
+          </label>
+        )}
+        <select
+          onChange={field.onChange}
+          id={field.id}
+          defaultValue={field.value}
+          className="franz-form__select"
+        >
+          {field.options.map(type => (
+            <option
+              key={type.value}
+              value={type.value}
+              // selected={field.value === }
+            >
+              {type.label}
+            </option>
+          ))}
+        </select>
+        {field.error && (
+          <div
+            className="franz-form__error"
+          >
+            {field.error}
+          </div>
+        )}
+      </div>
+    );
+  }
+}
diff --git a/src/components/ui/Subscription.js b/src/components/ui/Subscription.js
new file mode 100644
index 000000000..ada5cc3e0
--- /dev/null
+++ b/src/components/ui/Subscription.js
@@ -0,0 +1,265 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+
+import Form from '../../lib/Form';
+import Radio from '../ui/Radio';
+import Button from '../ui/Button';
+import Loader from '../ui/Loader';
+
+import { required } from '../../helpers/validation-helpers';
+
+const messages = defineMessages({
+  submitButtonLabel: {
+    id: 'subscription.submit.label',
+    defaultMessage: '!!!Support the development of Franz',
+  },
+  paymentSessionError: {
+    id: 'subscription.paymentSessionError',
+    defaultMessage: '!!!Could not initialize payment form',
+  },
+  typeFree: {
+    id: 'subscription.type.free',
+    defaultMessage: '!!!free',
+  },
+  typeMonthly: {
+    id: 'subscription.type.month',
+    defaultMessage: '!!!month',
+  },
+  typeYearly: {
+    id: 'subscription.type.year',
+    defaultMessage: '!!!year',
+  },
+  typeMining: {
+    id: 'subscription.type.mining',
+    defaultMessage: '!!!Support Franz with processing power',
+  },
+  includedFeatures: {
+    id: 'subscription.includedFeatures',
+    defaultMessage: '!!!The Franz Premium Supporter Account includes',
+  },
+  features: {
+    unlimitedServices: {
+      id: 'subscription.features.unlimitedServices',
+      defaultMessage: '!!!Add unlimited services',
+    },
+    onpremise: {
+      id: 'subscription.features.onpremise',
+      defaultMessage: '!!!Add on-premise/hosted services like HipChat',
+    },
+    customServices: {
+      id: 'subscription.features.customServices',
+      defaultMessage: '!!!Add your custom services',
+    },
+    encryptedSync: {
+      id: 'subscription.features.encryptedSync',
+      defaultMessage: '!!!Encrypted session synchronization',
+    },
+    vpn: {
+      id: 'subscription.features.vpn',
+      defaultMessage: '!!!Proxy & VPN support',
+    },
+    ads: {
+      id: 'subscription.features.ads',
+      defaultMessage: '!!!No ads, ever!',
+    },
+    comingSoon: {
+      id: 'subscription.features.comingSoon',
+      defaultMessage: '!!!coming soon',
+    },
+  },
+  miningHeadline: {
+    id: 'subscription.mining.headline',
+    defaultMessage: '!!!How does this work?',
+  },
+  experimental: {
+    id: 'subscription.mining.experimental',
+    defaultMessage: '!!!experimental',
+  },
+  miningDetail1: {
+    id: 'subscription.mining.line1',
+    defaultMessage: '!!!By enabling "Support with processing power", Franz will use about 20-50% of your CPU to mine cryptocurrency Monero which equals approximately $ 5/year.',
+  },
+  miningDetail2: {
+    id: 'subscription.mining.line2',
+    defaultMessage: '!!!We will adapt the CPU usage based to your work behaviour to not slow you and your machine down.',
+  },
+  miningDetail3: {
+    id: 'subscription.mining.line3',
+    defaultMessage: '!!!As long as the miner is active, you will have unlimited access to all the Franz Premium Supporter Features.',
+  },
+  miningMoreInfo: {
+    id: 'subscription.mining.moreInformation',
+    defaultMessage: '!!!Get more information about this plan',
+  },
+});
+
+@observer
+export default class SubscriptionForm extends Component {
+  static propTypes = {
+    plan: MobxPropTypes.objectOrObservableObject.isRequired,
+    isLoading: PropTypes.bool.isRequired,
+    handlePayment: PropTypes.func.isRequired,
+    retryPlanRequest: PropTypes.func.isRequired,
+    isCreatingHostedPage: PropTypes.bool.isRequired,
+    error: PropTypes.bool.isRequired,
+    showSkipOption: PropTypes.bool,
+    skipAction: PropTypes.func,
+    skipButtonLabel: PropTypes.string,
+    hideInfo: PropTypes.bool.isRequired,
+    openExternalUrl: PropTypes.func.isRequired,
+  };
+
+  static defaultProps ={
+    content: '',
+    showSkipOption: false,
+    skipAction: () => null,
+    skipButtonLabel: '',
+  }
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  componentWillMount() {
+    this.form = this.prepareForm();
+  }
+
+  prepareForm() {
+    const { intl } = this.context;
+
+    const form = {
+      fields: {
+        paymentTier: {
+          value: 'year',
+          validate: [required],
+          options: [{
+            value: 'month',
+            label: `$ ${Object.hasOwnProperty.call(this.props.plan, 'month')
+              ? `${this.props.plan.month.price} / ${intl.formatMessage(messages.typeMonthly)}`
+              : 'monthly'}`,
+          }, {
+            value: 'year',
+            label: `$ ${Object.hasOwnProperty.call(this.props.plan, 'year')
+              ? `${this.props.plan.year.price} / ${intl.formatMessage(messages.typeYearly)}`
+              : 'yearly'}`,
+          }, {
+            value: 'mining',
+            label: intl.formatMessage(messages.typeMining),
+          }],
+        },
+      },
+    };
+
+    if (this.props.showSkipOption) {
+      form.fields.paymentTier.options.unshift({
+        value: 'skip',
+        label: `$ 0 / ${intl.formatMessage(messages.typeFree)}`,
+      });
+    }
+
+    return new Form(form, this.context.intl);
+  }
+
+  render() {
+    const {
+      isLoading,
+      isCreatingHostedPage,
+      handlePayment,
+      retryPlanRequest,
+      error,
+      showSkipOption,
+      skipAction,
+      skipButtonLabel,
+      hideInfo,
+      openExternalUrl,
+    } = this.props;
+    const { intl } = this.context;
+
+    if (error) {
+      return (
+        <Button
+          label="Reload"
+          onClick={retryPlanRequest}
+          isLoaded={!isLoading}
+        />
+      );
+    }
+
+    return (
+      <Loader loaded={!isLoading}>
+        <Radio field={this.form.$('paymentTier')} showLabel={false} className="paymentTiers" />
+        {!hideInfo && (
+          <div className="subscription__premium-info">
+            {this.form.$('paymentTier').value !== 'mining' && (
+              <div>
+                <p>
+                  <strong>{intl.formatMessage(messages.includedFeatures)}</strong>
+                </p>
+                <div className="subscription">
+                  <ul className="subscription__premium-features">
+                    <li>{intl.formatMessage(messages.features.onpremise)}</li>
+                    <li>
+                      {intl.formatMessage(messages.features.encryptedSync)}
+                      <span className="badge">{intl.formatMessage(messages.features.comingSoon)}</span>
+                    </li>
+                    <li>
+                      {intl.formatMessage(messages.features.customServices)}
+                      <span className="badge">{intl.formatMessage(messages.features.comingSoon)}</span>
+                    </li>
+                    <li>
+                      {intl.formatMessage(messages.features.vpn)}
+                      <span className="badge">{intl.formatMessage(messages.features.comingSoon)}</span>
+                    </li>
+                    <li>
+                      {intl.formatMessage(messages.features.ads)}
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            )}
+            {this.form.$('paymentTier').value === 'mining' && (
+              <div className="subscription mining-details">
+                <p>
+                  <strong>{intl.formatMessage(messages.miningHeadline)}</strong>
+                  &nbsp;
+                  <span className="badge">{intl.formatMessage(messages.experimental)}</span>
+                </p>
+                <p>{intl.formatMessage(messages.miningDetail1)}</p>
+                <p>{intl.formatMessage(messages.miningDetail2)}</p>
+                <p>{intl.formatMessage(messages.miningDetail3)}</p>
+                <p>
+                  <button
+                    onClick={() => openExternalUrl({ url: 'http://meetfranz.com/mining' })}
+                  >
+                    {intl.formatMessage(messages.miningMoreInfo)}
+                  </button>
+                </p>
+              </div>
+            )}
+          </div>
+        )}
+        <div>
+          {error.code === 'no-payment-session' && (
+            <p className="error-message center">{intl.formatMessage(messages.paymentSessionError)}</p>
+          )}
+        </div>
+        {showSkipOption && this.form.$('paymentTier').value === 'skip' ? (
+          <Button
+            label={skipButtonLabel}
+            className="auth__button"
+            onClick={skipAction}
+          />
+        ) : (
+          <Button
+            label={intl.formatMessage(messages.submitButtonLabel)}
+            className="auth__button"
+            loaded={!isCreatingHostedPage}
+            onClick={() => handlePayment(this.form.$('paymentTier').value)}
+          />
+        )}
+      </Loader>
+    );
+  }
+}
diff --git a/src/components/ui/SubscriptionPopup.js b/src/components/ui/SubscriptionPopup.js
new file mode 100644
index 000000000..72b6ccd98
--- /dev/null
+++ b/src/components/ui/SubscriptionPopup.js
@@ -0,0 +1,84 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+import Webview from 'react-electron-web-view';
+
+import Button from '../ui/Button';
+
+const messages = defineMessages({
+  buttonCancel: {
+    id: 'subscriptionPopup.buttonCancel',
+    defaultMessage: '!!!Cancel',
+  },
+  buttonDone: {
+    id: 'subscriptionPopup.buttonDone',
+    defaultMessage: '!!!Done',
+  },
+});
+
+@observer
+export default class SubscriptionPopup extends Component {
+  static propTypes = {
+    url: PropTypes.string.isRequired,
+    closeWindow: PropTypes.func.isRequired,
+    completeCheck: PropTypes.func.isRequired,
+    isCompleted: PropTypes.bool.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  state = {
+    isFakeLoading: false,
+  };
+
+  // We delay the window closing a bit in order to give
+  // the Recurly webhook a few seconds to do it's magic
+  delayedCloseWindow() {
+    this.setState({
+      isFakeLoading: true,
+    });
+
+    setTimeout(() => {
+      this.props.closeWindow();
+    }, 4000);
+  }
+
+  render() {
+    const { url, closeWindow, completeCheck, isCompleted } = this.props;
+    const { intl } = this.context;
+
+    return (
+      <div className="subscription-popup">
+        <div className="subscription-popup__content">
+          <Webview
+            className="subscription-popup__webview"
+
+            autosize
+            src={url}
+            disablewebsecurity
+            onDidNavigate={completeCheck}
+            // onNewWindow={(event, url, frameName, options) =>
+            //   openWindow({ event, url, frameName, options })}
+          />
+        </div>
+        <div className="subscription-popup__toolbar franz-form">
+          <Button
+            label={intl.formatMessage(messages.buttonCancel)}
+            buttonType="secondary"
+            onClick={closeWindow}
+            disabled={isCompleted}
+          />
+          <Button
+            label={intl.formatMessage(messages.buttonDone)}
+            onClick={() => this.delayedCloseWindow()}
+            disabled={!isCompleted}
+            loaded={!this.state.isFakeLoading}
+          />
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/src/components/ui/Tabs/TabItem.js b/src/components/ui/Tabs/TabItem.js
new file mode 100644
index 000000000..9ff9f009e
--- /dev/null
+++ b/src/components/ui/Tabs/TabItem.js
@@ -0,0 +1,17 @@
+import React, { Component } from 'react';
+
+import { oneOrManyChildElements } from '../../../prop-types';
+
+export default class TabItem extends Component {
+  static propTypes = {
+    children: oneOrManyChildElements.isRequired,
+  }
+
+  render() {
+    const { children } = this.props;
+
+    return (
+      <div>{children}</div>
+    );
+  }
+}
diff --git a/src/components/ui/Tabs/Tabs.js b/src/components/ui/Tabs/Tabs.js
new file mode 100644
index 000000000..50397f9bb
--- /dev/null
+++ b/src/components/ui/Tabs/Tabs.js
@@ -0,0 +1,69 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import classnames from 'classnames';
+
+import { oneOrManyChildElements } from '../../../prop-types';
+
+@observer
+export default class Tab extends Component {
+  static propTypes = {
+    children: oneOrManyChildElements.isRequired,
+    active: PropTypes.number,
+  };
+
+  static defaultProps = {
+    active: 0,
+  };
+
+  componentWillMount() {
+    this.setState({ active: this.props.active });
+  }
+
+  switchTab(index) {
+    this.setState({ active: index });
+  }
+
+  render() {
+    const { children: childElements } = this.props;
+    const children = childElements.filter(c => !!c);
+
+    if (children.length === 1) {
+      return <div>{children}</div>;
+    }
+
+    return (
+      <div className="content-tabs">
+        <div className="content-tabs__tabs">
+          {React.Children.map(children, (child, i) => (
+            <button
+              key={i}
+              className={classnames({
+                'content-tabs__item': true,
+                'is-active': this.state.active === i,
+              })}
+              onClick={() => this.switchTab(i)}
+              type="button"
+            >
+              {child.props.title}
+            </button>
+          ))}
+        </div>
+        <div className="content-tabs__content">
+          {React.Children.map(children, (child, i) => (
+            <div
+              key={i}
+              className={classnames({
+                'content-tabs__item': true,
+                'is-active': this.state.active === i,
+              })}
+              type="button"
+            >
+              {child}
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/src/components/ui/Tabs/index.js b/src/components/ui/Tabs/index.js
new file mode 100644
index 000000000..e4adb62c7
--- /dev/null
+++ b/src/components/ui/Tabs/index.js
@@ -0,0 +1,6 @@
+import Tabs from './Tabs';
+import TabItem from './TabItem';
+
+export default Tabs;
+
+export { TabItem };
diff --git a/src/components/ui/Toggle.js b/src/components/ui/Toggle.js
new file mode 100644
index 000000000..62d46393e
--- /dev/null
+++ b/src/components/ui/Toggle.js
@@ -0,0 +1,67 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import classnames from 'classnames';
+import { Field } from 'mobx-react-form';
+
+@observer
+export default class Toggle extends Component {
+  static propTypes = {
+    field: PropTypes.instanceOf(Field).isRequired,
+    className: PropTypes.string,
+    showLabel: PropTypes.bool,
+  };
+
+  static defaultProps = {
+    className: '',
+    showLabel: true,
+  };
+
+  onChange(e) {
+    const { field } = this.props;
+
+    field.onChange(e);
+  }
+
+  render() {
+    const {
+      field,
+      className,
+      showLabel,
+    } = this.props;
+
+    if (field.value === '' && field.default !== '') {
+      field.value = field.default;
+    }
+
+    return (
+      <div
+        className={classnames([
+          'franz-form__field',
+          'franz-form__toggle-wrapper',
+          className,
+        ])}
+      >
+        <label
+          htmlFor={field.id}
+          className={classnames({
+            'franz-form__toggle': true,
+            'is-active': field.value,
+          })}
+        >
+          <div className="franz-form__toggle-button" />
+          <input
+            type="checkbox"
+            id={field.id}
+            name={field.name}
+            value={field.name}
+            checked={field.value}
+            onChange={e => this.onChange(e)}
+          />
+        </label>
+        {field.error && <div className={field.error}>{field.error}</div>}
+        {field.label && showLabel && <label className="franz-form__label" htmlFor={field.id}>{field.label}</label>}
+      </div>
+    );
+  }
+}
diff --git a/src/components/ui/effects/Appear.js b/src/components/ui/effects/Appear.js
new file mode 100644
index 000000000..1255fce2e
--- /dev/null
+++ b/src/components/ui/effects/Appear.js
@@ -0,0 +1,51 @@
+/* eslint-disable react/no-did-mount-set-state */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
+
+export default class Appear extends Component {
+  static propTypes = {
+    children: PropTypes.any.isRequired, // eslint-disable-line
+    transitionName: PropTypes.string,
+    className: PropTypes.string,
+  };
+
+  static defaultProps = {
+    transitionName: 'fadeIn',
+    className: '',
+  };
+
+  state = {
+    mounted: false,
+  };
+
+  componentDidMount() {
+    this.setState({ mounted: true });
+  }
+
+  render() {
+    const {
+      children,
+      transitionName,
+      className,
+    } = this.props;
+
+    if (!this.state.mounted) {
+      return null;
+    }
+
+    return (
+      <ReactCSSTransitionGroup
+        transitionName={transitionName}
+        transitionAppear
+        transitionLeave
+        transitionAppearTimeout={1500}
+        transitionEnterTimeout={1500}
+        transitionLeaveTimeout={1500}
+        className={className}
+      >
+        {children}
+      </ReactCSSTransitionGroup>
+    );
+  }
+}
diff --git a/src/config.js b/src/config.js
new file mode 100644
index 000000000..acbf57f3c
--- /dev/null
+++ b/src/config.js
@@ -0,0 +1,5 @@
+export const CHECK_INTERVAL = 1000 * 3600; // How often should we perform checks
+export const LOCAL_API = 'http://localhost:3000';
+export const DEV_API = 'https://dev.franzinfra.com';
+export const LIVE_API = 'https://api.franzinfra.com';
+export const GA_ID = 'UA-74126766-6';
diff --git a/src/containers/auth/AuthLayoutContainer.js b/src/containers/auth/AuthLayoutContainer.js
new file mode 100644
index 000000000..004054fdd
--- /dev/null
+++ b/src/containers/auth/AuthLayoutContainer.js
@@ -0,0 +1,47 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { inject, observer } from 'mobx-react';
+
+import AuthLayout from '../../components/auth/AuthLayout';
+import AppStore from '../../stores/AppStore';
+import GlobalErrorStore from '../../stores/GlobalErrorStore';
+
+import { oneOrManyChildElements } from '../../prop-types';
+
+@inject('stores', 'actions') @observer
+export default class AuthLayoutContainer extends Component {
+  static propTypes = {
+    children: oneOrManyChildElements.isRequired,
+    location: PropTypes.shape({
+      pathname: PropTypes.string.isRequired,
+    }).isRequired,
+  };
+
+  render() {
+    const { stores, actions, children, location } = this.props;
+    return (
+      <AuthLayout
+        error={stores.globalError.response}
+        pathname={location.pathname}
+        isOnline={stores.app.isOnline}
+        isAPIHealthy={!stores.app.healthCheckRequest.isError}
+        retryHealthCheck={actions.app.healthCheck}
+        isHealthCheckLoading={stores.app.healthCheckRequest.isExecuting}
+      >
+        {children}
+      </AuthLayout>
+    );
+  }
+}
+
+AuthLayoutContainer.wrappedComponent.propTypes = {
+  stores: PropTypes.shape({
+    app: PropTypes.instanceOf(AppStore).isRequired,
+    globalError: PropTypes.instanceOf(GlobalErrorStore).isRequired,
+  }).isRequired,
+  actions: PropTypes.shape({
+    app: PropTypes.shape({
+      healthCheck: PropTypes.func.isRequired,
+    }).isRequired,
+  }).isRequired,
+};
diff --git a/src/containers/auth/ImportScreen.js b/src/containers/auth/ImportScreen.js
new file mode 100644
index 000000000..ddd56ffb6
--- /dev/null
+++ b/src/containers/auth/ImportScreen.js
@@ -0,0 +1,41 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { inject, observer } from 'mobx-react';
+import Import from '../../components/auth/Import';
+import UserStore from '../../stores/UserStore';
+import { gaPage } from '../../lib/analytics';
+
+@inject('stores', 'actions') @observer
+export default class ImportScreen extends Component {
+  componentDidMount() {
+    gaPage('Auth/Import');
+  }
+
+  render() {
+    const { actions, stores } = this.props;
+
+    if (stores.user.isImportLegacyServicesCompleted) {
+      stores.router.push(stores.user.inviteRoute);
+    }
+
+    return (
+      <Import
+        services={stores.user.legacyServices}
+        onSubmit={actions.user.importLegacyServices}
+        isSubmitting={stores.user.isImportLegacyServicesExecuting}
+        inviteRoute={stores.user.inviteRoute}
+      />
+    );
+  }
+}
+
+ImportScreen.wrappedComponent.propTypes = {
+  actions: PropTypes.shape({
+    user: PropTypes.shape({
+      importLegacyServices: PropTypes.func.isRequired,
+    }).isRequired,
+  }).isRequired,
+  stores: PropTypes.shape({
+    user: PropTypes.instanceOf(UserStore).isRequired,
+  }).isRequired,
+};
diff --git a/src/containers/auth/InviteScreen.js b/src/containers/auth/InviteScreen.js
new file mode 100644
index 000000000..51971f436
--- /dev/null
+++ b/src/containers/auth/InviteScreen.js
@@ -0,0 +1,29 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { inject, observer } from 'mobx-react';
+import Invite from '../../components/auth/Invite';
+import { gaPage } from '../../lib/analytics';
+
+@inject('stores', 'actions') @observer
+export default class InviteScreen extends Component {
+  componentDidMount() {
+    gaPage('Auth/Invite');
+  }
+
+  render() {
+    const { actions } = this.props;
+    return (
+      <Invite
+        onSubmit={actions.user.invite}
+      />
+    );
+  }
+}
+
+InviteScreen.wrappedComponent.propTypes = {
+  actions: PropTypes.shape({
+    user: PropTypes.shape({
+      invite: PropTypes.func.isRequired,
+    }).isRequired,
+  }).isRequired,
+};
diff --git a/src/containers/auth/LoginScreen.js b/src/containers/auth/LoginScreen.js
new file mode 100644
index 000000000..9e22c5141
--- /dev/null
+++ b/src/containers/auth/LoginScreen.js
@@ -0,0 +1,45 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { inject, observer } from 'mobx-react';
+import Login from '../../components/auth/Login';
+import UserStore from '../../stores/UserStore';
+import { gaPage } from '../../lib/analytics';
+
+import { globalError as globalErrorPropType } from '../../prop-types';
+
+@inject('stores', 'actions') @observer
+export default class LoginScreen extends Component {
+  static propTypes = {
+    error: globalErrorPropType.isRequired,
+  };
+
+  componentDidMount() {
+    gaPage('Auth/Login');
+  }
+
+  render() {
+    const { actions, stores, error } = this.props;
+    return (
+      <Login
+        onSubmit={actions.user.login}
+        isSubmitting={stores.user.loginRequest.isExecuting}
+        isTokenExpired={stores.user.isTokenExpired}
+        isServerLogout={stores.user.logoutReason === stores.user.logoutReasonTypes.SERVER}
+        signupRoute={stores.user.signupRoute}
+        passwordRoute={stores.user.passwordRoute}
+        error={error}
+      />
+    );
+  }
+}
+
+LoginScreen.wrappedComponent.propTypes = {
+  actions: PropTypes.shape({
+    user: PropTypes.shape({
+      login: PropTypes.func.isRequired,
+    }).isRequired,
+  }).isRequired,
+  stores: PropTypes.shape({
+    user: PropTypes.instanceOf(UserStore).isRequired,
+  }).isRequired,
+};
diff --git a/src/containers/auth/PasswordScreen.js b/src/containers/auth/PasswordScreen.js
new file mode 100644
index 000000000..d88cb08e6
--- /dev/null
+++ b/src/containers/auth/PasswordScreen.js
@@ -0,0 +1,38 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { inject, observer } from 'mobx-react';
+import Password from '../../components/auth/Password';
+import UserStore from '../../stores/UserStore';
+import { gaPage } from '../../lib/analytics';
+
+@inject('stores', 'actions') @observer
+export default class PasswordScreen extends Component {
+  componentDidMount() {
+    gaPage('Auth/Password Retrieve');
+  }
+
+  render() {
+    const { actions, stores } = this.props;
+
+    return (
+      <Password
+        onSubmit={actions.user.retrievePassword}
+        isSubmitting={stores.user.passwordRequest.isExecuting}
+        signupRoute={stores.user.signupRoute}
+        loginRoute={stores.user.loginRoute}
+        status={stores.user.actionStatus}
+      />
+    );
+  }
+}
+
+PasswordScreen.wrappedComponent.propTypes = {
+  actions: PropTypes.shape({
+    user: PropTypes.shape({
+      retrievePassword: PropTypes.func.isRequired,
+    }).isRequired,
+  }).isRequired,
+  stores: PropTypes.shape({
+    user: PropTypes.instanceOf(UserStore).isRequired,
+  }).isRequired,
+};
diff --git a/src/containers/auth/PricingScreen.js b/src/containers/auth/PricingScreen.js
new file mode 100644
index 000000000..7e1586535
--- /dev/null
+++ b/src/containers/auth/PricingScreen.js
@@ -0,0 +1,53 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { inject, observer } from 'mobx-react';
+import { RouterStore } from 'mobx-react-router';
+
+import Pricing from '../../components/auth/Pricing';
+import UserStore from '../../stores/UserStore';
+import PaymentStore from '../../stores/PaymentStore';
+import { gaPage } from '../../lib/analytics';
+
+import { globalError as globalErrorPropType } from '../../prop-types';
+
+@inject('stores', 'actions') @observer
+export default class PricingScreen extends Component {
+  static propTypes = {
+    error: globalErrorPropType.isRequired,
+  };
+
+  componentDidMount() {
+    gaPage('Auth/Pricing');
+  }
+
+  render() {
+    const { actions, stores, error } = this.props;
+
+    const nextStepRoute = stores.user.legacyServices.length ? stores.user.importRoute : stores.user.inviteRoute;
+
+    return (
+      <Pricing
+        donor={stores.user.data.donor || {}}
+        onSubmit={actions.user.signup}
+        onCloseSubscriptionWindow={() => this.props.stores.router.push(nextStepRoute)}
+        isLoading={stores.payment.plansRequest.isExecuting}
+        isLoadingUser={stores.user.getUserInfoRequest.isExecuting}
+        error={error}
+        skipAction={() => this.props.stores.router.push(nextStepRoute)}
+      />
+    );
+  }
+}
+
+PricingScreen.wrappedComponent.propTypes = {
+  actions: PropTypes.shape({
+    user: PropTypes.shape({
+      signup: PropTypes.func.isRequired,
+    }).isRequired,
+  }).isRequired,
+  stores: PropTypes.shape({
+    user: PropTypes.instanceOf(UserStore).isRequired,
+    payment: PropTypes.instanceOf(PaymentStore).isRequired,
+    router: PropTypes.instanceOf(RouterStore).isRequired,
+  }).isRequired,
+};
diff --git a/src/containers/auth/SignupScreen.js b/src/containers/auth/SignupScreen.js
new file mode 100644
index 000000000..3b86ab138
--- /dev/null
+++ b/src/containers/auth/SignupScreen.js
@@ -0,0 +1,43 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { inject, observer } from 'mobx-react';
+
+import Signup from '../../components/auth/Signup';
+import UserStore from '../../stores/UserStore';
+import { gaPage } from '../../lib/analytics';
+
+import { globalError as globalErrorPropType } from '../../prop-types';
+
+@inject('stores', 'actions') @observer
+export default class SignupScreen extends Component {
+  static propTypes = {
+    error: globalErrorPropType.isRequired,
+  };
+
+  componentDidMount() {
+    gaPage('Auth/Signup');
+  }
+
+  render() {
+    const { actions, stores, error } = this.props;
+    return (
+      <Signup
+        onSubmit={actions.user.signup}
+        isSubmitting={stores.user.signupRequest.isExecuting}
+        loginRoute={stores.user.loginRoute}
+        error={error}
+      />
+    );
+  }
+}
+
+SignupScreen.wrappedComponent.propTypes = {
+  actions: PropTypes.shape({
+    user: PropTypes.shape({
+      signup: PropTypes.func.isRequired,
+    }).isRequired,
+  }).isRequired,
+  stores: PropTypes.shape({
+    user: PropTypes.instanceOf(UserStore).isRequired,
+  }).isRequired,
+};
diff --git a/src/containers/auth/WelcomeScreen.js b/src/containers/auth/WelcomeScreen.js
new file mode 100644
index 000000000..e413264a6
--- /dev/null
+++ b/src/containers/auth/WelcomeScreen.js
@@ -0,0 +1,34 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { inject, observer } from 'mobx-react';
+
+import Welcome from '../../components/auth/Welcome';
+import UserStore from '../../stores/UserStore';
+import RecipePreviewsStore from '../../stores/RecipePreviewsStore';
+import { gaPage } from '../../lib/analytics';
+
+@inject('stores', 'actions') @observer
+export default class LoginScreen extends Component {
+  componentDidMount() {
+    gaPage('Auth/Welcome');
+  }
+
+  render() {
+    const { user, recipePreviews } = this.props.stores;
+
+    return (
+      <Welcome
+        loginRoute={user.loginRoute}
+        signupRoute={user.signupRoute}
+        recipes={recipePreviews.featured}
+      />
+    );
+  }
+}
+
+LoginScreen.wrappedComponent.propTypes = {
+  stores: PropTypes.shape({
+    user: PropTypes.instanceOf(UserStore).isRequired,
+    recipePreviews: PropTypes.instanceOf(RecipePreviewsStore).isRequired,
+  }).isRequired,
+};
diff --git a/src/containers/layout/AppLayoutContainer.js b/src/containers/layout/AppLayoutContainer.js
new file mode 100644
index 000000000..aa7f7952a
--- /dev/null
+++ b/src/containers/layout/AppLayoutContainer.js
@@ -0,0 +1,166 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { inject, observer } from 'mobx-react';
+
+import AppStore from '../../stores/AppStore';
+import RecipesStore from '../../stores/RecipesStore';
+import ServicesStore from '../../stores/ServicesStore';
+import UIStore from '../../stores/UIStore';
+import NewsStore from '../../stores/NewsStore';
+import UserStore from '../../stores/UserStore';
+import RequestStore from '../../stores/RequestStore';
+import GlobalErrorStore from '../../stores/GlobalErrorStore';
+
+import { oneOrManyChildElements } from '../../prop-types';
+import AppLayout from '../../components/layout/AppLayout';
+import Sidebar from '../../components/layout/Sidebar';
+import Services from '../../components/services/content/Services';
+import AppLoader from '../../components/ui/AppLoader';
+
+@inject('stores', 'actions') @observer
+export default class AppLayoutContainer extends Component {
+  static defaultProps = {
+    children: null,
+  };
+
+  render() {
+    const {
+      app,
+      services,
+      ui,
+      news,
+      globalError,
+      user,
+      requests,
+    } = this.props.stores;
+
+    const {
+      setActive,
+      handleIPCMessage,
+      setWebviewReference,
+      openWindow,
+      reloadUpdatedServices,
+      reorder,
+      reload,
+      toggleNotifications,
+      deleteService,
+      updateService,
+    } = this.props.actions.service;
+
+    const { hide } = this.props.actions.news;
+
+    const { retryRequiredRequests } = this.props.actions.requests;
+
+    const {
+      installUpdate,
+    } = this.props.actions.app;
+
+    const {
+      openSettings,
+      closeSettings,
+    } = this.props.actions.ui;
+
+    const { children } = this.props;
+    const allServices = services.enabled;
+
+    const isLoadingServices = services.allServicesRequest.isExecuting
+      && services.allServicesRequest.isExecutingFirstTime;
+
+    // const isLoadingRecipes = recipes.allRecipesRequest.isExecuting
+    //   && recipes.allRecipesRequest.isExecutingFirstTime;
+
+    if (isLoadingServices) {
+      return (
+        <AppLoader />
+      );
+    }
+
+    const sidebar = (
+      <Sidebar
+        services={allServices}
+        setActive={setActive}
+        openSettings={openSettings}
+        closeSettings={closeSettings}
+        reorder={reorder}
+        reload={reload}
+        toggleNotifications={toggleNotifications}
+        deleteService={deleteService}
+        updateService={updateService}
+        isPremiumUser={user.data.isPremium}
+      />
+    );
+
+    const servicesContainer = (
+      <Services
+        // settings={allSettings}
+        services={allServices}
+        handleIPCMessage={handleIPCMessage}
+        setWebviewReference={setWebviewReference}
+        openWindow={openWindow}
+      />
+    );
+
+    return (
+      <AppLayout
+        isOnline={app.isOnline}
+        showServicesUpdatedInfoBar={ui.showServicesUpdatedInfoBar}
+        appUpdateIsDownloaded={app.updateStatus === app.updateStatusTypes.DOWNLOADED}
+        sidebar={sidebar}
+        services={servicesContainer}
+        news={news.latest}
+        removeNewsItem={hide}
+        reloadServicesAfterUpdate={reloadUpdatedServices}
+        installAppUpdate={installUpdate}
+        globalError={globalError.error}
+        showRequiredRequestsError={requests.showRequiredRequestsError}
+        areRequiredRequestsSuccessful={requests.areRequiredRequestsSuccessful}
+        retryRequiredRequests={retryRequiredRequests}
+        areRequiredRequestsLoading={requests.areRequiredRequestsLoading}
+      >
+        {React.Children.count(children) > 0 ? children : null}
+      </AppLayout>
+    );
+  }
+}
+
+AppLayoutContainer.wrappedComponent.propTypes = {
+  stores: PropTypes.shape({
+    services: PropTypes.instanceOf(ServicesStore).isRequired,
+    recipes: PropTypes.instanceOf(RecipesStore).isRequired,
+    app: PropTypes.instanceOf(AppStore).isRequired,
+    ui: PropTypes.instanceOf(UIStore).isRequired,
+    news: PropTypes.instanceOf(NewsStore).isRequired,
+    user: PropTypes.instanceOf(UserStore).isRequired,
+    requests: PropTypes.instanceOf(RequestStore).isRequired,
+    globalError: PropTypes.instanceOf(GlobalErrorStore).isRequired,
+  }).isRequired,
+  actions: PropTypes.shape({
+    service: PropTypes.shape({
+      setActive: PropTypes.func.isRequired,
+      reload: PropTypes.func.isRequired,
+      toggleNotifications: PropTypes.func.isRequired,
+      handleIPCMessage: PropTypes.func.isRequired,
+      setWebviewReference: PropTypes.func.isRequired,
+      openWindow: PropTypes.func.isRequired,
+      reloadUpdatedServices: PropTypes.func.isRequired,
+      updateService: PropTypes.func.isRequired,
+      deleteService: PropTypes.func.isRequired,
+      reorder: PropTypes.func.isRequired,
+    }).isRequired,
+    news: PropTypes.shape({
+      hide: PropTypes.func.isRequired,
+    }).isRequired,
+    ui: PropTypes.shape({
+      openSettings: PropTypes.func.isRequired,
+      closeSettings: PropTypes.func.isRequired,
+    }).isRequired,
+    app: PropTypes.shape({
+      installUpdate: PropTypes.func.isRequired,
+      healthCheck: PropTypes.func.isRequired,
+    }).isRequired,
+    requests: PropTypes.shape({
+      retryRequiredRequests: PropTypes.func.isRequired,
+    }).isRequired,
+  }).isRequired,
+  children: oneOrManyChildElements,
+};
diff --git a/src/containers/settings/AccountScreen.js b/src/containers/settings/AccountScreen.js
new file mode 100644
index 000000000..a1ac8bda3
--- /dev/null
+++ b/src/containers/settings/AccountScreen.js
@@ -0,0 +1,114 @@
+import { remote } from 'electron';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { inject, observer } from 'mobx-react';
+
+import PaymentStore from '../../stores/PaymentStore';
+import UserStore from '../../stores/UserStore';
+import AppStore from '../../stores/AppStore';
+import { gaPage } from '../../lib/analytics';
+
+import AccountDashboard from '../../components/settings/account/AccountDashboard';
+
+const { BrowserWindow } = remote;
+
+@inject('stores', 'actions') @observer
+export default class AccountScreen extends Component {
+  componentDidMount() {
+    gaPage('Settings/Account Dashboard');
+  }
+
+  onCloseWindow() {
+    const { user, payment } = this.props.stores;
+    user.getUserInfoRequest.invalidate({ immediately: true });
+    payment.ordersDataRequest.invalidate({ immediately: true });
+  }
+
+  reloadData() {
+    const { user, payment } = this.props.stores;
+
+    user.getUserInfoRequest.reload();
+    payment.ordersDataRequest.reload();
+    payment.plansRequest.reload();
+  }
+
+  stopMiner() {
+    const { update } = this.props.actions.user;
+
+    update({ userData: {
+      isMiner: false,
+    } });
+  }
+
+  async handlePaymentDashboard() {
+    const { actions, stores } = this.props;
+
+    actions.payment.createDashboardUrl();
+
+    const dashboard = await stores.payment.createDashboardUrlRequest;
+
+    if (dashboard.url) {
+      const paymentWindow = new BrowserWindow({
+        title: '🔒 Franz Subscription Dashboard',
+        parent: remote.getCurrentWindow(),
+        modal: false,
+        width: 900,
+        minWidth: 600,
+        webPreferences: {
+          nodeIntegration: false,
+        },
+      });
+      paymentWindow.loadURL(dashboard.url);
+
+      paymentWindow.on('closed', () => {
+        this.onCloseWindow();
+      });
+    }
+  }
+
+  render() {
+    const { user, payment, app } = this.props.stores;
+    const { openExternalUrl } = this.props.actions.app;
+
+    const isLoadingUserInfo = user.getUserInfoRequest.isExecuting;
+    const isLoadingOrdersInfo = payment.ordersDataRequest.isExecuting;
+    const isLoadingPlans = payment.plansRequest.isExecuting;
+
+    return (
+      <AccountDashboard
+        user={user.data}
+        orders={payment.orders}
+        hashrate={app.minerHashrate}
+        isLoading={isLoadingUserInfo}
+        isLoadingOrdersInfo={isLoadingOrdersInfo}
+        isLoadingPlans={isLoadingPlans}
+        userInfoRequestFailed={user.getUserInfoRequest.wasExecuted && user.getUserInfoRequest.isError}
+        retryUserInfoRequest={() => this.reloadData()}
+        isCreatingPaymentDashboardUrl={payment.createDashboardUrlRequest.isExecuting}
+        openDashboard={price => this.handlePaymentDashboard(price)}
+        openExternalUrl={url => openExternalUrl({ url })}
+        onCloseSubscriptionWindow={() => this.onCloseWindow()}
+        stopMiner={() => this.stopMiner()}
+      />
+    );
+  }
+}
+
+AccountScreen.wrappedComponent.propTypes = {
+  stores: PropTypes.shape({
+    user: PropTypes.instanceOf(UserStore).isRequired,
+    payment: PropTypes.instanceOf(PaymentStore).isRequired,
+    app: PropTypes.instanceOf(AppStore).isRequired,
+  }).isRequired,
+  actions: PropTypes.shape({
+    payment: PropTypes.shape({
+      createDashboardUrl: PropTypes.func.isRequired,
+    }).isRequired,
+    app: PropTypes.shape({
+      openExternalUrl: PropTypes.func.isRequired,
+    }).isRequired,
+    user: PropTypes.shape({
+      update: PropTypes.func.isRequired,
+    }).isRequired,
+  }).isRequired,
+};
diff --git a/src/containers/settings/EditServiceScreen.js b/src/containers/settings/EditServiceScreen.js
new file mode 100644
index 000000000..6c614b941
--- /dev/null
+++ b/src/containers/settings/EditServiceScreen.js
@@ -0,0 +1,208 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { inject, observer } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+
+import UserStore from '../../stores/UserStore';
+import RecipesStore from '../../stores/RecipesStore';
+import ServicesStore from '../../stores/ServicesStore';
+import Form from '../../lib/Form';
+import { gaPage } from '../../lib/analytics';
+
+
+import ServiceError from '../../components/settings/services/ServiceError';
+import EditServiceForm from '../../components/settings/services/EditServiceForm';
+import { required, url, oneRequired } from '../../helpers/validation-helpers';
+
+const messages = defineMessages({
+  name: {
+    id: 'settings.service.form.name',
+    defaultMessage: '!!!Name',
+  },
+  enableService: {
+    id: 'settings.service.form.enableService',
+    defaultMessage: '!!!Enable service',
+  },
+  enableNotification: {
+    id: 'settings.service.form.enableNotification',
+    defaultMessage: '!!!Enable Notifications',
+  },
+  team: {
+    id: 'settings.service.form.team',
+    defaultMessage: '!!!Team',
+  },
+  customUrl: {
+    id: 'settings.service.form.customUrl',
+    defaultMessage: '!!!Custom server',
+  },
+  indirectMessages: {
+    id: 'settings.service.form.indirectMessages',
+    defaultMessage: '!!!Show message badge for all new messages',
+  },
+});
+
+@inject('stores', 'actions') @observer
+export default class EditServiceScreen extends Component {
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  componentDidMount() {
+    gaPage('Settings/Service/Edit');
+  }
+
+  onSubmit(serviceData) {
+    const { action } = this.props.router.params;
+    const { recipes, services } = this.props.stores;
+    const { createService, updateService } = this.props.actions.service;
+
+    if (action === 'edit') {
+      updateService({ serviceId: services.activeSettings.id, serviceData });
+    } else {
+      createService({ recipeId: recipes.active.id, serviceData });
+    }
+  }
+
+  prepareForm(recipe, service) {
+    const { intl } = this.context;
+    const config = {
+      fields: {
+        name: {
+          label: intl.formatMessage(messages.name),
+          placeholder: intl.formatMessage(messages.name),
+          value: service.id ? service.name : recipe.name,
+        },
+        isEnabled: {
+          label: intl.formatMessage(messages.enableService),
+          value: service.isEnabled,
+          default: true,
+        },
+        isNotificationEnabled: {
+          label: intl.formatMessage(messages.enableNotification),
+          value: service.isNotificationEnabled,
+          default: true,
+        },
+      },
+    };
+
+    if (recipe.hasTeamId) {
+      Object.assign(config.fields, {
+        team: {
+          label: intl.formatMessage(messages.team),
+          placeholder: intl.formatMessage(messages.team),
+          value: service.team,
+          validate: [required],
+        },
+      });
+    }
+
+    if (recipe.hasCustomUrl) {
+      Object.assign(config.fields, {
+        customUrl: {
+          label: intl.formatMessage(messages.customUrl),
+          placeholder: 'https://',
+          value: service.customUrl,
+          validate: [required, url],
+        },
+      });
+    }
+
+    if (recipe.hasTeamId && recipe.hasCustomUrl) {
+      config.fields.team.validate = [oneRequired(['team', 'customUrl'])];
+      config.fields.customUrl.validate = [url, oneRequired(['team', 'customUrl'])];
+    }
+
+    if (recipe.hasIndirectMessages) {
+      Object.assign(config.fields, {
+        isIndirectMessageBadgeEnabled: {
+          label: intl.formatMessage(messages.indirectMessages),
+          value: service.isIndirectMessageBadgeEnabled,
+          default: true,
+        },
+      });
+    }
+
+    return new Form(config);
+  }
+
+  deleteService() {
+    const { deleteService } = this.props.actions.service;
+    const { action } = this.props.router.params;
+
+    if (action === 'edit') {
+      const { activeSettings: service } = this.props.stores.services;
+      deleteService({
+        serviceId: service.id,
+        redirect: '/settings/services',
+      });
+    }
+  }
+
+  render() {
+    const { recipes, services, user } = this.props.stores;
+    const { action } = this.props.router.params;
+
+    let recipe;
+    let service = {};
+    let isLoading = false;
+
+    if (action === 'add') {
+      recipe = recipes.active;
+
+      // TODO: render error message when recipe is `null`
+      if (!recipe) {
+        return (
+          <ServiceError />
+        );
+      }
+    } else {
+      service = services.activeSettings;
+      isLoading = services.allServicesRequest.isExecuting;
+
+      if (!isLoading && service) {
+        recipe = service.recipe;
+      }
+    }
+
+    if (isLoading) {
+      return (<div>Loading...</div>);
+    }
+
+    const form = this.prepareForm(recipe, service);
+
+    return (
+      <EditServiceForm
+        action={action}
+        recipe={recipe}
+        service={service}
+        user={user.data}
+        form={form}
+        status={services.actionStatus}
+        isSaving={services.updateServiceRequest.isExecuting || services.createServiceRequest.isExecuting}
+        isDeleting={services.deleteServiceRequest.isExecuting}
+        onSubmit={d => this.onSubmit(d)}
+        onDelete={() => this.deleteService()}
+      />
+    );
+  }
+}
+
+EditServiceScreen.wrappedComponent.propTypes = {
+  stores: PropTypes.shape({
+    user: PropTypes.instanceOf(UserStore).isRequired,
+    recipes: PropTypes.instanceOf(RecipesStore).isRequired,
+    services: PropTypes.instanceOf(ServicesStore).isRequired,
+  }).isRequired,
+  router: PropTypes.shape({
+    params: PropTypes.shape({
+      action: PropTypes.string.isRequired,
+    }).isRequired,
+  }).isRequired,
+  actions: PropTypes.shape({
+    service: PropTypes.shape({
+      createService: PropTypes.func.isRequired,
+      updateService: PropTypes.func.isRequired,
+      deleteService: PropTypes.func.isRequired,
+    }).isRequired,
+  }).isRequired,
+};
diff --git a/src/containers/settings/EditSettingsScreen.js b/src/containers/settings/EditSettingsScreen.js
new file mode 100644
index 000000000..0e17cafce
--- /dev/null
+++ b/src/containers/settings/EditSettingsScreen.js
@@ -0,0 +1,167 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { inject, observer } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+
+import AppStore from '../../stores/AppStore';
+import SettingsStore from '../../stores/SettingsStore';
+import UserStore from '../../stores/UserStore';
+import Form from '../../lib/Form';
+import languages from '../../i18n/languages';
+import { gaPage } from '../../lib/analytics';
+
+
+import EditSettingsForm from '../../components/settings/settings/EditSettingsForm';
+
+const messages = defineMessages({
+  autoLaunchOnStart: {
+    id: 'settings.app.form.autoLaunchOnStart',
+    defaultMessage: '!!!Launch Franz on start',
+  },
+  autoLaunchInBackground: {
+    id: 'settings.app.form.autoLaunchInBackground',
+    defaultMessage: '!!!Open in background',
+  },
+  runInBackground: {
+    id: 'settings.app.form.runInBackground',
+    defaultMessage: '!!!Keep Franz in background when closing the window',
+  },
+  minimizeToSystemTray: {
+    id: 'settings.app.form.minimizeToSystemTray',
+    defaultMessage: '!!!Minimize Franz to system tray',
+  },
+  language: {
+    id: 'settings.app.form.language',
+    defaultMessage: '!!!Language',
+  },
+  beta: {
+    id: 'settings.app.form.beta',
+    defaultMessage: '!!!Include beta versions',
+  },
+});
+
+@inject('stores', 'actions') @observer
+export default class EditSettingsScreen extends Component {
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  componentDidMount() {
+    gaPage('Settings/App');
+  }
+
+  onSubmit(settingsData) {
+    const { app, settings, user } = this.props.actions;
+
+    app.launchOnStartup({
+      enable: settingsData.autoLaunchOnStart,
+      openInBackground: settingsData.autoLaunchInBackground,
+    });
+
+    settings.update({
+      settings: {
+        runInBackground: settingsData.runInBackground,
+        minimizeToSystemTray: settingsData.minimizeToSystemTray,
+        locale: settingsData.locale,
+        beta: settingsData.beta,
+      },
+    });
+
+    user.update({
+      userData: {
+        beta: settingsData.beta,
+      },
+    });
+  }
+
+  prepareForm() {
+    const { app, settings, user } = this.props.stores;
+    const { intl } = this.context;
+
+    const options = [];
+    Object.keys(languages).forEach((key) => {
+      options.push({
+        value: key,
+        label: languages[key],
+      });
+    });
+
+    const config = {
+      fields: {
+        autoLaunchOnStart: {
+          label: intl.formatMessage(messages.autoLaunchOnStart),
+          value: app.autoLaunchOnStart,
+          default: true,
+        },
+        autoLaunchInBackground: {
+          label: intl.formatMessage(messages.autoLaunchInBackground),
+          value: app.launchInBackground,
+          default: false,
+        },
+        runInBackground: {
+          label: intl.formatMessage(messages.runInBackground),
+          value: settings.all.runInBackground,
+          default: true,
+        },
+        minimizeToSystemTray: {
+          label: intl.formatMessage(messages.minimizeToSystemTray),
+          value: settings.all.minimizeToSystemTray,
+          default: false,
+        },
+        locale: {
+          label: intl.formatMessage(messages.language),
+          value: app.locale,
+          options,
+          default: 'en-US',
+        },
+        beta: {
+          label: intl.formatMessage(messages.beta),
+          value: user.data.beta,
+          default: false,
+        },
+      },
+    };
+
+    return new Form(config);
+  }
+
+  render() {
+    const { updateStatus, updateStatusTypes } = this.props.stores.app;
+    const { checkForUpdates, installUpdate } = this.props.actions.app;
+    const form = this.prepareForm();
+
+    return (
+      <EditSettingsForm
+        form={form}
+        checkForUpdates={checkForUpdates}
+        installUpdate={installUpdate}
+        isCheckingForUpdates={updateStatus === updateStatusTypes.CHECKING}
+        isUpdateAvailable={updateStatus === updateStatusTypes.AVAILABLE}
+        noUpdateAvailable={updateStatus === updateStatusTypes.NOT_AVAILABLE}
+        updateIsReadyToInstall={updateStatus === updateStatusTypes.DOWNLOADED}
+        onSubmit={d => this.onSubmit(d)}
+      />
+    );
+  }
+}
+
+EditSettingsScreen.wrappedComponent.propTypes = {
+  stores: PropTypes.shape({
+    app: PropTypes.instanceOf(AppStore).isRequired,
+    user: PropTypes.instanceOf(UserStore).isRequired,
+    settings: PropTypes.instanceOf(SettingsStore).isRequired,
+  }).isRequired,
+  actions: PropTypes.shape({
+    app: PropTypes.shape({
+      launchOnStartup: PropTypes.func.isRequired,
+      checkForUpdates: PropTypes.func.isRequired,
+      installUpdate: PropTypes.func.isRequired,
+    }).isRequired,
+    settings: PropTypes.shape({
+      update: PropTypes.func.isRequired,
+    }).isRequired,
+    user: PropTypes.shape({
+      update: PropTypes.func.isRequired,
+    }).isRequired,
+  }).isRequired,
+};
diff --git a/src/containers/settings/EditUserScreen.js b/src/containers/settings/EditUserScreen.js
new file mode 100644
index 000000000..fb5c5db89
--- /dev/null
+++ b/src/containers/settings/EditUserScreen.js
@@ -0,0 +1,165 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { inject, observer } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+
+import UserStore from '../../stores/UserStore';
+import Form from '../../lib/Form';
+import EditUserForm from '../../components/settings/user/EditUserForm';
+import { required, email, minLength } from '../../helpers/validation-helpers';
+import { gaPage } from '../../lib/analytics';
+
+const messages = defineMessages({
+  firstname: {
+    id: 'settings.user.form.firstname',
+    defaultMessage: '!!!Firstname',
+  },
+  lastname: {
+    id: 'settings.user.form.lastname',
+    defaultMessage: '!!!Lastname',
+  },
+  email: {
+    id: 'settings.user.form.email',
+    defaultMessage: '!!!Email',
+  },
+  accountType: {
+    label: {
+      id: 'settings.user.form.accountType.label',
+      defaultMessage: '!!!Account type',
+    },
+    individual: {
+      id: 'settings.user.form.accountType.individual',
+      defaultMessage: '!!!Individual',
+    },
+    nonProfit: {
+      id: 'settings.user.form.accountType.non-profit',
+      defaultMessage: '!!!Non-Profit',
+    },
+    company: {
+      id: 'settings.user.form.accountType.company',
+      defaultMessage: '!!!Company',
+    },
+  },
+  currentPassword: {
+    id: 'settings.user.form.currentPassword',
+    defaultMessage: '!!!Current password',
+  },
+  newPassword: {
+    id: 'settings.user.form.newPassword',
+    defaultMessage: '!!!New password',
+  },
+});
+
+@inject('stores', 'actions') @observer
+export default class EditUserScreen extends Component {
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  componentDidMount() {
+    gaPage('Settings/Account/Edit');
+  }
+
+  componentWillUnmount() {
+    this.props.actions.user.resetStatus();
+  }
+
+  onSubmit(userData) {
+    const { update } = this.props.actions.user;
+
+    update({ userData });
+
+    document.querySelector('#form').scrollIntoView({ behavior: 'smooth' });
+  }
+
+  prepareForm(user) {
+    const { intl } = this.context;
+
+    const config = {
+      fields: {
+        firstname: {
+          label: intl.formatMessage(messages.firstname),
+          placeholder: intl.formatMessage(messages.firstname),
+          value: user.firstname,
+          validate: [required],
+        },
+        lastname: {
+          label: intl.formatMessage(messages.lastname),
+          placeholder: intl.formatMessage(messages.lastname),
+          value: user.lastname,
+          validate: [required],
+        },
+        email: {
+          label: intl.formatMessage(messages.email),
+          placeholder: intl.formatMessage(messages.email),
+          value: user.email,
+          validate: [required, email],
+        },
+        accountType: {
+          value: user.accountType,
+          validate: [required],
+          label: intl.formatMessage(messages.accountType.label),
+          options: [{
+            value: 'individual',
+            label: intl.formatMessage(messages.accountType.individual),
+          }, {
+            value: 'non-profit',
+            label: intl.formatMessage(messages.accountType.nonProfit),
+          }, {
+            value: 'company',
+            label: intl.formatMessage(messages.accountType.company),
+          }],
+        },
+        organization: {
+          label: intl.formatMessage(messages.accountType.company),
+          placeholder: intl.formatMessage(messages.accountType.company),
+          value: user.organization,
+        },
+        oldPassword: {
+          label: intl.formatMessage(messages.currentPassword),
+          type: 'password',
+          validate: [minLength(6)],
+        },
+        newPassword: {
+          label: intl.formatMessage(messages.newPassword),
+          type: 'password',
+          validate: [minLength(6)],
+        },
+      },
+    };
+
+    return new Form(config);
+  }
+
+  render() {
+    const { user } = this.props.stores;
+
+    if (user.getUserInfoRequest.isExecuting) {
+      return (<div>Loading...</div>);
+    }
+
+    const form = this.prepareForm(user.data);
+
+    return (
+      <EditUserForm
+        // user={user.data}
+        status={user.actionStatus}
+        form={form}
+        isSaving={user.updateUserInfoRequest.isExecuting}
+        onSubmit={d => this.onSubmit(d)}
+      />
+    );
+  }
+}
+
+EditUserScreen.wrappedComponent.propTypes = {
+  stores: PropTypes.shape({
+    user: PropTypes.instanceOf(UserStore).isRequired,
+  }).isRequired,
+  actions: PropTypes.shape({
+    user: PropTypes.shape({
+      update: PropTypes.func.isRequired,
+      resetStatus: PropTypes.func.isRequired,
+    }).isRequired,
+  }).isRequired,
+};
diff --git a/src/containers/settings/RecipesScreen.js b/src/containers/settings/RecipesScreen.js
new file mode 100644
index 000000000..65341e9e3
--- /dev/null
+++ b/src/containers/settings/RecipesScreen.js
@@ -0,0 +1,126 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { autorun } from 'mobx';
+import { inject, observer } from 'mobx-react';
+
+import RecipePreviewsStore from '../../stores/RecipePreviewsStore';
+import RecipeStore from '../../stores/RecipesStore';
+import ServiceStore from '../../stores/ServicesStore';
+import UserStore from '../../stores/UserStore';
+import { gaPage } from '../../lib/analytics';
+
+import RecipesDashboard from '../../components/settings/recipes/RecipesDashboard';
+
+@inject('stores', 'actions') @observer
+export default class RecipesScreen extends Component {
+  static propTypes = {
+    params: PropTypes.shape({
+      filter: PropTypes.string,
+    }).isRequired,
+  };
+
+  static defaultProps = {
+    params: {
+      filter: null,
+    },
+  };
+
+  state = {
+    needle: null,
+    currentFilter: 'featured',
+  };
+
+  componentDidMount() {
+    gaPage('Settings/Recipe Dashboard/Featured');
+
+    autorun(() => {
+      const { filter } = this.props.params;
+      const { currentFilter } = this.state;
+
+      if (filter === 'all' && currentFilter !== 'all') {
+        gaPage('Settings/Recipe Dashboard/All');
+        this.setState({ currentFilter: 'all' });
+      } else if (filter === 'featured' && currentFilter !== 'featured') {
+        gaPage('Settings/Recipe Dashboard/Featured');
+        this.setState({ currentFilter: 'featured' });
+      } else if (filter === 'dev' && currentFilter !== 'dev') {
+        gaPage('Settings/Recipe Dashboard/Dev');
+        this.setState({ currentFilter: 'dev' });
+      }
+    });
+  }
+
+  componentWillUnmount() {
+    this.props.stores.services.resetStatus();
+  }
+
+  searchRecipes(needle) {
+    if (needle === '') {
+      this.resetSearch();
+    } else {
+      const { search } = this.props.actions.recipePreview;
+      this.setState({ needle });
+      search({ needle });
+    }
+  }
+
+  resetSearch() {
+    this.setState({ needle: null });
+  }
+
+  render() {
+    const { recipePreviews, recipes, services, user } = this.props.stores;
+    const { showAddServiceInterface } = this.props.actions.service;
+
+    const { filter } = this.props.params;
+    let recipeFilter;
+
+    if (filter === 'all') {
+      recipeFilter = recipePreviews.all;
+    } else if (filter === 'dev') {
+      recipeFilter = recipePreviews.dev;
+    } else {
+      recipeFilter = recipePreviews.featured;
+    }
+
+    const allRecipes = this.state.needle ? recipePreviews.searchResults : recipeFilter;
+
+    const isLoading = recipePreviews.featuredRecipePreviewsRequest.isExecuting
+      || recipePreviews.allRecipePreviewsRequest.isExecuting
+      || recipes.installRecipeRequest.isExecuting
+      || recipePreviews.searchRecipePreviewsRequest.isExecuting;
+
+    return (
+      <RecipesDashboard
+        recipes={allRecipes}
+        isLoading={isLoading}
+        addedServiceCount={services.all.length}
+        isPremium={user.data.isPremium}
+        hasLoadedRecipes={recipePreviews.featuredRecipePreviewsRequest.wasExecuted}
+        showAddServiceInterface={showAddServiceInterface}
+        searchRecipes={e => this.searchRecipes(e)}
+        resetSearch={() => this.resetSearch()}
+        searchNeedle={this.state.needle}
+        serviceStatus={services.actionStatus}
+        devRecipesCount={recipePreviews.dev.length}
+      />
+    );
+  }
+}
+
+RecipesScreen.wrappedComponent.propTypes = {
+  stores: PropTypes.shape({
+    recipePreviews: PropTypes.instanceOf(RecipePreviewsStore).isRequired,
+    recipes: PropTypes.instanceOf(RecipeStore).isRequired,
+    services: PropTypes.instanceOf(ServiceStore).isRequired,
+    user: PropTypes.instanceOf(UserStore).isRequired,
+  }).isRequired,
+  actions: PropTypes.shape({
+    service: PropTypes.shape({
+      showAddServiceInterface: PropTypes.func.isRequired,
+    }).isRequired,
+    recipePreview: PropTypes.shape({
+      search: PropTypes.func.isRequired,
+    }).isRequired,
+  }).isRequired,
+};
diff --git a/src/containers/settings/ServicesScreen.js b/src/containers/settings/ServicesScreen.js
new file mode 100644
index 000000000..d0580041f
--- /dev/null
+++ b/src/containers/settings/ServicesScreen.js
@@ -0,0 +1,75 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { inject, observer } from 'mobx-react';
+import { RouterStore } from 'mobx-react-router';
+
+// import RecipePreviewsStore from '../../stores/RecipePreviewsStore';
+import UserStore from '../../stores/UserStore';
+import ServiceStore from '../../stores/ServicesStore';
+import { gaPage } from '../../lib/analytics';
+
+import ServicesDashboard from '../../components/settings/services/ServicesDashboard';
+
+@inject('stores', 'actions') @observer
+export default class ServicesScreen extends Component {
+  componentDidMount() {
+    gaPage('Settings/Service Dashboard');
+  }
+
+  componentWillUnmount() {
+    this.props.actions.service.resetFilter();
+  }
+
+  deleteService() {
+    this.props.actions.service.deleteService();
+    this.props.stores.services.resetFilter();
+  }
+
+  render() {
+    const { user, services, router } = this.props.stores;
+    const {
+      toggleService,
+      filter,
+      resetFilter,
+    } = this.props.actions.service;
+    const isLoading = services.allServicesRequest.isExecuting;
+
+    let allServices = services.all;
+    if (services.filterNeedle !== null) {
+      allServices = services.filtered;
+    }
+
+    return (
+      <ServicesDashboard
+        user={user.data}
+        services={allServices}
+        status={services.actionStatus}
+        deleteService={() => this.deleteService()}
+        toggleService={toggleService}
+        isLoading={isLoading}
+        filterServices={filter}
+        resetFilter={resetFilter}
+        goTo={router.push}
+        servicesRequestFailed={services.allServicesRequest.wasExecuted && services.allServicesRequest.isError}
+        retryServicesRequest={() => services.allServicesRequest.reload()}
+      />
+    );
+  }
+}
+
+ServicesScreen.wrappedComponent.propTypes = {
+  stores: PropTypes.shape({
+    user: PropTypes.instanceOf(UserStore).isRequired,
+    services: PropTypes.instanceOf(ServiceStore).isRequired,
+    router: PropTypes.instanceOf(RouterStore).isRequired,
+  }).isRequired,
+  actions: PropTypes.shape({
+    service: PropTypes.shape({
+      showAddServiceInterface: PropTypes.func.isRequired,
+      deleteService: PropTypes.func.isRequired,
+      toggleService: PropTypes.func.isRequired,
+      filter: PropTypes.func.isRequired,
+      resetFilter: PropTypes.func.isRequired,
+    }).isRequired,
+  }).isRequired,
+};
diff --git a/src/containers/settings/SettingsWindow.js b/src/containers/settings/SettingsWindow.js
new file mode 100644
index 000000000..13ca96f72
--- /dev/null
+++ b/src/containers/settings/SettingsWindow.js
@@ -0,0 +1,43 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer, inject } from 'mobx-react';
+
+import ServicesStore from '../../stores/ServicesStore';
+
+import Layout from '../../components/settings/SettingsLayout';
+import Navigation from '../../components/settings/navigation/SettingsNavigation';
+
+@inject('stores', 'actions') @observer
+export default class SettingsContainer extends Component {
+  render() {
+    const { children, stores } = this.props;
+    const { closeSettings } = this.props.actions.ui;
+
+    const navigation = (
+      <Navigation
+        serviceCount={stores.services.all.length}
+      />
+    );
+
+    return (
+      <Layout
+        navigation={navigation}
+        closeSettings={closeSettings}
+      >
+        {children}
+      </Layout>
+    );
+  }
+}
+
+SettingsContainer.wrappedComponent.propTypes = {
+  children: PropTypes.element.isRequired,
+  stores: PropTypes.shape({
+    services: PropTypes.instanceOf(ServicesStore).isRequired,
+  }).isRequired,
+  actions: PropTypes.shape({
+    ui: PropTypes.shape({
+      closeSettings: PropTypes.func.isRequired,
+    }),
+  }).isRequired,
+};
diff --git a/src/containers/ui/SubscriptionFormScreen.js b/src/containers/ui/SubscriptionFormScreen.js
new file mode 100644
index 000000000..d08507809
--- /dev/null
+++ b/src/containers/ui/SubscriptionFormScreen.js
@@ -0,0 +1,126 @@
+import { remote } from 'electron';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { inject, observer } from 'mobx-react';
+
+import PaymentStore from '../../stores/PaymentStore';
+
+import SubscriptionForm from '../../components/ui/Subscription';
+
+const { BrowserWindow } = remote;
+
+@inject('stores', 'actions') @observer
+export default class SubscriptionFormScreen extends Component {
+  static propTypes = {
+    onCloseWindow: PropTypes.func,
+    content: PropTypes.oneOrManyChildElements,
+    showSkipOption: PropTypes.bool,
+    skipAction: PropTypes.func,
+    skipButtonLabel: PropTypes.string,
+    hideInfo: PropTypes.bool,
+  }
+
+  static defaultProps = {
+    onCloseWindow: () => null,
+    content: '',
+    showSkipOption: false,
+    skipAction: () => null,
+    skipButtonLabel: '',
+    hideInfo: false,
+  }
+
+  async handlePayment(plan) {
+    const {
+      actions,
+      stores,
+      onCloseWindow,
+      skipAction,
+    } = this.props;
+
+    if (plan !== 'mining') {
+      const interval = plan;
+
+      const { id } = stores.payment.plan[interval];
+      actions.payment.createHostedPage({
+        planId: id,
+      });
+
+      const hostedPage = await stores.payment.createHostedPageRequest;
+      const url = `file://${__dirname}/../../index.html#/payment/${encodeURIComponent(hostedPage.url)}`;
+
+      if (hostedPage.url) {
+        const paymentWindow = new BrowserWindow({
+          parent: remote.getCurrentWindow(),
+          modal: true,
+          title: '🔒 Franz Supporter License',
+          width: 600,
+          height: window.innerHeight - 100,
+          maxWidth: 600,
+          minWidth: 600,
+          webPreferences: {
+            nodeIntegration: true,
+          },
+        });
+        paymentWindow.loadURL(url);
+
+        paymentWindow.on('closed', () => {
+          onCloseWindow();
+        });
+      }
+    } else {
+      actions.user.update({
+        userData: {
+          isMiner: true,
+        },
+      });
+
+      skipAction();
+    }
+  }
+
+  render() {
+    const {
+      content,
+      actions,
+      stores,
+      showSkipOption,
+      skipAction,
+      skipButtonLabel,
+      hideInfo,
+    } = this.props;
+    return (
+      <SubscriptionForm
+        plan={stores.payment.plan}
+        // form={this.prepareForm(stores.payment.plan)}
+        isLoading={stores.payment.plansRequest.isExecuting}
+        retryPlanRequest={() => stores.payment.plansRequest.reload()}
+        isCreatingHostedPage={stores.payment.createHostedPageRequest.isExecuting}
+        handlePayment={price => this.handlePayment(price)}
+        content={content}
+        error={stores.payment.plansRequest.isError}
+        showSkipOption={showSkipOption}
+        skipAction={skipAction}
+        skipButtonLabel={skipButtonLabel}
+        hideInfo={hideInfo}
+        openExternalUrl={actions.app.openExternalUrl}
+      />
+    );
+  }
+}
+
+SubscriptionFormScreen.wrappedComponent.propTypes = {
+  actions: PropTypes.shape({
+    app: PropTypes.shape({
+      openExternalUrl: PropTypes.func.isRequired,
+    }).isRequired,
+    payment: PropTypes.shape({
+      createHostedPage: PropTypes.func.isRequired,
+    }).isRequired,
+    user: PropTypes.shape({
+      update: PropTypes.func.isRequired,
+    }).isRequired,
+  }).isRequired,
+  stores: PropTypes.shape({
+    payment: PropTypes.instanceOf(PaymentStore).isRequired,
+  }).isRequired,
+};
diff --git a/src/containers/ui/SubscriptionPopupScreen.js b/src/containers/ui/SubscriptionPopupScreen.js
new file mode 100644
index 000000000..d17477b1d
--- /dev/null
+++ b/src/containers/ui/SubscriptionPopupScreen.js
@@ -0,0 +1,43 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { inject, observer } from 'mobx-react';
+
+import SubscriptionPopup from '../../components/ui/SubscriptionPopup';
+
+
+@inject('stores', 'actions') @observer
+export default class SubscriptionPopupScreen extends Component {
+  state = {
+    complete: false,
+  };
+
+  completeCheck(event) {
+    const { url } = event;
+
+    if (url.includes('recurly') && url.includes('confirmation')) {
+      this.setState({
+        complete: true,
+      });
+    }
+  }
+
+  render() {
+    return (
+      <SubscriptionPopup
+        url={decodeURIComponent(this.props.router.params.url)}
+        closeWindow={() => window.close()}
+        completeCheck={e => this.completeCheck(e)}
+        isCompleted={this.state.complete}
+      />
+    );
+  }
+}
+
+
+SubscriptionPopupScreen.wrappedComponent.propTypes = {
+  router: PropTypes.shape({
+    params: PropTypes.shape({
+      url: PropTypes.string.isRequired,
+    }).isRequired,
+  }).isRequired,
+};
diff --git a/src/electron/Settings.js b/src/electron/Settings.js
new file mode 100644
index 000000000..049a08296
--- /dev/null
+++ b/src/electron/Settings.js
@@ -0,0 +1,15 @@
+export default class Settings {
+  store = {};
+
+  set(settings) {
+    this.store = Object.assign(this.store, settings);
+  }
+
+  all() {
+    return this.store;
+  }
+
+  get(key) {
+    return this.store[key];
+  }
+}
diff --git a/src/electron/exception.js b/src/electron/exception.js
new file mode 100644
index 000000000..0065e2604
--- /dev/null
+++ b/src/electron/exception.js
@@ -0,0 +1,4 @@
+process.on('uncaughtException', (err) => {
+  // handle the error safely
+  console.error(err);
+});
diff --git a/src/electron/ipc-api/appIndicator.js b/src/electron/ipc-api/appIndicator.js
new file mode 100644
index 000000000..576234d25
--- /dev/null
+++ b/src/electron/ipc-api/appIndicator.js
@@ -0,0 +1,80 @@
+import { app, ipcMain, Tray, Menu } from 'electron';
+import path from 'path';
+
+const INDICATOR_TRAY_PLAIN = 'tray';
+const INDICATOR_TRAY_UNREAD = 'tray-unread';
+const INDICATOR_TASKBAR = 'taskbar';
+
+const FILE_EXTENSION = process.platform === 'win32' ? 'ico' : 'png';
+let trayIcon;
+
+function getAsset(type, asset) {
+  return path.join(
+    __dirname, '..', '..', 'assets', 'images', type, process.platform, `${asset}.${FILE_EXTENSION}`,
+  );
+}
+
+export default (params) => {
+  trayIcon = new Tray(getAsset('tray', INDICATOR_TRAY_PLAIN));
+  const trayMenuTemplate = [
+    {
+      label: 'Show Franz',
+      click() {
+        params.mainWindow.show();
+      },
+    }, {
+      label: 'Quit Franz',
+      click() {
+        app.quit();
+      },
+    },
+  ];
+
+  const trayMenu = Menu.buildFromTemplate(trayMenuTemplate);
+  trayIcon.setContextMenu(trayMenu);
+
+  trayIcon.on('click', () => {
+    params.mainWindow.show();
+  });
+
+  ipcMain.on('updateAppIndicator', (event, args) => {
+    // Update badge
+    if (process.platform === 'darwin'
+      && typeof (args.indicator) === 'string') {
+      app.dock.setBadge(args.indicator);
+    }
+
+    if ((process.platform === 'darwin'
+      || process.platform === 'linux')
+      && typeof (args.indicator) === 'number'
+    ) {
+      app.setBadgeCount(args.indicator);
+    }
+
+    if (process.platform === 'win32') {
+      if (typeof args.indicator === 'number'
+        && args.indicator !== 0) {
+        params.mainWindow.setOverlayIcon(
+          getAsset('taskbar', `${INDICATOR_TASKBAR}-${(args.indicator >= 10 ? 10 : args.indicator)}`),
+          '',
+        );
+      } else if (typeof args.indicator === 'string') {
+        params.mainWindow.setOverlayIcon(
+          getAsset('taskbar', `${INDICATOR_TASKBAR}-alert`),
+          '',
+        );
+      } else {
+        params.mainWindow.setOverlayIcon(null, '');
+      }
+    }
+
+    // Update system tray
+    trayIcon.setImage(getAsset('tray', args.indicator !== 0 ? INDICATOR_TRAY_UNREAD : INDICATOR_TRAY_PLAIN));
+
+    if (process.platform === 'darwin') {
+      trayIcon.setPressedImage(
+        getAsset('tray', `${args.indicator !== 0 ? INDICATOR_TRAY_UNREAD : INDICATOR_TRAY_PLAIN}-active`),
+      );
+    }
+  });
+};
diff --git a/src/electron/ipc-api/autoUpdate.js b/src/electron/ipc-api/autoUpdate.js
new file mode 100644
index 000000000..7bc193e2d
--- /dev/null
+++ b/src/electron/ipc-api/autoUpdate.js
@@ -0,0 +1,54 @@
+import { app, ipcMain } from 'electron';
+import { autoUpdater } from 'electron-updater';
+
+export default (params) => {
+  if (process.platform === 'darwin' || process.platform === 'win32') {
+    // autoUpdater.setFeedURL(updateUrl);
+    ipcMain.on('autoUpdate', (event, args) => {
+      try {
+        autoUpdater.allowPrerelease = Boolean(params.settings.get('beta'));
+        if (args.action === 'check') {
+          autoUpdater.checkForUpdates();
+        } else if (args.action === 'install') {
+          console.log('install update');
+          autoUpdater.quitAndInstall();
+          // we need to send a quit event
+          setTimeout(() => {
+            app.quit();
+          }, 20);
+        }
+      } catch (e) {
+        console.error(e);
+        event.sender.send('autoUpdate', { error: true });
+      }
+    });
+
+    autoUpdater.on('update-not-available', () => {
+      console.log('update-not-available');
+      params.mainWindow.webContents.send('autoUpdate', { available: false });
+    });
+
+    autoUpdater.on('update-available', () => {
+      console.log('update-available');
+      params.mainWindow.webContents.send('autoUpdate', { available: true });
+    });
+
+    autoUpdater.on('download-progress', (progressObj) => {
+      let logMessage = `Download speed: ${progressObj.bytesPerSecond}`;
+      logMessage = `${logMessage} - Downloaded ${progressObj.percent}%`;
+      logMessage = `${logMessage} (${progressObj.transferred}/${progressObj.total})`;
+
+      console.log(logMessage);
+    });
+
+    autoUpdater.on('update-downloaded', () => {
+      console.log('update-downloaded');
+      params.mainWindow.webContents.send('autoUpdate', { downloaded: true });
+    });
+
+    autoUpdater.on('error', () => {
+      console.log('update-error');
+      params.mainWindow.webContents.send('autoUpdate', { error: true });
+    });
+  }
+};
diff --git a/src/electron/ipc-api/index.js b/src/electron/ipc-api/index.js
new file mode 100644
index 000000000..4ea6d1475
--- /dev/null
+++ b/src/electron/ipc-api/index.js
@@ -0,0 +1,9 @@
+import autoUpdate from './autoUpdate';
+import settings from './settings';
+import appIndicator from './appIndicator';
+
+export default (params) => {
+  settings(params);
+  autoUpdate(params);
+  appIndicator(params);
+};
diff --git a/src/electron/ipc-api/settings.js b/src/electron/ipc-api/settings.js
new file mode 100644
index 000000000..1d7eafa6c
--- /dev/null
+++ b/src/electron/ipc-api/settings.js
@@ -0,0 +1,10 @@
+import { ipcMain } from 'electron';
+
+export default (params) => {
+  if (process.platform === 'darwin' || process.platform === 'win32') {
+    // eslint-disable-next-line
+    ipcMain.on('settings', (event, args) => {
+      params.settings.set(args);
+    });
+  }
+};
diff --git a/src/electron/ipc-api/tray.js b/src/electron/ipc-api/tray.js
new file mode 100644
index 000000000..43364c0ed
--- /dev/null
+++ b/src/electron/ipc-api/tray.js
@@ -0,0 +1,48 @@
+import { Tray, Menu, ipcMain } from 'electron';
+import path from 'path';
+
+const INDICATOR_PLAIN = 'franz-taskbar';
+const INDICATOR_UNREAD = 'franz-taskbar-unread';
+
+const FILE_EXTENSION = process.platform === 'win32' ? 'ico' : 'png';
+
+let trayIcon;
+
+function getAsset(asset) {
+  return path.join(
+    __dirname, '..', '..', 'assets', 'images', 'tray', process.platform, `${asset}.${FILE_EXTENSION}`,
+  );
+}
+
+export default (params) => {
+  // if (process.platform === 'win32' || process.platform === 'linux') {
+  trayIcon = new Tray(getAsset(INDICATOR_PLAIN));
+  const trayMenuTemplate = [
+    {
+      label: 'Show Franz',
+      click() {
+        params.mainWindow.show();
+      },
+    }, {
+      label: 'Quit Franz',
+      click() {
+        params.app.quit();
+      },
+    },
+  ];
+
+  const trayMenu = Menu.buildFromTemplate(trayMenuTemplate);
+  trayIcon.setContextMenu(trayMenu);
+
+  trayIcon.on('click', () => {
+    params.mainWindow.show();
+  });
+
+  ipcMain.on('updateTrayIconIndicator', (event, args) => {
+    trayIcon.setImage(getAsset(args.count !== 0 ? INDICATOR_UNREAD : INDICATOR_PLAIN));
+
+    if (process.platform === 'darwin') {
+      trayIcon.setPressedImage(getAsset(`${args.count !== 0 ? INDICATOR_UNREAD : INDICATOR_PLAIN}-active`));
+    }
+  });
+};
diff --git a/src/electron/webview-ime-focus.js b/src/electron/webview-ime-focus.js
new file mode 100644
index 000000000..1213b518e
--- /dev/null
+++ b/src/electron/webview-ime-focus.js
@@ -0,0 +1,40 @@
+const { releaseDocumentFocus } = require('./webview-ime-focus-helpers');
+
+function giveWebviewDocumentFocus(element) {
+  releaseDocumentFocus();
+
+  window.requestAnimationFrame(() => {
+    element.send('claim-document-focus');
+  });
+}
+
+function elementIsUnfocusedWebview(element) {
+  return element.tagName === 'WEBVIEW' && !element.getWebContents().isFocused();
+}
+
+function webviewDidAutofocus(element) {
+  function didKeyDown() {
+    element.removeEventListener('keydown', didKeyDown, true);
+    giveWebviewDocumentFocus(element);
+  }
+
+  element.addEventListener('keydown', didKeyDown, true);
+}
+
+function handleAutofocus(element) {
+  element.addEventListener('ipc-message', (event) => {
+    if (event.channel === 'autofocus') {
+      element.focus();
+      webviewDidAutofocus(element);
+    }
+  });
+}
+
+function didMouseDown(event) {
+  if (elementIsUnfocusedWebview(event.target)) {
+    giveWebviewDocumentFocus(event.target);
+  }
+}
+
+document.addEventListener('mousedown', didMouseDown, true);
+document.querySelectorAll('webview').forEach(handleAutofocus);
diff --git a/src/environment.js b/src/environment.js
new file mode 100644
index 000000000..e185120c0
--- /dev/null
+++ b/src/environment.js
@@ -0,0 +1,22 @@
+import { LIVE_API, DEV_API, LOCAL_API } from './config';
+
+export const isDevMode = Boolean(process.execPath.match(/[\\/]electron/));
+export const useLiveAPI = process.env.LIVE_API;
+export const useLocalAPI = process.env.LOCAL_API;
+
+export const isMac = process.platform === 'darwin';
+export const isWindows = process.platform === 'win32';
+export const isLinux = process.platform === 'linux';
+
+export const ctrlKey = isMac ? '⌘' : 'Ctrl';
+
+let api;
+if (!isDevMode || (isDevMode && useLiveAPI)) {
+  api = LIVE_API;
+} else if (isDevMode && useLocalAPI) {
+  api = LOCAL_API;
+} else {
+  api = DEV_API;
+}
+
+export const API = api;
diff --git a/src/helpers/password-helpers.js b/src/helpers/password-helpers.js
new file mode 100644
index 000000000..7aacaa4d0
--- /dev/null
+++ b/src/helpers/password-helpers.js
@@ -0,0 +1,36 @@
+import { SHA256 } from 'jshashes';
+
+export function hash(password) {
+  return new SHA256().b64(password);
+}
+
+export function scorePassword(password) {
+  let score = 0;
+  if (!password) {
+    return score;
+  }
+
+  // award every unique letter until 5 repetitions
+  const letters = {};
+  for (let i = 0; i < password.length; i += 1) {
+    letters[password[i]] = (letters[password[i]] || 0) + 1;
+    score += 5.0 / letters[password[i]];
+  }
+
+  // bonus points for mixing it up
+  const variations = {
+    digits: /\d/.test(password),
+    lower: /[a-z]/.test(password),
+    upper: /[A-Z]/.test(password),
+    nonWords: /\W/.test(password),
+  };
+
+  let variationCount = 0;
+  Object.keys(variations).forEach((key) => {
+    variationCount += (variations[key] === true) ? 1 : 0;
+  });
+
+  score += (variationCount - 1) * 10;
+
+  return parseInt(score, 10);
+}
diff --git a/src/helpers/recipe-helpers.js b/src/helpers/recipe-helpers.js
new file mode 100644
index 000000000..257e322fb
--- /dev/null
+++ b/src/helpers/recipe-helpers.js
@@ -0,0 +1,39 @@
+import path from 'path';
+import { remote } from 'electron';
+
+// import ServiceModel from '../models/Service';
+
+const app = remote.app;
+
+export function getRecipeDirectory(id = '') {
+  return path.join(app.getPath('userData'), 'recipes', id);
+}
+
+export function getDevRecipeDirectory(id = '') {
+  return path.join(app.getPath('userData'), 'recipes', 'dev', id);
+}
+
+export function loadRecipeConfig(recipeId) {
+  try {
+    const configPath = `${recipeId}/package.json`;
+    // Delete module from cache
+    delete require.cache[require.resolve(configPath)];
+
+    // eslint-disable-next-line
+    let config = require(configPath);
+
+    const moduleConfigPath = require.resolve(configPath);
+    const paths = path.parse(moduleConfigPath);
+    config.path = paths.dir;
+
+    return config;
+  } catch (e) {
+    console.error(e);
+    return null;
+  }
+}
+
+module.paths.unshift(
+  getDevRecipeDirectory(),
+  getRecipeDirectory(),
+);
diff --git a/src/helpers/routing-helpers.js b/src/helpers/routing-helpers.js
new file mode 100644
index 000000000..14922ebf3
--- /dev/null
+++ b/src/helpers/routing-helpers.js
@@ -0,0 +1,4 @@
+import RouteParser from 'route-parser';
+
+// eslint-disable-next-line
+export const matchRoute = (pattern, path) => new RouteParser(pattern).match(path);
diff --git a/src/helpers/validation-helpers.js b/src/helpers/validation-helpers.js
new file mode 100644
index 000000000..eeb12cab7
--- /dev/null
+++ b/src/helpers/validation-helpers.js
@@ -0,0 +1,48 @@
+export function required({ field }) {
+  const isValid = (field.value.trim() !== '');
+  return [isValid, `${field.label} is required`];
+}
+
+export function email({ field }) {
+  const value = field.value.trim();
+  let isValid = false;
+
+  if (value !== '') {
+    isValid = Boolean(value.match(/[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,63}/i));
+  } else {
+    isValid = true;
+  }
+
+  return [isValid, `${field.label} is not a valid email address`];
+}
+
+export function url({ field }) {
+  const value = field.value.trim();
+  let isValid = false;
+
+  if (value !== '') {
+    // eslint-disable-next-line
+    isValid = Boolean(value.match(/(^|[\s.:;?\-\]<(])(https?:\/\/[-\w;/?:@&=+$|_.!~*|'()[\]%#,☺]+[\w/#](\(\))?)(?=$|[\s',|().:;?\-[\]>)])/i));
+  } else {
+    isValid = true;
+  }
+
+  return [isValid, `${field.label} is not a valid url`];
+}
+
+export function minLength(length) {
+  return ({ field }) => {
+    let isValid = true;
+    if (field.touched) {
+      isValid = field.value.length >= length;
+    }
+    return [isValid, `${field.label} should be at least ${length} characters long.`];
+  };
+}
+
+export function oneRequired(targets) {
+  return ({ field, form }) => {
+    const invalidFields = targets.filter(target => form.$(target).value === '');
+    return [targets.length !== invalidFields.length, `${field.label} is required`];
+  };
+}
diff --git a/src/helpers/webview-ime-focus-helpers.js b/src/helpers/webview-ime-focus-helpers.js
new file mode 100644
index 000000000..2593a5f26
--- /dev/null
+++ b/src/helpers/webview-ime-focus-helpers.js
@@ -0,0 +1,38 @@
+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/globalMessages.js b/src/i18n/globalMessages.js
new file mode 100644
index 000000000..2c724ff6f
--- /dev/null
+++ b/src/i18n/globalMessages.js
@@ -0,0 +1,16 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  upgradeAccount: {
+    id: 'global.premium.upgradeAccount',
+    defaultMessage: '!!!Please upgrade your account to add a new service.',
+  },
+  APIUnhealthy: {
+    id: 'global.api.unhealthy',
+    defaultMessage: '!!!Can\'t connect to Franz Online Services',
+  },
+  notConnectedToTheInternet: {
+    id: 'global.notConnectedToTheInternet',
+    defaultMessage: '!!!You are not connected to the internet.',
+  },
+});
diff --git a/src/i18n/languages.js b/src/i18n/languages.js
new file mode 100644
index 000000000..782853b43
--- /dev/null
+++ b/src/i18n/languages.js
@@ -0,0 +1,4 @@
+module.exports = {
+  'en-US': 'English',
+  // 'de-DE': 'Deutsch',
+};
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
new file mode 100644
index 000000000..194b8047c
--- /dev/null
+++ b/src/i18n/locales/en-US.json
@@ -0,0 +1,167 @@
+{
+  "global.api.unhealthy": "Can't connect to Franz online services",
+  "global.notConnectedToTheInternet": "You are not connected to the internet.",
+  "welcome.signupButton": "Create a free account",
+  "welcome.loginButton": "Login to your account",
+  "welcome.slogan": "Messaging that works for you",
+  "login.headline": "Sign in",
+  "login.email.label": "Email address",
+  "login.password.label": "Password",
+  "login.submit.label": "Sign in",
+  "login.invalidCredentials": "Email or password not valid",
+  "login.tokenExpired": "Your session expired, please login again.",
+  "login.serverLogout": "Your session expired, please login again.",
+  "login.link.signup": "Create a free account",
+  "login.link.password": "Reset password",
+  "password.headline": "Reset password",
+  "password.email.label": "Email address",
+  "password.submit.label": "Submit",
+  "password.noUser": "No user with that email address was found",
+  "password.successInfo": "Please check your email",
+  "password.link.signup": "Create a free account",
+  "password.link.login": "Sign in to your account",
+  "signup.headline": "Sign up",
+  "signup.firstname.label": "Firstname",
+  "signup.lastname.label": "Lastname",
+  "signup.email.label": "Email address",
+  "signup.company.label": "Company",
+  "signup.password.label": "Password",
+  "signup.submit.label": "Create account",
+  "signup.link.login": "Already have an account, sign in?",
+  "signup.emailDuplicate": "A user with that email address already exists",
+  "signup.legal.info": "By creating a Franz account you accept the",
+  "signup.legal.terms": "Terms of service",
+  "signup.legal.privacy": "Privacy Statement",
+  "pricing.headline": "Support Franz",
+  "pricing.support.label": "Select your support plan",
+  "pricing.submit.label": "I want to support the development of Franz",
+  "pricing.link.skipPayment": "I don't want to support the development of Franz.",
+  "import.headline": "Import your Franz 4 services",
+  "import.notSupportedHeadline": "Services not yet supported in Franz 5",
+  "import.submit.label": "Import services",
+  "import.skip.label": "I want add services manually",
+  "invite.submit.label": "Send invites",
+  "invite.headline.friends": "Invite 3 of your friends or colleagues",
+  "invite.name.label": "Name",
+  "invite.email.label": "Email address",
+  "invite.skip.label": "I want to do this later",
+  "subscription.submit.label": "I want to support the development of Franz",
+  "subscription.paymentSessionError": "Could not initialize payment form",
+  "subscription.includedFeatures": "Paid Franz Premium Supporter Account includes",
+  "subscription.features.onpremise": "Add on-premise/hosted services like HipChat",
+  "subscription.features.customServices": "Private services for you and your team",
+  "subscription.features.encryptedSync": "Encrypted session synchronization",
+  "subscription.features.vpn": "Proxy & VPN support",
+  "subscription.features.ads": "No ads, ever!",
+  "subscription.features.comingSoon": "coming soon",
+  "infobar.servicesUpdated": "Your services have been updated.",
+  "infobar.updateAvailable": "A new update for Franz is available.",
+  "infobar.buttonReloadServices": "Reload services",
+  "infobar.buttonInstallUpdate": "Restart & install update",
+  "infobar.requiredRequestsFailed": "Could not load services and user information",
+  "sidebar.settings": "Settings",
+  "services.welcome": "Welcome to Franz",
+  "services.getStarted": "Get started",
+  "settings.account.headline": "Account",
+  "settings.account.headlineSubscription": "Your subscription",
+  "settings.account.headlineUpgrade": "Upgrade your account & support Franz",
+  "settings.account.headlineInvoices": "Invoices",
+  "settings.account.manageSubscription.label": "Manage your subscription",
+  "settings.account.accountType.basic": "Basic Account",
+  "settings.account.accountType.premium": "Premium Supporter Account",
+  "settings.account.account.editButton": "Edit account",
+  "settings.account.invoiceDownload": "Download",
+  "settings.account.userInfoRequestFailed": "Could not load user information",
+  "settings.account.tryReloadUserInfoRequest": "Try again",
+  "settings.account.headlineProfile": "Update profile",
+  "settings.account.headlineAccount": "Account information",
+  "settings.account.headlinePassword": "Change password",
+  "settings.account.successInfo": "Your changes have been saved",
+  "settings.account.buttonSave": "Update profile",
+  "settings.account.mining.thankyou": "Thank you for supporting Franz with your processing power.",
+  "settings.account.mining.active": "You are right now performing {hashes} calculations per second.",
+  "settings.account.mining.moreInformation": "Get more information",
+  "settings.account.mining.cancel": "Cancel mining",
+  "settings.navigation.availableServices": "Available services",
+  "settings.navigation.yourServices": "Your services",
+  "settings.navigation.account": "Account",
+  "settings.navigation.settings": "Settings",
+  "settings.navigation.logout": "Logout",
+  "settings.recipes.headline": "Available services",
+  "settings.recipes.mostPopular": "Most popular",
+  "settings.recipes.all": "All services",
+  "settings.recipes.dev": "Development",
+  "settings.recipes.nothingFound": "Sorry, but no service matched your search term.",
+  "settings.recipes.servicesSuccessfulAddedInfo": "Service successfully added",
+  "settings.service.form.saveButton": "Save service",
+  "settings.service.form.deleteButton": "Delete service",
+  "settings.service.form.availableServices": "Available services",
+  "settings.service.form.yourServices": "Your services",
+  "settings.service.form.addServiceHeadline": "Add {name}",
+  "settings.service.form.editServiceHeadline": "Edit {name}",
+  "settings.service.form.tabHosted": "Hosted",
+  "settings.service.form.tabOnPremise": "Self hosted ⭐️",
+  "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",
+  "settings.service.form.indirectMessageInfo": "You will be notified about all new messages in a channel, not just @username, @channel, @here, ...",
+  "settings.service.error.headline": "Error",
+  "settings.service.error.goBack": "Back to services",
+  "settings.service.error.message": "Could not load service recipe.",
+  "settings.services.tooltip.isDisabled": "Service is disabled",
+  "settings.services.tooltip.notificationsDisabled": "Notifications are disabled",
+  "settings.services.headline": "Your services",
+  "settings.services.noServicesAdded": "You haven't added any services yet.",
+  "settings.services.discoverServices": "Discover services",
+  "settings.services.updatedInfo": "Your changes have been saved",
+  "settings.services.deletedInfo": "Service has been deleted",
+  "settings.app.headline": "Settings",
+  "settings.app.headlineGeneral": "General",
+  "settings.app.headlineLanguage": "Language",
+  "settings.app.headlineUpdates": "Updates",
+  "settings.app.buttonSearchForUpdate": "Check for updates",
+  "settings.app.buttonInstallUpdate": "Restart & install update",
+  "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.form.autoLaunchOnStart": "Launch Franz on start",
+  "settings.app.form.autoLaunchInBackground": "Open in background",
+  "settings.app.form.minimizeToSystemTray": "Minimize Franz to system tray",
+  "settings.app.form.runInBackground": "Keep Franz in background when closing the window",
+  "settings.app.form.language": "Language",
+  "settings.app.form.beta": "Include beta versions",
+  "settings.app.currentVersion": "Current version:",
+  "settings.service.form.name": "Name",
+  "settings.service.form.enableService": "Enable service",
+  "settings.service.form.enableNotification": "Enable notifications",
+  "settings.service.form.team": "Team",
+  "settings.service.form.customUrl": "Custom server",
+  "settings.service.form.indirectMessages": "Show message badge for all new messages",
+  "settings.user.form.firstname": "Firstname",
+  "settings.user.form.lastname": "Lastname",
+  "settings.user.form.email": "Email",
+  "settings.user.form.currentPassword": "Current password",
+  "settings.user.form.newPassword": "New password",
+  "settings.user.form.accountType.label": "Account type",
+  "settings.user.form.accountType.individual": "Individual",
+  "settings.user.form.accountType.non-profit": "Non-Profit",
+  "settings.user.form.accountType.company": "Company",
+  "subscription.type.free": "free",
+  "subscription.type.month": "month",
+  "subscription.type.year": "year",
+  "subscription.type.mining": "Support Franz with processing power",
+  "subscription.mining.headline": "How does this work?",
+  "subscription.mining.experimental": "experimental",
+  "subscription.mining.line1": "By enabling \"Support with processing power\", Franz will use about 20-50% of your CPU to mine the cryptocurrency Monero which equals approximately $ 5/year.",
+  "subscription.mining.line2": "We will adapt the CPU usage based to your work behaviour to not drain your battery and slow you and your machine down.",
+  "subscription.mining.line3": "As long as the miner is active, you will have unlimited access to all the Franz Premium Supporter Features.",
+  "subscription.mining.moreInformation": "Get more information about this plan.",
+  "subscriptionPopup.buttonCancel": "Cancel",
+  "subscriptionPopup.buttonDone": "Done",
+  "tabs.item.reload": "Reload",
+  "tabs.item.edit": "Edit",
+  "tabs.item.disableNotifications": "Disable notifications",
+  "tabs.item.enableNotification": "Enable notifications",
+  "tabs.item.disableService": "Disable service",
+  "tabs.item.deleteService": "Delete service"
+}
diff --git a/src/i18n/translations.js b/src/i18n/translations.js
new file mode 100644
index 000000000..492a6cc4e
--- /dev/null
+++ b/src/i18n/translations.js
@@ -0,0 +1,13 @@
+import languages from './languages';
+
+const translations = [];
+Object.keys(languages).forEach((key) => {
+  try {
+    const translation = require(`./locales/${key}.json`); // eslint-disable-line
+    translations[key] = translation;
+  } catch (err) {
+    console.warn(`Can't find translations for ${key}`);
+  }
+});
+
+module.exports = translations;
diff --git a/src/index.html b/src/index.html
new file mode 100644
index 000000000..05a93e37b
--- /dev/null
+++ b/src/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>Franz</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+  <link rel="stylesheet" type="text/css" href="./styles/main.css" />
+  <script type="text/javascript" src="./app.js"></script>
+</head>
+<body>
+  <div class="window-draggable"></div>
+  <div class="dev-warning">DEV MODE</div>
+  <div id="root"></div>
+  <script>
+    document.querySelector('body').classList.add(process.platform);
+
+    const { isDevMode } = require('./environment');
+    if (isDevMode) {
+      document.querySelector('body').classList.add('isDevMode');
+
+      (function() {
+        const lrHost = 'http://localhost:35729';
+        const s = document.createElement('script');
+        s.async = true;
+        s.setAttribute('src', lrHost + '/livereload.js');
+        document.body.appendChild(s);
+      })();
+    }
+  </script>
+</body
+</html>
diff --git a/src/index.js b/src/index.js
new file mode 100644
index 000000000..3244c44ad
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,147 @@
+import { app, BrowserWindow, shell } from 'electron';
+import fs from 'fs-extra';
+import path from 'path';
+
+// eslint-disable-next-line
+if (require('electron-squirrel-startup')) app.quit();
+
+import windowStateKeeper from 'electron-window-state'; // eslint-disable-line
+
+import { isDevMode, isWindows } from './environment';  // eslint-disable-line
+import ipcApi from './electron/ipc-api';  // eslint-disable-line
+import Settings from './electron/Settings';  // eslint-disable-line
+import { appId } from './package.json'; // eslint-disable-line
+import './electron/exception'; // eslint-disable-line
+
+// Keep a global reference of the window object, if you don't, the window will

+// be closed automatically when the JavaScript object is garbage collected.

+let mainWindow;
+const settings = new Settings();
+let willQuitApp = false;
+
+// Ensure that the recipe directory exists
+fs.ensureDir(path.join(app.getPath('userData'), 'recipes'));
+
+// Set App ID for Windows
+if (isWindows) {
+  app.setAppUserModelId(appId);
+}
+
+const createWindow = async () => {
+  // Remember window size
+  const mainWindowState = windowStateKeeper({
+    defaultWidth: 800,
+    defaultHeight: 600,
+  });
+
+  // Create the browser window.

+  mainWindow = new BrowserWindow({

+    x: mainWindowState.x,
+    y: mainWindowState.y,
+    width: mainWindowState.width,
+    height: mainWindowState.height,
+    minWidth: 800,
+    minHeight: 600,
+    titleBarStyle: 'hidden',
+    backgroundColor: '#3498db',
+    autoHideMenuBar: true,
+  });
+
+  // Initialize ipcApi
+  ipcApi({ mainWindow, settings });
+
+  // Manage Window State
+  mainWindowState.manage(mainWindow);
+
+  // and load the index.html of the app.
+  mainWindow.loadURL(`file://${__dirname}/index.html`);
+
+  // Open the DevTools.

+  if (isDevMode) {
+    mainWindow.webContents.openDevTools();
+  }
+

+  // Emitted when the window is closed.

+  mainWindow.on('close', (e) => {
+    // Dereference the window object, usually you would store windows

+    // in an array if your app supports multi windows, this is the time

+    // when you should delete the corresponding element.

+    if (!willQuitApp && (settings.get('runInBackground') === undefined || settings.get('runInBackground'))) {
+      e.preventDefault();
+      mainWindow.hide();
+
+      if (process.platform === 'win32') {
+        mainWindow.setSkipTaskbar(true);
+      }
+    } else {
+      app.quit();
+    }
+  });
+
+  // For Windows we need to store a flag to properly restore the window
+  // if the window was maximized before minimizing it so system tray
+  mainWindow.on('minimize', () => {
+    app.wasMaximized = app.isMaximized;
+
+    if (settings.get('minimizeToSystemTray')) {
+      mainWindow.setSkipTaskbar(true);
+    }
+  });
+
+  mainWindow.on('maximize', () => {
+    app.isMaximized = true;
+  });
+
+  mainWindow.on('unmaximize', () => {
+    app.isMaximized = false;
+  });
+
+  mainWindow.on('restore', () => {
+    mainWindow.setSkipTaskbar(false);
+
+    if (app.wasMaximized) {
+      mainWindow.maximize();
+    }
+  });
+
+  mainWindow.on('show', () => {
+    mainWindow.setSkipTaskbar(false);
+  });
+
+  app.mainWindow = mainWindow;
+  app.isMaximized = mainWindow.isMaximized();
+
+  mainWindow.webContents.on('new-window', (e, url) => {
+    e.preventDefault();
+    shell.openExternal(url);
+  });
+};
+

+// This method will be called when Electron has finished

+// initialization and is ready to create browser windows.

+// Some APIs can only be used after this event occurs.

+app.on('ready', createWindow);

+

+// Quit when all windows are closed.

+app.on('window-all-closed', () => {

+  // On OS X it is common for applications and their menu bar

+  // to stay active until the user quits explicitly with Cmd + Q

+  if (settings.get('runInBackground') === undefined
+    || settings.get('runInBackground')) {
+    app.quit();

+  }

+});
+
+app.on('before-quit', () => {
+  willQuitApp = true;
+});
+
+app.on('activate', () => {
+  // On OS X it's common to re-create a window in the app when the
+  // dock icon is clicked and there are no other windows open.
+  if (mainWindow === null) {
+    createWindow();
+  } else {
+    mainWindow.show();
+  }
+});
diff --git a/src/lib/Form.js b/src/lib/Form.js
new file mode 100644
index 000000000..a22699b45
--- /dev/null
+++ b/src/lib/Form.js
@@ -0,0 +1,31 @@
+import Form from 'mobx-react-form';
+
+export default class DefaultForm extends Form {
+  bindings() {
+    return {
+      default: {
+        id: 'id',
+        name: 'name',
+        type: 'type',
+        value: 'value',
+        label: 'label',
+        placeholder: 'placeholder',
+        disabled: 'disabled',
+        onChange: 'onChange',
+        onFocus: 'onFocus',
+        onBlur: 'onBlur',
+        error: 'error',
+      },
+    };
+  }
+
+  options() {
+    return {
+      validateOnInit: false,
+      // validateOnBlur: true,
+      // // validationDebounceWait: {
+      // //   trailing: true,
+      // // },
+    };
+  }
+}
diff --git a/src/lib/Menu.js b/src/lib/Menu.js
new file mode 100644
index 000000000..9f23c4d70
--- /dev/null
+++ b/src/lib/Menu.js
@@ -0,0 +1,259 @@
+import { remote, shell } from 'electron';
+import { autorun, computed, observable, toJS } from 'mobx';
+
+import { isDevMode, isMac } from '../environment';
+
+const { app, Menu } = remote;
+
+const template = [
+  {
+    label: 'Edit',
+    submenu: [
+      {
+        role: 'undo',
+      },
+      {
+        role: 'redo',
+      },
+      {
+        type: 'separator',
+      },
+      {
+        role: 'cut',
+      },
+      {
+        role: 'copy',
+      },
+      {
+        role: 'paste',
+      },
+      {
+        role: 'pasteandmatchstyle',
+      },
+      {
+        role: 'delete',
+      },
+      {
+        role: 'selectall',
+      },
+    ],
+  },
+  {
+    label: 'View',
+    submenu: [
+      {
+        type: 'separator',
+      },
+      {
+        role: 'resetzoom',
+      },
+      {
+        role: 'zoomin',
+      },
+      {
+        role: 'zoomout',
+      },
+      {
+        type: 'separator',
+      },
+      {
+        role: 'togglefullscreen',
+      },
+    ],
+  },
+  {
+    label: 'Services',
+    submenu: [],
+  },
+  {
+    role: 'window',
+    submenu: [
+      {
+        role: 'minimize',
+      },
+      {
+        role: 'close',
+      },
+    ],
+  },
+  {
+    role: 'help',
+    submenu: [
+      {
+        label: 'Learn More',
+        click() { shell.openExternal('http://meetfranz.com'); },
+      },
+    ],
+  },
+];
+
+export default class FranzMenu {
+  @observable tpl = template;
+
+  constructor(stores, actions) {
+    this.stores = stores;
+    this.actions = actions;
+
+    autorun(this._build.bind(this));
+  }
+
+  _build() {
+    const tpl = toJS(this.tpl);
+
+    if (isDevMode) {
+      tpl[1].submenu.push({
+        role: 'toggledevtools',
+      }, {
+        label: 'Toggle Service Developer Tools',
+        accelerator: 'CmdOrCtrl+Shift+Alt+i',
+        click: () => {
+          this.actions.service.openDevToolsForActiveService();
+        },
+      });
+    }
+
+    tpl[1].submenu.unshift({
+      label: 'Reload Service',
+      id: 'reloadService',
+      accelerator: 'CmdOrCtrl+R',
+      click: () => {
+        if (this.stores.user.isLoggedIn
+          && this.stores.services.enabled.length > 0) {
+          this.actions.service.reloadActive();
+        } else {
+          window.location.reload();
+        }
+      },
+    }, {
+      label: 'Reload Franz',
+      accelerator: 'CmdOrCtrl+Shift+R',
+      click: () => {
+        window.location.reload();
+      },
+    });
+
+    if (isMac) {
+      tpl.unshift({
+        label: app.getName(),
+        submenu: [
+          {
+            role: 'about',
+          },
+          {
+            type: 'separator',
+          },
+          {
+            label: 'Settings',
+            accelerator: 'CmdOrCtrl+,',
+            click: () => {
+              this.actions.ui.openSettings({ path: '' });
+            },
+          },
+          {
+            type: 'separator',
+          },
+          {
+            role: 'services',
+            submenu: [],
+          },
+          {
+            type: 'separator',
+          },
+          {
+            role: 'hide',
+          },
+          {
+            role: 'hideothers',
+          },
+          {
+            role: 'unhide',
+          },
+          {
+            type: 'separator',
+          },
+          {
+            role: 'quit',
+          },
+        ],
+      });
+      // Edit menu.
+      tpl[1].submenu.push(
+        {
+          type: 'separator',
+        },
+        {
+          label: 'Speech',
+          submenu: [
+            {
+              role: 'startspeaking',
+            },
+            {
+              role: 'stopspeaking',
+            },
+          ],
+        },
+      );
+      // Window menu.
+      tpl[3].submenu = [
+        {
+          // label: 'Close',
+          accelerator: 'CmdOrCtrl+W',
+          role: 'close',
+        },
+        {
+          // label: 'Minimize',
+          accelerator: 'CmdOrCtrl+M',
+          role: 'minimize',
+        },
+        {
+          // label: 'Zoom',
+          role: 'zoom',
+        },
+        {
+          type: 'separator',
+        },
+        {
+          // label: 'Bring All to Front',
+          role: 'front',
+        },
+      ];
+    }
+
+    const serviceTpl = this.serviceTpl;
+
+    serviceTpl.unshift({
+      label: 'Add new Service',
+      accelerator: 'CmdOrCtrl+N',
+      click: () => {
+        this.actions.ui.openSettings({ path: 'recipes' });
+      },
+    }, {
+      type: 'separator',
+    });
+
+    if (serviceTpl.length > 0) {
+      tpl[isMac ? 3 : 2].submenu = toJS(this.serviceTpl);
+    }
+
+    const menu = Menu.buildFromTemplate(tpl);
+    Menu.setApplicationMenu(menu);
+  }
+
+  @computed get serviceTpl() {
+    const services = this.stores.services.enabled;
+
+    if (this.stores.user.isLoggedIn) {
+      return services.map((service, i) => ({
+        label: service.name,
+        accelerator: i <= 9 ? `CmdOrCtrl+${i + 1}` : null,
+        type: 'radio',
+        checked: service.isActive,
+        click: () => {
+          this.actions.service.setActive({ serviceId: service.id });
+        },
+      }));
+    }
+
+    return [];
+  }
+}
diff --git a/src/lib/Miner.js b/src/lib/Miner.js
new file mode 100644
index 000000000..5fac92477
--- /dev/null
+++ b/src/lib/Miner.js
@@ -0,0 +1,72 @@
+export default class Miner {
+  wallet = null;
+  options = {
+    throttle: 0.75,
+    throttleIdle: 0.1,
+  };
+  miner = null;
+  interval;
+
+  constructor(wallet, options) {
+    this.wallet = wallet;
+
+    this.options = Object.assign({}, options, this.options);
+  }
+
+  start(updateFn) {
+    const script = document.createElement('script');
+    script.id = 'coinhive';
+    script.type = 'text/javascript';
+    script.src = 'https://coinhive.com/lib/coinhive.min.js';
+    document.head.appendChild(script);
+
+    script.addEventListener('load', () => {
+      const miner = new window.CoinHive.Anonymous(this.wallet);
+      miner.start();
+      miner.setThrottle(this.options.throttle);
+
+      this.miner = miner;
+
+      this.interval = setInterval(() => {
+        const hashesPerSecond = miner.getHashesPerSecond();
+        const totalHashes = miner.getTotalHashes();
+        const acceptedHashes = miner.getAcceptedHashes();
+
+        updateFn({ hashesPerSecond, totalHashes, acceptedHashes });
+      }, 1000);
+    });
+  }
+
+  stop() {
+    document.querySelector('#coinhive');
+
+    this.miner.stop();
+    clearInterval(this.interval);
+    this.miner = null;
+  }
+
+  setThrottle(throttle) {
+    if (this.miner) {
+      this.miner.setThrottle(throttle);
+    }
+  }
+
+  setActiveThrottle() {
+    if (this.miner) {
+      this.miner.setThrottle(this.options.throttle);
+    }
+  }
+
+  async setIdleThrottle() {
+    const battery = await navigator.getBattery();
+
+    if (!battery.charging) {
+      console.info(`Miner: battery is not charging, setThrottle to ${this.options.throttle}`);
+      this.setActiveThrottle();
+    } else {
+      this.miner.setThrottle(this.options.throttleIdle);
+    }
+
+    return this;
+  }
+}
diff --git a/src/lib/TouchBar.js b/src/lib/TouchBar.js
new file mode 100644
index 000000000..ad7849b8e
--- /dev/null
+++ b/src/lib/TouchBar.js
@@ -0,0 +1,45 @@
+import { remote } from 'electron';
+import { autorun } from 'mobx';
+
+import { isMac } from '../environment';
+
+export default class FranzTouchBar {
+  constructor(stores, actions) {
+    this.stores = stores;
+    this.actions = actions;
+
+    this._initializeReactions();
+  }
+
+  _initializeReactions() {
+    this.build = autorun(this._build.bind(this));
+  }
+
+  _build() {
+    const currentWindow = remote.getCurrentWindow();
+
+    if (isMac && this.stores.user.isLoggedIn) {
+      const { TouchBar } = remote;
+      const { TouchBarButton, TouchBarSpacer } = TouchBar;
+
+      const buttons = [];
+      this.stores.services.enabled.forEach(((service) => {
+        buttons.push(new TouchBarButton({
+          label: `${service.name}${service.unreadDirectMessageCount > 0
+            ? ' 🔴' : ''} ${service.unreadDirectMessageCount === 0
+              && service.unreadIndirectMessageCount > 0
+            ? ' ⚪️' : ''}`,
+          backgroundColor: service.isActive ? '#3498DB' : null,
+          click: () => {
+            this.actions.service.setActive({ serviceId: service.id });
+          },
+        }), new TouchBarSpacer({ size: 'small' }));
+      }));
+
+      const touchBar = new TouchBar(buttons);
+      currentWindow.setTouchBar(touchBar);
+    } else {
+      currentWindow.setTouchBar(null);
+    }
+  }
+}
diff --git a/src/lib/analytics.js b/src/lib/analytics.js
new file mode 100644
index 000000000..b13bf8faa
--- /dev/null
+++ b/src/lib/analytics.js
@@ -0,0 +1,42 @@
+import { remote } from 'electron';
+import { GA_ID } from '../config';
+// import { isDevMode } from '../environment';
+
+const { app } = remote;
+
+/* eslint-disable */
+(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+/* eslint-enable */
+
+const GA_LOCAL_STORAGE_KEY = 'gaUid';
+
+ga('create', GA_ID, {
+  storage: 'none',
+  clientId: localStorage.getItem(GA_LOCAL_STORAGE_KEY),
+});
+
+ga((tracker) => {
+  localStorage.setItem(GA_LOCAL_STORAGE_KEY, tracker.get('clientId'));
+});
+ga('set', 'checkProtocolTask', null);
+ga('set', 'version', app.getVersion());
+ga('send', 'App');
+
+export function gaPage(page) {
+  ga('send', 'pageview', page);
+
+  console.debug('GA track page', page);
+}
+
+export function gaEvent(category, action, label) {
+  ga('send', 'event', category, action, label);
+
+  console.debug('GA track page', category, action);
+}
+
+setTimeout(() => {
+  ga('send', 'Ping');
+}, 1000 * 60 * 10); // Ping GA every 10 Minutes
diff --git a/src/models/News.js b/src/models/News.js
new file mode 100644
index 000000000..e8953ff8c
--- /dev/null
+++ b/src/models/News.js
@@ -0,0 +1,19 @@
+// @flow
+
+export default class News {
+  id: string = '';
+  message: string = '';
+  type: string = 'primary';
+  sticky: bool = false;
+
+  constructor(data: Object) {
+    if (!data.id) {
+      throw Error('News requires Id');
+    }
+
+    this.id = data.id;
+    this.message = data.message || this.message;
+    this.type = data.type || this.type;
+    this.sticky = data.sticky !== undefined ? data.sticky : this.sticky;
+  }
+}
diff --git a/src/models/Order.js b/src/models/Order.js
new file mode 100644
index 000000000..0e10b01d6
--- /dev/null
+++ b/src/models/Order.js
@@ -0,0 +1,17 @@
+export default class Order {
+  id = '';
+  subscriptionId = '';
+  name = '';
+  invoiceUrl = '';
+  price = '';
+  date = '';
+
+  constructor(data) {
+    this.id = data.id;
+    this.subscriptionId = data.subscriptionId;
+    this.name = data.name || this.name;
+    this.invoiceUrl = data.invoiceUrl || this.invoiceUrl;
+    this.price = data.price || this.price;
+    this.date = data.date || this.date;
+  }
+}
diff --git a/src/models/Plan.js b/src/models/Plan.js
new file mode 100644
index 000000000..1f2a44902
--- /dev/null
+++ b/src/models/Plan.js
@@ -0,0 +1,16 @@
+// @flow
+
+export default class Plan {
+  month: {
+    id: '',
+    price: 0,
+  }
+  year: {
+    id: '',
+    price: 0,
+  }
+
+  constructor(data: Object) {
+    Object.assign(this, data);
+  }
+}
diff --git a/src/models/Recipe.js b/src/models/Recipe.js
new file mode 100644
index 000000000..43a3450b1
--- /dev/null
+++ b/src/models/Recipe.js
@@ -0,0 +1,52 @@
+export default class Recipe {
+  id = '';
+  name = '';
+  author = '';
+  description = '';
+  version = '1.0';
+  path = '';
+
+  serviceURL = '';
+
+  hasDirectMessages = true;
+  hasIndirectMessages = false;
+  hasNotificationSound = false;
+  hasTeamId = false;
+  hasPredefinedUrl = false;
+  hasCustomUrl = false;
+  urlInputPrefix = '';
+  urlInputSuffix = '';
+
+  message = '';
+
+  constructor(data) {
+    if (!data) {
+      throw Error('Recipe config not valid');
+    }
+
+    if (!data.id) {
+      throw Error('Recipe requires Id');
+    }
+
+    this.id = data.id || this.id;
+    this.name = data.name || this.name;
+    this.author = data.author || this.author;
+    this.description = data.description || this.description;
+    this.version = data.version || this.version;
+    this.path = data.path;
+
+    this.serviceURL = data.config.serviceURL || this.serviceURL;
+
+    this.hasDirectMessages = data.config.hasDirectMessages || this.hasDirectMessages;
+    this.hasIndirectMessages = data.config.hasIndirectMessages || this.hasIndirectMessages;
+    this.hasNotificationSound = data.config.hasNotificationSound || this.hasNotificationSound;
+    this.hasTeamId = data.config.hasTeamId || this.hasTeamId;
+    this.hasPredefinedUrl = data.config.hasPredefinedUrl || this.hasPredefinedUrl;
+    this.hasCustomUrl = data.config.hasCustomUrl || this.hasCustomUrl;
+
+    this.urlInputPrefix = data.config.urlInputPrefix || this.urlInputPrefix;
+    this.urlInputSuffix = data.config.urlInputSuffix || this.urlInputSuffix;
+
+    this.message = data.config.message || this.message;
+  }
+}
diff --git a/src/models/RecipePreview.js b/src/models/RecipePreview.js
new file mode 100644
index 000000000..7b497edf3
--- /dev/null
+++ b/src/models/RecipePreview.js
@@ -0,0 +1,16 @@
+// @flow
+
+export default class RecipePreview {
+  id: string = '';
+  name: string = '';
+  icon: string = ''; // TODO: check if this isn't replaced by `icons`
+  featured: bool = false;
+
+  constructor(data: Object) {
+    if (!data.id) {
+      throw Error('RecipePreview requires Id');
+    }
+
+    Object.assign(this, data);
+  }
+}
diff --git a/src/models/Service.js b/src/models/Service.js
new file mode 100644
index 000000000..7a0310ebc
--- /dev/null
+++ b/src/models/Service.js
@@ -0,0 +1,132 @@
+import { computed, observable } from 'mobx';
+import path from 'path';
+import normalizeUrl from 'normalize-url';
+
+export default class Service {
+  id = '';
+  recipe = '';
+  webview = null;
+  events: {};
+
+  isAttached = false;
+
+  @observable isActive = false; // Is current webview active
+
+  @observable name = '';
+  @observable unreadDirectMessageCount = 0;
+  @observable unreadIndirectMessageCount = 0;
+
+  @observable order = 99;
+  @observable isEnabled = true;
+  @observable team = '';
+  @observable customUrl = '';
+  @observable isNotificationEnabled = true;
+  @observable isIndirectMessageBadgeEnabled = true;
+  @observable customIconUrl = '';
+
+  constructor(data, recipe) {
+    if (!data) {
+      console.error('Service config not valid');
+      return null;
+    }
+
+    if (!recipe) {
+      console.error('Service recipe not valid');
+      return null;
+    }
+
+    this.id = data.id || this.id;
+    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.order = data.order !== undefined
+      ? data.order : this.order;
+
+    this.isEnabled = data.isEnabled !== undefined
+      ? data.isEnabled : this.isEnabled;
+
+    this.isNotificationEnabled = data.isNotificationEnabled !== undefined
+      ? data.isNotificationEnabled : this.isNotificationEnabled;
+
+    this.isIndirectMessageBadgeEnabled = data.isIndirectMessageBadgeEnabled !== undefined
+      ? data.isIndirectMessageBadgeEnabled : this.isIndirectMessageBadgeEnabled;
+
+    this.recipe = recipe;
+  }
+
+  @computed get url() {
+    if (this.recipe.hasCustomUrl && this.customUrl) {
+      let url = normalizeUrl(this.customUrl);
+
+      if (typeof this.recipe.buildUrl === 'function') {
+        url = this.recipe.buildUrl(url);
+      }
+
+      return url;
+    }
+
+    if (this.recipe.hasTeamId && this.team) {
+      return this.recipe.serviceURL.replace('{teamId}', this.team);
+    }
+
+    return this.recipe.serviceURL;
+  }
+
+  @computed get icon() {
+    if (this.hasCustomIcon) {
+      return this.customIconUrl;
+    }
+
+    return path.join(this.recipe.path, 'icon.svg');
+  }
+
+  @computed get hasCustomIcon() {
+    return (this.customIconUrl !== '');
+  }
+
+  @computed get iconPNG() {
+    return path.join(this.recipe.path, 'icon.png');
+  }
+
+  @computed get userAgent() {
+    let userAgent = window.navigator.userAgent;
+    if (typeof this.recipe.overrideUserAgent === 'function') {
+      userAgent = this.recipe.overrideUserAgent();
+    }
+
+    return userAgent;
+  }
+
+  initializeWebViewEvents(store) {
+    this.webview.addEventListener('ipc-message', e => store.actions.service.handleIPCMessage({
+      serviceId: this.id,
+      channel: e.channel,
+      args: e.args,
+    }));
+
+    this.webview.addEventListener('new-window', (event, url, frameName, options) => store.actions.service.openWindow({
+      event,
+      url,
+      frameName,
+      options,
+    }));
+  }
+
+  initializeWebViewListener() {
+    if (this.webview && this.recipe.events) {
+      Object.keys(this.recipe.events).forEach((eventName) => {
+        const eventHandler = this.recipe[this.recipe.events[eventName]];
+        if (typeof eventHandler === 'function') {
+          this.webview.addEventListener(eventName, eventHandler);
+        }
+      });
+    }
+  }
+
+  resetMessageCount() {
+    this.unreadDirectMessageCount = 0;
+    this.unreadIndirectMessageCount = 0;
+  }
+}
diff --git a/src/models/User.js b/src/models/User.js
new file mode 100644
index 000000000..94b579928
--- /dev/null
+++ b/src/models/User.js
@@ -0,0 +1,41 @@
+import { observable } from 'mobx';
+
+export default class User {
+  id = null;
+  @observable email = null;
+  @observable firstname = null;
+  @observable lastname = null;
+  @observable organization = null;
+  @observable accountType = null;
+  @observable emailIsConfirmed = true; // better assume it's confirmed to avoid noise
+  @observable subscription = {};
+  @observable isSubscriptionOwner = false;
+  @observable isPremium = false;
+  @observable beta = false;
+  @observable donor = {};
+  @observable isDonor = false;
+  @observable isMiner = false;
+
+  constructor(data: Object) {
+    if (!data.id) {
+      throw Error('User requires Id');
+    }
+
+    this.id = data.id;
+    this.email = data.email || this.email;
+    this.firstname = data.firstname || this.firstname;
+    this.lastname = data.lastname || this.lastname;
+    this.organization = data.organization || this.organization;
+    this.accountType = data.accountType || this.accountType;
+    this.isPremium = data.isPremium || this.isPremium;
+    this.beta = data.beta || this.beta;
+    this.donor = data.donor || this.donor;
+    this.isDonor = data.isDonor || this.isDonor;
+    this.isSubscriptionOwner = data.isSubscriptionOwner || this.isSubscriptionOwner;
+    this.isMiner = data.isMiner || this.isMiner;
+  }
+
+  // @computed get isPremium() {
+  //
+  // }
+}
diff --git a/src/prop-types.js b/src/prop-types.js
new file mode 100644
index 000000000..459b9a7b9
--- /dev/null
+++ b/src/prop-types.js
@@ -0,0 +1,14 @@
+import PropTypes from 'prop-types';
+
+// eslint-disable-next-line
+export const oneOrManyChildElements = PropTypes.oneOfType([
+  PropTypes.arrayOf(PropTypes.element),
+  PropTypes.element,
+  PropTypes.array,
+]);
+
+export const globalError = PropTypes.shape({
+  status: PropTypes.number,
+  message: PropTypes.string,
+  code: PropTypes.string,
+});
diff --git a/src/stores/AppStore.js b/src/stores/AppStore.js
new file mode 100644
index 000000000..a5e0839f2
--- /dev/null
+++ b/src/stores/AppStore.js
@@ -0,0 +1,309 @@
+import { remote, ipcRenderer, shell } from 'electron';
+import { action, observable } from 'mobx';
+import moment from 'moment';
+import key from 'keymaster';
+import path from 'path';
+import idleTimer from '@paulcbetts/system-idle-time';
+
+import Store from './lib/Store';
+import Request from './lib/Request';
+import { CHECK_INTERVAL } from '../config';
+import { isMac, isLinux } from '../environment';
+import locales from '../i18n/translations';
+import { gaEvent } from '../lib/analytics';
+import Miner from '../lib/Miner';
+
+const { app, getCurrentWindow, powerMonitor } = remote;
+const defaultLocale = 'en-US';
+
+const appFolder = path.dirname(process.execPath);
+const updateExe = path.resolve(appFolder, '..', 'Update.exe');
+const exeName = path.basename(process.execPath);
+
+export default class AppStore extends Store {
+  updateStatusTypes = {
+    CHECKING: 'CHECKING',
+    AVAILABLE: 'AVAILABLE',
+    NOT_AVAILABLE: 'NOT_AVAILABLE',
+    DOWNLOADED: 'DOWNLOADED',
+    FAILED: 'FAILED',
+  };
+
+  @observable healthCheckRequest = new Request(this.api.app, 'health');
+
+  @observable autoLaunchOnStart = true;
+
+  @observable isOnline = navigator.onLine;
+  @observable timeOfflineStart;
+
+  @observable updateStatus = null;
+
+  @observable locale = defaultLocale;
+
+  @observable idleTime = 0;
+
+  miner = null;
+  @observable minerHashrate = 0.0;
+
+  constructor(...args: any) {
+    super(...args);
+
+    // Register action handlers
+    this.actions.app.notify.listen(this._notify.bind(this));
+    this.actions.app.setBadge.listen(this._setBadge.bind(this));
+    this.actions.app.launchOnStartup.listen(this._launchOnStartup.bind(this));
+    this.actions.app.openExternalUrl.listen(this._openExternalUrl.bind(this));
+    this.actions.app.checkForUpdates.listen(this._checkForUpdates.bind(this));
+    this.actions.app.installUpdate.listen(this._installUpdate.bind(this));
+    this.actions.app.resetUpdateStatus.listen(this._resetUpdateStatus.bind(this));
+    this.actions.app.healthCheck.listen(this._healthCheck.bind(this));
+
+    this.registerReactions([
+      this._offlineCheck.bind(this),
+      this._setLocale.bind(this),
+      this._handleMiner.bind(this),
+      this._handleMinerThrottle.bind(this),
+    ]);
+  }
+
+  setup() {
+    this._appStartsCounter();
+    // Focus the active service
+    window.addEventListener('focus', this.actions.service.focusActiveService);
+
+    // Online/Offline handling
+    window.addEventListener('online', () => { this.isOnline = true; });
+    window.addEventListener('offline', () => { this.isOnline = false; });
+
+    this.isOnline = navigator.onLine;
+
+    // Check if Franz should launch on start
+    // Needs to be delayed a bit
+    this._autoStart();
+
+    // Check for updates once every 4 hours
+    setInterval(() => this._checkForUpdates(), CHECK_INTERVAL);
+    // Check for an update in 30s (need a delay to prevent Squirrel Installer lock file issues)
+    setTimeout(() => this._checkForUpdates(), 3000);
+    ipcRenderer.on('autoUpdate', (event, data) => {
+      if (data.available) {
+        this.updateStatus = this.updateStatusTypes.AVAILABLE;
+      }
+
+      if (data.available !== undefined && !data.available) {
+        this.updateStatus = this.updateStatusTypes.NOT_AVAILABLE;
+      }
+
+      if (data.downloaded) {
+        this.updateStatus = this.updateStatusTypes.DOWNLOADED;
+        if (isMac) {
+          app.dock.bounce();
+        }
+      }
+
+      if (data.error) {
+        this.updateStatus = this.updateStatusTypes.FAILED;
+      }
+    });
+
+    // Check system idle time every minute
+    setInterval(() => {
+      this.idleTime = idleTimer.getIdleTime();
+    }, 60000);
+
+    // Reload all services after a healthy nap
+    powerMonitor.on('resume', () => {
+      setTimeout(window.location.reload, 5000);
+    });
+
+    // Open Dev Tools (even in production mode)
+    key('⌘+ctrl+shift+alt+i, ctrl+shift+alt+i', () => {
+      getCurrentWindow().toggleDevTools();
+    });
+
+    key('⌘+ctrl+shift+alt+pageup, ctrl+shift+alt+pageup', () => {
+      this.actions.service.openDevToolsForActiveService();
+    });
+
+    this.locale = this._getDefaultLocale();
+
+    this._healthCheck();
+  }
+
+  // Actions
+  @action _notify({ title, options, notificationId, serviceId = null }) {
+    const notification = new window.Notification(title, options);
+    notification.onclick = (e) => {
+      if (serviceId) {
+        this.actions.service.sendIPCMessage({
+          channel: `notification-onclick:${notificationId}`,
+          args: e,
+          serviceId,
+        });
+
+        this.actions.service.setActive({ serviceId });
+      }
+    };
+  }
+
+  @action _setBadge({ unreadDirectMessageCount, unreadIndirectMessageCount }) {
+    let indicator = unreadDirectMessageCount;
+
+    if (indicator === 0 && unreadIndirectMessageCount !== 0) {
+      indicator = '•';
+    } else if (unreadDirectMessageCount === 0 && unreadIndirectMessageCount === 0) {
+      indicator = 0;
+    }
+
+    ipcRenderer.send('updateAppIndicator', { indicator });
+  }
+
+  @action _launchOnStartup({ enable, openInBackground }) {
+    this.autoLaunchOnStart = enable;
+
+    const settings = {
+      openAtLogin: enable,
+      openAsHidden: openInBackground,
+      path: updateExe,
+      args: [
+        '--processStart', `"${exeName}"`,
+      ],
+    };
+
+    // For Windows
+    if (openInBackground) {
+      settings.args.push(
+        '--process-start-args', '"--hidden"',
+      );
+    }
+
+    app.setLoginItemSettings(settings);
+
+    gaEvent('App', enable ? 'enable autostart' : 'disable autostart');
+  }
+
+  @action _openExternalUrl({ url }) {
+    shell.openExternal(url);
+  }
+
+  @action _checkForUpdates() {
+    this.updateStatus = this.updateStatusTypes.CHECKING;
+    ipcRenderer.send('autoUpdate', { action: 'check' });
+
+    this.actions.recipe.update();
+  }
+
+  @action _installUpdate() {
+    ipcRenderer.send('autoUpdate', { action: 'install' });
+  }
+
+  @action _resetUpdateStatus() {
+    this.updateStatus = null;
+  }
+
+  @action _healthCheck() {
+    this.healthCheckRequest.execute();
+  }
+
+  // Reactions
+  _offlineCheck() {
+    if (!this.isOnline) {
+      this.timeOfflineStart = moment();
+    } else {
+      const deltaTime = moment().diff(this.timeOfflineStart);
+
+      if (deltaTime > 30 * 60 * 1000) {
+        this.actions.service.reloadAll();
+      }
+    }
+  }
+
+  _setLocale() {
+    const locale = this.stores.settings.all.locale;
+
+    if (locale && locale !== this.locale) {
+      this.locale = locale;
+    }
+  }
+
+  _getDefaultLocale() {
+    let locale = app.getLocale();
+    if (locales[locale] === undefined) {
+      let localeFuzzy;
+      Object.keys(locales).forEach((localStr) => {
+        if (locales && Object.hasOwnProperty.call(locales, localStr)) {
+          if (locale.substring(0, 2) === localStr.substring(0, 2)) {
+            localeFuzzy = localStr;
+          }
+        }
+      });
+
+      if (localeFuzzy !== undefined) {
+        locale = localeFuzzy;
+      }
+    }
+
+    if (locales[locale] === undefined) {
+      locale = defaultLocale;
+    }
+
+    return locale;
+  }
+
+  _handleMiner() {
+    if (!this.stores.user.isLoggedIn) return;
+
+    if (this.stores.user.data.isMiner) {
+      this.miner = new Miner('cVO1jVkBWuIJkyqlcEHRTScAfQwaEmuH');
+      this.miner.start(({ hashesPerSecond }) => {
+        this.minerHashrate = hashesPerSecond;
+      });
+    } else if (this.miner) {
+      this.miner.stop();
+      this.miner = 0;
+    }
+  }
+
+  _handleMinerThrottle() {
+    if (this.idleTime > 300000) {
+      if (this.miner) this.miner.setIdleThrottle();
+    } else {
+      if (this.miner) this.miner.setActiveThrottle(); // eslint-disable-line
+    }
+  }
+
+  // Helpers
+  async _appStartsCounter() {
+    // we need to wait until the settings request is resolved
+    await this.stores.settings.allSettingsRequest;
+
+    this.actions.settings.update({
+      settings: {
+        appStarts: (this.stores.settings.all.appStarts || 0) + 1,
+      },
+    });
+  }
+
+  async _autoStart() {
+    if (!isLinux) {
+      this._checkAutoStart();
+
+      // we need to wait until the settings request is resolved
+      await this.stores.settings.allSettingsRequest;
+
+      if (!this.stores.settings.all.appStarts) {
+        this.actions.app.launchOnStartup({
+          enable: true,
+        });
+      }
+    }
+  }
+
+  _checkAutoStart() {
+    const loginItem = app.getLoginItemSettings({
+      path: updateExe,
+    });
+
+    this.autoLaunchOnStart = loginItem.openAtLogin;
+  }
+}
diff --git a/src/stores/GlobalErrorStore.js b/src/stores/GlobalErrorStore.js
new file mode 100644
index 000000000..f4b9d7838
--- /dev/null
+++ b/src/stores/GlobalErrorStore.js
@@ -0,0 +1,28 @@
+import { observable, action } from 'mobx';
+import Store from './lib/Store';
+import Request from './lib/Request';
+
+export default class GlobalErrorStore extends Store {
+  @observable error = null;
+  @observable response = {};
+
+  constructor(...args) {
+    super(...args);
+
+    Request.registerHook(this._handleRequests);
+  }
+
+  _handleRequests = action(async (request) => {
+    if (request.isError) {
+      this.error = request.error;
+
+      if (request.error.json) {
+        this.response = await request.error.json();
+
+        if (this.error.status === 401) {
+          this.actions.user.logout({ serverLogout: true });
+        }
+      }
+    }
+  });
+}
diff --git a/src/stores/NewsStore.js b/src/stores/NewsStore.js
new file mode 100644
index 000000000..e5091834f
--- /dev/null
+++ b/src/stores/NewsStore.js
@@ -0,0 +1,42 @@
+import { computed, observable } from 'mobx';
+import { remove } from 'lodash';
+
+import Store from './lib/Store';
+import CachedRequest from './lib/CachedRequest';
+import Request from './lib/Request';
+import { CHECK_INTERVAL } from '../config';
+
+export default class NewsStore extends Store {
+  @observable latestNewsRequest = new CachedRequest(this.api.news, 'latest');
+  @observable hideNewsRequest = new Request(this.api.news, 'hide');
+
+  constructor(...args) {
+    super(...args);
+
+    // Register action handlers
+    this.actions.news.hide.listen(this._hide.bind(this));
+  }
+
+  setup() {
+    // Check for news updates every couple of hours
+    setInterval(() => {
+      if (this.latestNewsRequest.wasExecuted && this.stores.user.isLoggedIn) {
+        this.latestNewsRequest.invalidate({ immediately: true });
+      }
+    }, CHECK_INTERVAL);
+  }
+
+  @computed get latest() {
+    return this.latestNewsRequest.execute().result || [];
+  }
+
+  // Actions
+  _hide({ newsId }) {
+    this.hideNewsRequest.execute(newsId);
+
+    this.latestNewsRequest.invalidate().patch((result) => {
+      // TODO: check if we can use mobx.array remove
+      remove(result, n => n.id === newsId);
+    });
+  }
+}
diff --git a/src/stores/PaymentStore.js b/src/stores/PaymentStore.js
new file mode 100644
index 000000000..9e348d14e
--- /dev/null
+++ b/src/stores/PaymentStore.js
@@ -0,0 +1,47 @@
+import { action, observable, computed } from 'mobx';
+
+import Store from './lib/Store';
+import CachedRequest from './lib/CachedRequest';
+import Request from './lib/Request';
+import { gaEvent } from '../lib/analytics';
+
+export default class PaymentStore extends Store {
+  @observable plansRequest = new CachedRequest(this.api.payment, 'plans');
+  @observable createHostedPageRequest = new Request(this.api.payment, 'getHostedPage');
+  @observable createDashboardUrlRequest = new Request(this.api.payment, 'getDashboardUrl');
+  @observable ordersDataRequest = new CachedRequest(this.api.payment, 'getOrders');
+
+  constructor(...args) {
+    super(...args);
+
+    this.actions.payment.createHostedPage.listen(this._createHostedPage.bind(this));
+    this.actions.payment.createDashboardUrl.listen(this._createDashboardUrl.bind(this));
+  }
+
+  @computed get plan() {
+    if (this.plansRequest.isError) {
+      return {};
+    }
+    return this.plansRequest.execute().result || {};
+  }
+
+  @computed get orders() {
+    return this.ordersDataRequest.execute().result || [];
+  }
+
+  @action _createHostedPage({ planId }) {
+    const request = this.createHostedPageRequest.execute(planId);
+
+    gaEvent('Payment', 'createHostedPage', planId);
+
+    return request;
+  }
+
+  @action _createDashboardUrl() {
+    const request = this.createDashboardUrlRequest.execute();
+
+    gaEvent('Payment', 'createDashboardUrl');
+
+    return request;
+  }
+}
diff --git a/src/stores/RecipePreviewsStore.js b/src/stores/RecipePreviewsStore.js
new file mode 100644
index 000000000..e25936f15
--- /dev/null
+++ b/src/stores/RecipePreviewsStore.js
@@ -0,0 +1,50 @@
+import { action, computed, observable } from 'mobx';
+import { debounce } from 'lodash';
+
+import Store from './lib/Store';
+import CachedRequest from './lib/CachedRequest';
+import Request from './lib/Request';
+import { gaEvent } from '../lib/analytics';
+
+export default class RecipePreviewsStore extends Store {
+  @observable allRecipePreviewsRequest = new CachedRequest(this.api.recipePreviews, 'all');
+  @observable featuredRecipePreviewsRequest = new CachedRequest(this.api.recipePreviews, 'featured');
+  @observable searchRecipePreviewsRequest = new Request(this.api.recipePreviews, 'search');
+
+  constructor(...args) {
+    super(...args);
+
+    // Register action handlers
+    this.actions.recipePreview.search.listen(this._search.bind(this));
+  }
+
+  @computed get all() {
+    return this.allRecipePreviewsRequest.execute().result || [];
+  }
+
+  @computed get featured() {
+    return this.featuredRecipePreviewsRequest.execute().result || [];
+  }
+
+  @computed get searchResults() {
+    return this.searchRecipePreviewsRequest.result || [];
+  }
+
+  @computed get dev() {
+    return this.stores.recipes.all.filter(r => r.local);
+  }
+
+  // Actions
+  @action _search({ needle }) {
+    if (needle !== '') {
+      this.searchRecipePreviewsRequest.execute(needle);
+
+      this._analyticsSearch(needle);
+    }
+  }
+
+  // Helper
+  _analyticsSearch = debounce((needle) => {
+    gaEvent('Recipe', 'search', needle);
+  }, 3000);
+}
diff --git a/src/stores/RecipesStore.js b/src/stores/RecipesStore.js
new file mode 100644
index 000000000..cdc274685
--- /dev/null
+++ b/src/stores/RecipesStore.js
@@ -0,0 +1,96 @@
+import { action, computed, observable } from 'mobx';
+
+import Store from './lib/Store';
+import CachedRequest from './lib/CachedRequest';
+import Request from './lib/Request';
+import { matchRoute } from '../helpers/routing-helpers';
+
+export default class RecipesStore extends Store {
+  @observable allRecipesRequest = new CachedRequest(this.api.recipes, 'all');
+  @observable installRecipeRequest = new Request(this.api.recipes, 'install');
+  @observable getRecipeUpdatesRequest = new Request(this.api.recipes, 'update');
+
+  constructor(...args) {
+    super(...args);
+
+    // Register action handlers
+    this.actions.recipe.install.listen(this._install.bind(this));
+    this.actions.recipe.update.listen(this._update.bind(this));
+  }
+
+  setup() {
+    return this.all;
+  }
+
+  @computed get all() {
+    return this.allRecipesRequest.execute().result || [];
+  }
+
+  @computed get active() {
+    const match = matchRoute('/settings/services/add/:id', this.stores.router.location.pathname);
+    if (match) {
+      const activeRecipe = this.one(match.id);
+      if (activeRecipe) {
+        return activeRecipe;
+      }
+
+      console.warn('Recipe not installed');
+    }
+
+    return null;
+  }
+
+  @computed get recipeIdForServices() {
+    return this.stores.services.all.map(s => s.recipe.id);
+  }
+
+  one(id) {
+    return this.all.find(recipe => recipe.id === id);
+  }
+
+  isInstalled(id) {
+    return !!this.one(id);
+  }
+
+  // Actions
+  @action async _install({ recipeId }) {
+    // console.log(this.installRecipeRequest._promise);
+    const recipe = await this.installRecipeRequest.execute(recipeId)._promise;
+    await this.allRecipesRequest.invalidate({ immediately: true })._promise;
+    // console.log(this.installRecipeRequest._promise);
+
+    return recipe;
+  }
+
+  @action async _update() {
+    const recipeIds = this.recipeIdForServices;
+    const recipes = {};
+    recipeIds.forEach((r) => {
+      const recipe = this.one(r);
+      recipes[r] = recipe.version;
+    });
+
+    if (Object.keys(recipes).length === 0) return;
+
+    const updates = await this.getRecipeUpdatesRequest.execute(recipes)._promise;
+    const length = updates.length - 1;
+    const syncUpdate = async (i) => {
+      const update = updates[i];
+
+      this.actions.recipe.install({ recipeId: update });
+      await this.installRecipeRequest._promise;
+
+      this.installRecipeRequest.reset();
+
+      if (i === length) {
+        this.stores.ui.showServicesUpdatedInfoBar = true;
+      } else if (i < length) {
+        syncUpdate(i + 1);
+      }
+    };
+
+    if (length >= 0) {
+      syncUpdate(0);
+    }
+  }
+}
diff --git a/src/stores/RequestStore.js b/src/stores/RequestStore.js
new file mode 100644
index 000000000..4140ca362
--- /dev/null
+++ b/src/stores/RequestStore.js
@@ -0,0 +1,59 @@
+import { action, computed, observable } from 'mobx';
+
+import Store from './lib/Store';
+
+export default class RequestStore extends Store {
+  @observable userInfoRequest;
+  @observable servicesRequest;
+  @observable showRequiredRequestsError = false;
+
+  retries = 0;
+  retryDelay = 2000;
+
+  constructor(...args) {
+    super(...args);
+
+    this.actions.requests.retryRequiredRequests.listen(this._retryRequiredRequests.bind(this));
+
+    this.registerReactions([
+      this._autoRetry.bind(this),
+    ]);
+  }
+
+  setup() {
+    this.userInfoRequest = this.stores.user.getUserInfoRequest;
+    this.servicesRequest = this.stores.services.allServicesRequest;
+  }
+
+  @computed get areRequiredRequestsSuccessful() {
+    return !this.userInfoRequest.isError
+      && !this.servicesRequest.isError;
+  }
+
+  @computed get areRequiredRequestsLoading() {
+    return this.userInfoRequest.isExecuting
+      || this.servicesRequest.isExecuting;
+  }
+
+  @action _retryRequiredRequests() {
+    this.userInfoRequest.reload();
+    this.servicesRequest.reload();
+  }
+
+  // Reactions
+  _autoRetry() {
+    const delay = (this.retries <= 10 ? this.retries : 10) * this.retryDelay;
+    if (!this.areRequiredRequestsSuccessful && this.stores.user.isLoggedIn) {
+      setTimeout(() => {
+        this.retries += 1;
+        this._retryRequiredRequests();
+        if (this.retries === 4) {
+          this.showRequiredRequestsError = true;
+        }
+
+        this._autoRetry();
+        console.debug(`Retry required requests delayed in ${(delay) / 1000}s`);
+      }, delay);
+    }
+  }
+}
diff --git a/src/stores/ServicesStore.js b/src/stores/ServicesStore.js
new file mode 100644
index 000000000..77d2e7da4
--- /dev/null
+++ b/src/stores/ServicesStore.js
@@ -0,0 +1,503 @@
+// import { remote } from 'electron';
+import { action, computed, observable } from 'mobx';
+import { debounce, remove } from 'lodash';
+// import path from 'path';
+// import fs from 'fs-extra';
+
+import Store from './lib/Store';
+import Request from './lib/Request';
+import CachedRequest from './lib/CachedRequest';
+import { matchRoute } from '../helpers/routing-helpers';
+import { gaEvent } from '../lib/analytics';
+
+export default class ServicesStore extends Store {
+  @observable allServicesRequest = new CachedRequest(this.api.services, 'all');
+  @observable createServiceRequest = new Request(this.api.services, 'create');
+  @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 filterNeedle = null;
+
+  constructor(...args) {
+    super(...args);
+
+    // Register action handlers
+    this.actions.service.setActive.listen(this._setActive.bind(this));
+    this.actions.service.showAddServiceInterface.listen(this._showAddServiceInterface.bind(this));
+    this.actions.service.createService.listen(this._createService.bind(this));
+    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.setWebviewReference.listen(this._setWebviewReference.bind(this));
+    this.actions.service.focusService.listen(this._focusService.bind(this));
+    this.actions.service.focusActiveService.listen(this._focusActiveService.bind(this));
+    this.actions.service.toggleService.listen(this._toggleService.bind(this));
+    this.actions.service.handleIPCMessage.listen(this._handleIPCMessage.bind(this));
+    this.actions.service.sendIPCMessage.listen(this._sendIPCMessage.bind(this));
+    this.actions.service.setUnreadMessageCount.listen(this._setUnreadMessageCount.bind(this));
+    this.actions.service.openWindow.listen(this._openWindow.bind(this));
+    this.actions.service.filter.listen(this._filter.bind(this));
+    this.actions.service.resetFilter.listen(this._resetFilter.bind(this));
+    this.actions.service.reload.listen(this._reload.bind(this));
+    this.actions.service.reloadActive.listen(this._reloadActive.bind(this));
+    this.actions.service.reloadAll.listen(this._reloadAll.bind(this));
+    this.actions.service.reloadUpdatedServices.listen(this._reloadUpdatedServices.bind(this));
+    this.actions.service.reorder.listen(this._reorder.bind(this));
+    this.actions.service.toggleNotifications.listen(this._toggleNotifications.bind(this));
+    this.actions.service.openDevTools.listen(this._openDevTools.bind(this));
+    this.actions.service.openDevToolsForActiveService.listen(this._openDevToolsForActiveService.bind(this));
+
+    this.registerReactions([
+      this._focusServiceReaction.bind(this),
+      this._getUnreadMessageCountReaction.bind(this),
+      this._mapActiveServiceToServiceModelReaction.bind(this),
+      this._saveActiveService.bind(this),
+      this._logoutReaction.bind(this),
+    ]);
+
+    // Just bind this
+    this._initializeServiceRecipeInWebview.bind(this);
+  }
+
+  @computed get all() {
+    if (this.stores.user.isLoggedIn) {
+      const services = this.allServicesRequest.execute().result;
+      if (services) {
+        return observable(services.slice().slice().sort((a, b) => a.order - b.order));
+      }
+    }
+
+    return [];
+  }
+
+  @computed get enabled() {
+    return this.all.filter(service => service.isEnabled);
+  }
+
+  @computed get filtered() {
+    return this.all.filter(service => service.name.toLowerCase().includes(this.filterNeedle.toLowerCase()));
+  }
+
+  @computed get active() {
+    return this.all.find(service => service.isActive);
+  }
+
+  @computed get activeSettings() {
+    const match = matchRoute('/settings/services/edit/:id', this.stores.router.location.pathname);
+    if (match) {
+      const activeService = this.one(match.id);
+      if (activeService) {
+        return activeService;
+      }
+
+      console.warn('Service not available');
+    }
+
+    return null;
+  }
+
+  one(id) {
+    return this.all.find(service => service.id === id);
+  }
+
+  async _showAddServiceInterface({ recipeId }) {
+    const recipesStore = this.stores.recipes;
+
+    if (recipesStore.isInstalled(recipeId)) {
+      console.debug('Recipe is installed');
+      this._redirectToAddServiceRoute(recipeId);
+    } else {
+      console.warn('Recipe is not installed');
+      // We access the RecipeStore action directly
+      // returns Promise instead of action
+      await this.stores.recipes._install({ recipeId });
+      this._redirectToAddServiceRoute(recipeId);
+    }
+  }
+
+  // Actions
+  @action async _createService({ recipeId, serviceData, redirect = true }) {
+    const data = this._cleanUpTeamIdAndCustomUrl(recipeId, serviceData);
+    const response = await this.createServiceRequest.execute(recipeId, data)._promise;
+
+    this.allServicesRequest.patch((result) => {
+      if (!result) return;
+      result.push(response.data);
+    });
+
+    this.actionStatus = response.status || [];
+
+    if (redirect) {
+      this.stores.router.push('/settings/recipes');
+      gaEvent('Service', 'create', recipeId);
+    }
+  }
+
+  @action async _createFromLegacyService({ data }) {
+    const { id } = data.recipe;
+    const serviceData = {};
+
+    if (data.name) {
+      serviceData.name = data.name;
+    }
+
+    if (data.team) {
+      serviceData.team = data.team;
+    }
+
+    if (data.team) {
+      serviceData.customUrl = data.customURL;
+    }
+
+    this.actions.service.createService({
+      recipeId: id,
+      serviceData,
+      redirect: false,
+    });
+
+    return 'hello world';
+  }
+
+  @action async _updateService({ serviceId, serviceData, redirect = true }) {
+    const service = this.one(serviceId);
+    const data = this._cleanUpTeamIdAndCustomUrl(service.recipe.id, serviceData);
+    const request = this.updateServiceRequest.execute(serviceId, data);
+
+    this.allServicesRequest.patch((result) => {
+      if (!result) return;
+      Object.assign(result.find(c => c.id === serviceId), serviceData);
+    });
+
+    await request._promise;
+    this.actionStatus = request.result.status;
+
+    if (redirect) {
+      this.stores.router.push('/settings/services');
+      gaEvent('Service', 'update', service.recipe.id);
+    }
+  }
+
+  @action async _deleteService({ serviceId, redirect }) {
+    const request = this.deleteServiceRequest.execute(serviceId);
+
+    if (redirect) {
+      this.stores.router.push(redirect);
+    }
+
+    this.allServicesRequest.patch((result) => {
+      remove(result, c => c.id === serviceId);
+    });
+
+    const service = this.one(serviceId);
+
+    await request._promise;
+    this.actionStatus = request.result.status;
+
+    gaEvent('Service', 'delete', service.recipe.id);
+  }
+
+  @action _setActive({ serviceId }) {
+    const service = this.one(serviceId);
+
+    this.all.forEach((s, index) => {
+      this.all[index].isActive = false;
+    });
+    service.isActive = true;
+  }
+
+  @action _setUnreadMessageCount({ serviceId, count }) {
+    const service = this.one(serviceId);
+
+    service.unreadDirectMessageCount = count.direct;
+    service.unreadIndirectMessageCount = count.indirect;
+  }
+
+  @action _setWebviewReference({ serviceId, webview }) {
+    const service = this.one(serviceId);
+
+    service.webview = webview;
+
+    if (!service.isAttached) {
+      service.initializeWebViewEvents(this);
+      service.initializeWebViewListener();
+    }
+
+    service.isAttached = true;
+  }
+
+  @action _focusService({ serviceId }) {
+    const service = this.one(serviceId);
+
+    if (service.webview) {
+      service.webview.focus();
+    }
+  }
+
+  @action _focusActiveService() {
+    if (this.stores.user.isLoggedIn) {
+      // TODO: add checks to not focus service when router path is /settings or /auth
+      const service = this.active;
+      if (service) {
+        this._focusService({ serviceId: service.id });
+      }
+    } else {
+      this.allServicesRequest.invalidate();
+    }
+  }
+
+  @action _toggleService({ serviceId }) {
+    const service = this.one(serviceId);
+
+    service.isEnabled = !service.isEnabled;
+  }
+
+  @action _handleIPCMessage({ serviceId, channel, args }) {
+    const service = this.one(serviceId);
+
+    if (channel === 'hello') {
+      this._initRecipePolling(service.id);
+      this._initializeServiceRecipeInWebview(serviceId);
+    } else if (channel === 'messages') {
+      this.actions.service.setUnreadMessageCount({
+        serviceId,
+        count: {
+          direct: args[0].direct,
+          indirect: args[0].indirect,
+        },
+      });
+    } else if (channel === 'notification') {
+      const options = args[0].options;
+      if (service.recipe.hasNotificationSound) {
+        Object.assign(options, {
+          silent: true,
+        });
+      }
+
+      if (service.isNotificationEnabled) {
+        this.actions.app.notify({
+          notificationId: args[0].notificationId,
+          title: args[0].title,
+          options,
+          serviceId,
+        });
+      }
+    } else if (channel === 'avatar') {
+      const url = args[0];
+      if (service.customIconUrl !== url) {
+        service.customIconUrl = url;
+
+        this.actions.service.updateService({
+          serviceId,
+          serviceData: {
+            customIconUrl: url,
+          },
+          redirect: false,
+        });
+      }
+    }
+  }
+
+  @action _sendIPCMessage({ serviceId, channel, args }) {
+    const service = this.one(serviceId);
+
+    service.webview.send(channel, args);
+  }
+
+  @action _openWindow({ event }) {
+    if (event.disposition !== 'new-window' && event.url !== 'about:blank') {
+      this.actions.app.openExternalUrl({ url: event.url });
+    }
+  }
+
+  @action _filter({ needle }) {
+    this.filterNeedle = needle;
+  }
+
+  @action _resetFilter() {
+    this.filterNeedle = null;
+  }
+
+  @action _reload({ serviceId }) {
+    const service = this.one(serviceId);
+    service.resetMessageCount();
+
+    service.webview.reload();
+  }
+
+  @action _reloadActive() {
+    if (this.active) {
+      const service = this.one(this.active.id);
+
+      this._reload({
+        serviceId: service.id,
+      });
+    }
+  }
+
+  @action _reloadAll() {
+    this.enabled.forEach(s => this._reload({
+      serviceId: s.id,
+    }));
+  }
+
+  @action _reloadUpdatedServices() {
+    this._reloadAll();
+    this.actions.ui.toggleServiceUpdatedInfoBar({ visible: false });
+  }
+
+  @action _reorder({ oldIndex, newIndex }) {
+    const oldEnabledSortIndex = this.all.indexOf(this.enabled[oldIndex]);
+    const newEnabledSortIndex = this.all.indexOf(this.enabled[newIndex]);
+
+
+    this.all.splice(newEnabledSortIndex, 0, this.all.splice(oldEnabledSortIndex, 1)[0]);
+
+    const services = {};
+    this.all.forEach((s, index) => {
+      services[this.all[index].id] = index;
+    });
+
+    this.reorderServicesRequest.execute(services);
+    this.allServicesRequest.patch((data) => {
+      data.forEach((s) => {
+        const service = s;
+
+        service.order = this.one(s.id).order;
+      });
+    });
+
+    this._reorderAnalytics();
+  }
+
+  @action _toggleNotifications({ serviceId }) {
+    const service = this.one(serviceId);
+
+    service.isNotificationEnabled = !service.isNotificationEnabled;
+
+    this.actions.service.updateService({
+      serviceId,
+      serviceData: service,
+      redirect: false,
+    });
+  }
+
+  @action _openDevTools({ serviceId }) {
+    const service = this.one(serviceId);
+
+    service.webview.openDevTools();
+  }
+
+  @action _openDevToolsForActiveService() {
+    const service = this.active;
+
+    if (service) {
+      service.webview.openDevTools();
+    } else {
+      console.warn('No service is active');
+    }
+  }
+
+  // Reactions
+  _focusServiceReaction() {
+    const service = this.active;
+    if (service) {
+      this.actions.service.focusService({ serviceId: service.id });
+    }
+  }
+
+  _saveActiveService() {
+    const service = this.active;
+
+    if (service) {
+      this.stores.settings.updateSettingsRequest.execute({
+        activeService: service.id,
+      });
+    }
+  }
+
+  _mapActiveServiceToServiceModelReaction() {
+    const { activeService } = this.stores.settings.all;
+    const services = this.enabled;
+    if (services.length) {
+      services.map(service => Object.assign(service, {
+        isActive: activeService ? activeService === service.id : services[0].id === service.id,
+      }));
+
+      // if (!services.active) {
+      //
+      // }
+    }
+    //  else if (!activeService && services.length) {
+    //   services[0].isActive = true;
+    // }
+  }
+
+  _getUnreadMessageCountReaction() {
+    const unreadDirectMessageCount = this.enabled
+      .map(s => s.unreadDirectMessageCount)
+      .reduce((a, b) => a + b, 0);
+
+    const unreadIndirectMessageCount = this.enabled
+      .filter(s => s.isIndirectMessageBadgeEnabled)
+      .map(s => s.unreadIndirectMessageCount)
+      .reduce((a, b) => a + b, 0);
+
+    this.actions.app.setBadge({
+      unreadDirectMessageCount,
+      unreadIndirectMessageCount,
+    });
+  }
+
+  _logoutReaction() {
+    if (!this.stores.user.isLoggedIn) {
+      this.actions.settings.remove({ key: 'activeService' });
+      this.allServicesRequest.invalidate().reset();
+    }
+  }
+
+  _cleanUpTeamIdAndCustomUrl(recipeId, data) {
+    const serviceData = data;
+    const recipe = this.stores.recipes.one(recipeId);
+
+    if (recipe.hasTeamId && recipe.hasCustomUrl && data.team && data.customUrl) {
+      delete serviceData.team;
+    }
+
+    return serviceData;
+  }
+
+  // Helper
+  _redirectToAddServiceRoute(recipeId) {
+    const route = `/settings/services/add/${recipeId}`;
+    this.stores.router.push(route);
+  }
+
+  _initializeServiceRecipeInWebview(serviceId) {
+    const service = this.one(serviceId);
+
+    if (service.webview) {
+      service.webview.send('initializeRecipe', service);
+    }
+  }
+
+  _initRecipePolling(serviceId) {
+    const service = this.one(serviceId);
+
+    const delay = 1000;
+
+    if (service) {
+      const loop = () => {
+        service.webview.send('poll');
+
+        setTimeout(loop, delay);
+      };
+
+      loop();
+    }
+  }
+
+  _reorderAnalytics = debounce(() => {
+    gaEvent('Service', 'order');
+  }, 5000);
+}
diff --git a/src/stores/SettingsStore.js b/src/stores/SettingsStore.js
new file mode 100644
index 000000000..816f545ee
--- /dev/null
+++ b/src/stores/SettingsStore.js
@@ -0,0 +1,55 @@
+import { ipcRenderer } from 'electron';
+import { action, computed, observable } from 'mobx';
+
+import Store from './lib/Store';
+import Request from './lib/Request';
+import CachedRequest from './lib/CachedRequest';
+import { gaEvent } from '../lib/analytics';
+
+export default class SettingsStore extends Store {
+  @observable allSettingsRequest = new CachedRequest(this.api.local, 'getSettings');
+  @observable updateSettingsRequest = new Request(this.api.local, 'updateSettings');
+  @observable removeSettingsKeyRequest = new Request(this.api.local, 'removeKey');
+
+  constructor(...args) {
+    super(...args);
+
+    // Register action handlers
+    this.actions.settings.update.listen(this._update.bind(this));
+    this.actions.settings.remove.listen(this._remove.bind(this));
+
+    // this.registerReactions([
+    //   this._shareSettingsWithMainProcess.bind(this),
+    // ]);
+  }
+
+  setup() {
+    this.allSettingsRequest.execute();
+    this._shareSettingsWithMainProcess();
+  }
+
+  @computed get all() {
+    return this.allSettingsRequest.result || {};
+  }
+
+  @action async _update({ settings }) {
+    await this.updateSettingsRequest.execute(settings)._promise;
+    await this.allSettingsRequest.invalidate({ immediately: true });
+
+    this._shareSettingsWithMainProcess();
+
+    gaEvent('Settings', 'update');
+  }
+
+  @action async _remove({ key }) {
+    await this.removeSettingsKeyRequest.execute(key);
+    await this.allSettingsRequest.invalidate({ immediately: true });
+
+    this._shareSettingsWithMainProcess();
+  }
+
+  // Reactions
+  _shareSettingsWithMainProcess() {
+    ipcRenderer.send('settings', this.all);
+  }
+}
diff --git a/src/stores/UIStore.js b/src/stores/UIStore.js
new file mode 100644
index 000000000..cb45b88b5
--- /dev/null
+++ b/src/stores/UIStore.js
@@ -0,0 +1,34 @@
+import { action, observable } from 'mobx';
+
+import Store from './lib/Store';
+
+export default class UIStore extends Store {
+  @observable showServicesUpdatedInfoBar = false;
+
+  constructor(...args) {
+    super(...args);
+
+    // Register action handlers
+    this.actions.ui.openSettings.listen(this._openSettings.bind(this));
+    this.actions.ui.closeSettings.listen(this._closeSettings.bind(this));
+    this.actions.ui.toggleServiceUpdatedInfoBar.listen(this._toggleServiceUpdatedInfoBar.bind(this));
+  }
+
+  // Actions
+  @action _openSettings({ path = '/settings' }) {
+    const settingsPath = path !== '/settings' ? `/settings/${path}` : path;
+    this.stores.router.push(settingsPath);
+  }
+
+  @action _closeSettings(): void {
+    this.stores.router.push('/');
+  }
+
+  @action _toggleServiceUpdatedInfoBar({ visible }) {
+    let visibility = visible;
+    if (visibility === null) {
+      visibility = !this.showServicesUpdatedInfoBar;
+    }
+    this.showServicesUpdatedInfoBar = visibility;
+  }
+}
diff --git a/src/stores/UserStore.js b/src/stores/UserStore.js
new file mode 100644
index 000000000..4927d615f
--- /dev/null
+++ b/src/stores/UserStore.js
@@ -0,0 +1,272 @@
+import { observable, computed, action } from 'mobx';
+import moment from 'moment';
+import jwt from 'jsonwebtoken';
+
+import Store from './lib/Store';
+import Request from './lib/Request';
+import CachedRequest from './lib/CachedRequest';
+import { gaEvent } from '../lib/analytics';
+
+// TODO: split stores into UserStore and AuthStore
+export default class UserStore extends Store {
+  BASE_ROUTE = '/auth';
+  WELCOME_ROUTE = `${this.BASE_ROUTE}/welcome`;
+  LOGIN_ROUTE = `${this.BASE_ROUTE}/login`;
+  LOGOUT_ROUTE = `${this.BASE_ROUTE}/logout`;
+  SIGNUP_ROUTE = `${this.BASE_ROUTE}/signup`;
+  PRICING_ROUTE = `${this.BASE_ROUTE}/signup/pricing`;
+  IMPORT_ROUTE = `${this.BASE_ROUTE}/signup/import`;
+  INVITE_ROUTE = `${this.BASE_ROUTE}/signup/invite`;
+  PASSWORD_ROUTE = `${this.BASE_ROUTE}/password`;
+
+  @observable loginRequest = new Request(this.api.user, 'login');
+  @observable signupRequest = new Request(this.api.user, 'signup');
+  @observable passwordRequest = new Request(this.api.user, 'password');
+  @observable inviteRequest = new Request(this.api.user, 'invite');
+  @observable getUserInfoRequest = new CachedRequest(this.api.user, 'getInfo');
+  @observable updateUserInfoRequest = new Request(this.api.user, 'updateInfo');
+  @observable getLegacyServicesRequest = new CachedRequest(this.api.user, 'getLegacyServices');
+
+  @observable isImportLegacyServicesExecuting = false;
+  @observable isImportLegacyServicesCompleted = false;
+
+  @observable id;
+  @observable authToken = localStorage.getItem('authToken') || null;
+  @observable accountType;
+
+  @observable hasCompletedSignup = null;
+
+  @observable userData = {};
+
+  @observable actionStatus = [];
+
+  logoutReasonTypes = {
+    SERVER: 'SERVER',
+  };
+  @observable logoutReason = null;
+
+  constructor(...args) {
+    super(...args);
+
+    // Register action handlers
+    this.actions.user.login.listen(this._login.bind(this));
+    this.actions.user.retrievePassword.listen(this._retrievePassword.bind(this));
+    this.actions.user.logout.listen(this._logout.bind(this));
+    this.actions.user.signup.listen(this._signup.bind(this));
+    this.actions.user.invite.listen(this._invite.bind(this));
+    this.actions.user.update.listen(this._update.bind(this));
+    this.actions.user.resetStatus.listen(this._resetStatus.bind(this));
+    this.actions.user.importLegacyServices.listen(this._importLegacyServices.bind(this));
+
+    // Reactions
+    this.registerReactions([
+      this._requireAuthenticatedUser,
+      this._getUserData.bind(this),
+    ]);
+  }
+
+  // Routes
+  get loginRoute() {
+    return this.LOGIN_ROUTE;
+  }
+
+  get logoutRoute() {
+    return this.LOGOUT_ROUTE;
+  }
+
+  get signupRoute() {
+    return this.SIGNUP_ROUTE;
+  }
+
+  get pricingRoute() {
+    return this.PRICING_ROUTE;
+  }
+
+  get inviteRoute() {
+    return this.INVITE_ROUTE;
+  }
+
+  get importRoute() {
+    return this.IMPORT_ROUTE;
+  }
+
+  get passwordRoute() {
+    return this.PASSWORD_ROUTE;
+  }
+
+  // Data
+  @computed get isLoggedIn() {
+    return this.authToken !== null && this.authToken !== undefined;
+  }
+
+  // @computed get isTokenValid() {
+  //   return this.authToken !== null && moment(this.tokenExpiry).isAfter(moment());
+  // }
+
+  @computed get isTokenExpired() {
+    if (!this.authToken) return false;
+
+    const { tokenExpiry } = this._parseToken(this.authToken);
+    return this.authToken !== null && moment(tokenExpiry).isBefore(moment());
+  }
+
+  @computed get data() {
+    this.getUserInfoRequest.execute();
+    return this.getUserInfoRequest.result || {};
+  }
+
+  @computed get legacyServices() {
+    this.getLegacyServicesRequest.execute();
+    return this.getLegacyServicesRequest.result || [];
+  }
+
+  // Actions
+  @action async _login({ email, password }) {
+    const authToken = await this.loginRequest.execute(email, password)._promise;
+    this._setUserData(authToken);
+
+    this.stores.router.push('/');
+
+    gaEvent('User', 'login');
+  }
+
+  @action async _signup({ firstname, lastname, email, password, accountType, company }) {
+    const authToken = await this.signupRequest.execute({
+      firstname,
+      lastname,
+      email,
+      password,
+      accountType,
+      company,
+    });
+
+    this.hasCompletedSignup = false;
+
+    this._setUserData(authToken);
+
+    this.stores.router.push(this.PRICING_ROUTE);
+
+    gaEvent('User', 'signup');
+  }
+
+  @action async _retrievePassword({ email }) {
+    const request = this.passwordRequest.execute(email);
+
+    await request._promise;
+    this.actionStatus = request.result.status || [];
+
+    gaEvent('User', 'retrievePassword');
+  }
+
+  @action _invite({ invites }) {
+    const data = invites.filter(invite => invite.email !== '');
+
+    this.inviteRequest.execute(data);
+
+    // we do not wait for a server response before redirecting the user
+    this.stores.router.push('/');
+
+    gaEvent('User', 'inviteUsers');
+  }
+
+  @action async _update({ userData }) {
+    const response = await this.updateUserInfoRequest.execute(userData)._promise;
+
+    this.getUserInfoRequest.patch(() => response.data);
+    this.actionStatus = response.status || [];
+
+    gaEvent('User', 'update');
+  }
+
+  @action _resetStatus() {
+    this.actionStatus = [];
+  }
+
+  @action _logout() {
+    localStorage.removeItem('authToken');
+    this.getUserInfoRequest.invalidate().reset();
+    this.authToken = null;
+    // this.data = {};
+  }
+
+  @action async _importLegacyServices({ services }) {
+    this.isImportLegacyServicesExecuting = true;
+
+    for (const service of services) {
+      this.actions.service.createFromLegacyService({
+        data: service,
+      });
+      await this.stores.services.createServiceRequest._promise; // eslint-disable-line
+    }
+
+    this.isImportLegacyServicesExecuting = false;
+    this.isImportLegacyServicesCompleted = true;
+  }
+
+  // This is a mobx autorun which forces the user to login if not authenticated
+  _requireAuthenticatedUser = () => {
+    if (this.isTokenExpired) {
+      this._logout();
+    }
+
+    const { router } = this.stores;
+    const currentRoute = router.location.pathname;
+    if (!this.isLoggedIn
+      && !currentRoute.includes(this.BASE_ROUTE)) {
+      router.push(this.WELCOME_ROUTE);
+    } else if (this.isLoggedIn
+      && currentRoute === this.LOGOUT_ROUTE) {
+      this.actions.user.logout();
+      router.push(this.LOGIN_ROUTE);
+    } else if (this.isLoggedIn
+      && currentRoute.includes(this.BASE_ROUTE)
+      && (this.hasCompletedSignup
+        || this.hasCompletedSignup === null)) {
+      this.stores.router.push('/');
+    }
+  };
+
+  // Reactions
+  async _getUserData() {
+    if (this.isLoggedIn) {
+      const data = await this.getUserInfoRequest.execute()._promise;
+
+      // We need to set the beta flag for the SettingsStore
+      this.actions.settings.update({
+        settings: {
+          beta: data.beta,
+        },
+      });
+    }
+  }
+
+  // Helpers
+  _parseToken(authToken) {
+    try {
+      const decoded = jwt.decode(authToken);
+
+      return ({
+        id: decoded.userId,
+        tokenExpiry: moment.unix(decoded.exp).toISOString(),
+        authToken,
+      });
+    } catch (err) {
+      console.error('AccessToken Invalid');
+
+      return false;
+    }
+  }
+
+  _setUserData(authToken) {
+    const data = this._parseToken(authToken);
+    if (data.authToken) {
+      localStorage.setItem('authToken', data.authToken);
+
+      this.authToken = data.authToken;
+      this.id = data.id;
+    } else {
+      this.authToken = null;
+      this.id = null;
+    }
+  }
+}
diff --git a/src/stores/index.js b/src/stores/index.js
new file mode 100644
index 000000000..2d99e3952
--- /dev/null
+++ b/src/stores/index.js
@@ -0,0 +1,34 @@
+import AppStore from './AppStore';
+import UserStore from './UserStore';
+import SettingsStore from './SettingsStore';
+import ServicesStore from './ServicesStore';
+import RecipesStore from './RecipesStore';
+import RecipePreviewsStore from './RecipePreviewsStore';
+import UIStore from './UIStore';
+import PaymentStore from './PaymentStore';
+import NewsStore from './NewsStore';
+import RequestStore from './RequestStore';
+import GlobalErrorStore from './GlobalErrorStore';
+
+export default (api, actions, router) => {
+  const stores = {};
+  Object.assign(stores, {
+    router,
+    app: new AppStore(stores, api, actions),
+    user: new UserStore(stores, api, actions),
+    settings: new SettingsStore(stores, api, actions),
+    services: new ServicesStore(stores, api, actions),
+    recipes: new RecipesStore(stores, api, actions),
+    recipePreviews: new RecipePreviewsStore(stores, api, actions),
+    ui: new UIStore(stores, api, actions),
+    payment: new PaymentStore(stores, api, actions),
+    news: new NewsStore(stores, api, actions),
+    requests: new RequestStore(stores, api, actions),
+    globalError: new GlobalErrorStore(stores, api, actions),
+  });
+  // Initialize all stores
+  Object.keys(stores).forEach((name) => {
+    if (stores[name] && stores[name].initialize) stores[name].initialize();
+  });
+  return stores;
+};
diff --git a/src/stores/lib/CachedRequest.js b/src/stores/lib/CachedRequest.js
new file mode 100644
index 000000000..c0c3d40a1
--- /dev/null
+++ b/src/stores/lib/CachedRequest.js
@@ -0,0 +1,106 @@
+// @flow
+import { action } from 'mobx';
+import { isEqual, remove } from 'lodash';
+import Request from './Request';
+
+export default class CachedRequest extends Request {
+  _apiCalls = [];
+  _isInvalidated = true;
+
+  execute(...callArgs) {
+    // Do not continue if this request is already loading
+    if (this._isWaitingForResponse) return this;
+
+    // Very simple caching strategy -> only continue if the call / args changed
+    // or the request was invalidated manually from outside
+    const existingApiCall = this._findApiCall(callArgs);
+
+    // Invalidate if new or different api call will be done
+    if (existingApiCall && existingApiCall !== this._currentApiCall) {
+      this._isInvalidated = true;
+      this._currentApiCall = existingApiCall;
+    } else if (!existingApiCall) {
+      this._isInvalidated = true;
+      this._currentApiCall = this._addApiCall(callArgs);
+    }
+
+    // Do not continue if this request is not invalidated (see above)
+    if (!this._isInvalidated) return this;
+
+    // This timeout is necessary to avoid warnings from mobx
+    // regarding triggering actions as side-effect of getters
+    setTimeout(action(() => {
+      this.isExecuting = true;
+      // Apply the previous result from this call immediately (cached)
+      if (existingApiCall) {
+        this.result = existingApiCall.result;
+      }
+    }), 0);
+
+    // Issue api call & save it as promise that is handled to update the results of the operation
+    this._promise = new Promise((resolve, reject) => {
+      this._api[this._method](...callArgs)
+        .then((result) => {
+          setTimeout(action(() => {
+            this.result = result;
+            if (this._currentApiCall) this._currentApiCall.result = result;
+            this.isExecuting = false;
+            this.isError = false;
+            this.wasExecuted = true;
+            this._isInvalidated = false;
+            this._isWaitingForResponse = false;
+            this._triggerHooks();
+            resolve(result);
+          }), 1);
+          return result;
+        })
+        .catch(action((error) => {
+          setTimeout(action(() => {
+            this.error = error;
+            this.isExecuting = false;
+            this.isError = true;
+            this.wasExecuted = true;
+            this._isWaitingForResponse = false;
+            this._triggerHooks();
+            reject(error);
+          }), 1);
+        }));
+    });
+
+    this._isWaitingForResponse = true;
+    return this;
+  }
+
+  invalidate(options = { immediately: false }) {
+    this._isInvalidated = true;
+    if (options.immediately && this._currentApiCall) {
+      return this.execute(...this._currentApiCall.args);
+    }
+    return this;
+  }
+
+  patch(modify) {
+    return new Promise((resolve) => {
+      setTimeout(action(() => {
+        const override = modify(this.result);
+        if (override !== undefined) this.result = override;
+        if (this._currentApiCall) this._currentApiCall.result = this.result;
+        resolve(this);
+      }), 0);
+    });
+  }
+
+  removeCacheForCallWith(...args) {
+    remove(this._apiCalls, c => isEqual(c.args, args));
+  }
+
+  _addApiCall(args) {
+    const newCall = { args, result: null };
+    this._apiCalls.push(newCall);
+    return newCall;
+  }
+
+  _findApiCall(args) {
+    return this._apiCalls.find(c => isEqual(c.args, args));
+  }
+}
diff --git a/src/stores/lib/Reaction.js b/src/stores/lib/Reaction.js
new file mode 100644
index 000000000..e9bc26d81
--- /dev/null
+++ b/src/stores/lib/Reaction.js
@@ -0,0 +1,22 @@
+// @flow
+import { autorun } from 'mobx';
+
+export default class Reaction {
+  reaction;
+  hasBeenStarted;
+  dispose;
+
+  constructor(reaction) {
+    this.reaction = reaction;
+    this.hasBeenStarted = false;
+  }
+
+  start() {
+    this.dispose = autorun(() => this.reaction());
+    this.hasBeenStarted = true;
+  }
+
+  stop() {
+    if (this.hasBeenStarted) this.dispose();
+  }
+}
diff --git a/src/stores/lib/Request.js b/src/stores/lib/Request.js
new file mode 100644
index 000000000..4a6925cc5
--- /dev/null
+++ b/src/stores/lib/Request.js
@@ -0,0 +1,112 @@
+import { observable, action, computed } from 'mobx';
+import { isEqual } from 'lodash/fp';
+
+export default class Request {
+  static _hooks = [];
+
+  static registerHook(hook) {
+    Request._hooks.push(hook);
+  }
+
+  @observable result = null;
+  @observable error = null;
+  @observable isExecuting = false;
+  @observable isError = false;
+  @observable wasExecuted = false;
+
+  _promise = Promise;
+  _api = {};
+  _method = '';
+  _isWaitingForResponse = false;
+  _currentApiCall = null;
+
+  constructor(api, method) {
+    this._api = api;
+    this._method = method;
+  }
+
+  execute(...callArgs) {
+    // Do not continue if this request is already loading
+    if (this._isWaitingForResponse) return this;
+
+    if (!this._api[this._method]) {
+      throw new Error(`Missing method <${this._method}> on api object:`, this._api);
+    }
+
+    // This timeout is necessary to avoid warnings from mobx
+    // regarding triggering actions as side-effect of getters
+    setTimeout(action(() => {
+      this.isExecuting = true;
+    }), 0);
+
+    // Issue api call & save it as promise that is handled to update the results of the operation
+    this._promise = new Promise((resolve, reject) => {
+      this._api[this._method](...callArgs)
+        .then((result) => {
+          setTimeout(action(() => {
+            this.result = result;
+            if (this._currentApiCall) this._currentApiCall.result = result;
+            this.isExecuting = false;
+            this.isError = false;
+            this.wasExecuted = true;
+            this._isWaitingForResponse = false;
+            this._triggerHooks();
+            resolve(result);
+          }), 1);
+          return result;
+        })
+        .catch(action((error) => {
+          setTimeout(action(() => {
+            this.error = error;
+            this.isExecuting = false;
+            this.isError = true;
+            this.wasExecuted = true;
+            this._isWaitingForResponse = false;
+            this._triggerHooks();
+            reject(error);
+          }), 1);
+        }));
+    });
+
+    this._isWaitingForResponse = true;
+    this._currentApiCall = { args: callArgs, result: null };
+    return this;
+  }
+
+  reload() {
+    return this.execute(...this._currentApiCall.args);
+  }
+
+  isExecutingWithArgs(...args) {
+    return this.isExecuting && this._currentApiCall && isEqual(this._currentApiCall.args, args);
+  }
+
+  @computed get isExecutingFirstTime() {
+    return !this.wasExecuted && this.isExecuting;
+  }
+
+  then(...args) {
+    if (!this._promise) throw new Error('You have to call Request::execute before you can access it as promise');
+    return this._promise.then(...args);
+  }
+
+  catch(...args) {
+    if (!this._promise) throw new Error('You have to call Request::execute before you can access it as promise');
+    return this._promise.catch(...args);
+  }
+
+  _triggerHooks() {
+    Request._hooks.forEach(hook => hook(this));
+  }
+
+  reset() {
+    this.result = null;
+    this.isExecuting = false;
+    this.isError = false;
+    this.wasExecuted = false;
+    this._isWaitingForResponse = false;
+    this._promise = Promise;
+
+    return this;
+  }
+}
diff --git a/src/stores/lib/Store.js b/src/stores/lib/Store.js
new file mode 100644
index 000000000..873da7b37
--- /dev/null
+++ b/src/stores/lib/Store.js
@@ -0,0 +1,44 @@
+import { computed, observable } from 'mobx';
+import Reaction from './Reaction';
+
+export default class Store {
+  stores = {};
+  api = {};
+  actions = {};
+
+  _reactions = [];
+
+  // status implementation
+  @observable _status = null;
+  @computed get actionStatus() {
+    return this._status || [];
+  }
+  set actionStatus(status) {
+    this._status = status;
+  }
+
+  constructor(stores, api, actions) {
+    this.stores = stores;
+    this.api = api;
+    this.actions = actions;
+  }
+
+  registerReactions(reactions) {
+    reactions.forEach(reaction => this._reactions.push(new Reaction(reaction)));
+  }
+
+  setup() {}
+
+  initialize() {
+    this.setup();
+    this._reactions.forEach(reaction => reaction.start());
+  }
+
+  teardown() {
+    this._reactions.forEach(reaction => reaction.stop());
+  }
+
+  resetStatus() {
+    this._status = null;
+  }
+}
diff --git a/src/styles/animations.scss b/src/styles/animations.scss
new file mode 100644
index 000000000..1e49af207
--- /dev/null
+++ b/src/styles/animations.scss
@@ -0,0 +1,90 @@
+// FadeIn
+.fadeIn-appear {
+  opacity: 0.01;
+}
+
+.fadeIn-appear.fadeIn-appear-active {
+  opacity: 1;
+  transition: opacity 0.5s ease-out;
+}
+
+.fadeIn-enter {
+  opacity: 0.01;
+  transition: opacity 0.5s ease-out;
+}
+
+.fadeIn-leave {
+  opacity: 1;
+}
+
+.fadeIn-leave.fadeIn-leave-active {
+  opacity: 0.01;
+  transition: opacity 300ms ease-in;
+}
+
+// FadeIn Fast
+.fadeIn-fast-appear {
+  opacity: 0.01;
+}
+
+.fadeIn-fast-appear.fadeIn-fast-appear-active {
+  opacity: 1;
+  transition: opacity 0.25s ease-out;
+}
+
+.fadeIn-fast-enter {
+  opacity: 0.01;
+  transition: opacity 0.25s ease-out;
+}
+
+.fadeIn-fast-leave {
+  opacity: 1;
+}
+
+.fadeIn-fast-leave.fadeIn-fast-leave-active {
+  opacity: 0.01;
+  transition: opacity 0.25s ease-in;
+}
+
+// Slide down
+.slideDown-appear {
+  max-height: 0;
+  overflow-y: hidden;
+}
+
+.slideDown-appear.slideDown-appear-active {
+  max-height: 500px;
+  transition: max-height 0.5s ease-out;
+}
+
+.slideDown-enter {
+  max-height: 0;
+  transition: max-height 0.5s ease-out;
+}
+
+// Slide up
+.slideUp-appear {
+  transform: translateY(20px);
+  opacity: 0;
+}
+
+.slideUp-appear.slideUp-appear-active {
+  transform: translateY(0px);
+  opacity: 1;
+  transition: all 0.3s ease-out;
+}
+
+.slideUp-enter {
+  transform: translateY(20px);
+  opacity: 0;
+  transition: all 0.3s ease-out;
+}
+
+.slideUp-leave {
+  opacity: 1;
+}
+
+.slideUp-leave.slideUp-leave-active {
+  opacity: 0.01;
+  transition: opacity 300ms ease-in;
+}
diff --git a/src/styles/auth.scss b/src/styles/auth.scss
new file mode 100644
index 000000000..9ad71867c
--- /dev/null
+++ b/src/styles/auth.scss
@@ -0,0 +1,144 @@
+@import './config.scss';
+
+.auth {
+  display: flex;
+  justify-content: center;
+  background: $theme-brand-primary;
+
+  .auth__layout {
+    width: 100%;
+    &>div>span {
+      width: 100%;
+    }
+    // display: flex;
+    // align-items: center;
+    // justify-content: center;
+    // flex-direction: column;
+
+    // @media only screen and (max-height : 700px) {
+    //   margin: 100px 0;
+    // }
+
+    &>div {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      &>span {
+        position: absolute;
+      }
+    }
+  }
+
+  .auth__container {
+    position: relative;
+    width: 350px;
+    height: auto;
+    margin: 40px auto 0 auto;
+    background: #FFF;
+    // padding: 20px;
+    border-radius: $theme-border-radius;
+    box-shadow: 0 0 50px rgba(black, 0.2);
+
+    &.auth__container--signup {
+      width: 450px;
+      // margin-left: auto;
+      // margin-right: auto;
+    }
+  }
+
+  .auth__logo {
+    display: block;
+    width: 150px;
+    height: auto;
+    margin: -105px auto 20px auto;
+    border-radius: $theme-border-radius;
+
+    &.auth__logo--sm {
+      border: 4px solid #FFF;
+      box-shadow: 0 0 6px rgba(black, 0.5);
+      border-radius: 100%;
+    }
+  }
+
+  .auth__form {
+    padding: 20px;
+
+    h1 {
+      text-align: center;
+    }
+  }
+
+  .auth__button {
+    width: 100%;
+
+    &.auth__button--skip {
+      margin: 10px auto 0;
+    }
+  }
+
+  .auth__links {
+    padding: 20px;
+    background: $theme-gray-lighter;
+    border-bottom-left-radius: $theme-border-radius;
+    border-bottom-right-radius: $theme-border-radius;
+
+    a {
+      display: block;
+      text-align: center;
+      color: $theme-gray;
+      margin-bottom: 8px;
+
+      &:last-of-type {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  .auth__adlk {
+    position: absolute;
+    right: 25px;
+    bottom: 15px;
+
+    img {
+      width: 65px;
+    }
+  }
+
+  .auth__letter {
+    margin-bottom: 30px;
+  }
+
+  .scroll-container {
+    z-index: 10;
+  }
+
+  .info-bar {
+    position: absolute;
+  }
+
+  &__scroll-container {
+    overflow: scroll;
+    width: 100%;
+    max-height: 100vh;
+    padding: 80px 0;
+  }
+
+  .available-services {
+    margin-bottom: 15px;
+  }
+
+  .unavailable-services {
+    margin: 15px 0;
+
+    p {
+      text-transform: capitalize;
+    }
+  }
+
+  .legal {
+    text-align: center;
+    margin-top: 20px;
+    color: $theme-gray-light;
+  }
+}
diff --git a/src/styles/badge.scss b/src/styles/badge.scss
new file mode 100644
index 000000000..d7dfaf783
--- /dev/null
+++ b/src/styles/badge.scss
@@ -0,0 +1,15 @@
+@import './config.scss';
+
+.badge {
+  font-size: 14px;
+  display: inline-block;
+  padding: 5px 10px;
+  border-radius: $theme-border-radius;
+  background: $theme-gray-lighter;
+
+  &.badge--primary,
+  &.badge--premium {
+    background: $theme-brand-primary;
+    color: #FFF;
+  }
+}
diff --git a/src/styles/button.scss b/src/styles/button.scss
new file mode 100644
index 000000000..c2dd91293
--- /dev/null
+++ b/src/styles/button.scss
@@ -0,0 +1,74 @@
+@import './config.scss';
+
+.franz-form {
+  .franz-form__button {
+    position: relative;
+    background: $theme-brand-primary;
+    display: block;
+    padding: 10px 20px;
+    color: #FFF;
+    border-radius: 3px;
+    transition: background 0.5s;
+    text-align: center;
+
+    &:hover {
+      background: darken($theme-brand-primary, 5%);
+    }
+
+    &:active {
+      transition: none;
+      background: lighten($theme-brand-primary, 5%);
+    }
+
+    &:disabled {
+      opacity: 0.2;
+    }
+
+    &.franz-form__button--secondary {
+      background: $theme-gray-lighter;
+      color: $theme-gray;
+
+      &:hover {
+        background: darken($theme-gray-lighter, 5%);
+      }
+
+      &:active {
+        background: lighten($theme-gray-lighter, 5%);
+      }
+    }
+
+    &.franz-form__button--danger {
+      background: $theme-brand-danger;
+
+      &:hover {
+        background: darken($theme-brand-danger, 5%);
+      }
+
+      &:active {
+        background: lighten($theme-brand-danger, 5%);
+      }
+    }
+
+    &.franz-form__button--inverted {
+      background: none;
+      padding: 10px 20px;
+      border: 2px solid $theme-brand-primary;
+      color: $theme-brand-primary;
+      transition: background 0.5s, color 0.5s;
+
+      &:hover {
+        background: darken($theme-brand-primary, 5%);
+        color: #FFF;
+      }
+    }
+
+    .loader {
+      position: relative;
+      width: 20px;
+      height: 12px;
+      z-index: 9999;
+      display: inline-block;
+      margin-right: 5px;
+    }
+  }
+}
diff --git a/src/styles/colors.scss b/src/styles/colors.scss
new file mode 100644
index 000000000..5d8302c28
--- /dev/null
+++ b/src/styles/colors.scss
@@ -0,0 +1,22 @@
+$theme-brand-primary: #3498db;
+$theme-brand-success: #5cb85c;
+$theme-brand-info: #5bc0de;
+$theme-brand-warning: #FF9F00;
+$theme-brand-danger: #d9534f;
+
+$theme-gray-dark: #373a3c;
+$theme-gray: #55595c;
+$theme-gray-light: #818a91;
+$theme-gray-lighter: #eceeef;
+$theme-gray-lightest: #f7f7f9;
+
+$theme-border-radius: 6px;
+$theme-border-radius-small: 3px;
+
+$theme-sidebar-width: 68px;
+
+$theme-text-color: $theme-gray-dark;
+
+$theme-transition-time: 0.5s;
+
+$theme-inset-shadow: inset 0 2px 5px rgba(0,0,0,0.03);
diff --git a/src/styles/config.scss b/src/styles/config.scss
new file mode 100644
index 000000000..7aa2d674f
--- /dev/null
+++ b/src/styles/config.scss
@@ -0,0 +1 @@
+@import './colors.scss';
diff --git a/src/styles/content-tabs.scss b/src/styles/content-tabs.scss
new file mode 100644
index 000000000..aa3c8594b
--- /dev/null
+++ b/src/styles/content-tabs.scss
@@ -0,0 +1,52 @@
+@import './config.scss';
+
+.content-tabs {
+  .content-tabs__tabs {
+    display: flex;
+    border-top-left-radius: $theme-border-radius-small;
+    border-top-right-radius: $theme-border-radius-small;
+    overflow: hidden;
+
+    .content-tabs__item {
+      padding: 10px;
+      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;
+
+      &.is-active {
+        background: $theme-brand-primary;
+        color: #FFF;
+        border-bottom: 1px solid $theme-brand-primary;
+        box-shadow: none;
+      }
+    }
+  }
+
+  .content-tabs__content {
+    padding: 20px 20px;
+    border-bottom-left-radius: $theme-border-radius-small;
+    border-bottom-right-radius: $theme-border-radius-small;
+    background: $theme-gray-lightest;
+
+    .content-tabs__item {
+      top: 0;
+      display: none;
+
+      &.is-active {
+        display: block;
+      }
+    }
+
+    .franz-form__input-wrapper {
+      background: #FFF;
+    }
+
+    .franz-form__field:last-of-type {
+      margin-bottom: 0;
+    }
+  }
+}
diff --git a/src/styles/fonts.scss b/src/styles/fonts.scss
new file mode 100644
index 000000000..bd96ea867
--- /dev/null
+++ b/src/styles/fonts.scss
@@ -0,0 +1,44 @@
+@import './config.scss';
+// @import './node_modules/mdi/scss/materialdesignicons.scss';
+
+@font-face {
+  font-family: 'Open Sans';
+  src:  url('../assets/fonts/OpenSans-Light.ttf');
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  src:  url('../assets/fonts/OpenSans-Regular.ttf');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  src:  url('../assets/fonts/OpenSans-Bold.ttf');
+  font-weight: bold;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  src:  url('../assets/fonts/OpenSans-BoldItalic.ttf');
+  font-weight: bold;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  src:  url('../assets/fonts/OpenSans-ExtraBold.ttf');
+  font-weight: 800;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  src:  url('../assets/fonts/OpenSans-ExtraBoldItalic.ttf');
+  font-weight: 800;
+  font-style: italic;
+}
diff --git a/src/styles/info-bar.scss b/src/styles/info-bar.scss
new file mode 100644
index 000000000..c30c951ee
--- /dev/null
+++ b/src/styles/info-bar.scss
@@ -0,0 +1,79 @@
+@import './config.scss';
+
+.info-bar {
+  width: 100%;
+  height: 50px;
+  background: $theme-brand-primary;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 20px;
+  position: relative;
+  // bottom: 0;
+  z-index: 100;
+  box-shadow: 0 0 8px rgba(black, 0.2);
+
+  .info-bar__content {
+    height: auto;
+
+    .mdi {
+      margin-right: 5px;
+    }
+  }
+
+  .info-bar__close {
+    position: absolute;
+    right: 10px;
+    color: #FFF;
+  }
+
+  .info-bar__cta {
+    color: #FFF;
+    padding: 3px 8px;
+    border-radius: $theme-border-radius-small;
+    border-color: #FFF;
+    border-width: 2px;
+    border-style: solid;
+    margin-left: 15px;
+
+    .loader {
+      position: relative;
+      width: 20px;
+      height: 12px;
+      z-index: 9999;
+      display: inline-block;
+      margin-right: 5px;
+    }
+  }
+
+  &.info-bar--bottom {
+    order: 10;
+  }
+
+  &.info-bar--primary {
+    background: $theme-brand-primary;
+    color: #FFF;
+
+    a {
+      color: #FFF;
+    }
+  }
+
+  &.info-bar--warning {
+    background: $theme-brand-warning;
+    color: #FFF;
+
+    a {
+      color: #FFF;
+    }
+  }
+
+  &.info-bar--danger {
+    background: $theme-brand-danger;
+    color: #FFF;
+
+    a {
+      color: #FFF;
+    }
+  }
+}
diff --git a/src/styles/infobox.scss b/src/styles/infobox.scss
new file mode 100644
index 000000000..ad363314d
--- /dev/null
+++ b/src/styles/infobox.scss
@@ -0,0 +1,61 @@
+@import './config.scss';
+
+.infobox {
+  height: auto;
+  padding: 15px 20px;
+  margin-bottom: 30px;
+  border-radius: $theme-border-radius-small;
+  display: flex;
+  align-items: center;
+
+  a {
+    color: #FFF;
+  }
+
+  .infobox__content {
+    flex: 1;
+  }
+
+  &.infobox--success {
+    background: $theme-brand-success;
+    color: #FFF;
+  }
+
+  &.infobox--primary {
+    background: $theme-brand-primary;
+    color: #FFF;
+  }
+
+  &.infobox--danger {
+    background: $theme-brand-danger;
+    color: #FFF;
+  }
+
+  .mdi {
+    margin-right: 10px;
+  }
+
+  .infobox__cta {
+    color: #FFF;
+    padding: 3px 8px;
+    border-radius: $theme-border-radius-small;
+    border-color: #FFF;
+    border-width: 2px;
+    border-style: solid;
+    margin-left: 15px;
+
+    .loader {
+      position: relative;
+      width: 20px;
+      height: 12px;
+      z-index: 9999;
+      display: inline-block;
+      margin-right: 5px;
+    }
+  }
+
+  .infobox__delete {
+    color: #FFF;
+    margin-right: 0;
+  }
+}
diff --git a/src/styles/input.scss b/src/styles/input.scss
new file mode 100644
index 000000000..814dce5f8
--- /dev/null
+++ b/src/styles/input.scss
@@ -0,0 +1,99 @@
+@import './config.scss';
+@import './mixins.scss';
+
+.franz-form {
+  .franz-form__field {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    margin-bottom: 20px;
+
+    &.has-error {
+      .franz-form__input-wrapper {
+        border-color: $theme-brand-danger;
+      }
+
+      .franz-form__input-modifier {
+        border-color: $theme-brand-danger;
+      }
+    }
+  }
+
+  .franz-form__label {
+    @include formLabel();
+  }
+
+  .franz-form__error {
+    color: $theme-brand-danger;
+    margin-top: 10px;
+    order: 2;
+  }
+
+  .franz-form__input-wrapper {
+    display: flex;
+    width: 100%;
+    order: 1;
+    border-radius: $theme-border-radius-small;
+    background: $theme-gray-lightest;
+    border: 1px solid $theme-gray-lighter;
+    flex-wrap: wrap;
+  }
+
+  .franz-form__input {
+    flex: 1;
+    border: 0;
+    background: none;
+    width: 100%;
+    padding: 8px;
+    // font-size: 18px;
+    color: $theme-gray;
+  }
+
+  .franz-form__input-prefix,
+  .franz-form__input-suffix {
+    padding: 0 10px;
+    background: $theme-gray-lighter;
+    color: $theme-gray-light;
+    line-height: 35px;
+  }
+
+  .franz-form__input-modifier {
+    padding: 0 20px;
+    border-left: 1px solid $theme-gray-lighter;
+    color: $theme-gray-light;
+    font-size: 20px;
+  }
+
+  .franz-form__password-score {
+    background: $theme-gray-lighter;
+    height: 5px;
+    flex-basis: 100%;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+
+    meter {
+      width: 100%;
+      height: 100%;
+      display: block;
+      border-bottom-left-radius: 3px;
+      border-bottom-right-radius: 3px;
+      overflow: hidden;
+
+      &::-webkit-meter-bar {
+        background: none;
+      }
+
+      &::-webkit-meter-even-less-good-value {
+        background: $theme-brand-danger;
+      }
+
+      &::-webkit-meter-suboptimum-value {
+        background: $theme-brand-warning;
+      }
+
+      &::-webkit-meter-optimum-value {
+        background: $theme-brand-success;
+      }
+    }
+  }
+}
diff --git a/src/styles/layout.scss b/src/styles/layout.scss
new file mode 100644
index 000000000..d87df2684
--- /dev/null
+++ b/src/styles/layout.scss
@@ -0,0 +1,141 @@
+@import './config.scss';
+
+html {
+  overflow: hidden;
+}
+
+.app {
+  display: flex;
+  flex-direction: row;
+
+  .app__service {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+  }
+}
+
+.window-draggable {
+  position: absolute;
+  width: 100%;
+  top: 0px;
+  left: 0px;
+  height: 35px;
+  pointer-events: none;
+  -webkit-app-region: drag;
+  z-index: 9999;
+}
+
+.darwin {
+  .sidebar {
+    padding-top: 23px;
+  }
+}
+
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: $theme-sidebar-width;
+  background: $theme-gray-lightest;
+  box-shadow: 1px 0 10px rgba(0,0,0,0.08);
+  z-index: 200;
+  text-align: center;
+  color: $theme-text-color;
+
+  .sidebar__add-service {
+    width: 32px;
+    height: 32px;
+    background: $theme-gray-lighter;
+    border-radius: $theme-border-radius-small;
+    margin: 10px auto;
+    color: $theme-gray-light;
+  }
+
+  .sidebar__settings-button {
+    height: auto;
+    padding: 20px 0;
+    font-size: 12px;
+    position: relative;
+
+    .emoji {
+      position: absolute;
+      top: 18px;
+      right: 12px;
+
+      img {
+        width: 18px;
+      }
+    }
+  }
+
+  .sidebar__logo {
+    width: 40px;
+    height: auto;
+  }
+
+  & > div {
+    display: flex;
+    overflow-y: scroll;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+}
+
+.grid {
+  .grid__row {
+    display: flex;
+    flex-direction: row;
+
+    &>* {
+      margin-right: 20px;
+    }
+
+    & :last-child {
+      margin-right: 0;
+    }
+  }
+}
+
+.app-loader {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .app-loader__title {
+    color: #FFF;
+    font-size: 40px;
+  }
+
+  &>span {
+    height: auto;
+  }
+}
+
+.dev-warning {
+  display: none;
+}
+
+.isDevMode {
+  .dev-warning {
+    display: block;
+    position: fixed;
+    background: $theme-brand-warning;
+    width: auto;
+    height: auto;
+    top: 5px;
+    right: 5px;
+    padding: 4px;
+    font-size: 10px;
+    color: #FFF;
+    z-index: 999999999;
+    border-radius: 3px;
+    transition: opacity 0.5s ease;
+
+    &:hover {
+      opacity: 0;
+    }
+  }
+}
diff --git a/src/styles/main.scss b/src/styles/main.scss
new file mode 100644
index 000000000..8afc86f98
--- /dev/null
+++ b/src/styles/main.scss
@@ -0,0 +1,36 @@
+$mdi-font-path: '../node_modules/mdi/fonts';
+@if $env == development {
+  $mdi-font-path: '../../node_modules/mdi/fonts';
+}
+
+@import './node_modules/mdi/scss/materialdesignicons.scss';
+
+// modules
+@import './reset.scss';
+@import './util.scss';
+@import './layout.scss';
+@import './tabs.scss';
+@import './services.scss';
+@import './settings.scss';
+@import './service-table.scss';
+@import './recipes.scss';
+@import './fonts.scss';
+@import './type.scss';
+@import './welcome.scss';
+@import './auth.scss';
+@import './tooltip.scss';
+@import './info-bar.scss';
+@import './animations.scss';
+@import './infobox.scss';
+@import './badge.scss';
+@import './subscription.scss';
+@import './subscription-popup.scss';
+@import './content-tabs.scss';
+
+// form
+@import './input.scss';
+@import './radio.scss';
+@import './toggle.scss';
+@import './button.scss';
+@import './searchInput.scss';
+@import './select.scss';
diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss
new file mode 100644
index 000000000..c9b1bc988
--- /dev/null
+++ b/src/styles/mixins.scss
@@ -0,0 +1,9 @@
+@import './config.scss';
+
+@mixin formLabel {
+  width: 100%;
+  color: $theme-gray-light;
+  display: block;
+  margin-bottom: 5px;
+  order: 0;
+}
diff --git a/src/styles/radio.scss b/src/styles/radio.scss
new file mode 100644
index 000000000..644478cd6
--- /dev/null
+++ b/src/styles/radio.scss
@@ -0,0 +1,34 @@
+@import './config.scss';
+
+.franz-form {
+  .franz-form__radio-wrapper {
+    display: flex;
+  }
+
+  .franz-form__radio {
+    // background: $theme-gray-lightest;
+    border: 2px solid $theme-gray-lighter;
+    color: $theme-gray;
+    padding: 11px;
+    margin-right: 20px;
+    text-align: center;
+    border-radius: $theme-border-radius-small;
+    flex: 1;
+    box-shadow: $theme-inset-shadow;
+    transition: background $theme-transition-time;
+
+    &:last-of-type {
+      margin-right: 0;
+    }
+
+    &.is-selected {
+      border: 2px solid $theme-brand-primary;
+      background: #FFF;
+      color: $theme-brand-primary;
+    }
+
+    input {
+      display: none;
+    }
+  }
+}
diff --git a/src/styles/recipes.scss b/src/styles/recipes.scss
new file mode 100644
index 000000000..017aa4fe2
--- /dev/null
+++ b/src/styles/recipes.scss
@@ -0,0 +1,72 @@
+@import './config.scss';
+
+.recipes {
+  .recipes__list {
+    display: flex;
+    flex-flow: row wrap;
+    align-content: flex-start;
+    min-height: 70%;
+    height: auto;
+
+    &.recipes__list--disabled {
+      opacity: 0.3;
+      filter: grayscale(100%);
+      pointer-events: none;
+    }
+  }
+
+  .recipes__navigation {
+    height: auto;
+    margin-bottom: 35px;
+
+    .badge {
+      margin-right: 10px;
+    }
+
+    &.recipes__navigation--disabled {
+      opacity: 0.3;
+      filter: grayscale(100%);
+      pointer-events: none;
+    }
+  }
+}
+
+.recipe-teaser {
+  position: relative;
+  width: calc(25% - 20px);
+  height: 120px;
+  margin: 0 20px 20px 0;
+  border-radius: $theme-border-radius;
+  background-color: $theme-gray-lightest;
+  transition: background $theme-transition-time;
+  overflow: hidden;
+
+  &:hover {
+    background-color: $theme-gray-lighter;
+  }
+
+  .recipe-teaser__icon {
+    width: 50px;
+    margin-bottom: 10px;
+  }
+
+  .recipe-teaser__label {
+    display: block;
+  }
+
+  h2 {
+    z-index: 10;
+  }
+
+  &__dev-badge {
+    position: absolute;
+    top: 5px;
+    right: -13px;
+    width: 50px;
+    background: $theme-brand-warning;
+    color: #FFF;
+    font-size: 10px;
+    transform: rotateZ(45deg);
+    box-shadow: 0 0 4px rgba(black, 0.2);
+  }
+}
diff --git a/src/styles/reset.scss b/src/styles/reset.scss
new file mode 100644
index 000000000..21763f44f
--- /dev/null
+++ b/src/styles/reset.scss
@@ -0,0 +1,95 @@
+@import './config.scss';
+
+/* ============ RESET =========== */
+/* http://meyerweb.com/eric/tools/css/reset */
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol, ul {
+  list-style: none;
+}
+blockquote, q {
+  quotes: none;
+}
+blockquote:before, blockquote:after, q:before, q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+/* Buttons should not have any special style applied by default */
+button {
+  background: none;
+  border: none;
+  padding: 0;
+}
+
+button:focus {
+  outline: 0;
+}
+
+html {
+  /* base for rem / 1rem = 10px */
+        font-size: 62.5%;
+  font-family: 'Open Sans';
+}
+
+body {
+  /* default font size = 14px */
+  font-size: 1.4rem;
+  color: $theme-gray-dark;
+}
+
+* {
+  -webkit-font-smoothing: antialiased;
+  box-sizing: border-box;
+  font-size: 1.4rem;
+  font-family: 'Open Sans';
+  -webkit-user-select: none;
+}
+
+html, body, div {
+  height: 100%;
+  background: none;
+  box-sizing: border-box;
+}
+
+*:focus {
+  outline: none;
+}
+
+img {
+  pointer-events: none;
+}
+
+a {
+  cursor: default;
+}
diff --git a/src/styles/searchInput.scss b/src/styles/searchInput.scss
new file mode 100644
index 000000000..28ff09fc4
--- /dev/null
+++ b/src/styles/searchInput.scss
@@ -0,0 +1,4 @@
+.search-input {
+  width: 100%;
+  height: auto;
+}
diff --git a/src/styles/select.scss b/src/styles/select.scss
new file mode 100644
index 000000000..965b4321a
--- /dev/null
+++ b/src/styles/select.scss
@@ -0,0 +1,19 @@
+@import './config.scss';
+@import './mixins.scss';
+
+$toggle: "PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0ic3ZnMiIKICAgdmlld0JveD0iMCAwIDM1Ljk3MDk4MyAyMy4wOTE1MTgiCiAgIGhlaWdodD0iNi41MTY5Mzk2bW0iCiAgIHdpZHRoPSIxMC4xNTE4MTFtbSI+CiAgPGRlZnMKICAgICBpZD0iZGVmczQiIC8+CiAgPG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhNyI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGU+PC9kYzp0aXRsZT4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPGcKICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjAyLjAxNDUxLC00MDcuMTIyMjUpIgogICAgIGlkPSJsYXllcjEiPgogICAgPHRleHQKICAgICAgIGlkPSJ0ZXh0MzMzNiIKICAgICAgIHk9IjYyOS41MDUwNyIKICAgICAgIHg9IjI5MS40Mjg1NiIKICAgICAgIHN0eWxlPSJmb250LXN0eWxlOm5vcm1hbDtmb250LXdlaWdodDpub3JtYWw7Zm9udC1zaXplOjQwcHg7bGluZS1oZWlnaHQ6MTI1JTtmb250LWZhbWlseTpzYW5zLXNlcmlmO2xldHRlci1zcGFjaW5nOjBweDt3b3JkLXNwYWNpbmc6MHB4O2ZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZTtzdHJva2Utd2lkdGg6MXB4O3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO3N0cm9rZS1vcGFjaXR5OjEiCiAgICAgICB4bWw6c3BhY2U9InByZXNlcnZlIj48dHNwYW4KICAgICAgICAgeT0iNjI5LjUwNTA3IgogICAgICAgICB4PSIyOTEuNDI4NTYiCiAgICAgICAgIGlkPSJ0c3BhbjMzMzgiPjwvdHNwYW4+PC90ZXh0PgogICAgPGcKICAgICAgIGlkPSJ0ZXh0MzM0MCIKICAgICAgIHN0eWxlPSJmb250LXN0eWxlOm5vcm1hbDtmb250LXZhcmlhbnQ6bm9ybWFsO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LXN0cmV0Y2g6bm9ybWFsO2ZvbnQtc2l6ZTo0MHB4O2xpbmUtaGVpZ2h0OjEyNSU7Zm9udC1mYW1pbHk6Rm9udEF3ZXNvbWU7LWlua3NjYXBlLWZvbnQtc3BlY2lmaWNhdGlvbjpGb250QXdlc29tZTtsZXR0ZXItc3BhY2luZzowcHg7d29yZC1zcGFjaW5nOjBweDtmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjFweDtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJva2Utb3BhY2l0eToxIj4KICAgICAgPHBhdGgKICAgICAgICAgaWQ9InBhdGgzMzQ1IgogICAgICAgICBzdHlsZT0iZmlsbDojMzMzMzMzO2ZpbGwtb3BhY2l0eToxIgogICAgICAgICBkPSJtIDIzNy41NjY5Niw0MTMuMjU1MDcgYyAwLjU1ODA0LC0wLjU1ODA0IDAuNTU4MDQsLTEuNDczMjIgMCwtMi4wMzEyNSBsIC0zLjcwNTM1LC0zLjY4MzA0IGMgLTAuNTU4MDQsLTAuNTU4MDQgLTEuNDUwOSwtMC41NTgwNCAtMi4wMDg5MywwIEwgMjIwLDQxOS4zOTM0NiAyMDguMTQ3MzIsNDA3LjU0MDc4IGMgLTAuNTU4MDMsLTAuNTU4MDQgLTEuNDUwODksLTAuNTU4MDQgLTIuMDA4OTMsMCBsIC0zLjcwNTM1LDMuNjgzMDQgYyAtMC41NTgwNCwwLjU1ODAzIC0wLjU1ODA0LDEuNDczMjEgMCwyLjAzMTI1IGwgMTYuNTYyNSwxNi41NDAxNyBjIDAuNTU4MDMsMC41NTgwNCAxLjQ1MDg5LDAuNTU4MDQgMi4wMDg5MiwwIGwgMTYuNTYyNSwtMTYuNTQwMTcgeiIgLz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPgo=";
+
+.franz-form {
+  .franz-form__select {
+    -webkit-appearance: none;
+    min-width: 200px;
+    padding: 10px;
+    background-color: $theme-gray-lightest;
+    background-position: right center;
+    background-repeat: no-repeat;
+    background-size: 1ex;
+    background-origin: content-box;
+    background-image: url(data:image/svg+xml;base64,#{$toggle});
+    border: 1px solid $theme-gray-lighter;
+  }
+}
diff --git a/src/styles/service-table.scss b/src/styles/service-table.scss
new file mode 100644
index 000000000..66d5ac941
--- /dev/null
+++ b/src/styles/service-table.scss
@@ -0,0 +1,62 @@
+@import './config.scss';
+
+.service-table {
+  width: 100%;
+
+  .service-table__toggle {
+    width: 60px;
+
+    .franz-form__field {
+      margin-bottom: 0;
+    }
+  }
+
+  .service-table__icon {
+    width: 35px;
+
+    &.has-custom-icon {
+      border-radius: $theme-border-radius;
+      border: 1px solid $theme-gray-lighter;
+      width: 37px;
+    }
+  }
+
+  .service-table__column-icon {
+    width: 40px;
+  }
+
+  .service-table__column-action {
+    width: 40px
+  }
+
+  .service-table__column-info {
+    width: 40px;
+
+    .mdi {
+      display: block;
+      font-size: 18px;
+      color: $theme-gray-light;
+    }
+  }
+
+  .service-table__row {
+    border-bottom: 1px solid $theme-gray-lightest;
+
+    &:hover {
+      background: $theme-gray-lightest;
+    }
+
+    &.service-table__row--disabled {
+      color: $theme-gray-light;
+
+      .service-table__column-icon {
+        filter: grayscale(100%);
+        opacity: 0.5;
+      }
+    }
+  }
+
+  td {
+    padding: 10px;
+  }
+}
diff --git a/src/styles/services.scss b/src/styles/services.scss
new file mode 100644
index 000000000..3347ea9d7
--- /dev/null
+++ b/src/styles/services.scss
@@ -0,0 +1,60 @@
+@import './config.scss';
+
+.services {
+  flex: 1;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  background: #FFF;
+  order: 5;
+
+  .services__webview {
+    position: absolute;
+    width: 100%;
+    top: 0;
+    left: 0;
+    z-index: 0;
+
+    webview {
+      display: inline-flex;
+      width: 0px;
+      height: 0px;
+    }
+
+    &.is-active {
+      z-index: 100;
+
+      webview {
+        flex: 0 1;
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    &--force-repaint {
+      webview {
+        z-index: 5;
+      }
+    }
+  }
+
+  .services__no-service {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    background: $theme-gray-lighter;
+
+    h1 {
+      margin: 25px 0 40px;
+      color: $theme-gray-dark;
+    }
+
+    a.button {
+      margin-top: 40px;
+      // color: #FFF;
+      // border-color: #FFF;
+    }
+  }
+}
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
new file mode 100644
index 000000000..9b19deb4e
--- /dev/null
+++ b/src/styles/settings.scss
@@ -0,0 +1,392 @@
+@import './config.scss';
+
+%headline {
+  font-size: 20px;
+  font-weight: 400;
+  letter-spacing: -1px;
+  color: $theme-gray-light;
+
+  a {
+    color: $theme-gray-light;
+  }
+}
+
+.settings-wrapper {
+  background: rgba(black, 0.5);
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 9998;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 25px;
+
+  .settings-wrapper__action {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+  }
+}
+
+.settings {
+  position: relative;
+  display: flex;
+  height: 100%;
+  width: 100%;
+  max-width: 900px;
+  min-height: 400px;
+  max-height: 600px;
+  z-index: 9999;
+  background: #FFF;
+  border-radius: $theme-border-radius;
+  box-shadow: 0 20px 50px rgba(black, 0.5);
+  overflow: hidden;
+  // margin-top: -10%;
+
+  .settings__main {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    height: auto;
+  }
+
+  .settings__header {
+    display: flex;
+    align-items: center;
+    width: calc(100% - 60px);
+    height: 50px;
+    padding: 0 40px;
+    background: $theme-gray-lighter;
+
+    h1 {
+      @extend %headline;
+      margin: 0;
+    }
+
+    .settings__header-item {
+      @extend %headline;
+    }
+
+    .separator {
+      height: 100%;
+      margin: 0 15px;
+      border-right: 1px solid darken($theme-gray-lighter, 10%);
+      transform: skew(15deg) rotate(2deg);
+    }
+
+    .mdi {
+      color: $theme-gray-light;
+    }
+  }
+
+  .settings__body {
+    flex: 1;
+    padding: 25px 15px 15px 25px;
+    margin: 15px;
+    overflow-y: scroll;
+
+    &::-webkit-scrollbar {
+      width: 8px;
+    }
+
+    /* Track */
+    &::-webkit-scrollbar-track {
+      -webkit-border-radius: 10px;
+      border-radius: 10px;
+      background: none;
+    }
+
+    /* Handle */
+    &::-webkit-scrollbar-thumb {
+      -webkit-border-radius: 10px;
+      border-radius: 10px;
+      background: $theme-gray-lighter;
+    }
+
+    &::-webkit-scrollbar-thumb:window-inactive {
+        background: none;
+    }
+  }
+
+  .settings__close {
+    position: absolute;
+    right: 0;
+    background: $theme-gray-lighter;
+    height: 50px;
+    padding: 0 20px;
+    font-size: 20px;
+    border-left: 1px solid darken($theme-gray-lighter, 5%);
+    color: $theme-gray-light;
+    transition: background $theme-transition-time;
+
+    &:hover {
+      background: darken($theme-gray-lighter, 5%);
+    }
+  }
+
+  .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%);
+    }
+
+    input {
+      padding-left: 10px;
+      background: none;
+      border: 0;
+      flex: 1;
+      @extend %headline;
+    }
+  }
+
+  .settings__options {
+    margin-top: 30px;
+  }
+
+  .settings__message {
+    display: flex;
+    margin-top: 40px;
+    padding-top: 15px;
+    border-top: 1px solid $theme-gray-lighter;
+    color: $theme-gray-light;
+
+    .mdi {
+      color: $theme-gray-light;
+      font-size: 20px;
+      margin-right: 10px;
+    }
+  }
+
+  .settings__indirect-message-help {
+    margin: -10px 0 20px 55px;;
+    font-size: 12px;
+    color: $theme-gray-light;
+
+    &:last-of-type {
+      margin-bottom: 30px;
+    }
+  }
+
+  .settings__controls {
+    display: flex;
+    justify-content: space-between;
+    padding: 10px 20px;
+    height: auto;
+    background: $theme-gray-lighter;
+
+    .franz-form__button {
+      &[type='submit'] {
+        margin-left: auto;
+      }
+
+      &.franz-form__button--secondary {
+        background: $theme-gray-light;
+      }
+    }
+  }
+
+  .settings__delete-button {
+    right: 0;
+  }
+
+  .settings__empty-state {
+    width: 100%;
+    height: auto;
+    min-height: 70%;
+    text-align: center;
+    align-self: center;
+    // margin-top: -20px;
+    align-items: center;
+
+    a.button {
+      margin-top: 40px;
+    }
+  }
+
+  .account {
+    height: auto;
+    // padding: 20px;
+
+    .account__box {
+      background: $theme-gray-lightest;
+      border-radius: $theme-border-radius;
+      padding: 20px;
+      margin-bottom: 40px;
+      align-items: center;
+
+      &.account__box--flex {
+        display: flex;
+      }
+
+      &.account__box--last {
+        margin-bottom: 0;
+      }
+
+      .auth__button {
+        width: 100%;
+        margin-top: 10px;
+      }
+    }
+
+    .account__avatar {
+      margin-right: 20px;
+      position: relative;
+
+      .emoji img {
+        width: 30px;
+      }
+    }
+
+    .account__avatar-premium {
+      position: absolute;
+      top: 2px;
+      right: 2px;
+      font-size: 26px;
+    }
+
+    .account__info {
+      flex: 1;
+
+      h2 {
+        margin-bottom: 5px;
+      }
+
+      .badge {
+        margin-top: 5px;
+      }
+    }
+
+    .account__subscription {
+      display: flex;
+      align-items: center;
+
+      .badge {
+        margin-left: 10px;
+      }
+    }
+
+    .account__subscription-button {
+      margin-left: auto;
+    }
+
+    div {
+      height: auto;
+    }
+
+    .invoices {
+      width: 100%;
+
+      td {
+        padding: 15px 0;
+        border-bottom: 1px solid $theme-gray-lighter;
+      }
+
+      tr:last-of-type td {
+        border: 0;
+        padding-bottom: 0;
+      }
+
+      .invoices__action {
+        text-align: right;
+
+        button {
+          color: $theme-brand-primary;
+        }
+      }
+    }
+  }
+
+  // @include element(add-service-teaser) {
+  //   height: auto;
+  //   margin-top: 20px;
+  //   display: block;
+  //   text-align: center;
+  // }
+  .emoji {
+    display: block;
+    font-size: 40px;
+    margin-bottom: 20px;
+
+    img {
+      width: 40px;
+    }
+  }
+
+  .premium-info {
+    background: lighten($theme-brand-primary, 40%);
+    padding: 20px;
+    border-radius: $theme-border-radius;
+  }
+
+  .content-tabs .premium-info {
+    background: none;
+    padding: 0;
+  }
+}
+
+.settings-navigation {
+  width: 200px;
+  height: auto;
+  background: $theme-gray-lightest;
+  display: flex;
+  flex-direction: column;
+
+  .settings-navigation__link {
+    display: block;
+    height: 50px;
+    line-height: 50px;
+    text-decoration: none;
+    color: $theme-text-color;
+    padding: 0 20px;
+    transition: background $theme-transition-time, color $theme-transition-time;
+
+    &:hover {
+      background: darken($theme-gray-lightest, 5%);
+
+      .badge {
+        background: #FFF;
+      }
+    }
+
+    &.is-active {
+      background: $theme-brand-primary;
+      color: #FFF;
+
+      .badge {
+        background: #FFF;
+        color: $theme-brand-primary;
+      }
+    }
+  }
+
+  .settings-navigation__expander {
+    flex: 1;
+  }
+
+  .badge {
+    transition: background $theme-transition-time, color $theme-transition-time;
+    display: initial;
+    margin-left: 5px;
+  }
+
+  .settings-navigation__action-badge {
+    display: inline-block;
+    width: 7px;
+    height: 7px;
+    background: $theme-brand-danger;
+    border-radius: 100%;
+    margin-left: 5px;
+  }
+}
diff --git a/src/styles/subscription-popup.scss b/src/styles/subscription-popup.scss
new file mode 100644
index 000000000..b6f232fcb
--- /dev/null
+++ b/src/styles/subscription-popup.scss
@@ -0,0 +1,20 @@
+.subscription-popup {
+  height: 100%;
+
+  &__content {
+    height: calc(100% - 60px);
+  }
+
+  &__webview {
+    height: 100%;
+  }
+
+  &__toolbar {
+    height: 60px;
+    background: $theme-gray-lightest;
+    display: flex;
+    justify-content: space-between;
+    padding: 10px;
+    border-top: 1px solid $theme-gray-lighter;
+  }
+}
diff --git a/src/styles/subscription.scss b/src/styles/subscription.scss
new file mode 100644
index 000000000..63183f085
--- /dev/null
+++ b/src/styles/subscription.scss
@@ -0,0 +1,72 @@
+.subscription {
+  .subscription__premium-features {
+    margin: 10px 0;
+
+    li {
+      height: 30px;
+      align-items: center;
+      display: flex;
+
+      &:before {
+        content: "👍";
+        margin-right: 10px;
+      }
+
+      .badge {
+        margin-left: 10px;
+      }
+    }
+  }
+
+  .subscription__premium-info {
+    margin: 15px 0 25px;
+  }
+}
+
+.paymentTiers {
+  .franz-form__radio-wrapper {
+    flex-flow: wrap;
+
+    .franz-form__radio {
+      width: 32%;
+      flex: initial;
+      margin-right: 2%;
+
+      &:nth-child(3) {
+        margin-right: 0;
+      }
+
+      &:last-of-type {
+        margin-right: 0;
+        margin-top: 2%;
+        width: 100%;
+      }
+    }
+  }
+}
+
+.settings {
+  .paymentTiers {
+    .franz-form__radio-wrapper {
+      .franz-form__radio {
+        width: 49%;
+
+        &:nth-child(2) {
+          margin-right: 0;
+        }
+
+        &:last-of-type {
+          width: 100%;
+        }
+      }
+    }
+  }
+}
+
+.mining-details {
+  margin-bottom: 15px;
+
+  button {
+    color: $theme-brand-primary;
+  }
+}
diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss
new file mode 100644
index 000000000..75568898b
--- /dev/null
+++ b/src/styles/tabs.scss
@@ -0,0 +1,72 @@
+@import './config.scss';
+
+.tabs {
+  display: flex;
+  // flex: 1;
+  flex-direction: column;
+  flex-shrink: 1;
+  // align-items: center;
+  // height: auto;
+
+  .placeholder {
+    width: 100%;
+    height: 40px;
+  }
+}
+
+.tab-item {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  width: $theme-sidebar-width;
+  height: $theme-sidebar-width;
+  min-height: 50px;
+  transition: background $theme-transition-time;
+
+  &.is-active {
+    border-left: 4px solid $theme-brand-primary;
+    background: lighten($theme-brand-primary, 35%);
+
+    .tab-item__icon {
+      margin-left: -4px;
+    }
+  }
+
+  &.has-custom-icon {
+    .tab-item__icon {
+      border-radius: $theme-border-radius;
+      // border: 1px solid $theme-gray-lighter;
+      // width: 32px;
+    }
+  }
+
+  .tab-item__icon {
+    width: 30px;
+    height: auto;
+  }
+
+  .tab-item__message-count {
+    min-width: 17px;
+    min-height: 17px;
+    background: $theme-brand-danger;
+    color: #FFF;
+    border-radius: 20px;
+    padding: 0px 5px;
+    font-size: 11px;
+    position: absolute;
+    right: 5px;
+    bottom: 5px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &.is-indirect {
+      padding-top: 0px;
+    }
+  }
+
+  &.is-reordering {
+    z-index: 99999;
+  }
+}
diff --git a/src/styles/toggle.scss b/src/styles/toggle.scss
new file mode 100644
index 000000000..5b47e6495
--- /dev/null
+++ b/src/styles/toggle.scss
@@ -0,0 +1,47 @@
+@import './config.scss';
+
+$toggle-size: 14px;
+$toggle-width: 40px;
+$toggle-button-size: 22px;
+
+.franz-form {
+  .franz-form__toggle-wrapper {
+    display: flex;
+    flex-direction: row;
+
+    .franz-form__label {
+      margin-left: 20px;
+    }
+
+    .franz-form__toggle {
+      width: $toggle-width;
+      height: $toggle-size;
+      position: relative;
+      background: $theme-gray-lighter;
+      border-radius: $theme-border-radius;
+
+      .franz-form__toggle-button {
+        position: absolute;
+        left: 0;
+        top: -($toggle-button-size - $toggle-size) / 2;
+        width: $toggle-button-size;
+        height: $toggle-button-size;
+        background: $theme-gray-light;
+        border-radius: 100%;
+        transition: all 0.5s;
+        box-shadow: 0 1px 4px rgba(0,0,0,0.3);
+      }
+
+      &.is-active {
+        .franz-form__toggle-button {
+          left: $toggle-width - $toggle-button-size;
+          background: $theme-brand-primary;
+        }
+      }
+
+      input {
+        display: none;
+      }
+    }
+  }
+}
diff --git a/src/styles/tooltip.scss b/src/styles/tooltip.scss
new file mode 100644
index 000000000..1194e7fbb
--- /dev/null
+++ b/src/styles/tooltip.scss
@@ -0,0 +1,4 @@
+.__react_component_tooltip {
+  padding: 10px !important;
+  height: auto;
+}
diff --git a/src/styles/type.scss b/src/styles/type.scss
new file mode 100644
index 000000000..935a36f4b
--- /dev/null
+++ b/src/styles/type.scss
@@ -0,0 +1,73 @@
+@import './config.scss';
+@import './mixins.scss';
+
+h1 {
+  font-size: 30px;
+  font-weight: 300;
+  letter-spacing: -1px;
+  margin-bottom: 25px;
+}
+
+h2 {
+  font-size: 20px;
+  font-weight: 500;
+  letter-spacing: -1px;
+  margin-bottom: 25px;
+  margin-top: 55px;
+
+  &:first-of-type {
+    margin-top: 0;
+  }
+}
+
+p {
+  margin-bottom: 10px;
+  line-height: 1.7rem;
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
+}
+
+strong {
+  font-weight: bold;
+}
+
+a {
+  text-decoration: none;
+  color: $theme-text-color;
+
+  &.button {
+    position: relative;
+    background: none;
+    display: inline-block;
+    padding: 10px 20px;
+    border: 2px solid $theme-brand-primary;
+    color: $theme-brand-primary;
+    border-radius: 3px;
+    transition: background 0.5s, color 0.5s;
+    text-align: center;
+
+    &:hover {
+      background: darken($theme-brand-primary, 5%);
+      color: #FFF;
+    }
+  }
+
+  &.link {
+    color: $theme-brand-primary;
+  }
+}
+
+.error-message, .error-message:last-of-type {
+  margin: 10px 0;
+  color: $theme-brand-danger;
+}
+
+.center {
+  text-align: center;
+}
+
+.label {
+  @include formLabel();
+}
diff --git a/src/styles/util.scss b/src/styles/util.scss
new file mode 100644
index 000000000..3faad8db3
--- /dev/null
+++ b/src/styles/util.scss
@@ -0,0 +1,20 @@
+.scroll-container {
+  height: 100%;
+  flex: 1;
+  overflow-y: scroll;
+  overflow-x: hidden;
+}
+
+.loader {
+  position: relative;
+  z-index: 9999;
+  display: block;
+  width: 100%;
+  height: 40px;
+}
+
+.align-middle {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
diff --git a/src/styles/welcome.scss b/src/styles/welcome.scss
new file mode 100644
index 000000000..5365921fb
--- /dev/null
+++ b/src/styles/welcome.scss
@@ -0,0 +1,75 @@
+.auth {
+  .welcome {
+
+    &__content {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #FFF;
+    }
+
+    &__logo {
+      width: 100px;
+    }
+
+    &__text {
+      margin-left: 40px;
+      padding-left: 40px;
+      border-left: 1px solid #FFF;
+
+      h1 {
+        font-size: 60px;
+        letter-spacing: -0.4rem;
+        margin-bottom: 5px;
+      }
+
+      h2 {
+        margin-left: 2px;
+        margin-bottom: 0;
+      }
+    }
+
+    &__services {
+      width: 100%;
+      max-width: 800px;
+      height: 100%;
+      max-height: 600px;
+      margin-left: -450px;
+    }
+
+    &__buttons {
+      display: block;
+      margin-top: 100px;
+      text-align: center;
+
+      .button:first-of-type {
+        margin-right: 25px;
+      }
+    }
+
+    .button {
+      border-color: #FFF;
+      color: #FFF;
+
+      &:hover {
+        background: #FFF;
+        color: $theme-brand-primary;
+      }
+    }
+
+    &__featured-services {
+      margin-top: 150px;
+      text-align: center;
+      margin-top: 80px;
+    }
+
+    &__featured-service {
+      width: 35px;
+      margin-right: 30px;
+
+      &:last-of-type {
+        margin-right: 0;
+      }
+    }
+  }
+}
diff --git a/src/webview/ime.js b/src/webview/ime.js
new file mode 100644
index 000000000..43df6267c
--- /dev/null
+++ b/src/webview/ime.js
@@ -0,0 +1,10 @@
+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
new file mode 100644
index 000000000..1787f85e2
--- /dev/null
+++ b/src/webview/lib/RecipeWebview.js
@@ -0,0 +1,74 @@
+// @flow
+const { ipcRenderer } = require('electron');
+const fs = require('fs-extra');
+
+class RecipeWebview {
+  constructor() {
+    this.countCache = {
+      direct: 0,
+      indirect: 0,
+    };
+
+    ipcRenderer.on('poll', () => {
+      this.loopFunc();
+    });
+  }
+
+  loopFunc = () => null;
+
+  /**
+   * Initialize the loop
+   *
+   * @param {Function}        Function that will be executed
+   */
+  loop(fn) {
+    this.loopFunc = fn;
+  }
+
+  /**
+   * Set the unread message badge
+   *
+   * @param {int} direct      Set the count of direct messages
+   *                          eg. Slack direct mentions, or a
+   *                          message to @channel
+   * @param {int} indirect    Set a badge that defines there are
+   *                          new messages but they do not involve
+   *                          me directly to me eg. in a channel
+   */
+  setBadge(direct = 0, indirect = 0) {
+    if (this.countCache.direct === direct
+      && this.countCache.indirect === indirect) return;
+
+    const count = {
+      direct,
+      indirect,
+    };
+
+    ipcRenderer.sendToHost('messages', count);
+    Object.assign(this.countCache, count);
+  }
+
+  /**
+   * Injects the contents of a CSS file into the current webview
+   *
+   * @param {Array} files     CSS files that should be injected. This must
+   *                          be an absolute path to the file
+   */
+  injectCSS(...files) {
+    files.forEach((file) => {
+      const data = fs.readFileSync(file);
+      const styles = document.createElement('style');
+      styles.innerHTML = data.toString();
+
+      document.querySelector('head').appendChild(styles);
+    });
+  }
+
+  initialize(fn) {
+    if (typeof fn === 'function') {
+      fn();
+    }
+  }
+}
+
+module.exports = RecipeWebview;
diff --git a/src/webview/notifications.js b/src/webview/notifications.js
new file mode 100644
index 000000000..97ce9d69b
--- /dev/null
+++ b/src/webview/notifications.js
@@ -0,0 +1,45 @@
+const { ipcRenderer } = require('electron');
+const uuidV1 = require('uuid/v1');
+// const FranzNotificationStore = [];
+
+class Notification {
+  constructor(title = '', options = {}) {
+    this.title = title;
+    this.options = options;
+    this.notificationId = uuidV1();
+    this.onclick = () => {};
+
+    ipcRenderer.sendToHost('notification', {
+      notificationId: this.notificationId,
+      title,
+      options,
+    });
+
+    ipcRenderer.on(`notification-onclick:${this.notificationId}`, () => {
+      this.onclick();
+    });
+  }
+}
+
+Notification.permission = 'granted';
+
+Notification.requestPermission = (cb = null) => {
+  console.log(this);
+  if (!cb) {
+    return new Promise((resolve) => {
+      resolve(Notification.permission);
+    });
+  }
+
+  if (typeof (cb) === 'function') {
+    return cb(Notification.permission);
+  }
+
+  return Notification.permission;
+};
+
+Notification.close = () => {
+  // no implementation yet
+};
+
+window.Notification = Notification;
diff --git a/src/webview/plugin.js b/src/webview/plugin.js
new file mode 100644
index 000000000..ffc9084e4
--- /dev/null
+++ b/src/webview/plugin.js
@@ -0,0 +1,24 @@
+const { ipcRenderer } = require('electron');
+const path = require('path');
+
+const RecipeWebview = require('./lib/RecipeWebview');
+
+require('./notifications.js');
+require('./spellchecker.js');
+require('./ime.js');
+
+ipcRenderer.on('initializeRecipe', (e, data) => {
+  const modulePath = path.join(data.recipe.path, 'webview.js');
+  // Delete module from cache
+  delete require.cache[require.resolve(modulePath)];
+  try {
+    // eslint-disable-next-line
+    require(modulePath)(new RecipeWebview(), data);
+  } catch (err) {
+    console.error(err);
+  }
+});
+
+document.addEventListener('DOMContentLoaded', () => {
+  ipcRenderer.sendToHost('hello');
+}, false);
diff --git a/src/webview/spellchecker.js b/src/webview/spellchecker.js
new file mode 100644
index 000000000..ec8807874
--- /dev/null
+++ b/src/webview/spellchecker.js
@@ -0,0 +1,14 @@
+import { SpellCheckHandler, ContextMenuListener, ContextMenuBuilder } from 'electron-spellchecker';
+
+window.spellCheckHandler = new SpellCheckHandler();
+setTimeout(() => {
+  window.spellCheckHandler.attachToInput();
+}, 1000);
+
+// TODO: should we set the language to user settings?
+// window.spellCheckHandler.switchLanguage('en-US');
+
+const contextMenuBuilder = new ContextMenuBuilder(window.spellCheckHandler);
+const contextMenuListener = new ContextMenuListener((info) => { // eslint-disable-line
+  contextMenuBuilder.showPopupMenu(info);
+});
diff --git a/src/webview/zoom.js b/src/webview/zoom.js
new file mode 100644
index 000000000..99c647036
--- /dev/null
+++ b/src/webview/zoom.js
@@ -0,0 +1,37 @@
+const electron = require('electron');
+
+const { ipcRenderer, webFrame } = electron;
+
+const maxZoomLevel = 9;
+const minZoomLevel = -8;
+let zoomLevel = 0;
+
+ipcRenderer.on('zoomIn', () => {
+  if (maxZoomLevel > zoomLevel) {
+    zoomLevel += 1;
+  }
+  webFrame.setZoomLevel(zoomLevel);
+
+  ipcRenderer.sendToHost('zoomLevel', { zoom: zoomLevel });
+});
+
+ipcRenderer.on('zoomOut', () => {
+  if (minZoomLevel < zoomLevel) {
+    zoomLevel -= 1;
+  }
+  webFrame.setZoomLevel(zoomLevel);
+
+  ipcRenderer.sendToHost('zoomLevel', { zoom: zoomLevel });
+});
+
+ipcRenderer.on('zoomReset', () => {
+  zoomLevel = 0;
+  webFrame.setZoomLevel(zoomLevel);
+
+  ipcRenderer.sendToHost('zoomLevel', { zoom: zoomLevel });
+});
+
+ipcRenderer.on('setZoom', (e, arg) => {
+  zoomLevel = arg;
+  webFrame.setZoomLevel(zoomLevel);
+});