diff --git a/src/api/index.js b/src/api/index.js
index a5f073295..61293f1d8 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -9,8 +9,18 @@ class APIService {
     this.defaultHeaders = {
       'Content-Type': 'application/json',
     };
+    this.unsubscribe = this.services.i18n.subscribe((locale) => {
+      this.updateLanguageHeader(locale);
+    });
+
+    this.updateLanguageHeader(this.services.i18n.getLocale());
+
+  }
+  updateLanguageHeader(locale) {
+    this.defaultHeaders['Accept-Language'] = locale || 'ru';
   }
 
+  
   /**
    * HTTP запрос
    * @param url
@@ -41,6 +51,12 @@ class APIService {
       delete this.defaultHeaders[name];
     }
   }
+  destroy() {
+    if (this.unsubscribe) {
+      this.unsubscribe();
+      this.unsubscribe = null;
+    }
+  }
 }
 
 export default APIService;
diff --git a/src/app/article/index.js b/src/app/article/index.js
index 54f037b64..50d9646bd 100644
--- a/src/app/article/index.js
+++ b/src/app/article/index.js
@@ -13,7 +13,9 @@ import TopHead from '../../containers/top-head';
 import { useDispatch, useSelector } from 'react-redux';
 import shallowequal from 'shallowequal';
 import articleActions from '../../store-redux/article/actions';
+import commentsActions from '../../store-redux/comments/actions';
 import HeadLayout from '../../components/head-layout';
+import CommentsWrapper from '../../components/comments-wrapper';
 
 function Article() {
   const store = useStore();
@@ -26,11 +28,14 @@ function Article() {
   useInit(() => {
     //store.actions.article.load(params.id);
     dispatch(articleActions.load(params.id));
+    dispatch(commentsActions.load(params.id));
   }, [params.id]);
 
   const select = useSelector(
     state => ({
       article: state.article.data,
+      comments: state.comments.data,
+      commentsWaiting: state.comments.waiting,
       waiting: state.article.waiting,
     }),
     shallowequal,
@@ -42,7 +47,6 @@ function Article() {
     // Добавление в корзину
     addToBasket: useCallback(_id => store.actions.basket.addToBasket(_id), [store]),
   };
-
   return (
     <>
       <HeadLayout>
@@ -56,6 +60,18 @@ function Article() {
         <Spinner active={select.waiting}>
           <ArticleCard article={select.article} onAdd={callbacks.addToBasket} t={t} />
         </Spinner>
+        {select.commentsWaiting ? (
+          <div className="loading">
+            <span>Загрузка комментариев...</span>
+          </div>
+        ) : (
+          <CommentsWrapper
+            t={t}
+            _id={select.article._id}
+            _type={select.article._type}
+            comments={select.comments}
+          />
+        )}
       </PageLayout>
     </>
   );
diff --git a/src/app/login/index.js b/src/app/login/index.js
index 32b86daa4..3fb13833b 100644
--- a/src/app/login/index.js
+++ b/src/app/login/index.js
@@ -15,6 +15,7 @@ import useInit from '../../hooks/use-init';
 import HeadLayout from '../../components/head-layout';
 import Form from '../../components/form';
 
+
 function Login() {
   const { t } = useTranslate();
   const location = useLocation();
diff --git a/src/components/article-card/index.js b/src/components/article-card/index.js
index d636d9f88..76ef8706c 100644
--- a/src/components/article-card/index.js
+++ b/src/components/article-card/index.js
@@ -13,22 +13,22 @@ function ArticleCard(props) {
       <div className={cn('description')}>{article.description}</div>
       <div className={cn('prop-wrapper')}>
         <div className={cn('prop')}>
-          <div className={cn('label')}>Страна производитель:</div>
+          <div className={cn('label')}>{t(`product.country`)}:</div>
           <div className={cn('value')}>
             {article.madeIn?.title} ({article.madeIn?.code})
           </div>
         </div>
         <div className={cn('prop')}>
-          <div className={cn('label')}>Категория:</div>
+          <div className={cn('label')}>{t(`product.category`)}:</div>
           <div className={cn('value')}>{article.category?.title}</div>
         </div>
         <div className={cn('prop')}>
-          <div className={cn('label')}>Год выпуска:</div>
+          <div className={cn('label')}>{t(`product.year`)}:</div>
           <div className={cn('value')}>{article.edition}</div>
         </div>
       </div>
       <div className={cn('prop', { size: 'big' })}>
-        <div className={cn('label')}>Цена:</div>
+        <div className={cn('label')}>{t(`product.price`)}:</div>
         <div className={cn('value')}>{numberFormat(article.price)} ₽</div>
       </div>
       <Button style="primary" onClick={() => onAdd(article._id)} title={t('article.add')} />
diff --git a/src/components/comment-container/index.js b/src/components/comment-container/index.js
new file mode 100644
index 000000000..dd19641b4
--- /dev/null
+++ b/src/components/comment-container/index.js
@@ -0,0 +1,95 @@
+import { memo, useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import CommentForm from '../comment-form';
+import CommentItem from '../comment-item';
+
+function CommentContainer(props) {
+  const {
+    LinkToLogin,
+    treeLevel = 0,
+    commentIdFormVisible = '',
+    setCommentIdFormVisible = () => {},
+    isLogin = false,
+    lastChild = false,
+    userId = '',
+    error = '',
+    formRef = '',
+    createComment = () => {},
+  } = props;
+
+  if (!props.comment) return null;
+
+  const { author, dateCreate, text, children, _id, parent } = props.comment;
+  const hasChildren = children.length > 0;
+  const maxlevel = 15; //максимальный уровень вложенности
+
+  const commentOffset = 40 * Math.min(maxlevel, treeLevel);
+  const formOffset = commentOffset + (!hasChildren && commentIdFormVisible === _id ? 40 : 0);
+  const date = new Date(dateCreate).toLocaleString();
+  const isUserComment = userId === author._id;
+  const isShowForm =
+    (commentIdFormVisible === parent._id && lastChild) ||
+    (!hasChildren && commentIdFormVisible === _id);
+
+  return (
+    <>
+      <CommentItem
+        setCommentIdFormVisible={setCommentIdFormVisible}
+        text={text}
+        date={date}
+        authorName={author.profile.name}
+        isUserComment={isUserComment}
+        commentOffset={commentOffset}
+        _id={_id}
+      />
+      {hasChildren &&
+        children.map((child, index) => {
+          return (
+            <CommentContainer
+              isLogin={isLogin}
+              key={child._id}
+              setCommentIdFormVisible={setCommentIdFormVisible}
+              commentIdFormVisible={commentIdFormVisible}
+              comment={child}
+              treeLevel={treeLevel + 1}
+              LinkToLogin={LinkToLogin}
+              lastChild={!!(index === children.length - 1)}
+              userId={userId}
+              formRef={formRef}
+              createComment={createComment}
+            />
+          );
+        })}
+      <div ref={isShowForm ? props.formRef : null} style={{ marginLeft: `${formOffset}px` }}>
+        {isShowForm &&
+          (isLogin ? (
+            <CommentForm
+              _id={commentIdFormVisible}
+              _type="comment"
+              secondButtonTitle="Отмена"
+              setCommentIdFormVisible={setCommentIdFormVisible}
+              title="Новый ответ"
+              error={error}
+              createComment={createComment}
+            />
+          ) : (
+            <LinkToLogin />
+          ))}
+      </div>
+      
+    </>
+  );
+}
+
+CommentContainer.propTypes = {
+  author: PropTypes.string,
+  dateCreate: PropTypes.string,
+  parent: PropTypes.shape({
+    _id: PropTypes.string,
+    type: PropTypes.string,
+  }),
+  text: PropTypes.string,
+  _id: PropTypes.string,
+};
+
+export default memo(CommentContainer);
diff --git a/src/components/comment-form/index.js b/src/components/comment-form/index.js
new file mode 100644
index 000000000..99d8d6c00
--- /dev/null
+++ b/src/components/comment-form/index.js
@@ -0,0 +1,41 @@
+import React, { memo, useState } from 'react';
+import Form from '../form';
+import Input from '../input';
+import PropTypes from 'prop-types';
+
+function CommentForm({
+  title = `Новый комментарий`,
+  setCommentIdFormVisible,
+  secondButtonTitle = '',
+  _id = '',
+  _type = '',
+  error = '',
+  createComment = () => {},
+}) {
+   const [inputText, setInputText] = useState('');
+  return (
+    <>
+      <Form
+        title={title}
+        submitTitle={`Отправить`}
+        secondButtonTitle={secondButtonTitle}
+        secondButtonFunc={setCommentIdFormVisible}
+        onSubmit={event => createComment(event, { text: inputText, _id: _id, _type: _type })}
+      >
+        <Input theme={`commentForm`} onChange={setInputText} />
+        {error && <span className="errorMessage">{error}</span>}
+      </Form>
+    </>
+  );
+}
+
+CommentForm.propTypes = {
+  title: PropTypes.string,
+  setCommentIdFormVisible: PropTypes.func,
+  secondButtonTitle: PropTypes.string,
+  _id: PropTypes.string,
+  _type: PropTypes.string,
+  error: PropTypes.string,
+};
+
+export default memo(CommentForm);
diff --git a/src/components/comment-item/index.js b/src/components/comment-item/index.js
new file mode 100644
index 000000000..319476b75
--- /dev/null
+++ b/src/components/comment-item/index.js
@@ -0,0 +1,39 @@
+import React, { memo } from 'react';
+import PropTypes from 'prop-types';
+import { cn as bem } from '@bem-react/classname';
+import './style.css';
+
+function CommentItem({
+  commentOffset = 0,
+  isUserComment = false,
+  authorName = '',
+  date = '',
+  text = '',
+  setCommentIdFormVisible = () => {},
+  _id = '',
+}) {
+  const cn = bem('CommentItem');
+  return (
+    <div className={cn()} style={{ marginLeft: `${commentOffset}px` }}>
+      <div className={cn('header')}>
+        <span className={cn('author', { userComment: isUserComment })}>{authorName}</span>
+        <span className={cn('date')}>{date}</span>
+      </div>
+      <div className={cn('content')}>{text}</div>
+      <span onClick={() => setCommentIdFormVisible(_id)} className={cn('mention')}>
+        Ответить
+      </span>
+    </div>
+  );
+}
+CommentItem.propTypes = {
+  setCommentIdFormVisible: PropTypes.func.isRequired,
+  text: PropTypes.string.isRequired,
+  date: PropTypes.string.isRequired,
+  authorName: PropTypes.string.isRequired,
+  isUserComment: PropTypes.bool.isRequired,
+  commentOffset: PropTypes.number.isRequired,
+  _id: PropTypes.string.isRequired,
+};
+
+export default memo(CommentItem);
diff --git a/src/components/comment-item/style.css b/src/components/comment-item/style.css
new file mode 100644
index 000000000..09e3f98f4
--- /dev/null
+++ b/src/components/comment-item/style.css
@@ -0,0 +1,61 @@
+.CommentItem {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.CommentItem-author {
+  font-family: 'Golos Text';
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 18px;
+  letter-spacing: 0%;
+} 
+.CommentItem-author_userComment {
+  color: #4B5563;
+
+}
+.CommentItem-date {
+  font-family: 'Golos Text';
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 18px;
+  letter-spacing: 0%;
+  color: #666666;
+}
+.CommentItem-header {
+  gap: 15px;
+  display: flex;
+}
+.CommentItem-content {
+  overflow-wrap: break-word;
+  font-family: 'Golos Text';
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 20px;
+  letter-spacing: 0%;
+}
+.CommentItem-mention {
+  font-family: 'Montserrat Alternates';
+  font-weight: 700;
+  font-size: 12px;
+  line-height: 18px;
+  letter-spacing: 0%;
+  color: #6b4acb;
+  cursor: pointer;
+}
+.errorMessage {
+  font-family: 'Golos Text';
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 18px;
+  letter-spacing: 0%;
+  color: red;
+}
+.loginToAllowComment {
+  font-family: 'Golos Text';
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  letter-spacing: 0%;
+}
+
diff --git a/src/components/comments-wrapper/index.js b/src/components/comments-wrapper/index.js
new file mode 100644
index 000000000..194a82f34
--- /dev/null
+++ b/src/components/comments-wrapper/index.js
@@ -0,0 +1,116 @@
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import { cn as bem } from '@bem-react/classname';
+import listToTree from '../../utils/list-to-tree';
+import './style.css';
+import CommentContainer from '../comment-container';
+import CommentForm from '../comment-form';
+import useSelector from '../../hooks/use-selector';
+import { Link, useLocation } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
+import commentsActions from '../../store-redux/comments/actions';
+
+function LinkToLogin() {
+  const location = useLocation();
+  return (
+    <span className="loginToAllowComment">
+      <Link to={`/login`} state={{ back: location.pathname }}>
+        Войдите
+      </Link>
+      , чтобы иметь возможность комментировать
+    </span>
+  );
+}
+
+function CommentsWrapper(props) {
+  const formRef = useRef(null);
+  const isLogin = useSelector(state => state.session.exists);
+  const [commentIdFormVisible, setCommentIdFormVisible] = useState('');
+  const { comments, _id, _type, t } = props;
+  const formattedComments = useMemo(
+    () => listToTree(comments.items, '_id', 'article'),
+    [props.comments],
+  );
+  const error = useSelector(state => state.comments?.error);
+  const userId = useSelector(state => state.session.user._id);
+
+  const dispatch = useDispatch();
+ 
+
+  const createComment = useCallback(async (event, { _type, _id, text }) => {
+    event.preventDefault();
+  
+    if (!text.trim()) {
+      alert('Комментарий не может быть пустым');
+      return;
+    }
+  
+    const res = await dispatch(commentsActions.createComment({ _type, _id, text }));
+  
+    if (res) {
+      setCommentIdFormVisible('');
+    }
+  }, [dispatch, setCommentIdFormVisible]);
+
+  useEffect(() => {
+    if (!isLogin) {
+      setCommentIdFormVisible('');
+    }
+  }, [isLogin]);
+
+  useEffect(() => {
+    if (formRef.current) {
+      formRef.current.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }
+  }, [commentIdFormVisible]);
+
+  const cn = bem('CommentsWrapper');
+  return (
+    <div className={cn()} key={comments.items.length}>
+      <span className={cn('header')}>{`${t(`product.comments`)}: (${comments.count})`}</span>
+      <div className={cn('container')}>
+        {formattedComments[0]?.children.map(comment => {
+          return (
+            <CommentContainer
+              key={comment._id}
+              isLogin={isLogin}
+              LinkToLogin={LinkToLogin}
+              setCommentIdFormVisible={setCommentIdFormVisible}
+              commentIdFormVisible={commentIdFormVisible}
+              comment={comment}
+              userId={userId}
+              error={error}
+              formRef={formRef}
+              createComment={createComment}
+            />
+          );
+        })}
+      </div>
+
+      {isLogin ? (
+        commentIdFormVisible === '' && (
+          <CommentForm
+            error={error}
+            _id={_id}
+            _type={_type}
+            setCommentIdFormVisible={setCommentIdFormVisible}
+            createComment={createComment}
+          />
+        )
+      ) : (
+        <LinkToLogin></LinkToLogin>
+      )}
+    </div>
+  );
+}
+
+CommentsWrapper.propTypes = {
+  comments: PropTypes.shape({
+    items: PropTypes.arrayOf(PropTypes.object),
+    count: PropTypes.number,
+  }),
+  _id: PropTypes.string,
+  _type: PropTypes.string,
+};
+
+export default memo(CommentsWrapper);
diff --git a/src/components/comments-wrapper/style.css b/src/components/comments-wrapper/style.css
new file mode 100644
index 000000000..55b0efc2a
--- /dev/null
+++ b/src/components/comments-wrapper/style.css
@@ -0,0 +1,35 @@
+.CommentsWrapper-container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.CommentsWrapper {
+  gap: 24px;
+  display: flex;
+  flex-direction: column;
+}
+.CommentsWrapper {
+  font-family: 'Montserrat Alternates';
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 32px;
+  letter-spacing: 0%;
+}
+.CommentsWrapper-auth-title {
+  font-family: 'Golos Text';
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  letter-spacing: 0%;
+}
+.Input-commentField {
+  width: 1152;
+  height: 88;
+  gap: 10px;
+  padding-top: 8px;
+  padding-right: 12px;
+  padding-bottom: 8px;
+  padding-left: 12px;
+  border-radius: 4px;
+  border-width: 1px;
+}
diff --git a/src/components/form/index.js b/src/components/form/index.js
index 574945888..842548f46 100644
--- a/src/components/form/index.js
+++ b/src/components/form/index.js
@@ -4,14 +4,31 @@ import { cn as bem } from '@bem-react/classname';
 import Button from '../button';
 import './style.css';
 
-function Form({ title, onSubmit, children, submitTitle }) {
+function Form({
+  title,
+  onSubmit,
+  children,
+  submitTitle,
+  secondButtonTitle = '',
+  secondButtonFunc = () => {},
+}) {
   const cn = bem('Form');
 
   return (
     <form className={cn()} onSubmit={onSubmit}>
       <h2 className={cn('title')}>{title}</h2>
       {children}
-      <Button style="primary" type="submit" title={submitTitle} />
+      <div className={cn('footer')}>
+        <Button style="primary" type="submit" title={submitTitle} />
+        {secondButtonTitle && (
+          <Button
+            onClick={() => secondButtonFunc('')}
+            style="outline"
+            type="button"
+            title={secondButtonTitle}
+          />
+        )}
+      </div>
     </form>
   );
 }
diff --git a/src/components/form/style.css b/src/components/form/style.css
index fef9ffa64..1dbf2452d 100644
--- a/src/components/form/style.css
+++ b/src/components/form/style.css
@@ -1,7 +1,18 @@
 .Form-title {
-  margin-bottom: 24px;
+  font-family: 'Golos Text';
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 22px;
+  letter-spacing: 0%;
+}
+.Form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
 }
-
 .Form button {
-  margin-top: 24px;
 }
+.Form-footer {
+  display: flex;
+  gap: 16px;
+}
\ No newline at end of file
diff --git a/src/components/input/index.js b/src/components/input/index.js
index 47790d414..17a486c83 100644
--- a/src/components/input/index.js
+++ b/src/components/input/index.js
@@ -6,7 +6,7 @@ import debounce from 'lodash.debounce';
 import './style.css';
 
 function Input(props) {
-  const { onChange = () => {}, type = 'text', theme = '' } = props;
+  const { onChange = () => {}, type = 'text', theme = '', style = {} } = props;
   // Внутренний стейт для быстрого отображения ввода
   const [value, setValue] = useState(props.value);
 
@@ -26,8 +26,9 @@ function Input(props) {
 
   const cn = bem('Input');
   return (
-    <input
+    <textarea
       className={cn({ theme: theme })}
+      style={style}
       value={value}
       type={type}
       placeholder={props.placeholder}
@@ -43,6 +44,7 @@ Input.propTypes = {
   placeholder: PropTypes.string,
   onChange: PropTypes.func,
   theme: PropTypes.string,
+  style: PropTypes.object
 };
 
 export default memo(Input);
diff --git a/src/components/input/style.css b/src/components/input/style.css
index 18dd7b7a0..dce961552 100644
--- a/src/components/input/style.css
+++ b/src/components/input/style.css
@@ -4,6 +4,18 @@
   border-radius: 4px;
   font-family: var(--font-family);
   height: 40px;
+
+  resize: none;
+  text-align: left;
+  vertical-align: top;
+  box-sizing: border-box;
+
+  font-family: 'Golos Text';
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 130%;
+  letter-spacing: 0%;
+  vertical-align: middle;
 }
 
 .Input:focus {
@@ -17,3 +29,17 @@
 .Input_theme_small {
   width: 233px;
 }
+
+.Input_theme_commentForm {
+  width: 100%;
+  min-height: 88px;
+  gap: 10px;
+  padding-top: 8px;
+  padding-right: 12px;
+  padding-bottom: 8px;
+  padding-left: 12px;
+  border-radius: 4px;
+  border-width: 1px;
+
+  
+}
diff --git a/src/containers/locale-select/index.js b/src/containers/locale-select/index.js
index a60df2a9a..a20b21bc5 100644
--- a/src/containers/locale-select/index.js
+++ b/src/containers/locale-select/index.js
@@ -1,23 +1,11 @@
-import { memo, useCallback, useMemo } from 'react';
-import useStore from '../../hooks/use-store';
-import useSelector from '../../hooks/use-selector';
+import { memo, useCallback, useEffect, useMemo } from 'react';
 import useTranslate from '../../hooks/use-translate';
 import Select from '../../components/select';
 
 function LocaleSelect() {
-  const { lang, setLang } = useTranslate();
+  const { lang, setLang, localeList, t } = useTranslate();
 
-  const options = {
-    lang: useMemo(
-      () => [
-        { value: 'ru', title: 'Русский' },
-        { value: 'en', title: 'English' },
-      ],
-      [],
-    ),
-  };
-
-  return <Select onChange={setLang} value={lang} options={options.lang} size="small" text />;
+  return <Select onChange={setLang} value={lang} options={localeList} size="small" text />;
 }
 
 export default memo(LocaleSelect);
diff --git a/src/hooks/use-translate.js b/src/hooks/use-translate.js
index bdcbf1071..62d26980e 100644
--- a/src/hooks/use-translate.js
+++ b/src/hooks/use-translate.js
@@ -1,9 +1,23 @@
-import { useCallback, useContext } from 'react';
-import { I18nContext } from '../i18n/context';
+import { useContext, useEffect, useState } from 'react';
+import { ServicesContext } from '../context';
 
-/**
- * Хук возвращает функцию для локализации текстов, код языка и функцию его смены
- */
 export default function useTranslate() {
-  return useContext(I18nContext);
-}
+  const services = useContext(ServicesContext);
+  const i18nService = services.i18n;
+
+  const [lang, setLang] = useState(i18nService.getLocale());
+
+  useEffect(() => {
+    const unsubscribe = i18nService.subscribe((newLocale) => {
+      setLang(newLocale);
+    });
+    return () => unsubscribe();
+  }, [i18nService]);
+
+  return {
+    localeList: i18nService.getLocalesList(),
+    lang,
+    setLang: i18nService.setLocale.bind(i18nService),
+    t: i18nService.translate.bind(i18nService),
+  };
+}
\ No newline at end of file
diff --git a/src/i18n/context.js b/src/i18n/context.js
deleted file mode 100644
index 3733d9bac..000000000
--- a/src/i18n/context.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import { createContext, useMemo, useState } from 'react';
-import translate from './translate';
-
-/**
- * @type {React.Context<{}>}
- */
-export const I18nContext = createContext({});
-
-/**
- * Обертка над провайдером контекста, чтобы управлять изменениями в контексте
- * @param children
- * @return {JSX.Element}
- */
-export function I18nProvider({ children }) {
-  const [lang, setLang] = useState('ru');
-
-  const i18n = useMemo(
-    () => ({
-      // Код локали
-      lang,
-      // Функция для смены локали
-      setLang,
-      // Функция для локализации текстов с замыканием на код языка
-      t: (text, number) => translate(lang, text, number),
-    }),
-    [lang],
-  );
-
-  return <I18nContext.Provider value={i18n}>{children}</I18nContext.Provider>;
-}
diff --git a/src/i18n/index.js b/src/i18n/index.js
new file mode 100644
index 000000000..14a25ada3
--- /dev/null
+++ b/src/i18n/index.js
@@ -0,0 +1,53 @@
+import * as translations from './translations/index';
+
+class I18n {
+  constructor() {
+    this.locale = localStorage.getItem('lang') || 'ru';
+    this.subscribers = [];
+    this.localeWords = translations;
+  }
+
+  setLocale(locale) {
+    if (this.locale !== locale && this.localeWords[locale]) {
+      this.locale = locale;
+      this.subscribersTrigger();
+      localStorage.setItem('lang', locale)
+    }
+  }
+  getLocale() {
+    return this.locale;
+  }
+  getLocalesList() {
+    return [
+      { value: 'ru', title: 'Русский' },
+      { value: 'en', title: 'English' },
+    ];
+  }
+
+ translate(key, plural, locale ) {
+  const targetLocale = locale || this.locale;
+  const localeWords = this.localeWords[targetLocale];
+
+  let translated = localeWords?.[key] || key;
+
+  if (typeof plural !== 'undefined') {
+    if (typeof translated === 'object' && !Array.isArray(translated)) {
+      const pluralCategory = new Intl.PluralRules(targetLocale).select(plural);
+      translated = translated[pluralCategory] || translated.other || key;
+    }
+  }
+
+  return translated;
+}
+
+  subscribe(callback) {
+    this.subscribers.push(callback);
+    return () => {
+      this.subscribers = this.subscribers.filter(sub => sub !== callback);
+    };
+  }
+  subscribersTrigger() {
+    this.subscribers.forEach(callback => callback(this.locale));
+  }
+}
+export default I18n;
diff --git a/src/i18n/translate.js b/src/i18n/translate.js
deleted file mode 100644
index c4c60db93..000000000
--- a/src/i18n/translate.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import * as translations from './translations';
-
-/**
- * Перевод фразу по словарю
- * @param lang {String} Код языка
- * @param text {String} Текст для перевода
- * @param [plural] {Number} Число для плюрализации
- * @returns {String} Переведенный текст
- */
-export default function translate(lang, text, plural) {
-  let result = translations[lang] && text in translations[lang] ? translations[lang][text] : text;
-
-  if (typeof plural !== 'undefined') {
-    const key = new Intl.PluralRules(lang).select(plural);
-    if (key in result) {
-      result = result[key];
-    }
-  }
-
-  return result;
-}
diff --git a/src/i18n/translations/en.json b/src/i18n/translations/en.json
index 0ebbcf8f2..91eadbd84 100644
--- a/src/i18n/translations/en.json
+++ b/src/i18n/translations/en.json
@@ -22,5 +22,10 @@
   "auth.login-placeholder": "Enter login",
   "auth.password-placeholder": "Enter password",
   "session.signIn": "Sign In",
-  "session.signOut": "Sign Out"
+  "session.signOut": "Sign Out",
+  "product.country": "Manufacturer country",
+  "product.category": "Category",
+  "product.year": "Release year",
+  "product.price": "Price",
+  "product.comments": "Comments"
 }
diff --git a/src/i18n/translations/ru.json b/src/i18n/translations/ru.json
index a18fb845e..4c3f14ab7 100644
--- a/src/i18n/translations/ru.json
+++ b/src/i18n/translations/ru.json
@@ -24,5 +24,10 @@
   "auth.login-placeholder": "Введите логин",
   "auth.password-placeholder": "Введите пароль",
   "session.signIn": "Вход",
-  "session.signOut": "Выход"
+  "session.signOut": "Выход",
+  "product.country": "Страна производитель",
+  "product.category": "Категория",
+  "product.year": "Год выпуска",
+  "product.price": "Цена",
+  "product.comments": "Комментарии"
 }
diff --git a/src/index.js b/src/index.js
index f49db385a..9404d09eb 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,7 +2,6 @@ import { createRoot } from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
 import { Provider } from 'react-redux';
 import { ServicesContext } from './context';
-import { I18nProvider } from './i18n/context';
 import App from './app';
 import Services from './services';
 import config from './config';
@@ -16,11 +15,9 @@ const root = createRoot(document.getElementById('root'));
 root.render(
   <Provider store={services.redux}>
     <ServicesContext.Provider value={services}>
-      <I18nProvider>
-        <BrowserRouter>
-          <App />
-        </BrowserRouter>
-      </I18nProvider>
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
     </ServicesContext.Provider>
   </Provider>,
 );
diff --git a/src/services.js b/src/services.js
index a32b14d57..c80cdf33f 100644
--- a/src/services.js
+++ b/src/services.js
@@ -1,6 +1,7 @@
 import APIService from './api';
 import Store from './store';
 import createStoreRedux from './store-redux';
+import I18n from './i18n'; 
 
 class Services {
   constructor(config) {
@@ -38,6 +39,17 @@ class Services {
     }
     return this._redux;
   }
+
+  /**
+   * Сервис мультиязычности (I18n)
+   * @returns {I18n}
+   */
+  get i18n() {
+    if (!this._i18n) {
+      this._i18n = new I18n(this, this.config.i18n);
+    }
+    return this._i18n;
+  }
 }
 
 export default Services;
diff --git a/src/store-redux/comments/actions.js b/src/store-redux/comments/actions.js
new file mode 100644
index 000000000..154a26129
--- /dev/null
+++ b/src/store-redux/comments/actions.js
@@ -0,0 +1,68 @@
+const actions = {
+  /**
+   * Загрузка comments
+   * @param id
+   * @return {Function}
+   */
+  load: id => {
+    return async (dispatch, getState, services) => {
+      dispatch({ type: 'comments/load-start' });
+
+      try {
+        const res = await services.api.request({
+          url: `/api/v1/comments?fields=items(_id,text,dateCreate,author(profile(name)),parent(_id,_type),isDeleted),count&limit=*&search[parent]=${id}`,
+        });
+        dispatch({ type: 'comments/load-success', payload: { data: res.data.result } });
+      } catch (e) {
+        dispatch({ type: 'comments/load-error' });
+      }
+    };
+  },
+  createComment: ({ _type, _id, text }) => {
+    return async (dispatch, getState, services) => {
+      try {
+        const token = localStorage.getItem('token');
+
+        if (!token) {
+          console.error('токен не обнаружен')
+          return;
+        }
+        const userProfile = await services.store.state.session.user.profile
+        
+        const res = await services.api.request({
+          url: `/api/v1/comments`,
+          method: 'POST',
+          contentType: 'application/json',
+          headers: {
+            'X-Token': token,
+          },
+          body: JSON.stringify({ text: text, parent: { _id: _id, _type: _type } }),
+        });
+        if(!res.ok) {
+            console.log(res.status)
+        }
+        const commentData = {
+          ...res.data.result,
+          author: {
+            ...res.data.result.author,
+            profile: { ...userProfile }
+          }
+        };
+        
+        dispatch({
+          type: 'comments/create-success',
+          payload: { data: commentData }
+        });
+        //если добавить поле name в profile на бэке, можно сразу обновить тут и убрать обновление комментариев
+
+        /* dispatch(actions.load(_id)); */// либо можно просто обновить список комментариев, но это будет дополнительный запрос
+
+        return commentData;
+      } catch (e) {
+        console.error(e);
+        dispatch({ type: 'comments/create-error', payload: 'Ошибка создания комментария' });
+      }
+    };
+  },
+};
+export default actions;
diff --git a/src/store-redux/comments/reducer.js b/src/store-redux/comments/reducer.js
new file mode 100644
index 000000000..b43f9babe
--- /dev/null
+++ b/src/store-redux/comments/reducer.js
@@ -0,0 +1,67 @@
+export const initialState = {
+  data: { items: [], count: 0 },
+  waiting: true,
+  error: null,
+};
+
+function reducer(state = initialState, action) {
+  switch (action.type) {
+    case 'comments/load-start':
+      return { ...state, data: {}, waiting: true };
+
+    case 'comments/load-success':
+      return { ...state, data: action.payload.data, waiting: false };
+
+    case 'comments/load-error':
+      return { ...state, data: {}, waiting: false, error: action.payload.data };
+
+    case 'comments/create-start':
+      return { ...state, waiting: true };
+
+    case 'comments/create-success':
+      const newComment = action.payload.data;
+
+      if (action.payload.data.parent._type !== 'comment') {
+        const updatedItems = [...state.data.items, newComment];
+
+        return {
+          ...state,
+          data: {
+            ...state.data,
+            items: updatedItems,
+          },
+          waiting: false,
+          error: null,
+        };
+      } else {
+        const parentId = newComment.parent._id;
+        const items = state.data.items.map(item => {
+          if (item._id === parentId) {
+            return {
+              ...item,
+              children: [...item.children, newComment],
+            };
+          }
+          return item;
+        });
+
+        return {
+          ...state,
+          data: {
+            ...state.data,
+            items: [...items, newComment],
+          },
+          waiting: false,
+          error: null,
+        };
+      }
+
+    case 'comments/create-error':
+      return { ...state, waiting: false, error: action.payload };
+
+    default:
+      return state;
+  }
+}
+
+export default reducer;
diff --git a/src/store-redux/exports.js b/src/store-redux/exports.js
index 1a0a3d742..c7f1c588b 100644
--- a/src/store-redux/exports.js
+++ b/src/store-redux/exports.js
@@ -1,2 +1,3 @@
 export { default as article } from './article/reducer';
 export { default as modals } from './modals/reducer';
+export { default as comments } from './comments/reducer';
diff --git a/src/store/session/index.js b/src/store/session/index.js
index 32fecf0c4..7f463e2a8 100644
--- a/src/store/session/index.js
+++ b/src/store/session/index.js
@@ -5,6 +5,7 @@ import simplifyErrors from '../../utils/simplify-errors';
  * Сессия
  */
 class SessionState extends StoreModule {
+  
   /**
    * Начальное состояние
    * @return {Object}
diff --git a/src/utils/list-to-tree/index.js b/src/utils/list-to-tree/index.js
index fb4d20a66..88fe6d68f 100644
--- a/src/utils/list-to-tree/index.js
+++ b/src/utils/list-to-tree/index.js
@@ -4,7 +4,7 @@
  * @param [key] {String} Свойство с первичным ключом
  * @returns {Array} Корневые узлы
  */
-export default function listToTree(list, key = '_id') {
+export default function listToTree(list, key = '_id', type = null) {
   let trees = {};
   let roots = {};
   for (const item of list) {
@@ -17,6 +17,9 @@ export default function listToTree(list, key = '_id') {
     } else {
       trees[item[key]] = Object.assign(trees[item[key]], item);
     }
+    if ((type && item._type === type) || (!type && !item.parent?.[key])) {
+      roots[item[key]] = trees[item[key]];
+    }
 
     // Если элемент имеет родителя, то добавляем его в подчиненные родителя
     if (item.parent?.[key]) {