diff --git a/src/api/index.js b/src/api/index.js
index a5f073295..c38e3b6cf 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -20,10 +20,11 @@ class APIService {
    * @returns {Promise<{}>}
    */
   async request({ url, method = 'GET', headers = {}, ...options }) {
+    const lang = this.services?.i18n?.getLang();
     if (!url.match(/^(http|\/\/)/)) url = this.config.baseUrl + url;
     const res = await fetch(url, {
       method,
-      headers: { ...this.defaultHeaders, ...headers },
+      headers: { ...this.defaultHeaders, ...headers, 'Accept-Language': lang || 'ru' },
       ...options,
     });
     return { data: await res.json(), status: res.status, headers: res.headers };
diff --git a/src/app/article/index.js b/src/app/article/index.js
index 56859bc76..329d5709d 100644
--- a/src/app/article/index.js
+++ b/src/app/article/index.js
@@ -10,36 +10,52 @@ import Spinner from '../../components/spinner';
 import ArticleCard from '../../components/article-card';
 import LocaleSelect from '../../containers/locale-select';
 import TopHead from '../../containers/top-head';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch, useSelector as useSelectorRedux } from 'react-redux';
 import shallowequal from 'shallowequal';
 import articleActions from '../../store-redux/article/actions';
+import commentsActions from '../../store-redux/comments/actions';
+import CommentsSection from '../../components/comments-section';
+import useSelector from '../../hooks/use-selector';
 
 function Article() {
   const store = useStore();
 
   const dispatch = useDispatch();
-  // Параметры из пути /articles/:id
 
   const params = useParams();
+  const { t, lang } = useTranslate();
+
 
   useInit(() => {
-    //store.actions.article.load(params.id);
     dispatch(articleActions.load(params.id));
-  }, [params.id]);
+  }, [params.id, lang]);
+
+  useInit(() => {
+    dispatch(commentsActions.load(params.id));
+  }, [params.id]); // комментам язык не нужен
 
-  const select = useSelector(
+  const select = useSelectorRedux(
     state => ({
       article: state.article.data,
       waiting: state.article.waiting,
+      comments: state.comments.items,
+      commentsCount: state.comments.count,
+      commentsWaiting: state.comments.waiting,
     }),
     shallowequal,
   ); // Нужно указать функцию для сравнения свойства объекта, так как хуком вернули объект
 
-  const { t } = useTranslate();
+  const {userId, userName, u} = useSelector(
+    state => ({
+      userName: state.session.user?.profile?.name,
+      userId: state.session.user?._id,
+    }),
+  );
+
 
   const callbacks = {
-    // Добавление в корзину
     addToBasket: useCallback(_id => store.actions.basket.addToBasket(_id), [store]),
+    addComment: useCallback((data, onSuccess) => dispatch(commentsActions.add(data, userName, onSuccess)), [userName]),
   };
 
   return (
@@ -52,6 +68,16 @@ function Article() {
       <Spinner active={select.waiting}>
         <ArticleCard article={select.article} onAdd={callbacks.addToBasket} t={t} />
       </Spinner>
+      <Spinner active={select.commentsWaiting}>
+        <CommentsSection
+          comments={select.comments}
+          count={select.commentsCount}
+          articleId={params.id}
+          onAdd={callbacks.addComment}
+          userId={userId}
+          t={t}
+        />
+      </Spinner>
     </PageLayout>
   );
 }
diff --git a/src/app/basket/index.js b/src/app/basket/index.js
index 52a7badfd..a140280be 100644
--- a/src/app/basket/index.js
+++ b/src/app/basket/index.js
@@ -1,8 +1,7 @@
 import { memo, useCallback } from 'react';
-import { useDispatch, useStore as useStoreRedux } from 'react-redux';
+import { useDispatch} from 'react-redux';
 import useStore from '../../hooks/use-store';
 import useSelector from '../../hooks/use-selector';
-import useInit from '../../hooks/use-init';
 import useTranslate from '../../hooks/use-translate';
 import ItemBasket from '../../components/item-basket';
 import List from '../../components/list';
diff --git a/src/app/index.js b/src/app/index.js
index c54c2afc5..8cfbf3f1a 100644
--- a/src/app/index.js
+++ b/src/app/index.js
@@ -1,6 +1,4 @@
-import { useCallback, useContext, useEffect, useState } from 'react';
 import { Routes, Route } from 'react-router-dom';
-import useSelector from '../hooks/use-selector';
 import useStore from '../hooks/use-store';
 import useInit from '../hooks/use-init';
 import Main from './main';
@@ -10,6 +8,7 @@ import Login from './login';
 import Profile from './profile';
 import Protected from '../containers/protected';
 import { useSelector as useSelectorRedux } from 'react-redux';
+import useTranslate from '../hooks/use-translate';
 
 /**
  * Приложение
@@ -17,6 +16,7 @@ import { useSelector as useSelectorRedux } from 'react-redux';
  */
 function App() {
   const store = useStore();
+
   useInit(async () => {
     await store.actions.session.remind();
   });
diff --git a/src/app/main/index.js b/src/app/main/index.js
index 21a36457a..f055c27de 100644
--- a/src/app/main/index.js
+++ b/src/app/main/index.js
@@ -12,17 +12,16 @@ import TopHead from '../../containers/top-head';
 
 function Main() {
   const store = useStore();
+  const {lang, t} = useTranslate();
 
   useInit(
     async () => {
       await Promise.all([store.actions.catalog.initParams(), store.actions.categories.load()]);
     },
-    [],
+    [lang],
     true,
   );
 
-  const { t } = useTranslate();
-
   return (
     <PageLayout>
       <TopHead />
diff --git a/src/app/profile/index.js b/src/app/profile/index.js
index 9c6149159..73ee751cf 100644
--- a/src/app/profile/index.js
+++ b/src/app/profile/index.js
@@ -1,5 +1,4 @@
-import { memo, useCallback, useMemo } from 'react';
-import { useParams } from 'react-router-dom';
+import { memo } from 'react';
 import useStore from '../../hooks/use-store';
 import useSelector from '../../hooks/use-selector';
 import useTranslate from '../../hooks/use-translate';
@@ -8,25 +7,23 @@ import PageLayout from '../../components/page-layout';
 import Head from '../../components/head';
 import Navigation from '../../containers/navigation';
 import Spinner from '../../components/spinner';
-import ArticleCard from '../../components/article-card';
 import LocaleSelect from '../../containers/locale-select';
 import TopHead from '../../containers/top-head';
 import ProfileCard from '../../components/profile-card';
 
 function Profile() {
   const store = useStore();
+  const { t, lang } = useTranslate();
 
   useInit(() => {
     store.actions.profile.load();
-  }, []);
+  }, [lang]);
 
   const select = useSelector(state => ({
     profile: state.profile.data,
     waiting: state.profile.waiting,
   }));
 
-  const { t } = useTranslate();
-
   return (
     <PageLayout>
       <TopHead />
diff --git a/src/components/comment-form/index.js b/src/components/comment-form/index.js
new file mode 100644
index 000000000..20be1d725
--- /dev/null
+++ b/src/components/comment-form/index.js
@@ -0,0 +1,44 @@
+import { memo, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { cn as bem } from '@bem-react/classname';
+import './style.css';
+
+function CommentForm({ onAdd, onCancel, title, cancelButtonText, t}) {
+  const cn = bem('CommentForm');
+  const ref  = useRef(null)
+
+  const onSend = (e) => {
+    e.preventDefault();
+    const value = ref.current?.value;
+    if (!value.trim()) {
+      console.error('Нельзя оставлять пустые комментарии');
+      return;
+    }
+    const onSuccess = () => {
+      ref.current.value = '';
+      onCancel()
+    }
+    onAdd(value, onSuccess);
+  }
+
+  return (
+    <form className={cn()} onSubmit={onSend}>
+      <h3 className={cn('title')}>{title}</h3>
+      <textarea ref={ref} className={cn('textarea')} />
+      <div className={cn('actions')}>
+        <button>{t('comments.send')}</button>
+        {cancelButtonText && <button onClick={onCancel}>{cancelButtonText}</button>}
+      </div>
+    </form>
+  );
+}
+
+CommentForm.propTypes = {
+  onAdd: PropTypes.func,
+  onCancel: PropTypes.func,
+  t: PropTypes.func,
+  title: PropTypes.string.isRequired,
+  cancelButtonText: PropTypes.string,
+};
+
+export default memo(CommentForm);
diff --git a/src/components/comment-form/style.css b/src/components/comment-form/style.css
new file mode 100644
index 000000000..18740b994
--- /dev/null
+++ b/src/components/comment-form/style.css
@@ -0,0 +1,26 @@
+.CommentForm {
+  margin-bottom: 30px;
+  width: 100%;
+}
+
+.CommentForm-title {
+  font-size: 12px;
+  margin-bottom: 10px;
+  margin-top: 0;
+}
+
+.CommentForm-textarea {
+  width: 100%;
+  min-height: 76px;
+  resize: vertical;
+  margin-bottom: 10px;
+  padding: 4px;
+  box-sizing: border-box;
+  font-family: Arial, sans-serif;
+  font-size: 14px;
+}
+
+.CommentForm-actions {
+  display: flex;
+  gap: 10px;
+}
diff --git a/src/components/comment-list/index.js b/src/components/comment-list/index.js
new file mode 100644
index 000000000..1e45bf65b
--- /dev/null
+++ b/src/components/comment-list/index.js
@@ -0,0 +1,46 @@
+import { memo } from 'react';
+import PropTypes from 'prop-types';
+import { cn as bem } from '@bem-react/classname';
+import Comment from '../comment';
+import './style.css';
+
+const MIN_LEVEL_INDENT = 2;
+const MAX_LEVEL_INDENT = 5;
+
+function CommentList({comments, onAdd, openCommentId, onCancel, onOpen, t, isChildList, userId, level, children}) {
+  const cn = bem('CommentList');
+  return (
+    <ul className={cn({child: isChildList, indent: level <= MAX_LEVEL_INDENT && level >= MIN_LEVEL_INDENT})}>
+      {comments?.map(comment => (
+        <li key={comment._id}>
+          <Comment
+            openCommentId={openCommentId}
+            comment={comment}
+            onAdd={onAdd}
+            onCancel={onCancel}
+            onOpen={onOpen}
+            userId={userId}
+            level={level}
+            t={t}
+          />
+        </li>
+      ))}
+      {children}
+    </ul>
+  );
+}
+
+CommentList.propTypes = {
+  openCommentId: PropTypes.string,
+  comments: PropTypes.array,
+  onAdd: PropTypes.func,
+  onCancel: PropTypes.func,
+  onOpen: PropTypes.func,
+  isChildList: PropTypes.bool,
+  userId: PropTypes.string,
+  level: PropTypes.number,
+  t: PropTypes.func,
+  children: PropTypes.node,
+};
+
+export default memo(CommentList);
diff --git a/src/components/comment-list/style.css b/src/components/comment-list/style.css
new file mode 100644
index 000000000..282ec6f2d
--- /dev/null
+++ b/src/components/comment-list/style.css
@@ -0,0 +1,10 @@
+.CommentList {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.CommentList_indent {
+  list-style: none;
+  padding-left: 30px;
+}
diff --git a/src/components/comment-no-auth/index.js b/src/components/comment-no-auth/index.js
new file mode 100644
index 000000000..ae24da3a3
--- /dev/null
+++ b/src/components/comment-no-auth/index.js
@@ -0,0 +1,32 @@
+import { memo } from 'react';
+import PropTypes from 'prop-types';
+import { cn as bem } from '@bem-react/classname';
+import { Link, useLocation } from 'react-router-dom';
+import './style.css';
+
+function CommentNoAuth({ text, onCancel, buttonText, t = text => text}) {
+  const cn = bem('CommentNoAuth');
+  const {pathname} = useLocation();
+  return (
+    <div className={cn()}>
+      <Link className={cn('link')} state={{back: pathname}} to={`/login`}>
+        {t('comments.login-text')}
+      </Link>
+      <div>{text}</div>
+      {buttonText && (
+        <button className={cn('button')} onClick={onCancel}>
+          {buttonText}
+        </button>
+      )}
+    </div>
+  );
+}
+
+CommentNoAuth.propTypes = {
+  text: PropTypes.string,
+  t: PropTypes.func,
+  onCancel: PropTypes.func,
+  buttonText: PropTypes.string,
+};
+
+export default memo(CommentNoAuth);
diff --git a/src/components/comment-no-auth/style.css b/src/components/comment-no-auth/style.css
new file mode 100644
index 000000000..2d50530c5
--- /dev/null
+++ b/src/components/comment-no-auth/style.css
@@ -0,0 +1,23 @@
+.CommentNoAuth {
+  display: flex;
+  margin-bottom: 30px;
+  align-items: center;
+}
+
+.CommentNoAuth-button {
+  margin-left: 2px;
+  border: none;
+  background-color: transparent;
+  font-size: inherit;
+  color: gray;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.CommentNoAuth-button:hover {
+  color: black;
+}
+
+.CommentNoAuth-link:hover {
+  color: black;
+}
diff --git a/src/components/comment/index.js b/src/components/comment/index.js
new file mode 100644
index 000000000..6adbe7554
--- /dev/null
+++ b/src/components/comment/index.js
@@ -0,0 +1,97 @@
+import { memo, useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { cn as bem } from '@bem-react/classname';
+import CommentList from '../comment-list';
+import CommentForm from '../comment-form';
+import { toCommentDate } from '../../utils/date';
+import CommentNoAuth from '../comment-no-auth';
+import './style.css';
+import { Link } from 'react-router-dom';
+
+function Comment({comment, openCommentId, onCancel, onAdd, onOpen, userId, t = text => text, level }) {
+  const { author, text, dateCreate, isDeleted, children, _id } = comment;
+  const cn = bem('Comment');
+  const onAddAnswer = (text, onSuccess) => onAdd({parent: {_id, _type: 'comment'}, text}, onSuccess)
+
+  const isFormShow = Boolean(userId) && openCommentId === _id;
+
+  const formItem = useRef(null)
+
+  useEffect(() => {
+    if (isFormShow && formItem.current) {
+      formItem.current.scrollIntoView({behavior: 'smooth', block: 'center'})
+    }
+  }, [isFormShow])
+
+  return (
+    <div className={cn()}>
+      <div className={cn('user-date')}>
+        <div className={cn('user', {current: userId === author._id})}>{author.profile.name}</div>
+        <div className={cn('date')}>{toCommentDate(dateCreate)}</div>
+      </div>
+      <p className={cn('text')}>{ isDeleted ? t('comments.deleted-comment') : text}</p>
+      <button className={cn('answer-btn')} onClick={() => onOpen(_id)}>
+        {t('comments.answer')}
+      </button>
+      {!userId && openCommentId === _id && (
+        <CommentNoAuth
+          onCancel={onCancel}
+          buttonText={t('comments.cancel')}
+          text={t('comments.not-auth-text-answer')}
+          t={t}
+        />
+      )}
+      {(!!children?.length || isFormShow) && (
+        <CommentList
+          comments={children}
+          onAdd={onAdd}
+          openCommentId={openCommentId}
+          onCancel={onCancel}
+          onOpen={onOpen}
+          userId={userId}
+          level={level + 1}
+          t={t}
+        >
+          {isFormShow && (
+            <li ref={formItem}>
+              <CommentForm
+                onAdd={onAddAnswer}
+                onCancel={onCancel}
+                title={t('comments.new-answer')}
+                cancelButtonText={t('comments.cancel')}
+                t={t}
+              />
+            </li>
+            )}
+        </CommentList>
+        )}
+    </div>
+  );
+}
+
+Comment.propTypes = {
+  comment: PropTypes.shape({
+    children: PropTypes.array,
+    _id: PropTypes.string.isRequired,
+    parent: PropTypes.shape({
+      _id: PropTypes.string,
+      _type: PropTypes.oneOf(['article', 'comment']),
+    }),
+    text: PropTypes.string.isRequired,
+    dateCreate: PropTypes.string.isRequired,
+    isDeleted: PropTypes.bool,
+    author: PropTypes.shape({
+      profile: PropTypes.shape({
+        name: PropTypes.string.isRequired,
+      }).isRequired,
+    }).isRequired,
+  }),
+  onCancel: PropTypes.func,
+  onAdd: PropTypes.func,
+  onOpen: PropTypes.func,
+  userId: PropTypes.string,
+  t: PropTypes.func,
+  level: PropTypes.number,
+};
+
+export default memo(Comment);
diff --git a/src/components/comment/style.css b/src/components/comment/style.css
new file mode 100644
index 000000000..24087c29d
--- /dev/null
+++ b/src/components/comment/style.css
@@ -0,0 +1,38 @@
+.Comment-user-date {
+  display: flex;
+  gap: 10px;
+  font-size: 12px;
+}
+
+.Comment-user {
+  font-weight: bold;
+}
+
+.Comment-user_current {
+  color: #666666;
+}
+
+.Comment-date {
+  color: #666666;
+}
+
+.Comment-text {
+  font-size: 14px;
+  margin: 10px 0;
+  padding-right: 20px;
+  overflow-wrap: break-word;
+}
+
+.Comment-answer-btn {
+  color: #0087e9;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+  margin-bottom: 26px;
+  padding: 0;
+  font-size: 12px;
+}
+
+.Comment-answer-btn:hover {
+  text-decoration: underline;
+}
diff --git a/src/components/comments-section/index.js b/src/components/comments-section/index.js
new file mode 100644
index 000000000..5eb7b99fd
--- /dev/null
+++ b/src/components/comments-section/index.js
@@ -0,0 +1,63 @@
+import { memo, useMemo, useState } from 'react';
+import PropTypes from 'prop-types';
+import { cn as bem } from '@bem-react/classname';
+import CommentList from '../comment-list';
+import CommentForm from '../comment-form';
+import CommentNoAuth from '../comment-no-auth';
+import listToTree from '../../utils/list-to-tree';
+import './style.css';
+
+
+function CommentsSection({comments, count, t = text => text, articleId, onAdd, userId})  {
+  const cn = bem('CommentsSection');
+  const [openCommentId, setOpenCommentId] = useState(null);
+
+  const commentsTree = useMemo(() => listToTree(comments)[0]?.children || [], [comments]);
+
+  const callbacks = {
+    onCancel: () => setOpenCommentId(null),
+    onAddComment: (text, onSuccess) => onAdd({parent: {_type: 'article', _id: articleId}, text}, onSuccess)
+  }
+  return (
+    <section className={cn()}>
+      <h2 className={cn('title')}>
+        {t('comments.title')}({count})
+      </h2>
+      {!!commentsTree?.length && (
+        <CommentList
+          comments={commentsTree}
+          onAdd={onAdd}
+          openCommentId={openCommentId}
+          onCancel={callbacks.onCancel}
+          onOpen={setOpenCommentId}
+          userId={userId}
+          level={1}
+          t={t}
+        />
+        )}
+      {Boolean(userId) && !openCommentId && (
+        <CommentForm
+          onAdd={callbacks.onAddComment}
+          title={t('comments.new-comment')}
+          parentId={articleId}
+          onCancel={callbacks.onCancel}
+          t={t}
+          />
+        )}
+        {!userId && !openCommentId && (
+          <CommentNoAuth text={t('comments.not-auth-text-comment')} t={t}/>
+        )}
+    </section>
+  );
+}
+
+CommentsSection.propTypes = {
+  articleId: PropTypes.string.isRequired,
+  comments: PropTypes.array.isRequired,
+  count: PropTypes.number,
+  onAdd: PropTypes.func.isRequired,
+  t: PropTypes.func,
+  userId: PropTypes.string,
+};
+
+export default memo(CommentsSection);
diff --git a/src/components/comments-section/style.css b/src/components/comments-section/style.css
new file mode 100644
index 000000000..00df44170
--- /dev/null
+++ b/src/components/comments-section/style.css
@@ -0,0 +1,8 @@
+.CommentsSection {
+  padding: 0 40px 40px 40px;
+  margin-top: 30px;
+}
+
+.CommentsSection-title {
+  margin-bottom: 24px;
+}
diff --git a/src/config.js b/src/config.js
index 67c72f734..3c2ad76bf 100644
--- a/src/config.js
+++ b/src/config.js
@@ -18,6 +18,9 @@ const config = {
   api: {
     baseUrl: '',
   },
+  i18n: {
+    defaultLang: 'ru',
+  },
 };
 
 export default config;
diff --git a/src/containers/locale-select/index.js b/src/containers/locale-select/index.js
index 462cfe387..927e5800f 100644
--- a/src/containers/locale-select/index.js
+++ b/src/containers/locale-select/index.js
@@ -1,11 +1,9 @@
-import { memo, useCallback, useMemo } from 'react';
-import useStore from '../../hooks/use-store';
-import useSelector from '../../hooks/use-selector';
-import useTranslate from '../../hooks/use-translate';
+import { memo, useMemo } from 'react';
 import Select from '../../components/select';
+import  useTranslate  from '../../hooks/use-translate';
 
 function LocaleSelect() {
-  const { lang, setLang } = useTranslate();
+  const { setLang, lang } = useTranslate();
 
   const options = {
     lang: useMemo(
diff --git a/src/hooks/use-translate.js b/src/hooks/use-translate.js
index bdcbf1071..93c5d96aa 100644
--- a/src/hooks/use-translate.js
+++ b/src/hooks/use-translate.js
@@ -1,9 +1,34 @@
-import { useCallback, useContext } from 'react';
-import { I18nContext } from '../i18n/context';
+import { useState, useEffect } from 'react';
+import useServices from './use-services';
 
-/**
- * Хук возвращает функцию для локализации текстов, код языка и функцию его смены
- */
 export default function useTranslate() {
-  return useContext(I18nContext);
+  const { i18n } = useServices(); // Получаем I18nService через сервисы
+  const [lang, setLangState] = useState(i18n.getLang());
+
+  // Подписываемся на изменения языка при монтировании компонента
+  useEffect(() => {
+    const handleLangChange = (newLang) => {
+      setLangState(newLang); // Обновляем состояние языка
+    };
+
+    // Подписка на изменения в I18nService
+    i18n.subscribe(handleLangChange);
+
+    // Отписываемся при размонтировании компонента
+    return () => {
+      i18n.unsubscribe(handleLangChange);
+    };
+  }, [i18n]);
+
+  // Функция для изменения языка
+  const setLang = (newLang) => {
+    i18n.setLang(newLang); // Вызываем метод setLang из I18nService
+  };
+
+  // Возвращаем функцию перевода и изменения языка
+  const translate = (text, number) => {
+    return i18n.translate(text, number);
+  };
+
+  return { t: translate, lang, setLang }; // Возвращаем перевод, текущий язык и функцию для его изменения
 }
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..b54dac63b
--- /dev/null
+++ b/src/i18n/index.js
@@ -0,0 +1,42 @@
+import translate from "./translate";
+
+class I18nService {
+  constructor(config = {}) {
+    this.lang = localStorage.getItem('lang') || config.defaultLang || 'ru';
+    this.subscribers = [];
+  }
+
+  // Подписка на изменение языка
+  subscribe(callback) {
+    this.subscribers.push(callback);
+  }
+
+  // Отписка от изменений языка
+  unsubscribe(callback) {
+    this.subscribers = this.subscribers.filter(sub => sub !== callback);
+  }
+
+  // Оповещение подписчиков об изменении языка
+  notifySubscribers() {
+    this.subscribers.forEach(callback => callback(this.lang));
+  }
+
+  // Устанавливает новый язык и уведомляет подписчиков
+  setLang(newLang) {
+    this.lang = newLang;
+    localStorage.setItem('lang', newLang);
+    this.notifySubscribers();
+  }
+
+  // Возвращает текущий язык
+  getLang() {
+    return this.lang;
+  }
+
+  // Метод перевода
+  translate(text, number) {
+    return translate(this.lang, text, number);
+  }
+}
+
+export default I18nService;
diff --git a/src/i18n/translate.js b/src/i18n/translate.js
index c4c60db93..84e9a89fc 100644
--- a/src/i18n/translate.js
+++ b/src/i18n/translate.js
@@ -8,8 +8,8 @@ import * as translations from './translations';
  * @returns {String} Переведенный текст
  */
 export default function translate(lang, text, plural) {
-  let result = translations[lang] && text in translations[lang] ? translations[lang][text] : text;
 
+  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) {
diff --git a/src/i18n/translations/en.json b/src/i18n/translations/en.json
index 171a28882..2d25274af 100644
--- a/src/i18n/translations/en.json
+++ b/src/i18n/translations/en.json
@@ -20,5 +20,17 @@
   "auth.password": "Password",
   "auth.signIn": "Sign in",
   "session.signIn": "Sign In",
-  "session.signOut": "Sign Out"
+  "session.signOut": "Sign Out",
+  "comments.title": "Comments",
+  "comments.answer": "Answer",
+  "comments.send": "Send",
+  "comments.cancel": "Cancel",
+  "comments.login-text": "Sign in",
+  "comments.not-auth-text-comment": " to leave a comment",
+  "comments.not-auth-text-answer": " to leave an answer",
+  "comments.new-comment": "New comment",
+  "comments.new-answer": "New answer",
+  "comments.placeholder": "Text",
+  "comments.no-auth-link": "Sign in",
+  "comments.deleted-comment": "Comment deleted"
 }
diff --git a/src/i18n/translations/ru.json b/src/i18n/translations/ru.json
index b2a32bfe1..9190bc728 100644
--- a/src/i18n/translations/ru.json
+++ b/src/i18n/translations/ru.json
@@ -22,5 +22,16 @@
   "auth.password": "Пароль",
   "auth.signIn": "Войти",
   "session.signIn": "Вход",
-  "session.signOut": "Выход"
+  "session.signOut": "Выход",
+  "comments.title": "Комментарии",
+  "comments.answer": "Ответить",
+  "comments.send": "Отправить",
+  "comments.cancel": "Отмена",
+  "comments.login-text": "Войдите",
+  "comments.not-auth-text-comment": ", чтобы иметь возможность комментировать",
+  "comments.not-auth-text-answer": ", чтобы иметь возможность отвечать",
+  "comments.new-comment": "Новый комментарий",
+  "comments.new-answer": "Новый ответ",
+  "comments.placeholder": "Текст",
+  "comments.deleted-comment": "Комментарий удалён"
 }
diff --git a/src/index.js b/src/index.js
index 83da7d13c..b90eab7a4 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';
@@ -11,15 +10,14 @@ const services = new Services(config);
 
 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>,
+  </Provider>
 );
diff --git a/src/services.js b/src/services.js
index a32b14d57..f9cc07dcf 100644
--- a/src/services.js
+++ b/src/services.js
@@ -1,4 +1,5 @@
 import APIService from './api';
+import I18nService from './i18n';
 import Store from './store';
 import createStoreRedux from './store-redux';
 
@@ -38,6 +39,13 @@ class Services {
     }
     return this._redux;
   }
+
+  get i18n() {
+    if (!this._i18n) {
+      this._i18n = new I18nService(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..05d657982
--- /dev/null
+++ b/src/store-redux/comments/actions.js
@@ -0,0 +1,44 @@
+export default {
+  /**
+   * Загрузка комментариев
+   * @param id
+   * @return {Function}
+   */
+  load: id => {
+    return async (dispatch, _, services) => {
+      dispatch({ type: 'comments/load-start' });
+      try {
+        const url = `/api/v1/comments?fields=items(_id,text,dateCreate,author(profile(name)),parent(_id,_type),isDeleted),count&limit=*&search[parent]=${id}`
+        const res = await services.api.request({ url });
+        const { count, items } = res.data.result;
+        dispatch({ type: 'comments/load-success', payload: { items, count } });
+      } catch (e) {
+        dispatch({ type: 'comments/load-error' });
+      }
+    };
+  },
+
+    /**
+   * Добавление комментария
+   * @param data {{text: string, parent: { _id: string, _type: string } }}
+   * @return {Function}
+   */
+  add: (data, userName, onSuccess) => {
+    return async (dispatch, _, services) => {
+      try {
+        const res = await services.api.request({
+          method: 'POST',
+          url: `/api/v1/comments`,
+          body: JSON.stringify(data),
+        });
+        const payload = {...res.data.result, author: { profile: { name: userName } } };
+        dispatch({ type: 'comments/add-success', payload });
+        if (onSuccess) onSuccess();
+      } catch (e) {
+        console.error({e})
+        dispatch({ type: 'comments/add-error' });
+      }
+    };
+  },
+};
+
diff --git a/src/store-redux/comments/reducer.js b/src/store-redux/comments/reducer.js
new file mode 100644
index 000000000..2bb54094f
--- /dev/null
+++ b/src/store-redux/comments/reducer.js
@@ -0,0 +1,28 @@
+export const initialState = {
+  items: [],
+  count: 0,
+  waiting: false,
+  error: ''
+};
+
+function reducer(state = initialState, action) {
+  switch (action.type) {
+    case 'comments/load-start': return { ...state, items: [], waiting: true };
+    case 'comments/load-success': {
+      const { items, count } = action.payload;
+      return { ...state, items, count, waiting: false, error: '' };
+    }
+    case 'comments/load-error':
+      return { ...state, items: [], waiting: false, error: 'Ошибка загрузки комментариев' };
+    case 'comments/add-success': {
+      const count = state.count + 1;
+      const items = [...state.items, action.payload];
+      return { ...state, items, count, waiting: false, error: '' };
+    }
+    case 'comments/add-error':
+      return { ...state, waiting: false, error: 'Ошибка добавления комментария' };
+    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..d81b3e08d 100644
--- a/src/store/session/index.js
+++ b/src/store/session/index.js
@@ -34,6 +34,7 @@ class SessionState extends StoreModule {
         body: JSON.stringify(data),
       });
 
+
       if (!res.data.error) {
         this.setState(
           {
diff --git a/src/utils/date.js b/src/utils/date.js
new file mode 100644
index 000000000..7e509d8e5
--- /dev/null
+++ b/src/utils/date.js
@@ -0,0 +1,8 @@
+export const toCommentDate = (isoDate) => {
+  const date = new Date(isoDate);
+  const dateOptions = {day: 'numeric', month: 'long', year: 'numeric'}
+  const formattedDate = date.toLocaleDateString('ru-RU', dateOptions);
+  const timeOptions = {hour: '2-digit', minute: '2-digit'}
+  const formattedTime = date.toLocaleTimeString('ru-RU', timeOptions);
+  return `${formattedDate.slice(0, -3)} в ${formattedTime}`;
+};