diff --git a/src/lib/userFunction.js b/src/lib/userFunction.js
index fdc1811..8e102be 100644
--- a/src/lib/userFunction.js
+++ b/src/lib/userFunction.js
@@ -16,6 +16,53 @@ export async function UserCheck(){
     }
   }
 
+  export async function checkName(username) {
+    const response = await fetch('http://localhost:8000/api/users/check_existing_username', {
+      method:'POST',
+      credentials:"include",
+      headers:{
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        "username": username
+      })
+    })
+    if(response.status === 200){
+    }
+    else if(response.status === 409){
+      let data = "ник занят"
+      return data
+    }
+    else if(response.status === 422){
+      let data = await response.json();
+      return data
+    }
+}
+
+export async function checkMail(mail) {
+  const response = await fetch('http://localhost:8000/api/users/check_existing_email', {
+    method:'POST',
+    credentials:"include",
+    headers:{
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify({
+      "email": mail
+    })
+  })
+  if(response.status === 200){
+  }
+  else if(response.status === 409){
+    let data = "почта занята"
+    return data
+  }
+  else if(response.status === 422){
+    let data = "не похоже на почту"
+    return data
+  }
+}
+
+
   export async function handleRegister(username,password,email,date_of_birth){
     const response = await fetch('http://localhost:8000/api/users/register',{
       method:'POST',
@@ -31,13 +78,16 @@ export async function UserCheck(){
       })
     })
 
-    if(!response.ok){
-      console.log(response.status)
-    }
-    else{
+    if(response.status === 201){
       const data = await response.json();
+      console.log(data)
       return data;
     }
+    else if(response.status === 422){
+      console.log(response.status)
+      let data = "Validation Error"
+      return data
+    }
     
   }
 
diff --git a/src/routes/Header.svelte b/src/routes/Header.svelte
index 7cb74d8..d33df90 100644
--- a/src/routes/Header.svelte
+++ b/src/routes/Header.svelte
@@ -49,10 +49,8 @@
 		display: flex;
 		justify-content: space-around;
 		align-items: center;
-
-    background-color: rgba(255, 255, 255, 0.3);
-    border: 0;
-    
+    	background-color: rgba(255, 255, 255, 0.3);
+    	border: 0;
     
 	}
 
@@ -78,10 +76,7 @@
 		cursor: pointer;
 	}
 
-	div, h3 {
-		font-weight: 600;
-		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
-	}
+	
 	.headerClass > * {
 		margin-bottom: 0;
 	}
diff --git a/src/routes/register/+page.svelte b/src/routes/register/+page.svelte
index 3c1d017..50c1773 100644
--- a/src/routes/register/+page.svelte
+++ b/src/routes/register/+page.svelte
@@ -1,287 +1,391 @@
 <script>
 	import Header from './../Header.svelte';
-  import {handleRegister} from '$lib/userFunction.js'
-  let name,mail,password,password2,dateDay,dateMonth,dateYear;
-  
-      async function SendData(){
-        let date = `${dateYear}-${dateMonth}-${dateDay}`;
-        console.log("Имя:", name, "Эл. почта:", mail, "Пароль:", password, "Повтор пароля:", password2, "Дата рождения:", date);
+	import { handleRegister, checkName, checkMail } from '$lib/userFunction.js';
+	import { onMount } from 'svelte';
+	import { fly } from 'svelte/transition';
+	import { cubicOut } from 'svelte/easing';
+	let days = [];
+	for (let i = 1; i <= 31; i++) {
+		let day = i.toString().padStart(2, '0');
+		days.push(day);
+	}
 
-        let jopa = await handleRegister(name,password,mail,date)
-        console.log(jopa)
-      }
-      let days = []
-      for(let i = 1;i <= 31;i++){
-      let day = i.toString().padStart(2,'0');
-      days.push(day)
-    }
-      
-      const now = new Date();
-      const legalyear = now.getFullYear();
-      let years = []
-      for(let i = legalyear - 16;i > legalyear - 100;i--)
-      years.push(i);
+	const now = new Date();
+	const legalyear = now.getFullYear();
+	let years = [];
+	for (let i = legalyear - 16; i > legalyear - 100; i--) years.push(i);
 
-      
-      function lisenerName(){
-        let nname = document.getElementById('name');
-        console.log(name)
-        nname.textContent = name;
-      }
+	let name, mail, password, password2, dateDay, dateMonth, dateYear;
+	name = '';
+	mail = '';
+	password = '';
+	password2 = '';
 
-      function lisenerEmail(){
-        let eemail = document.getElementById('email');
-        console.log(mail)
-        eemail.textContent = mail;
-      }
+	let nameError, mailError, passwordError, password2Error;
+	nameError = '';
+	mailError = '';
+	passwordError = '';
+	password2Error = '';
+
+	async function SendData() {
+console.log(`name=${nameError} mail=${mailError} password=${passwordError} password2=${password2Error}`)
+		if ((name === '' )|| (name === undefined))
+			nameError = 'пустой ник';
+		
+		if ((mail === '') || (mail === undefined))
+			mailError = 'введи почту';
+		
+		if ((password === '') || (password2 === '') 
+    && (password === undefined) || (password2 === undefined))
+			passwordError = 'акк без пароля?';
+		
+		if ((password.length <= 8) || (passwordError === undefined))
+			passwordError = 'минимум 8 символов';
+		
+    if ((password != "") && (password2 == ""))
+      password2Error = "забыл повторить"
+      if ((password2 != "") && (password == ""))
+      passwordError = "забыл повторить"
+
+		if ((nameError === '' )|| (nameError === undefined) &&
+        (mailError === '' )|| (mailError === undefined) && 
+        (passwordError === '' )|| (passwordError === undefined) && 
+        (password2Error === '') ||( password2Error === undefined)) {
+			let date = `${dateYear}-${dateMonth}-${dateDay}`;
+			let reg = await handleRegister(name, password, mail, date);
+			console.log(reg);
+      console.log("отправлено")
+		}
+	}
+
+	async function lisenerName() {
+		if (name != '') {
+			let error = await checkName(name);
+			console.log(error);
+			nameError = error;
+		}
+	}
+
+	async function lisenerEmail() {
+		if (mail == '') {
+			mailError = '';
+		} else {
+			let error = await checkMail(mail);
+			console.log(error);
+			mailError = error;
+		}
+	}
+
+	async function lisenerPassword() {
+		if((password === "") && (password2 != ""))
+      { passwordError = ""; password2Error = "" }
+    else if((password2 === "") && (password != ""))
+      { passwordError = ""; password2Error = "" }
+	  else if (password != password2)
+      passwordError = 'пароли не совпадают';
+
+		else passwordError = '';
+	}
+
+	let VisiblePopUp = false;
+	function toggleVisibility() {
+		VisiblePopUp = !VisiblePopUp;
+		console.log('переключил');
+	}
 </script>
 
+<button on:click={toggleVisibility}>Показать модальное окно</button>
+{#if VisiblePopUp}
+	<div class="codeDiv"></div>
+{/if}
 <body>
-<div class="mainDiv">
-  <div class="jopa1">
-    <div class="marginDiv">
-      <h1>Регистрация</h1>
+	<div class="mainDiv">
+		<div class="jopa1">
+			<div class="marginDiv">
+				<form on:submit|preventDefault={SendData}>
+					<h1>Регистрация</h1>
+					<div class="group">
+						<div class="groupname">
+							<h3>имя</h3>
+							{#if nameError && nameError !== ''}
+								<h3 id="name" transition:fly={{ y: -30, duration: 300, easing: cubicOut }}>
+									{nameError}
+								</h3>
+							{/if}
+						</div>
+						<input on:blur={lisenerName} type="text" maxlength="100" bind:value={name} />
+					</div>
 
-      <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>
-         
+					<div class="group">
+						<div class="groupname">
+							<h3>эл почта</h3>
+							{#if mailError && mailError !== ''}
+								<h3 id="mail" transition:fly={{ y: -30, duration: 300, easing: cubicOut }}>
+									{mailError}
+								</h3>
+							{/if}
+						</div>
+						<input on:blur={lisenerEmail} type="email" maxlength="100" bind:value={mail} />
+					</div>
 
-         <div class="group">
-          <div class="groupname">
-            <h3>пароль</h3>
-            <h3 id="password"></h3></div>
-        <input type="password" maxlength="100" bind:value={password}>
-         </div>
+					<div class="group">
+						<div class="groupname">
+							<h3>пароль</h3>
+							{#if passwordError && passwordError !== ''}
+								<h3 id="password" transition:fly={{ y: -30, duration: 300, easing: cubicOut }}>
+									{passwordError}
+								</h3>
+							{/if}
+						</div>
+						<input
+							type="password"
+							maxlength="100"
+							bind:value={password}
+							on:blur={lisenerPassword}
+						/>
+					</div>
 
-         <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">
+						<div class="groupname">
+							<h3>повтори пароль</h3>
+							{#if password2Error && password2Error !== ''}
+								<h3 id="password2">{password2Error}</h3>
+							{/if}
+						</div>
+						<input
+							type="password"
+							maxlength="100"
+							bind:value={password2}
+							on:blur={lisenerPassword}
+						/>
+					</div>
 
-         <div class="group">
-        <h3>Дата рождения</h3>
-        <div class="birthday">
-          
-          <select id="dayDropDown" bind:value={dateDay}>
-            {#each days as day}
-              <option value="{day}">{day}</option>
-            {/each}
-          </select>
+					<div class="group">
+						<h3>Дата рождения</h3>
+						<div class="birthday">
+							<select id="dayDropDown" bind:value={dateDay}>
+								{#each days as day}
+									<option value={day}>{day}</option>
+								{/each}
+							</select>
 
-          <select id="monthDropDown" bind:value={dateMonth}>
-            <option value="01">Январь</option>
-            <option value="02">Февраль</option>
-            <option value="03">Март</option>
-            <option value="04">Апрель</option>
-            <option value="05">Май</option>
-            <option value="06">Июнь</option>
-            <option value="07">Июль</option>
-            <option value="08">Август</option>
-            <option value="09">Сентябрь</option>
-            <option value="10">Октябрь</option>
-            <option value="11">Ноябрь</option>
-            <option value="12">Декабрь</option>
-          </select>
+							<select id="monthDropDown" bind:value={dateMonth}>
+								<option value="01">Январь</option>
+								<option value="02">Февраль</option>
+								<option value="03">Март</option>
+								<option value="04">Апрель</option>
+								<option value="05">Май</option>
+								<option value="06">Июнь</option>
+								<option value="07">Июль</option>
+								<option value="08">Август</option>
+								<option value="09">Сентябрь</option>
+								<option value="10">Октябрь</option>
+								<option value="11">Ноябрь</option>
+								<option value="12">Декабрь</option>
+							</select>
 
-          <select id="yearDropDown" bind:value={dateYear}>
-            {#each years as year}
-              <option value="{year}">{year}</option>
-            {/each}
-          </select>
-
-        </div>
-        </div>
-      
-        <div class="submitDiv">
-        <button type="submit">Зарегаться</button>
-       </div>
-    </form>
-      
-    </div>
-  </div>
-</div>
+							<select id="yearDropDown" bind:value={dateYear}>
+								{#each years as year}
+									<option value={year}>{year}</option>
+								{/each}
+							</select>
+						</div>
+					</div>
 
+					<button type="submit">Зарегаться</button>
+				</form>
+			</div>
+		</div>
+	</div>
 </body>
 
 <style lang="scss">
+	.codeDiv {
+		width: 30vw;
+		aspect-ratio: 1/1.3;
+		background: #3d53fe;
+		position: absolute;
+		top: 50%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
 
+	* {
+		font-family: Comfortaa;
+		margin: 0;
+	}
 
+	form {
+		display: flex;
+		flex-direction: column;
+		justify-content: space-around;
+		height: 100%;
+		justify-content: space-around;
+	}
 
-form{
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  justify-content: space-around;
-}
+	#name,
+	#mail,
+	#password,
+  #password2 {
+		color: var(--disable);
+		font-weight: 700;
+		font-size: 20px;
+	}
 
-#name, #email{
-  margin-left: 50px;
-  color: var(--disable);
-  font-weight: 700;
-}
-.groupname{
-  display: flex;
-  flex-direction: row;
-}
+	.animate-slide-up {
+		opacity: 1;
+		transform: translateY(0);
+	}
 
-.group{
-  margin-top: 0px;
-  margin-bottom: 5px;
-  
-}
+	.groupname {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: space-between;
+	}
 
-*{
-  margin-top:5px;
-  margin-bottom: 5px;
-  font-family: Comfortaa;
-}
+	.marginDiv {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+		margin: 0 30px;
+	}
+	.birthday {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+	}
 
-.marginDiv{
+	.jopa1 {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		box-shadow: 4px 4px 11px rgba($color: #000000, $alpha: 0.4);
+		border-radius: 15px;
+	}
 
- display: flex;
- flex-direction: column;
- width: 100%;
- margin: 40px;
-}
+	.jopa1::before {
+		content: '';
+		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;
+	}
 
-.birthday{
-  display: flex;
-  flex-direction:row;
-  justify-content: space-around;
+	.mainDiv {
+		border: 1px solid transparent;
+		background:
+			linear-gradient(#101010, #101010) padding-box,
+			var(--gradient) border-box;
+		border-radius: 15px;
 
-}
+		aspect-ratio: 1 / 1.4;
+		height: calc(100% - 200px);
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+	}
 
-.jopa1{
- width: 100%;
- height: 100%;
- display: flex;
- box-shadow: 4px 4px 11px rgba($color: #000000, $alpha: 0.4);
- border-radius: 15px;
-}
+	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;
+		margin-top: 5px;
+	}
 
-.jopa1::before{
-  content: "";
-  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;
-  
-}
+	input:focus,
+	select:focus {
+		transition: 0.5s ease-in;
+		box-shadow: 0 0 transparent;
+	}
+	input:not(:focus),
+	select:not(:focus) {
+		transition: 0.5s ease-in-out;
+		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;
+	}
 
-.mainDiv{ 
-  border: 1px solid transparent;
-  background: linear-gradient(#101010,#101010) padding-box,
-  var(--gradient) border-box;
-  border-radius: 15px;
+	select {
+		min-width: 50px;
+		width: 8rem;
+		display: flex;
+		justify-content: center;
+		text-align: center;
+		font-size: 24px;
+		font-weight: 300;
+		overflow: auto;
+	}
 
-  aspect-ratio: 1 / 1.6;
-  height: calc(100% - 100px);
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%,-50%);
-}
-  
-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;
-}
+	option {
+		background-color: var(--bg);
+		border: 0;
+	}
 
-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);
-}
+	button[type='submit'] {
+		text-shadow: 0 0 20px white;
+		font-size: 36px;
+		background: transparent;
+		border: 0;
+		height: 10%;
+	}
+	button[type='submit'],
+	select,
+	option {
+		cursor: pointer;
+	}
 
-#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;
-  text-shadow: 0 0 20px white;
-  font-size: 48px;
-   
-}
-h3{
-  font-weight: 100;
-  font-size: 24px;
-}
-
-</style>
\ No newline at end of file
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6,
+	p,
+	input,
+	select,
+	button[type='submit'] {
+		color: var(--fontColor);
+	}
+	h1 {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		text-shadow: 0 0 20px white;
+		font-size: 48px;
+		height: 10%;
+	}
+	h3 {
+		font-weight: 100;
+		font-size: 24px;
+	}
+</style>