diff --git a/src/api/index.js b/src/api/index.js
index a5f073295..6a87d7ca1 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -8,7 +8,12 @@ class APIService {
     this.config = config;
     this.defaultHeaders = {
       'Content-Type': 'application/json',
+      'X-Lang': services.i18n.getLang(),
     };
+
+    this.services.i18n.subscribe((lang) => {
+      return this.setHeader('X-Lang', lang);
+    });
   }
 
   /**
diff --git a/src/app/article/index.js b/src/app/article/index.js
index 54f037b64..1cab6eda6 100644
--- a/src/app/article/index.js
+++ b/src/app/article/index.js
@@ -13,10 +13,14 @@ 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 CommentList from '../../containers/comment-list';
+
 
 function Article() {
   const store = useStore();
+  const { t, lang } = useTranslate();
 
   const dispatch = useDispatch();
   // Параметры из пути /articles/:id
@@ -26,7 +30,8 @@ function Article() {
   useInit(() => {
     //store.actions.article.load(params.id);
     dispatch(articleActions.load(params.id));
-  }, [params.id]);
+    dispatch(commentsActions.load(params.id));
+  }, [params.id, lang]);
 
   const select = useSelector(
     state => ({
@@ -36,13 +41,13 @@ function Article() {
     shallowequal,
   ); // Нужно указать функцию для сравнения свойства объекта, так как хуком вернули объект
 
-  const { t } = useTranslate();
 
   const callbacks = {
     // Добавление в корзину
     addToBasket: useCallback(_id => store.actions.basket.addToBasket(_id), [store]),
   };
 
+
   return (
     <>
       <HeadLayout>
@@ -56,6 +61,7 @@ function Article() {
         <Spinner active={select.waiting}>
           <ArticleCard article={select.article} onAdd={callbacks.addToBasket} t={t} />
         </Spinner>
+        <CommentList />
       </PageLayout>
     </>
   );
diff --git a/src/app/login/index.js b/src/app/login/index.js
index 32b86daa4..e5f44f1af 100644
--- a/src/app/login/index.js
+++ b/src/app/login/index.js
@@ -46,6 +46,7 @@ function Login() {
       e => {
         e.preventDefault();
         store.actions.session.signIn(data, () => {
+          console.log(location.state);
           // Возврат на страницу, с которой пришли
           const back =
             location.state?.back && location.state?.back !== location.pathname
@@ -69,7 +70,12 @@ function Login() {
       <PageLayout>
         <Navigation />
         <SideLayout padding="medium">
-          <Form onSubmit={callbacks.onSubmit} title={t('auth.title')} submitTitle={t('auth.signIn')}>
+          <Form
+            onSubmit={callbacks.onSubmit}
+            title={t('auth.title')}
+            submitTitle={t('auth.signIn')}
+            type="main"
+          >
             <Field label={t('auth.login')} error={select.errors?.login}>
               <Input
                 name="login"
diff --git a/src/app/main/index.js b/src/app/main/index.js
index d9fb1c6c2..054be0a27 100644
--- a/src/app/main/index.js
+++ b/src/app/main/index.js
@@ -13,16 +13,16 @@ import HeadLayout from '../../components/head-layout';
 
 function Main() {
   const store = useStore();
+  const { t, lang } = useTranslate();
 
   useInit(
     async () => {
       await Promise.all([store.actions.catalog.initParams(), store.actions.categories.load()]);
     },
-    [],
+    [lang],
     true,
   );
 
-  const { t } = useTranslate();
 
   return (
     <>
diff --git a/src/components/comment-input/index.js b/src/components/comment-input/index.js
new file mode 100644
index 000000000..038942531
--- /dev/null
+++ b/src/components/comment-input/index.js
@@ -0,0 +1,35 @@
+import { memo, useCallback, useLayoutEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { cn as bem } from '@bem-react/classname';
+
+import './style.css';
+
+function CommentInput(props) {
+  const { onChange = () => {}, type = 'text' } = props;
+
+  // Обработчик изменений в поле
+  const onChangeHandler = event => {
+    onChange(event.target.value);
+  };
+
+
+  const cn = bem('CommentInput');
+  return (
+    <textarea
+      className={cn()}
+      value={props.value}
+      type={type}
+      placeholder={props.placeholder}
+      onChange={onChangeHandler}
+      required
+    />
+  );
+}
+
+CommentInput.PropTypes = {
+  onChange: PropTypes.func,
+  type: PropTypes.string,
+}
+
+
+export default memo(CommentInput);
diff --git a/src/components/comment-input/style.css b/src/components/comment-input/style.css
new file mode 100644
index 000000000..6dedae172
--- /dev/null
+++ b/src/components/comment-input/style.css
@@ -0,0 +1,21 @@
+.CommentInput {
+  padding: 8px;
+  border: 1px solid var(--filter-border);
+  border-radius: 4px;
+  font-family: var(--font-family);
+  resize: none;
+  height: 88px;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 1152px;
+}
+
+.CommentInput:focus {
+  outline: none;
+}
+
+.CommentInput_isFormPadding {
+  width: calc(100% + 40px);
+  max-width: calc(1152px - 40)px;
+}
+
diff --git a/src/components/comment-login-message/index.js b/src/components/comment-login-message/index.js
new file mode 100644
index 000000000..d27f78706
--- /dev/null
+++ b/src/components/comment-login-message/index.js
@@ -0,0 +1,15 @@
+import { memo } from 'react';
+import { Link } from 'react-router-dom'
+import './style.css';
+
+function CommentLoginMessage(back) {
+  return (
+    <p className='Login-message'>
+      <Link to='/login' className='Login-link' state={back}>
+        Войдите
+      </Link>, чтобы иметь возможность комментировать
+    </p>
+  );
+}
+
+export default memo(CommentLoginMessage);
\ No newline at end of file
diff --git a/src/components/comment-login-message/style.css b/src/components/comment-login-message/style.css
new file mode 100644
index 000000000..479fe6ea2
--- /dev/null
+++ b/src/components/comment-login-message/style.css
@@ -0,0 +1,12 @@
+.Login-message {
+  font-size: 16px;
+  margin-top: 16px;
+  margin-bottom: 0;
+}
+
+.Login-link {
+  color: var(--primary);
+  &:hover {
+    color: var(--main-text);
+  }
+}
\ No newline at end of file
diff --git a/src/components/comment/index.js b/src/components/comment/index.js
new file mode 100644
index 000000000..e207a0869
--- /dev/null
+++ b/src/components/comment/index.js
@@ -0,0 +1,37 @@
+import { memo } from 'react';
+import PropTypes from 'prop-types';
+import { cn as bem } from '@bem-react/classname';
+import './style.css';
+import dateFormat from '../../utils/date-format';
+
+
+function Comment({
+  onClick = () => {},
+  item = {},
+  buttonTitle,
+  user = '',
+  }) {
+  const cn = bem('Comment');
+  const isAuthor = user === item.author?.profile.name;
+  return (
+    <div className={cn()}>
+      <div className={cn('info')}>
+        <h4 className={cn('profile', { isAuthor })}>{item.author?.profile.name}</h4>
+        <span className={cn('date')}>{dateFormat(item.dateCreate)}</span>
+      </div>
+      <div className={cn('main')}>
+        <p>
+        {item.text}
+        </p>
+      </div>
+      <button className={cn('button')} onClick={() => onClick(item._id)}>{buttonTitle}</button>
+    </div>
+  );
+}
+
+Comment.propTypes = {
+  onClick: PropTypes.func,
+  buttonTitle: PropTypes.string
+};
+
+export default memo(Comment);
diff --git a/src/components/comment/style.css b/src/components/comment/style.css
new file mode 100644
index 000000000..73e6cb622
--- /dev/null
+++ b/src/components/comment/style.css
@@ -0,0 +1,49 @@
+.Comment {
+  display: flex;
+  gap: 6px;
+  flex-direction: column;
+  align-items: flex-start;
+  font-size: 12px;
+  max-width: 1152px;
+}
+
+.Comment-info {
+  display: flex;
+  gap: 12px;
+  align-items: flex-end;
+}
+
+.Comment-profile {
+  font-weight: 700;
+}
+
+.Comment-date {
+  color: #666666;
+}
+
+.Comment-main {
+  overflow-wrap: break-word;
+  white-space: normal;
+  max-width: 100%;
+}
+
+.Comment-main p {
+  margin: 0;
+  font-size: 14px;
+}
+
+.Comment-profile_isAuthor {
+  color: #4B5563;
+}
+
+.Comment-button {
+  padding: 0;
+  border: none;
+  color: var(--primary);
+  font-size: 12px;
+  line-height: 18px;
+
+  &:hover {
+    color: var(--main-text);
+  }
+}
\ No newline at end of file
diff --git a/src/components/comments-layout/index.js b/src/components/comments-layout/index.js
new file mode 100644
index 000000000..48f7279ad
--- /dev/null
+++ b/src/components/comments-layout/index.js
@@ -0,0 +1,21 @@
+import React, { memo } from 'react';
+import PropTypes from 'prop-types';
+import { cn as bem } from '@bem-react/classname';
+import './style.css';
+
+function CommentsLayout({ children, gap = 'large', isPaddingLeft = false  }) {
+  const cn = bem('CommentsLayout');
+  return (
+    <div className={cn({ gap, isPaddingLeft })}>
+      {children}
+    </div>
+  );
+}
+
+CommentsLayout.PropTypes = {
+  children: PropTypes.node,
+  gap: PropTypes.oneOf(['medium', 'large']),
+  isPaddingLeft: PropTypes.bool,
+}
+
+export default memo(CommentsLayout);
diff --git a/src/components/comments-layout/style.css b/src/components/comments-layout/style.css
new file mode 100644
index 000000000..cf106c58f
--- /dev/null
+++ b/src/components/comments-layout/style.css
@@ -0,0 +1,17 @@
+.CommentsLayout {
+  display: flex;
+  flex-direction: column;
+  max-width: 1192px;
+}
+
+.CommentsLayout_gap_large {
+  gap: 24px;
+}
+
+.CommentsLayout_gap_medium {
+  gap: 16px;
+}
+
+.CommentsLayout_isPaddingLeft {
+  padding-left: 40px;
+}
\ No newline at end of file
diff --git a/src/components/form/index.js b/src/components/form/index.js
index 574945888..0fcc8b982 100644
--- a/src/components/form/index.js
+++ b/src/components/form/index.js
@@ -4,14 +4,19 @@ 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, onCancel, cancelTitle, type }) {
   const cn = bem('Form');
 
   return (
-    <form className={cn()} onSubmit={onSubmit}>
+    <form className={cn({ type })} onSubmit={onSubmit}>
       <h2 className={cn('title')}>{title}</h2>
       {children}
-      <Button style="primary" type="submit" title={submitTitle} />
+      <div className={cn('actions')}>
+        <Button style="primary" type="submit" title={submitTitle} />
+          {onCancel &&
+        <Button style="outline" type="button" title={cancelTitle} onClick={onCancel}/>
+        }
+      </div>
     </form>
   );
 }
@@ -21,6 +26,8 @@ Form.propTypes = {
   onSubmit: PropTypes.func,
   title: PropTypes.string,
   submitTitle: PropTypes.string,
+  onCancel: PropTypes.func,
+  cancelTitle: PropTypes.string
 };
 
 export default memo(Form);
diff --git a/src/components/form/style.css b/src/components/form/style.css
index fef9ffa64..0d0a89e12 100644
--- a/src/components/form/style.css
+++ b/src/components/form/style.css
@@ -1,7 +1,38 @@
-.Form-title {
+.Form_type_main h2 {
   margin-bottom: 24px;
 }
 
-.Form button {
+.Form_type_main button {
   margin-top: 24px;
 }
+
+.Form-actions {
+  display: flex;
+  gap: 16px;
+}
+
+.Form_type_comment {
+  margin-top: 24px;
+}
+
+.Form_type_comment h2 {
+  font-size: 16px;
+  margin-bottom: 16px;
+}
+
+.Form_type_comment button {
+  margin-top: 16px;
+}
+
+.Form_type_reply {
+  margin-top: 8px;
+}
+
+.Form_type_reply button {
+  margin-top: 16px;
+}
+
+.Form_type_reply h2 {
+  font-size: 16px;
+  margin-bottom: 16px;
+}
diff --git a/src/components/side-layout/index.js b/src/components/side-layout/index.js
index 711b0f51e..88c400d7e 100644
--- a/src/components/side-layout/index.js
+++ b/src/components/side-layout/index.js
@@ -3,10 +3,10 @@ import PropTypes from 'prop-types';
 import { cn as bem } from '@bem-react/classname';
 import './style.css';
 
-function SideLayout({ children, side, padding, gap }) {
+function SideLayout({ children, side, padding, gap, direction }) {
   const cn = bem('SideLayout');
   return (
-    <div className={cn({ side, padding, gap })}>
+    <div className={cn({ side, padding, gap, direction })}>
       {React.Children.map(children, child => (
         <div key={child.key} className={cn('item')}>
           {child}
diff --git a/src/components/side-layout/style.css b/src/components/side-layout/style.css
index 763e99af2..4d65426f6 100644
--- a/src/components/side-layout/style.css
+++ b/src/components/side-layout/style.css
@@ -7,6 +7,10 @@
   align-items: center;
 }
 
+.SideLayout_direction_column {
+  flex-direction: column;
+}
+
 .SideLayout_gap_big {
   gap: 24px;
 }
diff --git a/src/config.js b/src/config.js
index 67c72f734..d26e91206 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/comment-list/index.js b/src/containers/comment-list/index.js
new file mode 100644
index 000000000..ae1d47157
--- /dev/null
+++ b/src/containers/comment-list/index.js
@@ -0,0 +1,98 @@
+import { memo, useMemo, useCallback, useState, useEffect } from 'react';
+import useTranslate from '../../hooks/use-translate';
+import Spinner from '../../components/spinner';
+import Comment from '../../components/comment';
+import { useDispatch, useSelector as useSelectorRedux } from 'react-redux';
+import commentsFormat from '../../utils/comments-format';
+import shallowequal from 'shallowequal';
+import CommentInput from '../../components/comment-input';
+import Form from '../../components/form';
+import CommentsLayout from '../../components/comments-layout';
+import commentsActions from '../../store-redux/comments/actions';
+import InputWrapper from '../input-wrapper';
+import useSelector from '../../hooks/use-selector';
+import CommentWithForm from '../comment-with-form';
+
+function CommentList() {
+
+  const dispatch = useDispatch();
+
+  const [text, setText] = useState('');
+
+  const select = useSelectorRedux(
+    state => ({
+      comments: state.comments.items,
+      count: state.comments.count,
+      waitingComments: state.comments.waiting,
+      article: state.article,
+      activeCommentId: state.comments.activeCommentId,
+    }),
+    shallowequal,
+  );
+  
+  //Сбрасываем активный комментарий,чтобы отображалась только форма для создания нового комментария
+  useEffect(() => {
+    dispatch(commentsActions.resetActiveComment());
+  }, []);
+  
+
+  const callbacks = {
+    // Колбэк на ввод в элементах формы
+    onChange: useCallback((newText) => {
+      setText(newText);
+    }, []),
+
+    // Отправка формы для создания комментария
+    onSubmit: useCallback(
+      (e, id, type) => {
+        e.preventDefault();
+        if(text.trim().length !== 0) {
+          dispatch(commentsActions.sendComment(text.trim(), id, type));
+          setText('');
+        }
+      },
+      [text],
+    ),
+  };
+
+
+  const commentList = useMemo(() => {
+    return commentsFormat(select.article.data._id, select.comments);
+  }, [select.article, select.comments]);
+
+
+  const { t } = useTranslate();
+
+  return (
+    <>
+    <CommentsLayout>
+      <h2>{t('comments.title')} ({select.count})</h2>
+      <Spinner active={select.waitingComments}>
+        {commentList.map((item) => {
+          return (
+              <CommentWithForm
+                item={item}
+                level={0}
+                key={item._id}
+              />
+          )
+        })}
+      </Spinner>
+    </CommentsLayout>
+      {!select.activeCommentId &&
+        <InputWrapper>
+          <Form
+            title={t('comments.newComment')}
+            submitTitle={t('comments.submit')}
+            onSubmit={(e) => callbacks.onSubmit(e, select.article.data._id)}
+            type="comment"
+          >
+            <CommentInput onChange={callbacks.onChange} value={text}/>
+          </Form>
+        </InputWrapper>
+      }
+    </>
+  );
+}
+
+export default memo(CommentList);
diff --git a/src/containers/comment-with-form/index.js b/src/containers/comment-with-form/index.js
new file mode 100644
index 000000000..8860c7b6a
--- /dev/null
+++ b/src/containers/comment-with-form/index.js
@@ -0,0 +1,115 @@
+import { memo, useCallback, useState, useRef, useEffect } from 'react';
+import useTranslate from '../../hooks/use-translate';
+import Comment from '../../components/comment';
+import { useDispatch, useSelector as useSelectorRedux } from 'react-redux';
+import shallowequal from 'shallowequal';
+import CommentInput from '../../components/comment-input';
+import Form from '../../components/form';
+import commentsActions from '../../store-redux/comments/actions';
+import InputWrapper from '../input-wrapper';
+import useSelector from '../../hooks/use-selector';
+import CommentsLayout from '../../components/comments-layout';
+import PropTypes from 'prop-types';
+
+
+function CommentWithForm(props) {
+  const dispatch = useDispatch();
+
+  const inputFormRef = useRef(null);
+
+  const [text, setText] = useState('');
+
+  const { t } = useTranslate();
+  
+  const select = {...useSelectorRedux(
+    state => ({
+      activeCommentId: state.comments.activeCommentId,
+    }),
+    shallowequal,
+  ), ...useSelector(
+    state => ({
+      user: state.session.user,
+    })
+  )};
+
+  useEffect(() => {
+    if (inputFormRef.current) {
+      inputFormRef.current.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, [select.activeCommentId]);
+  
+  const callbacks = {
+    // Установка айди активного комментария
+    setActiveComment: useCallback(
+      id => dispatch(commentsActions.setActiveComment(id)),
+    [select.activeCommentId]),
+    //Сброс активного комментария
+    resetActiveComment: useCallback(() => {
+      dispatch(commentsActions.resetActiveComment());
+      setText('');
+    }, [select.activeCommentId]),
+
+    // Колбэк на ввод в элементах формы
+    onChange: useCallback((newText) => {
+      setText(newText);
+    }, []),
+
+    // Отправка формы для создания комментария
+    onSubmit: useCallback(
+      (e, id, type) => {
+        e.preventDefault();
+        if (text.trim().length !== 0) {
+          dispatch(commentsActions.sendComment(text, id, type));
+          setText('');
+          dispatch(commentsActions.resetActiveComment());
+        }
+      },
+      [text],
+    ),
+  };
+  const children = props.item.children;
+  const isPaddingLeft = props.level > 0 && props.level <= 10;
+  return (
+  <CommentsLayout isPaddingLeft={isPaddingLeft} gap="medium">
+    <Comment
+      item={props.item}
+      onClick={callbacks.setActiveComment}
+      buttonTitle={t('comments.answer')}
+      user={select.user.profile?.name}
+    />
+    {children?.map((child) => (
+      <CommentWithForm
+        item={child}
+        level={props.level + 1}
+        key={child._id}
+        text={text}
+      />))
+    }
+    {select.activeCommentId === props.item._id &&
+      <div style={{ paddingLeft: '40px'}} ref={inputFormRef}>
+        <InputWrapper>
+          <Form
+            title={t('comments.newAnswer')}
+            submitTitle={t('comments.submit')}
+            onCancel={callbacks.resetActiveComment}
+            onSubmit={(e) => callbacks.onSubmit(e, props.item._id, 'comment')}
+            cancelTitle={t('comments.cancel')}
+            type="reply"
+          >
+            <CommentInput
+              onChange={callbacks.onChange}
+              value={text}
+            />
+          </Form>
+        </InputWrapper>
+      </div>
+    }
+  </CommentsLayout>)
+
+}
+
+CommentWithForm.propTypes = {
+  level: PropTypes.number,
+};
+
+export default memo(CommentWithForm);
\ No newline at end of file
diff --git a/src/containers/input-wrapper/index.js b/src/containers/input-wrapper/index.js
new file mode 100644
index 000000000..8bbc003da
--- /dev/null
+++ b/src/containers/input-wrapper/index.js
@@ -0,0 +1,42 @@
+import { memo } from 'react';
+import { useSelector as useSelectorRedux } from 'react-redux';
+import shallowequal from 'shallowequal';
+import useSelector from '../../hooks/use-selector';
+import { useLocation } from 'react-router-dom';
+import CommentLoginMessage from '../../components/comment-login-message';
+import PropTypes from 'prop-types';
+
+function InputWrapper({ children }) {
+
+  const location = useLocation();
+
+  const select = {...useSelectorRedux(
+    state => ({
+      activeCommentId: state.comments.activeCommentId,
+    }),
+    shallowequal,
+  ),
+  ...useSelector(state => ({
+    exists: state.session.exists,
+    waiting: state.session.waiting,
+    }))
+  };
+
+  if (!select.exists && !select.waiting) {
+    return <CommentLoginMessage back={location.pathname} />
+  } 
+  
+  if (!select.exists || select.waiting){
+    return <div>Подождите</div>
+  } else {
+    return <div>{children}</div>
+  }
+}
+
+InputWrapper.propTypes = {
+  children: PropTypes.node,
+};
+
+
+
+export default memo(InputWrapper);
diff --git a/src/hooks/use-translate.js b/src/hooks/use-translate.js
index bdcbf1071..4ea501506 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 useServices from './use-services';
+import { useState, useEffect, useCallback } from 'react';
 
 /**
  * Хук возвращает функцию для локализации текстов, код языка и функцию его смены
  */
 export default function useTranslate() {
-  return useContext(I18nContext);
+  const { i18n } = useServices();
+  const [lang, setNewLang] = useState(i18n.getLang());
+  useEffect(() => {
+    const unsubscribe = i18n.subscribe(setNewLang);
+
+    return () => unsubscribe();
+  }, [i18n]);
+
+  const setLang = useCallback((newLang) => i18n.setLang(newLang), [i18n]);
+
+  return {
+    lang,
+    setLang,
+    t: (text, number) => i18n.translate(lang, text, number),
+  }
 }
diff --git a/src/i18n/index.js b/src/i18n/index.js
new file mode 100644
index 000000000..a2d03b966
--- /dev/null
+++ b/src/i18n/index.js
@@ -0,0 +1,50 @@
+import * as translations from './translations';
+
+class I18nService {
+  /**
+   * @param services {Services} Менеджер сервисов
+   * @param config {Object}
+   */
+  constructor(services, config = {}, lang) {
+    this.services = services;
+    this.config = config;
+    this.lang = lang || config.defaultLang;
+    this.listeners = [];
+  }
+
+  getLang() {
+    return this.lang;
+  }
+
+  subscribe(listener) {
+    this.listeners.push(listener);
+    return () => {
+      this.listeners = this.listeners.filter(item => item !== listener);
+    };
+  }
+
+  translate(lang = this.language, 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;
+  }
+
+  /**
+   * Установка языка
+   * @param lang {String} язык
+   */
+  setLang(newLang) {
+    if (newLang !== this.lang) {
+      this.lang = newLang;
+      for (const listener of this.listeners) listener(this.lang);
+    }
+  }
+}
+
+export default I18nService;
diff --git a/src/i18n/translations/en.json b/src/i18n/translations/en.json
index 0ebbcf8f2..11e6d5b34 100644
--- a/src/i18n/translations/en.json
+++ b/src/i18n/translations/en.json
@@ -22,5 +22,11 @@
   "auth.login-placeholder": "Enter login",
   "auth.password-placeholder": "Enter password",
   "session.signIn": "Sign In",
-  "session.signOut": "Sign Out"
+  "session.signOut": "Sign Out",
+  "comments.title": "Comments",
+  "comments.answer": "Answer",
+  "comments.newComment": "New comment",
+  "comments.newAnswer": "New answer",
+  "comments.submit": "Send",
+  "comments.cancel": "Cancel"
 }
diff --git a/src/i18n/translations/ru.json b/src/i18n/translations/ru.json
index a18fb845e..878b974c9 100644
--- a/src/i18n/translations/ru.json
+++ b/src/i18n/translations/ru.json
@@ -24,5 +24,11 @@
   "auth.login-placeholder": "Введите логин",
   "auth.password-placeholder": "Введите пароль",
   "session.signIn": "Вход",
-  "session.signOut": "Выход"
+  "session.signOut": "Выход",
+  "comments.title": "Комментарии",
+  "comments.answer": "Ответить",
+  "comments.newComment": "Новый комментарий",
+  "comments.newAnswer": "Новый ответ",
+  "comments.submit": "Отправить",
+  "comments.cancel": "Отменить"
 }
diff --git a/src/index.js b/src/index.js
index f49db385a..d540a3148 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>
     </ServicesContext.Provider>
   </Provider>,
 );
diff --git a/src/services.js b/src/services.js
index a32b14d57..b31663c70 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';
 
@@ -18,6 +19,17 @@ class Services {
     return this._api;
   }
 
+  /**
+   * Сервис языка
+   * @returns {I18nService}
+   */
+  get i18n() {
+    if (!this._i18n) {
+      this._i18n = new I18nService(this, this.config.i18n);
+    }
+    return this._i18n;
+  }
+
   /**
    * Сервис Store
    * @returns {Store}
diff --git a/src/store-redux/comments/actions.js b/src/store-redux/comments/actions.js
new file mode 100644
index 000000000..36bc87f99
--- /dev/null
+++ b/src/store-redux/comments/actions.js
@@ -0,0 +1,57 @@
+
+export default {
+  /**
+   * Загрузка комментариев к товару
+   * @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: { items: res.data.result.items, count: res.data.result.count } });
+      } catch (e) {
+        //Ошибка загрузки
+        dispatch({ type: 'article/load-error' });
+      }
+    };
+  },
+
+  setActiveComment: id => {
+    return (dispatch) => {
+      dispatch({ type: 'comments/set-active-comment', payload: id });
+    }
+  },
+
+  resetActiveComment: () => {
+    return (dispatch) => {
+      dispatch({ type: 'comments/set-active-comment', payload: null });
+    }
+  },
+
+  sendComment: (text, id, type='article') => {
+    return async (dispatch, getState, services) => {
+      dispatch({ type: 'comments/send-start' });
+      try {
+        const res = await services.api.request({
+          url: `/api/v1/comments/?fields=_id,text,dateCreate,author(profile(name)),parent(_id,_type),isDeleted`,
+          method: 'POST',
+          body: JSON.stringify({"text": text, "parent": { "_id": id, "_type": type }}),
+        });
+        // Комментарий отправлен успешно
+        dispatch({ type: 'comments/send-success', payload: res.data.result });
+      } catch (e) {
+        //Ошибка
+        dispatch({ type: 'comments/send-error' });
+      }
+    }
+  },
+
+};
+
diff --git a/src/store-redux/comments/reducer.js b/src/store-redux/comments/reducer.js
new file mode 100644
index 000000000..4b5e74f27
--- /dev/null
+++ b/src/store-redux/comments/reducer.js
@@ -0,0 +1,41 @@
+
+// Начальное состояние
+export const initialState = {
+  items: [],
+  count: 0,
+  activeCommentId: null,
+  waiting: false, // признак ожидания загрузки
+  error: '',
+};
+
+// Обработчик действий
+function reducer(state = initialState, action) {
+  switch (action.type) {
+    case 'comments/load-start':
+      return { ...state, items: [], count: 0, waiting: true };
+
+    case 'comments/load-success':
+      return { ...state, items: action.payload.items, count: action.payload.count, waiting: false };
+
+    case 'comments/load-error':
+      return { ...state, items: [], count: 0, waiting: false }; //@todo текст ошибки сохранять?
+
+    case 'comments/set-active-comment':
+      return { ...state, activeCommentId: action.payload };
+
+    case 'comments/send-start':
+      return { ...state, waiting: true };
+
+    case 'comments/send-success':
+      return { ...state, items: [...state.items, action.payload], count: state.count + 1, waiting: false };
+    
+    case 'comments/send-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/utils/comments-format.js b/src/utils/comments-format.js
new file mode 100644
index 000000000..2ade85ca4
--- /dev/null
+++ b/src/utils/comments-format.js
@@ -0,0 +1,7 @@
+import parentToNull from './parent-to-null';
+import treeToList from './tree-to-list';
+import listToTree from './list-to-tree';
+
+export default function commentsFormat(articleId, items) {
+  return listToTree(parentToNull(articleId, items));
+}
\ No newline at end of file
diff --git a/src/utils/date-format.js b/src/utils/date-format.js
new file mode 100644
index 000000000..f9e99be31
--- /dev/null
+++ b/src/utils/date-format.js
@@ -0,0 +1,20 @@
+export default function dateFormat(dateStr) {
+  const date = new Date(dateStr);
+
+  const optionsDate = {
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric'
+  };
+
+  const optionsTime = {
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: false
+  };
+
+  const formattedDate = date.toLocaleString('ru-RU', optionsDate);
+  const formattedTime = date.toLocaleString('ru-RU', optionsTime);
+
+  return `${formattedDate.replace(' г.', '')} в ${formattedTime}`;
+}
\ No newline at end of file
diff --git a/src/utils/parent-to-null.js b/src/utils/parent-to-null.js
new file mode 100644
index 000000000..485281755
--- /dev/null
+++ b/src/utils/parent-to-null.js
@@ -0,0 +1,3 @@
+export default function parentToNull(articleId, items) {
+  return items.map((item) => item.parent._id === articleId ? { ...item, parent: null } : item);
+}
\ No newline at end of file