diff --git a/src/components/Chat2.tsx b/src/components/Chat2.tsx
index 54d51b9..eb2f9ce 100644
--- a/src/components/Chat2.tsx
+++ b/src/components/Chat2.tsx
@@ -6,28 +6,44 @@ import CloseIcon from "./icons/CloseIcon";
 import SendChatIcon from "./icons/SendChatIcon";
 import Button from "./ui/Button";
 import useStreamUserStore from "../stores/useStreamUserStore";
-import { FormEvent, useRef, useState } from "react";
-import IMessage from "../types/IMessage";
-import useStateRef from "react-usestateref";
+import { FormEvent, useEffect, useRef, useState } from "react";
+import useSocketStore from "../stores/useSocketStore";
+import useChatStore from "../stores/useChatStore";
 
 interface Props {
   onClose: () => void;
 }
 
 function Chat2({ onClose }: Props) {
-//   const { socket } = useSocketStore();
+  const { socket } = useSocketStore();
   const { me, users } = useStreamUserStore();
-  const [messages] = useStateRef<IMessage[]>([]);
+  // const [messages] = useStateRef<IMessage[]>([]);
   const messagesRef = useRef<HTMLDivElement>(null);
   const [messageText, setMessageText] = useState<string>("");
   const messageTextRef = useRef<HTMLInputElement>(null);
+  const { messages } = useChatStore();
 
   function sendMessage(e: FormEvent) {
     e.preventDefault();
+
+    socket?.emit("message", messageText);
+
+    setMessageText("");
   }
 
+  useEffect(() => {
+    if (!messages.length) return;
+
+    messagesRef.current?.scrollTo({
+      top: messagesRef.current.scrollHeight,
+      behavior: "smooth",
+    });
+  }, [messages]);
+
   return (
-    <div className={`chat relative h-full flex flex-col w-[296px] bg-white`}>
+    <div
+      className={`chat relative h-[calc(100vh-48px)] flex flex-col w-[296px] bg-white`}
+    >
       <div className="flex items-center justify-between p-2 pl-4 border-b border-[#DAE0E5]">
         <p className="text-sm font-semibold">
           <Trans i18nKey={"chat"}>Чат</Trans>
@@ -47,14 +63,16 @@ function Chat2({ onClose }: Props) {
           <div
             key={index}
             className={`text-sm p-2 flex flex-col gap-1 rounded-lg ${
-              users.find((user) => user.id === me?.id)?.name === message.name
+              users.find((user) => user.id === me?.id)?.id === message.userId
                 ? "bg-[#C4DDF5]"
                 : "bg-[#F0F1F2]"
             }`}
           >
-            {users.find((user) => user.id === me?.id)?.name !==
-              message.name && (
-              <p className="text-[#49A1F5] font-semibold">{message.name}</p>
+            {users.find((user) => user.id === me?.id)?.id !==
+              message.userId && (
+              <p className="text-[#49A1F5] font-semibold">
+                {users.find((user) => user.id === message.userId)?.name}
+              </p>
             )}
 
             <p className="break-words">{message.text}</p>
@@ -70,7 +88,7 @@ function Chat2({ onClose }: Props) {
             ref={messageTextRef}
             type="text"
             placeholder={t("writeAMessage")}
-            className="w-full bg-transparent text-sm outline-none"
+            className="w-full text-sm bg-transparent outline-none"
             value={messageText}
             onChange={(e) => setMessageText(e.target.value)}
           />
diff --git a/src/components/icons/DesktopIcon.tsx b/src/components/icons/DesktopIcon.tsx
index 14b3a3f..2c49848 100644
--- a/src/components/icons/DesktopIcon.tsx
+++ b/src/components/icons/DesktopIcon.tsx
@@ -9,13 +9,13 @@ function DesktopIcon() {
     >
       <path
         d="M2.6665 3.87878C2.6665 3.20934 3.26346 2.66666 3.99984 2.66666L11.9998 2.66666C12.7362 2.66666 13.3332 3.20934 13.3332 3.87878V8.1212C13.3332 8.79064 12.7362 9.33332 11.9998 9.33332L3.99984 9.33332C3.26346 9.33332 2.6665 8.79064 2.6665 8.1212L2.6665 3.87878Z"
-        stroke="#ccc"
+        stroke="currentColor"
         strokeWidth={1.5}
         strokeLinecap="round"
       />
       <path
         d="M13.2794 11H2.72092C2.29049 11 1.90835 11.2754 1.77224 11.6838C1.5564 12.3313 2.03836 13 2.72092 13L13.2794 13C13.962 13 14.4439 12.3313 14.2281 11.6838C14.092 11.2754 13.7098 11 13.2794 11Z"
-        stroke="#ccc"
+        stroke="currentColor"
         strokeWidth={1.5}
         strokeLinecap="round"
       />
diff --git a/src/components/icons/MobileIcon.tsx b/src/components/icons/MobileIcon.tsx
index d70c5f4..e37d325 100644
--- a/src/components/icons/MobileIcon.tsx
+++ b/src/components/icons/MobileIcon.tsx
@@ -9,7 +9,7 @@ function MobileIcon() {
     >
       <path
         d="M7.44428 3.33333H8.55539M5.99984 14L9.99984 14C10.7362 14 11.3332 13.403 11.3332 12.6667V3.33333C11.3332 2.59695 10.7362 2 9.99984 2L5.99984 2C5.26346 2 4.6665 2.59695 4.6665 3.33333L4.6665 12.6667C4.6665 13.403 5.26346 14 5.99984 14Z"
-        stroke="#ccc"
+        stroke="currentColor"
         strokeWidth={1.5}
         strokeLinecap="round"
       />
diff --git a/src/pages/StreamPage3.tsx b/src/pages/StreamPage3.tsx
index 1c960e0..1ebe3e6 100644
--- a/src/pages/StreamPage3.tsx
+++ b/src/pages/StreamPage3.tsx
@@ -25,7 +25,7 @@ import MicroOffIcon from "../components/icons/MicroOffIcon";
 import CameraOnIcon from "../components/icons/CameraOnIcon";
 import CameraOffIcon from "../components/icons/CameraOffIcon";
 import { Trans } from "react-i18next";
-import { isIOS, useMobileOrientation } from "react-device-detect";
+import { isIOS, isMobile, useMobileOrientation } from "react-device-detect";
 import WindowIcon from "../components/icons/WindowIcon";
 import FullscreenIcon from "../components/icons/FullscreenIcon";
 import ShareIcon from "../components/icons/ShareIcon";
@@ -39,6 +39,10 @@ import useStreamUserStore from "../stores/useStreamUserStore";
 import Chat2 from "../components/Chat2";
 import Rotate64Icon from "../components/icons/Rotate64Icon";
 import Draggable from "react-draggable";
+import DesktopIcon from "../components/icons/DesktopIcon";
+import MobileIcon from "../components/icons/MobileIcon";
+import ChatIcon from "../components/icons/ChatIcon";
+import useChatStore from "../stores/useChatStore";
 // import ChatIcon from "../components/icons/ChatIcon";
 
 // import MoreIcon from "../components/icons/MoreIcon";
@@ -79,6 +83,7 @@ function StreamPage3() {
   const [step, setStep] = useState<number>(1);
   const [isShowChat, setIsShowChat] = useState<boolean>(false);
   const { isPortrait } = useMobileOrientation();
+  const { setMessages } = useChatStore();
 
   async function startCall(remotePeerId: string) {
     if (!peerInstance) return;
@@ -131,6 +136,7 @@ function StreamPage3() {
 
   function initPeer() {
     const peer = new Peer({
+      host: "stream.graff.tech",
       config: {
         iceServers: [
           {
@@ -212,6 +218,10 @@ function StreamPage3() {
       toast.info(`Вы получили разрешение на управление`);
     });
 
+    socket.on("message", ({ userId, text }) => {
+      setMessages([...useChatStore.getState().messages, { userId, text }]);
+    });
+
     socket.on("connect", () => {
       setSocket(socket);
     });
@@ -267,7 +277,7 @@ function StreamPage3() {
 
     setIsEnded(false);
     setWSUrl(
-      `wss://${activeSession.location}.sess.stream.graff.tech/${activeSession.name}/${activeSession.cirrusPort}/`
+      `wss://${activeSession.location}.sess.stream.graff.tech/server/${activeSession.localIP}:${activeSession.cirrusPort}`
     );
     setModal(<SetNameModal onAction={handleSetName} />);
 
@@ -310,6 +320,7 @@ function StreamPage3() {
 
   useEffect(() => {
     getWSUrl();
+    // initSocket();
   }, []);
 
   useEffect(() => {
@@ -347,16 +358,16 @@ function StreamPage3() {
     >
       {isEnded === false && (
         <>
-          <div className="flex max-lg:flex-col items-center justify-between bg-white lg:h-12 lg:w-auto w-12 lg:px-6 max-lg:py-2">
+          <div className="flex items-center justify-between w-12 bg-white max-lg:flex-col lg:h-12 lg:w-auto lg:px-6 max-lg:py-2">
             <div className="lg:pr-6">
               <img
                 src="/images/logo24.svg"
                 alt=""
-                className="lg:block hidden"
+                className="hidden lg:block"
               />
             </div>
             <div className="flex items-center gap-4">
-              <div className="lg:flex hidden items-center gap-2">
+              <div className="items-center hidden gap-2 lg:flex">
                 <div className="relative w-6 h-6 bg-[#E6ECF2] rounded-full flex items-center justify-center">
                   <p className="text-xs font-semibold">
                     {name[0]?.toUpperCase()}
@@ -366,8 +377,11 @@ function StreamPage3() {
                   )}
                 </div>
                 <p className="text-xs">{name}</p>
+                <div className="text-[#CCCCCC]">
+                  {isMobile ? <MobileIcon /> : <DesktopIcon />}
+                </div>
               </div>
-              <div className="flex max-lg:flex-col items-center gap-2">
+              <div className="flex items-center gap-2 max-lg:flex-col">
                 <div className="relative group">
                   <Button
                     variant="secondary"
@@ -428,7 +442,7 @@ function StreamPage3() {
                 )}
               </div>
               <div className="h-4 w-px bg-[#DAE0E5] lg:block hidden"></div>
-              <div className="lg:flex hidden">
+              <div className="hidden gap-6 lg:flex">
                 {users.map((user) => {
                   if (user.id !== userId) {
                     return (
@@ -442,6 +456,9 @@ function StreamPage3() {
                           )}
                         </div>
                         <p className="text-xs">{user.name}</p>
+                        <div className="text-[#CCCCCC]">
+                          {isMobile ? <MobileIcon /> : <DesktopIcon />}
+                        </div>
 
                         {me?.isAdmin && me?.isControlAllowed && (
                           <div className="relative">
@@ -469,8 +486,8 @@ function StreamPage3() {
                 })}
               </div>
             </div>
-            <div className="flex max-lg:flex-col gap-2 lg:ml-auto">
-              {/* <div className="relative group">
+            <div className="flex gap-2 max-lg:flex-col lg:ml-auto">
+              <div className="relative group">
                 <Button
                   variant="secondary"
                   icon={<ChatIcon />}
@@ -478,7 +495,7 @@ function StreamPage3() {
                   onClick={() => setIsShowChat((prev) => !prev)}
                 />
                 <Tooltip text={isShowChat ? "Скрыть чат" : "Показать чат"} />
-              </div> */}
+              </div>
               <div className="relative group">
                 <Button
                   variant="secondary"
@@ -505,7 +522,7 @@ function StreamPage3() {
               )}
             </div>
           </div>
-          <div className="relative flex-1 flex">
+          <div className="relative flex flex-1">
             {WSUrl && (
               <PixelStreamingWrapper2
                 initialSettings={{
@@ -534,7 +551,7 @@ function StreamPage3() {
               defaultClassName="cursor-grab"
               defaultClassNameDragging="cursor-grabbing"
             >
-              <div className="absolute top-2 lg:left-2 max-lg:right-2 space-y-2">
+              <div className="absolute space-y-2 top-2 lg:left-2 max-lg:right-2">
                 <div className={`relative ${!permission ? "hidden" : ""}`}>
                   <video
                     ref={localVideoRef}
@@ -566,7 +583,7 @@ function StreamPage3() {
           </div>
 
           {isPortrait && (
-            <div className="absolute top-0 left-0 w-full h-full bg-white flex flex-col items-center justify-center gap-2">
+            <div className="absolute top-0 left-0 flex flex-col items-center justify-center w-full h-full gap-2 bg-white">
               <Rotate64Icon />
               <p className="font-semibold">Поверните устройство</p>
             </div>
@@ -578,8 +595,8 @@ function StreamPage3() {
       )}
 
       {isEnded === true && (
-        <div className="flex-1 flex items-center justify-center p-8">
-          <p className="text-2xl text-white font-gilroy text-center">
+        <div className="flex items-center justify-center flex-1 p-8">
+          <p className="text-2xl text-center text-white font-gilroy">
             <Trans i18nKey={"demonstrationCompleted"}>
               Данная демонстрация была завершена
             </Trans>