diff --git a/src/lib/userFunction.js b/src/lib/userFunction.js
index 5b50e6f..ccf76a1 100644
--- a/src/lib/userFunction.js
+++ b/src/lib/userFunction.js
@@ -41,6 +41,7 @@ export async function UserCheck(){
       msgMassive[i].created_at = localTime
       
       }
+      msgMassive.reverse();
       console.log(msgMassive)
       return msgMassive
     }
diff --git a/src/routes/Header.svelte b/src/routes/Header.svelte
index 161da4a..08b231b 100644
--- a/src/routes/Header.svelte
+++ b/src/routes/Header.svelte
@@ -43,6 +43,11 @@
 </header>
 
 <style>
+
+	.name{
+
+	}
+
 	.buttonUser {
 		width: 100%;
 		height: 100%;
@@ -129,11 +134,15 @@
 	.userAvatar {
 		justify-content: right;
 		width: 70px;
+		height: 70px;
 		border-radius: 50%;
 
 		max-width: 100%;
 		max-height: 100%;
 
+		min-height: 50px;
+		min-width: 50px;
+
 		display: flex;
 		align-items: center;
 	}
diff --git a/src/routes/chatPage/+page.svelte b/src/routes/chatPage/+page.svelte
index e5967c0..fbc3d01 100644
--- a/src/routes/chatPage/+page.svelte
+++ b/src/routes/chatPage/+page.svelte
@@ -26,7 +26,7 @@
 		messages = await getLastMessages();
 
 		socket = createWebSocket(websocketUrl, (message) => {
-			messages = [message, ...messages];
+			messages = [...messages, message];
 		});
 	});
 
@@ -52,21 +52,14 @@
 		}
 	}
 
-	let textarea;
-
-	const updateTextareaSize = () => {
-		// Устанавливаем высоту textarea на основе количества строк
-		textarea.style.height = 'auto'; // Сбрасываем высоту на auto перед измерением
-		textarea.style.height = `${textarea.scrollHeight}px`;
-		
-	};
-
 	function handleKeyPress(event) {
 		if (event.key === 'Enter' && !event.shiftKey) {
 			// Если нажат Enter и не нажат Shift, отправляем сообщение
 			sendMessage(event);
 		}
+		
 	}
+
 </script>
 
 <body class="backgroundPic">
@@ -80,7 +73,7 @@
 					<div class="divMessage">
 						<div class="userFiled">
 							<h3 class="MsgName">{message.username}</h3>
-							<Time relative timestamp={message.created_at}></Time>
+							<div class="MsgTime"><Time relative timestamp={message.created_at}></Time></div>
 						</div>
 
 						<p class="MsgMsg">{message.message}</p>
@@ -98,9 +91,7 @@
 				class="chatInput"
         		placeholder="Введите сообщение"
 				maxlength="2000"
-				rows="3"
-				bind:this={textarea}
-				on:input={updateTextareaSize}
+				rows="1"
 				type="text"
 				bind:value={messageText}
 				on:keypress={handleKeyPress}
@@ -140,16 +131,15 @@
 }
 
 	.userFiled {
-		display: flex;
-		justify-content: flex-start;
+		
+	}
+	.userFiled > * {
+		display: inline;
+		margin: 0.5vw;
 	}
 
 	.MsgMsg{
-		
-	}
-
-	.MsgName {
-		
+		word-wrap: break-word;
 	}
 
 	.MsgPic {
@@ -162,18 +152,19 @@
 	}
 
 	.MsgAva {
-		height: 6vh;
 		min-height: 50px;
-		width: auto;
+		min-width: 50px;
+		height: 5vw;
+		width: 5vw;
 		border: 2px solid rgba(255, 255, 255, 0.6);
 		border-radius: 10px;
 		margin: 0.25vw;
 	}
 
 	.MsgAll {
-		display:flex;
-		flex-direction: row;
-
+		display: grid;
+		grid-template-columns: 5vw 44vw;
+		gap: 1vw;
 	}
 
 	.divMessage {
@@ -181,20 +172,12 @@
 		border: 1px solid rgba(255, 255, 255, 0.5);
 		border-radius: 15px;
 		box-shadow: 0 0px 30px rgba(0, 0, 0, 0.2);
-		
-		
 		margin: 3px;
-		overflow-wrap: break-word;
-
 	}
 
 	.chatBox {
-		display: flex;
-		flex: 30;
-		flex-direction: column-reverse;
-		align-items: flex-start;
 
-		overflow-x:hidden;
+		overflow-x:auto;
 		width: 100%;
 		
 
@@ -219,10 +202,9 @@
 
 	.chatSend {
     box-shadow: 0 -4px 30px rgb(0, 0, 0, 0.5);
-		display: flex;
-		flex: 2;
-		width: 100%;
-		justify-content: space-between;
+	display: flex;
+	width: 100%;
+	justify-content: space-between;
     border: 1px solid rgba(255, 255, 255, 0.43);
     border-bottom-left-radius: 15px;
     border-bottom-right-radius: 15px;
