diff --git a/.env.development b/.env.development
index 4330e9d..49882ac 100644
--- a/.env.development
+++ b/.env.development
@@ -2,4 +2,4 @@ VITE_AUTH0_DOMAIN="dev-txpc5harm481cb6o.us.auth0.com"
 VITE_AUTH0_CLIENT_ID="BOU97TMrp85ftAnrXSLTiYYiuifp9jfz"
 VITE_API='https://network-class-server.ru'
 VITE_WS_API='wss://network-class-server.ru'
-VITE_VIDEOSDK_HREF=''
\ No newline at end of file
+VITE_VIDEOSDK_APP='http://localhost:3000/react-rtc-demo'
\ No newline at end of file
diff --git a/.env.production b/.env.production
index f31acec..169fb1e 100644
--- a/.env.production
+++ b/.env.production
@@ -2,4 +2,4 @@ VITE_AUTH0_DOMAIN="dev-txpc5harm481cb6o.us.auth0.com"
 VITE_AUTH0_CLIENT_ID="fOB3CWsgCnNLI5q7OMWe9DfWaAXOme2o"
 VITE_API='https://network-class-server.ru'
 VITE_WS_API='wss://network-class-server.ru'
-VITE_VIDEOSDK_HREF=''
\ No newline at end of file
+VITE_VIDEOSDK_APP='https://network-class-videosdk-client.pages.dev'
\ No newline at end of file
diff --git a/src/entities/room/ui/RoomCard.tsx b/src/entities/room/ui/RoomCard.tsx
index 16c51cb..62fc3f4 100644
--- a/src/entities/room/ui/RoomCard.tsx
+++ b/src/entities/room/ui/RoomCard.tsx
@@ -101,8 +101,8 @@ const RoomCard: React.FC<Props> = ({ room }) => {
         <img src={callDisabled} alt="недоступен" />
       )}
       <Access>
-        <JoinButton href={`https://network-class-videosdk-client.pages.dev/?roomId=${room.id}&email=${user?.email}`} />
-        <Tooltip active={tooltipActive}>
+        <JoinButton href={`${import.meta.env.VITE_VIDEOSDK_APP}/?roomId=${room.id}&email=${user?.email}`} />
+        <Tooltip active={tooltipActive} message="Ссылка скопирована!">
           <Button onClick={copyLink}>
             <svg
               width="18"
diff --git a/src/entities/user/api/addUser.ts b/src/entities/user/api/addUser.ts
deleted file mode 100644
index a863819..0000000
--- a/src/entities/user/api/addUser.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import userState from "../../../pages/Lobby/store/userState";
-
-export const AddUserThunk = (fullname: any, photo_url: string, email: any) => {
-    const API = String(import.meta.env.VITE_API);
-
-    const newUser = {
-        full_name: fullname,
-        photo_url: photo_url,
-        email: email
-    }
-
-    fetch(`${API}/users`, {
-      method : 'POST',
-      headers: {
-        'Content-type': 'application/json',
-      },
-      body : JSON.stringify(newUser),
-    })
-    .then(response => response.text())
-    .then(response => {
-        response = JSON.parse(response);
-        console.log(response);
-        userState.addUser(JSON.parse(response));
-    })
-}
diff --git a/src/entities/user/api/useAddUser.ts b/src/entities/user/api/useAddUser.ts
new file mode 100644
index 0000000..f53e1db
--- /dev/null
+++ b/src/entities/user/api/useAddUser.ts
@@ -0,0 +1,34 @@
+import { useState, useEffect } from 'react';
+
+export const useAddUser = (fullname: any, photo_url: string, email: any) => {
+    const API = String(import.meta.env.VITE_API);
+    const [user, setUser] = useState({});
+
+    const newUser = {
+        full_name: fullname,
+        photo_url: photo_url,
+        email: email
+    }
+
+    async function createUser() {
+      await fetch(`${API}/users`, {
+        method : 'POST',
+        headers: {
+          'Content-type': 'application/json',
+        },
+        body : JSON.stringify(newUser),
+      })
+      .then(response => response.text())
+      .then(response => {
+          response = JSON.parse(response);
+          console.log(response);
+          setUser(response);
+      })
+    }
+
+    useEffect(() => {
+      createUser();
+    }, [])
+
+  return user;
+}
diff --git a/src/entities/user/ui/UserCard.tsx b/src/entities/user/ui/UserCard.tsx
index 816eacf..546a522 100644
--- a/src/entities/user/ui/UserCard.tsx
+++ b/src/entities/user/ui/UserCard.tsx
@@ -1,21 +1,11 @@
 import { useAuth0 } from "@auth0/auth0-react";
-import React, { useState } from "react";
+import React from "react";
 import { styled } from "styled-components";
 import avatar from "../../../../public/icons/avatar.svg";
 import CardButton from "../../../shared/ui/cardButton/CardButton";
-
-const Container = styled.div`
-  font-family: var(--font);
-  color: #000;
-  display: flex;
-  width: 100%;
-  padding: 20px;
-  justify-content: space-between;
-  align-items: center;
-  border-radius: 10px;
-  background: var(--white, #fff);
-  box-shadow: 0px 0px 4px 0px #e5eaf8;
-`;
+import ProfileFormLayout from "../../../widgets/layout/ProfileFormLayout";
+import profileFormState from "../../../pages/Profile/store/profileFormState";
+import { observer } from "mobx-react-lite";
 
 const User = styled.div`
   height: 100%;
@@ -69,16 +59,19 @@ const AccessText = styled.a`
   }
 `;
 
-const UserCard: React.FC = () => {
-  const [isEmailConfirmed, setIsEmailConfirmed] = useState(false);
+const UserCard: React.FC = observer(() => {
   const { user } = useAuth0();
 
   const sendAccess = () => {
-    setIsEmailConfirmed(true);
+    profileFormState.confirmEmail();
+  };
+
+  const openForm = () => {
+    profileFormState.openEditForm();
   };
 
   return (
-    <Container>
+    <ProfileFormLayout>
       <User>
         <Avatar src={avatar && user?.picture} />
         <Info>
@@ -87,7 +80,7 @@ const UserCard: React.FC = () => {
             <EmailText>{user?.email}</EmailText>
             {!user?.email_verified ? (
               <AccessEmail>
-                {isEmailConfirmed ? (
+                {profileFormState.isEmailConfirmed ? (
                   <div style={{ color: "var(--green, #5bc259)" }}>
                     На вашу почту выслано письмо с подтверждением
                   </div>
@@ -103,9 +96,9 @@ const UserCard: React.FC = () => {
           </Email>
         </Info>
       </User>
-      <CardButton>Изменить</CardButton>
-    </Container>
+      <CardButton onClick={openForm}>Изменить</CardButton>
+    </ProfileFormLayout>
   );
-};
+});
 
 export default UserCard;
diff --git a/src/features/Copy/ui/CopyLink.tsx b/src/features/Copy/ui/CopyLink.tsx
index 459ceb0..73b3445 100644
--- a/src/features/Copy/ui/CopyLink.tsx
+++ b/src/features/Copy/ui/CopyLink.tsx
@@ -28,7 +28,7 @@ export const CopyLink: React.FC = () => {
   }
 
   return (
-    <Tooltip active={tooltipActive}>
+    <Tooltip active={tooltipActive} message="Ссылка скопирована!">
       <Button onClick={copyLink}>
         <svg
           width="18"
diff --git a/src/features/createRoom/model/index.ts b/src/features/createRoom/model/index.ts
index fbca02c..ff15fbf 100644
--- a/src/features/createRoom/model/index.ts
+++ b/src/features/createRoom/model/index.ts
@@ -1,11 +1,11 @@
 import { IUser } from "../../../shared/api/models";
-import { AddUserThunk } from "../../../entities/user/api/addUser";
 
 export const CreateThunk = (event: any, title: string, isPublic: boolean, user: IUser) => {
     event.preventDefault();
-    AddUserThunk(user?.name, 'test', user?.email);
     const API = String(import.meta.env.VITE_API);
 
+    console.log(user?.email);
+
     const newRoom = {
         title: title,
         url: 'https://network-class.pages.dev/joinlesson/1',
diff --git a/src/features/editUser/index.ts b/src/features/editUser/index.ts
new file mode 100644
index 0000000..f33886e
--- /dev/null
+++ b/src/features/editUser/index.ts
@@ -0,0 +1 @@
+export { EditUserForm } from "./ui/EditUserForm";
diff --git a/src/features/editUser/ui/EditUserForm.tsx b/src/features/editUser/ui/EditUserForm.tsx
new file mode 100644
index 0000000..90b19db
--- /dev/null
+++ b/src/features/editUser/ui/EditUserForm.tsx
@@ -0,0 +1,112 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+import styles from "./styles.module.css";
+import ProfileFormLayout from "../../../widgets/layout/ProfileFormLayout";
+import { useAuth0 } from "@auth0/auth0-react";
+import avatarDefault from "../../../../public/icons/avatar.svg";
+import FormButton from "../../../shared/ui/formButton/FormButton";
+import profileFormState from "../../../pages/Profile/store/profileFormState";
+import { observer } from "mobx-react-lite";
+
+const Form = styled.form`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: -2px;
+    bottom: -2px;
+    left: -2px;
+    right: -2px;
+    border-radius: 12px;
+    background: linear-gradient(
+      223deg,
+      rgba(255, 178, 64, 0.9) 0%,
+      rgba(216, 97, 196, 0.9) 50.52%,
+      rgba(23, 94, 241, 0.9) 100%
+    );
+    z-index: -1;
+  }
+`;
+
+export const EditUserForm: React.FC = observer(() => {
+  const { user } = useAuth0();
+  const [avatar, setAvatar] = useState(user?.picture || avatarDefault);
+  const [name, setName] = useState(user?.name);
+
+  const sendAccess = () => {
+    profileFormState.confirmEmail();
+  };
+
+  const saveChanges = () => {
+    profileFormState.closeEditForm();
+  };
+
+  const onImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.files && event.target.files[0]) {
+      setAvatar(URL.createObjectURL(event.target.files[0]));
+    }
+  };
+
+  return (
+    <ProfileFormLayout>
+      <Form
+        action=""
+        autoComplete="off"
+        method="post"
+        encType="multipart/form-data"
+        onSubmit={saveChanges}
+      >
+        <div className={styles.user}>
+          <div className={styles.avatar}>
+            <img
+              src={avatar}
+              alt=""
+              style={{ width: "100%", height: "100%", borderRadius: "7px" }}
+            />
+            <input
+              className={styles.inputAvatar}
+              type="file"
+              title=" "
+              onChange={onImageChange}
+            />
+          </div>
+          <div className={styles.info}>
+            <input
+              className={styles.name}
+              type="text"
+              value={name}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                setName(e.target.value)
+              }
+              autoFocus
+            />
+            <div className={styles.email}>
+              <div className={styles.emailText}>{user?.email}</div>
+              {!user?.email_verified ? (
+                <a className={styles.accessEmail}>
+                  {profileFormState.isEmailConfirmed ? (
+                    <div style={{ color: "var(--green, #5bc259)" }}>
+                      На вашу почту выслано письмо с подтверждением
+                    </div>
+                  ) : (
+                    <a className={styles.accessText} onClick={sendAccess}>
+                      Подтвердите почту
+                    </a>
+                  )}
+                </a>
+              ) : (
+                ""
+              )}
+            </div>
+          </div>
+        </div>
+        <FormButton>Сохранить</FormButton>
+      </Form>
+    </ProfileFormLayout>
+  );
+});
diff --git a/src/features/editUser/ui/styles.module.css b/src/features/editUser/ui/styles.module.css
new file mode 100644
index 0000000..d3e9e4a
--- /dev/null
+++ b/src/features/editUser/ui/styles.module.css
@@ -0,0 +1,71 @@
+.user {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.avatar {
+  width: 86px;
+  height: 86px;
+  border-radius: 10px;
+  border: 2px dashed #175ef1;
+  position: relative;
+}
+
+.inputAvatar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  color: transparent;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &::file-selector-button {
+    display: none;
+  }
+}
+
+.info {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.name {
+  width: 100%;
+  font-size: 22px;
+  font-weight: 500;
+}
+
+.email {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.emailText {
+  font-size: 20px;
+  font-weight: 300;
+  line-height: normal;
+}
+
+.accessEmail {
+  font-size: 20px;
+  font-weight: 300;
+  line-height: normal;
+}
+
+.accessText {
+  color: var(--red, #f95a39);
+
+  &:hover {
+    text-decoration: underline;
+    cursor: pointer;
+  }
+}
diff --git a/src/pages/Join/Join.tsx b/src/pages/Join/Join.tsx
index 91d57dd..2e0419a 100644
--- a/src/pages/Join/Join.tsx
+++ b/src/pages/Join/Join.tsx
@@ -9,15 +9,24 @@ import { EnterClassForm } from "../../features/EnterClass/index.ts";
 import FunctionsList from "../../widgets/FunctionsList/FunctionsList.tsx";
 import functions from "../../widgets/FunctionsList/functionsObject.tsx";
 import ProfilePanel from "../../widgets/ProfilePanel/ProfilePanel.tsx"
+import { useAuth0 } from "@auth0/auth0-react";
+import { useAddUser } from "../../entities/user/api/useAddUser.ts";
 
 const Join: React.FC = () => {
+  const { isAuthenticated, user } = useAuth0();
+
+  if (isAuthenticated) {
+    useAddUser(user?.name, 'test', user?.email);
+  }
 
   return (
     <div className={styles.Join}>
       <div className={styles.leftSide}>
         <header className={styles.header}>
-          <img src={logo} alt="Логотип" />
-          <div className={styles.titleApp}>Сетевой учебный класс</div>
+          <div className={styles.logo}>
+            <img src={logo} alt="Логотип" />
+            <div className={styles.titleApp}>Сетевой учебный класс</div>
+          </div>
           <ProfilePanel />
         </header>
         <main className={styles.main}>
diff --git a/src/pages/Join/styles.module.css b/src/pages/Join/styles.module.css
index 2fd1f50..200d2fb 100644
--- a/src/pages/Join/styles.module.css
+++ b/src/pages/Join/styles.module.css
@@ -19,10 +19,17 @@
   width: 100%;
   display: flex;
   align-items: center;
+  justify-content: space-between;
   margin-bottom: 100px;
   position: relative;
 }
 
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+}
+
 .header > img {
   margin-right: 24px;
 }
diff --git a/src/pages/Profile/Profile.tsx b/src/pages/Profile/Profile.tsx
index 1f63a56..48f49f2 100644
--- a/src/pages/Profile/Profile.tsx
+++ b/src/pages/Profile/Profile.tsx
@@ -3,6 +3,9 @@ import { styled } from "styled-components";
 import Header from "../../widgets/layout/Header";
 import UserCard from "../../entities/user/ui/UserCard";
 import Statistics from "../../widgets/Statistics/Statistics";
+import profileFormState from "./store/profileFormState";
+import { EditUserForm } from "../../features/editUser";
+import { observer } from "mobx-react-lite";
 
 const Container = styled.div``;
 
@@ -18,17 +21,17 @@ const ProfileCard = styled.div`
   margin: 0 121px 73px 123px;
 `;
 
-const Profile: React.FC = () => {
+const Profile: React.FC = observer(() => {
   return (
     <Container>
       <Header />
       <Title>Мой профиль</Title>
       <ProfileCard>
-        <UserCard />
+        {profileFormState.state ? <EditUserForm /> : <UserCard />}
       </ProfileCard>
       <Statistics />
     </Container>
   );
-};
+});
 
 export default Profile;
diff --git a/src/pages/Profile/store/profileFormState.tsx b/src/pages/Profile/store/profileFormState.tsx
new file mode 100644
index 0000000..1f62fe8
--- /dev/null
+++ b/src/pages/Profile/store/profileFormState.tsx
@@ -0,0 +1,23 @@
+import { makeAutoObservable } from "mobx";
+
+class FormState {
+  state = "";
+  isEmailConfirmed = false;
+  constructor() {
+    makeAutoObservable(this);
+  }
+
+  openEditForm() {
+    this.state = "edit";
+  }
+
+  closeEditForm() {
+    this.state = "";
+  }
+
+  confirmEmail() {
+    this.isEmailConfirmed = true;
+  }
+}
+
+export default new FormState();
diff --git a/src/shared/ui/Tooltip.tsx b/src/shared/ui/Tooltip.tsx
index e6b660f..7ca4e51 100644
--- a/src/shared/ui/Tooltip.tsx
+++ b/src/shared/ui/Tooltip.tsx
@@ -17,6 +17,7 @@ const Content = styled.div`
   box-shadow: 0px 2px 6px 0px #c5ccd5;
   border-radius: 4px;
 
+  white-space: nowrap;
   font-family: var(--font);
   font-size: 14px;
   font-style: normal;
@@ -38,9 +39,10 @@ const Content = styled.div`
 interface Props {
   active: boolean;
   children: React.ReactNode;
+  message: string;
 }
 
-const Tooltip: React.FC<Props> = ({ active, children }) => {
+const Tooltip: React.FC<Props> = ({ active, children, message }) => {
   return (
     <Container>
       <Content
@@ -50,7 +52,7 @@ const Tooltip: React.FC<Props> = ({ active, children }) => {
             : { opacity: 0, visibility: "hidden" }
         }
       >
-        Ссылка скопирована!
+        {message}
       </Content>
       {children}
     </Container>
diff --git a/src/shared/ui/cardButton/CardButton.tsx b/src/shared/ui/cardButton/CardButton.tsx
index 4cc95ef..d2b75ac 100644
--- a/src/shared/ui/cardButton/CardButton.tsx
+++ b/src/shared/ui/cardButton/CardButton.tsx
@@ -23,10 +23,11 @@ const Button = styled.button`
 
 interface Props {
   children?: string;
+  onClick?: () => void;
 }
 
-const CardButton: React.FC<Props> = ({ children }) => {
-  return <Button>{children}</Button>;
+const CardButton: React.FC<Props> = ({ children, onClick }) => {
+  return <Button onClick={onClick}>{children}</Button>;
 };
 
 export default CardButton;
diff --git a/src/widgets/FunctionsList/functionsObject.tsx b/src/widgets/FunctionsList/functionsObject.tsx
index dbb9006..808d94f 100644
--- a/src/widgets/FunctionsList/functionsObject.tsx
+++ b/src/widgets/FunctionsList/functionsObject.tsx
@@ -10,7 +10,7 @@ const functions: IFunction[] = [
   {
     icon: createClass,
     iconActive: createClassActive,
-    title: "Новый класс",
+    title: "Мои классы",
     description: "Создать свой класс и провести занятие онлайн",
     link: "/lobby",
     onClick: () => {
diff --git a/src/widgets/RoomsList.tsx b/src/widgets/RoomsList.tsx
index 791640b..30a0582 100644
--- a/src/widgets/RoomsList.tsx
+++ b/src/widgets/RoomsList.tsx
@@ -75,8 +75,6 @@ const RoomsList: React.FC<Props> = observer(({ rooms, loading, error }) => {
         console.log(searchedRooms);
     };
 
-    console.log(rooms);
-
   return (
     <Container>
         <Header>
diff --git a/src/widgets/layout/Header.tsx b/src/widgets/layout/Header.tsx
index 243c5cd..1bcf9b1 100644
--- a/src/widgets/layout/Header.tsx
+++ b/src/widgets/layout/Header.tsx
@@ -14,7 +14,9 @@ const Container = styled.div`
   background-color: var(--white);
 `;
 
-const Left = styled.div``;
+const Left = styled.div`
+  
+`;
 
 const Logo = styled.a`
   text-align: center;
diff --git a/src/widgets/layout/Navbar.tsx b/src/widgets/layout/Navbar.tsx
index 2b30891..c7d9036 100644
--- a/src/widgets/layout/Navbar.tsx
+++ b/src/widgets/layout/Navbar.tsx
@@ -70,7 +70,14 @@ const Navbar: React.FC = observer(() => {
     }
 
     function addRoom() {
-        roomsFormState.openCreateForm();    
+        if (roomsFormState.state === '' && navbarState.state === 'my') {
+            roomsFormState.openCreateForm();
+            return 0;
+        }
+        if (roomsFormState.state === 'create') {
+            roomsFormState.closeCreateForm();
+            return 0;
+        }    
     }
 
     function editRooms() {
diff --git a/src/widgets/layout/ProfileFormLayout.tsx b/src/widgets/layout/ProfileFormLayout.tsx
new file mode 100644
index 0000000..3086275
--- /dev/null
+++ b/src/widgets/layout/ProfileFormLayout.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import styled from "styled-components";
+
+const Container = styled.div`
+  position: relative;
+  width: 100%;
+  padding: 20px;
+  border-radius: 10px;
+  background: var(--white);
+  box-shadow: 0px 0px 4px 0px #e5eaf8;
+  font-family: var(--font);
+  color: #000;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+interface Props {
+  children?: React.ReactNode;
+}
+
+const ProfileFormLayout: React.FC<Props> = ({ children }) => {
+  return <Container>{children}</Container>;
+};
+
+export default ProfileFormLayout;