diff --git a/app/App.js b/app/App.js
index 2d2e6a1..fbf35cb 100644
--- a/app/App.js
+++ b/app/App.js
@@ -1,22 +1,32 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import React from 'react'
+import ReactDOM from 'react-dom'
 import { Router, Route, IndexRoute, hashHistory } from 'react-router'
 import 'bulma/css/bulma.css'
 import 'font-awesome-webpack'
 
-import iClientComponent from 'components/IClient/IClient';
-import HomeComponent from 'components/Home/Home';
-import ClientComponent from 'components/Client/Client';
-import AreaComponent from 'components/Area/Area';
+import iClientComponent from 'components/IClient/IClient'
+import HomeComponent from 'components/Home/Home'
+import AreaComponent from 'components/Area/Area'
+import ListClientComponent from 'components/Client/List/Client'
+import ProfileClientComponent from 'components/Client/Profile/Client'
+import SaveClientComponent from 'components/Client/Save/Client'
+import CreateVisitComponent from 'components/Visit/Create/Visit'
+import CreateAreaComponent from 'components/Area/Create/Area'
 
 ReactDOM.render(
     <Router history={hashHistory} >
         <Route path="/" component={iClientComponent} >
             <IndexRoute component={HomeComponent} />
-            <Route path="client" component={ClientComponent} />
-            <Route path="area" component={AreaComponent} />
+            <Route path="clients" component={ListClientComponent} />
+            <Route path="client" component={ SaveClientComponent } />
+            <Route path="client/:id/update" component={ SaveClientComponent } />
+            <Route path="client/:id" component={ProfileClientComponent} />
+            <Route path="areas" component={AreaComponent} />
+            <Route path="area" component={CreateAreaComponent} />
+            <Route path="visit/:clientId/" component={CreateVisitComponent} />
             <Route path="visit/:id" component={AreaComponent} />
         </Route>
     </Router>,
     document.getElementById('app')
 );
+
diff --git a/app/components/Area/Area.js b/app/components/Area/Area.js
index f97ac3b..ac8cbf3 100644
--- a/app/components/Area/Area.js
+++ b/app/components/Area/Area.js
@@ -27,7 +27,7 @@ class Area extends React.Component
                 areas: this.generate(response.data.visits)
             });
         }).catch((error) => {
-            if (error.response) {
+            if (typeof error.response.data.error !== 'undefined') {
                 this.setState({error: error.response.data.error});
             }
         });
@@ -57,6 +57,19 @@ class Area extends React.Component
         }
         return (
             <div className="container hello">
+                <div className="level header">
+                    <div className="level-left">
+                        <h2 className="title is-2">iClient</h2>
+                    </div>
+                    <div className="level-right">
+                        <Link to='/area' className="button is-info is-medium">
+                            <span className="icon">
+                                <i className="fa fa-plus"></i>
+                            </span>
+                            <span>New Area</span>
+                        </Link>
+                    </div>
+                </div>
                 { this.state.areas }
             </div>
         );
diff --git a/app/components/Area/Create/Area.js b/app/components/Area/Create/Area.js
new file mode 100644
index 0000000..ffaa789
--- /dev/null
+++ b/app/components/Area/Create/Area.js
@@ -0,0 +1,95 @@
+import React from 'react';
+import { Link, Router } from 'react-router'
+
+import Error from 'components/Error/Error'
+import AreaSelect from 'components/Area/Select/Area'
+import ClientService from 'services/Client'
+import AreaService from 'services/Area'
+
+class Area extends React.Component
+{
+    constructor(props, context) {
+        super(props, context);
+        this.handleSubmit = this.handleSubmit.bind(this);
+        this.state = {
+            error : '',
+            area : {}
+        };
+    }
+
+    handleSubmit(e) {
+        e.preventDefault();
+
+        let form = e.target;
+        let formData = {
+            _id : this.refs.area.value,
+            parent: form.querySelector('[name="parent"]').value
+        };
+
+        this.setState({area: formData});
+
+        AreaService.save(formData).then((response) => {
+            this.context.router.push("/clients");
+        }).catch((error) => {
+
+            this.setState({error: 'Error trying create area'});
+
+            let responseValid = typeof error.response.data !== 'undefined';
+
+            if (responseValid && typeof error.response.data.error !== 'undefined') {
+                this.setState({error: error.response.data.error});
+            }
+        });
+    }
+
+    render() {
+        if (this.state.error) {
+            return (<Error error={this.state.error} />);
+        }
+
+        return (
+            <div className="container">
+                <div className="columns is-vcentered">
+                    <div className="column is-4 is-offset-4">
+                        <h1 className="title">
+                            Create Area
+                        </h1>
+                        <form onSubmit={this.handleSubmit}>
+                            <div className="box">
+                                <label className="label">Area</label>
+                                <p className="control has-icon">
+                                    <input
+                                        ref='area'
+                                        className="input"
+                                        type="text"
+                                        placeholder="Center"
+                                        required="required"
+                                    />
+                                    <i className="fa fa-map-marker" />
+                                </p>
+                                <label className="label">Parent</label>
+                                <AreaSelect
+                                    select={ { name : 'parent' } }
+                                />
+                                <hr />
+                                <p className="control">
+                                    <button className="button is-primary">Save</button>
+                                    <Link to='/clients' className="button">
+                                        <span>Cancel</span>
+                                    </Link>
+                                </p>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+Area.contextTypes = {
+    router: React.PropTypes.object.isRequired
+};
+
+export default Area;
+
diff --git a/app/components/Area/Select/Area.js b/app/components/Area/Select/Area.js
new file mode 100644
index 0000000..12bc999
--- /dev/null
+++ b/app/components/Area/Select/Area.js
@@ -0,0 +1,58 @@
+import React from 'react';
+
+import Error from 'components/Error/Error'
+import AreaService from 'services/Area'
+import styles from 'components/Area/Select/styles.css'
+
+class Area extends React.Component
+{
+    constructor(props, context) {
+        super(props, context);
+        this.state = {
+            error : '',
+            areas : null,
+        };
+    }
+
+    componentWillMount() {
+
+        AreaService.getAll().then((response) => {
+            this.setState({areas: response.data.areas});
+        }).catch((error) => {
+            this.setState({error: 'Error Found: Trying get areas'});
+            let isValidResponse = typeof error.response.data !== 'undefined';
+            if (isValidResponse && typeof error.response.data.error !== 'undefined') {
+                this.setState({error: error.response.data.error});
+            }
+        });
+    }
+
+    render() {
+        if (this.state.error) {
+            return (<Error error={this.state.error} />);
+        }
+        if (!this.state.areas) {
+            return <div>Loading...</div>;
+        }
+
+        const select = Object.assign({}, this.props.select);
+
+        return (
+            <p className="control has-icon">
+                <span className="select">
+                    <select {...select} >
+                        {
+                            this.state.areas.map((area, key) => (
+                                <option value={ area._id } key={ key }>{ area._id}</option>
+                            ))
+                        }
+                    </select>
+                </span>
+                <i className="fa fa-map-marker" aria-hidden="true" />
+            </p>
+        );
+    }
+}
+
+export default Area;
+
diff --git a/app/components/Area/Select/styles.css b/app/components/Area/Select/styles.css
new file mode 100644
index 0000000..5f72fb8
--- /dev/null
+++ b/app/components/Area/Select/styles.css
@@ -0,0 +1,4 @@
+span.select select {
+    padding-left: 30px;
+}
+
diff --git a/app/components/Client/Client.js b/app/components/Client/Client.js
deleted file mode 100644
index 26c602e..0000000
--- a/app/components/Client/Client.js
+++ /dev/null
@@ -1,66 +0,0 @@
-import React from 'react';
-
-import ClientService from 'services/Client';
-import Error from 'components/Error/Error'
-
-class Client extends React.Component
-{
-    constructor(props) {
-        super(props);
-        this.state = {
-            clients : [],
-            error : ''
-        };
-        this.getClients();
-    }
-
-    getClients() {
-        ClientService.getClients().then((response) => {
-            this.setState({clients: response.data.clients});
-        }).catch((error) => {
-            this.setState({error: 'Error Found: Trying get client'});
-            if (error.response) {
-                this.setState({error: error.response.data.error});
-            }
-        });
-    }
-
-    render() {
-        if (this.state.error) {
-            return (<Error error={this.state.error} />);
-        }
-        const clientList = this.state.clients.map((client, key) => {
-            return (
-                <tr key={key} >
-                    <td>{ client.name }</td>
-                    <td>{ client.address }</td>
-                    <td>{ client.city }</td>
-                    <td className="is-icon"> <a href="#"> <i className="fa fa-calendar"></i> </a> </td>
-                    <td className="is-icon"> <a href="#"> <i className="fa fa-search"></i>   </a> </td>
-                </tr>
-            );
-        });
-
-        return (
-            <div className="container hello">
-                <table className="table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Address</th>
-                            <th>City</th>
-                            <th></th>
-                            <th></th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        { clientList }
-                    </tbody>
-                </table>
-            </div>
-        );
-    }
-}
-
-export default Client;
-
diff --git a/app/components/Client/List/Client.js b/app/components/Client/List/Client.js
new file mode 100644
index 0000000..9d4a71b
--- /dev/null
+++ b/app/components/Client/List/Client.js
@@ -0,0 +1,90 @@
+import React from 'react';
+import { Link } from 'react-router'
+
+import ClientService from 'services/Client'
+import Error from 'components/Error/Error'
+
+class Client extends React.Component
+{
+    constructor(props) {
+        super(props);
+        this.state = {
+            clients : null,
+            error : ''
+        };
+        this.getClients();
+    }
+
+    getClients() {
+        ClientService.getClients().then((response) => {
+            this.setState({clients: response.data.clients});
+        }).catch((error) => {
+            this.setState({error: 'Error Found: Trying get client'});
+            if (typeof error.response.data.error !== 'undefined') {
+                this.setState({error: error.response.data.error});
+            }
+        });
+    }
+
+    render() {
+        if (this.state.error) {
+            return (<Error error={this.state.error} />);
+        }
+        if (!this.state.clients) {
+            return <div>Loading...</div>;
+        }
+        const clientList = this.state.clients.map((client, key) => {
+            let line = ((key % 2) ? 'is-success' : 'is-info');
+            return (
+                <tr key={key}>
+                    <td>
+                        { client.name }
+                    </td>
+                    <td>
+                        { client.address } - { client.city }
+                    </td>
+                    <td className="is-icon">
+                        <Link to={ `/client/${client._id}` } >
+                            <i className="fa fa-address-card"></i>
+                        </Link>
+                    </td>
+
+                    <td className="is-icon">
+                        <Link to={ `/visit/${client._id}/` } >
+                            <i className="fa fa-calendar-check-o"></i>
+                        </Link>
+                    </td>
+
+                </tr>
+            );
+        });
+
+        return (
+            <section className="">
+                <div className="container hello">
+                    <div className="level header">
+                        <div className="level-left">
+                            <h2 className="title is-2">iClient</h2>
+                        </div>
+                        <div className="level-right">
+                            <Link to='/client' className="button is-info is-medium">
+                                <span className="icon">
+                                    <i className="fa fa-plus"></i>
+                                </span>
+                                <span>New Client</span>
+                            </Link>
+                        </div>
+                    </div>
+                    <table className="table">
+                        <tbody>
+                            { clientList }
+                        </tbody>
+                    </table>
+                </div>
+            </section>
+        );
+    }
+}
+
+export default Client;
+
diff --git a/app/components/Client/Profile/Client.js b/app/components/Client/Profile/Client.js
new file mode 100644
index 0000000..a09e95f
--- /dev/null
+++ b/app/components/Client/Profile/Client.js
@@ -0,0 +1,99 @@
+import React from 'react';
+import { Link } from 'react-router'
+
+import ClientService from 'services/Client'
+import Error from 'components/Error/Error'
+import styles from 'components/Client/Profile/styles.css'
+
+class Client extends React.Component
+{
+    constructor(props) {
+        super(props);
+        this.state = {
+            client : null,
+            error : ''
+        };
+        this.getClient(this.props.params.id);
+    }
+
+    getClient(id) {
+        ClientService.find(id).then((response) => {
+            this.setState({client: response.data.client.shift()});
+        }).catch((error) => {
+            this.setState({error: 'Error Found: Trying get client'});
+            let isValidResponse = typeof error.response.data !== 'undefined'
+            if (typeof error.response.data.error !== 'undefined') {
+                this.setState({error: error.response.data.error});
+            }
+        });
+    }
+
+    render() {
+        if (this.state.error) {
+            return (<Error error={this.state.error} />);
+        }
+        if (!this.state.client) {
+            return <div>Loading...</div>;
+        }
+
+        return (
+            <div className="container column is-12">
+                <div className="section profile-heading profile-heading-color">
+                    <div className="columns">
+                        <div className="column is-2">
+                            <div className="image is-128x128 avatar">
+                                <img src="https://placehold.it/256x256" />
+                            </div>
+                        </div>
+                        <div className="column is-4 name">
+                            <p>
+                                <span className="title is-bold color-black">
+                                    <strong>{this.state.client.name}</strong>
+                                </span>
+                            </p>
+                            <p className="tagline">
+                                <strong>Address: </strong>{this.state.client.address} - {this.state.client.city}
+                            </p>
+                            <p>
+                                <strong>Area: </strong>{this.state.client.area._id}
+                            </p>
+                        </div>
+                        <div className="column is-3 followers has-text-centered">
+                            <p className="stat-val"><strong>{this.state.client.frequency}</strong></p>
+                            <p className="stat-key">Frequency</p>
+                        </div>
+                        <div className="column is-3 followers has-text-centered">
+                            <p className="stat-val"><strong>{this.state.client.ability}</strong></p>
+                            <p className="stat-key">Ability</p>
+                        </div>
+                    </div>
+                </div>
+                <div className="profile-options">
+                    <nav className="nav">
+                        <div className="nav-center nav-menu is-active">
+                            <span className="nav-item">
+                                <Link to={ `/visit/${this.state.client._id}/` } className='button'>
+                                    <span className="icon">
+                                        <i className="fa fa-calendar-check-o"></i>
+                                    </span>
+                                    <span>Visited</span>
+                                </Link>
+                            </span>
+                            <span className="nav-item">
+                                <Link to={ `/client/${this.state.client._id}/update` } className='button'>
+                                    <span className="icon">
+                                        <i className="fa fa-pencil"></i>
+                                    </span>
+                                    <span>Update</span>
+                                </Link>
+                            </span>
+                        </div>
+                    </nav>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default Client;
+
diff --git a/app/components/Client/Profile/styles.css b/app/components/Client/Profile/styles.css
new file mode 100644
index 0000000..baad97b
--- /dev/null
+++ b/app/components/Client/Profile/styles.css
@@ -0,0 +1,71 @@
+body {
+  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+}
+.container.profile {
+  margin-top:50px;
+}
+.profile-heading {
+  margin: 20px 0;
+  padding-bottom: 30px;
+}
+.profile-heading .name {
+  border-right: 1px solid #f1f1f1;
+  margin:-30px 0;
+  padding: 40px 30px 0 30px;
+}
+.profile-heading .followers, .profile-heading .following {
+  border-right: 1px solid #f1f1f1;
+  margin:-30px 0;
+  padding: 70px 30px;
+}
+.profile-heading .likes {
+  margin:-30px 0;
+  padding: 70px 30px;
+}
+.profile-heading .stat-key {
+  font-size: 20px;
+  font-weight: 200;
+}
+.profile-heading .stat-val {
+  font-size: 35px;
+  font-weight: bold;
+}
+.profile-options {
+  background-color: #f1f1f1;
+  margin:-20px 0 20px 0;
+}
+.profile-options .link a {
+  padding:18px;
+  font-size: 18px;
+}
+.profile-options .link .icon {
+  font-size: 16px;
+  padding-top:2px;
+}
+.tagline {
+  padding:20px 0;
+  font-size: 16px;
+  line-height: 1.4;
+}
+.avatar {
+  float: right;
+}
+.follow {
+  float: right;
+}
+.avatar img {
+  border-radius: 200px;
+}
+p.title.is-bold {
+  font-weight: bold;
+}
+.card .timestamp {
+  float:right;
+  color:#bbb;
+}
+.profile-heading-color {
+    color: #333;
+}
+.color-black {
+    color: black !important;
+}
diff --git a/app/components/Client/Save/Client.js b/app/components/Client/Save/Client.js
new file mode 100644
index 0000000..e670146
--- /dev/null
+++ b/app/components/Client/Save/Client.js
@@ -0,0 +1,224 @@
+import React from 'react';
+import { Link, Router } from 'react-router'
+
+import Error from 'components/Error/Error'
+import AreaService from 'services/Area'
+import ClientService from 'services/Client'
+import styles from 'components/Client/Save/styles.css'
+
+class Client extends React.Component
+{
+    constructor(props, context) {
+        super(props, context);
+        this.handleSubmit = this.handleSubmit.bind(this);
+        this.formatFormData = this.formatFormData.bind(this);
+        this.loadClient = this.loadClient.bind(this);
+        this.handleChange = this.handleChange.bind(this);
+        this.state = {
+            error : '',
+            areas : null,
+            client: {}
+        };
+    }
+
+    loadClient(id) {
+        ClientService.find(id).then((response) => {
+            let client =  response.data.client.shift();
+            client.createdAt = ''
+            client.updatedAt = ''
+            client.area = client.area._id
+            this.setState({client: client})
+        }).catch((error) => {
+            this.setState({error: 'Error Found: Trying get client ' + id});
+            let isValidResponse = typeof error.response.data !== 'undefined'
+            if (isValidResponse && typeof error.response.data.error !== 'undefined') {
+                this.setState({error: error.response.data.error});
+            }
+        });
+    }
+
+    componentWillMount() {
+
+        if (typeof this.props.params !== 'undefined' && typeof this.props.params.id !== 'undefined') {
+            this.loadClient(this.props.params.id);
+        }
+
+        AreaService.getAll().then((response) => {
+            this.setState({areas: response.data.areas});
+        }).catch((error) => {
+            this.setState({error: 'Error Found: Trying get areas'});
+            if (typeof error.response.data.error !== 'undefined') {
+                this.setState({error: error.response.data.error});
+            }
+        });
+    }
+
+    handleChange(event) {
+        let client = this.state.client;
+        client[event.target.name] = event.target.value;
+        this.setState({client : client});
+    }
+
+    formatFormData() {
+        let client = this.state.client;
+        client.area = this.state.areas.filter( (area) => client.area == area._id ).shift();
+        return client;
+    }
+
+    handleSubmit(event) {
+
+        let client = this.formatFormData();
+        let id;
+        if (typeof client._id !== 'undefined') {
+            id = client._id;
+        }
+
+        ClientService.save(client, id).then((response) => {
+            this.context.router.push("/clients");
+        }).catch((error) => {
+
+            this.setState({error: 'Error trying save client'});
+
+            let responseValid = typeof error.response.data !== 'undefined';
+
+            if (responseValid && typeof error.response.data.error !== 'undefined') {
+                this.setState({error: error.response.data.error});
+            }
+        });
+        event.preventDefault();
+    }
+
+    render() {
+        if (this.state.error) {
+            return (<Error error={this.state.error} />);
+        }
+        if (!this.state.areas) {
+            return <div>Loading...</div>;
+        }
+
+        return (
+            <div className="container">
+                <div className="columns is-vcentered">
+                    <div className="column is-4 is-offset-4">
+                        <h1 className="title">
+                            Save Client
+                        </h1>
+                        <form onSubmit={this.handleSubmit}>
+                            <div className="box">
+                                <label className="label">Name</label>
+                                <p className="control has-icon">
+                                    <input
+                                        required='required'
+                                        className="input"
+                                        type="text"
+                                        placeholder="John Smith"
+                                        name='name'
+                                        value={ this.state.client.name }
+                                        onChange={this.handleChange}
+                                    />
+                                    <i className="fa fa-id-card-o" aria-hidden="true" />
+                                </p>
+                                <label className="label">Phone</label>
+                                <p className="control has-icon">
+                                    <input
+                                        pattern="[\(]\d{2}[\)]\d{4,5}[\-]\d{4}"
+                                        className="input"
+                                        type="text"
+                                        placeholder="(21)99999-00000"
+                                        name='phone'
+                                        value={ this.state.client.phone }
+                                        onChange={this.handleChange}
+                                    />
+                                    <i className="fa fa-phone" aria-hidden="true" />
+                                </p>
+                                <label className="label">Address</label>
+                                <p className="control has-icon">
+                                    <input
+                                        required='required'
+                                        className="input"
+                                        type="text"
+                                        placeholder="Street 32 - Nº 23"
+                                        name='address'
+                                        value={ this.state.client.address }
+                                        onChange={this.handleChange}
+                                    />
+                                    <i className="fa fa-address-card" aria-hidden="true" />
+                                </p>
+                                <label className="label">City</label>
+                                <p className="control has-icon">
+                                    <input
+                                        required='required'
+                                        className="input"
+                                        type="text"
+                                        placeholder="London"
+                                        name='city'
+                                        value={ this.state.client.city }
+                                        onChange={this.handleChange}
+                                    />
+                                    <i className="fa fa-address-book" aria-hidden="true" />
+                                </p>
+                                <label className="label">Area</label>
+                                <p className="control has-icon">
+                                    <span className="select">
+                                        <select
+                                            name='area'
+                                            value={ this.state.client.area }
+                                            onChange={this.handleChange}
+                                        >
+                                            {
+                                                this.state.areas.map((area, key) => (
+                                                    <option value={ area._id } key={ key }>{ area._id}</option>
+                                                ))
+                                            }
+                                        </select>
+                                    </span>
+                                    <i className="fa fa-map-marker" aria-hidden="true" />
+                                </p>
+                                <label className="label">Frequency</label>
+                                <p className="control has-icon">
+                                    <input
+                                        required='required'
+                                        className="input"
+                                        type="number"
+                                        placeholder="10"
+                                        name='frequency'
+                                        value={ this.state.client.frequency }
+                                        onChange={this.handleChange}
+                                    />
+                                    <i className="fa fa-refresh" aria-hidden="true" />
+                                </p>
+                                <label className="label">Ability</label>
+                                <p className="control has-icon">
+                                    <input
+                                        required='required'
+                                        className="input"
+                                        type="number"
+                                        placeholder="200"
+                                        name='ability'
+                                        value={ this.state.client.ability }
+                                        onChange={this.handleChange}
+                                    />
+                                    <i className="fa fa-shopping-basket" aria-hidden="true" />
+                                </p>
+                                <hr />
+                                <p className="control">
+                                    <button className="button is-primary">Save</button>
+                                    <Link to='/clients' className="button">
+                                        <span>Cancel</span>
+                                    </Link>
+                                </p>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+Client.contextTypes = {
+    router: React.PropTypes.object.isRequired
+};
+
+export default Client;
+
diff --git a/app/components/Client/Save/styles.css b/app/components/Client/Save/styles.css
new file mode 100644
index 0000000..8ee125e
--- /dev/null
+++ b/app/components/Client/Save/styles.css
@@ -0,0 +1,8 @@
+h1.title {
+    text-align: center;
+    color: #FFFFFF;
+}
+span.select select {
+    padding-left: 30px;
+}
+
diff --git a/app/components/IClient/IClient.js b/app/components/IClient/IClient.js
index d19fa49..3b3f0b2 100644
--- a/app/components/IClient/IClient.js
+++ b/app/components/IClient/IClient.js
@@ -1,7 +1,9 @@
 import React from 'react';
 
-import LoginComponent from 'components/Login/Login';
-import MenuComponent from 'components/Menu/Menu';
+import LoginComponent from 'components/Login/Login'
+import MenuComponent from 'components/Menu/Menu'
+
+import styles from 'components/IClient/styles.css'
 
 class IClient extends React.Component
 {
@@ -14,7 +16,7 @@ class IClient extends React.Component
         return (
             <div>
                 <MenuComponent />
-                <section className="hero is-fullheight is-primary">
+                <section className="body-primary">
                     {this.props.children}
                 </section>
             </div>
diff --git a/app/components/IClient/styles.css b/app/components/IClient/styles.css
new file mode 100644
index 0000000..dab9c29
--- /dev/null
+++ b/app/components/IClient/styles.css
@@ -0,0 +1,5 @@
+.body-primary {
+    min-height: 100vh;
+    background-color: #00d1b2;
+    color: #333;
+}
diff --git a/app/components/Login/Login.js b/app/components/Login/Login.js
index 82783a3..ee69f94 100644
--- a/app/components/Login/Login.js
+++ b/app/components/Login/Login.js
@@ -27,7 +27,7 @@ class Login extends React.Component
             }
         }).catch((error) => {
             this.setState({error: 'Authentication failed'});
-            if (error.response.data) {
+            if (typeof error.response.data.error !== 'undefined') {
                 this.setState({error: error.response.data.error});
             }
         });
@@ -47,22 +47,24 @@ class Login extends React.Component
                                     <div className="box">
                                          <ErrorComponent error={this.state.error} />
                                         <label className="label">Username</label>
-                                        <p className="control">
+                                        <p className="control has-icon">
                                             <input
                                                 ref='username'
                                                 className="input"
                                                 type="text"
                                                 placeholder="Ex: jsmith" 
                                             />
+                                            <i className="fa fa-user" />
                                         </p>
                                         <label className="label">Password</label>
-                                        <p className="control">
+                                        <p className="control has-icon">
                                             <input
                                                 ref='password'
                                                 className="input"
                                                 type="password"
                                                 placeholder="●●●●●●●"
                                             />
+                                            <i className="fa fa-lock" />
                                         </p>
                                         <hr />
                                         <p className="control">
diff --git a/app/components/Menu/Menu.js b/app/components/Menu/Menu.js
index 51edf30..af21a47 100644
--- a/app/components/Menu/Menu.js
+++ b/app/components/Menu/Menu.js
@@ -13,8 +13,8 @@ class Menu extends React.Component{
         this.state = {
             links: [
                 [ '/', 'Home'],
-                ['/client', 'Client'],
-                ['/area', 'Area']
+                ['/clients', 'Clients'],
+                ['/areas', 'Areas']
             ]
         };
     }
diff --git a/app/components/Visit/Create/Visit.js b/app/components/Visit/Create/Visit.js
new file mode 100644
index 0000000..b0b63a5
--- /dev/null
+++ b/app/components/Visit/Create/Visit.js
@@ -0,0 +1,135 @@
+import React from 'react';
+import { Link, Router } from 'react-router'
+
+import Error from 'components/Error/Error'
+import VisitService from 'services/Visit'
+import ClientService from 'services/Client'
+
+class Visit extends React.Component
+{
+    constructor(props, context) {
+        super(props, context);
+        this.handleSubmit = this.handleSubmit.bind(this);
+        this.state = {
+            error : '',
+            client : null,
+            visit_date: new Date(),
+            visit : {}
+        };
+    }
+
+    componentWillMount() {
+        ClientService.find(this.props.params.clientId).then((response) => {
+            this.setState({client: response.data.client.shift()});
+        }).catch((error) => {
+            this.setState({error: 'Error Found: Trying get client'});
+            let validResponse = typeof error.response.data !== 'undefined';
+            if (validResponse && typeof error.response.data.error !== 'undefined') {
+                this.setState({error: error.response.data.error});
+            }
+        });
+    }
+
+    handleSubmit(e) {
+        e.preventDefault();
+
+        let visit = {
+            client : this.state.client,
+            visit_date: this.state.visit_date,
+        };
+
+        for (let i in this.refs) {
+            visit[i] = this.refs[i].value;
+        }
+
+        this.setState({visit: visit});
+
+        VisitService.save(visit).then((response) => {
+            this.context.router.push("/clients");
+        }).catch((error) => {
+
+            this.setState({error: 'Error trying create visit'});
+
+            let responseValid = typeof error.response.data !== 'undefined';
+
+            if (responseValid && typeof error.response.data.error !== 'undefined') {
+                this.setState({error: error.response.data.error});
+            }
+        });
+    }
+
+    render() {
+        if (this.state.error) {
+            return (<Error error={this.state.error} />);
+        }
+
+        if (!this.state.client) {
+            return <div>Loading...</div>;
+        }
+
+        return (
+            <div className="container">
+                <div className="columns is-vcentered">
+                    <div className="column is-4 is-offset-4">
+                        <h1 className="title">
+                            Create Visit
+                        </h1>
+                        <form onSubmit={this.handleSubmit}>
+                            <center>
+                                <div className="card has-text-left">
+                                    <div className="card-content">
+                                        <div className="content">
+                                            <p className="is-5">Name: { this.state.client.name }< /p>
+                                            <p className="is-6">Address: { this.state.client.address }</p>
+                                            <p className="is-6">City: { this.state.client.city }</p>
+                                            <hr />
+                                            <label className="label">Value Received</label>
+                                            <p className="control">
+                                                <input
+                                                    ref="value_received"
+                                                    className="input"
+                                                    type="text"
+                                                    placeholder=""
+                                                    required="required"
+                                                />
+                                            </p>
+                                            <label className="label">Quantity</label>
+                                            <p className="control">
+                                                <input
+                                                    ref="sales_quantity"
+                                                    className="input"
+                                                    type="text"
+                                                    placeholder=""
+                                                    required="required"
+                                                />
+                                            </p>
+                                            <hr />
+                                            <p className="control">
+                                                <button className="button is-primary">Save</button>
+                                                <Link to='/clients' className="button">
+                                                    <span>Cancel</span>
+                                                </Link>
+                                            </p>
+                                        </div>
+                                    </div>
+                                    <div className="card-image">
+                                        <figure className="image is-4by3">
+                                            <img src="http://placehold.it/300x225" alt="" />
+                                        </figure>
+                                    </div>
+                                </div>
+                            </center>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+Visit.contextTypes = {
+    router: React.PropTypes.object.isRequired
+};
+
+export default Visit;
+
diff --git a/app/services/Area.js b/app/services/Area.js
new file mode 100644
index 0000000..816e580
--- /dev/null
+++ b/app/services/Area.js
@@ -0,0 +1,28 @@
+import axios from 'axios';
+
+const Area = {
+
+    getEntryPoint() {
+        return [ HOST, 'api', 'v1', 'area' ];
+    },
+
+    getConfig() {
+        return {
+            headers: {
+                Authorization : window.localStorage.getItem('token')
+            }
+        };
+    },
+
+    getAll() {
+        return axios.get(this.getEntryPoint().join('/'), this.getConfig());
+    },
+
+    save(data) {
+        return axios.post(this.getEntryPoint().join('/'), data, this.getConfig());
+    }
+};
+
+export default Area;
+
+
diff --git a/app/services/Client.js b/app/services/Client.js
index ebf31f9..a94a923 100644
--- a/app/services/Client.js
+++ b/app/services/Client.js
@@ -1,15 +1,38 @@
 import axios from 'axios';
 
-import { HOST } from 'constants/Server';
-
 const Client = {
-    getClients() {
-        let config = {
+
+    getEntryPoint() {
+        return [ HOST, 'api', 'v1', 'client' ];
+    },
+
+    getConfig() {
+        return {
             headers: {
-                Authorization : localStorage.token
+                Authorization : window.localStorage.getItem('token')
             }
         };
-        return axios.get(`${HOST}/api/v1/client`, config);
+    },
+
+    getClients() {
+        return axios.get(this.getEntryPoint().join('/'), this.getConfig());
+    },
+
+    find(id) {
+
+        let url = this.getEntryPoint();
+        url.push(id);
+
+        return axios.get(url.join('/'), this.getConfig());
+    },
+
+    save(client, id = undefined) {
+        if (id !== undefined) {
+            let url = this.getEntryPoint();
+            url.push(id);
+            return axios.put(url.join('/'), client, this.getConfig());
+        }
+        return axios.post(this.getEntryPoint().join('/'), client, this.getConfig());
     }
 };
 
diff --git a/app/services/User.js b/app/services/User.js
index 000bd20..d05f311 100644
--- a/app/services/User.js
+++ b/app/services/User.js
@@ -1,5 +1,4 @@
 import axios from 'axios';
-import { HOST } from 'constants/Server';
 
 const User = {
     login(username, password) {
diff --git a/app/services/Visit.js b/app/services/Visit.js
index 86772be..8c46aa5 100644
--- a/app/services/Visit.js
+++ b/app/services/Visit.js
@@ -1,15 +1,27 @@
 import axios from 'axios';
 
-import { HOST } from 'constants/Server';
-
 const Visit = {
-    getGroupByArea() {
-        let config = {
+
+    getEntryPoint() {
+        return [ HOST, 'api', 'v1', 'visit' ];
+    },
+
+    getConfig() {
+        return {
             headers: {
-                Authorization : localStorage.token
+                Authorization : window.localStorage.getItem('token')
             }
         };
-        return axios.get(`${HOST}/api/v1/visit/group/area`, config);
+    },
+
+    getGroupByArea() {
+        let url = this.getEntryPoint();
+        url.push('group', 'area');
+        return axios.get(url.join('/'), this.getConfig());
+    },
+
+    save(data) {
+        return axios.post(this.getEntryPoint().join('/'), data, this.getConfig());
     }
 };
 
diff --git a/package.json b/package.json
index 68810a7..b6dd58f 100644
--- a/package.json
+++ b/package.json
@@ -6,12 +6,13 @@
   "dependencies": {
     "axios": "^0.14.0",
     "bulma": "^0.2.1",
-    "font-awesome": "^4.6.3",
+    "font-awesome": "^4.7.0",
     "react": "^15.3.2",
     "react-dom": "^15.3.2",
     "react-router": "^2.8.1"
   },
   "devDependencies": {
+    "axios-mock-adapter": "^1.7.1",
     "babel-core": "^6.17.0",
     "babel-jest": "^16.0.0",
     "babel-loader": "^6.2.5",
@@ -45,7 +46,14 @@
     "modulePaths": [
       "app"
     ],
-    "collectCoverage": true
+    "collectCoverage": true,
+    "globals" : {
+        "HOST" : "http://localhost:3000"
+    },
+    "moduleNameMapper": {
+      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/tests/__mocks__/fileMock.js",
+      "\\.(css|less)$": "<rootDir>/tests/__mocks__/styleMock.js"
+    }
   },
   "author": "",
   "license": "ISC"
diff --git a/tests/Area.test.js b/tests/Area.test.js
index 4c7cbb0..008a66d 100644
--- a/tests/Area.test.js
+++ b/tests/Area.test.js
@@ -3,132 +3,78 @@ jest.dontMock('components/Area/Area');
 jest.dontMock('components/Error/Error');
 jest.dontMock('react');
 jest.dontMock('axios');
+jest.dontMock('axios-mock-adapter');
+jest.dontMock('services/Visit');
 jest.dontMock('../tests/__mocks__/AreasResponseMock');
 jest.dontMock('enzyme');
 
-
 describe('Test Area', () => {
+    require('../tests/__mocks__/LocalStorageMock');
+
     const React = require('react');
     const Enzyme = require('enzyme');
     const shallow = Enzyme.shallow;
+    let axios = require('axios');
+    let MockAdapter = require('axios-mock-adapter');
     let Visit = require('services/Visit').default;
 
     it('Area should show error message', (done) => {
 
-        let error = {response:{data:{error:"Not Found"}}};
-        let promises = [];
+        let response = {error:"Not Found"};
         let Area;
         let component;
+        let mockAdapter = new MockAdapter(axios);
 
-        promises.push(
-            (() => {
-                Visit.getGroupByArea = jest.genMockFunction().mockImplementation(() => {
-                    return new Promise((resolve, reject) => {
-                        throw error;
-                    });
-                })
-            })()
-        );
+        mockAdapter.onGet(HOST + '/api/v1/visit/group/area').reply(404, response);
 
-        promises.push(
-            (() => {
-                Area = require('components/Area/Area').default;
-            })()
-        );
+        Area = require('components/Area/Area').default;
 
-        promises.push(
-            (() => {
-                component = shallow(
-                    <Area />
-                );
-            })()
+        component = shallow(
+            <Area />
         );
 
-        Promise.all(promises).then(() => {
-            expect(component.state('error')).toEqual('Not Found');
-
-            let errorComponent = shallow(
-                component.instance().generateError(error.response.data.error)
-            );
-
-            expect(errorComponent.find('div').text()).toEqual('Not Found');
+        setTimeout(() => {
+            expect(component.render().text()).toEqual('Not Found');
             done();
-        }).catch((error) => {
-            console.log(error);
-        });
+        }, 0);
     });
 
     it('Area should show nothing if no data', (done) => {
 
-        let error = {data:{error:"Not Found"}};
-        let promises = [];
         let Area;
         let component;
+        let mockAdapter = new MockAdapter(axios);
 
-        promises.push(
-            (() => {
-                Visit.getGroupByArea = jest.genMockFunction().mockImplementation(() => {
-                    return new Promise((resolve, reject) => {
-                        throw error;
-                    });
-                })
-            })()
-        );
+        mockAdapter.onGet(HOST + '/api/v1/visit/group/area').reply(404, {});
 
-        promises.push(
-            (() => {
-                Area = require('components/Area/Area').default;
-            })()
-        );
+        Area = require('components/Area/Area').default;
 
-        promises.push(
-            (() => {
-                component = shallow(
-                    <Area />
-                );
-            })()
+        component = shallow(
+            <Area />
         );
 
-        Promise.all(promises).then(() => {
+        setTimeout(() => {
             expect(component.state('error')).toEqual('');
             done();
-        }).catch((error) => {
-            console.log(error);
-        });
+        }, 0);
     });
 
     it('Area should show mocked data', (done) => {
 
-        let response = {data:require('AreasResponseMock').default};
-        let promises = [];
+        let response = require('AreasResponseMock').default;
         let Area;
         let component;
+        let mockAdapter = new MockAdapter(axios);
 
-        promises.push(
-            (() => {
-                Visit.getGroupByArea = jest.genMockFunction().mockImplementation(() => {
-                    return new Promise((resolve, reject) => {
-                        resolve(response);
-                    });
-                })
-            })()
-        );
+        mockAdapter.onGet(HOST + '/api/v1/visit/group/area').reply(200, response);
 
-        promises.push(
-            (() => {
-                Area = require('components/Area/Area').default;
-            })()
-        );
+        Area = require('components/Area/Area').default;
 
-        promises.push(
-            (() => {
-                component = shallow(
-                    <Area />
-                );
-            })()
+        component = shallow(
+            <Area />
         );
 
-        Promise.all(promises).then(() => {
+        setTimeout(() => {
             expect(
                 shallow(
                     component.state().areas[0]
@@ -140,9 +86,7 @@ describe('Test Area', () => {
                 ).find('.title').at(0).text()
             ).toEqual('South');
             done();
-        }).catch((error) => {
-            console.log(error);
-        });
+        }, 0);
     });
 
 });
diff --git a/tests/Client.test.js b/tests/Client.test.js
deleted file mode 100644
index c2731f3..0000000
--- a/tests/Client.test.js
+++ /dev/null
@@ -1,144 +0,0 @@
-jest.enableAutomock();
-jest.dontMock('components/Client/Client');
-jest.dontMock('components/Error/Error');
-jest.dontMock('react');
-jest.dontMock('axios');
-jest.dontMock('enzyme');
-
-
-describe('Test Client', () => {
-    const React = require('react');
-    const Enzyme = require('enzyme');
-    const shallow = Enzyme.shallow;
-    let ClientService = require('services/Client').default;
-
-    it('Client should show error message', (done) => {
-
-        let error = {response:{data:{error:"Client Not Found"}}};
-        let promises = [];
-        let Client;
-        let component;
-
-        promises.push(
-            (() => {
-                ClientService.getClients = jest.genMockFunction().mockImplementation(() => {
-                    return new Promise((resolve, reject) => {
-                        throw error;
-                    });
-                })
-            })()
-        );
-
-        promises.push(
-            (() => {
-                Client = require('components/Client/Client').default;
-            })()
-        );
-
-        promises.push(
-            (() => {
-                component = shallow(
-                    <Client />
-                );
-            })()
-        );
-
-        Promise.all(promises).then(() => {
-            component.update();
-            expect(component.render().text()).toEqual('Client Not Found');
-            done();
-        }).catch((error) => {
-            console.log(error);
-        });
-    });
-
-    it('Client should show default error message', (done) => {
-
-        let error = {error:"Client Not Found"};
-        let promises = [];
-        let Client;
-        let component;
-
-        promises.push(
-            (() => {
-                ClientService.getClients = jest.genMockFunction().mockImplementation(() => {
-                    return new Promise((resolve, reject) => {
-                        throw error;
-                    });
-                })
-            })()
-        );
-
-        promises.push(
-            (() => {
-                Client = require('components/Client/Client').default;
-            })()
-        );
-
-        promises.push(
-            (() => {
-                component = shallow(
-                    <Client />
-                );
-            })()
-        );
-
-        Promise.all(promises).then(() => {
-            component.update();
-            expect(component.render().text()).toEqual('Error Found: Trying get client');
-            done();
-        }).catch((error) => {
-            console.log(error);
-        });
-    });
-
-    it('Client should show mocked data', (done) => {
-
-        let response = {
-            data: {
-                clients: [
-                    {name: 'Jon Snow', address: '7 Street', city: 'Winterfell'}
-                ]
-            }
-        };
-        let promises = [];
-        let Client;
-        let component;
-
-        promises.push(
-            (() => {
-                ClientService.getClients = jest.genMockFunction().mockImplementation(() => {
-                    return new Promise((resolve, reject) => {
-                        resolve(response);
-                    });
-                })
-            })()
-        );
-
-        promises.push(
-            (() => {
-                Client = require('components/Client/Client').default;
-            })()
-        );
-
-        promises.push(
-            (() => {
-                component = shallow(
-                    <Client />
-                );
-            })()
-        );
-
-        Promise.all(promises).then(() => {
-            component.update();
-            expect(component.find('td').at(0).text()).toEqual('Jon Snow');
-            expect(component.find('td').at(1).text()).toEqual('7 Street');
-            expect(component.find('td').at(2).text()).toEqual('Winterfell');
-            done();
-        }).catch((error) => {
-            console.log(error);
-        });
-    });
-
-});
-
diff --git a/tests/Create.Area.test.js b/tests/Create.Area.test.js
new file mode 100644
index 0000000..31f7924
--- /dev/null
+++ b/tests/Create.Area.test.js
@@ -0,0 +1,260 @@
+jest.enableAutomock();
+jest.dontMock('components/Area/Create/Area');
+jest.dontMock('components/Area/Select/Area');
+jest.dontMock('components/Error/Error');
+jest.dontMock('react');
+jest.dontMock('axios');
+jest.dontMock('axios-mock-adapter');
+jest.dontMock('enzyme');
+jest.dontMock('services/Area');
+
+describe('Test Create Area', () => {
+    require('../tests/__mocks__/LocalStorageMock');
+
+    const React = require('react');
+    const Enzyme = require('enzyme');
+    const shallow = Enzyme.shallow;
+    const mount = Enzyme.mount;
+    const context = {
+        router: {
+            push: (arg) => arg
+        }
+    };
+
+    let axios = require('axios');
+    let MockAdapter = require('axios-mock-adapter');
+    let response;
+
+    it('Should show default error when fails to create area', (done) => {
+
+        let areaInput;
+        let areaSelected;
+        let Area = require('components/Area/Create/Area').default;
+        let mockAdapter = new MockAdapter(axios);
+        let context = {
+            router: {
+                push: (arg) => {
+                    expect(arg).toEqual('/clients');
+                }
+            }
+        };
+        let component = mount(
+            <Area />,
+            { context }
+        );
+        let expected = {
+            _id : 'Test',
+            parent : 'South',
+        }
+        let response = {
+            areas : [
+                {
+                    _id : "Center",
+                },
+                {
+                    _id : "South",
+                }
+            ]
+        };
+
+        mockAdapter
+            .onGet(HOST + '/api/v1/area').reply(200, response)
+            .onPost(HOST + '/api/v1/area').reply(503, { error : 'Error on server'})
+
+        setTimeout(() => {
+
+            try {
+
+                let inputs = {
+                    area : component.find('input'),
+                    parent : component.find('select'),
+                }
+
+                areaInput = component.find('input');
+                areaInput.node.value = 'Test';
+                areaInput.simulate('change', areaInput);
+
+                areaSelected = component.find('select');
+                areaSelected.node.value = 'South';
+                areaSelected.simulate('change', areaSelected);
+
+                component.find('form').simulate('submit', { target: component.find('form').get(0) });
+            } catch (e) {
+                console.log(e);
+            }
+        }, 5);
+
+
+        setTimeout(() => {
+
+            try {
+
+                expect(component.state().area).toEqual(expected);
+                expect(component.state().error).toEqual('Error on server');
+                done();
+            } catch (e) {
+                console.log(e);
+            }
+        }, 25);
+    });
+
+    it('Should show default error when fails to create area', (done) => {
+
+        let areaInput;
+        let areaSelected;
+        let Area = require('components/Area/Create/Area').default;
+        let mockAdapter = new MockAdapter(axios);
+        let context = {
+            router: {
+                push: (arg) => {
+                    expect(arg).toEqual('/clients');
+                }
+            }
+        };
+        let component = mount(
+            <Area />,
+            { context }
+        );
+        let expected = {
+            _id : 'Test',
+            parent : 'South',
+        }
+        let response = {
+            areas : [
+                {
+                    _id : "Center",
+                },
+                {
+                    _id : "South",
+                }
+            ]
+        };
+
+        mockAdapter
+            .onGet(HOST + '/api/v1/area').reply(200, response)
+            .onPost(HOST + '/api/v1/area').reply(503)
+
+        setTimeout(() => {
+
+            try {
+
+                let inputs = {
+                    area : component.find('input'),
+                    parent : component.find('select'),
+                }
+
+                areaInput = component.find('input');
+                areaInput.node.value = 'Test';
+                areaInput.simulate('change', areaInput);
+
+                areaSelected = component.find('select');
+                areaSelected.node.value = 'South';
+                areaSelected.simulate('change', areaSelected);
+
+                component.find('form').simulate('submit', { target: component.find('form').get(0) });
+            } catch (e) {
+                console.log(e);
+            }
+        }, 5);
+
+
+        setTimeout(() => {
+
+            try {
+
+                expect(component.state().area).toEqual(expected);
+                expect(component.state().error).toEqual('Error trying create area');
+                done();
+            } catch (e) {
+                console.log(e);
+            }
+        }, 25);
+    });
+
+    it('Should return data on submit', (done) => {
+
+        let areaInput;
+        let areaSelected;
+        let Area = require('components/Area/Create/Area').default;
+        let mockAdapter = new MockAdapter(axios);
+        let context = {
+            router: {
+                push: (arg) => {
+                    expect(arg).toEqual('/clients');
+                }
+            }
+        };
+        let component = mount(
+            <Area />,
+            { context }
+        );
+        let expected = {
+            _id : 'Test',
+            parent : 'South',
+        }
+        let response = {
+            areas : [
+                {
+                    _id : "Center",
+                },
+                {
+                    _id : "South",
+                }
+            ]
+        };
+
+        mockAdapter
+            .onGet(HOST + '/api/v1/area').reply(200, response)
+            .onPost(HOST + '/api/v1/area').reply(201)
+
+        setTimeout(() => {
+
+            try {
+
+                let inputs = {
+                    area : component.find('input'),
+                    parent : component.find('select'),
+                }
+
+                areaInput = component.find('input');
+                areaInput.node.value = 'Test';
+                areaInput.simulate('change', areaInput);
+
+                areaSelected = component.find('select');
+                areaSelected.node.value = 'South';
+                areaSelected.simulate('change', areaSelected);
+
+                component.find('form').simulate('submit', { target: component.find('form').get(0) });
+
+                expect(component.state().area).toEqual(expected);
+                expect(component.state().error).toEqual('');
+                done();
+            } catch (e) {
+                console.log(e);
+            }
+        }, 25);
+    });
+
+    it('Should show default error message', (done) => {
+
+        let mockAdapter = new MockAdapter(axios);
+        let Area = require('components/Area/Create/Area').default;
+        let component = shallow(
+            <Area />,
+            { context }
+        );
+
+        setTimeout(() => {
+
+            try {
+                expect(component.find('h1').text()).toEqual('Create Area');
+                expect(component.find('input').hasClass('input')).toBeTruthy();
+                expect(component.find('button').text()).toEqual('Save');
+                done();
+            } catch(e) {
+                console.log(e);
+            }
+        }, 0);
+    });
+});
+
diff --git a/tests/Create.Visit.test.js b/tests/Create.Visit.test.js
new file mode 100644
index 0000000..f62f8d0
--- /dev/null
+++ b/tests/Create.Visit.test.js
@@ -0,0 +1,281 @@
+jest.enableAutomock();
+jest.dontMock('components/Visit/Create/Visit');
+jest.dontMock('components/Error/Error');
+jest.dontMock('react');
+jest.dontMock('axios');
+jest.dontMock('axios-mock-adapter');
+jest.dontMock('enzyme');
+jest.dontMock('services/Visit');
+jest.dontMock('services/Client');
+
+describe('Test Create Visit', () => {
+    require('../tests/__mocks__/LocalStorageMock');
+
+    const React = require('react');
+    const Enzyme = require('enzyme');
+    const shallow = Enzyme.shallow;
+    const mount = Enzyme.mount;
+    const context = {
+        router: {
+            push: (arg) => arg
+        }
+    };
+
+    let axios = require('axios');
+    let MockAdapter = require('axios-mock-adapter');
+    let response;
+
+    beforeEach(() => {
+        response = {
+            client : [
+                {
+                    _id : '1',
+                    updatedAt : '2016-12-01T12:26:00.903Z',
+                    createdAt : '2016-12-01T12:26:00.903Z',
+                    name : 'Test',
+                    address : 'fdajla',
+                    city : 'fdajlkj',
+                    area : {
+                        _id : 'Center',
+                        parent : '',
+                        __v : 0,
+                        ancestors :[]
+                    },
+                    frequency : 11,
+                    ability : 201,
+                    __v :0
+                }
+            ]
+        };
+    });
+
+    it('Visit should show error when fails to create visit', (done) => {
+
+        let expectedClient = response.client[0];
+        let Visit = require('components/Visit/Create/Visit').default;
+        let mockAdapter = new MockAdapter(axios);
+        let context = {
+            router: {
+                push: (arg) => {
+                    expect(arg).toEqual('/clients');
+                }
+            }
+        };
+        let component = mount(
+            <Visit params={ {clientId : 1} }/>,
+            { context }
+        );
+        let expected = {
+            client : expectedClient,
+            visit_date : component.state().visit_date,
+            value_received : '10',
+            sales_quantity : '10',
+        }
+
+        mockAdapter
+            .onGet(HOST + '/api/v1/client/1').reply(200, response)
+            .onPost(HOST + '/api/v1/visit').reply(503, { error : 'Error on server'});
+
+        setTimeout(() => {
+
+            let inputs = {
+                value_received : component.find('input').at(0),
+                quantity : component.find('input').at(1),
+            }
+
+            for (let input in inputs) {
+                inputs[input].node.value = 10;
+                inputs[input].simulate('change', inputs[input]);
+            }
+            component.find('form').simulate('submit', { target: component.find('form').get(0) });
+
+        }, 5);
+
+        setTimeout(() => {
+
+            try {
+                expect(component.render().text()).toEqual('Error on server');
+                done();
+            } catch (e) {
+                console.log(e);
+            }
+        }, 10);
+    });
+
+    it('Should show error when fails to create visit', (done) => {
+
+        let expectedClient = response.client[0];
+        let Visit = require('components/Visit/Create/Visit').default;
+        let mockAdapter = new MockAdapter(axios);
+        let context = {
+            router: {
+                push: (arg) => {
+                    expect(arg).toEqual('/clients');
+                }
+            }
+        };
+        let component = mount(
+            <Visit params={ {clientId : 1} }/>,
+            { context }
+        );
+        let expected = {
+            client : expectedClient,
+            visit_date : component.state().visit_date,
+            value_received : '10',
+            sales_quantity : '10',
+        }
+
+        mockAdapter
+            .onGet(HOST + '/api/v1/client/1').reply(200, response)
+            .onPost(HOST + '/api/v1/visit').reply(503);
+
+        setTimeout(() => {
+
+            let inputs = {
+                value_received : component.find('input').at(0),
+                quantity : component.find('input').at(1),
+            }
+
+            for (let input in inputs) {
+                inputs[input].node.value = 10;
+                inputs[input].simulate('change', inputs[input]);
+            }
+            component.find('form').simulate('submit', { target: component.find('form').get(0) });
+
+        }, 5);
+
+        setTimeout(() => {
+
+            try {
+                expect(component.render().text()).toEqual('Error trying create visit');
+                done();
+            } catch (e) {
+                console.log(e);
+            }
+        }, 10);
+    });
+
+    it('Should return data on submit', (done) => {
+
+        let expectedClient = response.client[0];
+        let Visit = require('components/Visit/Create/Visit').default;
+        let mockAdapter = new MockAdapter(axios);
+        let context = {
+            router: {
+                push: (arg) => {
+                    expect(arg).toEqual('/clients');
+                }
+            }
+        };
+        let component = mount(
+            <Visit params={ {clientId : 1} }/>,
+            { context }
+        );
+        let expected = {
+            client : expectedClient,
+            visit_date : component.state().visit_date,
+            value_received : '10',
+            sales_quantity : '10',
+        }
+
+        mockAdapter
+            .onGet(HOST + '/api/v1/client/1').reply(200, response)
+            .onPost(HOST + '/api/v1/visit').reply(201);
+
+        setTimeout(() => {
+
+            try {
+
+                let inputs = {
+                    value_received : component.find('input').at(0),
+                    quantity : component.find('input').at(1),
+                }
+
+                for (let input in inputs) {
+                    inputs[input].node.value = 10;
+                    inputs[input].simulate('change', inputs[input]);
+                }
+                component.find('form').simulate('submit', { target: component.find('form').get(0) });
+
+                expect(component.state().client).toEqual(expectedClient);
+                expect(component.state().visit).toEqual(expected);
+                expect(component.state().error).toEqual('');
+                done();
+            } catch (e) {
+                console.log(e);
+            }
+        }, 25);
+    });
+
+    it('Should show mocked data', (done) => {
+
+        let mockAdapter = new MockAdapter(axios);
+        let Visit = require('components/Visit/Create/Visit').default;
+        let component = shallow(
+            <Visit params={ {clientId : 1} }/>,
+            { context }
+        );
+
+        mockAdapter.onGet(HOST + '/api/v1/client/1').reply(200, response);
+
+        setTimeout(() => {
+
+            try {
+                expect(component.find('.content p').at(0).text()).toEqual('Name: Test');
+                expect(component.find('.content p').at(1).text()).toEqual('Address: fdajla');
+                expect(component.find('.content p').at(2).text()).toEqual('City: fdajlkj');
+                expect(component.find('.button').at(0).text()).toEqual('Save');
+                done();
+            } catch(e) {
+                console.log(e);
+            }
+        }, 0);
+    });
+
+    it('Should show error message', (done) => {
+
+        let response = { error:'Client 1 Not Found' };
+        let Visit = require('components/Visit/Create/Visit').default;
+        let mockAdapter = new MockAdapter(axios);
+        let component = shallow(
+            <Visit params={ {clientId : 1} }/>,
+            { context }
+        );
+
+        mockAdapter.onGet(HOST + '/api/v1/client/1').reply(404, response);
+
+        setTimeout(() => {
+
+            try {
+                component.update();
+                expect(component.render().text()).toEqual('Client 1 Not Found');
+                done();
+            } catch(e) {
+                console.log(e);
+            }
+        }, 0);
+    });
+
+    it('Should show default error message', (done) => {
+
+        let mockAdapter = new MockAdapter(axios);
+        let Visit = require('components/Visit/Create/Visit').default;
+        let component = shallow(
+            <Visit params={ {clientId : 1} }/>,
+            { context }
+        );
+
+        mockAdapter.onGet(HOST + '/api/v1/client/1').reply(503);
+
+        setTimeout(() => {
+
+            try {
+                expect(component.render().text()).toEqual('Error Found: Trying get client');
+                done();
+            } catch(e) {
+                console.log(e);
+            }
+        }, 0);
+    });
+});
+
diff --git a/tests/List.Client.test.js b/tests/List.Client.test.js
new file mode 100644
index 0000000..7e1a576
--- /dev/null
+++ b/tests/List.Client.test.js
@@ -0,0 +1,93 @@
+jest.enableAutomock();
+jest.dontMock('components/Client/List/Client');
+jest.dontMock('components/Error/Error');
+jest.dontMock('react');
+jest.dontMock('axios');
+jest.dontMock('axios-mock-adapter');
+jest.dontMock('enzyme');
+jest.dontMock('services/Client');
+
+describe('Test Client', () => {
+    require('../tests/__mocks__/LocalStorageMock');
+
+    const React = require('react');
+    const Enzyme = require('enzyme');
+    const shallow = Enzyme.shallow;
+
+    let axios = require('axios');
+    let MockAdapter = require('axios-mock-adapter');
+
+    it('Client should show error message', (done) => {
+
+        let response = {error:"Client Not Found"};
+        let Client;
+        let component;
+        let mockAdapter = new MockAdapter(axios);
+
+        mockAdapter.onGet(HOST + '/api/v1/client').reply(404, response);
+
+        Client = require('components/Client/List/Client').default;
+
+        component = shallow(
+            <Client />
+        );
+
+        setTimeout(() => {
+            component.update();
+            expect(component.render().text()).toEqual('Client Not Found');
+            done();
+        }, 0);
+    });
+
+    it('Client should show default error message', (done) => {
+
+        let response = {};
+        let Client;
+        let component;
+        let mockAdapter = new MockAdapter(axios);
+
+        mockAdapter.onGet(HOST + '/api/v1/client').reply(503, response);
+
+        Client = require('components/Client/List/Client').default;
+
+        component = shallow(
+            <Client />
+        );
+
+        setTimeout(() => {
+            component.update();
+            expect(component.render().text()).toEqual('Error Found: Trying get client');
+            done();
+        }, 0);
+    });
+
+    it('Client should show mocked data', (done) => {
+
+        let response = {
+            clients: [
+                {name: 'Jon Snow', address: '7 Street', city: 'Winterfell'},
+                {name: 'Cotter Pyke', address: '0 Street', city: 'Castle Black'},
+            ]
+        };
+        let Client;
+        let component;
+        let mockAdapter = new MockAdapter(axios);
+
+        mockAdapter.onGet(HOST + '/api/v1/client').reply(200, response);
+
+        Client = require('components/Client/List/Client').default;
+
+        component = shallow(
+            <Client />
+        );
+
+        setTimeout(() => {
+            component.update();
+            expect(component.find('tbody td').at(0).text()).toEqual('Jon Snow');
+            expect(component.find('tbody td').at(1).text()).toEqual('7 Street - Winterfell');
+            done();
+        }, 0);
+    });
+
+});
+
diff --git a/tests/Login.test.js b/tests/Login.test.js
index 5c8a705..fdd4286 100644
--- a/tests/Login.test.js
+++ b/tests/Login.test.js
@@ -4,6 +4,8 @@ jest.dontMock('components/Error/Error');
 jest.dontMock('react');
 jest.dontMock('axios');
 jest.dontMock('enzyme');
+jest.dontMock('axios-mock-adapter');
+jest.dontMock('services/User');
 
 describe('Test Login', () => {
     require('../tests/__mocks__/LocalStorageMock');
@@ -18,6 +20,9 @@ describe('Test Login', () => {
             push: (arg) => arg
         }
     };
+    let axios = require('axios');
+    let MockAdapter = require('axios-mock-adapter');
+
     let User = require('services/User').default;
 
     it('Login should show form', (done) => {
@@ -27,59 +32,19 @@ describe('Test Login', () => {
             { context }
         );
 
-        expect(component.find('form').length).toEqual(1);
-
-        done();
-    });
-
-    it('Login should get login values', (done) => {
-
-        let Login = require('components/Login/Login').default;
-        let loginInformed;
-        let passwordInformed;
-
-        User.login = jest.genMockFunction().mockImplementation((login, password) => {
-            return new Promise((resolve, reject) => {
-                loginInformed = login;
-                passwordInformed = password;
-            });
-        })
-
-        let component = mount(
-            <Login />,
-            { context }
-        );
-
-        expect(loginInformed).toEqual(undefined);
-        expect(passwordInformed).toEqual(undefined);
-
-        let inputLogin = component.find('form div p input[type="text"]');
-        let inputPassword = component.find('form div p input[type="password"]');
-
-        inputLogin.node.value = 'Astolfo';
-        inputLogin.simulate('change', inputLogin);
-
-        inputPassword.node.value = 'abcd';
-        inputPassword.simulate('change', inputPassword);
+        setTimeout(() => {
+            expect(component.find('form').length).toEqual(1);
 
-        component.find('form').simulate('submit', { target: component.find('form').get(0) });
-
-        expect(loginInformed).toEqual('Astolfo');
-        expect(passwordInformed).toEqual('abcd');
-
-        done();
+            done();
+        }, 0);
     });
 
     it('Login should not set localStorage if success is different from 200', (done) => {
 
         let Login = require('components/Login/Login').default;
-        let promises = [];
+        let mockAdapter = new MockAdapter(axios);
 
-        User.login = jest.genMockFunction().mockImplementation((login, password) => {
-            return new Promise((resolve, reject) => {
-                resolve({data: {success: 201, token: 'token_test'}});
-            });
-        })
+        mockAdapter.onPost(HOST + '/authenticate').reply(201, {success: 201, token: 'token_test'});
 
         let component = mount(
             <Login />,
@@ -97,31 +62,20 @@ describe('Test Login', () => {
 
         expect(window.localStorage.getItem('token')).toEqual(null);
 
-        promises.push(
-            (() => {
-                component.find('form').simulate('submit', { target: component.find('form').get(0) });
-            })()
-        );
+        component.find('form').simulate('submit', { target: component.find('form').get(0) });
 
-        Promise.all(promises).then(() => {
+        setTimeout(() => {
             expect(window.localStorage.getItem('token')).toEqual(null);
             done();
-        }).catch((error) => {
-            console.log(error);
-        });
+        }, 0);
     });
 
-
     it('Login should set localStorage', (done) => {
 
         let Login = require('components/Login/Login').default;
-        let promises = [];
+        let mockAdapter = new MockAdapter(axios);
 
-        User.login = jest.genMockFunction().mockImplementation((login, password) => {
-            return new Promise((resolve, reject) => {
-                resolve({data: {success: 200, token: 'token_test'}});
-            });
-        })
+        mockAdapter.onPost(HOST + '/authenticate').reply(200, {success: 200, token: 'token_test'});
 
         let component = mount(
             <Login />,
@@ -139,31 +93,21 @@ describe('Test Login', () => {
 
         expect(window.localStorage.getItem('token')).toEqual(null);
 
-        promises.push(
-            (() => {
-                component.find('form').simulate('submit', { target: component.find('form').get(0) });
-            })()
-        );
+        component.find('form').simulate('submit', { target: component.find('form').get(0) });
 
-        Promise.all(promises).then(() => {
+        setTimeout(() => {
             expect(window.localStorage.getItem('token')).toEqual('token_test');
             done();
-        }).catch((error) => {
-            console.log(error);
-        });
+        }, 0);
     });
 
     it('Login should show error default on state', (done) => {
 
         let Login = require('components/Login/Login').default;
-        let error = {response:{error:"Another error"}};
-        let promises = [];
+        let response = {};
+        let mockAdapter = new MockAdapter(axios);
 
-        User.login = jest.genMockFunction().mockImplementation((login, password) => {
-            return new Promise((resolve, reject) => {
-                throw error;
-            });
-        })
+        mockAdapter.onPost(HOST + '/authenticate').reply(503, response);
 
         let component = mount(
             <Login />,
@@ -179,32 +123,21 @@ describe('Test Login', () => {
         inputPassword.node.value = 'abcd';
         inputPassword.simulate('change', inputPassword);
 
-        promises.push(
-            (() => {
-                component.find('form').simulate('submit', { target: component.find('form').get(0) });
-            })()
-        );
+        component.find('form').simulate('submit', { target: component.find('form').get(0) });
 
-        Promise.all(promises).then(() => {
+        setTimeout(() => {
             expect(component.state().error).toEqual('Authentication failed');
             done();
-        }).catch((error) => {
-            console.log(error);
-        });
+        }, 0);
     });
 
-
     it('Login should set error received on state', (done) => {
 
         let Login = require('components/Login/Login').default;
-        let error = {response:{data:{error:"User Not Found"}}};
-        let promises = [];
+        let response = { error:"User Not Found" };
+        let mockAdapter = new MockAdapter(axios);
 
-        User.login = jest.genMockFunction().mockImplementation((login, password) => {
-            return new Promise((resolve, reject) => {
-                throw error;
-            });
-        })
+        mockAdapter.onPost(HOST + '/authenticate').reply(401, response);
 
         let component = mount(
             <Login />,
@@ -220,18 +153,12 @@ describe('Test Login', () => {
         inputPassword.node.value = 'abcd';
         inputPassword.simulate('change', inputPassword);
 
-        promises.push(
-            (() => {
-                component.find('form').simulate('submit', { target: component.find('form').get(0) });
-            })()
-        );
+        component.find('form').simulate('submit', { target: component.find('form').get(0) });
 
-        Promise.all(promises).then(() => {
+        setTimeout(() => {
             expect(component.state().error).toEqual('User Not Found');
             done();
-        }).catch((error) => {
-            console.log(error);
-        });
+        }, 0);
     });
 
 });
diff --git a/tests/Menu.test.js b/tests/Menu.test.js
index 68fe50b..ceb4b24 100644
--- a/tests/Menu.test.js
+++ b/tests/Menu.test.js
@@ -20,8 +20,8 @@ describe('Test Menu', () => {
 
         let expectedLinks = [
             ['/', 'Home'],
-            ['/client', 'Client'],
-            ['/area', 'Area'],
+            ['/clients', 'Clients'],
+            ['/areas', 'Areas'],
         ];
 
         expect(component.state().links).toEqual(expectedLinks);
diff --git a/tests/Profile.Client.test.js b/tests/Profile.Client.test.js
new file mode 100644
index 0000000..559fd35
--- /dev/null
+++ b/tests/Profile.Client.test.js
@@ -0,0 +1,122 @@
+jest.enableAutomock();
+jest.dontMock('components/Client/Profile/Client');
+jest.dontMock('components/Error/Error');
+jest.dontMock('react');
+jest.dontMock('react-router');
+jest.dontMock('axios');
+jest.dontMock('axios-mock-adapter');
+jest.dontMock('enzyme');
+jest.dontMock('services/Client');
+
+describe('Test Client', () => {
+    require('../tests/__mocks__/LocalStorageMock');
+
+    const React = require('react');
+    const Enzyme = require('enzyme');
+    const shallow = Enzyme.shallow;
+    const mount = Enzyme.mount;
+
+    let axios = require('axios');
+    let MockAdapter = require('axios-mock-adapter');
+
+    it('Client should show mocked data', (done) => {
+
+        let id = '123abc';
+        let response = {
+                client: [
+                    {
+                        id: id,
+                        name: 'Jon Snow',
+                        address: '7 Street',
+                        city: 'Winterfell',
+                        ability: 200,
+                        frequency: 10,
+                        area: {
+                            _id: 'Center',
+                            parents: 'Center'
+                        }
+                    },
+                ]
+        };
+        let Client;
+        let component;
+        let mockAdapter = new MockAdapter(axios);
+
+        mockAdapter.onGet(HOST + '/api/v1/client/' + id).reply(200, response);
+
+        Client = require('components/Client/Profile/Client').default;
+
+        component = mount(
+            <Client params={ { id: id} }/>
+        );
+
+        setTimeout(() => {
+
+            try {
+                expect(component.find('.name p').at(0).text()).toEqual('Jon Snow');
+                expect(component.find('.name p').at(1).text()).toEqual('Address: 7 Street - Winterfell');
+                expect(component.find('.name p').at(2).text()).toEqual('Area: Center');
+                expect(component.find('.followers p').at(0).text()).toEqual('10');
+                expect(component.find('.followers p').at(1).text()).toEqual('Frequency');
+                expect(component.find('.followers p').at(2).text()).toEqual('200');
+                expect(component.find('.followers p').at(3).text()).toEqual('Ability');
+                expect(component.find('.nav-menu span a').at(0).text()).toEqual('Visited');
+                expect(component.find('.nav-menu span a').at(1).text()).toEqual('Update');
+                done();
+            } catch(e) {
+                console.log(e);
+            }
+        }, 0);
+    });
+
+    it('Client should show error message', (done) => {
+
+        let id = '123abc';
+        let response = { error:"Client Not Found" };
+        let Client;
+        let component;
+        let mockAdapter = new MockAdapter(axios);
+
+        mockAdapter.onGet(HOST + '/api/v1/client/' + id).reply(404, response);
+
+        Client = require('components/Client/Profile/Client').default;
+
+        component = shallow(
+            <Client params={ { id: id} }/>
+        );
+
+        setTimeout(() => {
+
+            component.update();
+            expect(component.render().text()).toEqual('Client Not Found');
+            done();
+        }, 0);
+    });
+
+    it('Client should show default error message', (done) => {
+
+        let id = '123abc';
+        let response = {};
+        let Client;
+        let component;
+        let mockAdapter = new MockAdapter(axios);
+
+        mockAdapter.onGet(HOST + '/api/v1/client/' + id).reply(503, response);
+
+        Client = require('components/Client/Profile/Client').default;
+
+        component = shallow(
+            <Client params={ { id: id} }/>
+        );
+
+        setTimeout(() => {
+
+            component.update();
+            expect(component.render().text()).toEqual('Error Found: Trying get client');
+            done();
+        }, 0);
+    });
+
+});
+
+
diff --git a/tests/Save.Client.test.js b/tests/Save.Client.test.js
new file mode 100644
index 0000000..e6dbe52
--- /dev/null
+++ b/tests/Save.Client.test.js
@@ -0,0 +1,590 @@
+jest.enableAutomock();
+jest.dontMock('components/Client/Save/Client');
+jest.dontMock('components/Error/Error');
+jest.dontMock('react');
+jest.dontMock('axios');
+jest.dontMock('axios-mock-adapter');
+jest.dontMock('enzyme');
+jest.dontMock('services/Area');
+jest.dontMock('services/Client');
+
+describe('Test Save Client', () => {
+    require('../tests/__mocks__/LocalStorageMock');
+
+    const React = require('react');
+    const Enzyme = require('enzyme');
+    const shallow = Enzyme.shallow;
+    const mount = Enzyme.mount;
+    const context = {
+        router: {
+            push: (arg) => arg
+        }
+    };
+
+    let axios = require('axios');
+    let MockAdapter = require('axios-mock-adapter');
+
+    it('Client should show error when fails to save client', (done) => {
+
+        let Client;
+        let component;
+        let mockAdapter = new MockAdapter(axios);
+        let context = {
+            router: {
+                push: (arg) => arg
+            }
+        };
+        let response = {
+            areas : [
+                {
+                    _id : "Center",
+                    parent : "",
+                    __v : 0,
+                    ancestors : []
+                },
+                {
+                    _id : "South",
+                    parent : "",
+                    __v : 0,
+                    ancestors : []
+                }
+            ]
+        };
+
+        mockAdapter
+            .onGet(HOST + '/api/v1/area').reply(200, response)
+            .onPost(HOST + '/api/v1/client').reply(503);
+
+        Client = require('components/Client/Save/Client').default;
+
+        component = mount(
+            <Client />,
+            { context }
+        );
+
+        setTimeout(() => {
+
+            let inputs = {
+                name : component.find('input').at(0),
+                phone : component.find('input').at(1),
+                address : component.find('input').at(2),
+                city : component.find('input').at(3),
+                frequency : component.find('input').at(4),
+                ability : component.find('input').at(5),
+            }
+
+            for (let input in inputs) {
+                inputs[input].node.value = input;
+                inputs[input].simulate('change', input);
+            }
+            component.find('form').simulate('submit', { target: component.find('form').get(0) });
+        }, 5);
+
+        setTimeout(() => {
+
+            try {
+                expect(component.render().text()).toEqual('Error trying save client');
+                done();
+            } catch (e) {
+                console.log(e);
+            }
+        }, 10);
+    });
+
+
+    it('Client should show error when fails to save client', (done) => {
+
+        let Client;
+        let component;
+        let mockAdapter = new MockAdapter(axios);
+        let context = {
+            router: {
+                push: (arg) => arg
+            }
+        };
+        let response = {
+            areas : [
+                {
+                    _id : "Center",
+                    parent : "",
+                    __v : 0,
+                    ancestors : []
+                },
+                {
+                    _id : "South",
+                    parent : "",
+                    __v : 0,
+                    ancestors : []
+                }
+            ]
+        };
+
+        mockAdapter
+            .onGet(HOST + '/api/v1/area').reply(200, response)
+            .onPost(HOST + '/api/v1/client').reply(503, {error : 'Error save client'} );
+
+        Client = require('components/Client/Save/Client').default;
+
+        component = mount(
+            <Client />,
+            { context }
+        );
+
+        setTimeout(() => {
+
+            let inputs = {
+                name : component.find('input').at(0),
+                phone : component.find('input').at(1),
+                address : component.find('input').at(2),
+                city : component.find('input').at(3),
+                frequency : component.find('input').at(4),
+                ability : component.find('input').at(5),
+            }
+
+            for (let input in inputs) {
+                inputs[input].node.value = input;
+                inputs[input].simulate('change', input);
+            }
+            component.find('form').simulate('submit', { target: component.find('form').get(0) });
+        }, 5);
+
+        setTimeout(() => {
+
+            try {
+                expect(component.render().text()).toEqual('Error save client');
+                done();
+            } catch (e) {
+                console.log(e);
+            }
+        }, 10);
+    });
+
+    it('Client should return data on submit', (done) => {
+
+        let Client;
+        let component;
+        let selectArea;
+        let mockAdapter = new MockAdapter(axios);
+        let context = {
+            router: {
+                push: (arg) => {
+                    expect(arg).toEqual('/clients');
+                }
+            }
+        };
+        let response = {
+            areas : [
+                {
+                    _id : "Center",
+                    parent : "",
+                    __v : 0,
+                    ancestors : []
+                },
+                {
+                    _id : "South",
+                    parent : "",
+                    __v : 0,
+                    ancestors : []
+                }
+            ]
+        };
+        let expected = {
+            name : 'name',
+            phone : 'phone',
+            address : 'address',
+            city : 'city',
+            frequency : 'frequency',
+            ability : 'ability',
+            area : {
+                _id : "Center",
+                parent : "",
+                __v : 0,
+                ancestors : []
+            },
+        };
+
+        mockAdapter
+            .onGet(HOST + '/api/v1/area').reply(200, response)
+            .onPost(HOST + '/api/v1/client').reply(201);
+
+        Client = require('components/Client/Save/Client').default;
+
+        component = mount(
+            <Client />,
+            { context }
+        );
+
+        setTimeout(() => {
+
+            try {
+
+                let inputs = {
+                    name : component.find('input').at(0),
+                    phone : component.find('input').at(1),
+                    address : component.find('input').at(2),
+                    city : component.find('input').at(3),
+                    frequency : component.find('input').at(4),
+                    ability : component.find('input').at(5),
+                }
+
+                selectArea = component.find('select')
+                selectArea.node.value = 'Center'
+                selectArea.simulate('change', selectArea);
+
+                for (let input in inputs) {
+                    inputs[input].node.value = input;
+                    inputs[input].simulate('change', input);
+                }
+                component.find('form').simulate('submit', { target: component.find('form').get(0) });
+                expect(component.state().client).toEqual(expected);
+                expect(component.state().error).toEqual('');
+                done();
+            } catch (e) {
+                console.log(e);
+            }
+        }, 0);
+    });
+
+    it('Client should show mocked areas data', (done) => {
+
+        let response = {
+            areas : [
+                {
+                    _id : "Center",
+                    parent : "",
+                    __v : 0,
+                    ancestors : []
+                },
+                {
+                    _id : "South",
+                    parent : "",
+                    __v : 0,
+                    ancestors : []
+                }
+            ]
+        };
+        let Client;
+        let component;
+        let mockAdapter = new MockAdapter(axios);
+
+        mockAdapter.onGet(HOST + '/api/v1/area').reply(200, response);
+
+        Client = require('components/Client/Save/Client').default;
+
+        component = shallow(
+            <Client />,
+            { context }
+        );
+
+        setTimeout(() => {
+
+            expect(component.find('select option').at(0).text()).toEqual('Center');
+            expect(component.find('select option').at(1).text()).toEqual('South');
+            done();
+        }, 0);
+    });
+
+    it('Client should show error message', (done) => {
+
+        let response = { error:"Areas Not Found" };
+        let Client;
+        let component;
+        let mockAdapter = new MockAdapter(axios);
+
+        mockAdapter.onGet(HOST + '/api/v1/area').reply(404, response);
+
+        Client = require('components/Client/Save/Client').default;
+
+        component = shallow(
+            <Client />,
+            { context }
+        );
+
+        setTimeout(() => {
+
+            component.update();
+            expect(component.render().text()).toEqual('Areas Not Found');
+            done();
+        }, 0);
+    });
+
+    it('Client should show default error message', (done) => {
+
+        let response = {};
+        let Client;
+        let component;
+        let mockAdapter = new MockAdapter(axios);
+
+        mockAdapter.onGet(HOST + '/api/v1/area').reply(503, response);
+
+        Client = require('components/Client/Save/Client').default;
+
+        component = shallow(
+            <Client />,
+            { context }
+        );
+
+        setTimeout(() => {
+
+            try {
+                component.update();
+                expect(component.render().text()).toEqual('Error Found: Trying get areas');
+                done();
+            } catch(e) {
+                console.log(e);
+            }
+        }, 0);
+    });
+
+    it('Client should show client loaded', (done) => {
+
+        let Client;
+        let component;
+        let mockAdapter = new MockAdapter(axios);
+        let response = {
+            areas : [
+                {
+                    _id : "Center",
+                    parent : "",
+                    __v : 0,
+                    ancestors : []
+                },
+                {
+                    _id : "South",
+                    parent : "",
+                    __v : 0,
+                    ancestors : []
+                }
+            ]
+        };
+        let clientResponse = {
+            client : [
+                {
+                    _id : "58407735f7b50400132d64e7",
+                    updatedAt : "2016-12-01T19:17:09.262Z",
+                    createdAt : "2016-12-01T19:17:09.262Z",
+                    name : "lfdjal",
+                    address : "fdjaljfdal",
+                    city : "jfladkjl", 
+                    area : {
+                        _id : "Test",
+                        parent : "South",
+                        __v : 0,
+                        ancestors : []
+                    },
+                    frequency : 11, 
+                    ability : 300,
+                    __v : 0
+                }
+            ]
+        };
+        let expectedClientState = Object.assign({}, ...clientResponse.client);
+        expectedClientState.updatedAt = '';
+        expectedClientState.createdAt = '';
+        expectedClientState.area = 'Test';
+
+        mockAdapter
+            .onGet(HOST + '/api/v1/area').reply(200, response)
+            .onGet(HOST + '/api/v1/client/1').reply(200, clientResponse)
+
+        Client = require('components/Client/Save/Client').default;
+
+        component = shallow(
+            <Client params={ { id: 1} }/>,
+            { context }
+        );
+
+        setTimeout(() => {
+
+            try {
+                component.update();
+                expect(component.state().client).toEqual(expectedClientState);
+                expect(component.find('input').at(0).props().value).toEqual('lfdjal');
+                expect(component.find('input').at(1).props().value).toEqual(undefined);
+                expect(component.find('input').at(3).props().value).toEqual('jfladkjl');
+                expect(component.find('input').at(4).props().value).toEqual(11);
+                expect(component.find('input').at(5).props().value).toEqual(300);
+                done();
+            } catch(e) {
+                console.log(e);
+            }
+        }, 0);
+    });
+
+    it('Client should show error message', (done) => {
+
+        let Client;
+        let component;
+        let mockAdapter = new MockAdapter(axios);
+        let response = {
+            areas : [
+                {
+                    _id : "Center",
+                    parent : "",
+                    __v : 0,
+                    ancestors : []
+                },
+                {
+                    _id : "South",
+                    parent : "",
+                    __v : 0,
+                    ancestors : []
+                }
+            ]
+        };
+
+        mockAdapter
+            .onGet(HOST + '/api/v1/area').reply(200, response)
+            .onGet(HOST + '/api/v1/client/1').reply(503, { error : 'Error on server'})
+
+        Client = require('components/Client/Save/Client').default;
+
+        component = shallow(
+            <Client params={ { id: 1} }/>,
+            { context }
+        );
+
+        setTimeout(() => {
+
+            try {
+                component.update();
+                expect(component.render().text()).toEqual('Error on server');
+                done();
+            } catch(e) {
+                console.log(e);
+            }
+        }, 0);
+    });
+
+    it('Client should show default error message when error to find client', (done) => {
+
+        let Client;
+        let component;
+        let mockAdapter = new MockAdapter(axios);
+        let response = {
+            areas : [
+                {
+                    _id : "Center",
+                    parent : "",
+                    __v : 0,
+                    ancestors : []
+                },
+                {
+                    _id : "South",
+                    parent : "",
+                    __v : 0,
+                    ancestors : []
+                }
+            ]
+        };
+
+        mockAdapter
+            .onGet(HOST + '/api/v1/area').reply(200, response)
+            .onGet(HOST + '/api/v1/client/1').reply(503);
+
+        Client = require('components/Client/Save/Client').default;
+
+        component = shallow(
+            <Client params={ { id: 1} }/>,
+            { context }
+        );
+
+        setTimeout(() => {
+
+            try {
+                component.update();
+                expect(component.render().text()).toEqual('Error Found: Trying get client 1');
+                done();
+            } catch(e) {
+                console.log(e);
+            }
+        }, 0);
+    });
+
+    it('Client should update client', (done) => {
+
+        let Client;
+        let component;
+        let selectArea;
+        let mockAdapter = new MockAdapter(axios);
+        let response = {
+            areas : [
+                {
+                    _id : "Center",
+                    parent : "",
+                    __v : 0,
+                    ancestors : []
+                },
+                {
+                    _id : "South",
+                    parent : "",
+                    __v : 0,
+                    ancestors : []
+                }
+            ]
+        };
+        let clientResponse = {
+            client : [
+                {
+                    _id : "58407735f7b50400132d64e7",
+                    updatedAt : "2016-12-01T19:17:09.262Z",
+                    createdAt : "2016-12-01T19:17:09.262Z",
+                    name : "lfdjal",
+                    address : "fdjaljfdal",
+                    city : "jfladkjl", 
+                    area : {
+                        _id : "Test",
+                        parent : "South",
+                        __v : 0,
+                        ancestors : []
+                    },
+                    frequency : 11, 
+                    ability : 300,
+                    __v : 0
+                }
+            ]
+        };
+        let expectedClientState = Object.assign({}, ...clientResponse.client);
+        expectedClientState.updatedAt = '';
+        expectedClientState.createdAt = '';
+        expectedClientState.area = {
+            _id : "Center",
+            parent : "",
+            __v : 0,
+            ancestors : []
+        };
+
+        mockAdapter
+            .onGet(HOST + '/api/v1/area').reply(200, response)
+            .onGet(HOST + '/api/v1/client/1').reply(200, clientResponse)
+            .onPost(HOST + '/api/v1/client').reply(403)
+            .onPut(HOST + '/api/v1/client').reply(204)
+
+        Client = require('components/Client/Save/Client').default;
+
+        component = mount(
+            <Client params={ { id: 1} }/>,
+            { context }
+        );
+
+        setTimeout(() => {
+
+            try {
+
+                selectArea = component.find('select')
+                selectArea.node.value = 'Center'
+                selectArea.simulate('change', selectArea);
+
+                component.find('form').simulate('submit', { target: component.find('form').get(0) });
+
+                component.update();
+                expect(component.state().error).toEqual('');
+                expect(component.state().client).toEqual(expectedClientState);
+                done();
+            } catch(e) {
+                console.log(e);
+            }
+        }, 0);
+    });
+});
+
diff --git a/tests/Select.Area.test.js b/tests/Select.Area.test.js
new file mode 100644
index 0000000..4c2cd2d
--- /dev/null
+++ b/tests/Select.Area.test.js
@@ -0,0 +1,143 @@
+jest.enableAutomock();
+jest.dontMock('components/Area/Select/Area');
+jest.dontMock('components/Error/Error');
+jest.dontMock('react');
+jest.dontMock('axios');
+jest.dontMock('axios-mock-adapter');
+jest.dontMock('enzyme');
+jest.dontMock('services/Area');
+
+describe('Test Select Area', () => {
+    require('../tests/__mocks__/LocalStorageMock');
+
+    const React = require('react');
+    const Enzyme = require('enzyme');
+    const shallow = Enzyme.shallow;
+    const mount = Enzyme.mount;
+    const context = {
+        router: {
+            push: (arg) => arg
+        }
+    };
+
+    let axios = require('axios');
+    let MockAdapter = require('axios-mock-adapter');
+
+    it('Should show props on select element', (done) => {
+
+        let Area = require('components/Area/Select/Area').default;
+        let mockAdapter = new MockAdapter(axios);
+        let component = mount(
+            <Area className='Unknown' select={ { name : 'TestOne', id : 'TestTwo', className : 'class' } }/>
+        );
+
+        mockAdapter.onGet(HOST + '/api/v1/area').reply(200, { areas : [] })
+
+        setTimeout(() => {
+
+            try {
+                expect(
+                    component.find('select').html()
+                ).toEqual(
+                    '<select name="TestOne" id="TestTwo" class="class"></select>'
+                );
+                expect(component.props()).toEqual({
+                    className: 'Unknown',
+                    select: {
+                        name: 'TestOne',
+                        id: 'TestTwo',
+                        className: 'class'
+                    }
+                });
+                done();
+            } catch(e) {
+                console.log(e);
+            }
+        }, 0);
+    });
+
+
+    it('Should show mocked data', (done) => {
+
+        let Area = require('components/Area/Select/Area').default;
+        let mockAdapter = new MockAdapter(axios);
+        let component = mount(
+            <Area />
+        );
+        let response = {
+            areas : [
+                {
+                    _id : "Center",
+                    parent : "",
+                    __v : 0,
+                    ancestors : []
+                },
+                {
+                    _id : "South",
+                    parent : "",
+                    __v : 0,
+                    ancestors : []
+                }
+            ]
+        };
+
+        mockAdapter
+            .onGet(HOST + '/api/v1/area').reply(200, response)
+
+        setTimeout(() => {
+
+            try {
+                expect(component.find('option').at(0).text()).toEqual('Center');
+                expect(component.find('option').at(1).text()).toEqual('South');
+                done();
+            } catch(e) {
+                console.log(e);
+            }
+        }, 0);
+    });
+
+    it('Should show error message', (done) => {
+
+        let response = { error:'Areas Not Found' };
+        let Area = require('components/Area/Select/Area').default;
+        let mockAdapter = new MockAdapter(axios);
+        let component = shallow(
+            <Area />
+        );
+
+        mockAdapter.onGet(HOST + '/api/v1/area').reply(404, response);
+
+        setTimeout(() => {
+
+            try {
+                component.update();
+                expect(component.render().text()).toEqual('Areas Not Found');
+                done();
+            } catch(e) {
+                console.log(e);
+            }
+        }, 0);
+    });
+
+    it('Should show default error message', (done) => {
+
+        let mockAdapter = new MockAdapter(axios);
+        let Area = require('components/Area/Select/Area').default;
+        let component = shallow(
+            <Area />
+        );
+
+        mockAdapter.onGet(HOST + '/api/v1/area').reply(503);
+
+        setTimeout(() => {
+
+            try {
+                expect(component.render().text()).toEqual('Error Found: Trying get areas');
+                done();
+            } catch(e) {
+                console.log(e);
+            }
+        }, 0);
+    });
+});
+
diff --git a/tests/__mocks__/fileMock.js b/tests/__mocks__/fileMock.js
new file mode 100644
index 0000000..86059f3
--- /dev/null
+++ b/tests/__mocks__/fileMock.js
@@ -0,0 +1 @@
+module.exports = 'test-file-stub';
diff --git a/tests/__mocks__/styleMock.js b/tests/__mocks__/styleMock.js
new file mode 100644
index 0000000..f053ebf
--- /dev/null
+++ b/tests/__mocks__/styleMock.js
@@ -0,0 +1 @@
+module.exports = {};
diff --git a/webpack.config.js b/webpack.config.js
index 022ddc6..8bfac55 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -30,6 +30,9 @@ module.exports = {
     plugins: [
         new webpack.optimize.UglifyJsPlugin({
             compress: { warnings: false }
+        }),
+        new webpack.DefinePlugin({
+            HOST: JSON.stringify(process.env.HOST || 'http://localhost:3000')
         })
     ],
     resolve: {