diff --git a/src/components/mainScreen/mainScreen.tsx b/src/components/mainScreen/mainScreen.tsx
index 0ff23c1..4e72b22 100644
--- a/src/components/mainScreen/mainScreen.tsx
+++ b/src/components/mainScreen/mainScreen.tsx
@@ -2,12 +2,14 @@ import React, { useContext, useState } from "react";
 import { CSSTransition } from "react-transition-group";
 import { ContextWindowHeight } from "../contextWindowHeight";
 import './mainScreen.css';
+import { MobileAddPart } from "./mobileAddPart/mobileAddPart";
 import { MobileUsersPart } from "./mobileUsersPart/mobileUsersPart";
 import { Toolbar } from "./toolbar/toolbar";
 
 export const MainScreen:React.FC = React.memo(() => {
     const [showToolbar, setShowToolbar] = useState<boolean>(false);
     const [showMobileUsersPart, setShowMobileUsersPart] = useState<boolean>(false);
+    const [showMobileOtherPart, setShowMobileOtherPart] = useState<boolean>(false);
     const windowHeight = useContext(ContextWindowHeight);
 
     function onClickToolbar() {
@@ -15,6 +17,8 @@ export const MainScreen:React.FC = React.memo(() => {
     }
 
     function openMobileUsers() {
+        closeMobileOther();
+
         setShowMobileUsersPart(true);
     }
 
@@ -22,6 +26,16 @@ export const MainScreen:React.FC = React.memo(() => {
         setShowMobileUsersPart(false);
     }
 
+    function openMobileOther() {
+        closeMobileUsers();
+
+        setShowMobileOtherPart(true);
+    }
+
+    function closeMobileOther() {
+        setShowMobileOtherPart(false);
+    }
+
     return <div className="main-screen-container">
         <div className="main-screen-model"></div>
         <CSSTransition
@@ -33,20 +47,39 @@ export const MainScreen:React.FC = React.memo(() => {
                 onClickOpenButton={onClickToolbar}
                 isOpen={showToolbar}
                 onClickMobileUsers={openMobileUsers}
+                isOpenUsersMobilePart={showMobileUsersPart}
+                onClickMobileOther={openMobileOther}
+                isOpenOtherMobilePart={showMobileOtherPart}
             />
         </CSSTransition>
         {
-            windowHeight < 700 || navigator.userAgent.includes('iPhone') ?
-            <CSSTransition
-                in={showMobileUsersPart}
-                timeout={300}
-                classNames='show-mobile-users'
-                unmountOnExit
-            >
-                <MobileUsersPart 
-                    onClickClose={closeMobileUsers}
-                />
-            </CSSTransition>
+            windowHeight < 700?
+            <>
+                <CSSTransition
+                    in={showMobileUsersPart}
+                    timeout={300}
+                    classNames='show-mobile-users'
+                    unmountOnExit
+                >
+                    <MobileAddPart 
+                        onClickClose={closeMobileUsers}
+                        title='Участники демонстрации'
+                        type="users"
+                    />
+                </CSSTransition>
+                <CSSTransition
+                    in={showMobileOtherPart}
+                    timeout={300}
+                    classNames='show-mobile-users'
+                    unmountOnExit
+                >
+                    <MobileAddPart 
+                        onClickClose={closeMobileOther}
+                        title='Дополнительно'
+                        type="other"
+                    />
+                </CSSTransition>
+            </>
             : null
         }
     </div>
diff --git a/src/components/mainScreen/mobileAddPart/addPartItem.tsx b/src/components/mainScreen/mobileAddPart/addPartItem.tsx
new file mode 100644
index 0000000..4e1431c
--- /dev/null
+++ b/src/components/mainScreen/mobileAddPart/addPartItem.tsx
@@ -0,0 +1,49 @@
+import React from "react";
+import { ToolbarButton } from "../toolbar/toolbarButton";
+import { TypeToolbarButtons } from "../toolbar/typeButtons";
+import { BorderLine } from "./borderLine";
+import { CaptionToolbarButtons } from "../toolbar/typeCaptionButtons";
+
+type TProps = {
+    typeUser: TypeToolbarButtons
+    onClickMicro?: () => void
+    onClickControl?: () => void
+    onClickItem?: () => void
+}
+
+export const AddPartItem:React.FC<TProps> = React.memo((props) => {
+    return <div className="user-item" onClick={() => props?.onClickItem ? props?.onClickItem() : null}>
+        <ToolbarButton
+            type={props.typeUser}
+            caption=""
+            isCaption={false}
+            onClick={() => null}            
+        />
+        <div className="user-item-user-info-container">
+            <div className="user-item-user-info">
+                <span className="user-item-user-info-name">{CaptionToolbarButtons[props.typeUser]}</span>
+                {
+                    props.typeUser.includes('user') ?
+                    <div className="user-item-user-info-buttons">
+                        <ToolbarButton
+                            type="micro"
+                            active={true}
+                            caption=''
+                            isCaption={false}
+                            onClick={() => props?.onClickMicro ? props?.onClickMicro() : null}
+                        />
+                        <ToolbarButton
+                            type="control"
+                            active={false}
+                            caption=''
+                            isCaption={false}
+                            onClick={() => props?.onClickControl ? props?.onClickControl() : null }
+                        />
+                    </div>
+                    : null
+                }
+            </div>
+            <BorderLine />
+        </div>
+    </div>
+})
\ No newline at end of file
diff --git a/src/components/mainScreen/mobileAddPart/borderLine.tsx b/src/components/mainScreen/mobileAddPart/borderLine.tsx
new file mode 100644
index 0000000..a10009e
--- /dev/null
+++ b/src/components/mainScreen/mobileAddPart/borderLine.tsx
@@ -0,0 +1,5 @@
+import React from "react";
+
+export const BorderLine:React.FC = React.memo(() => {
+    return <div className="border-line"></div>
+})
\ No newline at end of file
diff --git a/src/components/mainScreen/mobileAddPart/closeIcon.svg b/src/components/mainScreen/mobileAddPart/closeIcon.svg
new file mode 100644
index 0000000..c6696a6
--- /dev/null
+++ b/src/components/mainScreen/mobileAddPart/closeIcon.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="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/mainScreen/mobileAddPart/mobileAddPart.css b/src/components/mainScreen/mobileAddPart/mobileAddPart.css
new file mode 100644
index 0000000..b39b95c
--- /dev/null
+++ b/src/components/mainScreen/mobileAddPart/mobileAddPart.css
@@ -0,0 +1,100 @@
+.mobile-users-part {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    padding: 32px;
+    display: flex;
+    flex-direction: column;
+    color: #FFFFFF;
+    box-sizing: border-box;
+    background-color: #333333;
+}
+
+.border-line {
+    width: 100%;
+    height: 1px;
+    background-color: #4F4F4F;
+}
+
+.mobile-users-part-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-bottom: 24px;
+}
+
+.mobile-users-part-header-title {
+    font-weight: 600;
+    font-size: 22px;
+    line-height: 130%;
+}
+
+.mobile-users-part-header-close-button {
+    width: 30px;
+    height: 30px;
+    border: none;
+    background-color: transparent;
+    background: url('closeIcon.svg') 50% 50% no-repeat;
+    background-size: 100% 100%;
+}
+
+.mobile-users-part-users-container {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    overflow-y: auto;
+    padding-top: 12px;
+}
+
+.user-item {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+}
+
+.user-item-user-info-container {
+    display: flex;
+    flex-direction: column;    
+    width: 100%;
+    gap: 12px;
+}
+
+.user-item-user-info {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.user-item-user-info-name {
+    height: 44px;
+    display: flex;
+    align-items: center;
+}
+
+.user-item-user-info-buttons {
+    display: flex;
+    gap: 8px;
+}
+
+.show-mobile-users-enter {
+    transform: translateX(-15%);
+    opacity: 0;
+}
+
+.show-mobile-users-enter-active {
+    transform: translateX(0);
+    opacity: 1;
+    transition: .3s;
+}
+
+.show-mobile-users-exit {
+    transform: translateX(0);
+    opacity: 1;
+}
+
+.show-mobile-users-exit-active {
+    transform: translateX(-100%);
+    opacity: 0;
+    transition: .3s;
+}
\ No newline at end of file
diff --git a/src/components/mainScreen/mobileAddPart/mobileAddPart.tsx b/src/components/mainScreen/mobileAddPart/mobileAddPart.tsx
new file mode 100644
index 0000000..49a0d99
--- /dev/null
+++ b/src/components/mainScreen/mobileAddPart/mobileAddPart.tsx
@@ -0,0 +1,49 @@
+import React from "react";
+import { BorderLine } from "./borderLine";
+import { MobileAddPartHeader } from "./mobileAddPartHeader";
+import './mobileAddPart.css';
+import { AddPartItem } from "./addPartItem";
+
+type TProps = {
+    onClickClose: () => void
+    title: string
+    type: 'users' | 'other'
+    users?: '???' //
+    onClickShare?: () => void
+    onClickExit?: () => void    
+}
+
+export const MobileAddPart:React.FC<TProps> = React.memo((props) => {
+    return <div className="mobile-users-part">
+        <MobileAddPartHeader
+            onClick={props.onClickClose}
+            title={props.title}
+        />
+        <BorderLine />
+        <div className="mobile-users-part-users-container">
+            {
+                props.type === 'users' ?
+                <>
+                    <AddPartItem typeUser="user admin"/>
+                    <AddPartItem typeUser="user self" />
+                    <AddPartItem typeUser="user guest" />
+                    <AddPartItem typeUser="user guest" />
+                    <AddPartItem typeUser="user guest" />
+                    <AddPartItem typeUser="user guest" />
+                    <AddPartItem typeUser="user guest" />
+                </>
+                : <>
+                    <AddPartItem
+                        typeUser="share"
+                        onClickItem={props?.onClickShare}
+                    />
+                    <AddPartItem 
+                        typeUser="exit"
+                        onClickItem={props?.onClickExit}
+                    />
+                </>
+            }
+            
+        </div>
+    </div>
+})
\ No newline at end of file
diff --git a/src/components/mainScreen/mobileAddPart/mobileAddPartHeader.tsx b/src/components/mainScreen/mobileAddPart/mobileAddPartHeader.tsx
new file mode 100644
index 0000000..615660b
--- /dev/null
+++ b/src/components/mainScreen/mobileAddPart/mobileAddPartHeader.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+
+type TProps = {
+    onClick: () => void
+    title: string
+}
+
+export const MobileAddPartHeader:React.FC<TProps> = React.memo((props) => {
+    return <div className="mobile-users-part-header">
+        <span className="mobile-users-part-header-title">
+            {props.title}
+        </span>
+        <button 
+            className="mobile-users-part-header-close-button" 
+            onClick={() => props.onClick()} 
+        ></button>
+    </div>
+})
\ No newline at end of file
diff --git a/src/components/mainScreen/toolbar/buttonContainer.tsx b/src/components/mainScreen/toolbar/buttonContainer.tsx
index a127e9d..6de6f93 100644
--- a/src/components/mainScreen/toolbar/buttonContainer.tsx
+++ b/src/components/mainScreen/toolbar/buttonContainer.tsx
@@ -10,7 +10,8 @@ type TProps = {
         onClick: () => void,
         isCaption: boolean
         isNotification?: boolean, 
-        active?: boolean
+        active?: boolean,
+        isSelected?: boolean
     }>
 }
 
@@ -26,6 +27,7 @@ export const ButtonContainer:React.FC<TProps> = React.memo((props) => {
                 caption={CaptionToolbarButtons[button.type]}
                 active={button?.active}
                 isCaption={button.isCaption}
+                isSelected={button?.isSelected}
             />)}
         <BorderLine />
     </div>
diff --git a/src/components/mainScreen/toolbar/toolbar.css b/src/components/mainScreen/toolbar/toolbar.css
index 2961b37..03d67da 100644
--- a/src/components/mainScreen/toolbar/toolbar.css
+++ b/src/components/mainScreen/toolbar/toolbar.css
@@ -248,6 +248,10 @@
     background-color: #4F4F4F;
 }
 
+.toolbar-button.selected {
+    background-color: #CE56C2;
+}
+
 
 
 
diff --git a/src/components/mainScreen/toolbar/toolbar.tsx b/src/components/mainScreen/toolbar/toolbar.tsx
index eda10ba..4af7b27 100644
--- a/src/components/mainScreen/toolbar/toolbar.tsx
+++ b/src/components/mainScreen/toolbar/toolbar.tsx
@@ -9,7 +9,10 @@ import { CaptionToolbarButtons } from "./typeCaptionButtons";
 type TProps = {
     onClickOpenButton: () => void
     onClickMobileUsers?: () => void
+    onClickMobileOther?: () => void
     isOpen: boolean
+    isOpenUsersMobilePart?: boolean
+    isOpenOtherMobilePart?: boolean
 }
 
 export const Toolbar:React.FC<TProps> = React.memo((props) => {
@@ -37,7 +40,8 @@ export const Toolbar:React.FC<TProps> = React.memo((props) => {
                             {
                                 type: "users",
                                 onClick: props.onClickMobileUsers,
-                                isCaption: false
+                                isCaption: false,
+                                isSelected: props?.isOpenUsersMobilePart
                             }
                         ]}
                     />
@@ -62,9 +66,10 @@ export const Toolbar:React.FC<TProps> = React.memo((props) => {
                     {/* <BorderLine /> */}
                     <ToolbarButton 
                         type="other"
-                        onClick={() => null}
+                        onClick={props.onClickMobileOther}
                         caption={CaptionToolbarButtons["other"]}
                         isCaption={false}
+                        isSelected={props.isOpenOtherMobilePart}
                     />
                 </div>
             </div>
diff --git a/src/components/mainScreen/toolbar/toolbarButton.tsx b/src/components/mainScreen/toolbar/toolbarButton.tsx
index 2ca5256..f29498d 100644
--- a/src/components/mainScreen/toolbar/toolbarButton.tsx
+++ b/src/components/mainScreen/toolbar/toolbarButton.tsx
@@ -9,34 +9,36 @@ type TProps = {
     caption: string
     active?: boolean
     isNotification?: boolean
+    isSelected?: boolean
 }
 
 export const ToolbarButton:React.FC<TProps> = React.memo((props) => {
     const [isActive, setIsActive] = useState<boolean>(props?.active || false);
-    const [isActive2, setIsActive2] = useState(false);
-    const [showAddButtons, setShowAddBUttons] = useState(false)
+    const [showAddButtons, setShowAddButtons] = useState(false)
 
     function onClick() {
         setIsActive(!isActive)
     }
 
-    function onClick2() {
-        setIsActive2(!isActive2)
-    }
-
     function showAdd() {
-        setShowAddBUttons(!showAddButtons);
+        setShowAddButtons(!showAddButtons);
     }
 
     return <div className="toolbar-button-area">
         <button 
-            className={`toolbar-button ${props.type} ${isActive ? 'on' : ''} ${props?.isNotification ? 'notification' : ''}`} 
+            className={
+                `toolbar-button 
+                ${props.type} ${isActive ? 'on' : ''} 
+                ${props?.isNotification ? 'notification' : ''}
+                ${props?.isSelected ? 'selected' : ''}
+                `
+            } 
             onClick={() => {
                 props.onClick();
                 showAdd();
                 //@ts-ignore
-                if(CaptionToolbarButtons[`${props.type} on`])
-                    onClick()
+                if(CaptionToolbarButtons[`${props.type} on`] || props.type === 'users' || props.type === 'other')
+                    onClick();
             }}
         >
         </button>