diff --git a/package-lock.json b/package-lock.json
index 31353c1..db527b3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
 				"@sveltestrap/sveltestrap": "^6.2.4",
 				"@themesberg/flowbite": "^1.3.0",
 				"cropperjs": "^1.6.2",
+				"date-fns": "^3.6.0",
 				"sass": "^1.70.0",
 				"socket.io": "^4.7.5",
 				"socket.io-client": "^4.7.5",
@@ -1626,6 +1627,15 @@
 				"type": "^1.0.1"
 			}
 		},
+		"node_modules/date-fns": {
+			"version": "3.6.0",
+			"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
+			"integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/kossnocorp"
+			}
+		},
 		"node_modules/dayjs": {
 			"version": "1.11.10",
 			"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
diff --git a/package.json b/package.json
index e6b34b2..bbf404b 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
 		"@sveltestrap/sveltestrap": "^6.2.4",
 		"@themesberg/flowbite": "^1.3.0",
 		"cropperjs": "^1.6.2",
+		"date-fns": "^3.6.0",
 		"sass": "^1.70.0",
 		"socket.io": "^4.7.5",
 		"socket.io-client": "^4.7.5",
diff --git a/src/app.html b/src/app.html
index 4d84bd6..2bd8b1c 100644
--- a/src/app.html
+++ b/src/app.html
@@ -87,7 +87,15 @@
 			background: transparent;
 			border: 0;
 			height: 10%;
+			transition: 0.15s ease-in;
 		}
+
+		button:disabled{
+			color: rgba(255, 255, 255, 0.329);
+			text-shadow: 0 0 20px rgba(0, 0, 0, 0.322);
+		}
+		
+
 		button,
 		select,
 		option {
@@ -169,5 +177,16 @@
 			border-radius: 15px;
 		}
 
+		.backgroundBlur{
+			position: fixed;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			background: rgba(0, 0, 0, 0.5);
+			backdrop-filter: blur(10px);
+			z-index: 4;
+		}
+
 	</style>
 </html>
diff --git a/src/lib/chat.js b/src/lib/chat.js
index 7f1e302..7fdc3de 100644
--- a/src/lib/chat.js
+++ b/src/lib/chat.js
@@ -1,4 +1,7 @@
- export async function getLastMessages(chatId,msgLoaded){
+// import formatDistanceToNow from 'date-fns/formatDistanceToNow';
+// import ruLocale from 'date-fns/locale/ru';
+
+export async function getLastMessages(chatId,msgLoaded){
    
    let token = localStorage.getItem('BPChat')
    const response = await fetch(`https://docs.black-phoenix.ru/api/chat/get_some_messages/${chatId}?messages_loaded=${msgLoaded}&messages_to_get=15`,
@@ -20,12 +23,16 @@
      }
      else{
       msgMassive.reverse();
-      let utc = msgMassive[0].created_at
-      console.log(utc)
-      let newutc = new Date(utc)
-      console.log(utc)
-      console.log(newutc)
-      
+
+      // for(let i = 0; i < msgMassive.length; i++){
+      //   let utc = msgMassive[i].created_at
+      //   let newutc = new Date(utc)
+      //   //console.log(utc)
+      //   const formattedDate = formatDistanceToNow(new Date(newutc), { addSuffix: true, locale: ruLocale });
+      //   //console.log(newutc)
+      //   console.log(formattedDate)
+      //   msgMassive[i].created_at = formattedDate
+      // }
       return msgMassive
      }
    }
@@ -175,4 +182,58 @@
       console.log(response);
     }
   }
-  
\ No newline at end of file
+  
+  export async function getAllUsers(nameToFind){
+
+    const response = await fetch(`https://docs.black-phoenix.ru/api/users?username=${nameToFind}`,{
+      method:"GET",
+      credentials:'include'
+    })
+
+    if(response.ok){
+      let data = await response.json()
+      let anotherData = data.users
+      
+      if(anotherData == null){
+        return []
+      }
+      return data.users
+    }
+
+  }
+
+  export async function createNewChat(chatName, excludeUser, token){
+    console.log(token, "token")
+    const response = await fetch(`https://docs.black-phoenix.ru/api/chat/create_chat?user_to_exclude=${excludeUser}&chat_name=${chatName}`,{
+      method: 'POST',
+      credentials: 'include',
+      headers: {'Authorization': token },
+    })
+
+    if(response.ok){
+      let data = await response.json()
+      let id = data.chat_id
+      return id
+    }
+    else{
+      console.log(response)
+    }
+
+  }
+
+  export async function deleteChat(chatId, token){
+
+    const response = await fetch(`https://docs.black-phoenix.ru/api/chat/delete_chat/${chatId}`,{
+      method: 'DELETE',
+      credentials: 'include',
+      headers: {'Authorization': token },
+    })
+
+    if(response.ok){
+      return "Чат удален"
+    }
+
+    else{
+      console.log(response)
+    }
+  }
\ No newline at end of file
diff --git a/src/lib/websocket.js b/src/lib/websocket.js
index 30e4e87..5cb802d 100644
--- a/src/lib/websocket.js
+++ b/src/lib/websocket.js
@@ -1,89 +1,46 @@
-// import io from 'socket.io-client';
+export default function createWebSocket(url, token, onMessageCallback, maxRetries = 10) {
+  let socket;
+  let retries = 0;
+  let messageQueue = [];
+  token = token.split(" ")[1];
 
-// export default function createWebSocket(url, token, onMessageCallback) {
-//     const socket = io(url, {
-//         auth: {
-//             token: "123"
-//           },
-//         //withCredentials: true,
-//     });
+  function connect() {
+      socket = new WebSocket(url, [token]);
 
-//     socket.on('message', (message) => {
-//         console.log('Получено сообщение:', message);
-//       });
-    
-//     function sendMessage(message) {
-//         socket.emit('message', message);
-//       }
-    
-//     return socket;
-// }
+      socket.addEventListener('message', (event) => {
+          const jsonData = JSON.parse(event.data)
+          onMessageCallback(jsonData)
+      });
 
-// export default function createWebSocket(url, token , onMessageCallback) {
+      socket.onopen = () => {
+          console.log('WebSocket is open now.')
+          retries = 0 //сброс попыток
 
-//     const socket = new WebSocket(url, {
-//         headers:{ Authorization: token }
-//     })
-  
-//     socket.addEventListener('message', (event) => {
-//       const jsonData = JSON.parse(event.data);
-//       onMessageCallback(jsonData);
-//       //console.log(jsonData)
-//     });
-  
-//     return socket;
-//   }
+          while (messageQueue.length > 0) {
+            socket.send(messageQueue.shift());
+        }
+      };
 
-// import SockJS from 'sockjs-client';
+      socket.onclose = (event) => {
+          console.log('WebSocket is closed now.', event)
+          if (retries < maxRetries) {
+              retries++
+              const timeout = Math.min(1000 * Math.pow(2, retries), 30000)
+              setTimeout(() => {
+                  console.log(`Reconnecting... attempt ${retries}`)
+                  connect()
+              }, timeout)
+          } else {
+              console.log('Max retries reached. Could not reconnect.')
+          }
+      };
 
-// export default function createWebSocket(url,token , onMessageCallback) {
-//     const sock = new SockJS(url, null, {
-//         headers: {
-//             'Authorization': token
-//         }
-//     });
+      socket.onerror = (error) => {
+          console.error('WebSocket error observed:', error)
+      };
+  }
 
-//     //socket.onmessage = (event) => {
-//     //    const jsonData = JSON.parse(event.data);
-//     //   onMessageCallback(jsonData);
-//     //    //console.log(jsonData)
-//     //};
+  connect()
 
-//     sock.onopen = function() {
-//         console.log('open');
-//         sock.send('test');
-//     };
-
-//     sock.onmessage = function(e) {
-//         console.log('message', e.data);
-//         sock.close();
-//     };
-   
-//     sock.onclose = function() {
-//         console.log('close');
-//     };
-
-//     return sock;
-// }
-
-export default function createWebSocket(url, token, onMessageCallback) {
-    token = token.split(" ")[1]
-    //console.log(token)
-    const socket = new WebSocket(url, [token])
-  
-    socket.addEventListener('message', (event) => {
-      const jsonData = JSON.parse(event.data);
-      onMessageCallback(jsonData);
-      //console.log(jsonData)S
-    });
-
-    socket.onopen = (event) => {
-        console.log('WebSocket is open now.');
-    };
-
-    socket.addEventListener('close', (event) =>{
-        console.log(event)
-    })
-    
-    return socket;
-  }
\ No newline at end of file
+  return socket
+}
diff --git a/src/routes/Header.svelte b/src/routes/Header.svelte
index b82b664..b785c55 100644
--- a/src/routes/Header.svelte
+++ b/src/routes/Header.svelte
@@ -1,4 +1,6 @@
 <script>
+	
+	import { fade, slide, fly, scale } from 'svelte/transition';
 	import { onMount } from 'svelte';
 	import Select from 'svelte-select';
 
@@ -20,7 +22,7 @@
 		isOpen = !isOpen;
 	}
 </script>
-
+	
 <header>
 	<a href="chat" class="avatarDiv">
 		<img class="siteAvatar" src="./BP-NEON.png" alt="лого" />
@@ -38,8 +40,8 @@
 			<div><img class="userAvatar" src={userImage} alt="аватарка"/></div>
 		</button>
 
-		{#if isOpen}
-			<div class="dropdown">
+		{#if isOpen }
+			<div class="dropdown" transition:slide={{ duration: 300, delay: 150 }}>
 				<a href="/profile" class="listItem">Профиль</a>
 				<a href="/settings" class="listItem">Настройки</a>
 				<a on:click={handleLogout} class="listItem">Выйти</a>
diff --git a/src/routes/Settings/+page.svelte b/src/routes/Settings/+page.svelte
index 8a33ab5..25c74b6 100644
--- a/src/routes/Settings/+page.svelte
+++ b/src/routes/Settings/+page.svelte
@@ -1,13 +1,17 @@
 <script>
+
+    import { onMount } from 'svelte';
+    import { fade, slide, fly, scale } from 'svelte/transition';
+
+    import { getAvatarHistory, changeUserData, getConfirmationCode } from '$lib/settings'
+    import { UserCheck } from '$lib/userFunction';
+    import { uploadImages } from '$lib/chat';
+    import Header from './../Header.svelte';
+
     import Cropper from 'cropperjs';
     import 'cropperjs/dist/cropper.css';
-	import { uploadImages } from '$lib/chat';
-	import { blur } from 'svelte/transition';
-	import Header from './../Header.svelte';
-    import { UserCheck } from '$lib/userFunction';
-	import { onMount } from 'svelte';
-    import { getAvatarHistory, changeUserData, getConfirmationCode } from '$lib/settings'
 
+    let urlChecker = "https://"
     let token
     let confCode
     let userData = []
@@ -58,8 +62,12 @@
   }
 
   async function submit(){
-    newAvatar = await uploadImages(newAvatar)
-    console.log(newAvatar)
+    if(pickedImg != ""){
+        newAvatar = pickedImg
+    } else {
+        newAvatar = await uploadImages(newAvatar)
+    }
+
     let changing = afterChanging = await changeUserData(token, newName, newEmail, newPassword, newAvatar, code)
     console.log(changing)
     if (changing == true){
@@ -129,22 +137,34 @@
       showCroppingImgDiv = false
     };
 
+    function cancelCroppedImage(){
+        showCroppingImgDiv = false
+    }
+
+    let pickedImg = ""
+    function PickOldAvatar(oldAvatarUrl){
+        pickedImg = oldAvatarUrl
+    }
 </script>
 
 <body>
 
 {#if showCroppingImgDiv}
-    <div class="backgroundBlur"></div>
+    <div class="backgroundBlur" transition:fade={{ duration: 500 }}></div>
 
-    <div class="croppingDiv">
+    <div class="croppingDiv" transition:fly={{y: -800, duration: 500 }}>
+        <!-- svelte-ignore a11y-img-redundant-alt -->
         <img class="cropAvatar" bind:this={imageElement} alt="Image to crop" />
-        <button class="cropButton" on:click={getCroppedImage}>Подтвердить</button>
+        <div class="cropButtonsDiv">
+            <button class="cropButton" on:click={getCroppedImage}>Подтвердить</button>
+            <button class="cropButton" on:click={cancelCroppedImage}>Отменить</button>
+        </div>
     </div>
 {/if}
 
 {#if showSubmitDiv}
-<div class="backgroundBlur"></div>
-    <div class="submitPassword">
+<div class="backgroundBlur" transition:fade={{ duration: 500 }}></div>
+    <div class="submitPassword" transition:fly={{y: -800, duration: 500 }}>
             <h2>Подтвердите кодом из почты</h2>
             <input bind:value={code} type="password" id="oldPassword" placeholder="Код">
             <button on:click={submit}>Отправить</button>
@@ -174,13 +194,18 @@
                             +
                             {/if}
                         </button>
-
-                        <div class="avatarsHistory">
-                            {#each avatars as avatar}
-                                <img class="avatarHistory" src="{avatar.avatar_url}" alt="ава">
-                            {/each}
+                        
+                        <div class="avatarHistoryDiv">
+                            <h3>старые фотки</h3>
+                            <div class="avatarsHistory">
+                                {#each avatars as avatar}
+                                    <!-- svelte-ignore a11y-click-events-have-key-events -->
+                                    <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+                                    <img class="avatarHistory" class:avatarHistoryPicked={avatar.avatar_url == pickedImg} src="{avatar.avatar_url}" alt="ава"
+                                    on:click={PickOldAvatar(avatar.avatar_url)}>
+                                {/each}
+                            </div>
                         </div>
-
                         <input type="file" accept="image/*" id="fileInput" 
 							   on:change={handleFileChange} style="display: none;">
                     </div>
@@ -213,12 +238,22 @@
 </body>
 
 <style lang="scss">
-  
-  .cropper-modal {
+
+
+.cropper-modal {
     background-color: #101010;
     opacity: 0.5;
 }
 
+.cropButtonsDiv{
+    width: 100%;
+
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+}
+
 .cropButton{
     padding-top: 15px;
 }
@@ -239,9 +274,7 @@
 
 
     position: absolute;
-    left: 50%; top: 50%;
-    transform: (-50%,-50%);
-    transform: translate(-50%,-50%);
+    left: 33.33%; top: 10%;
 
     padding: 20px;
     max-height: 90%;
@@ -272,8 +305,33 @@
 .avatarHistory{
     width: 75px;
     height: 75px;
-    padding: 3px;
+
     border-radius: 15px;
+    padding: 3px;
+
+    cursor: pointer;
+}
+
+.avatarHistoryPicked{
+    width: 75px;
+    height: 75px;
+
+    border-radius: 15px;
+    padding: 1px;
+
+    border: 2px solid transparent;
+		background:
+			linear-gradient(#101010, #101010) padding-box,
+			var(--gradient) border-box;
+}
+
+.avatarHistoryDiv{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    width: 100%;
 }
 
 .changeAvatar{
@@ -296,17 +354,6 @@ button{
     font-size: 32px;
 }
 
-.backgroundBlur{
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.5);
-    backdrop-filter: blur(10px);
-    z-index: 4;
-}
-
 #oldPassword{
     justify-content: center;
 }
diff --git a/src/routes/chat/+page.svelte b/src/routes/chat/+page.svelte
index 8f365b2..681406f 100644
--- a/src/routes/chat/+page.svelte
+++ b/src/routes/chat/+page.svelte
@@ -1,22 +1,22 @@
 <script>
-	import { getLastMessages, MessagePicToUrl, getAllChats, getPinnedMsg, getMessageById, pinMessage, unpinMessage, uploadImages } from '$lib/chat';
+	import { getLastMessages, MessagePicToUrl, getAllChats, getPinnedMsg, getMessageById, pinMessage, unpinMessage, uploadImages, getAllUsers, createNewChat, deleteChat } from '$lib/chat';
 	import { UserCheck } from '$lib/userFunction'
+
 	import Header from '../Header.svelte';
 	import createWebSocket from '$lib/websocket';
-	import { onMount, tick } from 'svelte';
-	import Time from 'svelte-time';
-	import { dayjs } from 'svelte-time';
-	import 'dayjs/locale/ru';
-	import { fade } from 'svelte/transition';
-	import {page} from '$app/stores';
-	import { writable } from 'svelte/store';
+	
+	import { onMount } from 'svelte';
+	import { fade, slide, fly, scale } from 'svelte/transition';
+
+	import formatDistanceToNow from 'date-fns/formatDistanceToNow';
+    import ruLocale from 'date-fns/locale/ru';
 	
 	
-	dayjs.locale('ru');
 	console.clear();
 
 	let userId; //пользователь, который залогинен
 	let socket; //вебсокет
+	let token;
 
 	let messages = [] //массив сообщений, которые отображаются на сайте
 	let msgLoaded = 0
@@ -41,65 +41,65 @@
 	let currentChat;
 	let pickedChatName = ""
 	let pickedChatImg = ""
-	
-	onMount(async () => {
 
+	let inputArea //объект textarea
+
+	onMount(async () => {
 
 		const userData = await UserCheck();
 		userId = userData.id;
 		
 		chats = await getAllChats()
+		createNewChatButton = true
 		console.log(chats, " чаты")
 
 		async function handleChatUrlChange() {
-        // Проверяем, что текущий хэш соответствует шаблону для чата
-        if (window.location.hash.startsWith('#id=')) {
+        	if (window.location.hash.startsWith('#id=')) {
 
-            chatId = window.location.hash.slice(4);
-			msgLoaded = 0
-			console.log(chatId, " chatId")
+        	    chatId = window.location.hash.slice(4);
+				msgLoaded = 0
+				console.log(chatId, " chatId")
 
-			currentChat = chats.find(chat => chat.chat_id == chatId)
-			console.log(currentChat, " текущий чат")
-			pickedChatName = currentChat.chat_name
-			pickedChatImg = currentChat.avatar_image
+				currentChat = chats.find(chat => chat.chat_id == chatId)
+				console.log(currentChat, " текущий чат")
+				pickedChatName = currentChat.chat_name
+				pickedChatImg = currentChat.avatar_image
 
-			messages     = await getLastMessages(chatId,msgLoaded)
-			setTimeout(scrollDown,50)
-			msgLoaded += 15
-			pinnedMsg = await getPinnedMsg(chatId)
-
-			console.log(pinnedMsg, " pinned")
-			console.log(messages, " сообщения")
-
-			let token = localStorage.getItem('BPChat')
-			const websocketUrl = `wss://docs.black-phoenix.ru/api/chat/ws/${chatId}`
-			
-			// const socket = createWebSocket(websocketUrl, token, async (message) => {
-    		// 	// Обработка сообщения
-    		// 	console.log('Received message: ', message);
-			// });
-			
-			socket = createWebSocket(websocketUrl, token, async (message) => {
-
-					console.log(message, "сообщение!!!!!")
-				if(message.flag === "pin" ){
-					console.log("ЗАКРЕП!!!!!!!!!!!")
-					pinnedMsg = [message, ...pinnedMsg]
-				}
-				else if(message.flag === "delete"){
-					let messageToDelete = messages.findIndex(msg => msg.id === message.id)
-					console.log(messageToDelete, "индекс сообщения, которое нужно делитнуть")
-					messages.splice(messageToDelete,1)
-					messages = messages
-					console.log(messages," сообщения после удаления")
-				} else {
-				messages = [...messages, message]
+				messages     = await getLastMessages(chatId,msgLoaded)
 				setTimeout(scrollDown,50)
-				}
-				messages = messages
-			})
-		}
+				msgLoaded += 15
+				pinnedMsg = await getPinnedMsg(chatId)
+
+				console.log(pinnedMsg, " pinned")
+				console.log(messages, " сообщения")
+
+				token = localStorage.getItem('BPChat')
+				const websocketUrl = `wss://docs.black-phoenix.ru/api/chat/ws/${chatId}`
+				
+				socket = createWebSocket(websocketUrl, token, async (message) => {
+
+						console.log(message, "сообщение!!!!!")
+					if(message.flag === "pin" ){
+						console.log("ЗАКРЕП!!!!!!!!!!!")
+						pinnedMsg = [message, ...pinnedMsg]
+					}
+					else if(message.flag === "delete"){
+						let messageToDelete = messages.findIndex(msg => msg.id === message.id)
+						console.log(messageToDelete, "индекс сообщения, которое нужно делитнуть")
+						messages.splice(messageToDelete,1)
+						messages = messages
+						console.log(messages," сообщения после удаления")
+					} else {
+					messages = [...messages, message]
+					setTimeout(scrollDown,50)
+					}
+					messages = messages
+
+					onDestroy(() => {
+  						close();
+  					});
+				})
+			}
 		}
 		handleChatUrlChange();
 		window.addEventListener('hashchange', handleChatUrlChange);
@@ -165,44 +165,53 @@ function onInput(event) {
 
 let x ;
 let y ;
-let showDiv = false;
+let helperDivBoolShow = false
 let helperDiv
 let pickedId
 let	PickedText = ""
 let	PickedImg  = ""
 let PickedName = ""
-$: console.log(pickedId)
-$: console.log(answer)
+//$: console.log(pickedId)
+//$: console.log(answer)
+
+ function helperDivShow(event, id, text, img, username) {
+
+	if (helperDiv) {
+		helperDivBoolShow = false
+	}
 
-function helperDivShow(event, id, text, img, username) {
 	event.preventDefault();
-	
+	helperDivBoolShow = true
+
 	PickedText = text
 	PickedImg = img
 	PickedName = username
 	pickedId = id
-    //showDiv = !showDiv;
-	helperDiv = document.getElementById("helperDiv");
 
-    x = event.clientX;
-    y = event.clientY;
+	const setHelperDivPosition = () => {
+		if (helperDiv) {
+			const x = event.clientX;
+			const y = event.clientY;
+			helperDiv.style.left = `${x}px`;
+			helperDiv.style.top = `${y}px`;
+			console.log(x, y);
+		}
+	};
 
-	helperDiv.style.opacity = "1";
-    helperDiv.style.left = `${x}px`;
-    helperDiv.style.top =  `${y}px`;
-	console.log(x,"  ", y)
-    
+	// Используем setTimeout для того, чтобы убедиться, что элемент доступен в DOM
+	setTimeout(setHelperDivPosition, 0);
   }
 
   function hideHelperDiv(event){
 	
 	if ((event.target !== helperDiv) && (helperDiv)) {
-		helperDiv.style.opacity = "0";
+		helperDivBoolShow = false
 	}
   }
 
   function ansFunc(){
 
+	inputArea.focus()
 	answerMessage = PickedText
 	answerMessageImg = PickedImg
 
@@ -236,7 +245,7 @@ function helperDivShow(event, id, text, img, username) {
 								"user_id": userId,
   								"id": pickedId
 								}));
-  pinnedMsg = pinnedMsg.filter(pinnedMsg => pinnedMsg.id !== pickedId)
+    pinnedMsg = pinnedMsg.filter(pinnedMsg => pinnedMsg.id !== pickedId)
   }
 
   function triggerFileInput() {
@@ -313,27 +322,141 @@ function helperDivShow(event, id, text, img, username) {
 	scrollableDiv.scrollTop = scrollableDiv.scrollHeight;
   }
 
+  let createNewChatButton = false
+  let createNewChatShow = false
+  let nameToFind = ""
+  let newChatName = ""
+  let selectedUserId = "";
+  let users = []
+  $:console.log(selectedUserId)
+
+  async function startingCreateNewChat(){
+	createNewChatShow = true
+	users = await getAllUsers(nameToFind)
+	console.log(users)
+  }
+
+  function checkCheckBox(event){
+	const userId = event.target.value;
+      selectedUserId = userId;
+    
+  }
+
+  async function lisinerNameToFine(event){
+	console.log(event.target.value)
+	nameToFind = event.target.value
+	users = await getAllUsers(nameToFind)
+	console.log(users)
+  }
+
+  async function submtiCreateNewChat(){
+	let newChatId = await createNewChat(newChatName, selectedUserId, token)
+	
+	createNewChatShow = false
+
+	history.pushState(null, null, `/chat#id=${newChatId}`);
+    handleRouteChange();
+  }
+
+  function cancelCreateNewChat(){
+	createNewChatShow = false
+	selectedUserId = ""
+  }
+
+  let msgTime
+  let msgTimeShow = false
+
+  function msgTimeFunc(data, event){
+    let localeTime = new Date(data)
+	const formattedDate = formatDistanceToNow(new Date(localeTime), { addSuffix: true, locale: ruLocale });
+	msgTime = formattedDate
+
+	msgTimeShow = true
+  }
+  
+  function msgTimeFuncOver(event){
+	msgTimeShow = false
+  }
+
+  async function deleteChatButt(chatId){
+	let result = await deleteChat(chatId,token)
+	const index = chats.findIndex(chat => chat.chat_id === chatId);
+    chats.splice(index, 1);
+    console.log(index)
+	console.log(result)
+  }
 </script>
 
 <svelte:window on:click={hideHelperDiv} />
 
 <body>
 
+	{#if createNewChatShow == true}
+	<div class="backgroundBlur" transition:fade></div>
+
+		<div class="newChatDiv" transition:fly={{y:-1000, duration:500}}>
+			<h1 class="">Новый чат</h1>
+			<div class="newChatInputDiv">
+
+				<h3>Название чата</h3>
+				<input class="newChatName" bind:value={newChatName}  type="text">
+				
+				<h4 class="newChatText">заблокируйте доступ к чату одному из пользователей</h4>
+				<input placeholder="Введите ник для поиска" type="text" class="nameToFind" on:input={lisinerNameToFine} name="nameToFind">
+
+				<div class="newChatCheckboxDiv">
+					{#each users as user}
+					<div class="newChatUser">
+
+						<input value="{user.id}" on:change="{checkCheckBox}"
+							   type="radio" name="checkbox" class="radioButton" >
+
+							   <img class="newChatAvatar" src="{user.avatar_image}" alt="ава">
+						<h3 for={user.id}>{user.username}</h3>
+
+					</div>
+					{/each}
+				</div>
+
+			</div>
+
+			<div class="newChatButtonDiv">
+				<button disabled={selectedUserId == ""} on:click={submtiCreateNewChat}>Создать</button>
+				<button on:click={cancelCreateNewChat}>Отменить</button>
+			</div>
+			
+		</div>
+	{/if}
+
 	<div class="grid">
 		
 		<div class="headerDiv"><Header/></div>
 		
 		<div>
+
 			<div class="gradient">
 				<div class="chatsDiv">
+					{#if createNewChatButton == true}
+						<button on:click={startingCreateNewChat} class="createChatDivLeft"
+								transition:fade={{ duration: 800 }}>
+						<h2 class="createNewChat">Создать новый чат</h2>
+					</button>
+					{/if}
+					
+
 					{#each chats as chat}
-						<div class="chatDivLeft">
+						<div class="chatDivLeft" class:chatDivLeftSelected="{chat.chat_id == chatId}"
+						 	 transition:fade={{ duration: 800 }}>
 							<a class="aChatDivLeft" href={`/chat#id=${chat.chat_id}`}>
-							<img class="chatImage" src="{chat.avatar_image}" alt="аватарка">
-							<h2 class="chatName">{chat.chat_name}</h2>
+								<img class="chatImage" src="{chat.avatar_image}" alt="аватарка">
+								<h2 class="chatName">{chat.chat_name}</h2>
+								{#if chat.created_by == userId}
+									<button class="deleteChat" on:click={deleteChatButt(chat.chat_id)}>x</button>
+								{/if}
 							</a>
 						</div>
 					{/each}
+
 				</div>
 			</div>
 			</div>
@@ -342,38 +465,59 @@ function helperDivShow(event, id, text, img, username) {
 
 			<div class="gradient">
 				
+				{#if msgTimeShow == true}
+					<div class="msgTime"  transition:fade={{ duration: 100 }}>
+						<h3>{msgTime}</h3>
+					</div>
+				{/if}
+
 				<div class="chatDiv">
 
 					<img class="backgroundYtka" src="BPytka.png" alt="">
 
+					{#if helperDivBoolShow == true}
 					<!-- svelte-ignore a11y-no-static-element-interactions -->
-					<div id="helperDiv" class="helperDiv" on:contextmenu={(event) => event.preventDefault()}>
+					<div bind:this={helperDiv} id="helperDiv" class="helperDiv" on:contextmenu={(event) => event.preventDefault()}
+						 transition:slide={{ duration: 500 }}>
 						<button on:click={ansFunc} class="helpDiv"><img class="helpImg" src="./icon/answer.png" alt="ans"><p class="ans">Ответить</p></button>
 						<button on:click={pinFunc} class="helpDiv"><img class="helpImg" src="./icon/pin.png"    alt="pin"><p class="pin">Закрепить</p></button>
 						<button on:click={delFunc} class="helpDiv"><img class="helpImg" src="./icon/trash.png"  alt="del"><p class="del">Удалить</p></button>
 					</div>
+					{/if}
+					
+					
 
 					{#if ((chatId != null) && (messages.length === 0))}
-							<div class="noMsgDiv">
-								<h2 class="noMsg1">В этом чате еще нет сообщений.</h2>
-								<h3 class="noMsg2">Крыски, начните обсуждать  <br> прям за ее спиной</h3>
-							</div>
+						<div class="noMsgDiv">
+							<h2 class="noMsg1">В этом чате еще нет сообщений.</h2>
+							<h3 class="noMsg2">Крыски, начните обсуждать  <br> прям за ее спиной</h3>
+						</div>
 					{/if}
 					
 					<div class="msgDiv" bind:this={scrollableDiv} on:scroll={handleScroll}>
 						{#each messages as message}
-							<div class="messageMain">
+							<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+							<!-- svelte-ignore a11y-no-static-element-interactions -->
+							<div class="messageMain" on:contextmenu={helperDivShow(event,message.id, message.message, message.image_url, message.username)}
+								 on:mouseover={msgTimeFunc(message.created_at)} on:mouseout={msgTimeFuncOver}
+								 transition:fade={{ duration: 600 }}>
+								
 								<img class="messageAvatar" src="{message.avatar_image}" alt="ава">
 								<!-- svelte-ignore a11y-click-events-have-key-events -->
 								<!-- svelte-ignore a11y-no-static-element-interactions -->
-								<div class="messageDiv" on:contextmenu={helperDivShow(event,message.id, message.message, message.image_url, message.username)}>
+								<div class="messageDiv">
 									
 									<div class="nameAnswerDiv">
-									<h3>{message.username}</h3>
-									{#if message.answer_message != null}
-										<img class="answerLogo" src="./icon/answerMsg.png" alt="разделитель">
-										<p>{message.answer_message.substr(0, 20)}</p>
-									{/if}
+										<h3>{message.username}</h3>
+
+										{#if message.answer_message != null}
+											<img class="answerLogo" src="./icon/answerMsg.png" alt="разделитель">
+											{#if message.answer_image_url != null}
+												<img class="answerImg" src="{message.answer_image_url}" alt="ответная картинка">
+											{/if}
+											<p>{message.answer_message.substr(0, 20)}</p>
+										{/if}
+
 									</div>
 									
 									<div class="messageMessage">
@@ -389,88 +533,267 @@ function helperDivShow(event, id, text, img, username) {
 					</div>
 				  	
 					{#if (chatId != null)}
-					<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-					<div class="inputDiv">
+						<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+						<div class="inputDiv">
+
+							{#if (answerMessageTextShow == true) || (answerMessageImgShow == true)}
+							<div class="answerMessageDiv" transition:slide={{ duration: 500 }}>
 
-						{#if (answerMessageTextShow == true) || (answerMessageImgShow == true)}
-						<div class="answerMessageDiv">
 								{#if answerMessageImgShow == true}
-									<img class="answerMessageImg" src="{answerMessageImg}" alt="">
+									<img class="answerMessageImg" src="{answerMessageImg}" alt="картинка">
 								{/if}
-							<div class="answerTextDiv">
-								{#if answerMessageTextShow == true}
-									<div class="answerBlockDiv"><h4 class="answerMessage">{answerMessage}</h4></div>
-								{/if}
-								<div class="answerBlockDiv"><h4 class="answerMessageName">{PickedName}</h4></div>
-							</div>
-							<button on:click={deleteAnswer} class="deleteAnswer">x</button>
-						</div>
-						{/if}
 
-						{#if imageShow == true}
-							<div class="imageDiv">
-								<img src="{imageFile}" alt="" class="imageFile">
-								<button on:click={deleteImage} class="imageDelete">x</button>
+								<div class="answerTextDiv">
+
+									{#if answerMessageTextShow == true}
+										<div class="answerBlockDiv"><h4 class="answerMessage">{answerMessage.substr(0, 50)}</h4></div>
+									{/if}
+									<div class="answerBlockDiv"><h4 class="answerMessageName">{PickedName}</h4></div>
+
+								</div>
+								<button on:click={deleteAnswer} class="deleteAnswer">x</button>
 							</div>
-						{/if}
-						
-						<!-- svelte-ignore a11y-autofocus -->
-						<div class="textMsg">
-							<textarea on:keydown={onEnterPress}
-						 			  autofocus placeholder="Введите сообщение" rows="{rows}" bind:value={messageText}
-						 			  on:input={onInput} name="msg" id="msg"></textarea>
-						
-						 	<!-- svelte-ignore a11y-click-events-have-key-events -->
-							<div class="logoForImageDiv">
-						 		<img class="logoForImage"  src="logoForImage.svg" alt=""
-						      		 on:click={() => document.getElementById('fileInput').click()}>
+							{/if}
+
+							{#if imageShow == true}
+								<div class="imageDiv" transition:slide={{ duration: 500 }} >
+									<img src="{imageFile}" alt="" class="imageFile" >
+									<button on:click={deleteImage} class="imageDelete">x</button>
+								</div>
+							{/if}
+							
+							<!-- svelte-ignore a11y-autofocus -->
+							<div class="textMsg">
+								<textarea on:keydown={onEnterPress}
+							 			  autofocus placeholder="Введите сообщение" rows="{rows}" bind:value={messageText}
+							 			  on:input={onInput} bind:this={inputArea} name="msg" id="msg"></textarea>
+							
+							 	<!-- svelte-ignore a11y-click-events-have-key-events -->
+								<div class="logoForImageDiv">
+							 		<img class="logoForImage"  src="logoForImage.svg" alt=""
+							      		 on:click={() => document.getElementById('fileInput').click()}>
+								</div>
+
 							</div>
 
+							<input type="file" accept="image/*" id="fileInput" 
+								   on:change={handleFileChange} style="display: none;">
+
 						</div>
-
-						<input type="file" accept="image/*" id="fileInput" 
-							   on:change={handleFileChange} style="display: none;">
-						
-					</div>
 					{/if}
 				</div>
 
 			</div>
 		</div>
-		</div>
-		<div><div class="gradient">
-			{#if pinnedMsg == null}
-				<div class="noMsgDiv">
-					<h2 class="noMsg1">Тут ничего нет</h2>
-					<h3 class="noMsg2">Но если ты закрепишь сообщение, <br> тут что то изменится</h3>
-				</div>
-			{:else}
-			
-			<div class="pinnedMain">
-				{#each pinnedMsg as msg}
-					<div class="pinDiv">
-						<h3 class="pinName">{msg.username}</h3>
-						<div class="pinMsg">
-							<h3  class="pinnedMsg">{msg.message}</h3>
-							<img src="{msg.image_url}" class="pinImg" alt="">
-						</div>
-						<div class="pinAvatar"><img class="pinnedImg" src="{msg.avatar_image}" alt=""></div>
+	</div>
+		<div>
+			<div class="gradient">
+				{#if pinnedMsg == null}
+					<div class="noMsgDiv">
+						<h2 class="noMsg1">Тут ничего нет</h2>
+						<h3 class="noMsg2">Но если ты закрепишь сообщение, <br> тут что то изменится</h3>
 					</div>
-				{/each}
-				</div>
-			{/if}
+				{:else}
 			
-		</div></div>
+				<div class="pinnedMain">
+					{#each pinnedMsg as msg}
+						<div class="pinDiv" transition:fade={{ duration: 500 }}>
+							<h3 class="pinName">{msg.username}</h3>
+							<div class="pinMsg">
+								<h3  class="pinnedMsg">{msg.message}</h3>
+								<img src="{msg.image_url}" class="pinImg" alt="">
+							</div>
+							<div class="pinAvatar"><img class="pinnedImg" src="{msg.avatar_image}" alt=""></div>
+						</div>
+					{/each}
+				</div>
+				{/if}
+			
+			</div>
+		</div>
 
 
-		<div><h1>7</h1></div>
-		<div><h1>8</h1></div>
-		<div><h1>9</h1></div>
+		<div><h1> </h1></div>
+		<div><h1> </h1></div>
+		<di class="PS">
+			<h2>Made by:</h2>
+			<h3>Uniknow and Urec56</h3>
+		</di>
 	</div>
 </body>
 
 <style lang="scss">
 
+.chatName{
+width: 100%;
+}
+
+.deleteChat{
+	position: absolute;
+	top: 20%;
+	right: 0;
+	transform: translate(-20%,-20%);
+}
+
+.messageForZIndex{
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	//background-color: red;
+}
+
+.msgTime{
+	position: absolute;
+	left: 50%;
+	top: 15px;
+	transform: translate(-50%);
+
+	background-color: #101010aa;
+	padding: 5px;
+	border-radius: 10px;
+
+	z-index: 69;
+	pointer-events: none;
+
+	transition: 0.3s easy;
+}
+
+.newChatCheckboxDiv{
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+
+	overflow: scroll;
+	
+	height: 100%;
+	padding-top: 5px;
+
+}
+
+.newChatAvatar{
+	width: 3rem;
+	border-radius: 15px;
+
+}
+
+.newChatText{
+	padding-top: 15px;
+	text-align: center;
+}
+
+.nameToFind{
+	background-color: var(--background);
+	outline: none;
+
+	border: 0;
+	border-bottom: 1px solid white;
+}
+
+.radioButton{
+	margin-right: 10px;
+	accent-color: var(--purple);
+	background-color: var(--background);
+
+	cursor: pointer;
+	appearance: none;
+  	-webkit-appearance: none;
+  	-moz-appearance: none;
+
+	width: 20px;
+  	height: 20px;
+
+  	border: 2px solid ;
+  	border-radius: 4px;
+
+	  transition: transform 0.3s ease;
+}
+
+.radioButton:checked{
+	transform: scale(1.2);
+
+	border-color: #ffffff;
+	border: 2px solid white;
+
+	background-image: var(--gradient);
+	background-color: #e0dede;
+}
+
+.newChatUser{
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	width: calc(50% - 2px);
+	padding-top: 5px;
+	padding-left: 2px;
+	
+}
+
+.newChatInputDiv{
+	display: flex;
+	flex-direction: column;
+	height: 80%;
+	width: 90%;
+	//background-color: red;
+}
+
+.newChatButtonDiv{
+	display: flex;
+	flex-direction: row;
+	justify-content: space-around;
+
+	width: 100%;
+	//background-color: red;
+}
+
+.newChatName {
+		height: 2em;
+
+		font-size: 24px;
+		font-weight: 600;
+
+		border: 1px solid transparent;
+		background:
+			linear-gradient(#101010, #101010) padding-box,
+			var(--gradient) border-box;
+		border-radius: 10px;
+
+		box-shadow:
+			4px 4px 15px rgba($color: #5e2a83, $alpha: 0.38),
+			-4px -4px 15px rgba($color: #3d53fe, $alpha: 0.38);
+		outline: none;
+	}
+
+	.newChatName:focus {
+		transition: 0.5s ease-in;
+		box-shadow: 0 0 transparent;
+	}
+	.newChatName: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);
+	}
+
+.newChatDiv{
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+
+	z-index: 727;
+	position: absolute;
+	top: 50%; left: 50%;
+    transform: translate(-50%,-50%);
+
+	width: 30%;
+	aspect-ratio: 10/13.1;
+
+	border-radius: 15px;
+	border: 1px solid transparent;
+	background:
+		linear-gradient(#101010, #101010) padding-box,
+		var(--gradient) border-box;
+}
+
 .answerLogo{
 	padding: 0 4px;
 }
@@ -496,34 +819,41 @@ function helperDivShow(event, id, text, img, username) {
 }
 
 .pickedChatImg{
-	//z-index: 0;
-	//position: absolute;
-	//top: -10%;
-	//left: 10%;
 	border-radius: 25px;
-	//width: auto;
 	height: 75px;
-	
 }
 
 .pickedChatName{
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	//z-index: 1;
-	//position: absolute;
-	//top: -35px;
 }
 
 .deleteAnswer{
-	padding: 0 0 0 10px;
+	padding: 0 15px 0 0;
 }
 
 .answerBlockDiv{
+	display: flex;
+	align-items: center;
 	padding-left:5px;
 	width: 80%;
 	height: 50%;
-	//outline: 1px solid white;
+}
+
+.answerMessage{
+	text-overflow: ellipsis;
+	white-space: nowrap;
+    overflow: hidden;
+}
+
+.answerImg{
+	opacity: 0.8;
+	width: 30px;
+	height: 30px;
+	border-radius: 10px;
+	padding-bottom: 5px;
+	padding-right: 5px;
 }
 
 .answerTextDiv{
@@ -531,6 +861,7 @@ function helperDivShow(event, id, text, img, username) {
 	flex-direction: column-reverse;
 	justify-content: center;
 	align-items: center;
+	width: 100%;
 }
 
 .answerMessageName{
@@ -539,27 +870,28 @@ function helperDivShow(event, id, text, img, username) {
 
 .answerMessageImg{
 	height: 3rem;
-	padding: 0px 0 5px 0;
-
-	border-radius: 13px;
+	border-radius: 15px;
 }
 
 .answerMessageDiv{
 	display: flex;
-	padding: 3px 0 0 5px;
-	//background: red;
+	padding: 5px 0 5px 5px;
 	border-bottom: 1px solid rgba($color: #ffffff, $alpha: 0.10727) ;
-	//background-color: red;
 }
 
 .imageDiv{
 	position: relative;
-	padding-top: 5px;
-	padding-left: 5px;
+	display: flex;
+	flex-direction: row;
+	padding: 5px;
+
 }
 
 .imageDelete{
 	position: absolute;
+	right: 0;
+	top: 5px;
+	padding: 0 15px 0 0;
     cursor: pointer;
 }
 
@@ -571,8 +903,8 @@ function helperDivShow(event, id, text, img, username) {
 
 .imageFile{
 	border-radius: 12px;
-	height: auto;
-	width: 250px;
+	height: 250px;
+	max-width: 90%;
 }
 
 .pinName{
@@ -618,7 +950,6 @@ function helperDivShow(event, id, text, img, username) {
 	flex-direction: column;
 	justify-content: center;
 	align-items: center;
-	//background-color: red;
 	padding: 10px 0;
 }
 
@@ -631,11 +962,6 @@ function helperDivShow(event, id, text, img, username) {
 	overflow: auto;
 	scroll-behavior: smooth;
 	
-	//background-color: red;
-}
-
-.nameAnswerDiv > p,img{
-	//margin-left: 5px;
 }
 
 .nameAnswerDiv > p{
@@ -680,7 +1006,7 @@ function helperDivShow(event, id, text, img, username) {
 	padding: 5px;
 
 	transition: opacity 0.3s;
-	opacity: 0;
+	opacity: 1;
 		border-bottom-left-radius: 15px;
 		border-bottom-right-radius: 15px;
 		border-top-right-radius: 15px;
@@ -703,24 +1029,63 @@ function helperDivShow(event, id, text, img, username) {
 	display: flex;
 	align-items: center;
 	flex-direction: column;
-	width: 100%;
+	width: calc(100% - 15px);
 	height: 100%;
-	overflow: hidden;
+	overflow: scroll;
 }
 
 .aChatDivLeft{
 	display: flex;
 	flex-direction: row;
 	align-items: center;
-	 /* Задаем блочный тип элемента */
-        width: 100%;
-		text-decoration: none;
+
+    width: 100%;
+	text-decoration: none;
 }
 
-.chatDivLeft{
+.createChatDivLeft{
 	display: flex;
 	flex-direction: row;
 	align-items: center;
+	justify-content: center;
+	
+	
+	width: 95%;
+	height: 45px;
+	min-height: 45px;
+
+	margin-top: 10px;
+	font-size: 16px;
+	
+	border-radius: 15px;
+	border: 1px solid transparent;
+	background:
+		linear-gradient(#101010, #101010) padding-box,
+		var(--gradient) border-box;
+	transition: 0.5s;
+	z-index: 1;
+
+	&:hover{
+		z-index: 0;
+		box-shadow:
+			4px 4px 15px rgba($color: #5e2a83, $alpha: 1.58),
+			-4px -4px 15px rgba($color: #3d53fe, $alpha: 1.58);
+
+	}
+}
+
+.chatDivLeftSelected{
+	z-index: 0;
+		box-shadow:
+			4px 4px 15px rgba($color: #5e2a83, $alpha: 1.58),
+			-4px -4px 15px rgba($color: #3d53fe, $alpha: 1.58);
+}
+
+.chatDivLeft{
+	position: relative;
+
+	display: flex;
+	flex-direction: row;
 	
 	width: 95%;
 	height: 75px;
@@ -740,10 +1105,6 @@ function helperDivShow(event, id, text, img, username) {
 			4px 4px 15px rgba($color: #5e2a83, $alpha: 1.58),
 			-4px -4px 15px rgba($color: #3d53fe, $alpha: 1.58);
 
-		& + .chatName{
-			//text-shadow: 0px 0px 115px white;
-			//TODO: не работает, починить подсветку текста
-		}
 	}
 }
 
@@ -753,6 +1114,7 @@ function helperDivShow(event, id, text, img, username) {
 	width: 60px;
 	border-radius: 15px;
 	margin: 0 10px;
+	padding: 5px 0 5px 0;
 }
 
 .logoForImage{
@@ -771,7 +1133,6 @@ function helperDivShow(event, id, text, img, username) {
 }
 
 .messageImage{
-	padding-bottom: 0px;
 	border-radius: 10px;
 	max-width: 500px;
 	max-height: 500px;
@@ -784,16 +1145,14 @@ function helperDivShow(event, id, text, img, username) {
 	justify-content: space-between;
 	background-color: #7734AA;
 	border-radius: 15px;
-	//padding: 5px;
 	word-break: break-word;
 }
 
 .messageMsg{
-	padding: 5px; //паддинг, чтобы текст нормально выглдяил
+	padding: 5px;
 }
 
 .messageAvatar{
-	
 	width: 60px;
 	height: 60px;
 	border-radius: 15px;
@@ -801,9 +1160,10 @@ function helperDivShow(event, id, text, img, username) {
 }
 
 .messageMain{
-display: flex;
-flex-direction: row;
-padding-bottom: 10px;
+	position: relative;
+	display: flex;
+	flex-direction: row;
+	padding-top: 10px;
 }
 
 .msgDiv{
@@ -812,19 +1172,21 @@ padding-bottom: 10px;
 	height: 100%;
 	overflow: auto;
 	scroll-behavior: smooth;
+	padding: 0 5px;
 }
 
 .inputDiv{
 	display: flex;
 	flex-direction: column;
+	align-self: center;
+
 	border-radius: 15px;
 	border: 1px solid transparent;
 		background:
 			linear-gradient(#101010, #101010) padding-box,
 			var(--gradient) border-box;
-	margin-top: 5px;
-	//padding: 5px;
-	//background-color: red;
+
+	width: 98%;
 }
 
 #msg{
@@ -836,34 +1198,23 @@ padding-bottom: 10px;
 	outline: none;
 	resize: none;
 	padding: 13px 0 0 5px;
-	//background-color: red;
 }
 
 .chatDiv{
-	z-index: 2;
-	//background-color: red;
-	width: 100%;
-	height: 99%;
-	margin: 0 10px 5px 10px;
 	display: flex;
 	flex-direction: column;
-	align-self: center;
 	align-content: center;
+	align-self: center;
+
+	width: 100%;
+	height: 99%;
+
+	z-index: 2;
+	margin: 0 10px 5px 10px;
 }
-
-// .chatDiv::after{
-// 	content: '';
-// 	background-image: url('./BPytka.png');
-// 	background-repeat:no-repeat;
-// 	width: 1010px;
-// 	height: 1010px;
-// 	pointer-events: none;
-// }
-//TODO: сделать бекграунт картинку
-
 .headerDiv{
 	grid-column: span 3;
-	z-index: 69;
+	z-index: 3;
 }
 
 .gradient{
@@ -872,16 +1223,18 @@ padding-bottom: 10px;
 		background:
 			linear-gradient(#101010, #101010) padding-box,
 			var(--gradient) border-box;
-		border-radius: 15px;
-		width: 95%;
-		height: 95%;
+	border-radius: 15px;
+	border-bottom: 0;
 
-		display: flex; /* Добавляем для центрирования по вертикали и горизонтали */
-    	align-self: center; /* Центрируем по вертикали */
-    	justify-content: center; /* Центрируем по горизонтали */
-    	margin: auto;
-		border-bottom: 0;
-		position: relative;
+	width: 95%;
+	height: 95%;
+
+	display: flex;
+    align-self: center; 
+    justify-content: center;
+
+    margin: auto;
+	position: relative;
 }
 
 .gradient::before{
@@ -897,8 +1250,9 @@ padding-bottom: 10px;
 }
 
 body{
-width: 100%;
-height: 100%;
+	position: relative;
+	width: 100%;
+	height: 100%;
 }
 .grid{
 	display: grid;
@@ -908,7 +1262,6 @@ height: 100%;
         height: 100%; 
 }
 .grid > *{
-	//outline: 1px solid white;
 	display: flex;
     align-items: center;
     justify-content: center;
@@ -922,10 +1275,14 @@ height: 100%;
 	text-align: center;
 	
 	height: 100%;
-	//background-color: red;
 }
 .noMsgDiv > h2{
 	padding-bottom: 10px;
 }
 
+.PS{
+	display: flex;
+	flex-direction: column;
+}
+
 </style>
diff --git a/src/routes/profile/+page.svelte b/src/routes/profile/+page.svelte
index f7acea5..86fdf8d 100644
--- a/src/routes/profile/+page.svelte
+++ b/src/routes/profile/+page.svelte
@@ -51,8 +51,8 @@
   </script>
   
   <div class="crop-container">
-    <input type="file" accept="image/*" on:change={handleFileChange} />
-    <img bind:this={imageElement} alt="Image to crop" />
+    <input type="file" accept="image/*" id="fileInput"  on:change={handleFileChange} />
+    <img class="CropAvatar" bind:this={imageElement} alt="Image to crop" />
     
   </div>
   <button on:click={getCroppedImage}>Crop Image</button>