diff --git a/src/app/Routes.js b/src/app/Routes.js
index a7b61597..501af1fd 100644
--- a/src/app/Routes.js
+++ b/src/app/Routes.js
@@ -6,13 +6,15 @@ import DemoPage                             from 'app/demo/components-demo-page'
 
 import MainLayout                           from 'app/main/main-layout';
 import MainHomePage                         from 'app/main/main-home-page';
+import MainSignUpPage                       from 'app/main/main-signup-page';
 
 
 export default (
   <Route handler={App} path='/'>
 
     <Route name='main' path='/app' handler={MainLayout}>
-		<DefaultRoute handler={MainHomePage} />
+		<DefaultRoute name='home' handler={MainHomePage} />
+        <Route name='signup' path='/app/signup' handler={MainSignUpPage}/>
 	</Route>
 
     <Route name='Demo' path='/demo' handler={DemoPage} />
diff --git a/src/app/main/main-layout-header.js b/src/app/main/main-layout-header.js
index b5028d41..6ed920df 100644
--- a/src/app/main/main-layout-header.js
+++ b/src/app/main/main-layout-header.js
@@ -7,7 +7,8 @@ var MainLayoutHeader = React.createClass({
         return (
             <div className="main-layout-header">
                 <div className="main-layout-header--login-links">
-                   <Button type="light">Sign up</Button>
+                   <Button type="light" route={{to:'home'}}>Log in</Button>
+                   <Button type="light" route={{to:'signup'}}>Sign up</Button>
                 </div>
             </div>
         );
diff --git a/src/app/main/main-signup-page.js b/src/app/main/main-signup-page.js
new file mode 100644
index 00000000..a5570d9d
--- /dev/null
+++ b/src/app/main/main-signup-page.js
@@ -0,0 +1,15 @@
+import React              from 'react/addons';
+import {RouteHandler}     from 'react-router';
+
+var MainSignUpPage = React.createClass({
+
+    render() {
+        return (
+            <div>
+                this is the sing up page
+            </div>
+        );
+    }
+});
+
+export default MainSignUpPage;
\ No newline at end of file
diff --git a/src/core-components/button.js b/src/core-components/button.js
index 3b24686c..7fde8ef2 100644
--- a/src/core-components/button.js
+++ b/src/core-components/button.js
@@ -1,19 +1,24 @@
-/**
- * Created by ivan on 16/08/15.
- */
-'use strict';
+import React              from 'react/addons';
+import classNames         from 'classnames';
+import {Navigation}       from 'react-router';
 
-import React from 'react/addons';
-import classNames from 'classnames';
+import callback           from 'utils/callback';
 
 var Button = React.createClass({
 
+    mixins: [Navigation],
+
     propTypes: {
         children: React.PropTypes.node,
         type: React.PropTypes.oneOf([
             'primary',
             'light'
-        ])
+        ]),
+        route: React.PropTypes.shape({
+            to: React.PropTypes. string.isRequired,
+            params: React.PropTypes.object,
+            query: React.PropTypes.query
+        })
     },
 
     getDefaultProps() {
@@ -24,7 +29,7 @@ var Button = React.createClass({
 
     render() {
         return (
-            <button {...this.props} className={this.getClass()}>
+            <button {...this.props} onClick={callback(this.handleClick, this.props.onClick)} className={this.getClass()}>
                 {this.props.children}
             </button>
         );
@@ -39,6 +44,12 @@ var Button = React.createClass({
         classes[this.props.className] = (this.props.className);
 
         return classNames(classes);
+    },
+
+    handleClick() {
+        if (this.props.route) {
+            this.transitionTo(this.props.route.to, this.props.route.param, this.props.route.query);
+        }
     }
 });
 
diff --git a/src/utils/callback.js b/src/utils/callback.js
new file mode 100644
index 00000000..db0115d5
--- /dev/null
+++ b/src/utils/callback.js
@@ -0,0 +1,24 @@
+import _ from 'lodash';
+
+export default function (defaultFunction, callback, options = {}, extraPreventions = []) {
+    return function (nativeEvent) {
+        var preventions = {'default': false};
+        var event = _.extend({}, nativeEvent, options, {
+            preventDefault() {
+                nativeEvent.preventDefault();
+                preventions['default'] = true;
+            }
+        });
+
+        extraPreventions.forEach((prevention) => {
+            preventions[prevention] = false;
+
+            event['is' + prevention.capitalize() + 'Prevented'] = () => preventions[prevention];
+            event['prevent' + prevention.capitalize()] = () => (preventions[prevention] = true);
+        });
+
+        if (typeof callback === 'function') callback(event);
+
+        if (!preventions['default']) defaultFunction(event);
+    };
+};
\ No newline at end of file