diff --git a/api-examples/comments.http b/api-examples/comments.http
index fd797fb83..cba37f5d5 100644
--- a/api-examples/comments.http
+++ b/api-examples/comments.http
@@ -1,6 +1,6 @@
 # Комментрии к товару
 
-GET http://query.rest/api/v1/comments?fields=items(_id,text,dateCreate,author(profile(name)),parent(_id,_type),isDeleted),count&limit=*&search[parent]=670260bb7dd498df5525e5ed
+GET http://query.rest/api/v1/comments?fields=items(_id,text,dateCreate,author(profile(name)),parent(_id,_type),isDeleted),count&limit=*&search[parent]=67fb67e98702ec3fc67fef7e
 
 # Остальные методы в http://query.rest/api/v1/docs/ (http://localhost:8010/api/v1/docs/)
 
diff --git a/src/app/article/index.js b/src/app/article/index.js
index 54f037b64..4f86350c5 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, useEffect, useMemo } from 'react';
 import { useParams } from 'react-router-dom';
 import useStore from '../../hooks/use-store';
 import useTranslate from '../../hooks/use-translate';
@@ -10,10 +10,15 @@ 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 commentActions from '../../store-redux/comment/actions';
 import HeadLayout from '../../components/head-layout';
+import Comment from '../../components/comment';
+import listToTree from '../../utils/list-to-tree';
+import treeToList from '../../utils/tree-to-list';
+import useSelector from '../../hooks/use-selector';
 
 function Article() {
   const store = useStore();
@@ -23,12 +28,15 @@ function Article() {
 
   const params = useParams();
 
+  const { t, lang } = useTranslate();
+
   useInit(() => {
     //store.actions.article.load(params.id);
     dispatch(articleActions.load(params.id));
-  }, [params.id]);
+    dispatch(commentActions.load(params.id));
+  }, [params.id, lang]);
 
-  const select = useSelector(
+  const select = useSelectorRedux(
     state => ({
       article: state.article.data,
       waiting: state.article.waiting,
@@ -36,7 +44,29 @@ function Article() {
     shallowequal,
   ); // Нужно указать функцию для сравнения свойства объекта, так как хуком вернули объект
 
-  const { t } = useTranslate();
+  const selectComment = useSelectorRedux(
+    state => ({
+      comment: state.comment.data,
+      postRes: state.comment.postRes,
+      waitingComment: state.comment.waiting,
+    }),
+    shallowequal,
+  );
+
+  const selectUser = useSelector(state => ({
+    user: state.session.user,
+  }));
+
+  const commentList = useMemo(() => {
+    if (!selectComment.waitingComment) {
+      return [
+        ...treeToList(listToTree(selectComment.comment.items, '_id', 'article'), (item, level) => ({
+          ...item,
+          level: level,
+        })),
+      ];
+    } else return [];
+  }, [selectComment.comment, selectComment.postRes]);
 
   const callbacks = {
     // Добавление в корзину
@@ -55,6 +85,7 @@ function Article() {
         <Navigation />
         <Spinner active={select.waiting}>
           <ArticleCard article={select.article} onAdd={callbacks.addToBasket} t={t} />
+          <Comment count={selectComment.comment.count} comments={commentList} />
         </Spinner>
       </PageLayout>
     </>
diff --git a/src/app/login/index.js b/src/app/login/index.js
index 32b86daa4..41d10cb49 100644
--- a/src/app/login/index.js
+++ b/src/app/login/index.js
@@ -16,14 +16,14 @@ import HeadLayout from '../../components/head-layout';
 import Form from '../../components/form';
 
 function Login() {
-  const { t } = useTranslate();
+  const { t, lang } = useTranslate();
   const location = useLocation();
   const navigate = useNavigate();
   const store = useStore();
 
   useInit(() => {
     store.actions.session.resetErrors();
-  });
+  }, [lang]);
 
   const select = useSelector(state => ({
     waiting: state.session.waiting,
diff --git a/src/app/main/index.js b/src/app/main/index.js
index d9fb1c6c2..bc7e1f6b1 100644
--- a/src/app/main/index.js
+++ b/src/app/main/index.js
@@ -14,15 +14,15 @@ 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/app/profile/index.js b/src/app/profile/index.js
index 166d127fb..d76c21548 100644
--- a/src/app/profile/index.js
+++ b/src/app/profile/index.js
@@ -15,17 +15,17 @@ import HeadLayout from '../../components/head-layout';
 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 (
     <>
       <HeadLayout>
diff --git a/src/components/article-card/index.js b/src/components/article-card/index.js
index d636d9f88..f6cfe3007 100644
--- a/src/components/article-card/index.js
+++ b/src/components/article-card/index.js
@@ -7,28 +7,29 @@ import './style.css';
 
 function ArticleCard(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-card.origin-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-card.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-card.release-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-card.price")}:</div>
         <div className={cn('value')}>{numberFormat(article.price)} ₽</div>
       </div>
       <Button style="primary" onClick={() => onAdd(article._id)} title={t('article.add')} />
diff --git a/src/components/comment-form/index.js b/src/components/comment-form/index.js
new file mode 100644
index 000000000..3e5de6ee4
--- /dev/null
+++ b/src/components/comment-form/index.js
@@ -0,0 +1,92 @@
+import { memo, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { cn as bem } from '@bem-react/classname';
+import './style.css';
+import { Link, useNavigate, useParams } from 'react-router-dom';
+import { useState } from 'react';
+import Button from '../button';
+import useSelector from '../../hooks/use-selector';
+import { useSelector as useSelectorRedux } from 'react-redux';
+import { useDispatch } from 'react-redux';
+import commentActions from '../../store-redux/comment/actions';
+import commentFormAction from '../../store-redux/comment-form/actions';
+import useTranslate from '../../hooks/use-translate';
+import { useCallback } from 'react';
+
+
+function CommentForm() {
+  const cn = bem('CommentForm');
+  const [textValue, setTextValue] = useState('');
+
+  const dispatch = useDispatch();
+  const params = useParams();
+  const { t } = useTranslate();
+  const navigate = useNavigate();
+
+  const select = useSelector(state => ({
+    token: state.session.token,
+    exists: state.session.exists,
+  }));
+
+  const selectPlace = useSelectorRedux(state => state.commentForm.place);
+  const selectData = useSelectorRedux(state => state.comment.data)
+
+  const isCommonPlace = selectPlace === 'common';
+
+  const onSignIn = useCallback(() => {
+    navigate('/login', { state: { back: location.pathname } });
+  }, [location.pathname]);
+
+  const handlePostComment = () => {
+    if (textValue.trim().length !== 0) {
+      if (isCommonPlace) {
+        dispatch(commentActions.post(select.token, textValue, params.id));
+        
+      } else {
+        dispatch(commentActions.reply(select.token, textValue, selectPlace));
+      }
+    }
+    setTextValue('');
+  };
+
+  return (
+    <div className={cn()} style={{ marginLeft: `${!isCommonPlace ? '40px' : '0'}` }}>
+      {select.exists ? (
+        <>
+          <span className={cn('title')}>
+            {isCommonPlace ? t('comment-form.new-comment') : t('comment-form.new-reply')}
+          </span>
+          <textarea
+            className={cn('textarea')}
+            value={textValue}
+            onChange={e => setTextValue(e.target.value)}
+            rows={5}
+          ></textarea>
+          <div className={cn('buttons')}>
+            <Button onClick={handlePostComment} title={t('comment-form.send')} style="primary" />
+            {!isCommonPlace && (
+              <Button
+                title={t('comment-form.cancel')}
+                style="outline"
+                onClick={() => dispatch(commentFormAction.reset())}
+              />
+            )}
+          </div>
+        </>
+      ) : (
+        <div className={cn('unauthorized')}>
+          <button className={cn('link-login')} onClick={onSignIn}>
+            {t('comment.login')}
+          </button>
+          {t('comment.login-able-to-comment')}
+        </div>
+      )}
+    </div>
+  );
+}
+
+CommentForm.propTypes = {
+  children: PropTypes.node,
+};
+
+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..0d2a8d2df
--- /dev/null
+++ b/src/components/comment-form/style.css
@@ -0,0 +1,29 @@
+.CommentForm {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.CommentForm-buttons {
+  display: flex;
+  gap: 16px;
+}
+
+.CommentForm-textarea {
+  font-family: var(--font-family);
+  padding: 8px 12px;
+  color: var(--main-text);
+  &::placeholder {
+    color: var(--main-text);
+  }
+  &:focus {
+    outline: none;
+  }
+}
+
+.CommentForm-link-login {
+  padding: 0;
+  color: var(--primary);
+  font-family: var(--font-family);
+  font-weight: 400;
+}
\ No newline at end of file
diff --git a/src/components/comment-item/index.js b/src/components/comment-item/index.js
new file mode 100644
index 000000000..dceaea69b
--- /dev/null
+++ b/src/components/comment-item/index.js
@@ -0,0 +1,84 @@
+import { memo, useEffect, useRef, useState } from 'react';
+import { cn as bem } from '@bem-react/classname';
+import formatISODateToCustomString from '../../utils/format-iso-date';
+
+import './style.css';
+import CommentList from '../comment-list';
+import CommentForm from '../comment-form';
+import { useDispatch } from 'react-redux';
+import commentFormActions from '../../store-redux/comment-form/actions';
+import { useSelector as useSelectorRedux } from 'react-redux';
+import useSelector from '../../hooks/use-selector';
+import shallowequal from 'shallowequal';
+import useTranslate from '../../hooks/use-translate';
+
+function CommentItem({ item }) {
+  const cn = bem('CommentItem');
+  const dispatch = useDispatch();
+  const { t } = useTranslate();
+  const ref = useRef(null);
+  const [shouldScroll, setShouldScroll] = useState(false);
+
+  useEffect(() => {
+    if (shouldScroll) {
+      ref.current?.scrollIntoView({ behavior: 'smooth' });
+      setShouldScroll(false);
+    }
+  }, [shouldScroll]);
+
+  const select = useSelector(state => ({
+    user: state.session.user,
+    exists: state.session.exists,
+  }));
+
+  const selectCommentForm = useSelectorRedux(
+    state => ({
+      place: state.commentForm.place,
+    }),
+    shallowequal,
+  );
+
+  const scrollToTarget = () => {
+    setShouldScroll(true);
+  };
+
+  return (
+    <>
+      <div className={cn()}>
+        <div className={cn('head')}>
+          <span
+            className={`${cn('name')} ${item.author._id === select.user._id ? ' auth-user-name' : ''}`}
+          >
+            {item.author?.profile?.name || select.user.profile.name}
+          </span>
+          <span className={cn('date')}>{formatISODateToCustomString(item.dateCreate)}</span>
+        </div>
+        <p className={cn('text')}>{item.text}</p>
+        <button
+          className={cn('button')}
+          onClick={() => {
+            dispatch(commentFormActions.change(item._id));
+            scrollToTarget();
+          }}
+        >
+          {t('comment-item.reply')}
+        </button>
+      </div>
+      {item.children.length !== 0 && (
+        <CommentList
+          comments={item.children.map(el => ({ ...el, level: item.level + 1 }))}
+          curLevel={item.level + 1}
+        />
+      )}
+      {selectCommentForm.place === item._id && (
+        <div className={cn('form')} ref={ref}>
+          <CommentForm />
+        </div>
+      )}
+    </>
+  );
+}
+
+Comment.propTypes = {};
+
+export default memo(CommentItem);
diff --git a/src/components/comment-item/style.css b/src/components/comment-item/style.css
new file mode 100644
index 000000000..fc69e30a5
--- /dev/null
+++ b/src/components/comment-item/style.css
@@ -0,0 +1,43 @@
+.CommentItem {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.CommentItem-head {
+  display: flex;
+  gap: 12px;
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.CommentItem-name {
+  font-weight: 700;
+}
+
+.CommentItem-date {
+  color: #666666;
+}
+
+.CommentItem-text {
+  margin: 0;
+  font-size: 14px;
+  line-height: 20px;
+  overflow-wrap: break-word
+}
+
+.CommentItem-button {
+  padding: 0;
+  width: fit-content;
+  color: var(--primary);
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.auth-user-name {
+  color: #4B5563;
+}
+
+.CommentItem-form {
+  scroll-margin-top: 200px;
+}
\ 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..b94bc3a00
--- /dev/null
+++ b/src/components/comment-list/index.js
@@ -0,0 +1,23 @@
+import { memo, useState } from 'react';
+import { cn as bem } from '@bem-react/classname';
+import CommentItem from '../comment-item';
+
+import './style.css';
+
+function CommentList({ comments, curLevel = 0 }) {
+  const cn = bem('CommentList');
+
+  return (
+    <div style={{ marginLeft: `${curLevel===0 || curLevel>6 ? 0 : 40}px` }} className={cn()}>
+      {comments
+        .filter(item => item.level === curLevel)
+        .map(item => (
+          <CommentItem key={item._id} item={item} ></CommentItem>
+        ))}
+    </div>
+  );
+}
+
+CommentList.propTypes = {};
+
+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..4672ad887
--- /dev/null
+++ b/src/components/comment-list/style.css
@@ -0,0 +1,5 @@
+.CommentList {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
\ 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..91063fe10
--- /dev/null
+++ b/src/components/comment/index.js
@@ -0,0 +1,39 @@
+import { memo, useState } from 'react';
+import PropTypes from 'prop-types';
+import { cn as bem } from '@bem-react/classname';
+import './style.css';
+import { Link } from 'react-router-dom';
+import CommentForm from '../comment-form';
+import useSelector from '../../hooks/use-selector';
+import { useSelector as useSelectorRedux } from 'react-redux';
+import CommentList from '../../components/comment-list';
+import shallowequal from 'shallowequal';
+import useTranslate from '../../hooks/use-translate';
+
+function Comment({ count = 0, comments }) {
+  const cn = bem('Comment');
+
+  const {t} = useTranslate();
+
+  const selectCommentForm = useSelectorRedux(
+    state => ({
+      place: state.commentForm.place,
+    }),
+    shallowequal,
+  );
+
+  return (
+    <div className={cn()}>
+      {/* ДОБАВИТЬ ДИНАМИЧЕСКОЕ ОТОБРАЖЕНИЕ КОЛЛИЧЕСТВА КОММЕНТАРИЕВ */}
+      <h1 className={cn('title')}>{t('comment')} ({count})</h1>
+      <CommentList comments={comments} />
+      {selectCommentForm.place === 'common' && <CommentForm />}
+    </div>
+  );
+}
+
+Comment.propTypes = {
+  children: PropTypes.node,
+};
+
+export default memo(Comment);
diff --git a/src/components/comment/style.css b/src/components/comment/style.css
new file mode 100644
index 000000000..43e9bc9ac
--- /dev/null
+++ b/src/components/comment/style.css
@@ -0,0 +1,13 @@
+.Comment {
+    padding-top: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+}
+
+.Comment-title {
+    font-family: var(--second-font-family);
+    font-size: 24px;
+    line-height: 32px;
+}
+
diff --git a/src/config.js b/src/config.js
index 67c72f734..68d525fe8 100644
--- a/src/config.js
+++ b/src/config.js
@@ -18,6 +18,9 @@ const config = {
   api: {
     baseUrl: '',
   },
+  i18n: {
+    baseLang: 'ru',
+  },
 };
 
 export default config;
diff --git a/src/containers/catalog-filter/index.js b/src/containers/catalog-filter/index.js
index 2eeca7564..94b95a2a7 100644
--- a/src/containers/catalog-filter/index.js
+++ b/src/containers/catalog-filter/index.js
@@ -12,6 +12,8 @@ import Button from '../../components/button';
 function CatalogFilter() {
   const store = useStore();
 
+  const { t, lang } = useTranslate();
+
   const select = useSelector(state => ({
     sort: state.catalog.params.sort,
     query: state.catalog.params.query,
@@ -41,17 +43,17 @@ function CatalogFilter() {
     // Варианты сортировок
     sort: useMemo(
       () => [
-        { value: 'order', title: 'По порядку' },
-        { value: 'title.ru', title: 'По именованию' },
-        { value: '-price', title: 'Сначала дорогие' },
-        { value: 'edition', title: 'Древние' },
+        { value: 'order', title: t('sort.in-order') },
+        { value: 'title.ru', title: t('sort.by-naming') },
+        { value: '-price', title: t('sort.expensive-first') },
+        { value: 'edition', title: t('sort.ancient') },
       ],
-      [],
+      [lang],
     ),
     // Категории для фильтра
     categories: useMemo(
       () => [
-        { value: '', title: 'Все' },
+        { value: '', title: t('filter.all') },
         ...treeToList(listToTree(select.categories), (item, level) => ({
           value: item._id,
           title: '- '.repeat(level) + item.title,
@@ -61,8 +63,6 @@ function CatalogFilter() {
     ),
   };
 
-  const { t } = useTranslate();
-
   return (
     <SideLayout padding="medium">
       <Select
@@ -80,7 +80,7 @@ function CatalogFilter() {
       <Input
         value={select.query}
         onChange={callbacks.onSearch}
-        placeholder={'Поиск'}
+        placeholder={t('catalog.search')}
         delay={1000}
         theme={'big'}
       />
diff --git a/src/hooks/use-translate.js b/src/hooks/use-translate.js
index bdcbf1071..3ef7962aa 100644
--- a/src/hooks/use-translate.js
+++ b/src/hooks/use-translate.js
@@ -1,9 +1,29 @@
-import { useCallback, useContext } from 'react';
-import { I18nContext } from '../i18n/context';
+import useServices from './use-services';
+import { useState, useMemo, useEffect } from 'react';
 
 /**
  * Хук возвращает функцию для локализации текстов, код языка и функцию его смены
  */
+
 export default function useTranslate() {
-  return useContext(I18nContext);
+  const I18n = useServices().i18n;
+
+  const [locale, setLocale] = useState(I18n.getLocale())
+  
+  const unsubscribe = useMemo(() => {
+    return I18n.subscribe(setLocale)
+  })
+  
+    // Отписка от I18n при демонтировании компонента
+    useEffect(() => unsubscribe, [I18n]);
+
+    return {
+      lang: locale,
+      setLang: I18n.setLocale.bind(I18n),
+      t: I18n.translate.bind(I18n),
+    }
 }
+
+
+
+
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..3c7ee89b8
--- /dev/null
+++ b/src/i18n/index.js
@@ -0,0 +1,54 @@
+import * as translations from './translations';
+
+class I18nService {
+  /**
+   * @param services {Services} Менеджер сервисов
+   * @param config {Object}
+   */
+  constructor(services, config = {}, locale) {
+    this.services = services;
+    this.config = config;
+    this.listeners = [];
+    this.locale = locale;
+  }
+
+  getLocale() {
+    return this.locale;
+  }
+
+  setLocale(lang) {
+    if (this.locale !== lang) {
+      this.locale = lang;
+      for (const listener of this.listeners) listener(this.locale);
+      this.services.api.setHeader('X-Lang', this.locale)
+    }
+  }
+
+  translate(text, plural, lang = this.locale) {
+    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 listener {Function}
+   * @returns {Function} Функция отписки
+   */
+  subscribe(listener) {
+    this.listeners.push(listener);
+    // Возвращается функция для удаления добавленного слушателя
+    return () => {
+      this.listeners = this.listeners.filter(item => item !== listener);
+    };
+  }
+}
+
+export default I18nService;
diff --git a/src/i18n/translate.js b/src/i18n/translate.js
deleted file mode 100644
index c4c60db93..000000000
--- a/src/i18n/translate.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import * as translations from './translations';
-
-/**
- * Перевод фразу по словарю
- * @param lang {String} Код языка
- * @param text {String} Текст для перевода
- * @param [plural] {Number} Число для плюрализации
- * @returns {String} Переведенный текст
- */
-export default function translate(lang, text, plural) {
-  let result = translations[lang] && text in translations[lang] ? translations[lang][text] : text;
-
-  if (typeof plural !== 'undefined') {
-    const key = new Intl.PluralRules(lang).select(plural);
-    if (key in result) {
-      result = result[key];
-    }
-  }
-
-  return result;
-}
diff --git a/src/i18n/translations/en.json b/src/i18n/translations/en.json
index 0ebbcf8f2..1573b2a61 100644
--- a/src/i18n/translations/en.json
+++ b/src/i18n/translations/en.json
@@ -13,8 +13,27 @@
     "one": "article",
     "other": "articles"
   },
+  "catalog.search": "Search",
+  "comment": "Comments",
+  "comment.login": "Log in ",
+  "comment.login-able-to-comment": "to be able to comment",
+  "comment-form.new-comment": "New comment",
+  "comment-form.new-reply": "New reply",
+  "comment-form.placeholder": "My answer for",
+  "comment-form.send": "Send",
+  "comment-form.cancel": "Cancel",
+  "comment-item.reply": "Reply",
   "article.add": "Add",
+  "article-card.origin-country": "Country of origin",
+  "article-card.category": "Category",
+  "article-card.release-year": "Year of release",
+  "article-card.price": "Price",
+  "filter.all": "All",
   "filter.reset": "Reset",
+  "sort.in-order": "In order",
+  "sort.by-naming": "By naming",
+  "sort.expensive-first": "Expensive first",
+  "sort.ancient": "Ancient",
   "auth.title": "Sign In",
   "auth.login": "Login",
   "auth.password": "Password",
@@ -22,5 +41,18 @@
   "auth.login-placeholder": "Enter login",
   "auth.password-placeholder": "Enter password",
   "session.signIn": "Sign In",
-  "session.signOut": "Sign Out"
+  "session.signOut": "Sign Out",
+  "date.january": "January",
+  "date.february": "February",
+  "date.march": "March",
+  "date.april": "April",
+  "date.may": "May",
+  "date.june": "June",
+  "date.july": "July",
+  "date.august": "August",
+  "date.september": "September",
+  "date.october": "October",
+  "date.november": "November",
+  "date.december": "December",
+  "date.at": "at"
 }
diff --git a/src/i18n/translations/ru.json b/src/i18n/translations/ru.json
index a18fb845e..eab47b6eb 100644
--- a/src/i18n/translations/ru.json
+++ b/src/i18n/translations/ru.json
@@ -15,8 +15,27 @@
     "many": "товаров",
     "other": "товара"
   },
+  "catalog.search": "Поиск",
+  "comment": "Комментарии",
+  "comment.login": "Войдите",
+  "comment.login-able-to-comment": ", чтобы иметь возможность комментировать",
+  "comment-form.new-comment": "Новый комментарий",
+  "comment-form.new-reply": "Новый ответ",
+  "comment-form.placeholder": "Мой ответ для",
+  "comment-form.send": "Отправить",
+  "comment-form.cancel": "Отмена",
+  "comment-item.reply": "Ответить",
   "article.add": "Добавить",
+  "article-card.origin-country": "Страна производитель",
+  "article-card.category": "Категория",
+  "article-card.release-year": "Год выпуска",
+  "article-card.price": "Цена",
+  "filter.all": "Все",
   "filter.reset": "Сбросить",
+  "sort.in-order": "По порядку",
+  "sort.by-naming": "По именованию",
+  "sort.expensive-first": "Сначала дорогие",
+  "sort.ancient": "Древние",
   "auth.title": "Вход",
   "auth.login": "Логин",
   "auth.password": "Пароль",
@@ -24,5 +43,18 @@
   "auth.login-placeholder": "Введите логин",
   "auth.password-placeholder": "Введите пароль",
   "session.signIn": "Вход",
-  "session.signOut": "Выход"
+  "session.signOut": "Выход",
+  "date.january": "января",
+  "date.february": "февраля",
+  "date.march": "марта",
+  "date.april": "апреля",
+  "date.may": "мая",
+  "date.june": "июня",
+  "date.july": "июля",
+  "date.august": "августа",
+  "date.september": "сентября",
+  "date.october": "октября",
+  "date.november": "ноября",
+  "date.december": "декабря",
+  "date.at": "в"
 }
diff --git a/src/index.js b/src/index.js
index f49db385a..9139ff3df 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,11 @@ 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..a48e7609b 100644
--- a/src/services.js
+++ b/src/services.js
@@ -1,12 +1,25 @@
 import APIService from './api';
 import Store from './store';
 import createStoreRedux from './store-redux';
+import I18n from './i18n'
 
 class Services {
   constructor(config) {
     this.config = config;
   }
 
+  /**
+   * Сервис i18n
+   * @returns {APIService}
+   */
+
+  get i18n() {
+    if (!this._i18n) {
+      this._i18n = new I18n(this, this.config.i18n, this.config.i18n.baseLang); 
+    }
+    return this._i18n;
+  }
+
   /**
    * Сервис АПИ
    * @returns {APIService}
diff --git a/src/store-redux/comment-form/actions.js b/src/store-redux/comment-form/actions.js
new file mode 100644
index 000000000..1dc7b0290
--- /dev/null
+++ b/src/store-redux/comment-form/actions.js
@@ -0,0 +1,13 @@
+export default {
+  /**
+   *
+   * @param place
+   */
+  change: place => {
+    return { type: 'commentForm/changePlace', payload: { place } };
+  },
+
+  reset: () => {
+    return { type: 'commentForm/reset' };
+  }
+};
diff --git a/src/store-redux/comment-form/reducer.js b/src/store-redux/comment-form/reducer.js
new file mode 100644
index 000000000..289c8e16d
--- /dev/null
+++ b/src/store-redux/comment-form/reducer.js
@@ -0,0 +1,19 @@
+// Начальное состояние
+export const initialState = {
+  place: 'common',
+};
+
+// Обработчик действий
+function reducer(state = initialState, action) {
+  switch (action.type) {
+    case 'commentForm/changePlace':
+      return { ...state, place: action.payload.place };
+    case 'commentForm/reset':
+      return {...initialState};
+    default:
+      // Нет изменений
+      return state;
+  }
+}
+
+export default reducer;
diff --git a/src/store-redux/comment/actions.js b/src/store-redux/comment/actions.js
new file mode 100644
index 000000000..2728137d6
--- /dev/null
+++ b/src/store-redux/comment/actions.js
@@ -0,0 +1,90 @@
+export default {
+  /**
+   * Загрузка комментариев
+   * @param id
+   * @return {Function}
+   */
+  load: id => {
+    return async (dispatch, getState, services) => {
+      // Сброс текущих комментариев и установка признака ожидания загрузки
+      dispatch({ type: 'comment/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: 'comment/load-success', payload: { data: res.data.result } });
+      } catch (e) {
+        //Ошибка загрузки
+        dispatch({ type: 'comment/load-error', payload: { error: e } });
+      }
+    };
+  },
+
+  /**
+   * Отправка комментария первого уровня
+   * @param id
+   * @return {Function}
+   */
+  post: (xToken, text, parentId) => {
+    return async (dispatch, getState, services) => {
+      // Сброс текущих комментариев и установка признака ожидания загрузки
+      dispatch({ type: 'comment/post-start' });
+      const requestBody = JSON.stringify({
+        text: text,
+        parent: { _id: `${parentId}`, _type: 'article' },
+      });
+
+      try {
+        const res = await services.api.request({
+          url: `/api/v1/comments`,
+          method: 'POST',
+          headers: {
+            'X-Token': xToken,
+          },
+          body: requestBody,
+        });
+        dispatch({ type: 'comment/post-success', payload: { data: res.data.result }});
+      } catch (e) {
+        //Ошибка загрузки
+        console.log(e);
+
+        dispatch({ type: 'comment/post-error', payload: { error: e } });
+      }
+    };
+  },
+
+  /**
+   * Отправка ответа на комментарий
+   * @param id
+   * @return {Function}
+   */
+
+  reply: (xToken, text, commentId) => {
+    return async (dispatch, getState, services) => {
+      dispatch({ type: 'comment/reply-start' });
+      const requestBody = JSON.stringify({
+        text: text,
+        parent: { _id: `${commentId}`, _type: 'comment' },
+      });
+
+      try {
+        const res = await services.api.request({
+          url: `/api/v1/comments`,
+          method: 'POST',
+          headers: {
+            'X-Token': xToken,
+          },
+          body: requestBody,
+        });
+        dispatch({ type: 'comment/reply-success', payload: { data: res.data.result }});
+      } catch (e) {
+        //Ошибка загрузки
+        console.log(e);
+
+        dispatch({ type: 'comment/reply-error', payload: { error: e } });
+      }
+    };
+  },
+};
diff --git a/src/store-redux/comment/reducer.js b/src/store-redux/comment/reducer.js
new file mode 100644
index 000000000..1a8189418
--- /dev/null
+++ b/src/store-redux/comment/reducer.js
@@ -0,0 +1,58 @@
+// Начальное состояние
+export const initialState = {
+  data: [],
+  waiting: true, // признак ожидания загрузки
+  error: '',
+  postRes: {},
+};
+
+// Обработчик действий
+function reducer(state = initialState, action) {
+  switch (action.type) {
+    case 'comment/load-start':
+      return { ...state, data: {}, waiting: true };
+
+    case 'comment/load-success':
+      return { ...state, data: action.payload.data, waiting: false };
+
+    case 'comment/load-error':
+      return { ...state, data: {}, waiting: false, error: action.payload.error }; //@todo текст ошибки сохранять?
+
+    case 'comment/post-start':
+      return { ...state, waiting: true };
+
+    case 'comment/post-success':
+      return {
+        ...state,
+        data: {
+          ...state.data,
+          items: [ ...state.data.items, action.payload.data],
+        },
+        waiting: false,
+      };
+
+    case 'comment/post-error':
+      return { ...state, waiting: false, error: action.payload.error };
+
+    case 'comment/reply-start':
+      return { ...state, waiting: true };
+
+      case 'comment/reply-success':
+        return {
+          ...state,
+          data: {
+            ...state.data,
+            items: [ ...state.data.items, action.payload.data],
+          },
+          waiting: false,
+        };
+
+    case 'comment/reply-error':
+      return { ...state, waiting: false, error: action.payload.error };
+    default:
+      // Нет изменений
+      return state;
+  }
+}
+
+export default reducer;
diff --git a/src/store-redux/exports.js b/src/store-redux/exports.js
index 1a0a3d742..cde29c2d8 100644
--- a/src/store-redux/exports.js
+++ b/src/store-redux/exports.js
@@ -1,2 +1,4 @@
 export { default as article } from './article/reducer';
 export { default as modals } from './modals/reducer';
+export { default as comment } from './comment/reducer';
+export { default as commentForm} from './comment-form/reducer'
diff --git a/src/utils/format-iso-date.js b/src/utils/format-iso-date.js
new file mode 100644
index 000000000..69a50ddc1
--- /dev/null
+++ b/src/utils/format-iso-date.js
@@ -0,0 +1,32 @@
+import useTranslate from '../hooks/use-translate';
+
+export default function formatISODateToCustomString(isoString) {
+  const date = new Date(isoString);
+  const { t } = useTranslate();
+
+  if (isNaN(date.getTime())) {
+    throw new Error('Некорректная дата в ISO формате');
+  }
+
+  const day = date.getDate();
+  const months = [
+    t('date.january'),
+    t('date.february'),
+    t('date.march'),
+    t('date.april'),
+    t('date.may'),
+    t('date.june'),
+    t("date.july"),
+    t("date.august"),
+    t("date.september"),
+    t("date.october"),
+    t("date.november"),
+    t("date.december"),
+  ];
+  const month = months[date.getMonth()];
+  const year = date.getFullYear();
+  const hours = date.getHours().toString().padStart(2, '0');
+  const minutes = date.getMinutes().toString().padStart(2, '0');
+
+  return `${day} ${month} ${year} ${t('date.at')} ${hours}:${minutes}`;
+}
diff --git a/src/utils/list-to-tree/index.js b/src/utils/list-to-tree/index.js
index fb4d20a66..9ccbbab06 100644
--- a/src/utils/list-to-tree/index.js
+++ b/src/utils/list-to-tree/index.js
@@ -4,7 +4,7 @@
  * @param [key] {String} Свойство с первичным ключом
  * @returns {Array} Корневые узлы
  */
-export default function listToTree(list, key = '_id') {
+export default function listToTree(list, key = '_id', excludedType = '') {
   let trees = {};
   let roots = {};
   for (const item of list) {
@@ -19,7 +19,7 @@ export default function listToTree(list, key = '_id') {
     }
 
     // Если элемент имеет родителя, то добавляем его в подчиненные родителя
-    if (item.parent?.[key]) {
+    if (item.parent?.[key] && item.parent._type != excludedType) {
       // Если родителя ещё нет в индексе, то индекс создаётся, ведь _id родителя известен
       if (!trees[item.parent[key]]) {
         trees[item.parent[key]] = { children: [] };
@@ -31,5 +31,6 @@ export default function listToTree(list, key = '_id') {
       if (roots[item[key]]) delete roots[item[key]];
     }
   }
+  
   return Object.values(roots);
 }