diff --git a/src/app/commons/reducer/state.ts b/src/app/commons/reducer/state.ts
new file mode 100644
index 0000000..2cc0057
--- /dev/null
+++ b/src/app/commons/reducer/state.ts
@@ -0,0 +1,2 @@
+export interface State {
+}
diff --git a/src/app/commons/ui/material/material.module.ts b/src/app/commons/ui/material/material.module.ts
index 06f08f7..bf16297 100644
--- a/src/app/commons/ui/material/material.module.ts
+++ b/src/app/commons/ui/material/material.module.ts
@@ -6,7 +6,7 @@ import {
   MatSlideToggleModule, MatInputModule, MatCheckboxModule,
   MatToolbarModule, MatSnackBarModule, MatSidenavModule,
   MatTabsModule, MatSelectModule, MatRadioModule,
-  MatAutocompleteModule, MatFormFieldModule,
+  MatAutocompleteModule, MatFormFieldModule
 } from '@angular/material';
 
 const MATERIAL_MODULES: any[] = [
diff --git a/src/app/packages/member/components/modify/modify-reducer.module.ts b/src/app/packages/member/components/modify/modify-reducer.module.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/packages/member/components/signin/signin.component.html b/src/app/packages/member/components/signin/signin.component.html
index 9202149..dfcdde7 100644
--- a/src/app/packages/member/components/signin/signin.component.html
+++ b/src/app/packages/member/components/signin/signin.component.html
@@ -1 +1,24 @@
-<div>signin</div>
+<mat-card>
+  <mat-card-title>Signin
+      <a class="redirect" [routerLink]="['/auth/sigup']">Register an account</a>
+  </mat-card-title>
+  <mat-card-content>
+      <form fxLayout="column" fxLayoutAlign="start stretch" [formGroup]="signinForm" (ngSubmit)="login()">
+          <mat-form-field class="full-width">
+            <input type="email" id="email" class="input" placeholder="Please enter your email"
+                   formControlName="email" required matInput>
+          </mat-form-field>
+          <div *ngIf="formErrors.email" class="help is-danger">
+              {{ formErrors.email }}
+          </div>
+          <mat-form-field class="full-width">
+              <input type="password" id="password" class="input" placeholder="please  enter your password"
+              formControlName="password" required matInput>
+          </mat-form-field>
+          <div *ngIf="formErrors.password" class="help is-danger">
+              {{ formErrors.password }}
+          </div>
+          <button mat-raised-button color="primary" type="submit" [disabled]="!signinForm.valid" (click)="login()">log in</button>
+      </form>
+  </mat-card-content>
+</mat-card>
\ No newline at end of file
diff --git a/src/app/packages/member/components/signin/signin.component.scss b/src/app/packages/member/components/signin/signin.component.scss
index e69de29..067d3f5 100644
--- a/src/app/packages/member/components/signin/signin.component.scss
+++ b/src/app/packages/member/components/signin/signin.component.scss
@@ -0,0 +1,37 @@
+$gray-lighter: #eceeef !default;
+$image_path: "/assets/images/" !default;
+
+$prefix: 'sigin';
+
+.#{$prefix} {
+
+  &-conainer {
+    min-height: 100%;
+    background-size: cover;
+    padding: 100px;
+  }
+
+  &-main {
+    position: relative;
+    margin: 0 auto;
+    width: 500px;
+  }
+}
+
+.full-width {
+  width: 100%;
+}
+
+.help {
+
+}
+
+.is-danger {
+
+}
+
+.redirect {
+  font-size: 14px;
+  margin-left: 10px;
+  color: #00AAAA;
+}
\ No newline at end of file
diff --git a/src/app/packages/member/components/signin/signin.component.ts b/src/app/packages/member/components/signin/signin.component.ts
index e5b29a3..e1a0c6b 100644
--- a/src/app/packages/member/components/signin/signin.component.ts
+++ b/src/app/packages/member/components/signin/signin.component.ts
@@ -1,4 +1,6 @@
 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 
 @Component({
   selector: 'of-member-signin',
@@ -7,9 +9,35 @@ import { Component, OnInit } from '@angular/core';
 })
 export class SigninComponent implements OnInit {
 
-  constructor() { }
+  signinForm: FormGroup;
+  formErrors = {
+    'email': '',
+    'password': ''
+  };
+
+  constructor(
+    private router: Router,
+    private formBuilder: FormBuilder
+  ) { }
 
   ngOnInit() {
+    this.initForm();
   }
 
+  initForm() {
+    this.signinForm = this.formBuilder.group({
+      'email': ['', [
+        Validators.required,
+        Validators.email
+      ]
+      ],
+      'password': ['', [
+        Validators.pattern('^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]+)$'),
+        Validators.minLength(6),
+        Validators.maxLength(25)
+      ]
+      ],
+    });
+
+  }
 }
diff --git a/src/app/packages/member/components/signin/signin.module.ts b/src/app/packages/member/components/signin/signin.module.ts
index 7b3570d..c7e0c21 100644
--- a/src/app/packages/member/components/signin/signin.module.ts
+++ b/src/app/packages/member/components/signin/signin.module.ts
@@ -1,17 +1,25 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
 import { SigninComponent } from './signin.component';
+import { MaterialModule } from 'app/commons/ui/material/material.module';
 
 
 @NgModule({
   imports: [
     CommonModule,
+    RouterModule,
+    FormsModule,
+    ReactiveFormsModule,
+    MaterialModule,
   ],
   declarations: [
     SigninComponent,
   ],
   exports: [
-    SigninComponent
+    SigninComponent,
   ]
 })
 export class SigninModule { }
diff --git a/src/app/packages/member/member.module.ts b/src/app/packages/member/member.module.ts
new file mode 100644
index 0000000..66c9187
--- /dev/null
+++ b/src/app/packages/member/member.module.ts
@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ModifyModule } from 'app/packages/member/components/modify/modify.module';
+import { SigninModule } from 'app/packages/member/components/signin/signin.module';
+import { SignupModule } from 'app/packages/member/components/signup/signup.module';
+import { ResetPasswordModule } from 'app/packages/member/components/reset-password/reset-password.module';
+import { MemberService } from 'app/packages/member/services/member.service';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    ModifyModule,
+    SigninModule,
+    SignupModule,
+    ResetPasswordModule,
+  ],
+  providers: [
+    MemberService,
+  ]
+})
+export class MemberModule { }
diff --git a/src/app/pages/auth/reset-password/reset-password-page.module.ts b/src/app/pages/auth/reset-password/reset-password-page.module.ts
index 5a4c0f6..b4c420b 100644
--- a/src/app/pages/auth/reset-password/reset-password-page.module.ts
+++ b/src/app/pages/auth/reset-password/reset-password-page.module.ts
@@ -2,13 +2,13 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ResetPasswordPageRoutingModule } from './reset-password-page-routing.module';
 import { ResetPasswordPageComponent } from './reset-password-page.component';
-import { ResetPasswordModule } from 'app/packages/member/components/reset-password/reset-password.module';
+import { MemberModule } from 'app/packages/member/member.module';
 
 @NgModule({
   imports: [
     CommonModule,
     ResetPasswordPageRoutingModule,
-    ResetPasswordModule
+    MemberModule
   ],
   declarations: [
     ResetPasswordPageComponent,
diff --git a/src/app/pages/auth/signin/signin-page.component.html b/src/app/pages/auth/signin/signin-page.component.html
index 5fad28e..5824b4a 100644
--- a/src/app/pages/auth/signin/signin-page.component.html
+++ b/src/app/pages/auth/signin/signin-page.component.html
@@ -1 +1,12 @@
-<of-member-signin></of-member-signin>
\ No newline at end of file
+<div fxLayout="column" fxFlexFill fxLayoutAlign="center center" style="background-image:url('../../../../../assets/images/login11.jpg');
+  margin-top: 10px;
+  height: 100%;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover; ">
+    <div fxLayout="column" >
+        <div class=" mat-elevation-z4">
+          <of-member-signin></of-member-signin>
+        </div>
+    </div>
+</div>
diff --git a/src/app/pages/auth/signup/signup-page.module.ts b/src/app/pages/auth/signup/signup-page.module.ts
index 2cb97a0..b096ff7 100644
--- a/src/app/pages/auth/signup/signup-page.module.ts
+++ b/src/app/pages/auth/signup/signup-page.module.ts
@@ -2,13 +2,13 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SignupPageRoutingModule } from './signup-page-routing.module';
 import { SignupPageComponent } from './signup-page.component';
-import { SignupModule } from 'app/packages/member/components/signup/signup.module';
+import { MemberModule } from 'app/packages/member/member.module';
 
 @NgModule({
   imports: [
     CommonModule,
     SignupPageRoutingModule,
-    SignupModule
+    MemberModule
   ],
   declarations: [
     SignupPageComponent,
diff --git a/src/assets/images/login11.jpg b/src/assets/images/login11.jpg
new file mode 100644
index 0000000..3410407
Binary files /dev/null and b/src/assets/images/login11.jpg differ