diff --git a/api-examples/comments.http b/api-examples/comments.http
index fd797fb83..843b5b82a 100644
--- a/api-examples/comments.http
+++ b/api-examples/comments.http
@@ -20,9 +20,9 @@ X-Token: 7ee15209d8429544dea8123fbdae254f5f79e6da5d720fec3127d9385b6eb9bc
 # Создание ответа на коммент коммента
 POST http://query.rest/api/v1/comments
 Content-Type: application/json
-X-Token: 7ee15209d8429544dea8123fbdae254f5f79e6da5d720fec3127d9385b6eb9bc
+X-Token: 40717d1c056933a15c15a0d8ccd6684cd8ff2805b845d9810a4446c85d2f93c4
 
 {
   "text": "Первый ответ на коммент!",
-  "parent": {"_id":  "670429839c74519426f378bd", "_type":  "comment"}
+  "parent": {"_id": "68056df17e843dad89610a98", "_type": "comment"}
 }
diff --git a/src/app/article/index.js b/src/app/article/index.js
index 54f037b64..6acbf51ff 100644
--- a/src/app/article/index.js
+++ b/src/app/article/index.js
@@ -1,7 +1,6 @@
 import { memo, useCallback } from 'react';
 import { useParams } from 'react-router-dom';
 import useStore from '../../hooks/use-store';
-import useTranslate from '../../hooks/use-translate';
 import useInit from '../../hooks/use-init';
 import PageLayout from '../../components/page-layout';
 import Head from '../../components/head';
@@ -13,20 +12,26 @@ 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 ArticleComments from '../../containers/article-comments';
+import useLocale from '../../hooks/use-locale';
+
 
 function Article() {
   const store = useStore();
-
   const dispatch = useDispatch();
   // Параметры из пути /articles/:id
 
+  const { t, locale} = useLocale()
+
   const params = useParams();
 
   useInit(() => {
     //store.actions.article.load(params.id);
-    dispatch(articleActions.load(params.id));
-  }, [params.id]);
+    dispatch(articleActions.load(params.id, locale));
+    dispatch(commentsActions.load(params.id));
+  }, [params.id, locale]);
 
   const select = useSelector(
     state => ({
@@ -36,8 +41,6 @@ function Article() {
     shallowequal,
   ); // Нужно указать функцию для сравнения свойства объекта, так как хуком вернули объект
 
-  const { t } = useTranslate();
-
   const callbacks = {
     // Добавление в корзину
     addToBasket: useCallback(_id => store.actions.basket.addToBasket(_id), [store]),
@@ -55,6 +58,7 @@ function Article() {
         <Navigation />
         <Spinner active={select.waiting}>
           <ArticleCard article={select.article} onAdd={callbacks.addToBasket} t={t} />
+          <ArticleComments/>
         </Spinner>
       </PageLayout>
     </>
diff --git a/src/app/basket/index.js b/src/app/basket/index.js
index 52a7badfd..61d8494b2 100644
--- a/src/app/basket/index.js
+++ b/src/app/basket/index.js
@@ -1,19 +1,20 @@
 import { memo, useCallback } from 'react';
-import { useDispatch, useStore as useStoreRedux } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import useStore from '../../hooks/use-store';
 import useSelector from '../../hooks/use-selector';
-import useInit from '../../hooks/use-init';
-import useTranslate from '../../hooks/use-translate';
 import ItemBasket from '../../components/item-basket';
 import List from '../../components/list';
 import ModalLayout from '../../components/modal-layout';
 import BasketTotal from '../../components/basket-total';
 import modalsActions from '../../store-redux/modals/actions';
+import useLocale from '../../hooks/use-locale';
+
+
 
 function Basket() {
   const store = useStore();
   const dispatch = useDispatch();
-
+  const {locale, t} = useLocale()
   const select = useSelector(state => ({
     list: state.basket.list,
     amount: state.basket.amount,
@@ -30,12 +31,11 @@ function Basket() {
     }, [store]),
   };
 
-  const { t } = useTranslate();
-
   const renders = {
     itemBasket: useCallback(
       item => (
         <ItemBasket
+          locale={locale}
           item={item}
           link={`/articles/${item._id}`}
           onRemove={callbacks.removeFromBasket}
diff --git a/src/app/login/index.js b/src/app/login/index.js
index 32b86daa4..b48a65d4f 100644
--- a/src/app/login/index.js
+++ b/src/app/login/index.js
@@ -1,5 +1,4 @@
 import { memo, useCallback, useState } from 'react';
-import useTranslate from '../../hooks/use-translate';
 import Head from '../../components/head';
 import LocaleSelect from '../../containers/locale-select';
 import Navigation from '../../containers/navigation';
@@ -14,9 +13,11 @@ import useSelector from '../../hooks/use-selector';
 import useInit from '../../hooks/use-init';
 import HeadLayout from '../../components/head-layout';
 import Form from '../../components/form';
+import useLocale from '../../hooks/use-locale';
+
 
 function Login() {
-  const { t } = useTranslate();
+  const { t } = useLocale()
   const location = useLocation();
   const navigate = useNavigate();
   const store = useStore();
@@ -51,7 +52,7 @@ function Login() {
             location.state?.back && location.state?.back !== location.pathname
               ? location.state?.back
               : '/';
-          navigate(back);
+          navigate(back, {state: {replyTo: location.state?.replyTo}});
         });
       },
       [data, location.state],
diff --git a/src/app/main/index.js b/src/app/main/index.js
index d9fb1c6c2..a3fe84c73 100644
--- a/src/app/main/index.js
+++ b/src/app/main/index.js
@@ -1,6 +1,5 @@
 import { memo } from 'react';
 import useStore from '../../hooks/use-store';
-import useTranslate from '../../hooks/use-translate';
 import useInit from '../../hooks/use-init';
 import Navigation from '../../containers/navigation';
 import PageLayout from '../../components/page-layout';
@@ -10,20 +9,21 @@ import CatalogList from '../../containers/catalog-list';
 import LocaleSelect from '../../containers/locale-select';
 import TopHead from '../../containers/top-head';
 import HeadLayout from '../../components/head-layout';
+import useLocale from '../../hooks/use-locale';
 
 function Main() {
   const store = useStore();
 
+  const { locale, t } = useLocale()
+
   useInit(
     async () => {
       await Promise.all([store.actions.catalog.initParams(), store.actions.categories.load()]);
     },
-    [],
+    [locale],
     true,
   );
 
-  const { t } = useTranslate();
-
   return (
     <>
       <HeadLayout>
diff --git a/src/app/profile/index.js b/src/app/profile/index.js
index 166d127fb..450e7dd90 100644
--- a/src/app/profile/index.js
+++ b/src/app/profile/index.js
@@ -1,7 +1,6 @@
 import { memo } from 'react';
 import useStore from '../../hooks/use-store';
 import useSelector from '../../hooks/use-selector';
-import useTranslate from '../../hooks/use-translate';
 import useInit from '../../hooks/use-init';
 import PageLayout from '../../components/page-layout';
 import Head from '../../components/head';
@@ -11,6 +10,8 @@ import LocaleSelect from '../../containers/locale-select';
 import TopHead from '../../containers/top-head';
 import ProfileCard from '../../components/profile-card';
 import HeadLayout from '../../components/head-layout';
+import useLocale from '../../hooks/use-locale';
+
 
 function Profile() {
   const store = useStore();
@@ -24,7 +25,7 @@ function Profile() {
     waiting: state.profile.waiting,
   }));
 
-  const { t } = useTranslate();
+  const { t } = useLocale()
 
   return (
     <>
@@ -37,7 +38,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..f8d257e15 100644
--- a/src/components/article-card/index.js
+++ b/src/components/article-card/index.js
@@ -13,22 +13,22 @@ function ArticleCard(props) {
       <div className={cn('description')}>{article.description}</div>
       <div className={cn('prop-wrapper')}>
         <div className={cn('prop')}>
-          <div className={cn('label')}>Страна производитель:</div>
+          <div className={cn('label')}>{t('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.releaseYear')}:</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/article-card/style.css b/src/components/article-card/style.css
index c5ccceabd..51ef0eb74 100644
--- a/src/components/article-card/style.css
+++ b/src/components/article-card/style.css
@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   gap: 24px;
-  padding-block: 24px;
+  padding-top: 24px;
 }
 
 .ArticleCard-prop-wrapper {
diff --git a/src/components/button/index.js b/src/components/button/index.js
index 7d1d3d05c..12f8f4cb7 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', disabled = false }) {
   const cn = bem('Button');
 
   return (
     <div className={cn()}>
-      <button type={type} className={cn({ style })} onClick={() => onClick()}>{title}</button>
+      <button type={type} className={cn({ style })} onClick={() => onClick()} disabled={disabled}>{title}</button>
     </div>
   );
 }
@@ -18,6 +18,7 @@ Button.propTypes = {
   title: PropTypes.string,
   style: PropTypes.oneOf(['text', 'primary', 'delete', 'outline']),
   type: PropTypes.oneOf(['button', 'submit']),
+  disabled: PropTypes.bool,
 };
 
 export default memo(Button);
diff --git a/src/components/button/style.css b/src/components/button/style.css
index 0efc8a896..c0ba11c33 100644
--- a/src/components/button/style.css
+++ b/src/components/button/style.css
@@ -7,6 +7,12 @@
     border-color: var(--primary);
     color: var(--primary);
   }
+
+  &:disabled&:hover {
+    color: var(--second-text);
+    border-color: var(--filter-border);
+    background-color: var(--filter-border);
+  }
 }
 
 .Button_style_delete {
@@ -34,8 +40,9 @@
 .Button_style_text {
   padding: 0;
   border: none;
+  color: var(--primary);
 
   &:hover {
-    color: var(--primary);
+    opacity: 0.6;
   }
 }
diff --git a/src/components/comment-action/index.js b/src/components/comment-action/index.js
new file mode 100644
index 000000000..b865a70e2
--- /dev/null
+++ b/src/components/comment-action/index.js
@@ -0,0 +1,69 @@
+import { memo } from 'react';
+import PropTypes from 'prop-types';
+import { cn as bem } from '@bem-react/classname';
+import './style.css';
+import Button from '../button';
+import { Link } from 'react-router-dom';
+
+function CommentAction(props) {
+  const {
+    id='',
+    t = text => text,
+    onAdd = () => {},
+    setValue = () => {},
+    cancel = () => {},
+    value = '',
+    isReply = false,
+    auth = false,
+    link = '/login',
+    backLink = '',
+  } = props;
+  const cn = bem('CommentAction');
+
+  const label = isReply ? t('comment.newReply') : t('comment.newComment');
+
+  const onChangeHandler = event => {
+    setValue(event.target.value);
+  };
+
+
+  if (!auth) {
+    return (
+      <div {...(isReply ? { id: 'reply' } : {})} className={cn({type: 'alert'})}>
+        <Link to={link} state={{back: backLink, replyTo: id}}>{t('comment.authHint.link')}</Link>{t('comment.authHint.text')}
+      </div>
+    );
+  }
+
+
+  return (
+    <div {...(isReply ? { id: 'reply' } : {})} className={cn(isReply ? { type: 'reply' } : {})}>
+      <label htmlFor="comment">{label}</label>
+      <textarea id="comment"
+                name="comment"
+                onChange={onChangeHandler}
+                value={value}/>
+      <div className={cn('controls')}>
+        <Button title={t('comment.send')}
+                disabled={!value.trim()}
+                style={'primary'}
+                onClick={() => { onAdd(); cancel(); }}/>
+        {isReply && <Button title={t('comment.cancel')} style={'outline'} onClick={cancel}/>}
+      </div>
+    </div>
+  );
+}
+
+CommentAction.propTypes = {
+  onAdd: PropTypes.func,
+  t: PropTypes.func,
+  id: PropTypes.string,
+  value: PropTypes.string,
+  isReply: PropTypes.bool,
+  auth: PropTypes.bool,
+  link: PropTypes.string,
+  backLink: PropTypes.string,
+  cancel: PropTypes.func,
+};
+
+export default memo(CommentAction);
diff --git a/src/components/comment-action/style.css b/src/components/comment-action/style.css
new file mode 100644
index 000000000..24f39a64d
--- /dev/null
+++ b/src/components/comment-action/style.css
@@ -0,0 +1,57 @@
+.CommentAction {
+  padding: 24px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+
+  label {
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 22px;
+    letter-spacing: 0;
+  }
+
+  textarea {
+    height: fit-content;
+    min-height: 88px;
+    padding: 8px 12px;
+    border-radius: 4px;
+    border: 1px solid var(--filter-border);
+    resize: none;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 130%;
+    letter-spacing: 0;
+    vertical-align: middle;
+    &:focus {
+      outline: none;
+      border: 1px solid var(--filter-border);
+    }
+  }
+
+  a {
+    color: var(--primary);
+  }
+
+  a:hover {
+    opacity: 0.6;
+  }
+
+}
+
+.CommentAction-controls {
+  display: flex;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.CommentAction_type_alert {
+  padding: 8px 0;
+  flex-direction: row;
+  gap: 0;
+}
+
+.CommentAction_type_reply {
+  padding: 8px 0;
+}
diff --git a/src/components/comment-item/index.js b/src/components/comment-item/index.js
new file mode 100644
index 000000000..ebf7e2213
--- /dev/null
+++ b/src/components/comment-item/index.js
@@ -0,0 +1,66 @@
+import { memo, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { cn as bem } from '@bem-react/classname';
+import './style.css';
+import Button from '../button';
+
+import { formatPrettyDate } from '../../utils/format-pretty-date';
+
+function CommentItem(props) {
+
+  const {
+    active = false,
+    comment,
+    my = false,
+    onStartReply = () => {},
+    onCancelReply = () => {},
+    t = text => text,
+    locale = 'ru'
+  } = props;
+
+  const cn = bem('CommentItem');
+
+  const formattedDate = formatPrettyDate(comment.dateCreate, locale);
+
+  const handleToggleReply = useCallback(() => {
+    if (active) {
+      onCancelReply();
+    } else {
+      onStartReply();
+    }
+  }, [active, onStartReply, onCancelReply]);
+
+  return (
+    <div className={cn()} id={`comment-${comment.parent._id}`}>
+      <p className={cn('caption', { my })}>
+        <b>{comment.author}</b>{formattedDate}
+      </p>
+      <p className={cn('text')}>{comment.text}</p>
+      <Button
+        title={t('comment.reply')}
+        style="text"
+        onClick={handleToggleReply}
+      />
+    </div>
+  );
+}
+
+CommentItem.propTypes = {
+  comment: PropTypes.shape({
+    value: PropTypes.string.isRequired,
+    level: PropTypes.number.isRequired,
+    text: PropTypes.string.isRequired,
+    author: PropTypes.string,
+    dateCreate: PropTypes.string.isRequired,
+    parent: PropTypes.shape({
+      _id: PropTypes.string.isRequired,
+      _type: PropTypes.string.isRequired,
+    }).isRequired,
+  }).isRequired,
+  my: PropTypes.bool,
+  onStartReply: PropTypes.func,
+  onCancelReply: PropTypes.func,
+  t: PropTypes.func,
+};
+
+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..5568ce071
--- /dev/null
+++ b/src/components/comment-item/style.css
@@ -0,0 +1,39 @@
+.CommentItem {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.CommentItem-caption {
+  font-family: Golos Text;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 18px;
+  letter-spacing: 0;
+  color: var(--other-text);
+  padding: 0;
+  margin: 0;
+
+  b {
+    color: var(--main-text);
+    margin-right: 12px;
+  }
+}
+
+.CommentItem-caption_my {
+  b {
+    color: #4B5563;
+  }
+}
+
+.CommentItem-text {
+  font-family: Golos Text;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 20px;
+  letter-spacing: 0;
+  padding: 0;
+  margin: 0;
+  word-break: break-word;
+  overflow-wrap: anywhere;
+}
diff --git a/src/components/comments-layout/index.js b/src/components/comments-layout/index.js
new file mode 100644
index 000000000..6f6ef493c
--- /dev/null
+++ b/src/components/comments-layout/index.js
@@ -0,0 +1,17 @@
+import { memo } from 'react';
+import { cn as bem } from '@bem-react/classname';
+import './style.css';
+
+
+function CommentsLayout(props) {
+  const cn = bem('CommentsLayout');
+
+  return (
+    <div className={cn()}>
+      <h2 className={cn('title')}>{props.title}</h2>
+      {props.children}
+    </div>
+  );
+}
+
+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..903a01f4c
--- /dev/null
+++ b/src/components/comments-layout/style.css
@@ -0,0 +1,12 @@
+.CommentsLayout {
+  display: flex;
+  flex-direction: column;
+  padding-top: 40px;
+}
+
+.CommentsLayout-title {
+  padding-bottom: 24px;
+  margin-top: 0;
+  font-size: 32px;
+  line-height: 40px;
+}
diff --git a/src/components/item-basket/index.js b/src/components/item-basket/index.js
index f92b2d7a9..ca1018394 100644
--- a/src/components/item-basket/index.js
+++ b/src/components/item-basket/index.js
@@ -6,8 +6,15 @@ import { Link } from 'react-router-dom';
 import Button from '../button';
 import './style.css';
 
+
 function ItemBasket(props) {
-  const { onRemove = () => {}, labelCurr = '₽', labelUnit = 'шт', labelDelete = 'Удалить' } = props;
+  const {
+    onRemove = () => {},
+    labelCurr = '₽',
+    labelUnit = 'шт',
+    labelDelete = 'Удалить',
+    locale = 'ru'
+  } = props;
   const cn = bem('ItemBasket');
 
   const callbacks = {
@@ -20,10 +27,10 @@ function ItemBasket(props) {
       <div className={cn('title')}>
         {props.link ? (
           <Link to={props.link} onClick={props.onLink}>
-            {props.item.title}
+            {props.item.title[locale]}
           </Link>
         ) : (
-          props.item.title
+          props.item.title[locale]
         )}
       </div>
       <div className={cn('right')}>
@@ -54,6 +61,7 @@ ItemBasket.propTypes = {
   labelCurr: PropTypes.string,
   labelDelete: PropTypes.string,
   labelUnit: PropTypes.string,
+  locale: PropTypes.string,
 };
 
 export default memo(ItemBasket);
diff --git a/src/components/ladder-list/index.js b/src/components/ladder-list/index.js
new file mode 100644
index 000000000..07a9abdc0
--- /dev/null
+++ b/src/components/ladder-list/index.js
@@ -0,0 +1,49 @@
+import { memo } from 'react';
+import PropTypes from 'prop-types';
+import './style.css';
+
+function LadderList({
+                      list,
+                      renderItem = item => {},
+                      indentMaxPx = 40,
+                      maxLevel = 15
+                    }) {
+
+  function clampLevel(level) {
+    const safeLevel = typeof level === 'number' ? level : 0;
+    return Math.max(0, Math.min(safeLevel, maxLevel));
+  }
+
+
+  return (
+    <ul className="LadderList">
+      {list.map(item => (
+        <li
+          key={item.value}
+          className="LadderList-item"
+          style={{
+            '--level': clampLevel(item.level),
+            '--indent': `${indentMaxPx}px`,
+          }}
+        >
+          {renderItem(item)}
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+LadderList.propTypes = {
+  list: PropTypes.arrayOf(
+    PropTypes.shape({
+      _id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+      level: PropTypes.number,
+    }),
+  ).isRequired,
+  renderItem: PropTypes.func.isRequired,
+  maxLevel: PropTypes.number,
+  indentPercent: PropTypes.number,
+  indentMaxPx: PropTypes.number,
+};
+
+export default memo(LadderList);
diff --git a/src/components/ladder-list/style.css b/src/components/ladder-list/style.css
new file mode 100644
index 000000000..b62e130d6
--- /dev/null
+++ b/src/components/ladder-list/style.css
@@ -0,0 +1,15 @@
+.LadderList {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.LadderList-item {
+ /* padding-left: calc(var(--level, 0) * 40px);*/
+  --level: 0;
+  --indent: 0px;
+  padding-left: calc(var(--level) * var(--indent));
+}
diff --git a/src/components/list/index.js b/src/components/list/index.js
index e84d13b57..4f005614e 100644
--- a/src/components/list/index.js
+++ b/src/components/list/index.js
@@ -1,6 +1,5 @@
 import { memo } from 'react';
 import PropTypes from 'prop-types';
-import Item from '../item';
 import './style.css';
 
 function List({ list, renderItem = item => {} }) {
@@ -21,7 +20,7 @@ List.propTypes = {
       _id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     }),
   ).isRequired,
-  renderItem: PropTypes.func,
+  renderItem: PropTypes.func.isRequired,
 };
 
 export default memo(List);
diff --git a/src/components/profile-card/index.js b/src/components/profile-card/index.js
index 121610ff4..addb354e0 100644
--- a/src/components/profile-card/index.js
+++ b/src/components/profile-card/index.js
@@ -3,22 +3,24 @@ import PropTypes from 'prop-types';
 import { cn as bem } from '@bem-react/classname';
 import './style.css';
 
-function ProfileCard({ data }) {
+function ProfileCard({ data, t = text => text }) {
   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.mail')}:</div>
         <div className={cn('value')}>{data?.email}</div>
       </div>
     </div>
@@ -27,6 +29,7 @@ function ProfileCard({ data }) {
 
 ProfileCard.propTypes = {
   data: PropTypes.object.isRequired,
+  t: PropTypes.func.isRequired,
 };
 
 export default memo(ProfileCard);
diff --git a/src/config.js b/src/config.js
index 67c72f734..4f610797d 100644
--- a/src/config.js
+++ b/src/config.js
@@ -15,6 +15,10 @@ const config = {
       },
     },
   },
+  i18n: {
+  // Названия локали в АПИ
+  localeHeader: 'Accept-Language',
+  },
   api: {
     baseUrl: '',
   },
diff --git a/src/containers/article-comments/index.js b/src/containers/article-comments/index.js
new file mode 100644
index 000000000..abab9fed6
--- /dev/null
+++ b/src/containers/article-comments/index.js
@@ -0,0 +1,144 @@
+import { memo, useCallback, useMemo, useState, useEffect } from 'react';
+import './style.css';
+import { useDispatch, useSelector } from 'react-redux';
+import { useLocation } from 'react-router-dom';
+import commentsActions from '../../store-redux/comments/actions';
+import shallowequal from 'shallowequal';
+import useSelectorStore from '../../hooks/use-selector';
+import CommentAction from '../../components/comment-action';
+import LadderList from '../../components/ladder-list';
+import CommentsLayout from '../../components/comments-layout';
+import CommentItem from '../../components/comment-item';
+import Spinner from '../../components/spinner';
+import useLocale from '../../hooks/use-locale';
+import { listFromFlat } from '../../utils/list-from-flat/list-from-flat';
+
+function ArticleComments() {
+
+  const { t, locale } = useLocale()
+  const [addComment, setAddComment] = useState(false);
+  const [commentValue, setCommentValue] = useState('');
+  const dispatch = useDispatch();
+  const location = useLocation();
+  const replyTo = location.state?.replyTo;
+  const backLink = location.pathname;
+
+
+  const select = useSelector(
+    state => ({
+      article: state.article.data,
+      waiting: state.article.waiting,
+      comments: state.comments.data,
+      commentsCount: state.comments.count,
+      commentsWaiting: state.comments.waiting,
+    }),
+    shallowequal,
+  ); // Нужно указать функцию для сравнения свойства объекта, так как хуком вернули объект
+
+
+  const selectStore = useSelectorStore(state => ({
+    user: state.session.user,
+    exists: state.session.exists,
+  }));
+
+  const comments = useMemo(
+    () => listFromFlat(select.comments || []),
+    [select.comments]
+  );
+
+  useEffect(() => {
+    if (!addComment) return;
+
+    const target = document.getElementById('reply');
+    if (target) {
+      target.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }
+  }, [select.comments, addComment]);
+
+
+  useEffect(() => {
+    if (!replyTo) return;
+      const target = document.getElementById(`comment-${replyTo}`);
+      if (target) {
+        target.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  }}, [replyTo]);
+
+  const callbacks = {
+    addToAnswer: useCallback(comment => {
+      setAddComment(true)
+      setCommentValue(`Мой ответ для ${comment.author} `)
+      dispatch(commentsActions.setReplyAction(comment, selectStore.user))
+    }, []),
+
+    cancelToAnswer: useCallback(() => {
+      setAddComment(false)
+      setCommentValue('');
+      dispatch(commentsActions.removeReplyAction())
+    }, []),
+
+    addApiToAnswer: useCallback((parent) => {
+      dispatch(commentsActions.addComment(parent, commentValue));
+    }, [parent, commentValue]),
+  };
+
+  const renders = {
+    item: useCallback(
+      item => (
+        <>
+          {item.value !== 'reply' && <CommentItem
+            active={addComment === item.value}
+            comment={item}
+            my={selectStore.user._id === item.authorId}
+            onStartReply={() => callbacks.addToAnswer(item)}
+            onCancelReply={() => callbacks.cancelToAnswer()}
+            t={t}
+            locale={locale}
+          />}
+          {item.value === 'reply' &&
+            renders.action({
+              id: item.parent._id,
+              isReply: true,
+              onAdd: () =>
+                callbacks.addApiToAnswer(item.parent),
+              cancel: callbacks.cancelToAnswer,
+            })}
+        </>
+      ),
+      [addComment, commentValue, selectStore, t, callbacks],
+    ),
+
+    action: ({ isReply, onAdd, cancel, id }) => (
+      <CommentAction
+        id={id}
+        t={t}
+        auth={selectStore.exists}
+        backLink={backLink}
+        isReply={isReply}
+        link="/login"
+        value={commentValue}
+        setValue={setCommentValue}
+        onAdd={onAdd}
+        cancel={cancel}
+      />
+    ),
+  };
+
+  return (
+    <Spinner active={select.waiting}>    <CommentsLayout title={`${t('comment.title')} (${select.commentsCount})`}>
+      {comments && <LadderList list={comments} renderItem={renders.item}/>}
+      {!addComment && renders.action({
+        isReply: false,
+        onAdd: () =>
+          callbacks.addApiToAnswer({
+            _id: select.article._id,
+            _type: 'article',
+          }),
+        cancel: callbacks.cancelToAnswer,
+      })}
+    </CommentsLayout>
+    </Spinner>
+
+  );
+}
+
+export default memo(ArticleComments);
diff --git a/src/containers/article-comments/style.css b/src/containers/article-comments/style.css
new file mode 100644
index 000000000..c04d2f553
--- /dev/null
+++ b/src/containers/article-comments/style.css
@@ -0,0 +1,38 @@
+.CommentsBox {
+  display: flex;
+  flex-direction: column;
+  padding-top: 40px;
+}
+
+.CommentsBox-title {
+  padding-bottom: 24px;
+  margin-top: 0;
+  font-size: 32px;
+  font-family: var(--second-font-family);
+  line-height: 40px;
+}
+
+.CommentsBox-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.CommentsBox-item {
+  padding-left: calc(var(--level, 0) * 40px);
+}
+
+
+.CommentsBox-alert {
+
+  a {
+    color: var(--primary);
+  }
+
+  a:hover {
+    opacity: 0.6;
+  }
+}
diff --git a/src/containers/catalog-filter/index.js b/src/containers/catalog-filter/index.js
index 2eeca7564..070a2a9b3 100644
--- a/src/containers/catalog-filter/index.js
+++ b/src/containers/catalog-filter/index.js
@@ -1,5 +1,4 @@
 import { memo, useCallback, useMemo } from 'react';
-import useTranslate from '../../hooks/use-translate';
 import useStore from '../../hooks/use-store';
 import useSelector from '../../hooks/use-selector';
 import Select from '../../components/select';
@@ -8,10 +7,12 @@ import SideLayout from '../../components/side-layout';
 import treeToList from '../../utils/tree-to-list';
 import listToTree from '../../utils/list-to-tree';
 import Button from '../../components/button';
+import useLocale from '../../hooks/use-locale';
+
 
 function CatalogFilter() {
   const store = useStore();
-
+  const { t, locale } = useLocale()
   const select = useSelector(state => ({
     sort: state.catalog.params.sort,
     query: state.catalog.params.query,
@@ -41,17 +42,17 @@ function CatalogFilter() {
     // Варианты сортировок
     sort: useMemo(
       () => [
-        { value: 'order', title: 'По порядку' },
-        { value: 'title.ru', title: 'По именованию' },
-        { value: '-price', title: 'Сначала дорогие' },
-        { value: 'edition', title: 'Древние' },
+        { value: 'order', title: t('sort.order') },
+        { value: 'title.ru', title: t('sort.name') },
+        { value: '-price', title: t('sort.expensive') },
+        { value: 'edition', title: t('sort.old') },
       ],
-      [],
+      [locale],
     ),
     // Категории для фильтра
     categories: useMemo(
       () => [
-        { value: '', title: 'Все' },
+        { value: '', title: t('filter.all') },
         ...treeToList(listToTree(select.categories), (item, level) => ({
           value: item._id,
           title: '- '.repeat(level) + item.title,
@@ -61,7 +62,7 @@ function CatalogFilter() {
     ),
   };
 
-  const { t } = useTranslate();
+
 
   return (
     <SideLayout padding="medium">
@@ -80,7 +81,7 @@ function CatalogFilter() {
       <Input
         value={select.query}
         onChange={callbacks.onSearch}
-        placeholder={'Поиск'}
+        placeholder={t('search')}
         delay={1000}
         theme={'big'}
       />
diff --git a/src/containers/catalog-list/index.js b/src/containers/catalog-list/index.js
index d6af63ead..8fbb6a6ff 100644
--- a/src/containers/catalog-list/index.js
+++ b/src/containers/catalog-list/index.js
@@ -1,11 +1,11 @@
 import { memo, useCallback } from 'react';
 import useStore from '../../hooks/use-store';
 import useSelector from '../../hooks/use-selector';
-import useTranslate from '../../hooks/use-translate';
 import Item from '../../components/item';
 import List from '../../components/list';
 import Pagination from '../../components/pagination';
 import Spinner from '../../components/spinner';
+import useLocale from '../../hooks/use-locale';
 
 function CatalogList() {
   const store = useStore();
@@ -39,7 +39,7 @@ function CatalogList() {
     ),
   };
 
-  const { t } = useTranslate();
+  const { t } = useLocale()
 
   const renders = {
     item: useCallback(
diff --git a/src/containers/locale-select/index.js b/src/containers/locale-select/index.js
index a60df2a9a..008b650fd 100644
--- a/src/containers/locale-select/index.js
+++ b/src/containers/locale-select/index.js
@@ -1,11 +1,19 @@
-import { memo, useCallback, useMemo } from 'react';
-import useStore from '../../hooks/use-store';
-import useSelector from '../../hooks/use-selector';
-import useTranslate from '../../hooks/use-translate';
+import { memo, useMemo, useState, useEffect } from 'react';
 import Select from '../../components/select';
+import useLocale from '../../hooks/use-locale';
 
 function LocaleSelect() {
-  const { lang, setLang } = useTranslate();
+  const { locale, setLocale } = useLocale()
+  const [currentValue, setCurrentValue] = useState('ru')
+
+  useEffect(() => {
+    setCurrentValue(locale)
+  }, [locale]);
+
+  function toggleLanguage(value) {
+    setLocale(value);
+    setCurrentValue(locale)
+  }
 
   const options = {
     lang: useMemo(
@@ -17,7 +25,7 @@ function LocaleSelect() {
     ),
   };
 
-  return <Select onChange={setLang} value={lang} options={options.lang} size="small" text />;
+  return <Select onChange={toggleLanguage} value={currentValue} 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..3ce89dc1b 100644
--- a/src/containers/navigation/index.js
+++ b/src/containers/navigation/index.js
@@ -1,12 +1,12 @@
 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 Menu from '../../components/menu';
 import BasketTool from '../../components/basket-tool';
 import SideLayout from '../../components/side-layout';
 import { useDispatch } from 'react-redux';
 import modalsActions from '../../store-redux/modals/actions';
+import useLocale from '../../hooks/use-locale';
 
 function Navigation() {
   const store = useStore();
@@ -34,7 +34,7 @@ function Navigation() {
   };
 
   // Функция для локализации текстов
-  const { t } = useTranslate();
+  const { t } = useLocale()
 
   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..adc2349eb 100644
--- a/src/containers/top-head/index.js
+++ b/src/containers/top-head/index.js
@@ -1,13 +1,13 @@
 import { memo, useCallback } from 'react';
 import SideLayout from '../../components/side-layout';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
-import useTranslate from '../../hooks/use-translate';
 import useSelector from '../../hooks/use-selector';
 import useStore from '../../hooks/use-store';
 import Button from '../../components/button';
+import useLocale from '../../hooks/use-locale';
 
 function TopHead() {
-  const { t } = useTranslate();
+  const { t } = useLocale()
   const navigate = useNavigate();
   const location = useLocation();
   const store = useStore();
diff --git a/src/global.css b/src/global.css
index e81695d21..4e06a54ea 100644
--- a/src/global.css
+++ b/src/global.css
@@ -7,6 +7,7 @@
   --primary-select: #6B4ACB1A;
   --main-text: #1A2028;
   --second-text: #FFFFFF;
+  --other-text: #666666;
   --overlay: #1A202866;
   --divider: #EFEFEF;
   --delete: #D43B3B;
diff --git a/src/hooks/use-locale.js b/src/hooks/use-locale.js
new file mode 100644
index 000000000..a90393cca
--- /dev/null
+++ b/src/hooks/use-locale.js
@@ -0,0 +1,19 @@
+import { useContext, useEffect, useState } from 'react';
+import { ServicesContext } from '../context';
+
+export default function useLocale() {
+  const services = useContext(ServicesContext);
+  const i18n = services.i18n;
+
+  const [locale, setLocaleState] = useState(() => i18n.getLocale());
+
+  useEffect(() => {
+    const unsubscribe = i18n.subscribe(setLocaleState);
+    return () => unsubscribe();
+  }, [i18n]);
+
+  const setLocale = (val) => i18n.setLocale(val);
+  const t = (key, plural, lang) => i18n.translate(key, plural, lang);
+
+  return { locale, setLocale, t };
+}
diff --git a/src/hooks/use-translate.js b/src/hooks/use-translate.js
deleted file mode 100644
index bdcbf1071..000000000
--- a/src/hooks/use-translate.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { useCallback, useContext } from 'react';
-import { I18nContext } from '../i18n/context';
-
-/**
- * Хук возвращает функцию для локализации текстов, код языка и функцию его смены
- */
-export default function useTranslate() {
-  return useContext(I18nContext);
-}
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..18fa68ba2
--- /dev/null
+++ b/src/i18n/index.js
@@ -0,0 +1,45 @@
+import baseTranslate from './translate';
+
+/**
+ * Сервис для хранения локали и перевода
+ */
+class I18nService {
+
+  constructor(services, config = {}, defaultLocale = 'ru') {
+    this.services = services;
+    this.config = config;
+    this.locale = defaultLocale;
+    this.listeners = [];
+  }
+
+  getLocale() {
+    return this.locale;
+  }
+
+  setLocale(locale) {
+    if (this.locale !== locale) {
+      this.locale = locale;
+      this._notify();
+    }
+    this.services.api.setHeader(this.config.localeHeader, locale);
+  }
+
+  translate(key, plural, locale = this.locale) {
+    return baseTranslate(locale, key, plural);
+  }
+
+  subscribe(listener) {
+    this.listeners.push(listener);
+    return () => {
+      this.listeners = this.listeners.filter(item => item !== listener);
+    };
+  }
+
+  _notify() {
+    for (const listener of this.listeners) {
+      listener(this.locale);
+    }
+  }
+}
+
+export default I18nService;
diff --git a/src/i18n/translations/en.json b/src/i18n/translations/en.json
index 0ebbcf8f2..77cdfcf06 100644
--- a/src/i18n/translations/en.json
+++ b/src/i18n/translations/en.json
@@ -1,6 +1,12 @@
 {
   "title": "Shop",
   "menu.main": "Main",
+  "filter.all": "All",
+  "sort.order": "By order",
+  "sort.name": "By name",
+  "sort.expensive": "Price: High to Low",
+  "sort.old": "Oldies",
+  "search": "Search",
   "basket.title": "Cart",
   "basket.open": "Open",
   "basket.close": "Close",
@@ -22,5 +28,21 @@
   "auth.login-placeholder": "Enter login",
   "auth.password-placeholder": "Enter password",
   "session.signIn": "Sign In",
-  "session.signOut": "Sign Out"
+  "session.signOut": "Sign Out",
+  "comment.newReply": "New reply",
+  "comment.newComment": "New comment",
+  "comment.send": "Send",
+  "comment.cancel": "Cancel",
+  "comment.title": "Comments",
+  "comment.reply": "Reply",
+  "profile.title": "Profile",
+  "profile.name": "Name",
+  "profile.phone": "Phone",
+  "profile.mail": "Email",
+  "article.price": "Price",
+  "article.country": "Country of origin",
+  "article.category": "Category",
+  "article.releaseYear": "Release year",
+  "comment.authHint.link": "Sign in",
+  "comment.authHint.text": ", then you’ll be able to comment."
 }
diff --git a/src/i18n/translations/ru.json b/src/i18n/translations/ru.json
index a18fb845e..daaa55486 100644
--- a/src/i18n/translations/ru.json
+++ b/src/i18n/translations/ru.json
@@ -1,6 +1,12 @@
 {
   "title": "Магазин",
   "menu.main": "Главная",
+  "filter.all": "Все",
+  "sort.order": "По порядку",
+  "sort.name": "По наименованию",
+  "sort.expensive": "Сначала дорогие",
+  "sort.old": "Древние",
+  "search": "Поиск",
   "basket.title": "Корзина",
   "basket.open": "Перейти",
   "basket.close": "Закрыть",
@@ -24,5 +30,21 @@
   "auth.login-placeholder": "Введите логин",
   "auth.password-placeholder": "Введите пароль",
   "session.signIn": "Вход",
-  "session.signOut": "Выход"
+  "session.signOut": "Выход",
+  "comment.newReply": "Новый ответ",
+  "comment.newComment": "Новый комментарий",
+  "comment.send": "Отправить",
+  "comment.cancel": "Отмена",
+  "comment.title": "Комментарии",
+  "comment.reply": "Ответить",
+  "profile.title": "Профиль",
+  "profile.name": "Имя",
+  "profile.phone": "Телефон",
+  "profile.mail": "Email",
+  "article.price": "Цена",
+  "article.country": "Страна производитель",
+  "article.category": "Категория",
+  "article.releaseYear": "Год выпуска",
+  "comment.authHint.link": "Войдите",
+  "comment.authHint.text": ", чтобы иметь возможность комментировать"
 }
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..b22d0903d 100644
--- a/src/services.js
+++ b/src/services.js
@@ -1,6 +1,7 @@
 import APIService from './api';
 import Store from './store';
 import createStoreRedux from './store-redux';
+import I18nService from './i18n';
 
 class Services {
   constructor(config) {
@@ -38,6 +39,17 @@ class Services {
     }
     return this._redux;
   }
+
+  /**
+   * Сервис i18n
+   */
+  get i18n() {
+    if (!this._i18n) {
+      this._i18n = new I18nService(this, this.config.i18n);
+    }
+    return this._i18n;
+  }
+
 }
 
 export default Services;
diff --git a/src/store-redux/article/reducer.js b/src/store-redux/article/reducer.js
index 1df8020ce..b37776d75 100644
--- a/src/store-redux/article/reducer.js
+++ b/src/store-redux/article/reducer.js
@@ -14,7 +14,7 @@ function reducer(state = initialState, action) {
       return { ...state, data: action.payload.data, waiting: false };
 
     case 'article/load-error':
-      return { ...state, data: {}, waiting: false }; //@todo текст ошибки сохранять?
+      return { ...state, data: {}, waiting: false };
 
     default:
       // Нет изменений
diff --git a/src/store-redux/comments/actions.js b/src/store-redux/comments/actions.js
new file mode 100644
index 000000000..542e09d0b
--- /dev/null
+++ b/src/store-redux/comments/actions.js
@@ -0,0 +1,87 @@
+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: { data: res.data.result.items, count: res.data.result.count } });
+      } catch (e) {
+        //Ошибка загрузки
+        dispatch({ type: 'comments/load-error' });
+      }
+    };
+  },
+
+  /**
+   * Загрузка комментариев по товару
+   */
+  addComment: (parent, text) => {
+    return async (dispatch, getState, services) => {
+
+      try {
+        if (!text?.trim()) return;
+        const res = await services.api.request({
+          url: `/api/v1/comments`,
+          method: 'POST',
+          body: JSON.stringify(
+        {
+          "text": text,
+          "parent": {...parent}
+        })
+        });
+
+        dispatch({
+          type: 'comments/set-reply-comment',
+          payload: res.data.result
+        });
+
+      } catch (e) {
+        //Ошибка загрузки
+        dispatch({ type: 'comments/load-error' });
+      }
+    };
+  },
+
+  setReplyAction: (comment, user) => {
+    return (dispatch) => {
+      dispatch({ type: 'comments/remove-reply-action' });
+
+      const newReply = {
+        _id: 'reply',
+        level: (comment.level + 1) || 0,
+        text: '',
+        author: {
+          profile: {
+            name: user.name,
+          },
+          _id: user._id
+        },
+        dateCreate: '',
+        parent: {
+          _id: comment.value,
+          _type: 'comment'
+        }
+      };
+
+      dispatch({
+        type: 'comments/set-reply-action',
+        payload: newReply
+      });
+    };
+  },
+
+
+  removeReplyAction: () => ({
+    type: 'comments/remove-reply-action',
+  }),
+};
diff --git a/src/store-redux/comments/reducer.js b/src/store-redux/comments/reducer.js
new file mode 100644
index 000000000..91c615397
--- /dev/null
+++ b/src/store-redux/comments/reducer.js
@@ -0,0 +1,43 @@
+// Начальное состояние
+export const initialState = {
+  data: [],
+  count: 0,
+  waiting: false, // признак ожидания загрузки
+};
+
+// Обработчик действий
+function reducer(state = initialState, action) {
+  switch (action.type) {
+    case 'comments/load-start':
+      return { ...state, data: [], count: 0, waiting: true };
+
+    case 'comments/load-success':
+      return { ...state, data: action.payload.data, count: action.payload.count, waiting: false };
+
+    case 'comments/load-error':
+      return { ...state, data: [], count: 0, waiting: false };
+
+    case 'comments/set-reply-action':
+      return { ...state,
+        data: [...state.data, action.payload] };
+
+
+    case 'comments/set-reply-comment':
+      return { ...state,
+        count: state.count + 1,
+        data: [...state.data, action.payload] };
+
+
+    case 'comments/remove-reply-action':
+      return {
+        ...state,
+        data: state.data.filter(comment => comment._id !== 'reply'),
+      };
+
+    default:
+      // Нет изменений
+      return state;
+  }
+}
+
+export default reducer;
diff --git a/src/store-redux/exports.js b/src/store-redux/exports.js
index 1a0a3d742..c7f1c588b 100644
--- a/src/store-redux/exports.js
+++ b/src/store-redux/exports.js
@@ -1,2 +1,3 @@
 export { default as article } from './article/reducer';
 export { default as modals } from './modals/reducer';
+export { default as comments } from './comments/reducer';
diff --git a/src/store/basket/index.js b/src/store/basket/index.js
index 8cacc17eb..a387a59b4 100644
--- a/src/store/basket/index.js
+++ b/src/store/basket/index.js
@@ -32,7 +32,7 @@ class BasketState extends StoreModule {
 
     if (!exist) {
       // Поиск товара в каталоге, чтобы его добавить в корзину.
-      const res = await this.services.api.request({ url: `/api/v1/articles/${_id}` });
+      const res = await this.services.api.request({ url: `/api/v1/articles/${_id}?&lang=all` });
       const item = res.data.result;
 
       list.push({ ...item, amount: 1 }); // list уже новый, в него можно пушить.
diff --git a/src/utils/format-pretty-date.js b/src/utils/format-pretty-date.js
new file mode 100644
index 000000000..054d9d80f
--- /dev/null
+++ b/src/utils/format-pretty-date.js
@@ -0,0 +1,30 @@
+/**
+ * Форматирование даты в читаемый вид
+ * Преобразует строку даты в формат вида "12 апреля 2025 в 14:30" с учётом указанной локали
+ * @param dateString {String} Строка даты в формате, распознаваемом конструктором Date.
+ * @param [locale] {String} Локаль (код языка), по умолчанию 'ru'.
+ * @returns {String} Отформатированная строка даты.
+ * @example formatPrettyDate('2025-04-12T14:30:00') // "12 апреля 2025 в 14:30"
+ */
+export function formatPrettyDate(dateString, locale = 'ru') {
+  const date = new Date(dateString);
+
+  const incorrectLiteral = 'г. в';
+  const correctLiteral = ' в ';
+  const formatter = {
+    dateStyle: "long",
+    timeStyle: "short",
+  };
+
+  const datePart = new Intl.DateTimeFormat(locale, formatter).formatToParts(date);
+
+  const customDate = datePart.reduce((dateString, part) => {
+    // Пропускаем литерал, если это "г." (обязательно с trim что бы удалить все виды пробелов)
+    if (part.type === 'literal' && part.value.trim() === incorrectLiteral) {
+      return dateString + correctLiteral;
+    }
+    return dateString + part.value;
+  }, '');
+
+  return customDate;
+}
diff --git a/src/utils/list-from-flat/list-from-flat.js b/src/utils/list-from-flat/list-from-flat.js
new file mode 100644
index 000000000..c1328c9a2
--- /dev/null
+++ b/src/utils/list-from-flat/list-from-flat.js
@@ -0,0 +1,22 @@
+import listToTree from '../list-to-tree';
+import treeToList from '../tree-to-list';
+
+/**
+ * Преобразует список комментариев в плоский список с уровнями вложенности.
+ * @param list - список комментариев
+ * @param key - ключ идентификатора (по умолчанию "_id")
+ */
+export function listFromFlat(list, key = '_id') {
+
+  const tree = listToTree(list, key);
+
+  return treeToList(tree[0]?.children || [], (item, level) => ({
+    value: item[key],
+    level,
+    text: item.text,
+    author: item.author?.profile?.name,
+    authorId: item.author?._id,
+    dateCreate: item.dateCreate,
+    parent: item.parent,
+  }));
+}