diff --git a/frontend/src/components/Header.vue b/frontend/src/components/Header.vue
index f810ec4..830488d 100644
--- a/frontend/src/components/Header.vue
+++ b/frontend/src/components/Header.vue
@@ -25,6 +25,3 @@ export default {
         justify-content: center;
     }
 </style>
-
-
-
diff --git a/frontend/src/components/Layout.vue b/frontend/src/components/Layout.vue
new file mode 100644
index 0000000..146047e
--- /dev/null
+++ b/frontend/src/components/Layout.vue
@@ -0,0 +1,50 @@
+<template>
+    <div class='layout'>
+        <div class='header' >
+            <slot name='header'> </slot>
+        </div>
+        <div class='content' >
+            <slot name='content'></slot>
+        </div>
+        <div class='footer'>
+            <slot name='footer'></slot>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name:'Layout',
+}
+</script>
+
+<style lang="scss" scoped>
+    @import '~@/utils/var.scss';
+    .content {
+        margin-top:$space--m;
+        margin-bottom:$space--m;
+        display:flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+    .footer {
+        display:flex;
+        flex-direction: column;
+        justify-content: center;
+        text-align: center;
+    }
+    .header {
+        text-align: center;
+        font-family: $font-family--header;
+        font-size: $font-size--header;
+    }
+    .layout {
+        color:$font-color--main;
+        font-family:$font-family--main;
+        font-size:$font-size--main;
+        margin-top:$space--l;
+        margin-bottom:$space--l;
+        background-color:$color--bg-main;
+
+    }
+</style>
diff --git a/frontend/src/components/Register.vue b/frontend/src/components/Register.vue
index 0385fbb..832d90d 100644
--- a/frontend/src/components/Register.vue
+++ b/frontend/src/components/Register.vue
@@ -1,64 +1,117 @@
 <template>
-  <div id='app' >
-
-    <form  enctype="multipart/form-data" method="post" >
-
-      <inputText v-model='name.first'>
-           <span slot='label'>Имя</span>
-      </inputText>
-
-      <span v-if='!$v.name.first.required'>Поле должно быть заполнено</span>
-      <span v-if='!$v.name.first.alpha'>Только буквы</span>
-      <br>
-
-      Фамилия
-      <br>
-      <input type='text' v-model='name.last' >
-      <span v-if='!$v.name.last.required'>Поле должно быть заполнено</span>
-      <span v-if='!$v.name.last.alpha'>Только буквы</span>
-      <br>
-
-      Курс
-      <br>
-      <input  type='text' v-model='courseStr' @input='checkCourse'>
-      <span v-if='!$v.courseStr.required'>Поле должно быть заполнено</span>
-      <span v-if='(errCourse)&&($v.courseStr.required)'>Некоррекные данные</span>
-
-      <br>
-      Email
-      <br>
-      <input type='text' v-model='email'>
-      <span v-if='!$v.email.required'>Поле должно быть заполнено</span>
-      <span v-if='!$v.email.email'>Не email</span>
-      <br>
-      Код смерти
-      <br>
-      <input type='text' v-model='deathCode'>
-      <span v-if='!$v.deathCode.required'>Поле должно быть заполнено</span>
-      <span v-if='!$v.deathCode.between'>Число от 1000 до 9999</span>
-      <br>
-      Vk
-      <br>
-      <input type='text' v-model='vk'>
-      <span v-if='!$v.vk.required'>Поле должно быть заполнено</span>
-      <br>
-      Фото
-      <br>
-      <input type='file' id='file' @change='loadPhoto' accept='image/jpeg,image/png'>
-      <span v-if='!$v.photo.required'>Загрузите фото</span>
-      <br><br>
-     <button type='button' @click='register'>Зарегистрироваться</button>
-
-    </form>
-
-  </div>
+    <div id='app' >
+        <form  enctype="multipart/form-data" method="post" >
+            <layout v-show='stage1'>
+                <div slot='header'>
+                    Регистрация
+                </div>
+                <div slot='content'>
+                    <inputText v-model='email'>
+                        <span slot='label'>Email</span>
+                        <div slot='error'>
+                            <span  v-if='!$v.email.required&&err'>Введите email</span>
+                            <span v-if='!$v.email.email'>Не email</span>
+                        </div>
+                    </inputText>
+
+                    <br>
+
+                    <inputText v-model='deathCode'>
+                        <span slot='label'>Код смерти</span>
+                        <div slot='error'>
+                            <span v-if='!$v.deathCode.required&&err'>Введите код</span>
+                            <span v-if='!$v.deathCode.between'>Число от 1000 до 9999</span>
+                        </div>
+                    </inputText>
+
+                    <br>
+
+                    <inputText v-model='deathCodeRep'>
+                        <span slot='label'>Повторите код</span>
+                        <div slot='error'>
+                            <span v-if='!$v.deathCodeRep.required&&err'>Повторите код</span>
+                            <span v-if='!$v.deathCodeRep.sameAsCode&&$v.deathCodeRep.required'>Коды не совпадают</span>
+
+                        </div>
+                    </inputText>
+                </div>
+
+                <div slot='footer'>
+                    <img src='../pictures/arrow.png' width='37px' height='47px' @click='nextStage'>
+                </div>
+            </layout>
+
+            <layout v-show='!stage1' >
+                <div slot='header'>Досье</div>
+                <div slot='content'>
+                    <inputText v-model='name.first'>
+                        <span slot='label'>Имя</span>
+                        <div slot='error'>
+                            <span v-if='!$v.name.first.required&&err'>Введите имя</span>
+                            <span v-if='!$v.name.first.alpha'>Только буквы</span></div>
+                    </inputText>
+
+                    <br>
+
+                    <inputText v-model='name.last'>
+                        <span slot='label'>Фамилия</span>
+                        <div slot='error'>
+                            <span v-if='!$v.name.last.required&&err'>Введите фамилию</span>
+                            <span v-if='!$v.name.last.alpha'>Только буквы</span>
+                        </div>
+                    </inputText>
+
+                    <br>
+
+                    <inputText v-model='courseStr' @input='checkCourse'>
+                        <span slot='label'>Курс</span>
+                        <div slot='error'>
+                            <span v-if='!$v.courseStr.required&&err'>Введите курс</span>
+                            <span v-if='(errCourse)&&($v.courseStr.required)'>Некоррекные данные</span>
+                        </div>
+                    </inputText>
+
+                    <br>
+
+                    <inputText v-model='vk'>
+                        <span slot='label'>Vk</span>
+                        <div slot='error'>
+                             <span v-if='!$v.vk.required&&err'>Введите vk</span>
+                         </div>
+                     </inputText>
+
+                     <br>
+
+                     <inputFile @change='loadPhoto'>
+                         <span slot='label'>Фото</span>
+                         <div slot='error'>
+                              <span v-if='!$v.photo.required&&err'>Загрузите фото</span>
+                          </div>
+                      </inputFile>
+
+                      <br>
+                  </div>
+                  <div slot='footer'>
+                      <div class='arrows'>
+                          <div class='left'>
+                              <img src='../pictures/arrow2.png' width='37px' height='47px' @click='lastStage'>
+                          </div>
+                          <div class='right'>
+                              <img src='../pictures/arrow.png' width='37px' height='47px' @click='register'>
+                          </div>
+                      </div>
+                  </div>
+              </layout>
+          </form>
+      </div>
 </template>
 
 <script>
 import { validationMixin } from 'vuelidate'
-import { required,alpha,email,between } from 'vuelidate/lib/validators'
+import { required,alpha,email,between,sameAs } from 'vuelidate/lib/validators'
 import inputText from './input.vue'
-
+import inputFile from './inputFile.vue'
+import layout from './Layout.vue'
 export default {
     data () {
         return {
@@ -72,11 +125,16 @@ export default {
             vk:'',
             photo:'',
             deathCode:'',
-            errCourse:false
+            deathCodeRep:'',
+            errCourse:false,
+            stage1:true,
+            err:false
         }
     },
     components: {
-        'inputText':inputText
+        'inputText':inputText,
+        'inputFile':inputFile,
+        'layout':layout
     },
 
     mixins: [validationMixin],
@@ -109,15 +167,31 @@ export default {
         },
         courseStr:{
             required
+        },
+        deathCodeRep:{
+            required,
+            sameAsCode:sameAs('deathCode')
         }
+
     },
 
     methods: {
-        loadPhoto () {
-            var imagefile = document.getElementById('file')
-            this.photo=imagefile.files[0]
+        loadPhoto (value) {
+            this.photo=value
+        },
+        nextStage () {
+            if(!this.$v.email.$invalid&&!this.$v.deathCode.$invalid&&!this.$v.deathCodeRep.$invalid)
+            {
+                this.stage1=false
+                this.err=false
+            }
+            else this.err=true
+
         },
+        lastStage () {
+            this.stage1=true
 
+        },
         checkCourse () {
             var value
             if(this.courseStr.match(/[0-4]/i)||(this.courseStr.match(/преп/i))||(this.courseStr.match(/асп/i)))
@@ -164,7 +238,33 @@ export default {
                 }
                 this.$store.dispatch('register',postBody)
             }
+            else this.err=true
         }
     }
 }
 </script>
+<style lang="scss"  >
+    @import '../utils/var';
+    body {
+        background-color:$color--bg-main;
+    }
+    .arrows {
+        position: relative;
+        width:320px;
+        margin-left:auto;
+        margin-right: auto;
+    }
+    .left {
+        position:absolute;
+        left:0px;
+    }
+    .right {
+        position:absolute;
+        right:0px;
+    }
+    @media screen and (max-width: 320px) {
+        .arrows {
+            width:270px;
+        }
+    }
+</style>
diff --git a/frontend/src/components/input.vue b/frontend/src/components/input.vue
index 59df643..d121b72 100644
--- a/frontend/src/components/input.vue
+++ b/frontend/src/components/input.vue
@@ -5,10 +5,13 @@
             </slot>
         </div>
         <div class='block'>
-        <input type='text' v-model='text'>
-        <div class='shadow'></div>
+            <div class='shadow'></div>
+            <input type='text'  v-model='text'>
+        </div>
+        <div class='error'>
+            <slot name='error'></slot>
+        </div>
     </div>
-</div>
 </template>
 
 <script>
@@ -29,11 +32,12 @@ export default {
 </script>
 <style lang="scss" scoped  >
     @import '../utils/var';
-
+    
     .label {
         color:$font-color--accent;
     }
     input {
+        font-size:$font-size--main;
         position: absolute;
         top:4px;
         left:4px;
@@ -44,31 +48,43 @@ export default {
         background-color:$color--bg-accent;
         opacity:0.7;
         border:0px;
-        z-index:3
     }
     .shadow {
-
-        z-index:2;
         width:315px;
         height:50px;
         background-color:$color--bg-accent;
         opacity:0.7;
         border:0px;
-
     }
     .root {
         text-align: center;
+        margin-top: $space--s;
+        width: 100%;
     }
     .block {
         position: relative;
-        margin:auto;
-        width:320px;
-        height:55px;
+        width:319px;
+        height:56px;
+        left: 50%;
+        margin-left:-158.5px;
 
     }
-
-
-
-
-
+    .error {
+        height:1px;
+    }
+    @media screen and (max-width: 320px)  {
+        input {
+            width:270px;
+        }
+        .shadow {
+            width:270px;
+        }
+        .block {
+            position: relative;
+            width:270px;
+            height:56px;
+            left: 50%;
+            margin-left:-135px;
+        }
+     }
 </style>
diff --git a/frontend/src/components/inputFile.vue b/frontend/src/components/inputFile.vue
new file mode 100644
index 0000000..fa7bf03
--- /dev/null
+++ b/frontend/src/components/inputFile.vue
@@ -0,0 +1,120 @@
+<template>
+    <div class='root'>
+        <div class='label'>
+            <slot name='label'>
+            </slot>
+        </div>
+        <div class='block'>
+            <div class='file-upload'>
+                <label>
+                    <input id='file' type='file' @change='onChange' accept='image/jpeg,image/png'>
+                    <span class='img'><img src='../pictures/upload.png' width='34px' height='34px' ></span>
+                    <span class='chooseFile'>{{inpMessage}}</span>
+                </label>
+            </div>
+            <div class='shadow'></div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'inputFile',
+    data () {
+        return {
+            inpMessage:'Файл не выбран'
+        }
+    },
+    props: ['value'],
+    methods: {
+        onChange() {
+            var imagefile = document.getElementById('file')
+            var val=imagefile.files[0]
+            this.inpMessage=val.name
+            this.$emit('change', val)
+        }
+    }
+}
+</script>
+<style lang="scss" scoped  >
+    @import '../utils/var';
+
+    .label {
+        color:$font-color--accent;
+    }
+    input[type="file"]{
+        display: none;
+    }
+    .file-upload {
+        position: absolute;
+        overflow: hidden;
+        top:4px;
+        left:4px;
+        text-align: center;
+        width:315px;
+        height:50px;
+        color:$font-color--light;
+        background-color:$color--bg-accent;
+        opacity:0.7;
+        border:0px;
+        z-index:3
+    }
+    .img {
+        position:absolute;
+        left:60px;
+        top:6px;
+    }
+    .chooseFile {
+        position: absolute;
+        top:14px;
+        left:110px;
+    }
+    .file-upload label {
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        cursor: pointer;
+    }
+    .shadow {
+
+        z-index:2;
+        width:315px;
+        height:50px;
+        background-color:$color--bg-accent;
+        opacity:0.7;
+        border:0px;
+
+    }
+    .root {
+        text-align: center;
+        margin-top: $space--s;
+        width: 100%;
+    }
+    .block {
+        position: relative;
+        margin:auto;
+        width:320px;
+        height:55px;
+        left: 50%;
+        margin-left:-158px;
+    }
+    @media screen and (max-width: 320px)  {
+        .file-upload {
+            width:270px;
+        }
+        .shadow {
+            width:270px;
+        }
+        .block {
+            position: relative;
+            width:270px;
+            height:56px;
+            left: 50%;
+            margin-left:-135px;
+        }
+     }
+
+</style>
diff --git a/frontend/src/pictures/arrow.png b/frontend/src/pictures/arrow.png
new file mode 100644
index 0000000..0c02585
Binary files /dev/null and b/frontend/src/pictures/arrow.png differ
diff --git a/frontend/src/pictures/arrow2.png b/frontend/src/pictures/arrow2.png
new file mode 100644
index 0000000..91b63dc
Binary files /dev/null and b/frontend/src/pictures/arrow2.png differ
diff --git a/frontend/src/pictures/cancel.png b/frontend/src/pictures/cancel.png
new file mode 100644
index 0000000..e46c443
Binary files /dev/null and b/frontend/src/pictures/cancel.png differ
diff --git a/frontend/src/pictures/chat.png b/frontend/src/pictures/chat.png
new file mode 100644
index 0000000..8334893
Binary files /dev/null and b/frontend/src/pictures/chat.png differ
diff --git a/frontend/src/pictures/delete.png b/frontend/src/pictures/delete.png
new file mode 100644
index 0000000..f5cd984
Binary files /dev/null and b/frontend/src/pictures/delete.png differ
diff --git a/frontend/src/pictures/kill.png b/frontend/src/pictures/kill.png
new file mode 100644
index 0000000..98aceb7
Binary files /dev/null and b/frontend/src/pictures/kill.png differ
diff --git a/frontend/src/pictures/logout.png b/frontend/src/pictures/logout.png
new file mode 100644
index 0000000..193418b
Binary files /dev/null and b/frontend/src/pictures/logout.png differ
diff --git a/frontend/src/pictures/more.png b/frontend/src/pictures/more.png
new file mode 100644
index 0000000..93d8c79
Binary files /dev/null and b/frontend/src/pictures/more.png differ
diff --git a/frontend/src/pictures/ok.png b/frontend/src/pictures/ok.png
new file mode 100644
index 0000000..220b4a4
Binary files /dev/null and b/frontend/src/pictures/ok.png differ
diff --git a/frontend/src/pictures/question.png b/frontend/src/pictures/question.png
new file mode 100644
index 0000000..0367cef
Binary files /dev/null and b/frontend/src/pictures/question.png differ
diff --git a/frontend/src/pictures/upload-outline.png b/frontend/src/pictures/upload-outline.png
new file mode 100644
index 0000000..ed08da1
Binary files /dev/null and b/frontend/src/pictures/upload-outline.png differ
diff --git a/frontend/src/pictures/upload.png b/frontend/src/pictures/upload.png
new file mode 100644
index 0000000..a93cdcc
Binary files /dev/null and b/frontend/src/pictures/upload.png differ
diff --git a/frontend/src/pictures/vk.png b/frontend/src/pictures/vk.png
new file mode 100644
index 0000000..b5b0146
Binary files /dev/null and b/frontend/src/pictures/vk.png differ
diff --git a/frontend/src/utils/var.scss b/frontend/src/utils/var.scss
index a2ea3ec..4568459 100644
--- a/frontend/src/utils/var.scss
+++ b/frontend/src/utils/var.scss
@@ -1,4 +1,7 @@
-$font-family--header: 'Roboto';
+@import url(http://allfont.ru/allfont.css?fonts=roboto-thin);
+@import url(http://allfont.ru/allfont.css?fonts=roboto-light);
+$font-family--header: 'Roboto Thin';
+$font-family--main:'Roboto Light';
 $font-size--header: 30px;
 $font-weight--thin: 100;
 $font-weight--light: 300;