diff --git a/public/icons/view-1.svg b/public/icons/view-1.svg
new file mode 100644
index 0000000..785e65e
--- /dev/null
+++ b/public/icons/view-1.svg
@@ -0,0 +1,13 @@
+<svg width="22" height="23" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1600_4035)">
+<path d="M7.22222 9.5H2.77778C1.8 9.5 1 8.7 1 7.72222V3.27778C1 2.3 1.8 1.5 2.77778 1.5H7.22222C8.2 1.5 9 2.3 9 3.27778V7.72222C9 8.7 8.2 9.5 7.22222 9.5Z" stroke="#5F6A77" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19.2222 9.5H14.7778C13.8 9.5 13 8.7 13 7.72222V3.27778C13 2.3 13.8 1.5 14.7778 1.5H19.2222C20.2 1.5 21 2.3 21 3.27778V7.72222C21 8.7 20.2 9.5 19.2222 9.5Z" stroke="#5F6A77" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19.2222 21.5H14.7778C13.8 21.5 13 20.7 13 19.7222V15.2778C13 14.3 13.8 13.5 14.7778 13.5H19.2222C20.2 13.5 21 14.3 21 15.2778V19.7222C21 20.7 20.2 21.5 19.2222 21.5Z" stroke="#5F6A77" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.22222 21.5H2.77778C1.8 21.5 1 20.7 1 19.7222V15.2778C1 14.3 1.8 13.5 2.77778 13.5H7.22222C8.2 13.5 9 14.3 9 15.2778V19.7222C9 20.7 8.2 21.5 7.22222 21.5Z" stroke="#5F6A77" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_1600_4035">
+<rect width="22" height="22" fill="white" transform="translate(0 0.5)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/icons/view-2.svg b/public/icons/view-2.svg
new file mode 100644
index 0000000..cc63cb1
--- /dev/null
+++ b/public/icons/view-2.svg
@@ -0,0 +1,10 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_713_2066)">
+<path d="M16.5556 21H5.44444C3 21 1 19 1 16.5556V5.44444C1 3 3 1 5.44444 1H16.5556C19 1 21 3 21 5.44444V16.5556C21 19 19 21 16.5556 21Z" stroke="#5F6A77" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_713_2066">
+<rect width="22" height="22" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/features/Participant/ui/ParticipantCard.tsx b/src/features/Participant/ui/ParticipantCard.tsx
index 1df47f9..3fe5f3f 100644
--- a/src/features/Participant/ui/ParticipantCard.tsx
+++ b/src/features/Participant/ui/ParticipantCard.tsx
@@ -51,14 +51,18 @@ interface Props {
   avatar: string;
   name: string;
   isActive: boolean;
+  displaySwitch?: boolean;
 }
 
 export const ParticipantCard: React.FC<Props> = ({
   avatar,
   name,
   isActive,
+  displaySwitch = false,
 }) => {
-  return (
+  return displaySwitch ? (
+    <div></div>
+  ) : (
     <Container>
       <UserInfo>
         <img src={avatar} alt="" style={{ width: "44px", height: "44px" }} />
diff --git a/src/shared/ui/switchDisplay/SwitchPanel.tsx b/src/shared/ui/switchDisplay/SwitchPanel.tsx
new file mode 100644
index 0000000..806e200
--- /dev/null
+++ b/src/shared/ui/switchDisplay/SwitchPanel.tsx
@@ -0,0 +1,47 @@
+import React, { useState } from "react";
+import styles from "./styles.module.css";
+
+interface Props {
+  oneSwitch: string;
+  twoSwitch: string;
+  style: Object;
+  state: boolean;
+  onClick: (stateSwitch: boolean) => void;
+}
+
+const SwitchPanel: React.FC<Props> = (props) => {
+  const [displaySwitch, setDisplaySwitch] = useState(props.state);
+
+  function clickRight() {
+    props.onClick(true);
+    setDisplaySwitch(true);
+  }
+
+  function clickLeft() {
+    props.onClick(false);
+    setDisplaySwitch(false);
+  }
+
+  return (
+    <div className={styles.switchPanel} style={props.style}>
+      <div
+        className={
+          displaySwitch ? styles.switch : styles.switch + " " + styles.active
+        }
+        onClick={clickLeft}
+      >
+        <img src={props.oneSwitch} alt="" />
+      </div>
+      <div
+        className={
+          displaySwitch ? styles.switch + " " + styles.active : styles.switch
+        }
+        onClick={clickRight}
+      >
+        <img src={props.twoSwitch} alt="" />
+      </div>
+    </div>
+  );
+};
+
+export default SwitchPanel;
diff --git a/src/shared/ui/switchDisplay/styles.module.css b/src/shared/ui/switchDisplay/styles.module.css
new file mode 100644
index 0000000..6f3ecce
--- /dev/null
+++ b/src/shared/ui/switchDisplay/styles.module.css
@@ -0,0 +1,27 @@
+.switchPanel {
+  display: flex;
+  padding: 3px;
+  align-items: center;
+  background: var(--white, #fff);
+  box-shadow: 0px 0px 2px 0px #c5ccd5;
+}
+
+.switch {
+  display: flex;
+  flex: 1 1;
+  aspect-ratio: 1 / 1;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  opacity: 0.5;
+}
+
+.switch:hover {
+  cursor: pointer;
+}
+
+.switch.active {
+  background: var(--grey-6, #f9fafe);
+  box-shadow: 0px 0px 2px 0px #c5ccd5;
+  opacity: 1;
+}
diff --git a/src/widgets/CallInfo.tsx b/src/widgets/CallInfo.tsx
index 9447026..60f3b60 100644
--- a/src/widgets/CallInfo.tsx
+++ b/src/widgets/CallInfo.tsx
@@ -1,6 +1,10 @@
-import React from "react";
+import React, { useState } from "react";
 import styled from "styled-components";
 import { CopyLink } from "../features/Copy";
+import SwitchPanel from "../shared/ui/switchDisplay/SwitchPanel";
+import oneSwitch from "../../public/icons/view-1.svg";
+import twoSwitch from "../../public/icons/view-2.svg";
+import sidebarState from "../pages/CallPageCustomUI/store/sidebarState";
 
 const Container = styled.div`
   display: flex;
@@ -35,14 +39,33 @@ const Paragraph = styled.p`
   line-height: normal;
 `;
 
+const styleSwitch = {
+  width: "84px",
+  height: "48px",
+  borderRadius: "35px",
+};
+
 const CallInfo: React.FC = () => {
+  const [displaySwitch, setDisplaySwitch] = useState(false);
+
+  function changeDisplay(state: boolean) {
+    setDisplaySwitch(state);
+  }
+
   return (
-    <Container>
+    <Container style={sidebarState.isActive ? {} : { paddingRight: "35px" }}>
       <Info>
         <Title>Информатика 4 класс</Title>
         <CopyLink />
         <Paragraph>18 участников|01:12:45 </Paragraph>
       </Info>
+      <SwitchPanel
+        oneSwitch={oneSwitch}
+        twoSwitch={twoSwitch}
+        style={styleSwitch}
+        onClick={changeDisplay}
+        state={displaySwitch}
+      />
     </Container>
   );
 };
diff --git a/src/widgets/ParticipantsList/ParticipantsList.tsx b/src/widgets/ParticipantsList/ParticipantsList.tsx
index 56057d7..a32f71f 100644
--- a/src/widgets/ParticipantsList/ParticipantsList.tsx
+++ b/src/widgets/ParticipantsList/ParticipantsList.tsx
@@ -15,9 +15,14 @@ const Container = styled.div`
 interface Props {
   isActive: boolean;
   peopleList: IUser[];
+  displaySwitch?: boolean;
 }
 
-const ParticipantsList: React.FC<Props> = ({ isActive, peopleList }) => {
+const ParticipantsList: React.FC<Props> = ({
+  isActive,
+  peopleList,
+  displaySwitch = false,
+}) => {
   return (
     <Container style={isActive ? { opacity: "1" } : { opacity: "0.5" }}>
       {peopleList.map((people, index) => (
@@ -26,6 +31,7 @@ const ParticipantsList: React.FC<Props> = ({ isActive, peopleList }) => {
           name={people.name}
           isActive={isActive}
           key={index}
+          displaySwitch={displaySwitch}
         />
       ))}
     </Container>
diff --git a/src/widgets/layout/Sidebar/Sidebar.tsx b/src/widgets/layout/Sidebar/Sidebar.tsx
index 7e50465..1951bca 100644
--- a/src/widgets/layout/Sidebar/Sidebar.tsx
+++ b/src/widgets/layout/Sidebar/Sidebar.tsx
@@ -11,6 +11,7 @@ import { observer } from "mobx-react-lite";
 import styles from "./styles.module.css";
 import { IUser } from "../../../shared/api/models";
 import ParticipantsList from "../../ParticipantsList/ParticipantsList";
+import SwitchPanel from "../../../shared/ui/switchDisplay/SwitchPanel";
 
 const OpenButton = styled.div`
   position: absolute;
@@ -48,6 +49,12 @@ const Container = styled.div`
   background: rgba(255, 255, 255, 0.95);
 `;
 
+const styleSwitch = {
+  width: "66px",
+  height: "34px",
+  borderRadius: "18px",
+};
+
 interface Props {
   peopleList: IUser[];
 }
@@ -61,12 +68,8 @@ const Sidebar: React.FC<Props> = observer(({ peopleList }) => {
       : store.openSidebar();
   }
 
-  function rightDisplay() {
-    setDisplaySwitch(true);
-  }
-
-  function leftDisplay() {
-    setDisplaySwitch(false);
+  function changeDisplay(state: boolean) {
+    setDisplaySwitch(state);
   }
 
   function changeSelected() {
@@ -106,31 +109,20 @@ const Sidebar: React.FC<Props> = observer(({ peopleList }) => {
           <>
             <div className={styles.joinedHead}>
               <div className={styles.countJoined}>Подключены (12)</div>
-              <div className={styles.switchPanel}>
-                <div
-                  className={
-                    displaySwitch
-                      ? styles.switch
-                      : styles.switch + " " + styles.active
-                  }
-                  onClick={leftDisplay}
-                >
-                  <img src={oneSwitch} alt="" />
-                </div>
-                <div
-                  className={
-                    displaySwitch
-                      ? styles.switch + " " + styles.active
-                      : styles.switch
-                  }
-                  onClick={rightDisplay}
-                >
-                  <img src={twoSwitch} alt="" />
-                </div>
-              </div>
+              <SwitchPanel
+                oneSwitch={oneSwitch}
+                twoSwitch={twoSwitch}
+                style={styleSwitch}
+                state={displaySwitch}
+                onClick={changeDisplay}
+              />
             </div>
             <div className={styles.list}>
-              <ParticipantsList peopleList={peopleList} isActive={true} />
+              <ParticipantsList
+                peopleList={peopleList}
+                isActive={true}
+                displaySwitch={displaySwitch}
+              />
             </div>
             <div className={styles.joinedHead}>
               <div className={styles.countJoined}>Не подключены (4)</div>
diff --git a/src/widgets/layout/Sidebar/styles.module.css b/src/widgets/layout/Sidebar/styles.module.css
index 1ed3121..4b61c9c 100644
--- a/src/widgets/layout/Sidebar/styles.module.css
+++ b/src/widgets/layout/Sidebar/styles.module.css
@@ -49,38 +49,6 @@
   font-weight: 600;
 }
 
-.switchPanel {
-  display: flex;
-  width: 66px;
-  height: 34px;
-  padding: 0px 4px;
-  align-items: center;
-  gap: 6px;
-  border-radius: 18px;
-  background: var(--white, #fff);
-  box-shadow: 0px 0px 2px 0px #c5ccd5;
-}
-
-.switch {
-  display: flex;
-  width: 28px;
-  height: 28px;
-  justify-content: center;
-  align-items: center;
-  border-radius: 18px;
-  opacity: 0.5;
-}
-
-.switch:hover {
-  cursor: pointer;
-}
-
-.switch.active {
-  background: var(--grey-6, #f9fafe);
-  box-shadow: 0px 0px 2px 0px #c5ccd5;
-  opacity: 1;
-}
-
 .list {
   overflow-y: auto;
   align-self: flex-start;