diff --git a/frontend/src/components/ChannelAddButtom.jsx.jsx b/frontend/src/components/ChannelAddButtom.jsx.jsx
index 29a6e55..e3ff9ee 100644
--- a/frontend/src/components/ChannelAddButtom.jsx.jsx
+++ b/frontend/src/components/ChannelAddButtom.jsx.jsx
@@ -1,17 +1,6 @@
 import { Button } from 'react-bootstrap';
-import { useDispatch, useSelector } from 'react-redux';
-import { openModal, closeModal } from '../slices/modalsSlice';
-import Component from './Modal';
 
-const ButtonPlus = () => {
-  const dispatch = useDispatch();
-  const modals = useSelector((state) => state.modals);
-  console.log(modals)
-  const hideModal = () =>  dispatch(closeModal());
-
-  const showModal = () => {
-    dispatch(openModal({ type: 'addChannel'}));
-  };
+const ButtonPlus = ({ showModal }) => {
 
   return (
     <>
@@ -29,7 +18,6 @@ const ButtonPlus = () => {
         </svg>
         <span className="visually-hidden">+</span>
       </Button>
-      {modals.type === 'addChannel' && (<Component onHide={hideModal} show={showModal}/>)} 
     </>
 
 
diff --git a/frontend/src/components/Modal.jsx b/frontend/src/components/Modal.jsx
index b49ab8d..2fd6c29 100644
--- a/frontend/src/components/Modal.jsx
+++ b/frontend/src/components/Modal.jsx
@@ -25,16 +25,14 @@ const Component = ({ onHide, show }) => {
   }, []);
 
 return (
-    <Modal.Dialog  show={show} dialogClassName="modal-dialog-centered">
-      <Modal.Header>
+    <Modal.Dialog  show dialogClassName="modal-dialog-centered">
+      <Modal.Header closeButton onHide={onHide}>
         <Modal.Title className="h4">Add</Modal.Title>
-        <Button type="button" className="btn-close" aria-label="Close" onClick={onHide}></Button>
       </Modal.Header>
         <Modal.Body>
           <Form onSubmit={formik.handleSubmit}>
             <FormGroup>
             <FormControl
-              id="taskName"
               data-testid="input-body" 
               name="taskName" 
               required 
diff --git "a/frontend/src/components/\320\241hannels.jsx" "b/frontend/src/components/\320\241hannels.jsx"
index 6ea7701..1761bf7 100644
--- "a/frontend/src/components/\320\241hannels.jsx"
+++ "b/frontend/src/components/\320\241hannels.jsx"
@@ -3,12 +3,22 @@ import { useGetChannelsQuery } from '../api/chatApi.js';
 import { useRef } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { selectActiveTab, activeChannelSelector } from '../slices/activeChannelSlice.js';
+import { openModal, closeModal } from '../slices/modalsSlice';
+import Component from './Modal';
 
 const Channels = () => {
-  const { data: channels = [], refetch } = useGetChannelsQuery();
   const dispatch = useDispatch();
   const channelsRef = useRef(null);
+
+  const { data: channels = [], refetch } = useGetChannelsQuery();
   const activeChannel = useSelector(activeChannelSelector);
+    const modals = useSelector((state) => state.modals);
+
+    const hideModal = () =>  dispatch(closeModal());
+  
+    // const showModal = () => {
+    //   dispatch(openModal({ type: 'addChannel'}));
+    // };
 
 return (
   <Nav 
@@ -28,6 +38,7 @@ return (
         >
           <span className="me-1"># </span>
            {channel.name}
+           {modals.type === 'addChannel' && (<Component onHide={hideModal}/>)} 
         </Button>
       </Nav.Item>
       );
diff --git a/frontend/src/init.jsx b/frontend/src/init.jsx
index 884ae40..ed94266 100644
--- a/frontend/src/init.jsx
+++ b/frontend/src/init.jsx
@@ -1,4 +1,5 @@
 import i18next from 'i18next';
+import { I18nextProvider } from 'react-i18next';
 import { combineReducers, configureStore } from '@reduxjs/toolkit';
 import { chatApi } from './api/chatApi.js';
 import activeChannelReducer from './slices/activeChannelSlice.js';
@@ -10,7 +11,6 @@ import App from './App.jsx';
 import resources from './locales/index.js';
 
 const init = async () => {
-
   const i18n = i18next.createInstance();
 
   await i18n
@@ -40,19 +40,19 @@ const init = async () => {
   socket.on('newMessage', (payload) => {
     store.dispatch(chatApi.util.updateQueryData('getMessages', undefined, (draft) => {
       draft.push({ payload });
-      console.log(payload); 
       }));
     });
-  
-  // messages.push(payload);
 
   // socket.on('renameMessage', (payload) => {
   // })
 
   return (
-    <Provider store={store}>
-      <App />
-    </Provider>
+    <I18nextProvider i18n={i18n}>
+      <Provider store={store}>
+        <App />
+      </Provider>
+    </I18nextProvider>
+
   );
 };
 
diff --git a/frontend/src/pages/MainPage.jsx b/frontend/src/pages/MainPage.jsx
index b571dfb..808ed96 100644
--- a/frontend/src/pages/MainPage.jsx
+++ b/frontend/src/pages/MainPage.jsx
@@ -1,13 +1,20 @@
-import { Container, Row, Col, Spinner, Button } from 'react-bootstrap';
+import { Container, Row, Col, Spinner } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
+import { useDispatch } from 'react-redux';
 import { useGetChannelsQuery } from '../api/chatApi.js';
 import Channels from '../components/Сhannels.jsx';
 import ButtonPlus from '../components/ChannelAddButtom.jsx.jsx';
 import MessageField from '../components/MessageField.jsx';
+import { openModal } from '../slices/modalsSlice';
+
 
   const MainPage = () => {
     const { t } = useTranslation();
+    const dispatch = useDispatch();
     const { isLoading: isChannelsLoading, error: channelsError } = useGetChannelsQuery();
+    const showModal = () => {
+      dispatch(openModal({ type: 'addChannel'}));
+    };
 
     return (
       <Container className="h-100 my-4 overflow-hidden rounded shadow">
@@ -15,7 +22,7 @@ import MessageField from '../components/MessageField.jsx';
         <Col sx={4} className="col-md-2 border-end px-0 bg-light flex-column h-100 d-flex">
           <div className="d-flex mt-1 justify-content-between mb-2 ps-4 pe-2 p-4">
             <b>{t('channels.title')}</b>
-            <ButtonPlus />
+            <ButtonPlus showModal={showModal} />
           </div>
           {isChannelsLoading && (      
             <Spinner animation="border" role="status">