diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 2a1889d7..0f785054 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -5,6 +5,7 @@ import {RouteConfig} from '@angular/router-deprecated';
 
 import {Pages} from './pages';
 import {Login} from './pages/login';
+import {Register} from './pages/register';
 import {AppState} from './app.state';
 import {BaThemeConfigProvider, BaThemeConfig} from './theme';
 import {BaThemeRun} from './theme/directives';
@@ -42,6 +43,11 @@ import {layoutPaths} from './theme/theme.constants';
     name: 'Login',
     component: Login
   },
+  {
+    path: '/register',
+    name: 'Register',
+    component: Register
+  },
   // handle any non-registered route
   // and simply redirects back to dashboard page
   // you can specify any customer 404 page while it's not built in ito ng2-admin
diff --git a/src/app/pages/login/login.html b/src/app/pages/login/login.html
index 1f7b5cc2..9d2bf283 100644
--- a/src/app/pages/login/login.html
+++ b/src/app/pages/login/login.html
@@ -1,7 +1,7 @@
 <div class="auth-main">
   <div class="auth-block">
     <h1>Sign in to Blur Admin</h1>
-    <a href="#" class="auth-link">New to ng2-admin? Sign up!</a>
+    <a [routerLink]="['Register']" class="auth-link">New to ng2-admin? Sign up!</a>
 
     <form class="form-horizontal">
       <div class="form-group row">
@@ -21,7 +21,7 @@
       <div class="form-group row">
         <div class="col-sm-offset-2 col-sm-10">
           <button type="submit" class="btn btn-default btn-auth">Sign in</button>
-          <a href class="forgot-pass">Forgot password?</a>
+          <a [routerLink]="['Login']" class="forgot-pass">Forgot password?</a>
         </div>
       </div>
     </form>
diff --git a/src/app/pages/login/login.scss b/src/app/pages/login/login.scss
index acf1045b..cb03e3ee 100644
--- a/src/app/pages/login/login.scss
+++ b/src/app/pages/login/login.scss
@@ -1,141 +1 @@
-@import '../../theme/sass/conf/conf';
-
-main {
-  min-height: 520px;
-  height: 100%;
-}
-
-$text-color: #ffffff;
-
-.form-control, .form-control:focus {
-  @include placeholderStyle($text-color, 0.9);
-  background-color: rgba(0, 0, 0, .4);
-  border-radius: 5px;
-  color: $text-color;
-}
-.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
-  @include placeholderStyle($text-color, 0.6);
-}
-
-.auth-main {
-  display: flex;
-  align-items: center;
-  height: 100%;
-  width: 100%;
-  position: relative;
-}
-
-.auth-block {
-  width: 540px;
-  margin: 0 auto;
-  border-radius: 5px;
-  @include bg-translucent-dark(0.55);
-  color: #fff;
-  padding: 32px;
-  h1 {
-    font-weight: $font-light;
-    margin-bottom: 28px;
-    text-align: center;
-  }
-  p {
-    font-size: 16px;
-  }
-  a {
-    text-decoration: none;
-    outline: none;
-    transition: all 0.2s ease;
-    color: $primary;
-    &:hover {
-      color: $primary-dark;
-    }
-  }
-
-  .control-label {
-    padding-top: 11px;
-    color: $text-color;
-  }
-
-  .form-group {
-    margin-bottom: 12px;
-  }
-}
-
-.auth-input {
-  width: 300px;
-  margin-bottom: 24px;
-  input {
-    display: block;
-    width: 100%;
-    border: none;
-    font-size: 16px;
-    padding: 4px 10px;
-    outline: none;
-  }
-}
-
-a.forgot-pass {
-  display: block;
-  text-align: right;
-  margin-bottom: -20px;
-  float: right;
-  z-index: 2;
-  position: relative;
-}
-
-.auth-link {
-  display: block;
-  font-size: 16px;
-  text-align: center;
-  margin-bottom: 33px;
-}
-
-.auth-sep {
-  margin-top: 36px;
-  margin-bottom: 24px;
-  line-height: 20px;
-  font-size: 16px;
-  text-align: center;
-  display: block;
-  position: relative;
-  & > span {
-    display: table-cell;
-    width: 30%;
-    white-space: nowrap;
-    padding: 0 24px;
-    color: $text-color;
-    & > span {
-      margin-top: -12px;
-      display: block;
-    }
-  }
-  &:before, &:after {
-    border-top: solid 1px $text-color;
-    content: "";
-    height: 1px;
-    width: 35%;
-    display: table-cell;
-  }
-}
-
-.al-share-auth {
-  text-align: center;
-  .al-share {
-    float: none;
-    margin: 0;
-    padding: 0;
-    display: inline-block;
-    li {
-      margin-left: 24px;
-      &:first-child {
-        margin-left: 0;
-      }
-      i {
-        font-size: 24px;
-      }
-    }
-  }
-}
-
-.btn-auth {
-  color: #ffffff!important;
-}
+@import '../../theme/sass/auth';
diff --git a/src/app/pages/register/index.ts b/src/app/pages/register/index.ts
new file mode 100644
index 00000000..55388b6e
--- /dev/null
+++ b/src/app/pages/register/index.ts
@@ -0,0 +1 @@
+export * from './register.component';
diff --git a/src/app/pages/register/register.component.ts b/src/app/pages/register/register.component.ts
new file mode 100644
index 00000000..eff29e6f
--- /dev/null
+++ b/src/app/pages/register/register.component.ts
@@ -0,0 +1,18 @@
+import {Component, ViewEncapsulation} from '@angular/core';
+
+
+@Component({
+  selector: 'login',
+  encapsulation: ViewEncapsulation.None,
+  directives: [],
+  styles: [require('./register.scss')],
+  template: require('./register.html'),
+})
+export class Register {
+
+  constructor() {
+  }
+
+  ngOnInit() {
+  }
+}
diff --git a/src/app/pages/register/register.html b/src/app/pages/register/register.html
new file mode 100644
index 00000000..7224e171
--- /dev/null
+++ b/src/app/pages/register/register.html
@@ -0,0 +1,45 @@
+<div class="auth-main">
+  <div class="auth-block">
+    <h1>Sign up to Blur Admin</h1>
+    <a [routerLink]="['Login']" class="auth-link">Already have an ng2-admin account? Sign in!</a>
+
+    <form class="form-horizontal">
+      <div class="form-group row">
+        <label for="inputName3" class="col-sm-2 control-label">Name</label>
+
+        <div class="col-sm-10">
+          <input type="text" class="form-control" id="inputName3" placeholder="Full Name">
+        </div>
+      </div>
+      <div class="form-group row">
+        <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
+
+        <div class="col-sm-10">
+          <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
+        </div>
+      </div>
+      <div class="form-group row">
+        <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
+
+        <div class="col-sm-10">
+          <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
+        </div>
+      </div>
+      <div class="form-group row">
+        <div class="col-sm-offset-2 col-sm-10">
+          <button type="submit" class="btn btn-default btn-auth">Sign up</button>
+        </div>
+      </div>
+    </form>
+
+    <div class="auth-sep"><span><span>or Sign up with one click</span></span></div>
+
+    <div class="al-share-auth">
+      <ul class="al-share clearfix">
+        <li><i class="socicon socicon-facebook" title="Share on Facebook"></i></li>
+        <li><i class="socicon socicon-twitter" title="Share on Twitter"></i></li>
+        <li><i class="socicon socicon-google" title="Share on Google Plus"></i></li>
+      </ul>
+    </div>
+  </div>
+</div>
diff --git a/src/app/pages/register/register.scss b/src/app/pages/register/register.scss
new file mode 100644
index 00000000..cb03e3ee
--- /dev/null
+++ b/src/app/pages/register/register.scss
@@ -0,0 +1 @@
+@import '../../theme/sass/auth';
diff --git a/src/app/theme/sass/_auth.scss b/src/app/theme/sass/_auth.scss
new file mode 100644
index 00000000..b848a417
--- /dev/null
+++ b/src/app/theme/sass/_auth.scss
@@ -0,0 +1,141 @@
+@import 'conf/conf';
+
+main {
+  min-height: 520px;
+  height: 100%;
+}
+
+$text-color: #ffffff;
+
+.form-control, .form-control:focus {
+  @include placeholderStyle($text-color, 0.9);
+  background-color: rgba(0, 0, 0, .4);
+  border-radius: 5px;
+  color: $text-color;
+}
+.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
+  @include placeholderStyle($text-color, 0.6);
+}
+
+.auth-main {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  position: relative;
+}
+
+.auth-block {
+  width: 540px;
+  margin: 0 auto;
+  border-radius: 5px;
+  @include bg-translucent-dark(0.55);
+  color: #fff;
+  padding: 32px;
+  h1 {
+    font-weight: $font-light;
+    margin-bottom: 28px;
+    text-align: center;
+  }
+  p {
+    font-size: 16px;
+  }
+  a {
+    text-decoration: none;
+    outline: none;
+    transition: all 0.2s ease;
+    color: $primary;
+    &:hover {
+      color: $primary-dark;
+    }
+  }
+
+  .control-label {
+    padding-top: 11px;
+    color: $text-color;
+  }
+
+  .form-group {
+    margin-bottom: 12px;
+  }
+}
+
+.auth-input {
+  width: 300px;
+  margin-bottom: 24px;
+  input {
+    display: block;
+    width: 100%;
+    border: none;
+    font-size: 16px;
+    padding: 4px 10px;
+    outline: none;
+  }
+}
+
+a.forgot-pass {
+  display: block;
+  text-align: right;
+  margin-bottom: -20px;
+  float: right;
+  z-index: 2;
+  position: relative;
+}
+
+.auth-link {
+  display: block;
+  font-size: 16px;
+  text-align: center;
+  margin-bottom: 33px;
+}
+
+.auth-sep {
+  margin-top: 36px;
+  margin-bottom: 24px;
+  line-height: 20px;
+  font-size: 16px;
+  text-align: center;
+  display: block;
+  position: relative;
+  & > span {
+    display: table-cell;
+    width: 30%;
+    white-space: nowrap;
+    padding: 0 24px;
+    color: $text-color;
+    & > span {
+      margin-top: -12px;
+      display: block;
+    }
+  }
+  &:before, &:after {
+    border-top: solid 1px $text-color;
+    content: "";
+    height: 1px;
+    width: 35%;
+    display: table-cell;
+  }
+}
+
+.al-share-auth {
+  text-align: center;
+  .al-share {
+    float: none;
+    margin: 0;
+    padding: 0;
+    display: inline-block;
+    li {
+      margin-left: 24px;
+      &:first-child {
+        margin-left: 0;
+      }
+      i {
+        font-size: 24px;
+      }
+    }
+  }
+}
+
+.btn-auth {
+  color: #ffffff!important;
+}