diff --git a/public/assets/locales/en/translation.json b/public/assets/locales/en/translation.json
index bf0e390..2e87a6a 100644
--- a/public/assets/locales/en/translation.json
+++ b/public/assets/locales/en/translation.json
@@ -8,8 +8,8 @@
   "popup-connect-title": "Connection code",
   "popup-connect-btn-mode": "Select demonstration mode",
   "popup-connect-btn-continue": "Continue",
-  "fullscreen-control-btn": "Expand",
-  "fullscreen-control-btn-active": "Collapse",
+  "fullscreen-control-btn": "Windowed mode",
+  "fullscreen-control-btn-active": "Fullscreen mode",
   "request-control-btn": "Request control",
   "request-control-btn-disable": "Stop control",
   "mute-control-btn": "Turn On Mic",
@@ -19,9 +19,9 @@
   "popup-control-code": "Connection code",
   "popup-control-link": "Link for connection",
   "popup-control-btn": "Copy",
-  "popup-control-btn-active": "Copied!",
+  "popup-control-btn-active": "Link Copied",
   "language-control-btn": "Language",
-  "exit-control-btn": "Exit presintation",
+  "exit-control-btn": "Exit",
   "popup-control-exit-title": "Are you sure you want to end the demo?",
   "popup-control-yes": "Finish",
   "popup-control-no": "Stay"
diff --git a/public/assets/locales/ru/translation.json b/public/assets/locales/ru/translation.json
index 0ee4112..5a969a7 100644
--- a/public/assets/locales/ru/translation.json
+++ b/public/assets/locales/ru/translation.json
@@ -8,8 +8,8 @@
   "popup-connect-title": "Код подключения к демонстрации",
   "popup-connect-btn-mode": "Выбор способа демонстрации",
   "popup-connect-btn-continue": "Продолжить",
-  "fullscreen-control-btn": "Развернуть",
-  "fullscreen-control-btn-active": "Свернуть",
+  "fullscreen-control-btn": "Полноэкранный режим",
+  "fullscreen-control-btn-active": "Оконный режим",
   "request-control-btn": "Запрос управления",
   "request-control-btn-disable": "Запрет управления",
   "mute-control-btn": "Включить микрофон",
@@ -19,9 +19,9 @@
   "popup-control-code": "Код подключения",
   "popup-control-link": "Ссылка для подключения",
   "popup-control-btn": "Скопировать",
-  "popup-control-btn-active": "Скопировано",
+  "popup-control-btn-active": "Ссылка скопирована",
   "language-control-btn": "Язык",
-  "exit-control-btn": "Завершить презентацию",
+  "exit-control-btn": "Выйти",
   "popup-control-exit-title": "Вы уверены, что хотите закончить демонстрацию??",
   "popup-control-yes": "Закончить",
   "popup-control-no": "Остаться"
diff --git a/src/App.css b/src/App.css
index e2c85b6..a2f6837 100644
--- a/src/App.css
+++ b/src/App.css
@@ -4,8 +4,6 @@
   width: 100%;
 }
 
-
-
 .content__container {
   height: 100vh;
   width: 400px;
@@ -17,13 +15,18 @@
   left: 50%;
   border-width: 0px 2px;
   border-style: solid;
-  border-color: #23242A;
-  
+  border-color: #23242a;
   transform: translate(-50%, -50%);
-  /* This is a shorthand of */
-
 }
 
+.popup {
+  width: 100%;
+  background: transparent;
+  padding: 56px;
+  box-sizing: border-box;
+}
+
+
 .card-container {
   display: flex;
   flex-direction: row;
@@ -38,8 +41,7 @@
   line-height: 100%;
   /* identical to box height, or 38px */
 
-
-  color: #FFFFFF;
+  color: #ffffff;
 }
 
 .demos_container {
@@ -47,12 +49,9 @@
   border-radius: 16px;
 }
 
-
-
 @media screen and (max-width: 1440px) {
   .card-title {
     margin: 22px 0 40px 0;
-
   }
 
   .card-container {
@@ -67,15 +66,12 @@
 
   .card-title {
     margin: 42px 0 40px 0;
-
   }
 }
 
 @media screen and (max-width: 920px) {
-
   .card-title {
     margin: 36px 0 32px 0;
-
   }
 
   .card-title {
@@ -91,6 +87,4 @@
     width: 100%;
     border: none;
   }
-
-
-}
\ No newline at end of file
+}
diff --git a/src/App.tsx b/src/App.tsx
index 23c4ff6..9eb88d8 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,22 +1,25 @@
 import "./App.css";
+import 'styles/styles.css'
+
 import { useEffect } from "react";
 import { Redirect, Route, Switch, useHistory } from "react-router-dom";
 
-import { Header } from "./components/header/header";
-import { Card } from "./components/demos/Card";
-import { Main } from "./components/Main/Main";
-import { PlayerComponent } from "./components/playerComponent/playerComponent";
-
-import { useAppDispatch, useAppSelector } from "./hooks/redux";
-import { fetchCards } from "./store/reducers/ActionCreator";
-import { cardSlice } from "./store/reducers/cardSlice";
-import { languageSlice } from "./store/reducers/languageSlice";
-import { ICards } from "./models/ICards";
 import { useTranslation } from "react-i18next";
 import cookies from "js-cookie";
 
-const App: React.FC = () => {
 
+import { Header } from "components/shared/Header/Header";
+import { Card } from "components/pages/Main/Card/Card";
+import { PopupComponent } from "components/pages/ConnectPage/PopupComponent/PopupComponent";
+import { PlayerComponent } from "components/pages/Stream/PlayerComponent/PlayerComponent";
+
+import { useAppDispatch, useAppSelector } from "hooks/redux";
+import { fetchCards } from "store/reducers/ActionCreator";
+import { cardSlice } from "store/reducers/cardSlice";
+import { languageSlice } from "store/reducers/languageSlice";
+import { ICards } from "models/ICards";
+
+const App: React.FC = () => {
 
   const dispatch = useAppDispatch();
   const history = useHistory();
@@ -29,6 +32,9 @@ const App: React.FC = () => {
     dispatch(handleChangeLanguage(cookies.get("i18next")));
   }, []);
 
+  useEffect(() => {
+    window.screen.orientation.lock("landscape");
+  }, []);
   const handleCards = (card: ICards) => {
     dispatch(handleCurrentCard(card));
     history.push("/connect-page");
@@ -48,11 +54,7 @@ const App: React.FC = () => {
           <h3 className="card-title">{t("demo-title")}</h3>
           <div className="card-container">
             {cards.map((i: ICards) => (
-              <Card
-                onClick={() => handleCards(i)}
-                key={i._id}
-                item={i}
-              ></Card>
+              <Card onClick={() => handleCards(i)} key={i._id} item={i}></Card>
             ))}
           </div>
         </div>
@@ -60,9 +62,9 @@ const App: React.FC = () => {
       <Route path="/connect-page">
         {currentCard ? (
           <div className="background">
-              <Header></Header>
-              <div className="content__container">
-                <Main></Main>
+            <Header></Header>
+            <div className="content__container">
+              <PopupComponent></PopupComponent>
             </div>
           </div>
         ) : (
@@ -70,9 +72,7 @@ const App: React.FC = () => {
         )}
       </Route>
       <Route exact path="/stream/:id">
-        <PlayerComponent
-          closeStream={closeStream}
-        ></PlayerComponent>
+        <PlayerComponent closeStream={closeStream}></PlayerComponent>
       </Route>
     </Switch>
   );
diff --git a/src/components/ExitPopup/ExitPopup.css b/src/components/ExitPopup/ExitPopup.css
deleted file mode 100644
index 644a4c5..0000000
--- a/src/components/ExitPopup/ExitPopup.css
+++ /dev/null
@@ -1,60 +0,0 @@
-.exit-popup-container {
-    position: absolute;
-    display: flex;
-    flex-direction: column;
-    width: 494px;
-    height: 330px;
-    box-sizing: border-box;
-    border: 1px solid #4F4F4F;
-    border-radius: 32px;
-    top: calc(50% - 469px / 2);
-    left: calc(50% - 494px / 2);
-    background-color: #333333;
-    color: #FFFFFF;
-    padding: 48px;
-    /* gap: 24px; */
-    justify-content: space-between;
-}
-
-.exit-popup-button-container {
-    display: flex;
-    flex-direction: column;
-    gap: 24px;
-}
-
-.exit-popup-button {
-    border-radius: 12px;
-    border: none;
-    color: white;
-    height: 60px;
-    font-style: normal;
-    font-weight: 600;
-    font-size: 16px;
-    line-height: 20px;
-    cursor: pointer;
-}
-
-.exit-popup-button_confirm {
-    background: #567ECE;
-    opacity: 1;
-
-}
-
-.exit-popup-button_finish {
-    background: #404040;
-}
-
-.exit-popup-button-title {
-    width: 366px;
-
-}
-
-.exit-popup-button_confirm:hover {
-    opacity: 0.7;
-    transition: .3s;
-
-} 
-
-.exit-popup-header {
-    align-items: normal;
-}
\ No newline at end of file
diff --git a/src/components/ExitPopup/ExitPopup.tsx b/src/components/ExitPopup/ExitPopup.tsx
deleted file mode 100644
index 40ff99e..0000000
--- a/src/components/ExitPopup/ExitPopup.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import "../PopupShare/sharePopup.css";
-import "./ExitPopup.css";
-import { TSidebarPopup } from "../../utils/types";
-import { useTranslation } from "react-i18next";
-
-export const ExitPopup: React.FC<TSidebarPopup> = ({ setClose, onExit }) => {
-  const { t } = useTranslation();
-
-  return (
-    <div className="exit-popup-container">
-      <div className="mobile-users-part-header exit-popup-header">
-        <span className="mobile-users-part-header-title exit-popup-button-title">
-          {t("popup-control-exit-title")}
-        </span>
-        <button
-          onClick={() => setClose()}
-          className="mobile-users-part-header-close-button"
-        ></button>
-      </div>
-      <div className="exit-popup-button-container">
-        <button
-          onClick={() => setClose()}
-          className="exit-popup-button exit-popup-button_confirm"
-        >
-          {t("popup-control-no")}
-        </button>
-        <button
-          onClick={() => onExit?.()}
-          className="exit-popup-button exit-popup-button_finish"
-        >
-          {t("popup-control-yes")}
-        </button>
-      </div>
-    </div>
-  );
-};
diff --git a/src/components/LanguagePopup/LanguagePopup.tsx b/src/components/LanguagePopup/LanguagePopup.tsx
deleted file mode 100644
index 4a673bb..0000000
--- a/src/components/LanguagePopup/LanguagePopup.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import "../sidebar/toolbar.css";
-import { languageSlice } from "../../store/reducers/languageSlice";
-import { useAppDispatch, useAppSelector } from "../../hooks/redux";
-
-export const LanguagePopup: React.FC<any> = ({ setOpen }) => {
-  const { handleChangeLanguage } = languageSlice.actions;
-
-  const buttons = [{ value: "ru" }, { value: "en" }];
-  const dispatch = useAppDispatch();
-
-  const onChange = (value: string) => {
-    dispatch(handleChangeLanguage(value));
-    setOpen(false);
-  };
-
-  const { currentLang } = useAppSelector((state) => state.languageReducer);
-
-  return (
-    <div className="toolbar-language-popup">
-      {buttons.map((i) => (
-        <div className="toolbar-button-area">
-          <button
-            key={i.value}
-            value={i.value}
-            onClick={(e: any) => onChange(e.target.value)}
-            className={
-              currentLang === i.value
-                ? "toolbar-button toolbar-button-active"
-                : "toolbar-button"
-            }
-          >
-            {i.value.toUpperCase()}
-          </button>
-        </div>
-      ))}
-    </div>
-  );
-};
diff --git a/src/components/Navigaton/Vector 106.png b/src/components/Navigaton/Vector 106.png
deleted file mode 100644
index fe8b905..0000000
Binary files a/src/components/Navigaton/Vector 106.png and /dev/null differ
diff --git a/src/components/Navigaton/closeIcon.png b/src/components/Navigaton/closeIcon.png
deleted file mode 100644
index c6696a6..0000000
--- a/src/components/Navigaton/closeIcon.png
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12 12L16.9996 17M12 12L17 7M12 12L7 17M12 12L7.00002 7" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/src/components/Navigaton/navigation.css b/src/components/Navigaton/navigation.css
deleted file mode 100644
index f0caa77..0000000
--- a/src/components/Navigaton/navigation.css
+++ /dev/null
@@ -1,112 +0,0 @@
-.navigation {
-    display: flex;
-    flex-direction: column;
-    color: #E3DDE5;
-    padding: 8px 10px;
-    box-sizing: border-box;
-    position: fixed;
-    top: 66px;
-    right: 0;
-    bottom: 0;
-    background: #0E0E0E;
-    width: 100%;
-    z-index: 3;
-    overflow-y: scroll;
-}
-
-
-
-.nav__close {
-    cursor: pointer;
-    object-fit: cover;
-    width: 24px;
-
-}
-
-.button__container {
-}
-
-
-
-.nav__header {
-    display: flex;
-    flex-direction: column;
-    gap: 42px;
-}
-
-.logo {
-    width: 31px;
-    height: 50px;
-}
-
-.button__nav_container {
-    margin-top: 28px;
-    padding: 1px;
-    display: flex;
-    gap: 20px;
-    align-items: center;
-}
-
-.nav__button {
-    appearance: none;
-    background-color: transparent;
-    color: #ebebeb;
-    margin: 0;
-    text-align: left;
-    border: none;
-    height: 13px;
-    -webkit-appearance: none;
-    padding: 0;
-
-    cursor: pointer;
-}
-
-.language__container {
-    border-bottom: 1px solid transparent;
-
-
-}
-
-.language__container_active {
-    box-sizing: border-box;
-    height: 20px;
-    border-bottom: 1px solid #EBEBEB;
-}
-
-.nav__button_active {
-    border-bottom: 1px solid #EBEBEB;
-}
-.nav__title {
-    font-style: normal;
-    font-weight: 500;
-    font-size: 24px;
-    line-height: 100%;
-    /* identical to box height, or 24px */
-    color: #FFFFFF;
-    margin: 0;
-    text-decoration: none;
-}
-
-.nav__line {
-    background-color: #454545;
-    width: 100%;
-    height: 1px;
-    margin-bottom: 40px;
-}
-
-.nav__title_container {
-    display: flex;
-    gap: 24px;
-
-}
-
-.icon_chevron {
-    width: 20px;
-}
-
-.nav__buttons {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    margin-bottom: 50px;
-}
\ No newline at end of file
diff --git a/src/components/Navigaton/navigation.tsx b/src/components/Navigaton/navigation.tsx
deleted file mode 100644
index 0d4711c..0000000
--- a/src/components/Navigaton/navigation.tsx
+++ /dev/null
@@ -1,185 +0,0 @@
-import './navigation.css'
-import '../header/header.css'
-import "../../styles/styles.css"
-import write from '../footer/send.svg'
-import phone from '../footer/phone.svg'
-import iconButton from "../../styles/iconButton.svg"
-import { AnimatePresence, motion } from "framer-motion";
-import chevron from '../header/chevronIcon.svg'
-type THeader = {
-    menuOpen?: boolean,
-    language: string,
-    setOpen?: (value: boolean) => void
-    changeLanguage: (language: string) => void;
-    setOpacity?: (value: boolean) => void;
-    text?: any;
-
-}
-
-const container = {
-    hidden: {
-        translateX: '100%',
-        transition: { duration: 0.2, ease: 'easeOut' }
-    },
-    show: {
-        translateX: '0%',
-        transition: { duration: 0.2, ease: 'easeIn' },
-    },
-    exit: {
-        translateX: '0%',
-        transition: { duration: 0.2, ease: 'easeOut' }
-    }
-}
-
-const staggeredVariants = {
-    hidden: {
-        transition: {
-        }
-    },
-    show: {
-        transition: {
-            staggerChildren: 0.35,
-            staggerDirection: -1,
-
-        }
-    },
-
-    exit: {
-        transition: {
-        }
-    }
-}
-
-const items = {
-    hidden: {
-        opacity: 0,
-    },
-    show: {
-        opacity: 1,
-        transition: { ease: 'easeIn' },
-
-    },
-
-    exit: {
-        opacity: 1,
-    }
-}
-
-export const Nav: React.FC<THeader> = ({ menuOpen, language, changeLanguage, text }) => {
-
-    const userLanguage = language === 'RU';
-
-    const { cardLarge, cardLarge1, cardSmall, cardSmall1 } = text
-
-    const langArray = [{
-        value: 'ru-RU',
-        name: 'RU'
-    },
-    {
-        value: 'en-EN',
-        name: 'EN'
-    }]
-
-
-    function langActive(lang: string, language: string) {
-        if (lang === language) {
-            return 'language__container_active'
-        }
-
-        else {
-            return 'language__container'
-        }
-    }
-
-    return (
-        <AnimatePresence>
-            {menuOpen && (
-                <motion.nav
-                    variants={container}
-                    initial={'hidden'}
-                    animate={'show'}
-                    exit={'hidden'}
-                    className={`navigation`}>
-                    <motion.div
-                        variants={staggeredVariants}
-                        initial={'hidden'}
-                        animate={'show'}
-                        exit={'exit'}
-                        className='nav__buttons'>
-                        <motion.div
-                            variants={items}
-                            className='nav__header'>
-                            <div className='button__nav_container'>
-                                {langArray.map((lang, i) => (
-                                    <div className={langActive(lang.name, language)}>
-                                        <button value={lang.value} key={i} onClick={() => changeLanguage(lang.name)} className='nav__button'>{lang.name}</button>
-                                    </div>
-                                ))}
-                            </div>
-                            <div className='nav__title_container'>
-                                <a target='_blank' rel="noreferrer" href={userLanguage ? 'https://graff.tech/' : 'http://en.graff.tech/'} className='nav__title'>{text.captionCompain}</a>
-                                <img alt='icon' className='icon_chevron' src={chevron}></img>
-                            </div>
-                            <span className='nav__line'></span>
-                        </motion.div>
-
-                        <motion.a
-                            href={userLanguage ? 'mailto:info@graff.tech' : 'mailto:waseem@graff.tech'}
-                            variants={items}
-                            className='footer__card_2'>
-                            <div className='ellipse__container'>
-                                <div className="main-block__icon_container">
-                                    <img alt='icon' src={iconButton} className="main-block__icon"></img>
-                                </div>
-                            </div>
-                            <div className={'card__write'}>
-                                <img alt='icon' src={write} className='card__icon'></img>
-                                <p className='card__caption'>{cardSmall.caption}</p>
-                            </div>
-                        </motion.a>
-                        <motion.a
-                            href={userLanguage ? 'tel:+7-800-770-00-76' : 'tel:+971-50-938-8902'}
-                            variants={items}
-                            className='footer__card_2'>
-                            <div className='ellipse__container'>
-                                <div className="main-block__icon_container">
-                                    <img alt='icon' src={iconButton} className="main-block__icon"></img>
-                                </div>
-                            </div>
-                            <div className='card__write'>
-                                <img alt='icon' src={phone} className='card__icon'></img>
-                                <p className='card__caption'>{cardSmall1.caption}</p>
-                            </div>
-                        </motion.a>
-                        <motion.div
-                            variants={items}
-                            className={'footer__card_l'}>
-                            <div className='card__contacts'>
-                                <p className='card__email'>info@graff.tech</p>
-                                <p className='card__tel'>+7 800 770 00 76</p>
-                            </div>
-                            <div className='card__adress'>
-                                <p className='card__street'>{cardLarge.address}</p>
-                                <p className='card_city'>{cardLarge.city}</p>
-                            </div>
-                            <p className='card_country'>{cardLarge.country}</p>
-                        </motion.div>
-                        <motion.div
-                            variants={items}
-                            className='footer__card_l'>
-                            <div className='card__contacts'>
-                                <p className='card__email'>waseem@graff.tech</p>
-                                <p className='card__tel'>+971 50 938 8902</p>
-                            </div>
-                            <div className='card__adress card__adress_uae'>
-                                <p className='card_city'>{cardLarge1.address}</p>
-                            </div>
-                            <p className='card_country'>{cardLarge1.country}</p>
-                        </motion.div>
-                    </motion.div>
-                </motion.nav>
-            )}
-        </AnimatePresence>
-
-    )
-} 
\ No newline at end of file
diff --git a/src/components/PopupShare/sharePopup.css b/src/components/PopupShare/sharePopup.css
deleted file mode 100644
index a2c16d9..0000000
--- a/src/components/PopupShare/sharePopup.css
+++ /dev/null
@@ -1,141 +0,0 @@
-.share-popup-container {
-    position: absolute;
-    display: flex;
-    flex-direction: column;
-    width: 494px;
-    height: 469px;
-    box-sizing: border-box;
-    border: 1px solid #4F4F4F;
-    border-radius: 32px;
-    top: calc(50% - 469px / 2);
-    left: calc(50% - 494px / 2);
-    background-color: #333333;
-    color: #FFFFFF;
-    padding: 48px;
-    gap: 24px;
-}
-
-.share-header-popup {
-    padding-bottom: 0px;
-}
-
-.border-line {
-    width: 80%;
-    height: 1px;
-    background-color: #404040;
-}
-
-.share-popup-data-container {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-}
-
-.share-popup-data-title {
-    font-weight: 600;
-    font-size: 18px;
-    line-height: 22px;
-    user-select: none;
-}
-
-.share-popup-data-input {
-    background-color: #4F4F4F;
-    outline: none;
-    width: 100%;
-    border: none;
-    border-radius: 12px;
-    color: #FFFFFF;
-    box-sizing: border-box;
-}
-
-.mobile-users-part-header-title {
-    display: flex;
-    gap: 12px;
-    align-items: center;
-    font-weight: 400;
-    font-size: 22px;
-    line-height: 130%;
-    -webkit-user-select: none;
-    user-select: none;
-}
-
-.mobile-users-part-header-close-button {
-    width: 15px;
-    height: 15px;
-    border: none;
-    background-color: transparent;
-    background: url(../../images/icons/close.svg) 50% 50% no-repeat;
-    background-size: 100% 100%;
-    cursor: pointer;
-}
-
-.share-popup-data-input.code {
-    height: 76px;    
-    font-weight: 300;
-    font-size: 38px;
-    line-height: 46px;
-    letter-spacing: 0.3em;
-    text-align: center;
-    padding: 15px 0;
-}
-
-.share-popup-data-input.href {
-    height: 48px;
-    padding: 14.5px 16px;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 19px;
-}
-
-.share-popup-copy-button {
-    display: flex;
-    box-sizing: border-box;
-    width: 176px;
-    height: 48px;
-    align-items: center;
-    justify-content: center;
-    border-radius: 12px;
-    background-color: #567ECE;
-    border: none;
-    color: #FFFFFF;
-    font-weight: 500;
-    font-size: 16px;
-    line-height: 20px;
-    gap: 4px;
-    cursor: pointer;
-    transition: .3s;
-}
-
-.share-popup-copy-button:hover {
-    opacity: .7;
-}
-
-.share-popup-copy-button.copied {
-    background-color: #219653;
-    transition: .3s;
-}
-
-.share-popup-copy-button-icon {
-    width: 24px;
-    height: 24px;
-    background: url('copyIcon.svg') 50% 50% no-repeat;
-    background-size: 100% 100%;
-}
-
-.show-share-popup-enter {
-    opacity: 0;
-}
-
-.show-share-popup-enter-active {
-    opacity: 1;
-    transition: .3s;
-}
-
-.show-share-popup-exit {
-    opacity: 1;
-}
-
-.show-share-popup-exit-active {
-    opacity: 0;
-    transition: .3s;
-}
\ No newline at end of file
diff --git a/src/components/ProtectedComponent/ProtectedComponent.tsx b/src/components/ProtectedComponent/ProtectedComponent.tsx
deleted file mode 100644
index d361839..0000000
--- a/src/components/ProtectedComponent/ProtectedComponent.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Route, Redirect } from "react-router-dom";
-
-export const ProtectedComponent: React.FC<any> = ({ children, ...props }) => {
-  console.log(props)
-  return (
-    <Route>
-      {() => (props.currentCard ? children : <Redirect to="/" />)}
-    </Route>
-  )
-}
\ No newline at end of file
diff --git a/src/components/UserList/UserList.tsx b/src/components/UserList/UserList.tsx
deleted file mode 100644
index b683b73..0000000
--- a/src/components/UserList/UserList.tsx
+++ /dev/null
@@ -1,4 +0,0 @@
-
-export const UserList: React.FC<any> = ({ selected, setSelected }) => {
-  return <></>;
-};
diff --git a/src/components/demonstration/building.png b/src/components/demonstration/building.png
deleted file mode 100644
index 1a14647..0000000
Binary files a/src/components/demonstration/building.png and /dev/null differ
diff --git a/src/components/demonstration/building1.png b/src/components/demonstration/building1.png
deleted file mode 100644
index 3f125bd..0000000
Binary files a/src/components/demonstration/building1.png and /dev/null differ
diff --git a/src/components/demonstration/building2.png b/src/components/demonstration/building2.png
deleted file mode 100644
index 87fc94a..0000000
Binary files a/src/components/demonstration/building2.png and /dev/null differ
diff --git a/src/components/demonstration/demonstartion.tsx b/src/components/demonstration/demonstartion.tsx
deleted file mode 100644
index c458798..0000000
--- a/src/components/demonstration/demonstartion.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import "../../styles/styles.css"
-import './demonstration.css'
-
-import building from './building.png'
-
-import iconButton from "./iconButton.svg"
-
-
-export const Demostration: React.FC<any> = ({text}) => {
-    const { card } = text;
-    return (
-        <div className="block">
-            <a href='https://stream.graff.tech/' target='_blank' rel="noreferrer" className='demos_container demos__route'>
-                <div className="main-block__icon_container demo__icon">
-                    <img alt="icon" src={iconButton} className="main-block__icon"></img>
-                </div>
-                <div className='demo'>
-                <img alt='buildingImg' src={building} className='demo_image'></img>
-                <div className='demo_info'>
-                    <div className='title__block'>
-                        <h4 className='title__demo'>{card.title}</h4>
-                        <p className='caption'>{card.subTitle}</p>
-                    </div>
-                    <div className='body__block'>
-                        <p className='caption1'>{card.caption}</p>
-                        <p className='caption2'>{card.caption1}</p>
-                    </div>
-                </div>
-            </div>
-            </a>
-        </div>
-    )
-}
\ No newline at end of file
diff --git a/src/components/demonstration/demonstration.css b/src/components/demonstration/demonstration.css
deleted file mode 100644
index 12220d5..0000000
--- a/src/components/demonstration/demonstration.css
+++ /dev/null
@@ -1,152 +0,0 @@
-.demonstration__title {
-    margin: 0 0 44px 0;
-    font-style: normal;
-    font-weight: 400;
-    font-size: 40px;
-    line-height: 100%;
-    /* or 40px */
-    color: #FFFFFF;
-}
-
-.demos-card__container {
-    display: flex;
-    flex-direction: row;
-    gap: 24px;
-
-}
-
-.demo__icon {
-    right: 36px;
-    top: 36px;
-
-}
-
-.demo-card__header {
-    position: relative;
-}
-
-.demos-card {
-    background: #1E1E1E;
-    border-radius: 24px;
-    width: 384px;
-}
-
-.block {
-    margin-top: 80px;
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-}
-
-.demo-card__image {
-    width: 100%;
-    height: 300px;
-    border-radius: 24px;
-
-}
-
-.demo-card__info {
-    padding: 32px;
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-}
-
-.demo-card__icon {
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 16px;
-}
-
-.demo-card__title {
-    font-weight: 400;
-    font-size: 22px;
-    line-height: 130%;
-    color: #EBEBEB;
-    margin: 0 0 5px 0;
-}
-
-.demo-card__subtitle {
-    font-weight: 400;
-    font-size: 14px;
-    line-height: 130%;
-    /* or 18px */
-
-
-    /* Landing/White */
-
-    color: #EBEBEB;
-
-    opacity: 0.5;
-
-}
-
-.demo-card__text {
-    font-style: normal;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 130%;
-    /* or 21px */
-
-
-    /* Landing/White */
-    margin: 0 0 10px 0;
-    color: #EBEBEB;
-}
-
-.demo-card__subtext {
-    font-weight: 400;
-    font-size: 14px;
-    line-height: 130%;
-    /* or 18px */
-    /* Landing/White */
-    color: #EBEBEB;
-    opacity: 0.5;
-
-}
-
-.demos-card {
-    cursor: pointer;
-}
-
-
-.demos-card:hover>div>div>div>img {
-    transition: opacity ease-out 0.2s;
-    opacity: 1;
-}
-
-.demos__route {
-    width: 100%;
-}
-
-
-@media screen and (max-width: 1024px) {
-    .block {
-        padding: 0 20px 80px;
-    }
-
-    .demos-card__container {
-        flex-direction: column;
-    }
-
-    .demos-card {
-        display: flex;
-        flex-direction: row;
-        width: 100%;
-    }
-
-    .demo-card__image {
-        width: 200px;
-        height: auto;
-    }
-}
-
-
-@media screen and (max-width: 639px) {
-    .demo__icon {
-        right: 19px;
-        top: 186px;
-
-    }
-}
\ No newline at end of file
diff --git a/src/components/demonstration/iconButton.svg b/src/components/demonstration/iconButton.svg
deleted file mode 100644
index 78c5309..0000000
--- a/src/components/demonstration/iconButton.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5.35356 9.35355C5.1583 9.54881 4.84171 9.54882 4.64645 9.35356C4.45119 9.1583 4.45118 8.84171 4.64644 8.64645L5.35356 9.35355ZM9 4.99993L9.35355 4.64637C9.44732 4.74014 9.5 4.86731 9.5 4.99992C9.5 5.13253 9.44732 5.25971 9.35356 5.35348L9 4.99993ZM4.64645 1.35356C4.45119 1.1583 4.45118 0.841714 4.64644 0.64645C4.8417 0.451186 5.15829 0.451183 5.35355 0.646443L4.64645 1.35356ZM1 5.49993C0.723858 5.49993 0.5 5.27607 0.5 4.99993C0.5 4.72378 0.723858 4.49993 1 4.49993V5.49993ZM4.64644 8.64645L8.64644 4.64638L9.35356 5.35348L5.35356 9.35355L4.64644 8.64645ZM8.64645 5.35348L4.64645 1.35356L5.35355 0.646443L9.35355 4.64637L8.64645 5.35348ZM9 5.49993H1V4.49993H9V5.49993Z" fill="white"/>
-</svg>
diff --git a/src/components/header/closeIcon1.svg b/src/components/header/closeIcon1.svg
deleted file mode 100644
index c6696a6..0000000
--- a/src/components/header/closeIcon1.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12 12L16.9996 17M12 12L17 7M12 12L7 17M12 12L7.00002 7" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/src/components/LoadingPopup/LoadingPopup.css b/src/components/pages/ConnectPage/LoadingPopup/LoadingPopup.css
similarity index 84%
rename from src/components/LoadingPopup/LoadingPopup.css
rename to src/components/pages/ConnectPage/LoadingPopup/LoadingPopup.css
index 41db4e5..7c2e16c 100644
--- a/src/components/LoadingPopup/LoadingPopup.css
+++ b/src/components/pages/ConnectPage/LoadingPopup/LoadingPopup.css
@@ -1,8 +1,4 @@
-.loader-container {
-  width: 100%;
-  background: transparent;
-  padding: 56px;
-  box-sizing: border-box;
+.popup-type-loader {
   display: flex;
   flex-direction: column;
   gap: 58px;
@@ -14,6 +10,22 @@
   flex-direction: column;
 }
 
+.popup-img-container {
+  height: 94px;
+  width: 100%;
+  padding: 0 21px 16px 0;
+  margin-bottom: 32px;
+  box-sizing: border-box;
+
+}
+
+.popup-logo {
+  height: 78px;
+  width: 267px;
+  object-fit: contain;
+
+}
+
 .loading-caption {
   font-style: normal;
   font-weight: 400;
diff --git a/src/components/LoadingPopup/LoadingPopup.tsx b/src/components/pages/ConnectPage/LoadingPopup/LoadingPopup.tsx
similarity index 72%
rename from src/components/LoadingPopup/LoadingPopup.tsx
rename to src/components/pages/ConnectPage/LoadingPopup/LoadingPopup.tsx
index b61da3d..9863462 100644
--- a/src/components/LoadingPopup/LoadingPopup.tsx
+++ b/src/components/pages/ConnectPage/LoadingPopup/LoadingPopup.tsx
@@ -1,7 +1,6 @@
-import "../../styles/styles.css";
 import "./LoadingPopup.css";
-import loader from "./loader.svg";
 import { useHistory } from "react-router-dom";
+
 import { useTranslation } from "react-i18next";
 
 export const LoadingPopup: React.FC<any> = ({ logo }) => {
@@ -9,9 +8,11 @@ export const LoadingPopup: React.FC<any> = ({ logo }) => {
   const { t } = useTranslation();
 
   return (
-    <div className="loader-container">
+    <div className="popup popup-type-loader">
       <div className="loading-logo-container">
-        <img className="popup-logo" src={logo} alt="лого" />
+        <div className="popup-img-container">
+          <img className="popup-logo" src={logo} alt="лого" />
+        </div>
         <span className="loading-caption">Пожалуйста подождите</span>
       </div>
       <span className="loader"></span>
diff --git a/src/components/LoadingPopup/loader.svg b/src/components/pages/ConnectPage/LoadingPopup/loader.svg
similarity index 100%
rename from src/components/LoadingPopup/loader.svg
rename to src/components/pages/ConnectPage/LoadingPopup/loader.svg
diff --git a/src/components/Main/main.css b/src/components/pages/ConnectPage/PopupComponent/PopupComponent.css
similarity index 100%
rename from src/components/Main/main.css
rename to src/components/pages/ConnectPage/PopupComponent/PopupComponent.css
diff --git a/src/components/Main/Main.tsx b/src/components/pages/ConnectPage/PopupComponent/PopupComponent.tsx
similarity index 74%
rename from src/components/Main/Main.tsx
rename to src/components/pages/ConnectPage/PopupComponent/PopupComponent.tsx
index c0374f4..6fa1341 100644
--- a/src/components/Main/Main.tsx
+++ b/src/components/pages/ConnectPage/PopupComponent/PopupComponent.tsx
@@ -1,15 +1,16 @@
-import "./main.css";
 import { useEffect, useState } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 
-import { PopupConnect } from "../popupConnect/popupConnect";
-import { LoadingPopup } from "../LoadingPopup/LoadingPopup";
-import { popupAnimation } from "../../utils/animationProps";
-import { useAppDispatch, useAppSelector } from "../../hooks/redux";
-import { createSession } from "../../store/reducers/ActionCreator";
-import { sessionSlice } from "../../store/reducers/sessionSlice";
+import { popupAnimation } from "utils/animationProps";
 
-export const Main: React.FC = () => {
+import { PopupConnect } from "components/pages/ConnectPage/PopupConnect/PopupConnect";
+import { LoadingPopup } from "components/pages/ConnectPage/LoadingPopup/LoadingPopup";
+
+import { useAppDispatch, useAppSelector } from "hooks/redux";
+import { createSession } from "store/reducers/ActionCreator";
+import { sessionSlice } from "store/reducers/sessionSlice";
+
+export const PopupComponent: React.FC = () => {
   const dispatch = useAppDispatch();
   const { currentCard } = useAppSelector((state) => state.cardReducer);
   const [visible, setVisible] = useState({
@@ -64,8 +65,7 @@ export const Main: React.FC = () => {
           animate={"show"}
           exit={"hidden"}
         >
-          <LoadingPopup logo={currentCard.image.logo}
-          ></LoadingPopup>
+          <LoadingPopup logo={currentCard.image.logo}></LoadingPopup>
         </motion.div>
       )}
     </AnimatePresence>
diff --git a/src/components/pages/ConnectPage/PopupConnect/PopupConnect.css b/src/components/pages/ConnectPage/PopupConnect/PopupConnect.css
new file mode 100644
index 0000000..d876979
--- /dev/null
+++ b/src/components/pages/ConnectPage/PopupConnect/PopupConnect.css
@@ -0,0 +1,44 @@
+
+.popup-img-container {
+    height: 94px;
+    width: 100%;
+    padding: 0 21px 16px 0;
+    margin-bottom: 32px;
+    box-sizing: border-box;
+
+}
+
+.popup-logo {
+    height: 78px;
+    width: 267px;
+    object-fit: contain;
+
+}
+
+.popup-button-container {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.line {
+    height: 1px;
+    background-color: #23242A;
+    width: 100%;
+}
+
+
+
+
+@media screen and (max-width: 1000px) {
+    .popup-img-container {
+        margin-bottom: 16px;
+    }
+    
+}
+
+@media screen and (max-width: 640px) {
+    .popup-connect {
+      padding: 16px;
+    }
+  }
\ No newline at end of file
diff --git a/src/components/popupConnect/popupConnect.tsx b/src/components/pages/ConnectPage/PopupConnect/PopupConnect.tsx
similarity index 64%
rename from src/components/popupConnect/popupConnect.tsx
rename to src/components/pages/ConnectPage/PopupConnect/PopupConnect.tsx
index 928f6e8..f00c694 100644
--- a/src/components/popupConnect/popupConnect.tsx
+++ b/src/components/pages/ConnectPage/PopupConnect/PopupConnect.tsx
@@ -1,5 +1,7 @@
+import "./PopupConnect.css";
+
 import { useHistory } from "react-router-dom";
-import "./popupConnect.css";
+
 import { useTranslation } from "react-i18next";
 
 export const PopupConnect: React.FC<any> = ({ onConnect, logo, isLoading }) => {
@@ -12,24 +14,25 @@ export const PopupConnect: React.FC<any> = ({ onConnect, logo, isLoading }) => {
         history.push(`/stream/${res.payload.session_id}`);
       } else {
         alert(res.payload);
-        history.push('/')
+        history.push("/");
       }
     });
   };
 
   return (
-    <div className="popup-connect">
-      <img className="popup-logo" src={logo} alt="лого" />
+    <div className="popup">
+      <div className="popup-img-container">
+        <img className="popup-logo" src={logo} alt="лого" />
+      </div>
       <div className="popup-button-container">
-        <button 
-          onClick={handleConnect}
-          className="button-connect">{t("popup-main-btn-start")}
+        <button onClick={handleConnect} className="button-primary">
+          {t("popup-main-btn-start")}
         </button>
         <div className="popup-line"></div>
-        <button onClick={() => history.goBack()} className="button-back">{t("popup-main-select")}
-</button>
+        <button onClick={() => history.goBack()} className="button-secondary">
+          {t("popup-main-select")}
+        </button>
       </div>
     </div>
-
   );
 };
diff --git a/src/components/demos/Card.css b/src/components/pages/Main/Card/Card.css
similarity index 100%
rename from src/components/demos/Card.css
rename to src/components/pages/Main/Card/Card.css
diff --git a/src/components/demos/Card.tsx b/src/components/pages/Main/Card/Card.tsx
similarity index 93%
rename from src/components/demos/Card.tsx
rename to src/components/pages/Main/Card/Card.tsx
index d81e2a3..748d60e 100644
--- a/src/components/demos/Card.tsx
+++ b/src/components/pages/Main/Card/Card.tsx
@@ -1,7 +1,7 @@
 import "./Card.css";
-import "../../styles/styles.css";
 import iconButton from "./iconButton.svg";
-import { useAppSelector } from "../../hooks/redux";
+
+import { useAppSelector } from "hooks/redux";
 
 export const Card: React.FC<any> = ({ item, onClick }) => {
   const { currentLang } = useAppSelector((state) => state.languageReducer);
diff --git a/src/components/demos/building.png b/src/components/pages/Main/Card/building.png
similarity index 100%
rename from src/components/demos/building.png
rename to src/components/pages/Main/Card/building.png
diff --git a/src/components/demos/building1.png b/src/components/pages/Main/Card/building1.png
similarity index 100%
rename from src/components/demos/building1.png
rename to src/components/pages/Main/Card/building1.png
diff --git a/src/components/demos/building2.png b/src/components/pages/Main/Card/building2.png
similarity index 100%
rename from src/components/demos/building2.png
rename to src/components/pages/Main/Card/building2.png
diff --git a/src/components/demos/iconButton.svg b/src/components/pages/Main/Card/iconButton.svg
similarity index 100%
rename from src/components/demos/iconButton.svg
rename to src/components/pages/Main/Card/iconButton.svg
diff --git a/src/components/pages/Stream/ControlButton/ControlButton.tsx b/src/components/pages/Stream/ControlButton/ControlButton.tsx
new file mode 100644
index 0000000..32c68ea
--- /dev/null
+++ b/src/components/pages/Stream/ControlButton/ControlButton.tsx
@@ -0,0 +1,42 @@
+import control from "images/icons/control.svg";
+import controlOff from "images/icons/HandOff.svg";
+
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import { Button } from "components/shared/Button/Button";
+
+
+export const ControlButton: React.FC<any> = ({ onClick, isSidebarWide }) => {
+  const { t } = useTranslation();
+
+  const [active, setActive] = useState(false);
+  const [button, setButton] = useState({
+    icon: control,
+    active: "request-control-btn",
+    inactive: "request-control-btn-disable",
+    type: "control",
+  });
+
+  useEffect(() => {
+    setButton({ ...button, icon: active ? control : controlOff });
+  }, [active]);
+
+  function handleClick() {
+    onClick();
+    setActive((prev) => !prev);
+  }
+
+  return (
+    <div
+      onClick={handleClick}
+      className="toolbar-button-area"
+    >
+      <Button
+        isSidebarWide={isSidebarWide}
+        button={button}
+        active={active}
+      ></Button>
+    </div>
+  );
+};
diff --git a/src/components/ControlPanel/ControlPanel.tsx b/src/components/pages/Stream/ControlPanel/ControlPanel.tsx
similarity index 69%
rename from src/components/ControlPanel/ControlPanel.tsx
rename to src/components/pages/Stream/ControlPanel/ControlPanel.tsx
index f2c0cf9..2c71a19 100644
--- a/src/components/ControlPanel/ControlPanel.tsx
+++ b/src/components/pages/Stream/ControlPanel/ControlPanel.tsx
@@ -1,9 +1,8 @@
-import { ControlButton } from "../ui/ControlButton/ControlButton";
-import { MicroButton } from "../ui/MicroButton/MicroButton";
-import { ShareButton } from "../ui/ShareButton/ShareButton";
-import { LanguageButton } from "../ui/LanguageButton/LanguageButton";
-import { ExitButton } from "../ui/ExitButton/ExitButton";
-import React, { useState, useEffect } from "react";
+import { ControlButton } from "components/pages/Stream/ControlButton/ControlButton";
+import { MicroButton } from "components/pages/Stream/MicroButton/MicroButton";
+import { ShareButton } from "components/pages/Stream/ShareButton/ShareButton";
+import { LanguageButton } from "components/pages/Stream/LanguageButton/LanguageButton";
+import { ExitButton } from "components/pages/Stream/ExitButton/ExitButton";
 
 export const ControlPanel: React.FC<any> = ({
   handleOpenSharePopup,
diff --git a/src/components/ui/ExitButton/ExitButton.tsx b/src/components/pages/Stream/ExitButton/ExitButton.tsx
similarity index 52%
rename from src/components/ui/ExitButton/ExitButton.tsx
rename to src/components/pages/Stream/ExitButton/ExitButton.tsx
index 9a1f176..23e1071 100644
--- a/src/components/ui/ExitButton/ExitButton.tsx
+++ b/src/components/pages/Stream/ExitButton/ExitButton.tsx
@@ -1,7 +1,8 @@
+import exit from "images/icons/exit.svg";
+
 import { useState } from "react";
-import { Button } from "../button/button";
-import exit from "../../../images/icons/exit.svg";
-import { THOC } from "../../../utils/types";
+
+import { Button } from "components/shared/Button/Button";
 
 export const ExitButton: React.FC<any> = ({ onClick, isSidebarWide }) => {
   const [active, setActive] = useState(false);
@@ -13,14 +14,17 @@ export const ExitButton: React.FC<any> = ({ onClick, isSidebarWide }) => {
   };
 
   function handleClick() {
-    console.log("click");
     setActive((prev) => !prev);
-    onClick()
+    onClick();
   }
 
   return (
-    <div className="toolbar-button-area">
-      <Button isSidebarWide={isSidebarWide}  button={button} onClick={handleClick}></Button>
-    </div>
+    <button
+      tabIndex={-1}
+      onClick={handleClick}
+      className="toolbar-button-area"
+    >
+      <Button isSidebarWide={isSidebarWide} button={button}></Button>
+    </button>
   );
-};
\ No newline at end of file
+};
diff --git a/src/components/pages/Stream/FullscreenButton/FullscreenButton.tsx b/src/components/pages/Stream/FullscreenButton/FullscreenButton.tsx
new file mode 100644
index 0000000..4cf517b
--- /dev/null
+++ b/src/components/pages/Stream/FullscreenButton/FullscreenButton.tsx
@@ -0,0 +1,57 @@
+import fullscreen from "images/icons/fullscreen.svg";
+import fullscreenOff from "images/icons/fullscreenOff.svg";
+
+import { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+
+import { Button } from "components/shared/Button/Button";
+
+export const FullscreenButton: React.FC<any> = ({ isSidebarWide }) => {
+  
+  const [active, setActive] = useState(Boolean(document.fullscreenElement));
+  const [button, setButton] = useState({
+    icon: fullscreen,
+    inactive: "fullscreen-control-btn",
+    active: "fullscreen-control-btn-active",
+    type: "fullscreen",
+  });
+
+  const { t } = useTranslation();
+
+  const handleClick = () => {
+    setActive(Boolean(document.fullscreenElement));
+    if (!document.fullscreenElement) {
+      document.body.requestFullscreen();
+    } else {
+      document.exitFullscreen();
+    }
+  };
+
+  useEffect(() => {
+    setButton({
+      icon: !active ? fullscreen : fullscreenOff,
+      inactive: "fullscreen-control-btn",
+      active: "fullscreen-control-btn-active",
+      type: "fullscreen",
+    });
+  }, [active]);
+
+  useEffect(() => {
+    const onFullscreenChange = () => {
+      setActive(Boolean(document.fullscreenElement));
+    };
+    document.addEventListener("fullscreenchange", onFullscreenChange);
+    return () =>
+      document.removeEventListener("fullscreenchange", onFullscreenChange);
+  }, []);
+
+  return (
+    <div tabIndex={-1} onClick={handleClick} className="toolbar-button-area">
+      <Button
+        isSidebarWide={isSidebarWide}
+        button={button}
+        active={active}
+      ></Button>
+    </div>
+  );
+};
diff --git a/src/components/ui/LanguageButton/LanguageButton.tsx b/src/components/pages/Stream/LanguageButton/LanguageButton.tsx
similarity index 83%
rename from src/components/ui/LanguageButton/LanguageButton.tsx
rename to src/components/pages/Stream/LanguageButton/LanguageButton.tsx
index e1d7828..6f52e34 100644
--- a/src/components/ui/LanguageButton/LanguageButton.tsx
+++ b/src/components/pages/Stream/LanguageButton/LanguageButton.tsx
@@ -1,8 +1,10 @@
+import microOn from "images/icons/MicroOn.svg";
+
 import { useState } from "react";
-import { LanguagePopup } from "../../LanguagePopup/LanguagePopup";
-import { Button } from "../button/button";
-import microOn from "../../../images/icons/MicroOn.svg";
 import { AnimatePresence, motion } from "framer-motion";
+
+import { Button } from "components/shared/Button/Button";
+
 const container = {
   hidden: {
     opacity: 0,
@@ -45,7 +47,6 @@ export const LanguageButton: React.FC<any> = ({ hover, setHover, isSidebarWide }
             animate={"show"}
             exit={"hidden"}
           >
-            <LanguagePopup setOpen={setOpen}></LanguagePopup>
           </motion.div>
         )}
       </AnimatePresence>
diff --git a/src/components/pages/Stream/MicroButton/MicroButton.tsx b/src/components/pages/Stream/MicroButton/MicroButton.tsx
new file mode 100644
index 0000000..7d2527a
--- /dev/null
+++ b/src/components/pages/Stream/MicroButton/MicroButton.tsx
@@ -0,0 +1,46 @@
+import microOn from "images/icons/MicroOn.svg";
+import microOff from "images/icons/MicroOff.svg";
+
+import { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+
+import { Button } from "components/shared/Button/Button";
+
+export const MicroButton: React.FC<any> = ({
+  onClick,
+  isMuted,
+  isSidebarWide,
+}) => {
+  const { t } = useTranslation();
+  const [button, setButton] = useState({
+    icon: microOn,
+    active: "mute-control-btn",
+    inactive: "mute-control-btn-disable",
+    type: "microphone",
+  });
+
+  const [active, setActive] = useState(false);
+
+  useEffect(() => {
+    setButton({ ...button, icon: active ? microOn : microOff });
+  }, [active]);
+
+  function handleClick() {
+    onClick();
+    setActive((prev) => !prev);
+  }
+
+  return (
+    <div
+      tabIndex={-1}
+      onClick={handleClick}
+      className="toolbar-button-area"
+    >
+      <Button
+        isSidebarWide={isSidebarWide}
+        button={button}
+        active={isMuted}
+      ></Button>
+    </div>
+  );
+};
diff --git a/src/components/playerComponent/playerComponent.tsx b/src/components/pages/Stream/PlayerComponent/PlayerComponent.tsx
similarity index 68%
rename from src/components/playerComponent/playerComponent.tsx
rename to src/components/pages/Stream/PlayerComponent/PlayerComponent.tsx
index d793e89..93088d0 100644
--- a/src/components/playerComponent/playerComponent.tsx
+++ b/src/components/pages/Stream/PlayerComponent/PlayerComponent.tsx
@@ -1,10 +1,12 @@
-import "./playerStyles.css";
-import { useHistory, useParams } from "react-router-dom";
+import "./PlayerStyles.css";
 import React, { useEffect } from "react";
-import { Sidebar } from "../sidebar/sidebar";
-import { connectSession } from "../../store/reducers/ActionCreator";
-import { useAppDispatch, useAppSelector } from "../../hooks/redux";
-import { sessionSlice } from "../../store/reducers/sessionSlice";
+import { useHistory, useParams } from "react-router-dom";
+
+import { Sidebar } from "components/pages/Stream/Sidebar/Sidebar";
+
+import { connectSession } from "store/reducers/ActionCreator";
+import { useAppDispatch, useAppSelector } from "hooks/redux";
+import { sessionSlice } from "store/reducers/sessionSlice";
 
 type link = {
   id: string;
@@ -14,13 +16,12 @@ export const PlayerComponent: React.FC<any> = ({ closeStream }) => {
   const { id } = useParams<link>();
   const dispatch = useAppDispatch();
   const { cleanErrors } = sessionSlice.actions;
-  const history = useHistory()
+  const history = useHistory();
 
   useEffect(() => {
     dispatch(connectSession(id)).then((res: any) => {
       if (res.error) {
         alert(res.payload);
-        history.push('/')
       }
     });
     return () => {
@@ -33,11 +34,13 @@ export const PlayerComponent: React.FC<any> = ({ closeStream }) => {
   return (
     <>
       <iframe
-        id='player'
+        id="player"
+        onFocus={() => console.log('focus')}
         onBlur={(e) => e.target.focus()} /// element loosing focus and keyboard input doesn't work
         src={url}
         className={"player playerOn"}
         security={""}
+        allowFullScreen={true}
       ></iframe>
       <Sidebar closeStream={closeStream}></Sidebar>
     </>
diff --git a/src/components/playerComponent/playerStyles.css b/src/components/pages/Stream/PlayerComponent/PlayerStyles.css
similarity index 100%
rename from src/components/playerComponent/playerStyles.css
rename to src/components/pages/Stream/PlayerComponent/PlayerStyles.css
diff --git a/src/components/pages/Stream/PopupExit/PopupExit.css b/src/components/pages/Stream/PopupExit/PopupExit.css
new file mode 100644
index 0000000..6ea796b
--- /dev/null
+++ b/src/components/pages/Stream/PopupExit/PopupExit.css
@@ -0,0 +1,50 @@
+.exit-popup-container {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  background-color: #333333;
+  color: #ffffff;
+  padding: 40px;
+  top: 50%;
+  width: 400px;
+  left: 50%;
+  background: #151619;
+  transform: translate(-50%, -50%);
+
+  /* gap: 24px; */
+  justify-content: space-between;
+}
+
+.exit-popup-button-container {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.exit-popup-button {
+  border-radius: 12px;
+  border: none;
+  color: white;
+  height: 60px;
+  font-style: normal;
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 20px;
+  cursor: pointer;
+}
+
+.exit-popup-button_confirm {
+  background: #567ece;
+  opacity: 1;
+}
+
+.exit-popup-button_finish {
+  background: #404040;
+}
+
+
+.exit-popup-button_confirm:hover {
+  opacity: 0.7;
+  transition: 0.3s;
+}
diff --git a/src/components/pages/Stream/PopupExit/PopupExit.tsx b/src/components/pages/Stream/PopupExit/PopupExit.tsx
new file mode 100644
index 0000000..ccd74c0
--- /dev/null
+++ b/src/components/pages/Stream/PopupExit/PopupExit.tsx
@@ -0,0 +1,38 @@
+import "../PopupShare/sharePopup.css";
+import "./PopupExit.css";
+
+import { useTranslation } from "react-i18next";
+
+import { TSidebarPopup } from "utils/types";
+
+export const PopupExit: React.FC<TSidebarPopup> = ({ setClose, onExit }) => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="popup exit-popup-container popup">
+      <div className="popup-position-container">
+        <div className="mobile-users-part-header">
+          <span className="mobile-users-part-header-title exit-popup-button-title">
+            {t("popup-control-exit-title")}
+          </span>
+          <button
+            onClick={() => setClose()}
+            className="mobile-users-part-header-close-button"
+          ></button>
+        </div>
+        <div className="exit-popup-button-container">
+          <button onClick={() => setClose()} className="button button-primary">
+            {t("popup-control-no")}
+          </button>
+          <button
+            style={{ height: "48px" }}
+            onClick={() => onExit?.()}
+            className=" button button-secondary"
+          >
+            {t("popup-control-yes")}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/PopupShare/PopupShare.tsx b/src/components/pages/Stream/PopupShare/PopupShare.tsx
similarity index 66%
rename from src/components/PopupShare/PopupShare.tsx
rename to src/components/pages/Stream/PopupShare/PopupShare.tsx
index 1641b26..4558cf3 100644
--- a/src/components/PopupShare/PopupShare.tsx
+++ b/src/components/pages/Stream/PopupShare/PopupShare.tsx
@@ -1,5 +1,7 @@
 import "./sharePopup.css";
+
 import { useState, useEffect } from "react";
+
 import { useTranslation } from "react-i18next";
 
 export const PopupShare: React.FC<any> = ({ setClose }) => {
@@ -20,7 +22,7 @@ export const PopupShare: React.FC<any> = ({ setClose }) => {
   const { t } = useTranslation();
 
   return (
-    <div className="share-popup-container">
+    <div className="share-popup-container popup">
       <div className="mobile-users-part-header share-header-popup">
         <span className="mobile-users-part-header-title">
           {t("popup-control-invite-title")}
@@ -41,12 +43,19 @@ export const PopupShare: React.FC<any> = ({ setClose }) => {
         ></input>
       </div>
       <div className="share-popup-data-container">
-        <button className="share-popup-copy-button ">
-          <span className="share-popup-copy-button-icon"></span>
-          <span onClick={copyLink} className="share-popup-copy-button-title">
-            {copy ? t("popup-control-btn-active") : t("popup-control-btn")}
-          </span>
-        </button>
+        {!copy ? (
+          <button onClick={copyLink} className="button button-primary ">
+            <span className="share-popup-copy-button-icon"></span>
+            <span className="">
+              {copy ? t("popup-control-btn-active") : t("popup-control-btn")}
+            </span>
+          </button>
+        ) : (
+          <button onClick={copyLink} className="button button-teritary">
+            <span className="share-popup-copied-button-icon"></span>
+            <span className="">{t("popup-control-btn-active")}</span>
+          </button>
+        )}
       </div>
     </div>
   );
diff --git a/src/components/pages/Stream/PopupShare/copiedIcon.svg b/src/components/pages/Stream/PopupShare/copiedIcon.svg
new file mode 100644
index 0000000..9240505
--- /dev/null
+++ b/src/components/pages/Stream/PopupShare/copiedIcon.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 12L10 17L19 8" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/components/pages/Stream/PopupShare/copyIcon.svg b/src/components/pages/Stream/PopupShare/copyIcon.svg
new file mode 100644
index 0000000..87877ad
--- /dev/null
+++ b/src/components/pages/Stream/PopupShare/copyIcon.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 7H10C9.44772 7 9 7.44772 9 8V20C9 20.5523 9.44772 21 10 21H18C18.5523 21 19 20.5523 19 20V8C19 7.44772 18.5523 7 18 7Z" fill="white"/>
+<path d="M5 5V17C5 17.5523 5.44772 18 6 18C6.55228 18 7 17.5523 7 17V6C7 5.44772 7.44772 5 8 5H15C15.5523 5 16 4.55228 16 4C16 3.44772 15.5523 3 15 3H7C5.89543 3 5 3.89543 5 5Z" fill="white"/>
+</svg>
diff --git a/src/components/pages/Stream/PopupShare/sharePopup.css b/src/components/pages/Stream/PopupShare/sharePopup.css
new file mode 100644
index 0000000..c2549d4
--- /dev/null
+++ b/src/components/pages/Stream/PopupShare/sharePopup.css
@@ -0,0 +1,162 @@
+.share-popup-container {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  top: 50%;
+  left: 50%;
+  background: #151619;
+  transform: translate(-50%, -50%);
+  border-radius: 4px;
+  width: 400px;
+  color: #ffffff;
+  padding: 40px;
+  gap: 32px;
+}
+
+.share-header-popup {
+  padding-bottom: 0px;
+}
+
+.border-line {
+  width: 80%;
+  height: 1px;
+  background-color: #404040;
+}
+
+.share-popup-data-container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.share-popup-data-title {
+  font-weight: 600;
+  font-size: 18px;
+  line-height: 22px;
+  user-select: none;
+}
+
+.share-popup-data-input {
+  background: #23242a;
+
+  border: 1px solid #23242a;
+  border-radius: 4px;
+  outline: none;
+  width: 100%;
+  border: none;
+  color: #ffffff;
+  box-sizing: border-box;
+}
+
+.share-popup-copied-button-icon {
+  width: 24px;
+  height: 24px;
+  background: url("copiedIcon.svg") 50% 50% no-repeat;
+  background-size: 100% 100%;
+}
+
+.button-copy {
+  width: fit-content;
+  display: flex;
+  padding: 12px 24px 12px 16px;
+}
+
+.mobile-users-part-header-title {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  font-weight: 400;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 125%;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.popup-position-container {
+  position: relative;
+}
+.mobile-users-part-header-close-button {
+  top: 0;
+  right: 0;
+  position: absolute;
+  width: 15px;
+  height: 15px;
+  border: none;
+  background-color: transparent;
+  background: url(images/icons/close.svg) 50% 50% no-repeat;
+  background-size: 100% 100%;
+  cursor: pointer;
+}
+
+.share-popup-data-input.code {
+  height: 76px;
+  font-weight: 300;
+  font-size: 38px;
+  line-height: 46px;
+  letter-spacing: 0.3em;
+  text-align: center;
+  padding: 15px 0;
+}
+
+.share-popup-data-input.href {
+  height: 48px;
+  padding: 14.5px 16px;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 19px;
+}
+
+.share-popup-copy-button {
+  display: flex;
+  box-sizing: border-box;
+  width: 176px;
+  height: 48px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 12px;
+  background-color: #567ece;
+  border: none;
+  color: #ffffff;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 20px;
+  gap: 4px;
+  cursor: pointer;
+  transition: 0.3s;
+}
+
+.share-popup-copy-button:hover {
+  opacity: 0.7;
+}
+
+.share-popup-copy-button.copied {
+  background-color: #219653;
+  transition: 0.3s;
+}
+
+.share-popup-copy-button-icon {
+  width: 24px;
+  height: 24px;
+  background: url("copyIcon.svg") 50% 50% no-repeat;
+  background-size: 100% 100%;
+}
+
+.show-share-popup-enter {
+  opacity: 0;
+}
+
+.show-share-popup-enter-active {
+  opacity: 1;
+  transition: 0.3s;
+}
+
+.show-share-popup-exit {
+  opacity: 1;
+}
+
+.show-share-popup-exit-active {
+  opacity: 0;
+  transition: 0.3s;
+}
diff --git a/src/components/pages/Stream/ShareButton/ShareButton.tsx b/src/components/pages/Stream/ShareButton/ShareButton.tsx
new file mode 100644
index 0000000..8f91ff9
--- /dev/null
+++ b/src/components/pages/Stream/ShareButton/ShareButton.tsx
@@ -0,0 +1,30 @@
+import share from "images/icons/Share.svg";
+
+import { useTranslation } from "react-i18next";
+
+import { Button } from "components/shared/Button/Button";
+
+export const ShareButton: React.FC<any> = ({ onClick, isSidebarWide }) => {
+  const button = {
+    icon: share,
+    active: "share-contro-btn",
+    inactive: "share-contro-btn",
+    type: "share",
+  };
+
+  const { t } = useTranslation();
+
+  function handleClick() {
+    onClick();
+  }
+
+  return (
+    <button
+      tabIndex={-1}
+      onClick={handleClick}
+      className="toolbar-button-area"
+    >
+      <Button isSidebarWide={isSidebarWide} button={button}></Button>
+    </button>
+  );
+};
diff --git a/src/components/sidebar/toolbar.css b/src/components/pages/Stream/Sidebar/Sidebar.css
similarity index 90%
rename from src/components/sidebar/toolbar.css
rename to src/components/pages/Stream/Sidebar/Sidebar.css
index a819941..2206512 100644
--- a/src/components/sidebar/toolbar.css
+++ b/src/components/pages/Stream/Sidebar/Sidebar.css
@@ -1,15 +1,12 @@
 .toolbar-container {
+  user-select: none;
   display: flex;
   position: relative;
   height: 100vh;
-  /* width: 74px; */
-  width: 64px;
   padding: 0;
   margin: 0;
-  /* transform: translateX(-60px); */
-
-  border-right: 1px solid #4f4f4f;
-  background: #333333;
+  padding: 10px;
+  background: #1c1d21;
   box-sizing: border-box;
 }
 
@@ -18,7 +15,6 @@
   left: 50%;
   transform: translate(-50%, -50%);
   position: absolute;
-
 }
 
 .toolbar-confirm-block {
@@ -29,14 +25,13 @@
 .mobile-users-part-header {
   display: flex;
   justify-content: space-between;
-  align-items: center;
-  padding-bottom: 24px;
+  align-items: flex-start;
+  padding-bottom: 32px;
 }
 
 .toolbar-field {
-  background: #333333;
-  overflow: hidden;
-  padding: 14px 15px;
+  width: 100%;
+  background: transparent;
   box-sizing: border-box;
   height: 100%;
   display: flex;
@@ -46,11 +41,23 @@
 }
 
 .toolbar-field-part {
+  width: 100%;
   display: flex;
   flex-direction: column;
+  position: relative;
   gap: 10px;
 }
 
+.toolbar-button-caption {
+  color: #c5c7ce;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 140%;
+  white-space: nowrap;
+  position: relative;
+}
+
 .toolbar-button-container {
   display: flex;
   flex-direction: column;
@@ -98,12 +105,13 @@
 }
 
 .toolbar-button-area {
+  cursor: pointer;
   align-items: center;
   position: relative;
   display: flex;
   gap: 8px;
-  /* background-color: #333333; */
-  /* border-top-left-radius: 50px solid #4f4f4f; */
+  padding: 8px;
+  background-color: transparent;
 }
 
 .toolbar-button-area.hidden {
@@ -142,17 +150,12 @@
 }
 
 .toolbar-button {
-  background-color: #4f4f4f;
+  background: transparent;
   position: relative;
-  width: 40px;
-  height: 40px;
+  width: 24px;
+  height: 24px;
   border: none;
-  border-radius: 50px;
-  background-size: 100% 100%;
   cursor: pointer;
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
   color: #ffffff;
   font-weight: 400;
   font-size: 14px;
@@ -165,28 +168,9 @@
   background: #567ece;
 }
 
-.user-icon {
-  position: relative;
-  width: 40px;
-  height: 40px;
-  border: none;
-  border-radius: 50px;
-  background-size: 100% 100%;
-  background-color: #4f4f4f;
-  cursor: pointer;
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  color: #ffffff;
-  font-weight: 400;
-  font-size: 14px;
-  justify-content: center;
-  line-height: 17px;
-  padding: 0px;
-}
 
 .toolbar-button_exit {
-  background: #eb5757;
+  background: transparent;
 }
 
 .language-caption {
@@ -196,8 +180,8 @@
 }
 
 .toolbar-icon {
-  object-fit: cover;
-  width: 45%;
+  width: 24px;
+  height: 100%;
 }
 
 .empty__block {
@@ -244,7 +228,7 @@
   margin-left: 2px;
   opacity: 0;
   position: absolute;
-  left: 100%;
+  left: 126%;
   height: 24px;
   top: calc(50% - 12px);
   /* background-color: #27AE60; */
@@ -256,15 +240,15 @@
   box-sizing: content-box;
 }
 
+
 .toolbar-button-description-rectangle {
   /* display: inline-block; */
   white-space: nowrap;
   /* flex-shrink: 0; */
-  background-color: #333333;
+  background: #23242a;
   height: 24px;
   border-top-right-radius: 50px;
   border-bottom-right-radius: 50px;
-  border: 1px solid #4f4f4f;
   border-left: none;
   color: white;
   display: flex;
@@ -311,9 +295,7 @@
   background-color: #4f4f4f;
 }
 
-.toolbar-button.user {
-  background: url("icons/userIcon.svg") 50% 50% no-repeat;
-}
+
 
 .toolbar-button.admin {
   background-color: #2f80ed;
@@ -594,13 +576,8 @@
 
 @media screen and (max-height: 700px) {
   .toolbar-field {
-    padding: 20px 14px;
   }
 
-  .toolbar-button {
-    width: 44px;
-    height: 44px;
-  }
 
   .toolbar-button:hover {
     opacity: 1;
diff --git a/src/components/sidebar/sidebar.tsx b/src/components/pages/Stream/Sidebar/Sidebar.tsx
similarity index 51%
rename from src/components/sidebar/sidebar.tsx
rename to src/components/pages/Stream/Sidebar/Sidebar.tsx
index e94147d..7526f17 100644
--- a/src/components/sidebar/sidebar.tsx
+++ b/src/components/pages/Stream/Sidebar/Sidebar.tsx
@@ -1,14 +1,20 @@
-import "./toolbar.css";
+import "./Sidebar.css";
 import React, { useState, useEffect } from "react";
-import { UserList } from "../UserList/UserList";
-import { FullscreenButton } from "../ui/FullscreenButton/FullscreenButton";
-import { PopupShare } from "../PopupShare/PopupShare";
-import { ExitPopup } from "../ExitPopup/ExitPopup";
-import { ControlPanel } from "../ControlPanel/ControlPanel";
 import { AnimatePresence, motion } from "framer-motion";
-import { sidebarVariants, popupAnimation, wideSidebarVariants } from "../../utils/animationProps";
-import { WideSidebarButton } from "../ui/WideSidebarButton/WideSidebarButton";
 
+import { UserList } from "components/pages/Stream/UserList/UserList";
+import { FullscreenButton } from "components/pages/Stream/FullscreenButton/FullscreenButton";
+import { PopupShare } from "components/pages/Stream/PopupShare/PopupShare";
+import { PopupExit } from "components/pages/Stream/PopupExit/PopupExit";
+import { ControlPanel } from "../ControlPanel/ControlPanel";
+import { WideSidebarButton } from "components/pages/Stream/WideSidebarButton/WideSidebarButton";
+
+import {
+  sidebarVariants,
+  popupAnimation,
+  wideSidebarVariants,
+  wideSidebarAdminVariants,
+} from "utils/animationProps";
 
 export const Sidebar: React.FC<any> = ({ closeStream }) => {
   const [open, setOpen] = useState(false);
@@ -17,8 +23,10 @@ export const Sidebar: React.FC<any> = ({ closeStream }) => {
     popup2: false,
   });
 
+  const isAdmin = true;
+
   const [selected, setSelected] = useState(false);
-  const [wideSidebar, setWideSidebar] = useState(false)
+  const [wideSidebar, setWideSidebar] = useState(false);
 
   const [isMuted, setMuted] = useState(true);
 
@@ -50,11 +58,9 @@ export const Sidebar: React.FC<any> = ({ closeStream }) => {
   function closeSideBar() {
     setSelected(false);
     setOpen(false);
-    setWideSidebar(false)
+    setWideSidebar(false);
   }
 
-
-
   useEffect(() => () => unmountComponent(), []);
 
   function unmountComponent() {
@@ -65,24 +71,42 @@ export const Sidebar: React.FC<any> = ({ closeStream }) => {
     });
   }
 
-  console.log(wideSidebar, 'wide', open, 'open')
+  const setAnimation = () => {
+    if (isAdmin) return wideSidebarAdminVariants;
+    else {
+      return wideSidebarVariants;
+    }
+  };
 
   return (
-    <div>
+    <>
       <motion.div
+        initial={false}
         animate={open ? "open" : "closed"}
-        variants={wideSidebar ? wideSidebarVariants : sidebarVariants}
+        variants={wideSidebar ? setAnimation() : sidebarVariants}
         className="toolbar-container"
       >
-        <div style={wideSidebar ? {width: "220px"} : {width: "60px"}} className="toolbar-field">
+        <div
+          style={wideSidebar ? { overflow: "hidden" } : { overflow: "visible" }}
+          className="toolbar-field"
+        >
           <div className="toolbar-field-part">
-            <FullscreenButton isSidebarWide={wideSidebar}
-            > </FullscreenButton>
-            <UserList isSidebarWide={wideSidebar} /// this is for disable showhing button's caption
-              selected={selected} setSelected={setSelected}></UserList>
+            <FullscreenButton isSidebarWide={wideSidebar}> </FullscreenButton>
+            <div className="toolbar-button-container-border-line"></div>
+            <UserList
+              closeSidebar={closeSideBar}
+              isSidebarWide={wideSidebar} /// this is for disable showhing button's caption
+              isAdmin={isAdmin}
+            ></UserList>
           </div>
-          <motion.div onHoverStart={() => setWideSidebar(true)} className="toolbar-field-part">
-            <WideSidebarButton isSidebarWide={wideSidebar} close={closeSideBar}></WideSidebarButton>
+          <motion.div
+            onHoverStart={() => setWideSidebar(true)}
+            className="toolbar-field-part"
+          >
+            <WideSidebarButton
+              isSidebarWide={wideSidebar}
+              close={closeSideBar}
+            ></WideSidebarButton>
           </motion.div>
           <ControlPanel
             isSidebarWide={wideSidebar}
@@ -92,9 +116,20 @@ export const Sidebar: React.FC<any> = ({ closeStream }) => {
             handleOpenExitPopup={handleOpenExitPopup}
           ></ControlPanel>
         </div>
-        {!open && <motion.div onClick={() => setOpen(true)} className="toolbar-open-button">
-          <span className="toolbar-open-button-icon"></span>
-        </motion.div>}
+        <AnimatePresence>
+          {!open && (
+            <motion.div
+              variants={popupAnimation}
+              initial={"hidden"}
+              animate={"show"}
+              exit={"hidden"}
+              onClick={() => setOpen(true)}
+              className="toolbar-open-button"
+            >
+              <span className="toolbar-open-button-icon"></span>
+            </motion.div>
+          )}
+        </AnimatePresence>
       </motion.div>
       <AnimatePresence>
         {popup.popup1 && (
@@ -117,13 +152,13 @@ export const Sidebar: React.FC<any> = ({ closeStream }) => {
             animate={"show"}
             exit={"hidden"}
           >
-            <ExitPopup
+            <PopupExit
               onExit={closeStream}
               setClose={handleClosePopups}
-            ></ExitPopup>
+            ></PopupExit>
           </motion.div>
         )}
       </AnimatePresence>
-    </div>
+    </>
   );
 };
diff --git a/src/components/sidebar/closeToolbarIcon.svg b/src/components/pages/Stream/Sidebar/closeToolbarIcon.svg
similarity index 100%
rename from src/components/sidebar/closeToolbarIcon.svg
rename to src/components/pages/Stream/Sidebar/closeToolbarIcon.svg
diff --git a/src/components/sidebar/icons/adminIcon.svg b/src/components/pages/Stream/Sidebar/icons/adminIcon.svg
similarity index 100%
rename from src/components/sidebar/icons/adminIcon.svg
rename to src/components/pages/Stream/Sidebar/icons/adminIcon.svg
diff --git a/src/components/sidebar/icons/closeFullscreenIcon.svg b/src/components/pages/Stream/Sidebar/icons/closeFullscreenIcon.svg
similarity index 100%
rename from src/components/sidebar/icons/closeFullscreenIcon.svg
rename to src/components/pages/Stream/Sidebar/icons/closeFullscreenIcon.svg
diff --git a/src/components/sidebar/icons/closeIcon.svg b/src/components/pages/Stream/Sidebar/icons/closeIcon.svg
similarity index 100%
rename from src/components/sidebar/icons/closeIcon.svg
rename to src/components/pages/Stream/Sidebar/icons/closeIcon.svg
diff --git a/src/components/sidebar/icons/constrolOffIcon.svg b/src/components/pages/Stream/Sidebar/icons/constrolOffIcon.svg
similarity index 100%
rename from src/components/sidebar/icons/constrolOffIcon.svg
rename to src/components/pages/Stream/Sidebar/icons/constrolOffIcon.svg
diff --git a/src/components/sidebar/icons/constrolOnIcon.svg b/src/components/pages/Stream/Sidebar/icons/constrolOnIcon.svg
similarity index 100%
rename from src/components/sidebar/icons/constrolOnIcon.svg
rename to src/components/pages/Stream/Sidebar/icons/constrolOnIcon.svg
diff --git a/src/components/sidebar/icons/controlDisabledIcon.svg b/src/components/pages/Stream/Sidebar/icons/controlDisabledIcon.svg
similarity index 100%
rename from src/components/sidebar/icons/controlDisabledIcon.svg
rename to src/components/pages/Stream/Sidebar/icons/controlDisabledIcon.svg
diff --git a/src/components/PopupShare/copyIcon.svg b/src/components/pages/Stream/Sidebar/icons/copyIcon.svg
similarity index 100%
rename from src/components/PopupShare/copyIcon.svg
rename to src/components/pages/Stream/Sidebar/icons/copyIcon.svg
diff --git a/src/components/sidebar/icons/descriptTiriangleIcon.svg b/src/components/pages/Stream/Sidebar/icons/descriptTiriangleIcon.svg
similarity index 100%
rename from src/components/sidebar/icons/descriptTiriangleIcon.svg
rename to src/components/pages/Stream/Sidebar/icons/descriptTiriangleIcon.svg
diff --git a/src/components/sidebar/icons/descriptionButtonIcon.svg b/src/components/pages/Stream/Sidebar/icons/descriptionButtonIcon.svg
similarity index 100%
rename from src/components/sidebar/icons/descriptionButtonIcon.svg
rename to src/components/pages/Stream/Sidebar/icons/descriptionButtonIcon.svg
diff --git a/src/components/sidebar/icons/disableFullscreenIcon.svg b/src/components/pages/Stream/Sidebar/icons/disableFullscreenIcon.svg
similarity index 100%
rename from src/components/sidebar/icons/disableFullscreenIcon.svg
rename to src/components/pages/Stream/Sidebar/icons/disableFullscreenIcon.svg
diff --git a/src/components/sidebar/icons/enIcon.svg b/src/components/pages/Stream/Sidebar/icons/enIcon.svg
similarity index 100%
rename from src/components/sidebar/icons/enIcon.svg
rename to src/components/pages/Stream/Sidebar/icons/enIcon.svg
diff --git a/src/components/sidebar/icons/exitIcon.svg b/src/components/pages/Stream/Sidebar/icons/exitIcon.svg
similarity index 100%
rename from src/components/sidebar/icons/exitIcon.svg
rename to src/components/pages/Stream/Sidebar/icons/exitIcon.svg
diff --git a/src/components/sidebar/icons/guestIcon.svg b/src/components/pages/Stream/Sidebar/icons/guestIcon.svg
similarity index 100%
rename from src/components/sidebar/icons/guestIcon.svg
rename to src/components/pages/Stream/Sidebar/icons/guestIcon.svg
diff --git a/src/components/sidebar/icons/handIcon.svg b/src/components/pages/Stream/Sidebar/icons/handIcon.svg
similarity index 100%
rename from src/components/sidebar/icons/handIcon.svg
rename to src/components/pages/Stream/Sidebar/icons/handIcon.svg
diff --git a/src/components/sidebar/icons/microDisabledIcon.svg b/src/components/pages/Stream/Sidebar/icons/microDisabledIcon.svg
similarity index 100%
rename from src/components/sidebar/icons/microDisabledIcon.svg
rename to src/components/pages/Stream/Sidebar/icons/microDisabledIcon.svg
diff --git a/src/components/sidebar/icons/microOffIcon.svg b/src/components/pages/Stream/Sidebar/icons/microOffIcon.svg
similarity index 100%
rename from src/components/sidebar/icons/microOffIcon.svg
rename to src/components/pages/Stream/Sidebar/icons/microOffIcon.svg
diff --git a/src/components/sidebar/icons/microOnIcon.svg b/src/components/pages/Stream/Sidebar/icons/microOnIcon.svg
similarity index 100%
rename from src/components/sidebar/icons/microOnIcon.svg
rename to src/components/pages/Stream/Sidebar/icons/microOnIcon.svg
diff --git a/src/components/sidebar/icons/newCaptTriangleIcon.svg b/src/components/pages/Stream/Sidebar/icons/newCaptTriangleIcon.svg
similarity index 93%
rename from src/components/sidebar/icons/newCaptTriangleIcon.svg
rename to src/components/pages/Stream/Sidebar/icons/newCaptTriangleIcon.svg
index ace65c4..f89b536 100644
--- a/src/components/sidebar/icons/newCaptTriangleIcon.svg
+++ b/src/components/pages/Stream/Sidebar/icons/newCaptTriangleIcon.svg
@@ -3,6 +3,6 @@
 <path d="M17.5 -2C17.5 -2.18939 17.393 -2.36252 17.2236 -2.44721C17.0542 -2.53191 16.8515 -2.51363 16.7 -2.4L-1.16667 11C-2.5 12 -2.5 14 -1.16667 15L16.7 28.4C16.8515 28.5136 17.0542 28.5319 17.2236 28.4472C17.393 28.3625 17.5 28.1894 17.5 28V-2Z" fill="#333333" stroke="#4F4F4F" stroke-linecap="round" stroke-linejoin="round"/>
 </mask>
 <g mask="url(#mask0_688_6251)">
-<path d="M18.5 1C18.5 0.815602 18.3985 0.646172 18.2359 0.559163C18.0734 0.472153 17.8761 0.481689 17.7227 0.583975L2.2188 10.9199C0.734468 11.9094 0.734468 14.0906 2.2188 15.0801L17.7227 25.416C17.8761 25.5183 18.0734 25.5278 18.2359 25.4408C18.3985 25.3538 18.5 25.1844 18.5 25V1Z" fill="#333333" stroke="#4F4F4F" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18.5 1C18.5 0.815602 18.3985 0.646172 18.2359 0.559163C18.0734 0.472153 17.8761 0.481689 17.7227 0.583975L2.2188 10.9199C0.734468 11.9094 0.734468 14.0906 2.2188 15.0801L17.7227 25.416C17.8761 25.5183 18.0734 25.5278 18.2359 25.4408C18.3985 25.3538 18.5 25.1844 18.5 25V1Z" fill="#23242A" stroke="#23242A" stroke-linecap="round" stroke-linejoin="round"/>
 </g>
 </svg>
diff --git a/src/components/sidebar/icons/openFullscreenIcon.svg b/src/components/pages/Stream/Sidebar/icons/openFullscreenIcon.svg
similarity index 100%
rename from src/components/sidebar/icons/openFullscreenIcon.svg
rename to src/components/pages/Stream/Sidebar/icons/openFullscreenIcon.svg
diff --git a/src/components/sidebar/icons/othertIcon.svg b/src/components/pages/Stream/Sidebar/icons/othertIcon.svg
similarity index 100%
rename from src/components/sidebar/icons/othertIcon.svg
rename to src/components/pages/Stream/Sidebar/icons/othertIcon.svg
diff --git a/src/components/sidebar/icons/ruIcon.svg b/src/components/pages/Stream/Sidebar/icons/ruIcon.svg
similarity index 100%
rename from src/components/sidebar/icons/ruIcon.svg
rename to src/components/pages/Stream/Sidebar/icons/ruIcon.svg
diff --git a/src/components/sidebar/icons/selfIcon.svg b/src/components/pages/Stream/Sidebar/icons/selfIcon.svg
similarity index 100%
rename from src/components/sidebar/icons/selfIcon.svg
rename to src/components/pages/Stream/Sidebar/icons/selfIcon.svg
diff --git a/src/components/sidebar/icons/shareIcon.svg b/src/components/pages/Stream/Sidebar/icons/shareIcon.svg
similarity index 100%
rename from src/components/sidebar/icons/shareIcon.svg
rename to src/components/pages/Stream/Sidebar/icons/shareIcon.svg
diff --git a/src/components/sidebar/icons/soundOffIcon.svg b/src/components/pages/Stream/Sidebar/icons/soundOffIcon.svg
similarity index 100%
rename from src/components/sidebar/icons/soundOffIcon.svg
rename to src/components/pages/Stream/Sidebar/icons/soundOffIcon.svg
diff --git a/src/components/sidebar/icons/soundOnIcon.svg b/src/components/pages/Stream/Sidebar/icons/soundOnIcon.svg
similarity index 100%
rename from src/components/sidebar/icons/soundOnIcon.svg
rename to src/components/pages/Stream/Sidebar/icons/soundOnIcon.svg
diff --git a/src/components/sidebar/icons/userIcon.svg b/src/components/pages/Stream/Sidebar/icons/userIcon.svg
similarity index 100%
rename from src/components/sidebar/icons/userIcon.svg
rename to src/components/pages/Stream/Sidebar/icons/userIcon.svg
diff --git a/src/components/sidebar/icons/usersIcon.svg b/src/components/pages/Stream/Sidebar/icons/usersIcon.svg
similarity index 100%
rename from src/components/sidebar/icons/usersIcon.svg
rename to src/components/pages/Stream/Sidebar/icons/usersIcon.svg
diff --git a/src/components/sidebar/openToolbarBackIcon.svg b/src/components/pages/Stream/Sidebar/openToolbarBackIcon.svg
similarity index 71%
rename from src/components/sidebar/openToolbarBackIcon.svg
rename to src/components/pages/Stream/Sidebar/openToolbarBackIcon.svg
index ee6d202..3fe80e4 100644
--- a/src/components/sidebar/openToolbarBackIcon.svg
+++ b/src/components/pages/Stream/Sidebar/openToolbarBackIcon.svg
@@ -1,7 +1,7 @@
 <svg width="26" height="130" viewBox="0 0 26 130" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1 0.5H0.5V1V129V129.5H1H4.69231H4.96719L5.11447 129.268L23.8655 99.7209C24.9331 98.0386 25.5 96.0872 25.5 94.0947V35.9053C25.5 33.9128 24.9331 31.9614 23.8655 30.2791L5.11447 0.732088L4.96719 0.5H4.69231H1Z" stroke="#4F4F4F"/>
-<path d="M0 0H3.69231L22.4805 30.0683C23.4735 31.6574 24 33.4935 24 35.3674V94.6326C24 96.5064 23.4735 98.3426 22.4805 99.9317L3.69231 130H0V0Z" fill="#333333"/>
-<path d="M1 1H4.69231L23.4433 30.547C24.4601 32.1492 25 34.0076 25 35.9053V94.0947C25 95.9924 24.4601 97.8508 23.4433 99.453L4.69231 129H1V1Z" fill="#333333"/>
-<rect x="1" width="4" height="2" fill="#333333"/>
-<rect x="1" y="128" width="4" height="2" fill="#333333"/>
+<path d="M1 0.5H0.5V1V129V129.5H1H4.69231H4.96719L5.11447 129.268L23.8655 99.7209C24.9331 98.0386 25.5 96.0872 25.5 94.0947V35.9053C25.5 33.9128 24.9331 31.9614 23.8655 30.2791L5.11447 0.732088L4.96719 0.5H4.69231H1Z" stroke="#1C1D21"/>
+<path d="M0 0H3.69231L22.4805 30.0683C23.4735 31.6574 24 33.4935 24 35.3674V94.6326C24 96.5064 23.4735 98.3426 22.4805 99.9317L3.69231 130H0V0Z" fill="#1C1D21"/>
+<path d="M1 1H4.69231L23.4433 30.547C24.4601 32.1492 25 34.0076 25 35.9053V94.0947C25 95.9924 24.4601 97.8508 23.4433 99.453L4.69231 129H1V1Z" fill="#1C1D21"/>
+<rect x="1" width="4" height="2" fill="#1C1D21"/>
+<rect x="1" y="128" width="4" height="2" fill="#1C1D21"/>
 </svg>
diff --git a/src/components/sidebar/openToolbarBorderHoverIcon.svg b/src/components/pages/Stream/Sidebar/openToolbarBorderHoverIcon.svg
similarity index 100%
rename from src/components/sidebar/openToolbarBorderHoverIcon.svg
rename to src/components/pages/Stream/Sidebar/openToolbarBorderHoverIcon.svg
diff --git a/src/components/sidebar/openToolbarBorderIcon.svg b/src/components/pages/Stream/Sidebar/openToolbarBorderIcon.svg
similarity index 100%
rename from src/components/sidebar/openToolbarBorderIcon.svg
rename to src/components/pages/Stream/Sidebar/openToolbarBorderIcon.svg
diff --git a/src/components/sidebar/openToolbarIcon.svg b/src/components/pages/Stream/Sidebar/openToolbarIcon.svg
similarity index 100%
rename from src/components/sidebar/openToolbarIcon.svg
rename to src/components/pages/Stream/Sidebar/openToolbarIcon.svg
diff --git a/src/components/sidebar/pointerIcon.svg b/src/components/pages/Stream/Sidebar/pointerIcon.svg
similarity index 100%
rename from src/components/sidebar/pointerIcon.svg
rename to src/components/pages/Stream/Sidebar/pointerIcon.svg
diff --git a/src/components/pages/Stream/User/User.css b/src/components/pages/Stream/User/User.css
new file mode 100644
index 0000000..5bf1892
--- /dev/null
+++ b/src/components/pages/Stream/User/User.css
@@ -0,0 +1,78 @@
+.user-container {
+  user-select: none;
+  cursor: pointer;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.user {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.user-name {
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 140%;
+  color: #c5c7ce;
+  white-space: nowrap;
+}
+
+.icon-container {
+  align-items: center;
+  display: flex;
+  gap: 3px;
+  flex-direction: column;
+}
+
+.you-caption {
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 130%;
+  /* identical to box height, or 16px */
+
+  /* Button_3 */
+
+  color: #73788c;
+}
+
+.user-wrapper {
+  position: relative;
+}
+
+.user-wrapper:nth-child(1) {
+  margin-top: 10px;
+}
+
+.user-button-container {
+  display: flex;
+  gap: 8px;
+  padding: 8px;
+}
+
+.icon-container {
+  cursor: pointer;
+  padding: 8px;
+}
+
+.control-circle {
+  width: 8px;
+  height: 8px;
+  background-color: #798fff;
+  border-radius: 50%;
+  margin-bottom: 5px;
+}
+
+.user-control-caption {
+  display: flex;
+  gap: 4px;
+  font-weight: 400;
+  font-size: 10px;
+  line-height: 130%;
+  align-items: center;
+  color: #798fff;
+}
diff --git a/src/components/pages/Stream/User/User.tsx b/src/components/pages/Stream/User/User.tsx
new file mode 100644
index 0000000..216ff9a
--- /dev/null
+++ b/src/components/pages/Stream/User/User.tsx
@@ -0,0 +1,155 @@
+import "./User.css";
+
+import { AnimatePresence, motion } from "framer-motion";
+import { useState, useEffect } from "react";
+
+import userPic from "images/icons/Person.svg";
+import chevronDown from "images/icons/ChevronDown.svg";
+import control from "images/icons/control.svg";
+import controlOff from "images/icons/HandOff.svg";
+import microOn from "images/icons/MicroOn.svg";
+import microOff from "images/icons/MicroOff.svg";
+
+import {
+  popupAnimation,
+  userMenuAnimation,
+  animationButton,
+  transition,
+  iconAnimation,
+} from "utils/animationProps";
+
+export const User: React.FC<any> = ({
+  isAdmin,
+  isSidebarWide,
+  closeSidebar,
+}) => {
+  const [hover, setHover] = useState(false);
+  const [expand, setExpand] = useState(false);
+  const [mute, setMute] = useState(true);
+  const [isControl, setControl] = useState(false);
+
+  useEffect(() => {
+    setExpand(false);
+  }, [closeSidebar]);
+
+  const expandMenu = () => {
+    if (isSidebarWide) {
+      if (isAdmin) setExpand((prev) => !prev);
+    }
+  };
+
+  return (
+    <>
+      <motion.div
+        variants={userMenuAnimation}
+        animate={expand ? "open" : "closed"}
+        className="user-wrapper"
+      >
+        <div onClick={expandMenu} className="user-container">
+          <div className="user">
+            <motion.div
+              onHoverStart={() => setHover(true)}
+              onHoverEnd={() => setHover(false)}
+              className="icon-container"
+            >
+              <img
+                alt="иконка пользователя"
+                className="user-icon"
+                src={userPic}
+              ></img>
+            </motion.div>
+            <motion.span
+              initial={false}
+              variants={animationButton}
+              animate={isSidebarWide ? "show" : "hidden"}
+              className="user-name"
+            >
+              Пользователь
+            </motion.span>
+          </div>
+          {isSidebarWide && (
+            <AnimatePresence>
+              {!isControl && (
+                <motion.div
+                  variants={popupAnimation}
+                  initial={"hidden"}
+                  animate={"show"}
+                  exit={"hidden"}
+                  className="user-control-caption"
+                >
+                  <div className="control-circle"></div>
+                  <span className="user-control-caption">Управление</span>
+                </motion.div>
+              )}
+            </AnimatePresence>
+          )}
+          {isAdmin && (
+            <motion.div
+              initial={false}
+              variants={animationButton}
+              animate={isSidebarWide ? "show" : "hidden"}
+              className="icon-container"
+            >
+              <motion.img
+                initial={false}
+                transition={transition}
+                variants={iconAnimation}
+                animate={expand ? "open" : "closed"}
+                        src={chevronDown}
+                className="arrow-caption"
+              ></motion.img>
+            </motion.div>
+          )}
+        </div>
+        {expand && (
+          <AnimatePresence>
+            <motion.div
+              variants={popupAnimation}
+              initial={"hidden"}
+              animate={"show"}
+              exit={"hidden"}
+              className="user-button-container"
+            >
+              <div
+                onClick={() => setControl((prev) => !prev)}
+                className="button button-secondary"
+              >
+                <img src={isControl ? control : controlOff}></img>
+                <span>
+                  {isControl ? "Передать управление" : "Вернуть управление"}
+                </span>
+              </div>
+              <div
+                style={{width: "40px", padding: "16px"}}
+                onClick={() => setMute((prev) => !prev)}
+                className="button button-teritary"
+              >
+                <img
+                  alt="иконка звук выкл"
+                  src={mute ? microOn : microOff}
+                  className="mic"
+                ></img>
+              </div>
+            </motion.div>
+          </AnimatePresence>
+        )}
+      </motion.div>
+      <AnimatePresence initial={false}>
+        {!isSidebarWide && hover && (
+          <motion.div
+            variants={animationButton}
+            initial={"hidden"}
+            animate={"show"}
+            exit={"hidden"}
+            className="toolbar-button-description-container toolbar-button-description-user"
+          >
+            <span className="toolbar-button-description-triangle"></span>
+            <span className="toolbar-button-description-rectangle">
+              Пользователь
+            </span>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </>
+  );
+};
diff --git a/src/components/pages/Stream/UserList/UserList.tsx b/src/components/pages/Stream/UserList/UserList.tsx
new file mode 100644
index 0000000..de69e58
--- /dev/null
+++ b/src/components/pages/Stream/UserList/UserList.tsx
@@ -0,0 +1,10 @@
+import { User } from "components/pages/Stream/User/User";
+
+export const UserList: React.FC<any> = ({ isSidebarWide, isAdmin, closeSidebar }) => {
+  return (
+    <div className="toolbar-field-part">
+      <User closeSidebar={closeSidebar} isAdmin={isAdmin} isSidebarWide={isSidebarWide}></User>
+      <div className="toolbar-button-container-border-line"></div>
+    </div>
+  );
+};
diff --git a/src/components/pages/Stream/WideSidebarButton/Menu.svg b/src/components/pages/Stream/WideSidebarButton/Menu.svg
new file mode 100644
index 0000000..e11606a
--- /dev/null
+++ b/src/components/pages/Stream/WideSidebarButton/Menu.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 17L11 12L16 7" stroke="#C5C7CE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7 22L7 12L7 2" stroke="#C5C7CE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/components/pages/Stream/WideSidebarButton/WideSidebarButton.tsx b/src/components/pages/Stream/WideSidebarButton/WideSidebarButton.tsx
new file mode 100644
index 0000000..fd18d42
--- /dev/null
+++ b/src/components/pages/Stream/WideSidebarButton/WideSidebarButton.tsx
@@ -0,0 +1,38 @@
+import wideButton from "./Menu.svg";
+
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import { Button } from "components/shared/Button/Button";
+
+export const WideSidebarButton: React.FC<any> = ({ close, isSidebarWide }) => {
+  const { t } = useTranslation();
+  const [active, setActive] = useState(false);
+  const [button, setButton] = useState({
+    icon: wideButton,
+    inactive: "Скрыть меню",
+    active: "Скрыть меню",
+    type: "fullscreen",
+    noHover: true,
+  });
+
+  const handleClick = () => {
+    close();
+    setActive((prev) => !prev);
+  };
+
+  return (
+    <button
+      tabIndex={-1}
+      onFocus={(e) => e.target.blur()}
+      onClick={handleClick}
+      className="toolbar-button-area"
+    >
+      <Button
+        isSidebarWide={isSidebarWide}
+        button={button}
+        active={active}
+      ></Button>
+    </button>
+  );
+};
diff --git a/src/components/popupConnect/popupConnect.css b/src/components/popupConnect/popupConnect.css
deleted file mode 100644
index 8ea385a..0000000
--- a/src/components/popupConnect/popupConnect.css
+++ /dev/null
@@ -1,63 +0,0 @@
-.popup-connect {
-    width: 100%;
-
-    background: transparent;
-
-    padding: 56px;
-    box-sizing: border-box;
-
-}
-
-.popup-logo {
-    height: 94px;
-    width: 100%;
-    margin-bottom: 32px;
-    object-fit: contain;
-
-}
-
-.popup-button-container {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-}
-
-.line {
-    height: 1px;
-    background-color: #23242A;
-    width: 100%;
-}
-
-
-.button-connect {
-    color: #FFFFFF;
-    font-style: normal;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 150%;
-    height: 48px;
-    background: linear-gradient(180deg, #BC75FF 0%, #798FFF 100%);
-    border-radius: 4px;
-    padding: 12px 24px;
-}
-
-.button-back {
-    padding: 8px 16px;
-    border-radius: 4px;
-
-    font-family: 'Inter';
-    font-style: normal;
-    font-weight: 400;
-    font-size: 12px;
-    line-height: 130%;
-    color: #C5C7CE;
-    background: #1C1D21;
-    border-radius: 4px;
-    height: 32px;
-}
-
-@media screen and (max-width: 640px) {
-    .popup-connect {
-      padding: 16px;
-    }
-  }
\ No newline at end of file
diff --git a/src/components/popupUser/popupUser.css b/src/components/popupUser/popupUser.css
deleted file mode 100644
index 4327071..0000000
--- a/src/components/popupUser/popupUser.css
+++ /dev/null
@@ -1,76 +0,0 @@
-.popup__user {
-  position: relative;
-  width: 494px;
-  background: #262626;
-  border-radius: 32px;
-  padding: 48px;
-  box-sizing: border-box;
-}
-
-.popup__user_back {
-   position: absolute;
-   width: 16px;
-   height: 16px;
-   cursor: pointer;
-}
-
-.popup__user_content {
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-  align-items: center;
-}
-
-.popup__user_picture {
-  background: #219653;
-  width: 198px;
-  height: 198px;
-  border-radius: 172px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-.popup__user_name {
-  font-style: normal;
-  font-weight: 400;
-  font-size: 38px;
-  line-height: 130%;
-  /* or 49px */
-  text-align: center;
-  /* App/White */
-  color: #ffffff;
-  border-bottom: 1px solid #FFFFFF;
-  margin: 0 0 42px;
-  width: 57%;
-}
-
-.popup__button {
-   display: none;
-}
-
-
-@media screen and (max-width: 639px) {
-   .popup__user {
-      width: 100%;
-      border-radius: 0px;
-      height: 100%;
-      padding: 32px 10px 67px;
-      height: 100vh;
-  
-   }
-   .popup__button {
-      display: flex;
-      flex-direction: column;
-      gap: 16px;
-   }
-
-   .popup__user_name {
-      margin: 0 0 54px;
-   } 
-
-   .popup__user_back {
-      display: none;
-   }
-}
\ No newline at end of file
diff --git a/src/components/popupUser/popupUser.tsx b/src/components/popupUser/popupUser.tsx
deleted file mode 100644
index 19b81c4..0000000
--- a/src/components/popupUser/popupUser.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import "../../styles/styles.css";
-import "./popupUser.css";
-import person from "../../images/Person.png";
-import buttonBack from "../../images/backButton.svg";
-
-export const PopupUser: React.FC = ({}) => {
-  return (
-    <div className="popup__user">
-      <img alt="btn-back" className="popup__user_back" src={buttonBack}></img>
-      <div className="popup__user_content">
-        <div className="popup__user_picture">
-          <img alt="avatar" src={person}></img>
-        </div>
-        <p className="popup__user_name">Константин Коренецкий </p>
-        <button className="button">Продолжить</button>
-        <div className="popup__button">
-          <span className="line"></span>
-          <button className="popup__caption">
-            Выбор способа демонстрации{" "}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/src/components/popupUserControl/popupUserControl.tsx b/src/components/popupUserControl/popupUserControl.tsx
deleted file mode 100644
index d8a5851..0000000
--- a/src/components/popupUserControl/popupUserControl.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import "../sidebar/toolbar.css";
-import { useState } from "react";
-import { TUserControl } from "../../utils/types";
-import { MicroButton } from "../ui/MicroButton/MicroButton";
-import iconUser from "../../images/icons/user.svg";
-import { PopupUserControlButton } from "../popupUserControlButton/PopupUserControlButton";
-
-export const PopupUserControl: React.FC<TUserControl> = ({
-  user,
-  isAdmin,
-  sendControlRequest,
-  localUser,
-  handleControl,
-  setNotification,
-  handleReturnControl,
-  setMuted,
-  isMuted,
-}) => {
-  const handleMuteUser = () => {
-    const element = document.getElementById(user.id) as HTMLAudioElement;
-    if (isMuted) {
-      console.log(element);
-      element.volume = 1;
-      setMuted(false);
-    } else {
-      element.volume = 0;
-      setMuted(true);
-    }
-  };
-
-  return (
-    <div className="toolbar-open-add-button-container">
-      <div className="user-icon">
-        <img alt="icon" className="toolbar-icon" src={iconUser}></img>
-      </div>
-      <MicroButton isMuted={isMuted} onClick={handleMuteUser}></MicroButton>
-      <PopupUserControlButton
-        handleControl={handleControl}
-        localUser={localUser}
-        sendControlRequest={sendControlRequest}
-        isAdmin={isAdmin}
-        setNotification={setNotification}
-        user={user}
-        handleReturnControl={handleReturnControl}
-      ></PopupUserControlButton>
-    </div>
-  );
-};
diff --git a/src/components/popupUserControlButton/PopupUserControlButton.tsx b/src/components/popupUserControlButton/PopupUserControlButton.tsx
deleted file mode 100644
index a63f282..0000000
--- a/src/components/popupUserControlButton/PopupUserControlButton.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-import control from "../../images/icons/control.svg";
-import "../sidebar/toolbar.css";
-import { useState } from "react";
-import controlOff from "../../images/icons/control.svg";
-
-export const PopupUserControlButton: React.FC<any> = ({
-  isAdmin,
-  user,
-  sendControlRequest,
-  localUser,
-  handleControl,
-  setNotification,
-  handleReturnControl,
-}) => {
-  const [show, setShow] = useState(false);
-  const isUserAdmin = isAdmin(user);
-
-  function onChangeControl() {
-    handleControl(user.id);
-    setShow(false);
-    setNotification(false);
-  }
-
-  return (
-    <div>
-      {!show ? (
-        <>
-          {" "}
-          {isUserAdmin ? (
-            <>
-              {user.control ? (
-                <button
-                  onClick={() => handleReturnControl()}
-                  className="control-button"
-                >
-                  <img
-                    alt="icon"
-                    src={control}
-                    className="control-button-icon"
-                  ></img>
-                  <span className="constrol-button-title">
-                    Вернуть управление
-                  </span>
-                </button>
-              ) : (
-                <button
-                  onClick={() => setShow((prev) => !prev)}
-                  className="control-button"
-                >
-                  <img
-                    alt="icon"
-                    src={control}
-                    className="control-button-icon"
-                  ></img>
-                  <span className="constrol-button-title">
-                    Передать управление
-                  </span>
-                </button>
-              )}
-            </>
-          ) : (
-            <>
-              {user.admin ? (
-                <>
-                  {!user.control ? (
-                    <button
-                      onClick={() => handleReturnControl()}
-                      className="control-button"
-                    >
-                      <img
-                        alt="icon"
-                        src={control}
-                        className="control-button-icon"
-                      ></img>
-                      <span className="constrol-button-title">
-                        Вернуть управление
-                      </span>
-                    </button>
-                  ) : (
-                    <button
-                      onClick={() => sendControlRequest(localUser)}
-                      className="control-button"
-                    >
-                      <img
-                        alt="icon"
-                        src={control}
-                        className="control-button-icon"
-                      ></img>
-                      <span className="constrol-button-title">
-                        Запросить управление
-                      </span>
-                    </button>
-                  )}
-                </>
-              ) : (
-                <div className="empty__block"></div>
-              )}
-            </>
-          )}
-        </>
-      ) : (
-        <div className="toolbar-confirm-block">
-          {" "}
-          <button
-            onClick={() => setShow((prev) => !prev)}
-            className="toolbar-button no medium"
-          >
-            <div className="toolbar-button-medium-view">
-              <img className="" src={controlOff}></img>
-              <span className="toolbar-button-medium-view-title">Нет</span>
-            </div>
-          </button>
-          <button
-            onClick={onChangeControl}
-            className="toolbar-button yes medium"
-          >
-            <div className="toolbar-button-medium-view">
-              <img className="" src={control}></img>
-              <span className="toolbar-button-medium-view-title">Да</span>
-            </div>
-          </button>
-        </div>
-      )}
-    </div>
-  );
-};
diff --git a/src/components/shared/Button/Button.tsx b/src/components/shared/Button/Button.tsx
new file mode 100644
index 0000000..a6a5dda
--- /dev/null
+++ b/src/components/shared/Button/Button.tsx
@@ -0,0 +1,64 @@
+import "components/pages/Stream/Sidebar/Sidebar.css";
+import { useState } from "react";
+
+import { AnimatePresence, motion } from "framer-motion";
+import { useTranslation } from "react-i18next";
+
+import { animationButton } from "utils/animationProps";
+import { useAppSelector } from "hooks/redux";
+
+export const Button: React.FC<any> = ({ button, active, isSidebarWide }) => {
+  
+  const [hover, setHover] = useState(false);
+  const { currentLang } = useAppSelector((state) => state.languageReducer);
+
+  const typeButton = button.type !== "fullscreen" && button.type !== "language";
+
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <motion.div
+        onHoverStart={() => setHover(true)}
+        onHoverEnd={() => setHover(false)}
+        className={
+          button.type === "exit"
+            ? "toolbar-button_exit toolbar-button"
+            : "toolbar-button"
+        }
+      >
+        {button.type === "language" ? (
+          <span className="language-caption">{currentLang.toUpperCase()}</span>
+        ) : (
+          <img alt="icon" className="toolbar-icon" src={button.icon} />
+        )}
+      </motion.div>
+      <motion.span
+        initial={false}
+        variants={animationButton}
+        animate={isSidebarWide ? "show" : "hidden"}
+        className="toolbar-button-caption"
+      >
+        {active ? t(button.active) : t(button.inactive)}
+      </motion.span>
+      {!button.noHover && (
+        <AnimatePresence initial={false}>
+          {!isSidebarWide && hover && (
+            <motion.div
+              variants={animationButton}
+              initial={"hidden"}
+              animate={"show"}
+              exit={"hidden"}
+              className="toolbar-button-description-container"
+            >
+              <span className="toolbar-button-description-triangle"></span>
+              <span className="toolbar-button-description-rectangle">
+                {active ? t(button.active) : t(button.inactive)}
+              </span>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      )}
+    </>
+  );
+};
diff --git a/src/components/footer/footer.css b/src/components/shared/Footer/footer.css
similarity index 100%
rename from src/components/footer/footer.css
rename to src/components/shared/Footer/footer.css
diff --git a/src/components/footer/footer.tsx b/src/components/shared/Footer/footer.tsx
similarity index 100%
rename from src/components/footer/footer.tsx
rename to src/components/shared/Footer/footer.tsx
diff --git a/src/components/footer/logo.svg b/src/components/shared/Footer/logo.svg
similarity index 100%
rename from src/components/footer/logo.svg
rename to src/components/shared/Footer/logo.svg
diff --git a/src/components/footer/logoIcon.svg b/src/components/shared/Footer/logoIcon.svg
similarity index 100%
rename from src/components/footer/logoIcon.svg
rename to src/components/shared/Footer/logoIcon.svg
diff --git a/src/components/footer/phone.svg b/src/components/shared/Footer/phone.svg
similarity index 100%
rename from src/components/footer/phone.svg
rename to src/components/shared/Footer/phone.svg
diff --git a/src/components/footer/send.svg b/src/components/shared/Footer/send.svg
similarity index 100%
rename from src/components/footer/send.svg
rename to src/components/shared/Footer/send.svg
diff --git a/src/components/header/header.css b/src/components/shared/Header/Header.css
similarity index 100%
rename from src/components/header/header.css
rename to src/components/shared/Header/Header.css
diff --git a/src/components/header/header.tsx b/src/components/shared/Header/Header.tsx
similarity index 94%
rename from src/components/header/header.tsx
rename to src/components/shared/Header/Header.tsx
index 7c5fa6f..f392777 100644
--- a/src/components/header/header.tsx
+++ b/src/components/shared/Header/Header.tsx
@@ -1,11 +1,14 @@
-import React, { CSSProperties, useState } from "react";
+import "./Header.css";
+import "styles/styles.css";
+
 import logo from "./logoIcon.svg";
 import chevron from "./chevronIcon.svg";
-import "./header.css";
-import "../../styles/styles.css";
+
+import React, { CSSProperties, useState } from "react";
 import { useLocation } from "react-router-dom";
-import { useAppSelector, useAppDispatch } from "../../hooks/redux";
-import { languageSlice } from "../../store/reducers/languageSlice";
+
+import { useAppSelector, useAppDispatch } from "hooks/redux";
+import { languageSlice } from "store/reducers/languageSlice";
 
 export type THeader = {
   language: string;
diff --git a/src/components/header/chevronIcon.svg b/src/components/shared/Header/chevronIcon.svg
similarity index 100%
rename from src/components/header/chevronIcon.svg
rename to src/components/shared/Header/chevronIcon.svg
diff --git a/src/components/Navigaton/closeIcon1.svg b/src/components/shared/Header/closeIcon1.svg
similarity index 100%
rename from src/components/Navigaton/closeIcon1.svg
rename to src/components/shared/Header/closeIcon1.svg
diff --git a/src/components/header/logoIcon.svg b/src/components/shared/Header/logoIcon.svg
similarity index 100%
rename from src/components/header/logoIcon.svg
rename to src/components/shared/Header/logoIcon.svg
diff --git a/src/components/sidebar/icons/copyIcon.svg b/src/components/sidebar/icons/copyIcon.svg
deleted file mode 100644
index 4e37371..0000000
--- a/src/components/sidebar/icons/copyIcon.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 8.22609C8 6.99665 9.02335 6 10.2857 6H15.7143C16.9767 6 18 6.99665 18 8.22609V17.7739C18 19.0033 16.9767 20 15.7143 20H10.2857C9.02335 20 8 19.0033 8 17.7739V8.22609Z" stroke="white" stroke-linecap="round"/>
-<path d="M6 16.7739V6.22609C6 4.99665 7.02335 4 8.28571 4H14.7143" stroke="white" stroke-linecap="round"/>
-</svg>
diff --git a/src/components/ui/ControlButton/ControlButton.tsx b/src/components/ui/ControlButton/ControlButton.tsx
deleted file mode 100644
index d75fc23..0000000
--- a/src/components/ui/ControlButton/ControlButton.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { useState } from "react";
-import { Button } from "../button/button";
-import control from "../../../images/icons/control.svg";
-import { THOC } from "../../../utils/types";
-
-
-export const ControlButton: React.FC<any> = ({ onClick, isSidebarWide  }) => {
-  const [active, setActive] = useState(false);
-  const button = {
-    icon: control,
-    active: "request-control-btn",
-    inactive: "request-control-btn-disable",
-    type: "control",
-  };
-
-  function handleClick() {
-    onClick()
-    setActive(prev => !prev)
-  }
-
-  return <div className="toolbar-button-area">
-    <Button isSidebarWide={isSidebarWide} button={button} active={active} onClick={handleClick}></Button>
-  </div>
-};
diff --git a/src/components/ui/FullscreenButton/FullscreenButton.tsx b/src/components/ui/FullscreenButton/FullscreenButton.tsx
deleted file mode 100644
index 67ff5c0..0000000
--- a/src/components/ui/FullscreenButton/FullscreenButton.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { useState, useEffect } from "react";
-import { Button } from "../button/button";
-
-import fullscreen from "../../../images/icons/fullscreen.svg";
-import fullscreenOff from "../../../images/icons/fullscreenOff.svg";
-
-
-export const FullscreenButton: React.FC<any> = ({isSidebarOpen}) => {
-  const [active, setActive] = useState(Boolean(document.fullscreenElement));
-  const [button, setButton] = useState({
-    icon: fullscreen,
-    inactive: "fullscreen-control-btn",
-    active: "fullscreen-control-btn-active",
-    type: "fullscreen",
-  });
-
-
-  const handleClick = () => {
-    setActive(Boolean(document.fullscreenElement))
-    if (!document.fullscreenElement) {
-      document.body.requestFullscreen()
-    } else {
-      document.exitFullscreen()
-
-    }
-  }
-
-  useEffect(() => {
-    setButton({
-      icon: active ? fullscreen : fullscreenOff,
-      inactive: "fullscreen-control-btn",
-      active: "fullscreen-control-btn-active",
-      type: "fullscreen",
-    });
-
-  }, [active])
-
-
-
-  useEffect(() => {
-    const onFullscreenChange = () => {
-      setActive(Boolean(document.fullscreenElement));
-    }
-    document.addEventListener('fullscreenchange', onFullscreenChange);
-    return () => document.removeEventListener('fullscreenchange', onFullscreenChange);
-  }, []);
-
-
-  return (
-    <div className="toolbar-button-area">
-      <Button button={button} active={active} onClick={handleClick}></Button>
-    </div>
-  );
-};
diff --git a/src/components/ui/MicroButton/MicroButton.tsx b/src/components/ui/MicroButton/MicroButton.tsx
deleted file mode 100644
index 460c5d6..0000000
--- a/src/components/ui/MicroButton/MicroButton.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Button } from "../button/button";
-import microOn from "../../../images/icons/MicroOn.svg";
-
-export const MicroButton: React.FC<any> = ({
-  onClick,
-  isMuted,
-  isSidebarWide
-}) => {
-  const button = {
-    icon: microOn,
-    active: "mute-control-btn",
-    inactive: "mute-control-btn-disable",
-    type: "microphone",
-  };
-
-  function handleClick() {
-    onClick();
-  }
-
-  return (
-    <div className="toolbar-button-area">
-      <Button isSidebarWide={isSidebarWide} button={button} active={isMuted} onClick={handleClick}></Button>
-    </div>
-  );
-};
diff --git a/src/components/ui/ShareButton/ShareButton.tsx b/src/components/ui/ShareButton/ShareButton.tsx
deleted file mode 100644
index 47f5b22..0000000
--- a/src/components/ui/ShareButton/ShareButton.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Button } from "../button/button";
-import share from "../../../images/icons/Share.svg";
-
-
-export const ShareButton: React.FC<any> = ({ onClick, isSidebarWide }) => {
-
-  const button = {
-    icon: share,
-    active: "share-contro-btn",
-    inactive: "share-contro-btn",
-    type: "share",
-  };
-
-  function handleClick() {
-    onClick()
-  }
-
-
-
-  return (
-    <>
-      <div className="toolbar-button-area">
-        <Button isSidebarWide={isSidebarWide} button={button} onClick={handleClick}></Button>
-      </div>
-
-    </>
-  );
-};
\ No newline at end of file
diff --git a/src/components/ui/UserButton/UserButton.tsx b/src/components/ui/UserButton/UserButton.tsx
deleted file mode 100644
index 151ef41..0000000
--- a/src/components/ui/UserButton/UserButton.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-import { PopupUserControl } from "../../popupUserControl/popupUserControl";
-import { AnimatePresence, motion } from "framer-motion";
-import { useState, useEffect } from "react";
-import { animationButton } from "../../../utils/animationProps";
-import { TUserButton } from "../../../utils/types";
-import iconUser from "../../../images/icons/user.svg";
-
-const container = {
-  hidden: {
-    opacity: 0,
-    transition: { duration: 0.3, ease: "easeOut" },
-  },
-  show: {
-    opacity: 1,
-    transition: { delay: 0.25, duration: 0.3, ease: "easeIn" },
-  },
-  exit: {
-    opacity: 0,
-    transition: { duration: 0.3, ease: "easeOut" },
-  },
-};
-
-export const UsetButton: React.FC<TUserButton> = ({
-  user,
-  audio,
-  selected,
-  setSelected,
-  isAdmin,
-  localUser,
-  sendControlRequest,
-  handleControl,
-  message,
-  handleReturnControl,
-}) => {
-  const [hover, setHover] = useState(false);
-  const [isMuted, setMuted] = useState(false);
-  const [notification, setNotification] = useState(false);
-
-  const isOwn = localUser.id === user.id;
-  const admin = isAdmin(user);
-  console.log(admin);
-
-  function handleClasses() {
-    if (isOwn) {
-      return "user-button user-button-you";
-    } else if (user.admin) {
-      return "user-button user-button-admin";
-    } else {
-      return "user-button user-button-default";
-    }
-  }
-
-  useEffect(() => {
-    setNotification(true);
-  }, [message]);
-
-  function handleSelect() {
-    if (user.id === localUser.id) {
-      return;
-    } else {
-      setSelected(user.id);
-      setHover(false);
-    }
-  }
-  return (
-    <div className="toolbar-button-area">
-      <audio id={user.id} ref={(ref) => audio(ref, user.id)} autoPlay></audio>
-      <AnimatePresence mode="wait">
-        {selected === user.id && (
-          <motion.div
-            variants={container}
-            initial={"hidden"}
-            animate={"show"}
-            exit={"hidden"}
-          >
-            <PopupUserControl
-              isMuted={isMuted}
-              setMuted={setMuted}
-              setNotification={setNotification}
-              localUser={localUser}
-              sendControlRequest={sendControlRequest}
-              handleReturnControl={handleReturnControl}
-              handleControl={handleControl}
-              isAdmin={isAdmin}
-              user={user}
-            ></PopupUserControl>
-          </motion.div>
-        )}
-      </AnimatePresence>
-      <motion.button
-        onHoverStart={() => setHover(true)}
-        onHoverEnd={() => setHover(false)}
-        onClick={() => handleSelect()}
-        className={handleClasses()}
-      >
-        <img className="toolbar-icon" src={iconUser} />
-      </motion.button>
-      <AnimatePresence>
-        {hover && (
-          <motion.div
-            variants={animationButton}
-            initial={"hidden"}
-            animate={"show"}
-            exit={"hidden"}
-            className="toolbar-button-description-container"
-          >
-            <span className="toolbar-button-description-triangle"></span>
-            <span className="toolbar-button-description-rectangle">
-              {user.id === localUser.id ? (
-                "Вы"
-              ) : (
-                <>{user.admin ? "Администратор" : "user"}</>
-              )}
-            </span>
-          </motion.div>
-        )}
-      </AnimatePresence>
-      {notification && (
-        <>
-          {message === user.id && (
-            <span className="toolbar-notification"></span>
-          )}
-        </>
-      )}
-    </div>
-  );
-};
diff --git a/src/components/ui/WideSidebarButton/Menu.svg b/src/components/ui/WideSidebarButton/Menu.svg
deleted file mode 100644
index 6d0f591..0000000
--- a/src/components/ui/WideSidebarButton/Menu.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M24 25L19 20L24 15" stroke="#C5C7CE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M15 30L15 20L15 10" stroke="#C5C7CE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/src/components/ui/WideSidebarButton/WideSidebarButton.tsx b/src/components/ui/WideSidebarButton/WideSidebarButton.tsx
deleted file mode 100644
index 2f1d93f..0000000
--- a/src/components/ui/WideSidebarButton/WideSidebarButton.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Button } from "../button/button"
-import { useState, useEffect } from "react";
-import wideButton from './Menu.svg'
-
-export const WideSidebarButton: React.FC<any> = ({ close, isSidebarWide }) => {
-
-
-    const [active, setActive] = useState(Boolean(document.fullscreenElement));
-    const [button, setButton] = useState({
-        icon: wideButton,
-        inactive: "fullscreen-control-btn",
-        active: "fullscreen-control-btn-active",
-        type: "fullscreen",
-    });
-
-    return (
-        <div className="toolbar-button-area">
-            <Button isSidebarWide={isSidebarWide} button={button} active={active} onClick={close}></Button>
-            <span style={{whiteSpace: "nowrap"}}>Скрыть меню</span>
-        </div>
-    )
-}
\ No newline at end of file
diff --git a/src/components/ui/button/button.tsx b/src/components/ui/button/button.tsx
deleted file mode 100644
index 85fea36..0000000
--- a/src/components/ui/button/button.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import "../../sidebar/toolbar.css";
-import disabledImg from "../../../images/icons/line.svg";
-import { useState } from "react";
-import { AnimatePresence, motion } from "framer-motion";
-import { animationButton } from "../../../utils/animationProps";
-import { useTranslation } from "react-i18next";
-import { useAppSelector } from "../../../hooks/redux";
-export const Button: React.FC<any> = ({ button, onClick, active, isSidebarWide }) => {
-  const [hover, setHover] = useState(false);
-  const { currentLang } = useAppSelector((state) => state.languageReducer);
-
-  console.log(isSidebarWide)
-
-  const typeButton = button.type !== "fullscreen" && button.type !== "language";
-
-  function handleClick() {
-    setHover(false)
-    onClick();
-  }
-
-  const { t } = useTranslation();
-
-  return (
-    <div>
-      <motion.button
-        tabIndex={-1}
-        onClick={handleClick}
-        onFocus={(e) => e.target.blur()} /// disable default browser focus when key is pressed
-        onHoverStart={() => setHover(true)}
-        onHoverEnd={() => setHover(false)}
-        className={
-          button.type === "exit"
-            ? "toolbar-button_exit toolbar-button"
-            : "toolbar-button"
-        }
-      >
-        {button.type === "language" ? (
-          <span className="language-caption">{currentLang.toUpperCase()}</span>
-        ) : (
-          <img alt="icon" className="toolbar-icon" src={button.icon} />
-        )}
-        {active && typeButton && (
-          <img
-            alt="iconDisabled"
-            className="toolbar-disabled"
-            src={disabledImg}
-          ></img>
-        )}
-      </motion.button>
-      <AnimatePresence>
-        { !isSidebarWide && hover && (
-          <motion.div
-            variants={animationButton}
-            initial={"hidden"}
-            animate={"show"}
-            exit={"hidden"}
-            className="toolbar-button-description-container"
-          >
-            <span className="toolbar-button-description-triangle"></span>
-            <span className="toolbar-button-description-rectangle">
-              {active ? t(button.active) : t(button.inactive)}
-            </span>
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </div>
-  );
-};
diff --git a/src/images/icons/ChevronDown.svg b/src/images/icons/ChevronDown.svg
new file mode 100644
index 0000000..70cc265
--- /dev/null
+++ b/src/images/icons/ChevronDown.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19 9.00002L12 16L5 9.00002" stroke="#C5C7CE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/images/icons/HandOff.svg b/src/images/icons/HandOff.svg
new file mode 100644
index 0000000..d5ce9a9
--- /dev/null
+++ b/src/images/icons/HandOff.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.01988 11.7753V14C7.01988 14 7.01988 13 7.01988 11.7778C7.01988 11.2255 6.57216 10.7778 6.01988 10.7778C5.46759 10.7778 5.01988 11.2255 5.01988 11.7778C5.01988 11.9142 5.01631 12.0806 5.0122 12.2726C4.95417 14.9833 4.78732 22.7778 13.0093 22.7778C15.0414 22.7778 16.3892 22.0624 17.2811 21.0365L8.01988 11.7753ZM18.9991 15.2439C18.9997 15.1794 19 15.1166 19 15.0555V7C19 6.44772 18.5523 6 18 6C17.4477 6 17 6.44772 17 7V12.5C17 12.7308 16.8602 12.8745 16.6861 12.9309L18.9991 15.2439ZM16.0199 12.2647V3.77783C16.0199 3.22555 15.5722 2.77783 15.0199 2.77783C14.4676 2.77783 14.0199 3.22555 14.0199 3.77783V10.2647L16.0199 12.2647ZM13.0199 9.26469V2C13.0199 1.44772 12.5722 1 12.0199 1C11.4676 1 11.0199 1.44772 11.0199 2V7.26469L13.0199 9.26469ZM10.0199 6.26469V3.77783C10.0199 3.22555 9.57216 2.77783 9.01988 2.77783C8.46759 2.77783 8.01988 3.22555 8.01988 3.77783V4.26469L10.0199 6.26469Z" fill="white"/>
+<rect x="4.41418" y="3" width="26.2811" height="2" rx="1" transform="rotate(45 4.41418 3)" fill="#E94444"/>
+</svg>
diff --git a/src/images/icons/MicSidebar.svg b/src/images/icons/MicSidebar.svg
new file mode 100644
index 0000000..517921d
--- /dev/null
+++ b/src/images/icons/MicSidebar.svg
@@ -0,0 +1,5 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="40" height="40" rx="4" fill="#2E3038"/>
+<path d="M18.6 10.5H21.4C22.2837 10.5 23 11.2163 23 12.1V20.4C23 21.2837 22.2837 22 21.4 22H18.6C17.7163 22 17 21.2837 17 20.4V12.1C17 11.2163 17.7163 10.5 18.6 10.5Z" fill="#C5C7CE"/>
+<path d="M18 24C16.3431 24 15 22.6569 15 21V20C15 19.4477 14.5523 19 14 19C13.4477 19 13 19.4477 13 20V21C13 23.7614 15.2386 26 18 26H19V27.9998H17.6C17.0477 27.9998 16.6 28.4475 16.6 28.9998C16.6 29.5521 17.0477 29.9998 17.6 29.9998H22.4C22.9523 29.9998 23.4 29.5521 23.4 28.9998C23.4 28.4475 22.9523 27.9998 22.4 27.9998H21V26H22C24.7614 26 27 23.7614 27 21V20C27 19.4477 26.5523 19 26 19C25.4477 19 25 19.4477 25 20V21C25 22.6569 23.6569 24 22 24H18Z" fill="#C5C7CE"/>
+</svg>
diff --git a/src/images/icons/MicroOff.svg b/src/images/icons/MicroOff.svg
new file mode 100644
index 0000000..e46b36e
--- /dev/null
+++ b/src/images/icons/MicroOff.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.05246 12.8079C9.19858 13.3638 9.63624 13.8014 10.1921 13.9475L9.05246 12.8079ZM12.2446 16H10C8.34315 16 7 14.6569 7 13V12C7 11.4477 6.55228 11 6 11C5.44772 11 5 11.4477 5 12V13C5 15.7614 7.23858 18 10 18H11V19.9998H9.6C9.04772 19.9998 8.6 20.4475 8.6 20.9998C8.6 21.5521 9.04772 21.9998 9.6 21.9998H14.4C14.9523 21.9998 15.4 21.5521 15.4 20.9998C15.4 20.4475 14.9523 19.9998 14.4 19.9998H13V18H14C14.0801 18 14.1598 17.9981 14.239 17.9944L12.2446 16ZM18.6347 14.8796L16.9909 13.2357C16.9969 13.158 17 13.0793 17 13V12C17 11.4477 17.4477 11 18 11C18.5523 11 19 11.4477 19 12V13C19 13.6648 18.8703 14.2993 18.6347 14.8796ZM15 11.2449L9 5.24487V4.1C9 3.21634 9.71634 2.5 10.6 2.5H13.4C14.2837 2.5 15 3.21634 15 4.1V11.2449Z" fill="white"/>
+<rect x="3.41418" y="2" width="26.2811" height="2" rx="1" transform="rotate(45 3.41418 2)" fill="#E94444"/>
+</svg>
diff --git a/src/images/icons/MicroOn.svg b/src/images/icons/MicroOn.svg
index 9aa1b96..aa4ce4b 100644
--- a/src/images/icons/MicroOn.svg
+++ b/src/images/icons/MicroOn.svg
@@ -1,3 +1,4 @@
-<svg width="14" height="19" viewBox="0 0 14 19" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 11C13 13.2091 11.2091 15 9 15H7M1 11C1 13.2091 2.79086 15 5 15H7M7 15V17.9998M7 17.9998H4.6M7 17.9998H9.4M5.1 12.5H8.9C9.78366 12.5 10.5 11.7837 10.5 10.9V2.6C10.5 1.71634 9.78366 1 8.9 1H5.1C4.21634 1 3.5 1.71634 3.5 2.6V10.9C3.5 11.7837 4.21634 12.5 5.1 12.5Z" stroke="white" stroke-linecap="round"/>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.6 2.5H13.4C14.2837 2.5 15 3.21634 15 4.1V12.4C15 13.2837 14.2837 14 13.4 14H10.6C9.71634 14 9 13.2837 9 12.4V4.1C9 3.21634 9.71634 2.5 10.6 2.5Z" fill="white"/>
+<path d="M10 16C8.34315 16 7 14.6569 7 13V12C7 11.4477 6.55228 11 6 11C5.44772 11 5 11.4477 5 12V13C5 15.7614 7.23858 18 10 18H11V19.9998H9.6C9.04772 19.9998 8.6 20.4475 8.6 20.9998C8.6 21.5521 9.04772 21.9998 9.6 21.9998H14.4C14.9523 21.9998 15.4 21.5521 15.4 20.9998C15.4 20.4475 14.9523 19.9998 14.4 19.9998H13V18H14C16.7614 18 19 15.7614 19 13V12C19 11.4477 18.5523 11 18 11C17.4477 11 17 11.4477 17 12V13C17 14.6569 15.6569 16 14 16H10Z" fill="white"/>
 </svg>
diff --git a/src/images/icons/Person.svg b/src/images/icons/Person.svg
new file mode 100644
index 0000000..f85e43e
--- /dev/null
+++ b/src/images/icons/Person.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.6114 6.60385C16.6114 9.14648 14.5502 11.8077 12.0076 11.8077C9.46496 11.8077 7.40376 9.14648 7.40376 6.60385C7.40376 4.06121 9.46496 2 12.0076 2C14.5502 2 16.6114 4.06121 16.6114 6.60385Z" fill="#C5C7CE"/>
+<path d="M12.0077 21.0002C16.5682 21.0002 17.9956 21.0238 19.2145 20.2667C19.7848 19.9124 20.0659 19.26 20.0079 18.5842C19.9287 17.6613 19.6062 16.7395 19.2779 16.0084C18.8468 15.0484 18.6695 14.6039 17.9965 13.9271C16.3197 12.2408 14.3857 14.6252 12.0077 14.6252C9.62965 14.6252 7.69569 12.2408 6.01888 13.9271C5.34585 14.6039 5.1686 15.0484 4.7375 16.0084C4.40916 16.7395 4.08669 17.6613 4.00747 18.5842C3.94947 19.26 4.23057 19.9124 4.80091 20.2667C6.01975 21.0238 7.44722 21.0002 12.0077 21.0002Z" fill="#C5C7CE"/>
+</svg>
diff --git a/src/images/icons/Share.svg b/src/images/icons/Share.svg
index 6294683..f7a672a 100644
--- a/src/images/icons/Share.svg
+++ b/src/images/icons/Share.svg
@@ -1,3 +1,6 @@
-<svg width="14" height="18" viewBox="0 0 14 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 1L7.40545 0.59455C7.18153 0.370626 6.81847 0.370626 6.59455 0.59455L7 1ZM6.42661 10.5C6.42661 10.8167 6.68332 11.0734 7 11.0734C7.31668 11.0734 7.57339 10.8167 7.57339 10.5L6.42661 10.5ZM8.59455 3.40545C8.81847 3.62937 9.18153 3.62937 9.40545 3.40545C9.62937 3.18153 9.62937 2.81847 9.40545 2.59455L8.59455 3.40545ZM4.59455 2.59455C4.37063 2.81847 4.37063 3.18153 4.59455 3.40545C4.81847 3.62937 5.18153 3.62937 5.40545 3.40545L4.59455 2.59455ZM4 6.07339C4.31668 6.07339 4.57339 5.81668 4.57339 5.5C4.57339 5.18332 4.31668 4.92661 4 4.92661L4 6.07339ZM10 4.92661C9.68332 4.92661 9.42661 5.18332 9.42661 5.5C9.42661 5.81668 9.68332 6.07339 10 6.07339L10 4.92661ZM12.4266 7.5L12.4266 15L13.5734 15L13.5734 7.5L12.4266 7.5ZM11 16.4266L3 16.4266L3 17.5734L11 17.5734L11 16.4266ZM1.57339 15L1.57339 7.5L0.426606 7.5L0.426606 15L1.57339 15ZM6.42661 1L6.42661 10.5L7.57339 10.5L7.57339 1L6.42661 1ZM6.59455 1.40545L8.59455 3.40545L9.40545 2.59455L7.40545 0.59455L6.59455 1.40545ZM6.59455 0.59455L4.59455 2.59455L5.40545 3.40545L7.40545 1.40545L6.59455 0.59455ZM3 6.07339L4 6.07339L4 4.92661L3 4.92661L3 6.07339ZM11 4.92661L10 4.92661L10 6.07339L11 6.07339L11 4.92661ZM1.57339 7.5C1.57339 6.71211 2.21211 6.07339 3 6.07339L3 4.92661C1.57875 4.92661 0.426606 6.07875 0.426606 7.5L1.57339 7.5ZM3 16.4266C2.21211 16.4266 1.57339 15.7879 1.57339 15L0.426606 15C0.426606 16.4212 1.57875 17.5734 3 17.5734L3 16.4266ZM12.4266 15C12.4266 15.7879 11.7879 16.4266 11 16.4266L11 17.5734C12.4212 17.5734 13.5734 16.4212 13.5734 15L12.4266 15ZM13.5734 7.5C13.5734 6.07875 12.4212 4.92661 11 4.92661L11 6.07339C11.7879 6.07339 12.4266 6.71211 12.4266 7.5L13.5734 7.5Z" fill="white"/>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 18L5 12L16 6" stroke="#C5C7CE" stroke-width="2"/>
+<circle cx="5" cy="12" r="3" fill="#C5C7CE"/>
+<circle cx="16" cy="6" r="3" fill="#C5C7CE"/>
+<circle cx="16" cy="18" r="3" fill="#C5C7CE"/>
 </svg>
diff --git a/src/images/icons/control.svg b/src/images/icons/control.svg
index 39d72ce..f3d8722 100644
--- a/src/images/icons/control.svg
+++ b/src/images/icons/control.svg
@@ -1,3 +1,3 @@
-<svg width="15" height="20" viewBox="0 0 15 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6.57143 3.8125C6.57143 3.4375 6.32381 2.6875 5.33333 2.6875C4.34286 2.6875 4.09524 3.4375 4.09524 3.8125V11.6875C4.09524 11.6875 3.47619 11.125 3.47619 10C3.47619 9.625 3.22857 8.875 2.2381 8.875C1.24762 8.875 1 9.625 1 10C1 11.6875 1 19 8.42857 19C12.8857 19 14 15.25 14 13.375V5.5C14 5.125 13.7524 4.375 12.7619 4.375C11.7714 4.375 11.5238 5.125 11.5238 5.5M6.57143 3.8125V2.125C6.57143 1.75 6.81905 1 7.80952 1C8.8 1 9.04762 1.75 9.04762 2.125V3.25M6.57143 3.8125V10.5625M9.04762 3.25C9.04762 2.875 9.29524 2.125 10.2857 2.125C11.2762 2.125 11.5238 2.875 11.5238 3.25V5.5M9.04762 3.25V10M11.5238 5.5V11.125" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.01988 11.7778C5.01988 13.8403 4.20507 22.7778 13.0093 22.7778C18.5289 22.7778 19 17.4999 19 15.0555V7C19 6.44772 18.5523 6 18 6C17.4477 6 17 6.44772 17 7V12.5C17 13.1111 16.0199 13.1111 16.0199 12.5V3.77783C16.0199 3.22555 15.5722 2.77783 15.0199 2.77783C14.4676 2.77783 14.0199 3.22555 14.0199 3.77783V11.7778C14.0199 12.3889 13.0199 12.3889 13.0199 11.7778V2C13.0199 1.44772 12.5722 1 12.0199 1C11.4676 1 11.0199 1.44772 11.0199 2V11.7778C11.0199 12.3889 10.0199 12.3889 10.0199 11.7778V3.77783C10.0199 3.22555 9.57216 2.77783 9.01988 2.77783C8.46759 2.77783 8.01988 3.22555 8.01988 3.77783V14C7.01988 14 7.01988 13 7.01988 11.7778C7.01988 11.2255 6.57216 10.7778 6.01988 10.7778C5.46759 10.7778 5.01988 11.2255 5.01988 11.7778Z" fill="white"/>
 </svg>
diff --git a/src/socket/actions.js b/src/socket/actions.js
deleted file mode 100644
index 141d380..0000000
--- a/src/socket/actions.js
+++ /dev/null
@@ -1,13 +0,0 @@
-export const ACTIONS = {
-  JOIN: 'join',
-  LEAVE: 'leave',
-  ADD_PEER: 'add-peer',
-  REMOVE_PEER: 'remove-peer',
-  RELAY_ICE: 'relay-ice',
-  RELAY_SDP: 'relay-sdp',
-  SESSION_DESCRIPTION: 'session-description',
-  ICE_CANDIDATE: 'ice-candidate',
-  MUTE: 'mute',
-  UNMUTE: 'unmute',
-  MUTE_INFO: 'mute-info',
-};
diff --git a/src/socket/index.js b/src/socket/index.js
deleted file mode 100644
index 0eef359..0000000
--- a/src/socket/index.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import { io } from "socket.io-client";
-
-const socketInit = () => {
-  const options = {
-    "force new connection": true,
-    reconnectionAttempts: "Infinity",
-    timeout: 10000,
-    transports: ["websocket"],
-  };
-  return io('localhost:5500', options);
-};
-
-export default socketInit;
diff --git a/src/socket/socketExample.js b/src/socket/socketExample.js
deleted file mode 100644
index a727e49..0000000
--- a/src/socket/socketExample.js
+++ /dev/null
@@ -1,40 +0,0 @@
-useEffect(() => {
-   let socket = new WebSocket('wss://stream.graff.tech:13001')
-   setSocket(socket)
-   socket.onopen = () => {
-     socket.send('{"message" : "NEW_USER"}')
-     setConnected(true)
-   }
-
-   socket.onmessage = (e) => {
-     const response = JSON.parse(e.data)
-     console.log(response, 'res')
-     switch (response.message) {
-       case 'NEW_USER':
-         console.log('user');
-         break
-
-       case 'SESS_CREATION':
-         setData({ id: response.id, port: response.port })
-         history.push(`/stream/${response.id}`)
-         break
-
-       case 'SESS_CONNECT':
-         setData({ id: response.id, port: response.content })
-         break
-
-       case 'SESS_NOT_EXISTS':
-         break
-     }
-   }
-
-   socket.onclose = () => {
-     socket.close()
-     setConnected(false)
-   };
-
-   socket.onerror = () => {
-     console.log("WS Error");
-     setConnected(false)
-   };
- }, [])
diff --git a/src/styles/styles.css b/src/styles/styles.css
index 39b6d20..010d775 100644
--- a/src/styles/styles.css
+++ b/src/styles/styles.css
@@ -1,512 +1,59 @@
-.main-block__container {
-  margin: 0 auto 80px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 56px;
-}
-
-.main-block__caption_l {
-  font-style: normal;
-  font-weight: 400;
-  font-size: 18px;
-  line-height: 140%;
-  margin: 0;
-  color: #ebebeb;
-}
-
-.main-block__subblock-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.main-block_subblock {
-  width: 480px;
-  display: flex;
-  margin: 0 auto;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 40px;
-  font-style: normal;
-  font-weight: 400;
-  font-size: 18px;
-  line-height: 140%;
-  /* or 25px */
-
-  /* Landing/White */
-
-  color: #ebebeb;
-}
-
-.main-block__title {
-  font-style: normal;
-  font-weight: 400;
-  font-size: 64px;
-  line-height: 100%;
-  color: #ebebeb;
-  margin: 0;
-}
-
-.main-block__title_small {
-  font-style: normal;
-  font-weight: 400;
-  line-height: 100%;
-  color: #ebebeb;
-  margin: 0;
-  font-size: 40px;
-}
-
-.main-block__title_gardient {
-  font-style: normal;
-  font-weight: 400;
-  font-size: 64px;
-  line-height: 100%;
-  margin: 0;
-  background-image: linear-gradient(56.75deg, #d375ff 19.74%, #798fff 82.32%);
-  background-size: 100%;
-  background-repeat: repeat;
-  background-color: transparent;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
-
-.main-block__title_gardient_small {
-  font-style: normal;
-  font-weight: 400;
-  line-height: 100%;
-  margin: 0;
-  background-image: linear-gradient(56.75deg, #d375ff 19.74%, #798fff 82.32%);
-  background-size: 100%;
-  background-repeat: repeat;
-  background-color: transparent;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  font-size: 40px;
-}
-
-.main-block__caption {
-  font-style: normal;
-  font-weight: 400;
-  font-size: 18px;
-  line-height: 140%;
-  margin: 20px 0 0 0;
-  color: #ebebeb;
-}
-
-.main-block__caption_color {
-  margin-top: 20px;
-  margin-bottom: 0px;
-  font-style: normal;
-  font-weight: 500;
-  font-size: 14px;
-  line-height: 150%;
-  color: #ebebeb;
-  letter-spacing: 0.02em;
-  text-transform: uppercase;
-  color: #d375ff;
-  width: 416px;
-}
-
-.main-block__button {
-  font-family: "GilroyWebRegular";
-  font-style: normal;
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 125%;
-
-  font-style: normal;
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 125%;
+.button {
+  cursor: pointer;
+  user-select: none;
+  width: 100%;
+  box-sizing: border-box;
+  height: 48px;
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  padding: 14px 18px 12px 24px;
-  gap: 8px;
-  box-sizing: border-box;
-  width: 164px;
-  height: 40px;
-
-  border: 1px solid #454545;
-  border-radius: 32px;
-  background-color: transparent;
-  color: #ebebeb;
-  cursor: pointer;
-}
-
-.main-block__icon {
-  opacity: 1;
-  width: 8px;
-  height: 8px;
-  margin: 0;
-  opacity: 0;
-}
-
-.main-block__icon_container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 16px;
-  height: 16px;
-  border-radius: 100%;
-  border: 1px solid #ffffff;
-}
-
-.main-block__button:hover>div>img {
-  transition: opacity ease-out 0.2s;
-  opacity: 1;
-}
-
-.main-block__button:hover {
-  border: 1px solid #ffffff;
-  transition: border ease-out 0.2s;
-}
-
-.link {
-  text-decoration: none;
-}
-
-@media screen and (min-width: 1600px) {
-  .main-block__title {
-    font-size: 76px;
-  }
-
-  .main-block__title_gardient {
-    font-size: 76px;
-  }
-
-  .main-block__caption_color {
-    width: 87%;
-    font-size: 17px;
-    margin-top: 24px;
-  }
-
-  .main-block__caption_l {
-    font-size: 22px;
-  }
-
-  .main-block__caption {
-    font-size: 22px;
-  }
-
-  .main-block__title_small {
-    font-size: 48px;
-  }
-
-  .main-block__title_gardient_small {
-    font-size: 48px;
-  }
-
-  .main-block_subblock {
-    width: 576px;
-    font-size: 22px;
-  }
-
-  .main-block__button {
-    width: 196px;
-    height: 60px;
-    padding: 14px 18px 12px 24px;
-    gap: 9.6px;
-    font-weight: 400;
-    font-size: 20px;
-    line-height: 125%;
-  }
-
-  .main-block__icon_container {
-    width: 19px;
-    height: 19px;
-  }
-
-  .main-block__icon {
-    width: 9.5;
-    height: 9.5;
-  }
-}
-
-.popup__container {
-  width: 100%;
-
-  background: transparent;
-
-  padding: 56px;
-  box-sizing: border-box;
-}
-
-.logo__popup {
-  height: 94px;
-  width: 100%;
-  margin-bottom: 48px;
-  object-fit: cover;
-}
-
-.popup {
-  font-style: normal;
-  font-weight: 600;
-  font-size: 18px;
-  line-height: 22px;
-  color: #ffffff;
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-}
-
-.button__container {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.button__title {
-  margin: 0;
-}
-
-.button {
-  width: 100%;
-  display: flex;
-  padding-top: 20px;
-  padding-bottom: 20px;
-  justify-content: center;
-  background-color: #567ece;
-  border-radius: 12px;
-  outline: none;
-  border: none;
-  color: #ffffff;
-  font-style: normal;
-  font-weight: 600;
-  font-size: 16px;
-  line-height: 20px;
-  cursor: pointer;
-  box-sizing: border-box;
-}
-
-.button:hover {
-  background: #6a92e2;
-  transition: 0.3s ease;
-}
-
-.button:disabled {
-  cursor: default;
-  background: #595959;
-  transition: 0.3s ease;
-}
-
-.button:disabled {
-  background-color: #404040;
-  transition: 0.3 ease;
-}
-
-.button__disabled:hover {
-  background: #595959;
-  transition: 0.3 ease;
-
-}
-
-.button__disabled {
-  background-color: #404040;
-  transition: 0.3 ease;
-}
-
-.popup-line {
-  height: 1px;
-  background-color: #404040;
-  width: 280px;
-  margin: 0 auto;
-  margin-top: 8px;
-}
-
-.popup__caption {
-  margin: 0 auto;
+  gap: 4px;
+  font-family: "Inter";
   font-style: normal;
   font-weight: 400;
-  font-size: 18px;
-  cursor: pointer;
-  padding: 10px 8px;
-  border: none;
-  background-color: transparent;
-  line-height: 20px;
-  color: #ffffff;
+  font-size: 15px;
+  line-height: 150%;
+  padding: 12px 24px;
 }
 
-.popup__caption:hover {
-  opacity: 0.8;
-  transition: 0.3s ease;
+.button-primary {
+  color: #f2f2f2;
+  transition: background 0.2s ease-in-out;
+  background: linear-gradient(180deg, #bc75ff 0%, #798fff 100%);
+  border-radius: 4px;
 }
 
-@media screen and (max-width: 1279px) {
-  .main-block__container {
-    gap: 44px;
-  }
+.button-primary:hover {
+  transition: background 0.2 ease-in-out;
+  background: linear-gradient(180deg, #798fff -41.07%, #d375ff 100%);
 }
 
-@media screen and (max-width: 1024px) {
-  .main-block__container {
-    margin: 30px 12px 60px;
-    gap: 40px;
-  }
-
-  .main-block__caption {
-    font-size: 2.8vw;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 140%;
-  }
-
-  .main-block__caption_color {
-    font-size: 2.1vw;
-    width: fit-content;
-  }
-
-  .main-block__caption_l {
-    font-size: 2.5vw;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 140%;
-  }
-
-  .main-block__title {
-    font-size: 10.6vw;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 100%;
-  }
-
-  .main-block__title_gardient {
-    font-size: 10.6vw;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 100%;
-  }
-
-  .main-block_subblock {
-    font-weight: 400;
-    line-height: 140%;
-    font-size: 2.8vw;
-  }
-
-  .main-block__title_small {
-    font-style: normal;
-    font-weight: 400;
-    line-height: 100%;
-    font-size: 6.25vw;
-  }
-
-  .main-block__title_gardient_small {
-    font-size: 6.25vw;
-  }
-
-  .main-block__subblock-container {
-    display: block;
-    margin: 0 0;
-  }
-
-  .main-block_subblock {
-    width: 80%;
-    margin: 0;
-    font-size: 3vw;
-  }
+.button-secondary {
+  color: #c5c7ce;
+  transition: background 0.2s ease-in-out;
+  border: 10px solid;
+  border-image-slice: 1;
+  border-width: 1px;
+  border-image-source: linear-gradient(180deg, #bc75ff 0%, #798fff 100%);
+  background: #23242a;
 }
 
-@media screen and (max-width: 639px) {
-  .popup__container {
-    width: 100%;
-    border-radius: 0px;
-    height: 100%;
-    padding: 32px 10px 67px;
-    height: 100vh;
-  }
+.button-secondary:hover {
+  background: #2e3038;
+  color: #f2f2f2;
+  transition: background 0.2s ease-in-out;
+  border-image-source: linear-gradient(180deg, #798fff -41.07%, #d375ff 100%);
+}
 
+.button-teritary {
+  transition: background 0.2s ease-in-out;
+  color: #c5c7ce;
+  background: #2e3038;
+}
 
-
-  .line {
-    width: 80%;
-  }
-
-  .popup {
-    font-size: 16px;
-  }
-
-  .popup__caption {
-    font-size: 16px;
-  }
-
-  .main-block__container {
-    margin: 42px 0px 40px;
-    gap: 30px;
-    width: 100%;
-  }
-
-  .button {
-    font-size: 14px;
-    padding-top: 14px;
-    padding-bottom: 14px;
-  }
-
-  .main-block_subblock {
-    gap: 30px;
-    width: 100%;
-  }
-
-  .main-block__caption_color {
-    width: 100%;
-    margin-top: 10px;
-    font-size: 3.6vw;
-  }
-
-  .main-block__caption {
-    margin: 10px 0 0 0;
-  }
-
-  .main-block__caption_l {
-    font-size: 4.5vw;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 140%;
-  }
-
-  .main-block__button {
-    font-style: normal;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 125%;
-  }
-
-  .main-block__caption {
-    font-size: 4.5vw;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 140%;
-  }
-
-  .main-block__title_gardient {
-    font-size: 13.3vw;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 100%;
-  }
-
-  .main-block__title_gardient_small {
-    font-size: 9.25vw;
-  }
-
-  .main-block__title {
-    font-size: 13.3vw;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 100%;
-  }
-
-  .main-block__title_small {
-    font-style: normal;
-    font-weight: 400;
-    line-height: 100%;
-    font-size: 9.25vw;
-  }
-
-  .main-block_subblock {
-    font-weight: 400;
-    line-height: 140%;
-    font-size: 4.5vw;
-  }
-}
\ No newline at end of file
+.button-teritary:hover {
+  transition: background 0.2s ease-in-out;
+  color: #f2f2f2;
+  background: #73788c;
+}
diff --git a/src/utils/animationProps.js b/src/utils/animationProps.js
index a5a215c..886612e 100644
--- a/src/utils/animationProps.js
+++ b/src/utils/animationProps.js
@@ -1,43 +1,62 @@
 export const animationButton = {
-    hidden: {
-        opacity: 0,
-        transition: {duration: 0.1, ease: 'easeOut' }
-      },
-      show: {
-        opacity: 1,
-        transition: { duration: 0.1, ease: 'easeIn' },
-      },
-      exit: {
-        opacity: 0.7,
-        transition: {duration: 0.1, ease: 'easeOut' }
-      }
-    
-}
+  hidden: {
+    opacity: 0,
+    transition: { duration: 0.1, ease: "easeOut" },
+  },
+  show: {
+    opacity: 1,
+    transition: { duration: 0.1, ease: "easeIn" },
+  },
+  exit: {
+    opacity: 0.7,
+    transition: { duration: 0.1, ease: "easeOut" },
+  },
+};
 
 export const sidebarVariants = {
-  open: { x: -1, transition: { ease: "easeIn" } },
-  closed: { x: "-61px", transition: { ease: "easeIn" } },
+  open: { x: -1, transition: { ease: "easeIn" }, width: "60px" },
+  closed: { x: "-50px", transition: { ease: "easeIn" }, width: "60px" },
 };
 
 export const wideSidebarVariants = {
-  open: { width: "220px", transition: { ease: "easeIn" } },
-  closed: { x: "-61px", transition: { ease: "easeIn" } },
+  open: { width: "220px", transition: { ease: "easeIn" }, x: -1 },
 };
 
-
-
+export const wideSidebarAdminVariants = {
+  open: { width: "326px", transition: { ease: "easeIn" }, x: -1 },
+};
 
 export const popupAnimation = {
   hidden: {
     opacity: 0,
-    transition: { duration: 0.3, ease: 'easeOut' }
+    transition: { duration: 0.3, ease: "easeOut" },
   },
   show: {
     opacity: 1,
-    transition: { delay: 0.15, duration: 0.2, ease: 'easeIn' },
+    transition: { delay: 0.15, duration: 0.2, ease: "easeIn" },
   },
   exit: {
     opacity: 0,
-    transition: { duration: 0.3, ease: 'easeOut' }
-  }
-}
+    transition: { duration: 0.3, ease: "easeOut" },
+  },
+};
+
+export const userMenuAnimation = {
+  open: {
+    background: "#23242A",
+    transition: { duration: 0.2, ease: "easeOut" },
+  },
+  closed: {
+    background: "transparent",
+    transition: { duration: 0.2, ease: "easeOut" },
+  },
+};
+
+export const transition = { duration: 0.3, ease: "easeOut" };
+
+export const iconAnimation = {
+  open: {
+    transform: "rotate(180deg)",
+  },
+  closed: { transform: "rotate(0deg)" },
+};
diff --git a/tsconfig.json b/tsconfig.json
index e34dfde..289d71c 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,5 +1,7 @@
 {
   "compilerOptions": {
+    "baseUrl": "src",
+    
     "target": "es5",
     "lib": [
       "dom",