diff --git a/client/src/__locales/en.json b/client/src/__locales/en.json
index 10471501..2a9d73eb 100644
--- a/client/src/__locales/en.json
+++ b/client/src/__locales/en.json
@@ -157,5 +157,35 @@
     "category_label": "Category",
     "rule_label": "Rule",
     "filter_label": "Filter",
-    "unknown_filter": "Unknown filter {{filterId}}"
+    "unknown_filter": "Unknown filter {{filterId}}",
+    "install_welcome_title": "Welcome to AdGuard Home!",
+    "install_welcome_desc": "Lorem ipsum dolor sit amet consectetur adipisicing elit.",
+    "install_settings_title": "Admin Web Interface",
+    "install_settings_listen": "Listen interface",
+    "install_settings_port": "Port",
+    "install_settings_interface_link": "Your AdGuard Home admin web interface is available on {{link}}",
+    "form_error_port": "Enter valid port value",
+    "install_settings_dns": "DNS server",
+    "install_settings_dns_desc": "You will need to configure your devices or router to use the DNS server at {{ip}}",
+    "install_auth_title": "Authentication",
+    "install_auth_desc": "It is highly recommended to configure password authentication to your AdGuard Home admin web interface. Even if it is accessible only in your local network, it is still important to have it protected from unrestricted access.",
+    "install_auth_username": "Username",
+    "install_auth_password": "Password",
+    "install_auth_confirm": "Confirm password",
+    "install_auth_username_enter": "Enter username",
+    "install_auth_password_enter": "Enter password",
+    "install_step": "Step",
+    "install_devices_title": "Configure your devices",
+    "install_devices_desc": "In order for AdGuard Home to start working, you need to configure your devices to use it.",
+    "install_submit_title": "Congratulations!",
+    "install_submit_desc": "The setup procedure is finished and you are ready to start using AdGuard Home.",
+    "install_decices_router": "Router",
+    "install_decices_router_desc": "This setup will automatically cover all the devices connected to your home routerm and you will not need to configure each of them manually.",
+    "install_decices_router_list_1": "Open the preferences for your router. Usually, you can access it from your browser via a URL (like http://192.168.0.1/ or http://192.168.1.1/). You may be asked to enter the password. If you don t remember it, you can ofter reset the password by pressing a button on the router itself. Some routers require a specific application, which in that case should be already installed on your computer/phone.",
+    "install_decices_router_list_2": " Find the DHCP/DNS settings. Look for the DNS letters next to a field which allows two or three sets of numbers, each broken into four groups of one to three digits.",
+    "install_decices_router_list_3": "Enter your AdGuard Home server addresses there.",
+    "get_started": "Get Started",
+    "next": "Next",
+    "open_dashboard": "Open Dashboard",
+    "install_saved": "All settings saved"
 }
\ No newline at end of file
diff --git a/client/src/actions/install.js b/client/src/actions/install.js
new file mode 100644
index 00000000..508aa8da
--- /dev/null
+++ b/client/src/actions/install.js
@@ -0,0 +1,54 @@
+import { createAction } from 'redux-actions';
+import Api from '../api/Api';
+
+const apiClient = new Api();
+
+export const addErrorToast = createAction('ADD_ERROR_TOAST');
+export const addSuccessToast = createAction('ADD_SUCCESS_TOAST');
+export const nextStep = createAction('NEXT_STEP');
+export const prevStep = createAction('PREV_STEP');
+
+export const getDefaultAddressesRequest = createAction('GET_DEFAULT_ADDRESSES_REQUEST');
+export const getDefaultAddressesFailure = createAction('GET_DEFAULT_ADDRESSES_FAILURE');
+export const getDefaultAddressesSuccess = createAction('GET_DEFAULT_ADDRESSES_SUCCESS');
+
+export const getDefaultAddresses = () => async (dispatch) => {
+    dispatch(getDefaultAddressesRequest());
+    try {
+        const addresses = await apiClient.getDefaultAddresses();
+        dispatch(getDefaultAddressesSuccess(addresses));
+    } catch (error) {
+        dispatch(addErrorToast({ error }));
+        dispatch(getDefaultAddressesFailure());
+    }
+};
+
+export const setAllSettingsRequest = createAction('SET_ALL_SETTINGS_REQUEST');
+export const setAllSettingsFailure = createAction('SET_ALL_SETTINGS_FAILURE');
+export const setAllSettingsSuccess = createAction('SET_ALL_SETTINGS_SUCCESS');
+
+export const setAllSettings = values => async (dispatch) => {
+    dispatch(setAllSettingsRequest());
+    try {
+        const {
+            web,
+            dns,
+            username,
+            password,
+        } = values;
+
+        const config = {
+            web,
+            dns,
+            username,
+            password,
+        };
+
+        await apiClient.setAllSettings(config);
+        dispatch(setAllSettingsSuccess());
+        dispatch(addSuccessToast('install_saved'));
+    } catch (error) {
+        dispatch(addErrorToast({ error }));
+        dispatch(setAllSettingsFailure());
+    }
+};
diff --git a/client/src/api/Api.js b/client/src/api/Api.js
index 4592fae7..7f1da9c5 100644
--- a/client/src/api/Api.js
+++ b/client/src/api/Api.js
@@ -336,4 +336,22 @@ export default class Api {
         };
         return this.makeRequest(path, method, parameters);
     }
+
+    // Installation
+    GET_DEFAULT_ADDRESSES = { path: 'install/get_default_addresses', method: 'GET' };
+    SET_ALL_SETTINGS = { path: 'install/set_all_settings', method: 'POST' };
+
+    getDefaultAddresses() {
+        const { path, method } = this.GET_DEFAULT_ADDRESSES;
+        return this.makeRequest(path, method);
+    }
+
+    setAllSettings(config) {
+        const { path, method } = this.SET_ALL_SETTINGS;
+        const parameters = {
+            data: config,
+            headers: { 'Content-Type': 'application/json' },
+        };
+        return this.makeRequest(path, method, parameters);
+    }
 }
diff --git a/client/src/components/App/index.css b/client/src/components/App/index.css
index 61ee53a4..391ddabd 100644
--- a/client/src/components/App/index.css
+++ b/client/src/components/App/index.css
@@ -1,7 +1,7 @@
 body {
     margin: 0;
     padding: 0;
-    font-family: sans-serif;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
 }
 
 .status {
@@ -26,3 +26,7 @@ body {
     height: 3px;
     background: linear-gradient(45deg, rgba(99, 125, 120, 1) 0%, rgba(88, 177, 101, 1) 100%);
 }
+
+.hidden {
+    display: none;
+}
diff --git a/client/src/components/Filters/UserRules.js b/client/src/components/Filters/UserRules.js
index 9aae0281..7a251f3a 100644
--- a/client/src/components/Filters/UserRules.js
+++ b/client/src/components/Filters/UserRules.js
@@ -25,7 +25,7 @@ class UserRules extends Component {
                     <textarea className="form-control form-control--textarea-large" value={this.props.userRules} onChange={this.handleChange} />
                     <div className="card-actions">
                         <button
-                            className="btn btn-success btn-standart"
+                            className="btn btn-success btn-standard"
                             type="submit"
                             onClick={this.handleSubmit}
                         >
diff --git a/client/src/components/Filters/index.js b/client/src/components/Filters/index.js
index 339bc673..6b749e83 100644
--- a/client/src/components/Filters/index.js
+++ b/client/src/components/Filters/index.js
@@ -96,14 +96,14 @@ class Filters extends Component {
                                 />
                                 <div className="card-actions">
                                     <button
-                                        className="btn btn-success btn-standart mr-2"
+                                        className="btn btn-success btn-standard mr-2"
                                         type="submit"
                                         onClick={this.props.toggleFilteringModal}
                                     >
                                         <Trans>add_filter_btn</Trans>
                                     </button>
                                     <button
-                                        className="btn btn-primary btn-standart"
+                                        className="btn btn-primary btn-standard"
                                         type="submit"
                                         onClick={this.props.refreshFilters}
                                         disabled={processingRefreshFilters}
diff --git a/client/src/components/Header/index.js b/client/src/components/Header/index.js
index 58158aa3..4c21a19a 100644
--- a/client/src/components/Header/index.js
+++ b/client/src/components/Header/index.js
@@ -6,7 +6,7 @@ import { Trans, withNamespaces } from 'react-i18next';
 
 import Menu from './Menu';
 import Version from './Version';
-import logo from './logo.svg';
+import logo from '../ui/svg/logo.svg';
 import './Header.css';
 
 class Header extends Component {
diff --git a/client/src/components/Settings/Dhcp/Form.js b/client/src/components/Settings/Dhcp/Form.js
index 9fc497d2..ec25c9aa 100644
--- a/client/src/components/Settings/Dhcp/Form.js
+++ b/client/src/components/Settings/Dhcp/Form.js
@@ -124,7 +124,7 @@ const Form = (props) => {
 
             <button
                 type="submit"
-                className="btn btn-success btn-standart"
+                className="btn btn-success btn-standard"
                 disabled={pristine || submitting}
             >
                 {t('save_config')}
diff --git a/client/src/components/Settings/Dhcp/index.js b/client/src/components/Settings/Dhcp/index.js
index eed256a6..d46d8551 100644
--- a/client/src/components/Settings/Dhcp/index.js
+++ b/client/src/components/Settings/Dhcp/index.js
@@ -37,7 +37,7 @@ class Dhcp extends Component {
             return (
                 <button
                     type="button"
-                    className="btn btn-standart mr-2 btn-gray"
+                    className="btn btn-standard mr-2 btn-gray"
                     onClick={() => this.props.toggleDhcp(config)}
                     disabled={processingDhcp}
                 >
@@ -49,7 +49,7 @@ class Dhcp extends Component {
         return (
             <button
                 type="button"
-                className="btn btn-standart mr-2 btn-success"
+                className="btn btn-standard mr-2 btn-success"
                 onClick={() => this.handleToggle(config)}
                 disabled={!filledConfig || activeDhcpFound || processingDhcp}
             >
@@ -91,8 +91,8 @@ class Dhcp extends Component {
     render() {
         const { t, dhcp } = this.props;
         const statusButtonClass = classnames({
-            'btn btn-primary btn-standart': true,
-            'btn btn-primary btn-standart btn-loading': dhcp.processingStatus,
+            'btn btn-primary btn-standard': true,
+            'btn btn-primary btn-standard btn-loading': dhcp.processingStatus,
         });
 
         return (
diff --git a/client/src/components/Settings/Settings.css b/client/src/components/Settings/Settings.css
index a4ff2394..9530ef36 100644
--- a/client/src/components/Settings/Settings.css
+++ b/client/src/components/Settings/Settings.css
@@ -11,7 +11,7 @@
     margin-bottom: 15px;
 }
 
-.btn-standart {
+.btn-standard {
     padding-left: 20px;
     padding-right: 20px;
 }
diff --git a/client/src/components/Settings/Upstream.js b/client/src/components/Settings/Upstream.js
index 4ae0598a..fe24c4d7 100644
--- a/client/src/components/Settings/Upstream.js
+++ b/client/src/components/Settings/Upstream.js
@@ -21,8 +21,8 @@ class Upstream extends Component {
 
     render() {
         const testButtonClass = classnames({
-            'btn btn-primary btn-standart mr-2': true,
-            'btn btn-primary btn-standart mr-2 btn-loading': this.props.processingTestUpstream,
+            'btn btn-primary btn-standard mr-2': true,
+            'btn btn-primary btn-standard mr-2 btn-loading': this.props.processingTestUpstream,
         });
         const { t } = this.props;
 
@@ -49,7 +49,7 @@ class Upstream extends Component {
                                     <Trans>test_upstream_btn</Trans>
                                 </button>
                                 <button
-                                    className="btn btn-success btn-standart"
+                                    className="btn btn-success btn-standard"
                                     type="submit"
                                     onClick={this.handleSubmit}
                                 >
diff --git a/client/src/components/ui/Icons.js b/client/src/components/ui/Icons.js
new file mode 100644
index 00000000..dec6f0cd
Binary files /dev/null and b/client/src/components/ui/Icons.js differ
diff --git a/client/src/components/ui/Tab.js b/client/src/components/ui/Tab.js
new file mode 100644
index 00000000..b97e4f60
--- /dev/null
+++ b/client/src/components/ui/Tab.js
@@ -0,0 +1,41 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+class Tab extends Component {
+    handleClick = () => {
+        this.props.onClick(this.props.label);
+    }
+
+    render() {
+        const {
+            activeTab,
+            label,
+        } = this.props;
+
+        const tabClass = classnames({
+            tab__control: true,
+            'tab__control--active': activeTab === label,
+        });
+
+        return (
+            <div
+                className={tabClass}
+                onClick={this.handleClick}
+            >
+                 <svg className="tab__icon">
+                    <use xlinkHref={`#${label.toLowerCase()}`} />
+                </svg>
+                {label}
+            </div>
+        );
+    }
+}
+
+Tab.propTypes = {
+    activeTab: PropTypes.string.isRequired,
+    label: PropTypes.string.isRequired,
+    onClick: PropTypes.func.isRequired,
+};
+
+export default Tab;
diff --git a/client/src/components/ui/Tabs.css b/client/src/components/ui/Tabs.css
new file mode 100644
index 00000000..141b2a7f
--- /dev/null
+++ b/client/src/components/ui/Tabs.css
@@ -0,0 +1,42 @@
+.tabs__controls {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 15px;
+    padding: 15px 0;
+    border-bottom: 1px solid #e8e8e8;
+}
+
+.tab__control {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    min-width: 70px;
+    font-size: 13px;
+    color: #555555;
+    cursor: pointer;
+    opacity: 0.6;
+}
+
+.tab__control:hover,
+.tab__control:focus {
+    opacity: 1;
+}
+
+.tab__control--active {
+    font-weight: 700;
+    color: #4a4a4a;
+    opacity: 1;
+}
+
+.tab__title {
+    margin-bottom: 10px;
+    font-size: 16px;
+    font-weight: 700;
+}
+
+.tab__icon {
+    width: 24px;
+    height: 24px;
+    margin-bottom: 6px;
+    fill: #4a4a4a;
+}
diff --git a/client/src/components/ui/Tabs.js b/client/src/components/ui/Tabs.js
new file mode 100644
index 00000000..38546b98
--- /dev/null
+++ b/client/src/components/ui/Tabs.js
@@ -0,0 +1,59 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import Tab from './Tab';
+import './Tabs.css';
+
+class Tabs extends Component {
+    state = {
+        activeTab: this.props.children[0].props.label,
+    };
+
+    onClickTabControl = (tab) => {
+        this.setState({ activeTab: tab });
+    }
+
+    render() {
+        const {
+            props: {
+                children,
+            },
+            state: {
+                activeTab,
+            },
+        } = this;
+
+        return (
+            <div className="tabs">
+                <div className="tabs__controls">
+                    {children.map((child) => {
+                        const { label } = child.props;
+
+                        return (
+                            <Tab
+                                activeTab={activeTab}
+                                key={label}
+                                label={label}
+                                onClick={this.onClickTabControl}
+                            />
+                        );
+                    })}
+                </div>
+                <div className="tabs__content">
+                    {children.map((child) => {
+                        if (child.props.label !== activeTab) {
+                            return false;
+                        }
+                        return child.props.children;
+                    })}
+                </div>
+            </div>
+        );
+    }
+}
+
+Tabs.propTypes = {
+    children: PropTypes.array.isRequired,
+};
+
+export default Tabs;
diff --git a/client/src/components/ui/svg/icons.svg b/client/src/components/ui/svg/icons.svg
new file mode 100644
index 00000000..ad531ac5
--- /dev/null
+++ b/client/src/components/ui/svg/icons.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="hidden">
+    <symbol id="android" viewBox="0 0 14 16" fill="currentColor">
+        <path d="M11.2 5.2H2.8c-.2 0-.3.1-.3.3v6.7c0 .2.2.3.3.3h1.5v2.3c0 .5.4.9 1 .9s1-.4 1-.9v-2.3h1.4v2.3c0 .5.4.9 1 .9s1-.4 1-.9v-2.3h1.5c.2 0 .3-.1.3-.3V5.5c.1-.2-.1-.3-.3-.3zM1 5.2c-.6 0-1 .4-1 .9V10c0 .5.4.9 1 .9s1-.4 1-.9V6.1c0-.5-.4-.9-1-.9zm12 0c-.6 0-1 .4-1 .9V10c0 .5.4.9 1 .9s1-.4 1-.9V6.1c0-.5-.5-.9-1-.9zM2.9 4.7h8.3c.2 0 .4-.2.3-.4-.3-1.2-1.1-2.3-2.2-2.9L10 .3c0-.1 0-.2-.1-.2-.1-.1-.2-.1-.3 0l-.7 1.2C8.3 1 7.7.9 7 .9s-1.3.1-1.9.4L4.4.1C4.3 0 4.2 0 4.1 0c-.1.1-.1.2 0 .3l.7 1.2c-1.1.6-2 1.6-2.2 2.9-.1.1.1.3.3.3zm6.2-2.1c.2 0 .4.2.4.4s-.2.3-.4.3-.4-.2-.4-.4.2-.3.4-.3zm-4.2 0c.2 0 .4.2.4.4s-.2.4-.4.4-.4-.2-.4-.4.2-.4.4-.4z"/>
+    </symbol>
+
+    <symbol id="mac" viewBox="0 0 42 42" fill="currentColor">
+        <path d="M23.091,14.018 L23.091,13.676 L22.028,13.749 C21.727,13.768 21.501,13.832 21.349,13.94 C21.197,14.049 21.121,14.2 21.121,14.393 C21.121,14.581 21.196,14.731 21.347,14.842 C21.497,14.954 21.699,15.009 21.951,15.009 C22.112,15.009 22.263,14.984 22.402,14.935 C22.541,14.886 22.663,14.817 22.765,14.729 C22.867,14.642 22.947,14.538 23.004,14.417 C23.062,14.296 23.091,14.163 23.091,14.018 Z M21,0.25 C9.421,0.25 0.25,9.421 0.25,21 C0.25,32.58 9.421,41.75 21,41.75 C32.579,41.75 41.75,32.58 41.75,21 C41.75,9.421 32.58,0.25 21,0.25 Z M25.028,12.549 C25.126,12.274 25.264,12.038 25.443,11.842 C25.622,11.646 25.837,11.495 26.089,11.389 C26.341,11.283 26.622,11.23 26.931,11.23 C27.21,11.23 27.462,11.272 27.686,11.355 C27.911,11.438 28.103,11.55 28.264,11.691 C28.425,11.832 28.553,11.996 28.647,12.184 C28.741,12.372 28.797,12.571 28.816,12.78 L27.983,12.78 C27.962,12.665 27.924,12.557 27.87,12.458 C27.816,12.359 27.745,12.273 27.657,12.2 C27.568,12.127 27.464,12.07 27.345,12.029 C27.225,11.987 27.091,11.967 26.94,11.967 C26.763,11.967 26.602,12.003 26.459,12.074 C26.315,12.145 26.192,12.246 26.09,12.376 C25.988,12.506 25.909,12.665 25.853,12.851 C25.796,13.038 25.768,13.245 25.768,13.473 C25.768,13.709 25.796,13.921 25.853,14.107 C25.909,14.294 25.989,14.451 26.093,14.58 C26.196,14.709 26.321,14.808 26.466,14.876 C26.611,14.944 26.771,14.979 26.945,14.979 C27.23,14.979 27.462,14.912 27.642,14.778 C27.822,14.644 27.938,14.448 27.992,14.19 L28.826,14.19 C28.802,14.418 28.739,14.626 28.637,14.814 C28.535,15.002 28.403,15.162 28.241,15.295 C28.078,15.428 27.887,15.531 27.667,15.603 C27.447,15.675 27.205,15.712 26.942,15.712 C26.63,15.712 26.349,15.66 26.096,15.557 C25.844,15.454 25.627,15.305 25.447,15.112 C25.267,14.919 25.128,14.684 25.03,14.407 C24.932,14.13 24.883,13.819 24.883,13.472 C24.881,13.133 24.93,12.825 25.028,12.549 Z M13.175,11.287 L14.009,11.287 L14.009,12.028 L14.025,12.028 C14.076,11.905 14.143,11.794 14.225,11.698 C14.307,11.601 14.401,11.519 14.509,11.45 C14.616,11.381 14.735,11.329 14.863,11.293 C14.992,11.257 15.128,11.239 15.27,11.239 C15.576,11.239 15.835,11.312 16.045,11.458 C16.256,11.604 16.406,11.814 16.494,12.088 L16.515,12.088 C16.571,11.956 16.645,11.838 16.736,11.734 C16.827,11.63 16.932,11.54 17.05,11.466 C17.168,11.392 17.298,11.336 17.439,11.297 C17.58,11.258 17.728,11.239 17.884,11.239 C18.099,11.239 18.294,11.273 18.47,11.342 C18.646,11.411 18.796,11.507 18.921,11.632 C19.046,11.757 19.142,11.909 19.209,12.087 C19.276,12.265 19.31,12.463 19.31,12.681 L19.31,15.662 L18.44,15.662 L18.44,12.89 C18.44,12.603 18.366,12.38 18.218,12.223 C18.071,12.066 17.86,11.987 17.586,11.987 C17.452,11.987 17.329,12.011 17.217,12.058 C17.106,12.105 17.009,12.171 16.929,12.256 C16.848,12.34 16.785,12.442 16.74,12.56 C16.694,12.678 16.671,12.807 16.671,12.947 L16.671,15.662 L15.813,15.662 L15.813,12.818 C15.813,12.692 15.793,12.578 15.754,12.476 C15.715,12.374 15.66,12.287 15.587,12.214 C15.515,12.141 15.426,12.086 15.323,12.047 C15.219,12.008 15.103,11.988 14.974,11.988 C14.84,11.988 14.716,12.013 14.601,12.063 C14.487,12.113 14.389,12.182 14.307,12.27 C14.225,12.359 14.161,12.463 14.116,12.584 C14.072,12.704 14,12.836 14,12.978 L14,15.661 L13.175,15.661 L13.175,11.287 Z M15.068,32.226 C11.243,32.226 8.844,29.568 8.844,25.326 C8.844,21.084 11.243,18.417 15.068,18.417 C18.893,18.417 21.283,21.084 21.283,25.326 C21.283,29.567 18.893,32.226 15.068,32.226 Z M22.15,15.651 C22.009,15.687 21.865,15.705 21.717,15.705 C21.499,15.705 21.3,15.674 21.119,15.612 C20.937,15.55 20.782,15.463 20.652,15.35 C20.522,15.237 20.42,15.101 20.348,14.941 C20.275,14.781 20.239,14.603 20.239,14.407 C20.239,14.023 20.382,13.723 20.668,13.507 C20.954,13.291 21.368,13.165 21.911,13.13 L23.091,13.062 L23.091,12.724 C23.091,12.472 23.011,12.279 22.851,12.148 C22.691,12.017 22.465,11.951 22.172,11.951 C22.054,11.951 21.943,11.966 21.841,11.995 C21.739,12.025 21.649,12.067 21.571,12.122 C21.493,12.177 21.428,12.243 21.378,12.32 C21.327,12.396 21.292,12.482 21.273,12.576 L20.455,12.576 C20.46,12.383 20.508,12.204 20.598,12.04 C20.688,11.876 20.81,11.734 20.965,11.613 C21.12,11.492 21.301,11.398 21.511,11.331 C21.721,11.264 21.949,11.23 22.196,11.23 C22.462,11.23 22.703,11.263 22.919,11.331 C23.135,11.399 23.32,11.494 23.473,11.619 C23.626,11.744 23.744,11.894 23.827,12.07 C23.91,12.246 23.952,12.443 23.952,12.66 L23.952,15.661 L23.119,15.661 L23.119,14.932 L23.098,14.932 C23.036,15.05 22.958,15.157 22.863,15.252 C22.767,15.347 22.66,15.429 22.541,15.496 C22.421,15.563 22.291,15.615 22.15,15.651 Z M27.653,32.226 C24.736,32.226 22.753,30.698 22.615,28.299 L24.514,28.299 C24.662,29.67 25.987,30.578 27.802,30.578 C29.543,30.578 30.794,29.67 30.794,28.429 C30.794,27.355 30.034,26.706 28.275,26.262 L26.561,25.836 C24.097,25.225 22.977,24.104 22.977,22.261 C22.977,19.992 24.959,18.417 27.784,18.417 C30.544,18.417 32.47,20.001 32.544,22.279 L30.664,22.279 C30.534,20.908 29.414,20.065 27.746,20.065 C26.088,20.065 24.94,20.917 24.94,22.149 C24.94,23.121 25.662,23.696 27.422,24.14 L28.867,24.501 C31.618,25.168 32.748,26.252 32.748,28.197 C32.747,30.679 30.784,32.226 27.653,32.226 Z M15.068,20.12 C12.447,20.12 10.808,22.13 10.808,25.325 C10.808,28.511 12.447,30.521 15.068,30.521 C17.68,30.521 19.328,28.511 19.328,25.325 C19.329,22.13 17.68,20.12 15.068,20.12 Z" />
+    </symbol>
+
+    <symbol id="windows" viewBox="0 0 14 16" fill="currentColor">
+        <path d="M0 13.7L6.5 14.6 6.5 8.4 0 8.4z"/><path d="M0 7.6L6.5 7.6 6.5 1.3 0 2.2z"/><path d="M7.2 14.7L15.9 15.9 15.9 8.4 15.9 8.4 7.2 8.4z"/><path d="M7.2 1.2L7.2 7.6 15.9 7.6 15.9 0z"/>
+    </symbol>
+
+    <symbol id="ios" viewBox="0 0 512 512" fill="currentColor">
+        <path d="M395.748 272.046c-.646-64.841 52.88-95.938 55.271-97.483-30.075-44.01-76.925-50.039-93.62-50.736-39.871-4.037-77.798 23.474-98.033 23.474-20.184 0-51.409-22.877-84.476-22.276-43.458.646-83.529 25.269-105.906 64.19-45.152 78.35-11.563 194.42 32.445 257.963 21.504 31.104 47.146 66.038 80.813 64.79 32.421-1.294 44.681-20.979 83.878-20.979 39.196 0 50.215 20.979 84.524 20.335 34.888-.648 56.991-31.699 78.347-62.898 24.694-36.084 34.862-71.019 35.462-72.812-.775-.354-68.031-26.119-68.705-103.568zM331.28 81.761C349.149 60.082 361.21 30.005 357.92 0c-25.739 1.048-56.938 17.145-75.405 38.775-16.57 19.188-31.075 49.813-27.188 79.218 28.734 2.242 58.065-14.602 75.953-36.232z"/>
+    </symbol>
+
+    <symbol id="router" viewBox="0 0 30 30" fill="currentColor">
+        <path d="M17.646 2.332a1 1 0 0 0-.697 1.719 6.984 6.984 0 0 1 0 9.898 1 1 0 1 0 1.414 1.414c3.507-3.506 3.507-9.22 0-12.726a1 1 0 0 0-.717-.305zm-12.662.654A1 1 0 0 0 4 4v14a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h22a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2H12V9a1 1 0 0 0-1.016-1.014A1 1 0 0 0 10 9v9H6V4a1 1 0 0 0-1.016-1.014zm9.834 2.176a1 1 0 0 0-.697 1.717 2.985 2.985 0 0 1 0 4.242 1 1 0 1 0 1.414 1.414 5.014 5.014 0 0 0 0-7.07 1 1 0 0 0-.717-.303zM5 21a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm4 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
+    </symbol>
+</svg>
diff --git a/client/src/components/Header/logo.svg b/client/src/components/ui/svg/logo.svg
similarity index 100%
rename from client/src/components/Header/logo.svg
rename to client/src/components/ui/svg/logo.svg
diff --git a/client/src/helpers/constants.js b/client/src/helpers/constants.js
index fb7bbe64..21e5a961 100644
--- a/client/src/helpers/constants.js
+++ b/client/src/helpers/constants.js
@@ -60,3 +60,6 @@ export const LANGUAGES = [
         name: '正體中文',
     },
 ];
+
+export const INSTALL_FIRST_STEP = 1;
+export const INSTALL_TOTAL_STEPS = 5;
diff --git a/client/src/install/Setup/Auth.js b/client/src/install/Setup/Auth.js
new file mode 100644
index 00000000..ce6ca495
--- /dev/null
+++ b/client/src/install/Setup/Auth.js
@@ -0,0 +1,98 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Field, reduxForm } from 'redux-form';
+import { withNamespaces, Trans } from 'react-i18next';
+import flow from 'lodash/flow';
+
+import Controls from './Controls';
+import validate from './validate';
+import renderField from './renderField';
+
+const required = (value) => {
+    if (value || value === 0) {
+        return false;
+    }
+    return <Trans>form_error_required</Trans>;
+};
+
+const Auth = (props) => {
+    const {
+        handleSubmit,
+        submitting,
+        pristine,
+        t,
+    } = props;
+
+    return (
+        <form className="setup__step" onSubmit={handleSubmit}>
+            <div className="setup__group">
+                <div className="setup__subtitle">
+                    <Trans>install_auth_title</Trans>
+                </div>
+                <p className="setup__desc">
+                    <Trans>install_auth_desc</Trans>
+                </p>
+                <div className="form-group">
+                    <label>
+                        <Trans>install_auth_username</Trans>
+                    </label>
+                    <Field
+                        name="username"
+                        component={renderField}
+                        type="text"
+                        className="form-control"
+                        placeholder={ t('install_auth_username_enter') }
+                        validate={[required]}
+                        autoComplete="username"
+                    />
+                </div>
+                <div className="form-group">
+                    <label>
+                        <Trans>install_auth_password</Trans>
+                    </label>
+                    <Field
+                        name="password"
+                        component={renderField}
+                        type="password"
+                        className="form-control"
+                        placeholder={ t('install_auth_password_enter') }
+                        validate={[required]}
+                        autoComplete="new-password"
+                    />
+                </div>
+                <div className="form-group">
+                    <label>
+                        <Trans>install_auth_confirm</Trans>
+                    </label>
+                    <Field
+                        name="confirm_password"
+                        component={renderField}
+                        type="password"
+                        className="form-control"
+                        placeholder={ t('install_auth_confirm') }
+                        validate={[required]}
+                        autoComplete="new-password"
+                    />
+                </div>
+            </div>
+            <Controls submitting={submitting} pristine={pristine} />
+        </form>
+    );
+};
+
+Auth.propTypes = {
+    handleSubmit: PropTypes.func.isRequired,
+    pristine: PropTypes.bool.isRequired,
+    submitting: PropTypes.bool.isRequired,
+    t: PropTypes.func.isRequired,
+};
+
+export default flow([
+    withNamespaces(),
+    reduxForm({
+        form: 'install',
+        destroyOnUnmount: false,
+        forceUnregisterOnUnmount: true,
+        validate,
+    }),
+])(Auth);
diff --git a/client/src/install/Setup/Controls.js b/client/src/install/Setup/Controls.js
new file mode 100644
index 00000000..37f5425b
--- /dev/null
+++ b/client/src/install/Setup/Controls.js
@@ -0,0 +1,115 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import { Trans } from 'react-i18next';
+
+import * as actionCreators from '../../actions/install';
+import { INSTALL_FIRST_STEP, INSTALL_TOTAL_STEPS } from '../../helpers/constants';
+
+class Controls extends Component {
+    nextStep = () => {
+        if (this.props.step < INSTALL_TOTAL_STEPS) {
+            this.props.nextStep();
+        }
+    }
+
+    prevStep = () => {
+        if (this.props.step > INSTALL_FIRST_STEP) {
+            this.props.prevStep();
+        }
+    }
+
+    renderButtons(step) {
+        switch (step) {
+            case 1:
+                return (
+                    <button
+                        type="button"
+                        className="btn btn-success btn-standard btn-lg"
+                        onClick={this.props.nextStep}
+                    >
+                        <Trans>get_started</Trans>
+                    </button>
+                );
+            case 2:
+            case 3:
+                return (
+                    <div className="btn-list">
+                        <button
+                            type="button"
+                            className="btn btn-secondary btn-standard btn-lg"
+                            onClick={this.props.prevStep}
+                        >
+                            <Trans>back</Trans>
+                        </button>
+                        <button
+                            type="submit"
+                            className="btn btn-success btn-standard btn-lg"
+                            disabled={this.props.submitting || this.props.pristine}
+                        >
+                            <Trans>next</Trans>
+                        </button>
+                    </div>
+                );
+            case 4:
+                return (
+                    <div className="btn-list">
+                        <button
+                            type="button"
+                            className="btn btn-secondary btn-standard btn-lg"
+                            onClick={this.props.prevStep}
+                        >
+                            <Trans>back</Trans>
+                        </button>
+                        <button
+                            type="button"
+                            className="btn btn-success btn-standard btn-lg"
+                            onClick={this.props.nextStep}
+                            disabled={this.props.submitting || this.props.pristine}
+                        >
+                            <Trans>next</Trans>
+                        </button>
+                    </div>
+                );
+            case 5:
+                return (
+                    <button
+                        type="submit"
+                        className="btn btn-success btn-standard btn-lg"
+                        disabled={this.props.submitting || this.props.pristine}
+                    >
+                        <Trans>open_dashboard</Trans>
+                    </button>
+                );
+            default:
+                return false;
+        }
+    }
+
+    render() {
+        return (
+            <div className="setup__nav">
+                {this.renderButtons(this.props.step)}
+            </div>
+        );
+    }
+}
+
+Controls.propTypes = {
+    step: PropTypes.number.isRequired,
+    nextStep: PropTypes.func,
+    prevStep: PropTypes.func,
+    pristine: PropTypes.bool,
+    submitting: PropTypes.bool,
+};
+
+const mapStateToProps = (state) => {
+    const { step } = state.install;
+    const props = { step };
+    return props;
+};
+
+export default connect(
+    mapStateToProps,
+    actionCreators,
+)(Controls);
diff --git a/client/src/install/Setup/Devices.js b/client/src/install/Setup/Devices.js
new file mode 100644
index 00000000..389e9aa7
--- /dev/null
+++ b/client/src/install/Setup/Devices.js
@@ -0,0 +1,68 @@
+import React from 'react';
+import { Trans } from 'react-i18next';
+
+import Tabs from '../../components/ui/Tabs';
+import Icons from '../../components/ui/Icons';
+import Controls from './Controls';
+
+const Devices = () => (
+    <div className="setup__step">
+        <div className="setup__group">
+            <div className="setup__subtitle">
+                <Trans>install_devices_title</Trans>
+            </div>
+            <p className="setup__desc">
+                <Trans>install_devices_desc</Trans>
+            </p>
+            <Icons />
+            <Tabs>
+                <div label="Router">
+                    <div className="tab__title">
+                        <Trans>install_decices_router</Trans>
+                    </div>
+                    <div className="tab__text">
+                        <Trans>install_decices_router_desc</Trans>
+                        <ol>
+                            <li>
+                                <Trans>install_decices_router_list_1</Trans>
+                            </li>
+                            <li>
+                                <Trans>install_decices_router_list_2</Trans>
+                            </li>
+                            <li>
+                                <Trans>install_decices_router_list_3</Trans>
+                            </li>
+                        </ol>
+                    </div>
+                </div>
+                <div label="Windows">
+                    <div className="tab__title">
+                        Windows
+                    </div>
+                    <div className="tab__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti sapiente magnam autem excepturi repellendus, voluptatem officia sint quas nulla maiores velit odit dolore commodi quia reprehenderit vero repudiandae adipisci aliquam.</div>
+                </div>
+                <div label="macOS">
+                    <div className="tab__title">
+                        macOS
+                    </div>
+                    <div className="tab__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti sapiente magnam autem excepturi repellendus, voluptatem officia sint quas nulla maiores velit odit dolore commodi quia reprehenderit vero repudiandae adipisci aliquam.</div>
+                </div>
+                <div label="Android">
+                    <div className="tab__title">
+                        Android
+                    </div>
+                    <div className="tab__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti sapiente magnam autem excepturi repellendus, voluptatem officia sint quas nulla maiores velit odit dolore commodi quia reprehenderit vero repudiandae adipisci aliquam.</div>
+                </div>
+                <div label="iOS">
+                    <div className="tab__title">
+                        iOS
+                    </div>
+                    <div className="tab__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti sapiente magnam autem excepturi repellendus, voluptatem officia sint quas nulla maiores velit odit dolore commodi quia reprehenderit vero repudiandae adipisci aliquam.</div>
+                </div>
+            </Tabs>
+        </div>
+        <Controls />
+    </div>
+);
+
+export default Devices;
diff --git a/client/src/install/Setup/Greeting.js b/client/src/install/Setup/Greeting.js
new file mode 100644
index 00000000..0398e5af
--- /dev/null
+++ b/client/src/install/Setup/Greeting.js
@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+import { Trans } from 'react-i18next';
+import Controls from './Controls';
+
+class Greeting extends Component {
+    render() {
+        return (
+            <div className="setup__step">
+                <div className="setup__group">
+                    <h1 className="setup__title">
+                        <Trans>install_welcome_title</Trans>
+                    </h1>
+                    <p className="setup__desc">
+                        <Trans>install_welcome_desc</Trans>
+                    </p>
+                </div>
+                <Controls />
+            </div>
+        );
+    }
+}
+
+export default Greeting;
diff --git a/client/src/install/Setup/Progress.js b/client/src/install/Setup/Progress.js
new file mode 100644
index 00000000..db44b8c4
--- /dev/null
+++ b/client/src/install/Setup/Progress.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Trans } from 'react-i18next';
+
+import { INSTALL_TOTAL_STEPS } from '../../helpers/constants';
+
+const getProgressPercent = step => (step / INSTALL_TOTAL_STEPS) * 100;
+
+const Progress = props => (
+    <div className="setup__progress">
+        <Trans>install_step</Trans> {props.step}/{INSTALL_TOTAL_STEPS}
+        <div className="setup__progress-wrap">
+            <div
+                className="setup__progress-inner"
+                style={{ width: `${getProgressPercent(props.step)}%` }}
+            />
+        </div>
+    </div>
+);
+
+Progress.propTypes = {
+    step: PropTypes.number.isRequired,
+};
+
+export default Progress;
diff --git a/client/src/install/Setup/Settings.js b/client/src/install/Setup/Settings.js
new file mode 100644
index 00000000..756a46b3
--- /dev/null
+++ b/client/src/install/Setup/Settings.js
@@ -0,0 +1,160 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import { Field, reduxForm, formValueSelector } from 'redux-form';
+import { Trans } from 'react-i18next';
+
+import Controls from './Controls';
+import renderField from './renderField';
+import { R_IPV4 } from '../../helpers/constants';
+
+const required = (value) => {
+    if (value || value === 0) {
+        return false;
+    }
+    return <Trans>form_error_required</Trans>;
+};
+
+const ipv4 = (value) => {
+    if (value && !new RegExp(R_IPV4).test(value)) {
+        return <Trans>form_error_ip_format</Trans>;
+    }
+    return false;
+};
+
+const port = (value) => {
+    if (value < 1 || value > 65535) {
+        return <Trans>form_error_port</Trans>;
+    }
+    return false;
+};
+
+const toNumber = value => value && parseInt(value, 10);
+
+let Settings = (props) => {
+    const {
+        handleSubmit,
+        interfaceIp,
+        dnsIp,
+    } = props;
+
+    return (
+        <form className="setup__step" onSubmit={handleSubmit}>
+            <div className="setup__group">
+                <div className="setup__subtitle">
+                    <Trans>install_settings_title</Trans>
+                </div>
+                <div className="row">
+                    <div className="col-8">
+                        <div className="form-group">
+                            <label>
+                                <Trans>install_settings_listen</Trans>
+                            </label>
+                            <Field
+                                name="web.ip"
+                                component={renderField}
+                                type="text"
+                                className="form-control"
+                                placeholder="0.0.0.0"
+                                validate={[ipv4, required]}
+                            />
+                        </div>
+                    </div>
+                    <div className="col-4">
+                        <div className="form-group">
+                            <label>
+                                <Trans>install_settings_port</Trans>
+                            </label>
+                            <Field
+                                name="web.port"
+                                component={renderField}
+                                type="number"
+                                className="form-control"
+                                placeholder="80"
+                                validate={[port, required]}
+                                normalize={toNumber}
+                            />
+                        </div>
+                    </div>
+                </div>
+                <div className="setup__desc">
+                    <Trans>install_settings_interface_link</Trans> <a href={`http://${interfaceIp}`}>{`http://${interfaceIp}`}</a>
+                </div>
+            </div>
+            <div className="setup__group">
+                <div className="setup__subtitle">
+                    <Trans>install_settings_dns</Trans>
+                </div>
+                <div className="row">
+                    <div className="col-8">
+                        <div className="form-group">
+                            <label>
+                                <Trans>install_settings_listen</Trans>
+                            </label>
+                            <Field
+                                name="dns.ip"
+                                component={renderField}
+                                type="text"
+                                className="form-control"
+                                placeholder="0.0.0.0"
+                                validate={[ipv4, required]}
+                            />
+                        </div>
+                    </div>
+                    <div className="col-4">
+                        <div className="form-group">
+                            <label>
+                                <Trans>install_settings_port</Trans>
+                            </label>
+                            <Field
+                                name="dns.port"
+                                component={renderField}
+                                type="number"
+                                className="form-control"
+                                placeholder="80"
+                                validate={[port, required]}
+                                normalize={toNumber}
+                            />
+                        </div>
+                    </div>
+                </div>
+                <p className="setup__desc">
+                    <Trans>install_settings_dns_desc</Trans> <strong>{dnsIp}</strong>
+                </p>
+            </div>
+            <Controls />
+        </form>
+    );
+};
+
+Settings.propTypes = {
+    handleSubmit: PropTypes.func.isRequired,
+    interfaceIp: PropTypes.string.isRequired,
+    dnsIp: PropTypes.string.isRequired,
+    pristine: PropTypes.bool.isRequired,
+    submitting: PropTypes.bool.isRequired,
+    initialValues: PropTypes.object,
+};
+
+Settings.defaultProps = {
+    interfaceIp: '192.168.0.1',
+    dnsIp: '192.168.0.1',
+};
+
+const selector = formValueSelector('install');
+
+Settings = connect((state) => {
+    const interfaceIp = selector(state, 'web.ip');
+    const dnsIp = selector(state, 'dns.ip');
+
+    return {
+        interfaceIp,
+        dnsIp,
+    };
+})(Settings);
+
+export default reduxForm({
+    form: 'install',
+    destroyOnUnmount: false,
+    forceUnregisterOnUnmount: true,
+})(Settings);
diff --git a/client/src/install/Setup/Setup.css b/client/src/install/Setup/Setup.css
new file mode 100644
index 00000000..963458af
--- /dev/null
+++ b/client/src/install/Setup/Setup.css
@@ -0,0 +1,105 @@
+.setup {
+    min-height: calc(100vh - 80px);
+    padding: 50px 0;
+    line-height: 1.48;
+}
+
+.setup__container {
+    max-width: 650px;
+    margin: 0 auto;
+    padding: 30px 20px;
+    line-height: 1.6;
+    background-color: #fff;
+    box-shadow: 0 1px 4px rgba(74, 74, 74, .36);
+    border-radius: 3px;
+}
+
+@media screen and (min-width: 768px) {
+    .setup__container {
+        width: 650px;
+        padding: 40px 30px;
+    }
+}
+
+.setup__logo {
+    display: block;
+    margin: 0 auto 40px;
+    max-width: 140px;
+}
+
+.setup__nav {
+    text-align: center;
+}
+
+.setup__step {
+    margin-bottom: 25px;
+}
+
+.setup__title {
+    margin-bottom: 30px;
+    font-size: 28px;
+    text-align: center;
+    font-weight: 700;
+}
+
+.setup__subtitle {
+    margin-bottom: 10px;
+    font-size: 17px;
+    font-weight: 700;
+}
+
+.setup__desc {
+    font-size: 15px;
+}
+
+.setup__group {
+    margin-bottom: 35px;
+}
+
+.setup__group:last-child {
+    margin-bottom: 0;
+}
+
+.setup__progress {
+    font-size: 13px;
+    text-align: center;
+}
+
+.setup__progress-wrap {
+    height: 4px;
+    margin: 20px -20px -30px -20px;
+    overflow: hidden;
+    background-color: #eaeaea;
+    border-radius: 0 0 3px 3px;
+}
+
+@media screen and (min-width: 768px) {
+    .setup__progress-wrap {
+        margin: 20px -30px -40px -30px;
+    }
+}
+
+.setup__progress-inner {
+    width: 0;
+    height: 100%;
+    font-size: 1.2rem;
+    line-height: 20px;
+    color: #fff;
+    text-align: center;
+    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
+    transition: width 0.6s ease;
+    background: linear-gradient(45deg, rgba(99, 125, 120, 1) 0%, rgba(88, 177, 101, 1) 100%);
+}
+
+.btn-standard {
+    padding-left: 20px;
+    padding-right: 20px;
+}
+
+.form__message {
+    font-size: 11px;
+}
+
+.form__message--error {
+    color: #cd201f;
+}
diff --git a/client/src/install/Setup/Submit.js b/client/src/install/Setup/Submit.js
new file mode 100644
index 00000000..9f52a2df
--- /dev/null
+++ b/client/src/install/Setup/Submit.js
@@ -0,0 +1,44 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { reduxForm } from 'redux-form';
+import { Trans } from 'react-i18next';
+
+import Controls from './Controls';
+
+class Submit extends Component {
+    render() {
+        const {
+            handleSubmit,
+            pristine,
+            submitting,
+        } = this.props;
+
+        return (
+            <div className="setup__step">
+                <div className="setup__group">
+                    <h1 className="setup__title">
+                        <Trans>install_submit_title</Trans>
+                    </h1>
+                    <p className="setup__desc">
+                        <Trans>install_submit_desc</Trans>
+                    </p>
+                </div>
+                <form onSubmit={handleSubmit}>
+                    <Controls submitting={submitting} pristine={pristine} />
+                </form>
+            </div>
+        );
+    }
+}
+
+Submit.propTypes = {
+    handleSubmit: PropTypes.func.isRequired,
+    pristine: PropTypes.bool.isRequired,
+    submitting: PropTypes.bool.isRequired,
+};
+
+export default reduxForm({
+    form: 'install',
+    destroyOnUnmount: false,
+    forceUnregisterOnUnmount: true,
+})(Submit);
diff --git a/client/src/install/Setup/index.js b/client/src/install/Setup/index.js
new file mode 100644
index 00000000..ed827edf
--- /dev/null
+++ b/client/src/install/Setup/index.js
@@ -0,0 +1,115 @@
+import React, { Component, Fragment } from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+
+import * as actionCreators from '../../actions/install';
+import { INSTALL_FIRST_STEP, INSTALL_TOTAL_STEPS } from '../../helpers/constants';
+
+import Loading from '../../components/ui/Loading';
+import Greeting from './Greeting';
+import Settings from './Settings';
+import Auth from './Auth';
+import Devices from './Devices';
+import Submit from './Submit';
+import Progress from './Progress';
+
+import Footer from '../../components/ui/Footer';
+import logo from '../../components/ui/svg/logo.svg';
+
+import './Setup.css';
+import '../../components/ui/Tabler.css';
+
+class Setup extends Component {
+    componentDidMount() {
+        this.props.getDefaultAddresses();
+    }
+
+    handleFormSubmit = (values) => {
+        this.props.setAllSettings(values);
+    };
+
+    nextStep = () => {
+        if (this.props.install.step < INSTALL_TOTAL_STEPS) {
+            this.props.nextStep();
+        }
+    }
+
+    prevStep = () => {
+        if (this.props.install.step > INSTALL_FIRST_STEP) {
+            this.props.prevStep();
+        }
+    }
+
+    renderPage(step, config) {
+        switch (step) {
+            case 1:
+                return <Greeting />;
+            case 2:
+                return (
+                    <Settings
+                        initialValues={config}
+                        onSubmit={this.nextStep}
+                    />
+                );
+            case 3:
+                return (
+                    <Auth onSubmit={this.nextStep} />
+                );
+            case 4:
+                return <Devices />;
+            case 5:
+                return <Submit onSubmit={this.handleFormSubmit} />;
+            default:
+                return false;
+        }
+    }
+
+    render() {
+        const {
+            processingDefault,
+            step,
+            web,
+            dns,
+        } = this.props.install;
+
+        return (
+            <Fragment>
+                {processingDefault && <Loading />}
+                {!processingDefault &&
+                    <Fragment>
+                        <div className="setup">
+                            <div className="setup__container">
+                                <img src={logo} className="setup__logo" alt="logo" />
+                                {this.renderPage(step, { web, dns })}
+                                <Progress step={step} />
+                            </div>
+                        </div>
+                        <Footer />
+                    </Fragment>
+                }
+            </Fragment>
+        );
+    }
+}
+
+Setup.propTypes = {
+    getDefaultAddresses: PropTypes.func.isRequired,
+    setAllSettings: PropTypes.func.isRequired,
+    nextStep: PropTypes.func.isRequired,
+    prevStep: PropTypes.func.isRequired,
+    install: PropTypes.object.isRequired,
+    step: PropTypes.number,
+    web: PropTypes.object,
+    dns: PropTypes.object,
+};
+
+const mapStateToProps = (state) => {
+    const { install } = state;
+    const props = { install };
+    return props;
+};
+
+export default connect(
+    mapStateToProps,
+    actionCreators,
+)(Setup);
diff --git a/client/src/install/Setup/renderField.js b/client/src/install/Setup/renderField.js
new file mode 100644
index 00000000..a323f17c
--- /dev/null
+++ b/client/src/install/Setup/renderField.js
@@ -0,0 +1,19 @@
+import React, { Fragment } from 'react';
+
+const renderField = ({
+    input, className, placeholder, type, disabled, autoComplete, meta: { touched, error },
+}) => (
+    <Fragment>
+        <input
+            {...input}
+            placeholder={placeholder}
+            type={type}
+            className={className}
+            disabled={disabled}
+            autoComplete={autoComplete}
+        />
+        {!disabled && touched && (error && <span className="form__message form__message--error">{error}</span>)}
+    </Fragment>
+);
+
+export default renderField;
diff --git a/client/src/install/Setup/validate.js b/client/src/install/Setup/validate.js
new file mode 100644
index 00000000..8a3e1fca
--- /dev/null
+++ b/client/src/install/Setup/validate.js
@@ -0,0 +1,11 @@
+const validate = (values) => {
+    const errors = {};
+
+    if (values.confirm_password !== values.password) {
+        errors.confirm_password = 'Password mismatched';
+    }
+
+    return errors;
+};
+
+export default validate;
diff --git a/client/src/install/index.js b/client/src/install/index.js
new file mode 100644
index 00000000..2905bd4b
--- /dev/null
+++ b/client/src/install/index.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Provider } from 'react-redux';
+
+import '../components/App/index.css';
+import '../components/ui/ReactTable.css';
+import configureStore from '../configureStore';
+import reducers from '../reducers/install';
+import '../i18n';
+import Setup from './Setup';
+
+const store = configureStore(reducers, {}); // set initial state
+ReactDOM.render(
+    <Provider store={store}>
+        <Setup />
+    </Provider>,
+    document.getElementById('root'),
+);
diff --git a/client/src/reducers/install.js b/client/src/reducers/install.js
new file mode 100644
index 00000000..5d6bdf19
--- /dev/null
+++ b/client/src/reducers/install.js
@@ -0,0 +1,29 @@
+import { combineReducers } from 'redux';
+import { handleActions } from 'redux-actions';
+import { reducer as formReducer } from 'redux-form';
+
+import * as actions from '../actions/install';
+
+const install = handleActions({
+    [actions.getDefaultAddressesRequest]: state => ({ ...state, processingDefault: true }),
+    [actions.getDefaultAddressesFailure]: state => ({ ...state, processingDefault: false }),
+    [actions.getDefaultAddressesSuccess]: (state, { payload }) => {
+        const newState = { ...state, ...payload, processingDefault: false };
+        return newState;
+    },
+
+    [actions.nextStep]: state => ({ ...state, step: state.step + 1 }),
+    [actions.prevStep]: state => ({ ...state, step: state.step - 1 }),
+
+    [actions.setAllSettingsRequest]: state => ({ ...state, processingSubmit: true }),
+    [actions.setAllSettingsFailure]: state => ({ ...state, processingSubmit: false }),
+    [actions.setAllSettingsSuccess]: state => ({ ...state, processingSubmit: false }),
+}, {
+    step: 1,
+    processingDefault: true,
+});
+
+export default combineReducers({
+    install,
+    form: formReducer,
+});