diff --git a/src/api/index.js b/src/api/index.js
index a5f073295..73b092b1e 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -19,11 +19,16 @@ class APIService {
    * @param options
    * @returns {Promise<{}>}
    */
+
   async request({ url, method = 'GET', headers = {}, ...options }) {
     if (!url.match(/^(http|\/\/)/)) url = this.config.baseUrl + url;
+
+    // Получаем текущий язык непосредственно перед запросом
+    const lang = this.services.I18n.getLang();
+
     const res = await fetch(url, {
       method,
-      headers: { ...this.defaultHeaders, ...headers },
+      headers: { ...this.defaultHeaders, ...headers, 'X-Lang': lang },
       ...options,
     });
     return { data: await res.json(), status: res.status, headers: res.headers };
@@ -34,6 +39,7 @@ class APIService {
    * @param name {String} Название заголовка
    * @param value {String|null} Значение заголовка
    */
+
   setHeader(name, value = null) {
     if (value) {
       this.defaultHeaders[name] = value;
diff --git a/src/app/article/index.js b/src/app/article/index.js
index 54f037b64..b84037f07 100644
--- a/src/app/article/index.js
+++ b/src/app/article/index.js
@@ -1,4 +1,4 @@
-import { memo, useCallback } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import { useParams } from 'react-router-dom';
 import useStore from '../../hooks/use-store';
 import useTranslate from '../../hooks/use-translate';
@@ -11,12 +11,17 @@ 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 useServices from '../../hooks/use-services';
 import shallowequal from 'shallowequal';
 import articleActions from '../../store-redux/article/actions';
+import commentActions from '../../store-redux/comments/actions';
 import HeadLayout from '../../components/head-layout';
+import Comments from '../../containers/comments';
 
 function Article() {
   const store = useStore();
+  const { I18n } = useServices();
+  const currentLang = I18n.getLang();
 
   const dispatch = useDispatch();
   // Параметры из пути /articles/:id
@@ -26,17 +31,20 @@ function Article() {
   useInit(() => {
     //store.actions.article.load(params.id);
     dispatch(articleActions.load(params.id));
-  }, [params.id]);
+    dispatch(commentActions.load(params.id))
+  }, [params.id, currentLang]);
 
   const select = useSelector(
     state => ({
       article: state.article.data,
       waiting: state.article.waiting,
+      comments: state.comments.comments,
+      commentsWaiting: state.comments.waiting,
     }),
     shallowequal,
   ); // Нужно указать функцию для сравнения свойства объекта, так как хуком вернули объект
 
-  const { t } = useTranslate();
+  const t = useTranslate();
 
   const callbacks = {
     // Добавление в корзину
@@ -56,6 +64,10 @@ function Article() {
         <Spinner active={select.waiting}>
           <ArticleCard article={select.article} onAdd={callbacks.addToBasket} t={t} />
         </Spinner>
+
+        <Spinner active={select.commentsWaiting}>
+          <Comments articleId={params.id} commentsList={select.comments} t={t} />
+        </Spinner>
       </PageLayout>
     </>
   );
diff --git a/src/app/basket/index.js b/src/app/basket/index.js
index 52a7badfd..1a45cfedf 100644
--- a/src/app/basket/index.js
+++ b/src/app/basket/index.js
@@ -2,7 +2,6 @@ import { memo, useCallback } from 'react';
 import { useDispatch, useStore as useStoreRedux } 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';
@@ -30,7 +29,7 @@ function Basket() {
     }, [store]),
   };
 
-  const { t } = useTranslate();
+  const t = useTranslate();
 
   const renders = {
     itemBasket: useCallback(
diff --git a/src/app/login/index.js b/src/app/login/index.js
index 32b86daa4..e84071bae 100644
--- a/src/app/login/index.js
+++ b/src/app/login/index.js
@@ -16,7 +16,7 @@ import HeadLayout from '../../components/head-layout';
 import Form from '../../components/form';
 
 function Login() {
-  const { t } = useTranslate();
+  const t = useTranslate();
   const location = useLocation();
   const navigate = useNavigate();
   const store = useStore();
diff --git a/src/app/main/index.js b/src/app/main/index.js
index d9fb1c6c2..0871567d3 100644
--- a/src/app/main/index.js
+++ b/src/app/main/index.js
@@ -1,4 +1,5 @@
 import { memo } from 'react';
+import useServices from '../../hooks/use-services';
 import useStore from '../../hooks/use-store';
 import useTranslate from '../../hooks/use-translate';
 import useInit from '../../hooks/use-init';
@@ -13,16 +14,18 @@ import HeadLayout from '../../components/head-layout';
 
 function Main() {
   const store = useStore();
+  const { I18n } = useServices();
+  const currentLang = I18n.getLang();
 
   useInit(
     async () => {
       await Promise.all([store.actions.catalog.initParams(), store.actions.categories.load()]);
     },
-    [],
+    [currentLang],
     true,
   );
 
-  const { t } = useTranslate();
+  const t = useTranslate();
 
   return (
     <>
diff --git a/src/app/profile/index.js b/src/app/profile/index.js
index 166d127fb..85b41ff8e 100644
--- a/src/app/profile/index.js
+++ b/src/app/profile/index.js
@@ -24,7 +24,7 @@ function Profile() {
     waiting: state.profile.waiting,
   }));
 
-  const { t } = useTranslate();
+  const t = useTranslate();
 
   return (
     <>
@@ -37,7 +37,7 @@ function Profile() {
       <PageLayout>
         <Navigation />
         <Spinner active={select.waiting}>
-          <ProfileCard data={select.profile} />
+          <ProfileCard data={select.profile} t={t} />
         </Spinner>
       </PageLayout>
     </>
diff --git a/src/components/article-card/index.js b/src/components/article-card/index.js
index d636d9f88..1d2872a72 100644
--- a/src/components/article-card/index.js
+++ b/src/components/article-card/index.js
@@ -6,29 +6,29 @@ import Button from '../button';
 import './style.css';
 
 function ArticleCard(props) {
-  const { article, onAdd = () => {}, t = text => text } = props;
+  const { article, onAdd = () => { }, t = text => text } = props;
   const cn = bem('ArticleCard');
   return (
     <div className={cn()}>
       <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('article.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('article.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('article.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('article.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/button/index.js b/src/components/button/index.js
index 7d1d3d05c..6502f1721 100644
--- a/src/components/button/index.js
+++ b/src/components/button/index.js
@@ -3,12 +3,12 @@ import PropTypes from 'prop-types';
 import { cn as bem } from '@bem-react/classname';
 import './style.css';
 
-function Button({ onClick = () => {}, title, style, type = 'button' }) {
+function Button({ onClick = () => { }, title, style, type = 'button', className }) {
   const cn = bem('Button');
 
   return (
     <div className={cn()}>
-      <button type={type} className={cn({ style })} onClick={() => onClick()}>{title}</button>
+      <button type={type} className={cn({ style }, className)} onClick={onClick}>{title}</button>
     </div>
   );
 }
@@ -18,6 +18,7 @@ Button.propTypes = {
   title: PropTypes.string,
   style: PropTypes.oneOf(['text', 'primary', 'delete', 'outline']),
   type: PropTypes.oneOf(['button', 'submit']),
+  className: PropTypes.string,
 };
 
 export default memo(Button);
diff --git a/src/components/comment-form/index.js b/src/components/comment-form/index.js
new file mode 100644
index 000000000..a6f958ac3
--- /dev/null
+++ b/src/components/comment-form/index.js
@@ -0,0 +1,31 @@
+import React, { useState, forwardRef } from 'react';
+import './style.css';
+import PropTypes from 'prop-types';
+import Button from '../button';
+
+const CommentForm = forwardRef(({ onSubmit, level = 0, t }, ref) => {
+    const [commentText, setCommentText] = useState('');
+
+    const marginLeft = level * 40;
+
+    const handleSubmit = e => {
+        e.preventDefault();
+        onSubmit(commentText)
+    }
+
+    return (
+        <form style={{ marginLeft: marginLeft }} className='Comment-form' ref={ref}>
+            <h2 className='Comment-form-title'>{t('comments.formTitle')}</h2>
+            <textarea value={commentText} onChange={e => setCommentText(e.target.value)} className='Comment-form-field' />
+            <Button style='primary' title={t('comments.formSend')} type='submit' onClick={e => handleSubmit(e)} />
+        </form>
+    )
+})
+
+CommentForm.propTypes = {
+    onSubmit: PropTypes.func,
+    level: PropTypes.number,
+    t: PropTypes.func,
+}
+
+export default React.memo(CommentForm);
\ No newline at end of file
diff --git a/src/components/comment-form/style.css b/src/components/comment-form/style.css
new file mode 100644
index 000000000..b5dd9d75a
--- /dev/null
+++ b/src/components/comment-form/style.css
@@ -0,0 +1,23 @@
+.Comment-form{
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    margin-block: 18px;
+}
+
+.Comment-form-title{
+    font-size: 16px;
+}
+
+.Comment-form-field{
+    border: 1px solid var(--filter-border);
+    border-radius: 4px;
+    height: 80px;
+    resize: none;
+    padding: 8px 12px;
+    font-size: 14px;
+}
+
+.Comment-form-field:focus{
+    outline: 1px solid var(--primary);
+}
\ No newline at end of file
diff --git a/src/components/comment-list/index.js b/src/components/comment-list/index.js
new file mode 100644
index 000000000..5a4fdb197
--- /dev/null
+++ b/src/components/comment-list/index.js
@@ -0,0 +1,44 @@
+import React from 'react';
+import './style.css';
+import PropTypes from 'prop-types';
+import Comment from '../comment';
+
+function CommentList({ commentsList, replyToCommentId, handleReplyComment, checkAuth, t }) {
+
+    const renderComments = (comments, level = 0) => {
+        return comments.map((comment) => (
+            <React.Fragment key={comment.id || comment._id}>
+                <Comment
+                    commentId={comment.id || comment._id}
+                    username={comment.author.profile.name}
+                    dateCreate={comment.dateCreate}
+                    text={comment.text}
+                    level={level}
+                    onClick={handleReplyComment}
+                    replyToCommentId={replyToCommentId}
+                    checkAuth={checkAuth}
+                    t={t}
+                />
+                {comment.children && comment.children.length > 0 && renderComments(comment.children, level + 1)}
+                {replyToCommentId === comment.id || replyToCommentId === comment._id && checkAuth(level)}
+            </React.Fragment>
+        ));
+    };
+
+    return (
+        <div className='Comments-list'>
+            {renderComments(commentsList)}
+            {!replyToCommentId && checkAuth()}
+        </div>
+    )
+}
+
+CommentList.propTypes = {
+    commentsList: PropTypes.array.isRequired,
+    replyToCommentId: PropTypes.string,
+    handleReplyComment: PropTypes.func,
+    checkAuth: PropTypes.func,
+    t: PropTypes.func,
+}
+
+export default React.memo(CommentList);
\ No newline at end of file
diff --git a/src/components/comment-list/style.css b/src/components/comment-list/style.css
new file mode 100644
index 000000000..8af367e45
--- /dev/null
+++ b/src/components/comment-list/style.css
@@ -0,0 +1,5 @@
+.Comments-list{
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
\ No newline at end of file
diff --git a/src/components/comment-non-session/index.js b/src/components/comment-non-session/index.js
new file mode 100644
index 000000000..0bfeec5d5
--- /dev/null
+++ b/src/components/comment-non-session/index.js
@@ -0,0 +1,23 @@
+import React, { forwardRef } from 'react';
+import './style.css';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+
+const CommentNonSession = forwardRef(({ url = '/login', level = 0 }, ref) => {
+    const marginLeft = level * 40;
+
+    return (
+        <div style={{ marginLeft: marginLeft }} className='Comment-non-session' ref={ref}>
+            <Link to={url} className='Comment-non-session-link'>Войдите</Link>
+            <span>, чтобы иметь возможность комментировать</span>
+        </div>
+    )
+})
+
+CommentNonSession.propTypes = {
+    url: PropTypes.string,
+    level: PropTypes.number,
+    t: PropTypes.func,
+}
+
+export default React.memo(CommentNonSession);
\ No newline at end of file
diff --git a/src/components/comment-non-session/style.css b/src/components/comment-non-session/style.css
new file mode 100644
index 000000000..17a18e73a
--- /dev/null
+++ b/src/components/comment-non-session/style.css
@@ -0,0 +1,7 @@
+.Comment-non-session{
+    margin-block: 18px;
+}
+
+.Comment-non-session-link{
+    color: var(--primary);
+}
\ 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..cf9313d47
--- /dev/null
+++ b/src/components/comment/index.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import './style.css';
+import PropTypes from 'prop-types';
+import Button from '../button';
+import { formatDate } from '../../utils/format-date';
+import CommentList from '../comment-list';
+
+function Comment({ commentId, username, dateCreate, text, level, onClick, t }) {
+    const marginL = level > 8
+        ? 7 * 40
+        : level * 40;
+
+
+    return (
+        <div style={{ marginLeft: marginL }} className={`Comment`}>
+            <div className='Comment-head'>
+                <span className='Comment-head-author'>{username}</span>
+                <span className='Comment-head-date'>{formatDate(dateCreate, t)}</span>
+            </div>
+            <div className='Comment-body'>
+                <p className='Comment-body-text'>{text}</p>
+            </div>
+            <Button style={'text'} title={t('comments.reply')} className={'comment-btn'} onClick={() => onClick(commentId)} />
+        </div>
+    )
+}
+
+Comment.propTypes = {
+    commentId: PropTypes.string,
+    username: PropTypes.string,
+    dateCreate: PropTypes.string,
+    text: PropTypes.string,
+    level: PropTypes.number.isRequired,
+    onClick: PropTypes.func,
+    handleReplyComment: PropTypes.func,
+    t: PropTypes.func,
+}
+
+export default React.memo(Comment)
+
diff --git a/src/components/comment/style.css b/src/components/comment/style.css
new file mode 100644
index 000000000..de59cb3be
--- /dev/null
+++ b/src/components/comment/style.css
@@ -0,0 +1,40 @@
+.Comment {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.Comment-head {
+    display: flex;
+    gap: 12px;
+    font-size: 12px;
+}
+
+.Comment-head-author {
+    font-weight: 600;
+}
+
+.Comment-head-date {
+    color: var(--close);
+}
+
+.Comment-body {
+    font-size: 14px;
+    width: 650px;
+    word-wrap: break-word;
+}
+
+.Comment-body p {
+    margin: 0;
+    padding: 0;
+}
+
+.comment-btn {
+    color: var(--primary);
+    font-size: 12px;
+}
+
+.reply {
+    padding-left: 40px;
+}
\ 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..9864e41c7
--- /dev/null
+++ b/src/components/comments-layout/index.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import './style.css';
+import PropTypes from 'prop-types';
+
+function CommentLayout({ title, commentsCount, children }) {
+    return (
+        <div className='Comments-layout'>
+            <h2 className='Comments-layout-title'>{title} ({commentsCount})</h2>
+            {children}
+        </div>
+    )
+}
+
+CommentLayout.propTypes = {
+    title: PropTypes.string,
+    commentsCount: PropTypes.number,
+    children: PropTypes.node,
+}
+
+export default React.memo(CommentLayout);
\ No newline at end of file
diff --git a/src/components/comments-layout/style.css b/src/components/comments-layout/style.css
new file mode 100644
index 000000000..6b0f74e0c
--- /dev/null
+++ b/src/components/comments-layout/style.css
@@ -0,0 +1,10 @@
+.Comments-layout{
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+}
+
+.Comments-layout-title{
+    font-family: var(--second-font-family);
+    margin-top: 16px;
+}
\ No newline at end of file
diff --git a/src/components/profile-card/index.js b/src/components/profile-card/index.js
index 121610ff4..e974ba018 100644
--- a/src/components/profile-card/index.js
+++ b/src/components/profile-card/index.js
@@ -3,22 +3,22 @@ import PropTypes from 'prop-types';
 import { cn as bem } from '@bem-react/classname';
 import './style.css';
 
-function ProfileCard({ data }) {
+function ProfileCard({ data, t }) {
   const cn = bem('ProfileCard');
 
   return (
     <div className={cn()}>
-      <h2 className={cn('title')}>Профиль</h2>
+      <h2 className={cn('title')}>{t('profile.title')}</h2>
       <div className={cn('prop')}>
-        <div className={cn('label')}>Имя:</div>
+        <div className={cn('label')}>{t('profile.name')}:</div>
         <div className={cn('value')}>{data?.profile?.name}</div>
       </div>
       <div className={cn('prop')}>
-        <div className={cn('label')}>Телефон:</div>
+        <div className={cn('label')}>{t('profile.phone')}:</div>
         <div className={cn('value')}>{data?.profile?.phone}</div>
       </div>
       <div className={cn('prop')}>
-        <div className={cn('label')}>Email:</div>
+        <div className={cn('label')}>{t('profile.email')}:</div>
         <div className={cn('value')}>{data?.email}</div>
       </div>
     </div>
@@ -27,6 +27,7 @@ function ProfileCard({ data }) {
 
 ProfileCard.propTypes = {
   data: PropTypes.object.isRequired,
+  t: PropTypes.func,
 };
 
 export default memo(ProfileCard);
diff --git a/src/containers/catalog-filter/index.js b/src/containers/catalog-filter/index.js
index 2eeca7564..8b624b478 100644
--- a/src/containers/catalog-filter/index.js
+++ b/src/containers/catalog-filter/index.js
@@ -60,8 +60,7 @@ function CatalogFilter() {
       [select.categories],
     ),
   };
-
-  const { t } = useTranslate();
+  const t = useTranslate();
 
   return (
     <SideLayout padding="medium">
diff --git a/src/containers/catalog-list/index.js b/src/containers/catalog-list/index.js
index d6af63ead..9beef31f0 100644
--- a/src/containers/catalog-list/index.js
+++ b/src/containers/catalog-list/index.js
@@ -39,7 +39,7 @@ function CatalogList() {
     ),
   };
 
-  const { t } = useTranslate();
+  const t = useTranslate();
 
   const renders = {
     item: useCallback(
diff --git a/src/containers/comments/index.js b/src/containers/comments/index.js
new file mode 100644
index 000000000..15ff78a82
--- /dev/null
+++ b/src/containers/comments/index.js
@@ -0,0 +1,80 @@
+import React, { useEffect, useCallback, useState, useRef } from "react";
+import PropTypes from "prop-types";
+import CommentList from "../../components/comment-list";
+import CommentsLayout from "../../components/comments-layout";
+import CommentNonSession from "../../components/comment-non-session";
+import useSelector from '../../hooks/use-selector';
+import CommentForm from "../../components/comment-form";
+import { useDispatch, useSelector as useReduxSelector } from "react-redux";
+import commentsActions from '../../store-redux/comments/actions';
+
+function Comments({ articleId, commentsList, t }) {
+    const { waiting, commentsCount } = useReduxSelector(state => state.comments);
+
+    if (waiting) {
+        return <p>{t('comments.loading')}</p>
+    }
+
+    const dispatch = useDispatch();
+    const [replyToCommentId, setReplyToCommentId] = useState(null);
+    const commentFormRef = useRef(null);
+    const { token } = useSelector(state => state.session);
+
+    const callbacks = {
+        onReplyClick: useCallback(id => setReplyToCommentId(id), [setReplyToCommentId]),
+
+        onSubmitComment: useCallback(comment => {
+            if (!comment || comment.trim() === '') {
+                alert('Комментарий пуст!');
+                return;
+            }
+
+            if (replyToCommentId) {
+                dispatch(commentsActions.sendReplyComment(replyToCommentId, comment, token));
+                setReplyToCommentId(null);
+            } else {
+                dispatch(commentsActions.sendArticleComment(articleId, comment, token));
+            }
+
+        }, [dispatch, articleId, replyToCommentId]),
+    }
+
+    const checkAuth = level => {
+        if (!token) {
+            return <CommentNonSession level={level} ref={commentFormRef} t={t} />
+        }
+
+        return <CommentForm onSubmit={callbacks.onSubmitComment} level={level} ref={commentFormRef} t={t} />
+    }
+
+    useEffect(() => {
+        if (commentFormRef.current && replyToCommentId) {
+            const scrollElem = commentFormRef.current;
+
+            window.scrollTo({
+                top: scrollElem.offsetTop + scrollElem.offsetHeight - window.innerHeight + 20,
+                behavior: 'smooth'
+            });
+        }
+    }, [commentFormRef.current])
+
+    return (
+        <CommentsLayout title={t('comments.title')} commentsCount={commentsCount}>
+            <CommentList
+                commentsList={commentsList}
+                replyToCommentId={replyToCommentId}
+                handleReplyComment={callbacks.onReplyClick}
+                checkAuth={checkAuth}
+                t={t}
+            />
+        </CommentsLayout>
+    )
+}
+
+Comments.propTypes = {
+    articleId: PropTypes.string,
+    commentsList: PropTypes.array,
+    t: PropTypes.func,
+}
+
+export default React.memo(Comments);
\ No newline at end of file
diff --git a/src/containers/locale-select/index.js b/src/containers/locale-select/index.js
index a60df2a9a..df0162c6d 100644
--- a/src/containers/locale-select/index.js
+++ b/src/containers/locale-select/index.js
@@ -1,11 +1,14 @@
 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 Select from '../../components/select';
+import useServices from '../../hooks/use-services';
 
 function LocaleSelect() {
-  const { lang, setLang } = useTranslate();
+  const { I18n } = useServices();
+
+  const handleLanguageChange = (newLang) => {
+    I18n.setLang(newLang);
+  }
 
   const options = {
     lang: useMemo(
@@ -17,7 +20,7 @@ function LocaleSelect() {
     ),
   };
 
-  return <Select onChange={setLang} value={lang} options={options.lang} size="small" text />;
+  return <Select onChange={handleLanguageChange} value={options.lang.value} options={options.lang} size="small" text />;
 }
 
 export default memo(LocaleSelect);
diff --git a/src/containers/navigation/index.js b/src/containers/navigation/index.js
index 44a2f8a4f..bbae91486 100644
--- a/src/containers/navigation/index.js
+++ b/src/containers/navigation/index.js
@@ -34,7 +34,7 @@ function Navigation() {
   };
 
   // Функция для локализации текстов
-  const { t } = useTranslate();
+  const t = useTranslate();
 
   const options = {
     menu: useMemo(() => [{ key: 1, title: t('menu.main'), link: '/' }], [t]),
diff --git a/src/containers/top-head/index.js b/src/containers/top-head/index.js
index 179a51cfb..0d8228093 100644
--- a/src/containers/top-head/index.js
+++ b/src/containers/top-head/index.js
@@ -7,7 +7,7 @@ import useStore from '../../hooks/use-store';
 import Button from '../../components/button';
 
 function TopHead() {
-  const { t } = useTranslate();
+  const t = useTranslate();
   const navigate = useNavigate();
   const location = useLocation();
   const store = useStore();
@@ -31,7 +31,7 @@ function TopHead() {
 
   return (
     <SideLayout side="end" padding="small" gap="big">
-      {select.exists ? <Link to="/profile" style={{fontSize: '16px'}}>{select.user.profile.name}</Link> : ''}
+      {select.exists ? <Link to="/profile" style={{ fontSize: '16px' }}>{select.user.profile.name}</Link> : ''}
       {select.exists ? (
         <Button style="text" onClick={callbacks.onSignOut} title={t('session.signOut')} />
       ) : (
diff --git a/src/hooks/use-translate.js b/src/hooks/use-translate.js
index bdcbf1071..9c886f0a4 100644
--- a/src/hooks/use-translate.js
+++ b/src/hooks/use-translate.js
@@ -1,9 +1,26 @@
-import { useCallback, useContext } from 'react';
-import { I18nContext } from '../i18n/context';
-
-/**
- * Хук возвращает функцию для локализации текстов, код языка и функцию его смены
- */
-export default function useTranslate() {
-  return useContext(I18nContext);
-}
+// src/hooks/useTranslate.js
+import { useState, useEffect } from 'react';
+import useServices from './use-services';
+
+const useTranslate = () => {
+    const { I18n } = useServices();
+    const [lang, setLang] = useState(I18n.getLang()); // Инициализация состояния текущим языком
+
+    useEffect(() => {
+        const handleLanguageChange = (newLang) => {
+            setLang(newLang); // Обновляем состояние при изменении языка в сервисе
+        };
+
+        I18n.addListener(handleLanguageChange); // Подписываемся на изменения языка
+
+        return () => {
+            I18n.removeListener(handleLanguageChange); // Отписываемся при размонтировании компонента
+        };
+    }, [I18n]);
+
+    const t = (text, number) => I18n.translate(lang, text, number); // Функция перевода
+
+    return t;
+};
+
+export default useTranslate;
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/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
deleted file mode 100644
index 0ebbcf8f2..000000000
--- a/src/i18n/translations/en.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-  "title": "Shop",
-  "menu.main": "Main",
-  "basket.title": "Cart",
-  "basket.open": "Open",
-  "basket.close": "Close",
-  "basket.inBasket": "In cart",
-  "basket.empty": "empty",
-  "basket.total": "Total",
-  "basket.unit": "pcs",
-  "basket.delete": "Delete",
-  "basket.articles": {
-    "one": "article",
-    "other": "articles"
-  },
-  "article.add": "Add",
-  "filter.reset": "Reset",
-  "auth.title": "Sign In",
-  "auth.login": "Login",
-  "auth.password": "Password",
-  "auth.signIn": "Sign in",
-  "auth.login-placeholder": "Enter login",
-  "auth.password-placeholder": "Enter password",
-  "session.signIn": "Sign In",
-  "session.signOut": "Sign Out"
-}
diff --git a/src/i18n/translations/ru.json b/src/i18n/translations/ru.json
deleted file mode 100644
index a18fb845e..000000000
--- a/src/i18n/translations/ru.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
-  "title": "Магазин",
-  "menu.main": "Главная",
-  "basket.title": "Корзина",
-  "basket.open": "Перейти",
-  "basket.close": "Закрыть",
-  "basket.inBasket": "В корзине",
-  "basket.empty": "пусто",
-  "basket.total": "Итого",
-  "basket.unit": "шт",
-  "basket.delete": "Удалить",
-  "basket.articles": {
-    "one": "товар",
-    "few": "товара",
-    "many": "товаров",
-    "other": "товара"
-  },
-  "article.add": "Добавить",
-  "filter.reset": "Сбросить",
-  "auth.title": "Вход",
-  "auth.login": "Логин",
-  "auth.password": "Пароль",
-  "auth.signIn": "Войти",
-  "auth.login-placeholder": "Введите логин",
-  "auth.password-placeholder": "Введите пароль",
-  "session.signIn": "Вход",
-  "session.signOut": "Выход"
-}
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..ae6e25186 100644
--- a/src/services.js
+++ b/src/services.js
@@ -1,5 +1,6 @@
 import APIService from './api';
 import Store from './store';
+import I18n from './services/i18n';
 import createStoreRedux from './store-redux';
 
 class Services {
@@ -38,6 +39,16 @@ class Services {
     }
     return this._redux;
   }
+
+  /**
+   * I18n
+   */
+  get I18n() {
+    if (!this._I18n) {
+      this._I18n = new I18n(this, this.config.i18n);
+    }
+    return this._I18n;
+  }
 }
 
 export default Services;
diff --git a/src/services/i18n/index.js b/src/services/i18n/index.js
new file mode 100644
index 000000000..44a1edada
--- /dev/null
+++ b/src/services/i18n/index.js
@@ -0,0 +1,54 @@
+import * as translations from './translations';
+
+class I18n {
+    constructor() {
+        this.lang = 'ru';
+        this.listeners = [];
+    }
+
+    getLang() {
+        return this.lang;
+    }
+
+    setLang(lang) {
+        if (this.lang !== lang) {
+            this.lang = lang;
+            this.notifyListeners(); // Оповещаем компоненты об изменении языка
+        }
+    }
+
+    /**
+    * Перевод фразу по словарю
+    * @param lang {String} Код языка
+    * @param text {String} Текст для перевода
+    * @param [plural] {Number} Число для плюрализации
+    * @returns {String} Переведенный текст
+    */
+    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;
+    }
+
+    // Методы для работы с слушателями
+    addListener(listener) {
+        this.listeners.push(listener);
+    }
+
+    removeListener(listener) {
+        this.listeners = this.listeners.filter(l => l !== listener);
+    }
+
+    notifyListeners() {
+        this.listeners.forEach(listener => listener(this.lang));
+    }
+}
+
+export default I18n;
\ No newline at end of file
diff --git a/src/services/i18n/translations/en.json b/src/services/i18n/translations/en.json
new file mode 100644
index 000000000..03e0a56cb
--- /dev/null
+++ b/src/services/i18n/translations/en.json
@@ -0,0 +1,51 @@
+{
+  "title": "Shop",
+  "menu.main": "Main",
+  "basket.title": "Cart",
+  "basket.open": "Open",
+  "basket.close": "Close",
+  "basket.inBasket": "In cart",
+  "basket.empty": "empty",
+  "basket.total": "Total",
+  "basket.unit": "pcs",
+  "basket.delete": "Delete",
+  "basket.articles": {
+    "one": "article",
+    "other": "articles"
+  },
+  "article.add": "Add",
+  "article.year": "Year of manufacture",
+  "article.category": "Category",
+  "article.country": "Country origin",
+  "article.price": "Price",
+  "filter.reset": "Reset",
+  "auth.title": "Sign In",
+  "auth.login": "Login",
+  "auth.password": "Password",
+  "auth.signIn": "Sign in",
+  "auth.login-placeholder": "Enter login",
+  "auth.password-placeholder": "Enter password",
+  "profile.title": "Profile",
+  "profile.name": "Name",
+  "profile.phone": "Phone",
+  "profile.email": "Email",
+  "session.signIn": "Sign In",
+  "session.signOut": "Sign Out",
+  "comments.loading": "Loading comments...",
+  "comments.title": "Comments",
+  "comments.reply": "Reply",
+  "comments.formTitle": "New comment",
+  "comments.formSend": "Send",
+  "january": "January",
+  "february": "February",
+  "march": "March",
+  "april": "April",
+  "may": "May",
+  "june": "June",
+  "july": "July",
+  "august": "August",
+  "september": "September",
+  "october": "October",
+  "november": "November",
+  "december": "December"
+}
\ No newline at end of file
diff --git a/src/i18n/translations/index.js b/src/services/i18n/translations/index.js
similarity index 100%
rename from src/i18n/translations/index.js
rename to src/services/i18n/translations/index.js
diff --git a/src/services/i18n/translations/ru.json b/src/services/i18n/translations/ru.json
new file mode 100644
index 000000000..b063ebebf
--- /dev/null
+++ b/src/services/i18n/translations/ru.json
@@ -0,0 +1,53 @@
+{
+  "title": "Магазин",
+  "menu.main": "Главная",
+  "basket.title": "Корзина",
+  "basket.open": "Перейти",
+  "basket.close": "Закрыть",
+  "basket.inBasket": "В корзине",
+  "basket.empty": "пусто",
+  "basket.total": "Итого",
+  "basket.unit": "шт",
+  "basket.delete": "Удалить",
+  "basket.articles": {
+    "one": "товар",
+    "few": "товара",
+    "many": "товаров",
+    "other": "товара"
+  },
+  "article.add": "Добавить",
+  "article.price": "Цена",
+  "article.year": "Год выпуска",
+  "article.category": "Категория",
+  "article.country": "Страна производитель",
+  "filter.reset": "Сбросить",
+  "auth.title": "Вход",
+  "auth.login": "Логин",
+  "auth.password": "Пароль",
+  "auth.signIn": "Войти",
+  "auth.login-placeholder": "Введите логин",
+  "auth.password-placeholder": "Введите пароль",
+  "profile.title": "Профиль",
+  "profile.name": "Имя",
+  "profile.phone": "Телефон",
+  "profile.email": "Почта",
+  "session.signIn": "Вход",
+  "session.signOut": "Выход",
+  "comments.loading": "Загрузка комментариев...",
+  "comments.title": "Комментарии",
+  "comments.reply": "Ответить",
+  "comments.formTitle": "Новый комментарий",
+  "comments.formSend": "Отправить",
+  "january": "января",
+  "february": "февраля",
+  "march": "марта",
+  "april": "апреля",
+  "may": "мая",
+  "june": "июня",
+  "july": "июля",
+  "august": "августа",
+  "september": "сентября",
+  "october": "октября",
+  "november": "ноября",
+  "december": "декабря"
+}
\ No newline at end of file
diff --git a/src/store-redux/comments/actions.js b/src/store-redux/comments/actions.js
new file mode 100644
index 000000000..bdb43a366
--- /dev/null
+++ b/src/store-redux/comments/actions.js
@@ -0,0 +1,84 @@
+export default {
+    /**
+     * id товара
+     * @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: { comments: res.data.result } });
+            } catch (e) {
+                //Ошибка загрузки
+                dispatch({ type: 'comments/load-error' });
+            }
+        };
+    },
+
+    sendArticleComment: (articleId, data, token) => {
+        return async (dispatch, getState, services) => {
+            // Сброс загрузки и установка признака ожидания загрузки
+            dispatch({ type: 'sendArticleComment/load-start' });
+
+            const sendingData = JSON.stringify({
+                text: data,
+                parent: { "_id": articleId, "_type": "article" }
+            })
+
+            try {
+                const res = await services.api.request({
+                    url: `/api/v1/comments`,
+                    method: 'POST',
+                    headers: { 'X-Token': token },
+                    body: sendingData,
+                });
+                // Комментарий отправлен
+                console.log(res);
+
+                dispatch({ type: 'sendArticleComment/load-success', payload: { status: true, message: 'Комментарий успешно отправлен!' } });
+
+            } catch (e) {
+                //Ошибка загрузки
+                dispatch({ type: 'sendArticleComment/load-error', payload: { status: false, message: 'Ошибка отправки комментария!' } });
+                console.log(e)
+            }
+        }
+    },
+
+    sendReplyComment: (replyId, data, token) => {
+        return async (dispatch, getState, services) => {
+            // Сброс загрузки и установка признака ожидания загрузки
+            dispatch({ type: 'sendReplyComment/load-start' });
+
+            const sendingData = JSON.stringify({
+                text: data,
+                parent: { "_id": replyId, "_type": "comment" }
+            })
+
+            try {
+                const res = await services.api.request({
+                    url: `/api/v1/comments`,
+                    method: 'POST',
+                    headers: { 'X-Token': token },
+                    body: sendingData,
+                });
+                // Комментарий отправлен
+                console.log(res);
+
+                dispatch({ type: 'sendReplyComment/load-success', payload: { status: true, message: 'Комментарий успешно отправлен!' } });
+
+            } catch (e) {
+                //Ошибка загрузки
+                dispatch({ type: 'sendReplyComment/load-error', payload: { status: false, message: 'Ошибка отправки комментария!' } });
+                console.log(e)
+            }
+        }
+    },
+};
\ No newline at end of file
diff --git a/src/store-redux/comments/reducer.js b/src/store-redux/comments/reducer.js
new file mode 100644
index 000000000..ca6adf36c
--- /dev/null
+++ b/src/store-redux/comments/reducer.js
@@ -0,0 +1,48 @@
+import listToTree from "../../utils/list-to-tree";
+import treeToList from "../../utils/tree-to-list";
+
+const initialState = {
+    comments: [],
+    commentsCount: 0,
+    waiting: false,
+    sendCommentStatus: null,
+}
+
+function reducer(state = initialState, action) {
+    switch (action.type) {
+        case 'comments/load-start':
+            return { ...state, comments: [], waiting: true };
+
+        case 'comments/load-success':
+            const commentsCount = action.payload.comments.count;
+            const commentsTree = listToTree(action.payload.comments.items);
+
+            return { ...state, comments: commentsTree[0].children, commentsCount, waiting: false };
+
+        case 'comments/load-error':
+            return { ...state, comments: [], waiting: false };
+
+        case 'sendArticleComment/load-start':
+            return { ...state, waiting: true };
+
+        case 'sendArticleComment/load-success':
+            return { ...state, sendCommentStatus: action.payload, waiting: false, };
+
+        case 'sendArticleComment/load-error':
+            return { ...state, waiting: false, sendCommentStatus: action.payload };
+
+        case 'sendReplyComment/load-start':
+            return { ...state, waiting: true };
+
+        case 'sendReplyComment/load-success':
+            return { ...state, sendCommentStatus: action.payload, waiting: false, };
+
+        case 'sendReplyComment/load-error':
+            return { ...state, waiting: false, sendCommentStatus: 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/utils/format-date.js b/src/utils/format-date.js
new file mode 100644
index 000000000..dcbb0bf7f
--- /dev/null
+++ b/src/utils/format-date.js
@@ -0,0 +1,12 @@
+export function formatDate(date, t = () => { }) {
+    const monthNames = ["january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december"];
+    const newDate = new Date(date);
+
+    const year = newDate.getFullYear();
+    const monthIndex = newDate.getMonth();
+    const month = t(`${monthNames[monthIndex]}`);
+    const day = newDate.getDate();
+    const time = `${newDate.getHours()}:${newDate.getMinutes()}`
+
+    return `${day} ${month} ${year} в ${time}`;
+}
\ No newline at end of file