diff --git a/src/app.html b/src/app.html
index e39ac10..a1123df 100644
--- a/src/app.html
+++ b/src/app.html
@@ -17,8 +17,11 @@
 			}
 			:root{
 				--bg: #101010;
-				--gradient: linear-gradient(to right, #3C53FF, #7734AA);
+				--gradient: linear-gradient(to bottom, #3C53FF, #7734AA);
 				--fontColor: #FFFFFF; 
+				--purple: #7734AA;
+				--blue: #3C53FF;
+				--disable: #D15555;
 				font-family: Comfortaa;
 				
 			  }
diff --git a/src/routes/register/+page.svelte b/src/routes/register/+page.svelte
index b53e0a5..3c1d017 100644
--- a/src/routes/register/+page.svelte
+++ b/src/routes/register/+page.svelte
@@ -1,4 +1,5 @@
 <script>
+	import Header from './../Header.svelte';
   import {handleRegister} from '$lib/userFunction.js'
   let name,mail,password,password2,dateDay,dateMonth,dateYear;
   
@@ -19,33 +20,60 @@
       const legalyear = now.getFullYear();
       let years = []
       for(let i = legalyear - 16;i > legalyear - 100;i--)
-      years.push(i)
+      years.push(i);
+
       
+      function lisenerName(){
+        let nname = document.getElementById('name');
+        console.log(name)
+        nname.textContent = name;
+      }
 
-
+      function lisenerEmail(){
+        let eemail = document.getElementById('email');
+        console.log(mail)
+        eemail.textContent = mail;
+      }
 </script>
 
 <body>
-  
-
 <div class="mainDiv">
   <div class="jopa1">
     <div class="marginDiv">
-      <h1>ЖОПА</h1>
-      
-        <form on:submit|preventDefault={SendData}>
-        <h3>имя</h3>
-        <input type="text" maxlength="100" bind:value={name}>
+      <h1>Регистрация</h1>
 
-        <h3>эл почта</h3>
-        <input type="email" maxlength="100" bind:value={mail}>
+      <form on:submit|preventDefault={SendData}>
+       
+          <div class="group">
+        <div class="groupname">
+          <h3>имя</h3>
+          <h3 id="name"></h3></div>
+        <input on:blur={lisenerName} type="text" maxlength="100" bind:value={name}>
+          </div>
+          
+          <div class="group">
+            <div class="groupname">
+              <h3>эл почта</h3>
+              <h3 id="email"></h3></div>
+        <input on:blur={lisenerEmail} type="email" maxlength="100" bind:value={mail}>
+         </div>
+         
 
-        <h3>пароль</h3>
+         <div class="group">
+          <div class="groupname">
+            <h3>пароль</h3>
+            <h3 id="password"></h3></div>
         <input type="password" maxlength="100" bind:value={password}>
+         </div>
 
-        <h3>повтори пароль (для уверенности)</h3>
+         <div class="group">
+          <div class="groupname">
+            <h3>повтори пароль</h3>
+            <h3 id="password2"></h3></div>
         <input type="password" maxlength="100" bind:value={password2}>
+         </div>
 
+         <div class="group">
         <h3>Дата рождения</h3>
         <div class="birthday">
           
@@ -77,8 +105,13 @@
           </select>
 
         </div>
-        <button  type="submit">Зарегаться</button>
-      </form>
+        </div>
+      
+        <div class="submitDiv">
+        <button type="submit">Зарегаться</button>
+       </div>
+    </form>
+      
     </div>
   </div>
 </div>
@@ -87,53 +120,78 @@
 
 <style lang="scss">
 
+
+
+form{
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: space-around;
+}
+
+#name, #email{
+  margin-left: 50px;
+  color: var(--disable);
+  font-weight: 700;
+}
+.groupname{
+  display: flex;
+  flex-direction: row;
+}
+
+.group{
+  margin-top: 0px;
+  margin-bottom: 5px;
+  
+}
+
+*{
+  margin-top:5px;
+  margin-bottom: 5px;
+  font-family: Comfortaa;
+}
+
 .marginDiv{
 
-  display: flex;
+ display: flex;
  flex-direction: column;
  width: 100%;
- align-items: center;
- background-color: rgba($color: #509cc9, $alpha: 0.3);
+ margin: 40px;
 }
 
 .birthday{
   display: flex;
   flex-direction:row;
-  justify-content: space-between;
+  justify-content: space-around;
 
 }
 
 .jopa1{
  width: 100%;
  height: 100%;
- 
+ display: flex;
+ box-shadow: 4px 4px 11px rgba($color: #000000, $alpha: 0.4);
+ border-radius: 15px;
 }
 
 .jopa1::before{
   content: "";
-  background-image: url(../nnnoise.svg); opacity: 0.05;
-  width: 100%; height: 100%;
-  position: absolute; top: 50%; left: 50%;
-  transform: translate(-50%,-50%);
-  pointer-events: none;
-}
-.jopa1::after{
-  content: ""; background-image:
-  linear-gradient(rgba(255, 255, 255, 0.1),rgba(255, 255, 255, 0.1));
-  opacity: 0.15;
+  background-image: url(../noise.gif); opacity: 0.011;
   width: 100%; height: 100%;
   position: absolute; top: 50%; left: 50%;
   transform: translate(-50%,-50%);
   pointer-events: none;
+  border-radius: 15px;
+  
 }
 
+
 .mainDiv{ 
-  border: 2px solid transparent;
+  border: 1px solid transparent;
   background: linear-gradient(#101010,#101010) padding-box,
   var(--gradient) border-box;
   border-radius: 15px;
 
-  
   aspect-ratio: 1 / 1.6;
   height: calc(100% - 100px);
   position: absolute;
@@ -142,12 +200,88 @@
   transform: translate(-50%,-50%);
 }
   
-  h1,h2,h3,h4,h5,h6,p{
+input,select{
+  border: 1px solid transparent;
+  background: linear-gradient(#101010,#101010) padding-box,
+  var(--gradient) border-box;
+  border-radius: 10px;
+  width: 100%;
+  height: 1.8em;
+  font-size: 24px;
+  font-weight: 600;
+  box-shadow:  4px 4px 15px rgba($color: #5E2A83, $alpha: 0.38),
+              -4px -4px 15px rgba($color: #3D53FE, $alpha: 0.38);
+  outline: none;
+}
+
+input:focus, select:focus{
+  transition: 0.5s ease-in;
+  box-shadow: 0 0 transparent;
+}
+input:not(:focus),select:not(:focus){
+  transition: 0.5s ease;
+  box-shadow:  4px 4px 15px rgba($color: #5E2A83, $alpha: 0.38),
+              -4px -4px 15px rgba($color: #3D53FE, $alpha: 0.38);
+}
+
+#dayDropDown{
+  width: 2.5em;
+}
+#monthDropDown{
+  width: 8em;
+}
+#yearDropDown{
+  width: 4em;
+}
+
+select{
+  min-width: 50px;
+  width: 8rem;
+  display: flex;
+  justify-content: center;
+  text-align: center;
+  font-size: 24px;
+  font-weight: 300;
+  overflow: auto;
+}
+
+option{
+  background-color: var(--bg);
+  border: 15px;
+}
+
+
+
+button[type=submit]{
+  text-shadow: 0 0 20px white;
+  font-size: 36px;
+  background: transparent;
+  border: 0;
+  
+
+}
+.submitDiv{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+button[type=submit],select,option{
+  cursor: pointer;
+}
+
+  h1,h2,h3,h4,h5,h6,p,input,select,button[type=submit]{
     color: var(--fontColor);
 }
 h1{
   display: flex;
-   justify-content: center;
+  justify-content: center;
+  text-shadow: 0 0 20px white;
+  font-size: 48px;
+   
+}
+h3{
+  font-weight: 100;
+  font-size: 24px;
 }
 
 </style>
\ No newline at end of file
diff --git a/static/noise.gif b/static/noise.gif
new file mode 100644
index 0000000..6b76b19
Binary files /dev/null and b/static/noise.gif differ
