diff --git a/app.js b/app.js
deleted file mode 100644
index 35a9c72a80dc22db86a3f5e2a62cc09f53593768..0000000000000000000000000000000000000000
--- a/app.js
+++ /dev/null
@@ -1,336 +0,0 @@
-/**
- * Created by liuzheng on 7/17/16.
- */
-var server = {};
-
-var http = require('http');
-var express = require('express');
-var io = require('socket.io');
-var pty = require('pty.js');
-// var terminal = require('term.js');
-
-var socket;
-var term;
-var buff = [];
-
-server.run = function (options) {
-
-  // create shell process
-  term = pty.fork(
-    process.env.SHELL || 'sh',
-    [],
-    {
-      name: require('fs').existsSync('/usr/share/terminfo/x/xterm-256color')
-        ? 'xterm-256color'
-        : 'xterm',
-      cols: 80,
-      rows: 24,
-      cwd: process.env.HOME
-    }
-  );
-  //
-  // // store term's output into buffer or emit through socket
-  term.on('data', function (data) {
-    return !socket ? buff.push(data) : socket.emit('data', data);
-  });
-
-  // console.log('Created shell with pty master/slave pair (master: %d, pid: %d)', term.fd, term.pid);
-
-  var app = express();
-  var server = http.createServer(app);
-  var apis = express.Router();
-
-  app.use("/", express.static(__dirname + '/dist/')); // 创建服务端
-  // app.use("/socket.io/", express.static(__dirname + '/api/')); // 创建服务端
-  // let term.js handle req/res
-  // app.use(terminal.middleware());
-
-  apis.route('/browser')
-    .post(function (req, res) {
-      // console.log(req);
-      // res.string('');
-      res.json({verified: true, csrf: "liuzheng"})
-    });
-  apis.route('/checklogin')
-    .post(function (req, res) {
-      res.json({logined: true, id: 1, username: "liuzheng", name: "liuzheng"})
-    })
-    .get(function (req, res) {
-      res.json({logined: true})
-    });
-  apis.route('/nav')
-    .get(function (req, res) {
-      res.json([{
-        "id": "File",
-        "name": "Server",
-        "children": [
-          {
-            "id": "NewConnection",
-            "href": "Aaaa",
-            "name": "New connection",
-            "disable": true
-          },
-          {
-            "id": "Connect",
-            "href": "Aaaa",
-            "name": "Connect",
-            "disable": true
-          },
-          {
-            "id": "Disconnect",
-            "click": "Disconnect",
-            "name": "Disconnect"
-          },
-          {
-            "id": "DisconnectAll",
-            "click": "DisconnectAll",
-            "name": "Disconnect all"
-          },
-          {
-            "id": "Duplicate",
-            "href": "Aaaa",
-            "name": "Duplicate",
-            "disable": true
-          },
-          {
-            "id": "Upload",
-            "href": "Aaaa",
-            "name": "Upload",
-            "disable": true
-          },
-          {
-            "id": "Download",
-            "href": "Aaaa",
-            "name": "Download",
-            "disable": true
-          },
-          {
-            "id": " Search",
-            "href": "Aaaa",
-            "name": "Search",
-            "disable": true
-          },
-          {
-            "id": "Reload",
-            "click": "ReloadLeftbar",
-            "name": "Reload"
-          }
-        ]
-      }, {
-        "id": "View",
-        "name": "View",
-        "children": [
-          {
-            "id": "HindLeftManager",
-            "click": "HideLeft",
-            "name": "Hind left manager"
-          },
-          {
-            "id": "SplitVertical",
-            "href": "Aaaa",
-            "name": "Split vertical",
-            "disable": true
-          },
-          {
-            "id": "CommandBar",
-            "href": "Aaaa",
-            "name": "Command bar",
-            "disable": true
-          },
-          {
-            "id": "ShareSession",
-            "href": "Aaaa",
-            "name": "Share session (read/write)",
-            "disable": true
-          },
-          {
-            "id": "Language",
-            "href": "Aaaa",
-            "name": "Language",
-            "disable": true
-          }]
-      }, {
-        "id": "Help",
-        "name": "Help",
-        "children": [
-          {
-            "id": "EnterLicense",
-            "click": "EnterLicense",
-            "name": "Enter License"
-          },
-          {
-            "id": "Website",
-            "click": "Website",
-            "name": "Website"
-          },
-          {
-            "id": "BBS",
-            "click": "BBS",
-            "name": "BBS"
-          }]
-      }])
-    });
-  apis.route('/replay')
-    .get(function (req, res) {
-      res.json({
-        "type": "json"
-      })
-    });
-  apis.route('/perms/v1/user/my/asset-groups-assets/')
-    .get(function (req, res) {
-      res.json([
-        {
-          "id": 0,
-          "name": "ungrouped",
-          "assets": []
-        },
-        {
-          "id": 1,
-          "name": "Default",
-          "comment": "Default asset group",
-          "assets": [
-            {
-              "id": 2,
-              "hostname": "192.168.1.6",
-              "ip": "192.168.2.6",
-              "port": 22,
-              "system": "windows",
-              "system_users": [
-                {
-                  "id": 1,
-                  "name": "web",
-                  "username": "web",
-                  "protocol": "ssh",
-                  "auth_method": "P",
-                  "auto_push": true
-                }
-              ]
-            },
-            {
-              "id": 4,
-              "hostname": "testserver123",
-              "ip": "123.57.183.135",
-              "port": 8022,
-              "system": "linux",
-              "system_users": [
-                {
-                  "id": 1,
-                  "name": "web",
-                  "username": "web",
-                  "protocol": "ssh",
-                  "auth_method": "P",
-                  "auto_push": true
-                }
-              ]
-            }
-          ]
-        },
-        {
-          "id": 4,
-          "name": "java",
-          "comment": "",
-          "assets": [
-            {
-              "id": 2,
-              "hostname": "192.168.1.6",
-              "ip": "192.168.2.6",
-              "port": 22,
-              "system_users": [
-                {
-                  "id": 1,
-                  "name": "web",
-                  "username": "web",
-                  "protocol": "ssh",
-                  "auth_method": "P",
-                  "auto_push": true
-                }
-              ]
-            }
-          ]
-        },
-        {
-          "id": 3,
-          "name": "数据库",
-          "comment": "",
-          "assets": [
-            {
-              "id": 2,
-              "hostname": "192.168.1.6",
-              "ip": "192.168.2.6",
-              "port": 22,
-              "system_users": [
-                {
-                  "id": 1,
-                  "name": "web",
-                  "username": "web",
-                  "protocol": "ssh",
-                  "auth_method": "P",
-                  "auto_push": true
-                }
-              ]
-            }
-          ]
-        },
-        {
-          "id": 2,
-          "name": "运维组",
-          "comment": "",
-          "assets": [
-            {
-              "id": 2,
-              "hostname": "192.168.1.6",
-              "ip": "192.168.2.6",
-              "port": 22,
-              "system_users": [
-                {
-                  "id": 1,
-                  "name": "web",
-                  "username": "web",
-                  "protocol": "ssh",
-                  "auth_method": "P",
-                  "auto_push": true
-                }
-              ]
-            }
-          ]
-        }
-      ])
-    });
-
-  app.use("/api", apis);
-  // let server listen on the port
-  options = options || {};
-  server.listen(options.port || 3000);
-
-  // let socket.io handle sockets
-  io = io.listen(server, {log: false});
-
-  io.sockets.on('connection', function (s) {
-    // when connect, store the socket
-    socket = s;
-
-    // handme incoming data (client -> server)
-    socket.on('data', function (data) {
-      term.write(data);
-    });
-
-    socket.on('resize', function (data) {
-      term.resize(data[0], data[1]);
-      console.log(data)
-    });
-    // handle connection lost
-    socket.on('disconnect', function () {
-      socket = null;
-    });
-
-    // send buffer data to client
-    while (buff.length) {
-      socket.emit('data', buff.shift());
-    }
-  });
-};
-
-
-server.run({port: 3000});
-
-console.log('Please open your browser with http://127.0.0.1:3000');
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 5a668475734e4155c4f8741a629f0840b13a9195..d01fec157a8dfd82a7ea5b5e66d3e42393a26893 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -64,6 +64,7 @@ import {SettingPageLdapComponent} from './setting-page/ldap/ldap.component';
 import {SettingPageTerminalComponent} from './setting-page/terminal/terminal.component';
 import {SettingPageS3Component} from './setting-page/s3/s3.component';
 import {TransPipe} from './trans.pipe';
+import {MAT_LABEL_GLOBAL_OPTIONS} from '@angular/material';
 
 @NgModule({
   imports: [
@@ -136,7 +137,9 @@ import {TransPipe} from './trans.pipe';
     LocalStorageService,
     DialogService,
     CookieService,
-    NGXLogger
+    NGXLogger,
+    {provide: MAT_LABEL_GLOBAL_OPTIONS, useValue: {float: 'always'}}
+
   ]
 })
 export class AppModule {
diff --git a/src/app/elements/leftbar/leftbar.component.ts b/src/app/elements/leftbar/leftbar.component.ts
index eb4d95126f8724706109efe2feb469815c30ef58..4016656892e5b16cc6725aadb6e370170ff033e2 100644
--- a/src/app/elements/leftbar/leftbar.component.ts
+++ b/src/app/elements/leftbar/leftbar.component.ts
@@ -1,5 +1,6 @@
 import {Component, OnInit} from '@angular/core';
 import {FormBuilder, FormGroup} from '@angular/forms';
+import {Router} from '@angular/router';
 
 @Component({
   selector: 'app-element-leftbar',
@@ -95,7 +96,8 @@ export class ElementLeftbarComponent implements OnInit {
   active: number;
   active2: number;
 
-  constructor(fb: FormBuilder) {
+  constructor(fb: FormBuilder,
+              private _router: Router) {
     this.options = fb.group({
       'fixed': true,
       'top': 0,
@@ -111,7 +113,11 @@ export class ElementLeftbarComponent implements OnInit {
 
   gotoLink(link: string, index: number, index2: number) {
     if (link) {
-      window.location.href = link;
+      if (link === '/luna/setting') {
+        this._router.navigate(['setting']);
+      } else {
+        window.location.href = link;
+      }
     }
     this.active = index;
     this.active2 = index2;
diff --git a/src/app/setting-page/email/email.component.html b/src/app/setting-page/email/email.component.html
index de079904bd7fd032e44f1822898cdf3d82823f1c..a33b96c9eb163b6c6290faa5e67d8085170b5f76 100644
--- a/src/app/setting-page/email/email.component.html
+++ b/src/app/setting-page/email/email.component.html
@@ -1,3 +1,58 @@
-<p>
-  email works!
-</p>
+<div class="email-form">
+  <mat-form-field hintLabel="">
+    <input matInput #input maxlength="10" placeholder="{{'SMTP host'|trans}}">
+  </mat-form-field>
+  <mat-form-field hintLabel="">
+    <input matInput #input maxlength="10" placeholder="{{'SMTP port'|trans}}">
+  </mat-form-field>
+  <mat-form-field hintLabel="">
+    <input matInput #input maxlength="10"
+           [formControl]="emailFormControl"
+           [errorStateMatcher]="matcher"
+           placeholder="{{'SMTP user'|trans}}">
+    <mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">
+      {{'Please enter a valid email address'|trans}}
+    </mat-error>
+    <mat-error *ngIf="emailFormControl.hasError('required')">
+      <strong>{{'Email is required'|trans}}</strong>
+    </mat-error>
+  </mat-form-field>
+  <mat-form-field hintLabel="{{'Some provider use token except password'|trans}}">
+    <input matInput #input maxlength="10"
+           [type]="hide ? 'password' : 'text'"
+           placeholder="{{'SMTP password'|trans}}">
+    <mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility' : 'visibility_off'}}</mat-icon>
+
+  </mat-form-field>
+  <mat-form-field
+    [hideRequiredMarker]="options.value.hideRequired"
+    [floatLabel]="options.value.floatLabel">
+    <mat-select required>
+      <mat-option value="yes">{{'Yes'|trans}}</mat-option>
+      <mat-option value="no">{{'No'|trans}}</mat-option>
+    </mat-select>
+    <mat-placeholder>
+      <b>{{'Use SSL'|trans}}</b>
+    </mat-placeholder>
+    <mat-hint>{{'If SMTP port is 465, may be select'|trans}}</mat-hint>
+  </mat-form-field>
+  <mat-form-field
+    [hideRequiredMarker]="options.value.hideRequired"
+    [floatLabel]="options.value.floatLabel">
+    <mat-select required>
+      <mat-option value="yes">{{'Yes'|trans}}</mat-option>
+      <mat-option value="no">{{'No'|trans}}</mat-option>
+    </mat-select>
+    <mat-placeholder>
+      <b>{{'Use TLS'|trans}}</b>
+    </mat-placeholder>
+    <mat-hint>{{'If SMTP port is 587, may be select'|trans}}</mat-hint>
+  </mat-form-field>
+  <br>
+  <div class="button-row">
+    <button mat-raised-button>{{ 'Test connection' | trans }}</button>
+    <button mat-raised-button>{{ 'Reset' | trans }}</button>
+    <button mat-raised-button color="primary">{{ 'Submit' | trans }}</button>
+  </div>
+  <br/>
+</div>
diff --git a/src/app/setting-page/email/email.component.scss b/src/app/setting-page/email/email.component.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..40161d1c12138656d821ab8e58afc7426ce6b38e 100644
--- a/src/app/setting-page/email/email.component.scss
+++ b/src/app/setting-page/email/email.component.scss
@@ -0,0 +1,12 @@
+.email-form {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  max-width: 400px;
+  margin: auto;
+  font-size: 14pt;
+}
+
+.email-form > * {
+  width: 100%;
+}
diff --git a/src/app/setting-page/email/email.component.ts b/src/app/setting-page/email/email.component.ts
index 35108fe2778fc2e1370c673f580cae9f819cf8c4..e18b9ae03b23ebd35713e6faafac64d16bbeca52 100644
--- a/src/app/setting-page/email/email.component.ts
+++ b/src/app/setting-page/email/email.component.ts
@@ -1,4 +1,14 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
+import {FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm, Validators} from '@angular/forms';
+import {ErrorStateMatcher} from '@angular/material/core';
+
+/** Error when invalid control is dirty, touched, or submitted. */
+export class MyErrorStateMatcher implements ErrorStateMatcher {
+  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+    const isSubmitted = form && form.submitted;
+    return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
+  }
+}
 
 @Component({
   selector: 'app-sp-email',
@@ -7,7 +17,21 @@ import { Component, OnInit } from '@angular/core';
 })
 export class SettingPageEmailComponent implements OnInit {
 
-  constructor() { }
+  emailFormControl = new FormControl('', [
+    Validators.required,
+    Validators.email,
+  ]);
+
+  matcher = new MyErrorStateMatcher();
+  hide = true;
+  options: FormGroup;
+
+  constructor(fb: FormBuilder) {
+    this.options = fb.group({
+      hideRequired: false,
+      floatLabel: 'auto',
+    });
+  }
 
   ngOnInit() {
   }