diff --git a/src/api/index.js b/src/api/index.js
index a5f073295..c644c15e2 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -9,6 +9,14 @@ class APIService {
     this.defaultHeaders = {
       'Content-Type': 'application/json',
     };
+
+    const i18n = this.services?.i18n;
+    if (i18n) {
+      this.setHeader('X-Lang', i18n.getLocale());
+      i18n.subscribe(locale => {
+        return this.setHeader('X-Lang', locale);
+      });
+    }
   }
 
   /**
diff --git a/src/app/article/index.js b/src/app/article/index.js
index 54f037b64..fe7318501 100644
--- a/src/app/article/index.js
+++ b/src/app/article/index.js
@@ -14,19 +14,21 @@ import { useDispatch, useSelector } from 'react-redux';
 import shallowequal from 'shallowequal';
 import articleActions from '../../store-redux/article/actions';
 import HeadLayout from '../../components/head-layout';
+import Comments from '../../containers/comments';
+import useServices from '../../hooks/use-services';
 
 function Article() {
   const store = useStore();
+  const services = useServices();
+  const locale = services.i18n?.getLocale();
 
   const dispatch = useDispatch();
-  // Параметры из пути /articles/:id
 
   const params = useParams();
 
   useInit(() => {
-    //store.actions.article.load(params.id);
     dispatch(articleActions.load(params.id));
-  }, [params.id]);
+  }, [params.id, locale]);
 
   const select = useSelector(
     state => ({
@@ -34,8 +36,7 @@ function Article() {
       waiting: state.article.waiting,
     }),
     shallowequal,
-  ); // Нужно указать функцию для сравнения свойства объекта, так как хуком вернули объект
-
+  );
   const { t } = useTranslate();
 
   const callbacks = {
@@ -55,6 +56,7 @@ function Article() {
         <Navigation />
         <Spinner active={select.waiting}>
           <ArticleCard article={select.article} onAdd={callbacks.addToBasket} t={t} />
+          <Comments />
         </Spinner>
       </PageLayout>
     </>
diff --git a/src/app/main/index.js b/src/app/main/index.js
index d9fb1c6c2..ce462596e 100644
--- a/src/app/main/index.js
+++ b/src/app/main/index.js
@@ -10,15 +10,19 @@ 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 useServices from '../../hooks/use-services';
 
 function Main() {
   const store = useStore();
+  const services = useServices();
+  const locale = services.i18n?.getLocale();
 
   useInit(
     async () => {
       await Promise.all([store.actions.catalog.initParams(), store.actions.categories.load()]);
     },
     [],
+    [locale],
     true,
   );
 
diff --git a/src/app/profile/index.js b/src/app/profile/index.js
index 166d127fb..76043ab05 100644
--- a/src/app/profile/index.js
+++ b/src/app/profile/index.js
@@ -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..03073b60e 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('card.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('card.сategory')}</div>
           <div className={cn('value')}>{article.category?.title}</div>
         </div>
         <div className={cn('prop')}>
-          <div className={cn('label')}>Год выпуска:</div>
+          <div className={cn('label')}>{t('card.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('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/button/index.js b/src/components/button/index.js
index 7d1d3d05c..b04e4d287 100644
--- a/src/components/button/index.js
+++ b/src/components/button/index.js
@@ -2,13 +2,14 @@ import { memo } from 'react';
 import PropTypes from 'prop-types';
 import { cn as bem } from '@bem-react/classname';
 import './style.css';
-
 function Button({ onClick = () => {}, title, style, type = 'button' }) {
   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()}>
+        {title}
+      </button>
     </div>
   );
 }
@@ -16,7 +17,7 @@ function Button({ onClick = () => {}, title, style, type = 'button' }) {
 Button.propTypes = {
   onClick: PropTypes.func,
   title: PropTypes.string,
-  style: PropTypes.oneOf(['text', 'primary', 'delete', 'outline']),
+  style: PropTypes.oneOf(['text', 'primary', 'delete', 'outline', 'text-primary']),
   type: PropTypes.oneOf(['button', 'submit']),
 };
 
diff --git a/src/components/button/style.css b/src/components/button/style.css
index 0efc8a896..0ca4e0c2c 100644
--- a/src/components/button/style.css
+++ b/src/components/button/style.css
@@ -1,41 +1,44 @@
 .Button_style_primary {
   background-color: var(--primary);
   color: var(--second-text);
-
   &:hover {
     background-color: var(--background);
     border-color: var(--primary);
     color: var(--primary);
   }
 }
-
 .Button_style_delete {
   background-color: var(--delete);
   color: var(--second-text);
   border-color: var(--delete);
-
   &:hover {
     background-color: var(--background);
     color: var(--delete);
     border-color: var(--delete);
   }
 }
-
 .Button_style_outline {
   border-color: var(--primary);
   color: var(--primary);
-
   &:hover {
     background-color: var(--primary);
     color: var(--second-text);
   }
 }
-
 .Button_style_text {
   padding: 0;
   border: none;
-
   &:hover {
     color: var(--primary);
   }
 }
+
+.Button_style_text-primary {
+  padding: 0;
+  border: none;
+  color: var(--primary);
+
+  &:hover {
+    color: var(--primary-select);
+  }
+}
diff --git a/src/components/comments-container/index.js b/src/components/comments-container/index.js
new file mode 100644
index 000000000..98d4f816b
--- /dev/null
+++ b/src/components/comments-container/index.js
@@ -0,0 +1,24 @@
+import { memo } from 'react';
+import PropTypes from 'prop-types';
+import { cn as bem } from '@bem-react/classname';
+import './style.css';
+
+function CommentsContainer({ children, t, count = '0' }) {
+  const cn = bem('CommentsContainer');
+
+  return (
+    <div className={cn()}>
+      <h2 className={cn('header')}>
+        {t('comments.header')} ({count})
+      </h2>
+      {children}
+    </div>
+  );
+}
+
+// CommentsConatiner.propTypes = {
+//   count: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+//   t: PropTypes.func,
+//   children: PropTypes.node,
+// };
+export default memo(CommentsContainer);
diff --git a/src/components/comments-container/style.css b/src/components/comments-container/style.css
new file mode 100644
index 000000000..f5fc18afe
--- /dev/null
+++ b/src/components/comments-container/style.css
@@ -0,0 +1,8 @@
+.CommentsContainer {
+  color: var(--main-text);
+}
+
+.CommentsContainer-header {
+  margin-bottom: 24px;
+  font-family: var(--second-font-family);
+}
diff --git a/src/components/comments-form/index.js b/src/components/comments-form/index.js
new file mode 100644
index 000000000..bd3956657
--- /dev/null
+++ b/src/components/comments-form/index.js
@@ -0,0 +1,48 @@
+import { memo } from 'react';
+import PropTypes from 'prop-types';
+import Form from '../form';
+import Textarea from '../textarea';
+import './style.css';
+import { cn as bem } from '@bem-react/classname';
+
+function CommentsForm({
+  onSubmit = () => {},
+  t,
+  style,
+  option,
+  onClick = () => {},
+  onChange = () => {},
+  value,
+  success,
+}) {
+  const cn = bem('CommentsForm');
+
+  return (
+    <div className={cn()}>
+      <Form
+        onSubmit={onSubmit}
+        submitTitle={t('comments.send')}
+        title={t(`${option === 'cancel' ? 'comments.answer-title' : 'comments.title'}`)}
+        cancelTitle={t('comments.cancel')}
+        style={style}
+        option={option}
+        onClick={onClick}
+      >
+        <Textarea value={value} onChange={onChange} />
+        {!success && <span className={cn('error')}>{t('comments.error')}</span>}
+      </Form>
+    </div>
+  );
+}
+
+CommentsForm.propTypes = {
+  t: PropTypes.func,
+  style: PropTypes.string,
+  value: PropTypes.string,
+  option: PropTypes.string,
+  onChange: PropTypes.func,
+  onClick: PropTypes.func,
+  onSubmit: PropTypes.func,
+};
+
+export default memo(CommentsForm);
diff --git a/src/components/comments-form/style.css b/src/components/comments-form/style.css
new file mode 100644
index 000000000..66e35290f
--- /dev/null
+++ b/src/components/comments-form/style.css
@@ -0,0 +1,8 @@
+.CommentsForm {
+  margin-bottom: 24px;
+}
+
+.CommentsForm-error {
+  font-size: 14px;
+  color: var(--delete);
+}
diff --git a/src/components/field/index.js b/src/components/field/index.js
index 83ae2cd6f..0997c6e8e 100644
--- a/src/components/field/index.js
+++ b/src/components/field/index.js
@@ -8,7 +8,7 @@ function Field({ label, error, children }) {
   return (
     <div className={cn()}>
       <label className={cn('label')}>{label}</label>
-      <div className={cn('input')}>{children}</div>
+      {children && <div className={cn('input')}>{children}</div>}
       <div className={cn('error')}>{error}</div>
     </div>
   );
diff --git a/src/components/field/style.css b/src/components/field/style.css
index c4bec94ff..7d486d73c 100644
--- a/src/components/field/style.css
+++ b/src/components/field/style.css
@@ -3,3 +3,6 @@
   font-size: 12px;
   min-height: 16px;
 }
+.Field-input {
+  margin-top: 8px;
+}
diff --git a/src/components/form/index.js b/src/components/form/index.js
index 574945888..ae4047753 100644
--- a/src/components/form/index.js
+++ b/src/components/form/index.js
@@ -4,23 +4,36 @@ import { cn as bem } from '@bem-react/classname';
 import Button from '../button';
 import './style.css';
 
-function Form({ title, onSubmit, children, submitTitle }) {
+function Form({
+  title,
+  onSubmit,
+  children,
+  submitTitle,
+  style = '',
+  option = '',
+  cancelTitle,
+  onClick = () => {},
+}) {
   const cn = bem('Form');
 
   return (
     <form className={cn()} onSubmit={onSubmit}>
-      <h2 className={cn('title')}>{title}</h2>
+      <h2 className={cn({ theme: style })}>{title}</h2>
       {children}
-      <Button style="primary" type="submit" title={submitTitle} />
+
+      <div className={cn('action')}>
+        <Button style="primary" type="submit" title={submitTitle} />
+        {option === 'cancel' && (
+          <Button style="outline" type="button" title={cancelTitle} onClick={onClick} />
+        )}
+      </div>
     </form>
   );
 }
-
 Form.propTypes = {
   children: PropTypes.node,
   onSubmit: PropTypes.func,
   title: PropTypes.string,
   submitTitle: PropTypes.string,
 };
-
 export default memo(Form);
diff --git a/src/components/form/style.css b/src/components/form/style.css
index fef9ffa64..acf968143 100644
--- a/src/components/form/style.css
+++ b/src/components/form/style.css
@@ -1,7 +1,18 @@
 .Form-title {
   margin-bottom: 24px;
 }
-
 .Form button {
   margin-top: 24px;
 }
+
+.Form_theme_small {
+  font-size: 16px;
+}
+
+.Form-action {
+  display: flex;
+  gap: 16px;
+}
+.Form-action > * > * {
+  margin-top: 16px !important;
+}
diff --git a/src/components/item-comment/index.js b/src/components/item-comment/index.js
new file mode 100644
index 000000000..d0c5eb690
--- /dev/null
+++ b/src/components/item-comment/index.js
@@ -0,0 +1,33 @@
+import { memo } from 'react';
+import PropTypes from 'prop-types';
+import { cn as bem } from '@bem-react/classname';
+import './style.css';
+import Button from '../button';
+
+function ItemComment({ author, date, text, titleBtn, onClick = () => {} }) {
+  const cn = bem('ItemComment');
+  return (
+    <div className={cn()}>
+      <div className={cn('header')}>
+        <strong>{author}</strong> <span>{date}</span>
+      </div>
+      <p className={cn('text')}>{text}</p>
+      <Button type={'button'} title={titleBtn} style={'text-primary'} onClick={onClick} />
+    </div>
+  );
+}
+
+// ItemComment.propTypes = {
+//   article: PropTypes.shape({
+//     _id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+//     description: PropTypes.string,
+//     madeIn: PropTypes.object,
+//     category: PropTypes.object,
+//     edition: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+//     price: PropTypes.number,
+//   }).isRequired,
+//   onAdd: PropTypes.func,
+//   t: PropTypes.func,
+// };
+
+export default memo(ItemComment);
diff --git a/src/components/item-comment/style.css b/src/components/item-comment/style.css
new file mode 100644
index 000000000..7ada0c253
--- /dev/null
+++ b/src/components/item-comment/style.css
@@ -0,0 +1,26 @@
+.ItemComment {
+  margin-bottom: 16px;
+}
+
+.ItemComment:last-child {
+  margin-bottom: 16px;
+}
+
+.ItemComment-header {
+  font-size: 12px;
+}
+
+.ItemComment-header strong {
+  margin-right: 12px;
+}
+
+.ItemComment-header span {
+  color: var(--third-text);
+}
+
+.ItemComment-text {
+  margin: 6px 0;
+  font-size: 14px;
+  color: #000000;
+  word-wrap: break-word;
+}
diff --git a/src/components/profile-card/index.js b/src/components/profile-card/index.js
index 121610ff4..495e61ad1 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.profile')}</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.tel')}</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/components/prompt-for-comments/index.js b/src/components/prompt-for-comments/index.js
new file mode 100644
index 000000000..52e9b3864
--- /dev/null
+++ b/src/components/prompt-for-comments/index.js
@@ -0,0 +1,26 @@
+import { memo } from 'react';
+import PropTypes from 'prop-types';
+import './style.css';
+import { cn as bem } from '@bem-react/classname';
+import { Link } from 'react-router-dom';
+
+function PromptForComments({ back, subLink, subDesc }) {
+  const cn = bem('PromptForComments');
+
+  return (
+    <div className={cn()}>
+      <Link className={cn('link')} to="/login" state={{ back: back }}>
+        {subLink}
+      </Link>
+      {subDesc}
+    </div>
+  );
+}
+
+// PromptForComments.propTypes = {
+//   back: PropTypes.string,
+//   subLink: PropTypes.string,
+//   subDesc: PropTypes.string,
+// };
+
+export default memo(PromptForComments);
diff --git a/src/components/prompt-for-comments/style.css b/src/components/prompt-for-comments/style.css
new file mode 100644
index 000000000..b9bf51f23
--- /dev/null
+++ b/src/components/prompt-for-comments/style.css
@@ -0,0 +1,12 @@
+.PromptForComments {
+  margin-bottom: 24px;
+
+  &-link {
+    color: var(--primary);
+
+    &:hover {
+      color: var(--primary-select);
+      text-decoration: underline;
+    }
+  }
+}
diff --git a/src/components/textarea/index.js b/src/components/textarea/index.js
new file mode 100644
index 000000000..478fe8f25
--- /dev/null
+++ b/src/components/textarea/index.js
@@ -0,0 +1,33 @@
+import { memo } from 'react';
+import PropTypes from 'prop-types';
+import { cn as bem } from '@bem-react/classname';
+import './style.css';
+
+function Textarea({ value, onChange, placeholder = '', rows = 5 }) {
+  const cn = bem('Textarea');
+
+  return (
+    <textarea
+      className={cn()}
+      value={value}
+      onChange={onChange}
+      placeholder={placeholder}
+      rows={rows}
+    />
+  );
+}
+
+// Textarea.propTypes = {
+//   article: PropTypes.shape({
+//     _id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+//     description: PropTypes.string,
+//     madeIn: PropTypes.object,
+//     category: PropTypes.object,
+//     edition: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+//     price: PropTypes.number,
+//   }).isRequired,
+//   onAdd: PropTypes.func,
+//   t: PropTypes.func,
+// };
+
+export default memo(Textarea);
\ No newline at end of file
diff --git a/src/components/textarea/style.css b/src/components/textarea/style.css
new file mode 100644
index 000000000..4e13e0264
--- /dev/null
+++ b/src/components/textarea/style.css
@@ -0,0 +1,10 @@
+.Textarea {
+  width: 100%;
+  max-height: 88px;
+  margin-top: 16px;
+  font-size: 14px;
+  padding: 8px 12px;
+  border: 1px solid var(--filter-border);
+  resize: none;
+  overflow: auto;
+}
diff --git a/src/config.js b/src/config.js
index 67c72f734..e6ded068d 100644
--- a/src/config.js
+++ b/src/config.js
@@ -1,3 +1,6 @@
+import ru from './i18n/translations/ru.json';
+import en from './i18n/translations/en.json';
+
 const isProduction = process.env.NODE_ENV === 'production';
 
 /**
@@ -18,6 +21,13 @@ const config = {
   api: {
     baseUrl: '',
   },
+  i18n: {
+    locale: 'ru',
+    dictionary: {
+      ru,
+      en,
+    },
+  },
 };
 
 export default config;
diff --git a/src/containers/comments/index.js b/src/containers/comments/index.js
new file mode 100644
index 000000000..7b56078d7
--- /dev/null
+++ b/src/containers/comments/index.js
@@ -0,0 +1,261 @@
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useLocation, useParams } from 'react-router-dom';
+import { useDispatch, useSelector as useReduxSelector } from 'react-redux';
+import shallowEqual from 'shallowequal';
+import useTranslate from '../../hooks/use-translate';
+import useInit from '../../hooks/use-init';
+import useSelector from '../../hooks/use-selector';
+import ItemComment from '../../components/item-comment';
+import CommentsContainer from '../../components/comments-container';
+import commentsActions from '../../store-redux/comments/action';
+import Spinner from '../../components/spinner';
+import CommentsForm from '../../components/comments-form';
+import CommentsPrompt from '../../components/prompt-for-comments';
+import formatDate from '../../utils/format-date';
+import listToTree from '../../utils/list-to-tree';
+import treeToList from '../../utils/tree-to-list';
+
+// Функция для поиска последнего дочернего комментария
+function findLastChild(comments, targetId, parentLevel = 0) {
+  for (const comment of comments) {
+    if (comment._id === targetId) {
+      if (comment.children && comment.children.length > 0) {
+        const lastChild = findLastChild(
+          comment.children,
+          comment.children[comment.children.length - 1]._id,
+          parentLevel + 1,
+        );
+        return (
+          lastChild || {
+            ...comment.children[comment.children.length - 1],
+            level: parentLevel + 1,
+          }
+        );
+      }
+      return null;
+    }
+    if (comment.children) {
+      const found = findLastChild(comment.children, targetId, parentLevel + 1);
+      if (found) return found;
+    }
+  }
+  return null;
+}
+
+// Функция для определения позиции вставки
+function findInsertPosition(targetId, lastChild, commentsList) {
+  if (lastChild) {
+    return {
+      insertAfterId: lastChild._id,
+      level: lastChild.level + 1,
+    };
+  }
+
+  return {
+    insertAfterId: targetId,
+    level: 1, // Базовый уровень вложенности для ответа
+  };
+}
+
+const Comments = () => {
+  const { t } = useTranslate();
+  const dispatch = useDispatch();
+  const params = useParams();
+  const location = useLocation();
+  const back = location?.pathname || '/';
+  const formRef = useRef(null);
+
+  const [newComment, setNewComment] = useState({
+    text: '',
+  });
+  const [activeReplyId, setActiveReplyId] = useState(null);
+
+  const selectRedux = useReduxSelector(
+    state => ({
+      commentsList: state.comments.data,
+      waiting: state.comments.waiting,
+      success: state.comments.success,
+      article: state.article.data,
+    }),
+    shallowEqual,
+  );
+
+  const select = useSelector(state => ({
+    exists: state.session.exists,
+    user: state.session.user,
+  }));
+
+  useInit(() => {
+    dispatch(commentsActions.load(params.id));
+  }, [params.id]);
+
+  useEffect(() => {
+    if (activeReplyId && formRef.current) {
+      formRef.current.scrollIntoView({
+        behavior: 'smooth',
+        block: 'center',
+      });
+    }
+  }, [activeReplyId]);
+
+  const commentListTree = useMemo(
+    () => listToTree(selectRedux.commentsList),
+    [selectRedux.commentsList],
+  );
+
+  const comments = useMemo(
+    () =>
+      treeToList(commentListTree, (item, level) => ({
+        ...item,
+        id: item._id,
+        level: level,
+        padding: Math.min(level, 8) * 40,
+        author: item.author?.profile?.name,
+        date: item.dateCreate,
+        text: item.text,
+      })),
+    [commentListTree],
+  );
+
+  const lastChild = useMemo(
+    () => (activeReplyId ? findLastChild(commentListTree, activeReplyId) : null),
+    [commentListTree, activeReplyId],
+  );
+
+  const insertPosition = useMemo(
+    () => (activeReplyId ? findInsertPosition(activeReplyId, lastChild, comments) : null),
+    [lastChild, activeReplyId, comments],
+  );
+
+  const callbacks = {
+    onChange: useCallback(e => {
+      setNewComment(prev => ({
+        ...prev,
+        text: e.target.value,
+      }));
+    }, []),
+
+    onSubmit: useCallback(
+      e => {
+        e.preventDefault();
+        const isEmpty = newComment.text.trim().length > 0;
+
+        if (isEmpty) {
+          const parent = {
+            _id: activeReplyId || params.id,
+            _type: activeReplyId ? 'comment' : selectRedux.article._type,
+          };
+
+          dispatch(commentsActions.create({ ...newComment, parent }, select.user.profile.name));
+          setNewComment({ text: '' });
+          setActiveReplyId(null);
+        }
+      },
+      [
+        newComment,
+        activeReplyId,
+        params.id,
+        selectRedux.article._type,
+        select.user?.profile?.name,
+        dispatch,
+      ],
+    ),
+
+    onCancel: useCallback(() => {
+      setNewComment(prev => ({ ...prev, text: '' }));
+      setActiveReplyId(null);
+    }, []),
+
+    onAnswer: useCallback(
+      comment => {
+        setNewComment(prev => ({
+          ...prev,
+          text: `${t('comments.answer-text')}${comment.author}`,
+        }));
+        setActiveReplyId(comment.id);
+      },
+      [t],
+    ),
+  };
+
+  const renderComment = (comment, index) => {
+    const isCurrentUserComment = select.user.profile?.name === comment.author;
+    const commentStyle = {
+      color: isCurrentUserComment ? '#4B5563' : 'inherit',
+      paddingLeft: `${comment.padding}px`,
+      marginTop: index === 0 ? '24px' : 0,
+    };
+
+    return (
+      <div key={comment.id}>
+        <div style={commentStyle}>
+          <ItemComment
+            padding={comment.padding}
+            author={comment.author}
+            date={formatDate(comment.date)}
+            text={comment.text}
+            titleBtn={t('comments.answer')}
+            onClick={() => callbacks.onAnswer(comment)}
+          />
+        </div>
+
+        {/* Форма вставляется после последнего комментария в цепочке */}
+        {insertPosition && insertPosition.insertAfterId === comment.id && (
+          <div
+            ref={formRef}
+            style={{
+              marginLeft: `${insertPosition.level * 40}px`,
+              marginTop: '16px',
+            }}
+          >
+            {select.exists ? (
+              <CommentsForm
+                onSubmit={callbacks.onSubmit}
+                style="small"
+                option="cancel"
+                onClick={callbacks.onCancel}
+                value={newComment.text}
+                onChange={callbacks.onChange}
+                success={selectRedux.success}
+                t={t}
+              />
+            ) : (
+              <CommentsPrompt
+                back={back}
+                subLink={t('comments.singIn')}
+                subDesc={t('comments.singIn-desc')}
+              />
+            )}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <CommentsContainer t={t} count={comments.length}>
+      <Spinner active={selectRedux.waiting}>{comments.map(renderComment)}</Spinner>
+
+      {!select.exists && !activeReplyId && (
+        <CommentsPrompt
+          back={back}
+          subLink={t('comments.singIn')}
+          subDesc={t('comments.singIn-desc')}
+        />
+      )}
+
+      {select.exists && !activeReplyId && (
+        <CommentsForm
+          onSubmit={callbacks.onSubmit}
+          style="small"
+          value={newComment.text}
+          onChange={callbacks.onChange}
+          success={selectRedux.success}
+          t={t}
+        />
+      )}
+    </CommentsContainer>
+  );
+};
+
+export default memo(Comments);
diff --git a/src/containers/locale-select/index.js b/src/containers/locale-select/index.js
index a60df2a9a..b5dcbe29d 100644
--- a/src/containers/locale-select/index.js
+++ b/src/containers/locale-select/index.js
@@ -5,10 +5,10 @@ import useTranslate from '../../hooks/use-translate';
 import Select from '../../components/select';
 
 function LocaleSelect() {
-  const { lang, setLang } = useTranslate();
+  const { locale, setLocale } = useTranslate();
 
   const options = {
-    lang: useMemo(
+    locale: useMemo(
       () => [
         { value: 'ru', title: 'Русский' },
         { value: 'en', title: 'English' },
@@ -17,7 +17,7 @@ function LocaleSelect() {
     ),
   };
 
-  return <Select onChange={setLang} value={lang} options={options.lang} size="small" text />;
+  return <Select onChange={setLocale} value={locale} options={options.locale} size="small" text />;
 }
 
 export default memo(LocaleSelect);
diff --git a/src/hooks/use-translate.js b/src/hooks/use-translate.js
index bdcbf1071..d1eada44a 100644
--- a/src/hooks/use-translate.js
+++ b/src/hooks/use-translate.js
@@ -1,9 +1,24 @@
-import { useCallback, useContext } from 'react';
-import { I18nContext } from '../i18n/context';
-
-/**
- * Хук возвращает функцию для локализации текстов, код языка и функцию его смены
- */
-export default function useTranslate() {
-  return useContext(I18nContext);
+// /**
+//  * Хук возвращает функцию для локализации текстов, код языка и функцию его смены
+//  */
+
+import { useEffect, useState } from 'react';
+import useServices from './use-services';
+
+export default function useServiceTranslate() {
+  const services = useServices();
+  const i18n = services.i18n;
+
+  const [locale, setCurrentLocale] = useState(i18n.getLocale());
+
+  useEffect(() => {
+    const unsubscribe = i18n.subscribe(setCurrentLocale);
+    return () => unsubscribe();
+  }, [i18n]);
+
+  return {
+    locale,
+    setLocale: 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..83106c7e6
--- /dev/null
+++ b/src/i18n/index.js
@@ -0,0 +1,55 @@
+class I18nService {
+  /**
+   * @param {Services} services Менеджер сервисов
+   * @param {Object} config Конфигурация: словарь и текущая локаль
+   */
+  constructor(services, config = {}) {
+    this.services = services;
+    this.locale = config.locale;
+    this.dictionary = config.dictionary || {};
+    this.listeners = new Set();
+  }
+
+  getLocale() {
+    return this.locale;
+  }
+
+  setLocale(locale) {
+    if (this.locale !== locale) {
+      this.locale = locale;
+      this.notify(locale);
+    }
+  }
+
+  subscribe(callback) {
+    this.listeners.add(callback);
+    return () => this.listeners.delete(callback);
+  }
+
+  notify(locale) {
+    this.listeners.forEach(cb => cb(locale));
+  }
+
+  /**
+   * Перевод строки с учётом множественного числа (если указано)
+   * @param {string} text Ключ перевода
+   * @param {number} [plural] Число для определения формы множественности
+   * @param {string} [lang=this.locale] Язык перевода
+   * @returns {string} Переведённая строка
+   */
+  translate(text, plural, lang = this.locale) {
+    const translations = this.dictionary[lang];
+    let result = translations && text in translations ? translations[text] : text;
+
+    if (typeof plural !== 'undefined') {
+      const pluralKey = new Intl.PluralRules(lang).select(plural);
+      if (result && typeof result === 'object' && pluralKey in result) {
+        result = result[pluralKey];
+      }
+    }
+
+    return result;
+  }
+}
+
+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..0da018fda 100644
--- a/src/i18n/translations/en.json
+++ b/src/i18n/translations/en.json
@@ -5,7 +5,7 @@
   "basket.open": "Open",
   "basket.close": "Close",
   "basket.inBasket": "In cart",
-  "basket.empty": "empty",
+  "basket.empty": "Your cart is empty",
   "basket.total": "Total",
   "basket.unit": "pcs",
   "basket.delete": "Delete",
@@ -14,6 +14,10 @@
     "other": "articles"
   },
   "article.add": "Add",
+  "card.country": "Made in:",
+  "card.сategory": "Category:",
+  "card.year": "Year of manufacture:",
+  "card.price": "Price:",
   "filter.reset": "Reset",
   "auth.title": "Sign In",
   "auth.login": "Login",
@@ -22,5 +26,19 @@
   "auth.login-placeholder": "Enter login",
   "auth.password-placeholder": "Enter password",
   "session.signIn": "Sign In",
-  "session.signOut": "Sign Out"
+  "session.signOut": "Sign Out",
+  "comments.header": "Comments",
+  "comments.singIn": "Sign in",
+  "comments.singIn-desc": ", to be able to comment",
+  "comments.answer": "Answer",
+  "comments.answer-text": "My answer for ",
+  "comments.send": "Submit",
+  "comments.cancel": "Cancel",
+  "comments.title": "New comment",
+  "comments.answer-title": "New answer",
+  "comments.error": "Submission failed, please try again",
+  "profile.profile": "Profile",
+  "profile.name": "Name:",
+  "profile.tel": "Contact Number:",
+  "profile.email": "Email:"
 }
diff --git a/src/i18n/translations/index.js b/src/i18n/translations/index.js
deleted file mode 100644
index e215c553a..000000000
--- a/src/i18n/translations/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as en } from './en.json';
-export { default as ru } from './ru.json';
diff --git a/src/i18n/translations/ru.json b/src/i18n/translations/ru.json
index a18fb845e..77b08c2ba 100644
--- a/src/i18n/translations/ru.json
+++ b/src/i18n/translations/ru.json
@@ -16,6 +16,10 @@
     "other": "товара"
   },
   "article.add": "Добавить",
+  "card.country": "Страна производитель:",
+  "card.сategory": "Категория:",
+  "card.year": "Год выпуска:",
+  "card.price": "Цена:",
   "filter.reset": "Сбросить",
   "auth.title": "Вход",
   "auth.login": "Логин",
@@ -24,5 +28,19 @@
   "auth.login-placeholder": "Введите логин",
   "auth.password-placeholder": "Введите пароль",
   "session.signIn": "Вход",
-  "session.signOut": "Выход"
+  "session.signOut": "Выход",
+  "comments.header": "Комментарии",
+  "comments.singIn": "Войдите",
+  "comments.singIn-desc": ", чтобы иметь возможность комментировать",
+  "comments.answer": "Ответить",
+  "comments.answer-text": "Мой ответ для ",
+  "comments.send": "Отправить",
+  "comments.cancel": "Отмена",
+  "comments.title": "Новый комментарий",
+  "comments.answer-title": "Новый ответ",
+  "comments.error": "Ошибка, попробуйте отправить повторно",
+  "profile.profile": "Профиль",
+  "profile.name": "Имя:",
+  "profile.tel": "Телефон:",
+  "profile.email": "Email:"
 }
diff --git a/src/index.js b/src/index.js
index f49db385a..a52b32f1d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,7 +2,7 @@ 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 +16,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..955772d28 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/index';
 
 class Services {
   constructor(config) {
@@ -38,6 +39,13 @@ class Services {
     }
     return this._redux;
   }
+
+  get i18n() {
+    if (!this._i18n) {
+      this._i18n = new I18nService(this, this.config.i18n);
+    }
+    return this._i18n;
+  }
 }
 
 export default Services;
diff --git a/src/store-redux/comments/action.js b/src/store-redux/comments/action.js
new file mode 100644
index 000000000..237e5ffca
--- /dev/null
+++ b/src/store-redux/comments/action.js
@@ -0,0 +1,51 @@
+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 } });
+      } catch (e) {
+        //Ошибка загрузки
+        dispatch({ type: 'comments/load-error' });
+      }
+    };
+  },
+  create: (comment, userName) => {
+    return async (dispatch, getState, services) => {
+      // Сброс комментариев и установка признака ожидания загрузки
+      dispatch({ type: 'comments/create-start' });
+
+      try {
+        const res = await services.api.request({
+          url: `/api/v1/comments`,
+          method: 'POST',
+          body: JSON.stringify(comment),
+        });
+        // комментарии загружены успешно
+        dispatch({
+          type: 'comments/create-success',
+          payload: {
+            data: [
+              ...getState().comments.data,
+              { ...res.data.result, author: { profile: { name: userName } } },
+            ],
+          },
+        });
+      } catch (e) {
+        //Ошибка загрузки
+        dispatch({ type: 'comments/create-error' });
+      }
+    };
+  },
+};
diff --git a/src/store-redux/comments/reducer.js b/src/store-redux/comments/reducer.js
new file mode 100644
index 000000000..1af543de2
--- /dev/null
+++ b/src/store-redux/comments/reducer.js
@@ -0,0 +1,37 @@
+// Начальное состояние
+export const initialState = {
+  data: [],
+  waiting: false, // признак ожидания загрузки
+  success: true,
+};
+
+// Обработчик действий
+function reducer(state = initialState, action) {
+  switch (action.type) {
+    case 'comments/load-start':
+      return { ...state, data: [], waiting: true };
+
+    case 'comments/load-success': {
+      return { ...state, data: action.payload.data, waiting: false };
+    }
+
+    case 'comments/load-error':
+      return { ...state, data: [], waiting: false };
+
+    case 'comments/create-start':
+      return { ...state, waiting: true, success: true };
+
+    case 'comments/create-success': {
+      return { ...state, success: true, waiting: false, data: action.payload.data };
+    }
+
+    case 'comments/create-error':
+      return { ...state, success: false, waiting: false };
+
+    default:
+      // Нет изменений
+      return state;
+  }
+}
+
+export default reducer;
diff --git a/src/store-redux/exports.js b/src/store-redux/exports.js
index 1a0a3d742..80bc8df38 100644
--- a/src/store-redux/exports.js
+++ b/src/store-redux/exports.js
@@ -1,2 +1,3 @@
+export { default as comments } from './comments/reducer';
 export { default as article } from './article/reducer';
 export { default as modals } from './modals/reducer';
diff --git a/src/utils/find-insert-position.js b/src/utils/find-insert-position.js
new file mode 100644
index 000000000..4efb0fe56
--- /dev/null
+++ b/src/utils/find-insert-position.js
@@ -0,0 +1,15 @@
+export default function findInsertPosition(targetId, lastChild, commentsList) {
+  if (lastChild) {
+    return {
+      insertAfterId: lastChild.id,
+      level: lastChild.level + 1,
+    };
+  }
+
+  const parentComment = commentsList.find(comment => comment.id === targetId);
+
+  return {
+    insertAfterId: targetId,
+    level: parentComment ? parentComment.level + 1 : 0,
+  };
+}
diff --git a/src/utils/find-last-child.js b/src/utils/find-last-child.js
new file mode 100644
index 000000000..90d502513
--- /dev/null
+++ b/src/utils/find-last-child.js
@@ -0,0 +1,23 @@
+export default function findLastChild(comments, targetId, parentLevel = 0) {
+  for (const comment of comments) {
+    if (comment._id === targetId) {
+      if (comment.children && comment.children.length > 0) {
+        const lastChild = findLastChild(
+          comment.children,
+          comment.children[comment.children.length - 1]._id,
+          parentLevel + 1, // Увеличиваем уровень для детей
+        );
+        return lastChild; // Возвращаем последнего ребёнка без перезаписи уровня
+      }
+      return {
+        ...comment,
+        level: parentLevel, // Уровень должен быть parentLevel, а не +1 (чтобы не "опережать" расчёты)
+      };
+    }
+    if (comment.children) {
+      const found = findLastChild(comment.children, targetId, parentLevel + 1);
+      if (found) return found;
+    }
+  }
+  return null;
+}
diff --git a/src/utils/format-date.js b/src/utils/format-date.js
new file mode 100644
index 000000000..6cd3957df
--- /dev/null
+++ b/src/utils/format-date.js
@@ -0,0 +1,18 @@
+/**
+ * Форматирует строку даты в читаемый вид на русском языке.
+ * @param {string | number | Date} input - Исходная дата.
+ * @returns {string}
+ */
+export default function formatDate(input) {
+  const parsedDate = new Date(input);
+
+  const formatter = new Intl.DateTimeFormat('ru-RU', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+
+  return formatter.format(parsedDate);
+}
diff --git a/src/utils/list-to-tree/index.js b/src/utils/list-to-tree/index.js
index fb4d20a66..e2c4f829b 100644
--- a/src/utils/list-to-tree/index.js
+++ b/src/utils/list-to-tree/index.js
@@ -20,6 +20,8 @@ export default function listToTree(list, key = '_id') {
 
     // Если элемент имеет родителя, то добавляем его в подчиненные родителя
     if (item.parent?.[key]) {
+      const parentExists = list.some(el => el[key] === item.parent[key]);
+      if (!parentExists) continue;
       // Если родителя ещё нет в индексе, то индекс создаётся, ведь _id родителя известен
       if (!trees[item.parent[key]]) {
         trees[item.parent[key]] = { children: [] };
diff --git a/src/utils/tree-to-list/index.js b/src/utils/tree-to-list/index.js
index 3a79c0b06..26c3c55fd 100644
--- a/src/utils/tree-to-list/index.js
+++ b/src/utils/tree-to-list/index.js
@@ -7,9 +7,16 @@
  * @returns {Array} Корневые узлы
  */
 export default function treeToList(tree, callback, level = 0, result = []) {
+  if (!Array.isArray(tree)) return result;
+
   for (const item of tree) {
-    result.push(callback ? callback(item, level) : item);
-    if (item.children?.length) treeToList(item.children, callback, level + 1, result);
+    const newItem = callback ? callback(item, level) : { ...item, level, id: item._id };
+    result.push(newItem);
+
+    if (item.children?.length) {
+      treeToList(item.children, callback, level + 1, result);
+    }
   }
+
   return result;
 }