diff --git a/extractedTranslations/en/translation.json b/extractedTranslations/en/translation.json
index 44fecf5..1d5b748 100644
--- a/extractedTranslations/en/translation.json
+++ b/extractedTranslations/en/translation.json
@@ -14,6 +14,7 @@
   "Choose ": "",
   "Choose country": "",
   "Choose currency": "",
+  "Close": "",
   "Comments": "",
   "Comments is loading": "",
   "Create new article": "",
diff --git a/json-server/db.json b/json-server/db.json
index 7b1bb01..692e982 100644
--- a/json-server/db.json
+++ b/json-server/db.json
@@ -739,6 +739,12 @@
       "userId": "1",
       "text": "asfasf",
       "id": "SygCNYE"
+    },
+    {
+      "articleId": "1",
+      "userId": "1",
+      "text": "some commentsome commentsome commentsome commentsome commentsome commentsome commentsome commentsome commentsome commentsome commentsome commentsome commentsome commentsome commentsome commentsome commentsome commentsome commentsome commentsome commentsome commentsome commentsome commentsome commentsome commentsome commentsome commentsome commentsome commentsome commentsome commentsome comment",
+      "id": "wIFyEdj"
     }
   ],
   "users": [
@@ -756,7 +762,7 @@
       },
       "avatar": "https://mobimg.b-cdn.net/v3/fetch/22/2207633df03a819cd72889249c8361a8.jpeg?w=1470&r=0.5625",
       "jsonSettings": {
-        "theme": "app_light_theme",
+        "theme": "app_dark_theme",
         "isFirstVisit": true,
         "settingsPageHasBeenOpen": false,
         "isArticlesPageWasOpened": true
diff --git a/src/entities/Article/ui/ArticleDetails/ArticleDetails.tsx b/src/entities/Article/ui/ArticleDetails/ArticleDetails.tsx
index c262e83..5bda948 100644
--- a/src/entities/Article/ui/ArticleDetails/ArticleDetails.tsx
+++ b/src/entities/Article/ui/ArticleDetails/ArticleDetails.tsx
@@ -47,7 +47,7 @@ export const ArticleDetails = memo(({ className, id }: ArticleDetailsProps) => {
     let content;
     if (isLoading) {
         content = (
-            <>
+            <VStack gap="16" max>
                 <Skeleton
                     className={cls.avatar}
                     width={200}
@@ -58,7 +58,7 @@ export const ArticleDetails = memo(({ className, id }: ArticleDetailsProps) => {
                 <Skeleton className={cls.skeleton} width={600} height={24} />
                 <Skeleton className={cls.skeleton} width="100%" height={200} />
                 <Skeleton className={cls.skeleton} width="100%" height={200} />
-            </>
+            </VStack>
         );
     } else if (error) {
         content = (
diff --git a/src/entities/Comment/ui/CommentCard/CommentCard.module.scss b/src/entities/Comment/ui/CommentCard/CommentCard.module.scss
index 751864f..7fb16d6 100644
--- a/src/entities/Comment/ui/CommentCard/CommentCard.module.scss
+++ b/src/entities/Comment/ui/CommentCard/CommentCard.module.scss
@@ -1,6 +1,5 @@
 .CommentCard {
     padding: 10px;
-    border: 1px solid var(--primary-color);
 }
 
 .header {
diff --git a/src/entities/Comment/ui/CommentCard/CommentCard.tsx b/src/entities/Comment/ui/CommentCard/CommentCard.tsx
index d7bb823..74ee38d 100644
--- a/src/entities/Comment/ui/CommentCard/CommentCard.tsx
+++ b/src/entities/Comment/ui/CommentCard/CommentCard.tsx
@@ -1,14 +1,14 @@
-import { useTranslation } from 'react-i18next';
 import { memo } from 'react';
-import { VStack } from '@/shared/ui/redesigned/Stack';
+import { HStack, VStack } from '@/shared/ui/redesigned/Stack';
 import { AppLink } from '@/shared/ui/deprecated/AppLink';
 import { classNames } from '@/shared/lib/classNames/classNames';
 import cls from './CommentCard.module.scss';
 import { Comment } from '../../model/types/comment';
-import { Avatar } from '@/shared/ui/deprecated/Avatar/Avatar';
-import { Text } from '@/shared/ui/deprecated/Text/Text';
-import { Skeleton } from '@/shared/ui/deprecated/Skeleton/Skeleton';
+import { Avatar } from '@/shared/ui/redesigned/Avatar';
+import { Text } from '@/shared/ui/redesigned/Text';
+import { Skeleton } from '@/shared/ui/redesigned/Skeleton';
 import { getRouteProfile } from '@/shared/const/router';
+import { Card } from '@/shared/ui/redesigned/Card';
 
 interface CommentCardProps {
     className?: string;
@@ -18,8 +18,6 @@ interface CommentCardProps {
 
 export const CommentCard = memo(
     ({ className, comment, isLoading }: CommentCardProps) => {
-        const { t } = useTranslation();
-
         if (isLoading) {
             return (
                 <VStack
@@ -49,30 +47,28 @@ export const CommentCard = memo(
         }
 
         return (
-            <VStack
-                data-testid="CommentCard.Content"
-                max
-                gap="8"
-                className={classNames(cls.CommentCard, {}, [className])}
-            >
-                <AppLink
-                    to={getRouteProfile(comment.user.id)}
-                    className={cls.header}
+            <Card padding="24" max>
+                <VStack
+                    data-testid="CommentCard.Content"
+                    max
+                    gap="8"
+                    className={classNames('', {}, [className])}
                 >
-                    {comment.user.avatar && (
-                        <Avatar
-                            src={comment.user.avatar}
-                            alt={comment.user.username}
-                            size={30}
-                        />
-                    )}
-                    <Text
-                        className={cls.username}
-                        title={comment.user.username}
-                    />
-                </AppLink>
-                <Text className={cls.text} text={comment.text} />
-            </VStack>
+                    <AppLink to={getRouteProfile(comment.user.id)}>
+                        <HStack gap="16">
+                            {comment.user.avatar && (
+                                <Avatar
+                                    src={comment.user.avatar}
+                                    alt={comment.user.username}
+                                    size={30}
+                                />
+                            )}
+                            <Text text={comment.user.username} bold />
+                        </HStack>
+                    </AppLink>
+                    <Text text={comment.text} />
+                </VStack>
+            </Card>
         );
     },
 );
diff --git a/src/entities/Comment/ui/CommentList/CommentList.tsx b/src/entities/Comment/ui/CommentList/CommentList.tsx
index 219ffd4..ac8a256 100644
--- a/src/entities/Comment/ui/CommentList/CommentList.tsx
+++ b/src/entities/Comment/ui/CommentList/CommentList.tsx
@@ -2,7 +2,7 @@ import { useTranslation } from 'react-i18next';
 import { memo } from 'react';
 import { VStack } from '@/shared/ui/redesigned/Stack';
 import { classNames } from '@/shared/lib/classNames/classNames';
-import { Text } from '@/shared/ui/deprecated/Text/Text';
+import { Text } from '@/shared/ui/redesigned/Text';
 import { CommentCard } from '../CommentCard/CommentCard';
 import { Comment } from '../../model/types/comment';
 
diff --git a/src/entities/Rating/ui/RatingCard.tsx b/src/entities/Rating/ui/RatingCard.tsx
index b86dc7d..7a2eabe 100644
--- a/src/entities/Rating/ui/RatingCard.tsx
+++ b/src/entities/Rating/ui/RatingCard.tsx
@@ -2,14 +2,14 @@ import { useTranslation } from 'react-i18next';
 import { memo, useCallback, useState } from 'react';
 import { BrowserView, MobileView } from 'react-device-detect';
 import { HStack, VStack } from '@/shared/ui/redesigned/Stack';
-import { Card } from '@/shared/ui/deprecated/Card';
-import { Button, ButtonSize, ButtonTheme } from '@/shared/ui/deprecated/Button';
-import { Text } from '@/shared/ui/deprecated/Text';
+import { Card } from '@/shared/ui/redesigned/Card';
+import { Button } from '@/shared/ui/redesigned/Button';
+import { Text } from '@/shared/ui/redesigned/Text';
 import { classNames } from '@/shared/lib/classNames/classNames';
-import { Input } from '@/shared/ui/deprecated/Input';
-import { StarRating } from '@/shared/ui/deprecated/StarRating';
+import { Input } from '@/shared/ui/redesigned/Input';
 import { Modal } from '@/shared/ui/redesigned/Modal';
 import { Drawer } from '@/shared/ui/redesigned/Drawer';
+import { StarRating } from '@/shared/ui/redesigned/StarRating';
 
 interface RatingCardProps {
     className?: string;
@@ -92,15 +92,15 @@ export const RatingCard = memo((props: RatingCardProps) => {
                             <Button
                                 data-testid="RatingCard.Close"
                                 onClick={cancelHandle}
-                                theme={ButtonTheme.OUTLINE_RED}
+                                variant="outline"
                             >
-                                {t('Закрыть')}
+                                {t('Close')}
                             </Button>
                             <Button
                                 data-testid="RatingCard.Send"
                                 onClick={acceptHandle}
                             >
-                                {t('Отправить')}
+                                {t('Send')}
                             </Button>
                         </HStack>
                     </VStack>
@@ -110,11 +110,7 @@ export const RatingCard = memo((props: RatingCardProps) => {
                 <Drawer isOpen={isModalOpen} lazy onClose={cancelHandle}>
                     <VStack gap="32">
                         {modalContent}
-                        <Button
-                            fullWidth
-                            onClick={acceptHandle}
-                            size={ButtonSize.L}
-                        >
+                        <Button fullWidth onClick={acceptHandle} size="l">
                             {t('Send')}
                         </Button>
                     </VStack>
diff --git a/src/features/addCommentForm/ui/AddCommentForm/AddCommentForm.module.scss b/src/features/addCommentForm/ui/AddCommentForm/AddCommentForm.module.scss
deleted file mode 100644
index b3a4576..0000000
--- a/src/features/addCommentForm/ui/AddCommentForm/AddCommentForm.module.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.AddCommentForm {
-    border: 1px solid var(--primary-color);
-    padding: 20px;
-}
-
-.input {
-    flex-grow: 1;
-}
diff --git a/src/features/addCommentForm/ui/AddCommentForm/AddCommentForm.tsx b/src/features/addCommentForm/ui/AddCommentForm/AddCommentForm.tsx
index 253462f..6c7841c 100644
--- a/src/features/addCommentForm/ui/AddCommentForm/AddCommentForm.tsx
+++ b/src/features/addCommentForm/ui/AddCommentForm/AddCommentForm.tsx
@@ -2,7 +2,7 @@ import { useTranslation } from 'react-i18next';
 import { memo, useCallback } from 'react';
 import { useSelector } from 'react-redux';
 import { HStack } from '@/shared/ui/redesigned/Stack';
-import { Button, ButtonTheme } from '@/shared/ui/deprecated/Button';
+import { Button } from '@/shared/ui/redesigned/Button';
 import { classNames } from '@/shared/lib/classNames/classNames';
 import { useAppDispatch } from '@/shared/lib/hook/useAppDispatch/useAppDispatch';
 import {
@@ -17,8 +17,8 @@ import {
     getAddCommentFormError,
     getAddCommentFormText,
 } from '../../model/selectors/addCommentFormSelectors';
-import cls from './AddCommentForm.module.scss';
-import { Input } from '@/shared/ui/deprecated/Input';
+import { Input } from '@/shared/ui/redesigned/Input';
+import { Card } from '@/shared/ui/redesigned/Card';
 
 export interface AddCommentFormProps {
     className?: string;
@@ -51,27 +51,30 @@ const AddCommentForm = memo((props: AddCommentFormProps) => {
 
     return (
         <DynamicModuleLoader reducers={reducers}>
-            <HStack
-                data-testid="AddCommentForm"
-                justify="between"
-                max
-                className={classNames(cls.AddCommentForm, {}, [className])}
-            >
-                <Input
-                    data-testid="AddCommentForm.Input"
-                    value={text}
-                    placeholder={t('Enter comment text')}
-                    className={cls.input}
-                    onChange={onCommentTextChange}
-                />
-                <Button
-                    data-testid="AddCommentForm.Button"
-                    theme={ButtonTheme.OUTLINE}
-                    onClick={onSendHandler}
+            <Card padding="24" border="round" max>
+                <HStack
+                    data-testid="AddCommentForm"
+                    justify="between"
+                    max
+                    gap="16"
+                    align="center"
+                    className={classNames('', {}, [className])}
                 >
-                    {t('Send')}
-                </Button>
-            </HStack>
+                    <Input
+                        data-testid="AddCommentForm.Input"
+                        value={text}
+                        placeholder={t('Enter comment text')}
+                        onChange={onCommentTextChange}
+                    />
+                    <Button
+                        data-testid="AddCommentForm.Button"
+                        variant="outline"
+                        onClick={onSendHandler}
+                    >
+                        {t('Send')}
+                    </Button>
+                </HStack>
+            </Card>
         </DynamicModuleLoader>
     );
 });
diff --git a/src/features/articleRating/ui/ArticleRating/ArticleRating.tsx b/src/features/articleRating/ui/ArticleRating/ArticleRating.tsx
index 7c55bcd..10f1d5a 100644
--- a/src/features/articleRating/ui/ArticleRating/ArticleRating.tsx
+++ b/src/features/articleRating/ui/ArticleRating/ArticleRating.tsx
@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next';
 import { memo, useCallback } from 'react';
 import { useSelector } from 'react-redux';
-import { Skeleton } from '@/shared/ui/deprecated/Skeleton';
+import { Skeleton } from '@/shared/ui/redesigned/Skeleton';
 import { RatingCard } from '@/entities/Rating';
 import {
     useGetArticleRating,
diff --git a/src/features/articleRecommendationsList/ui/ArticleRecommendationsList/ArticleRecommendationsList.tsx b/src/features/articleRecommendationsList/ui/ArticleRecommendationsList/ArticleRecommendationsList.tsx
index 331e6e2..065e11f 100644
--- a/src/features/articleRecommendationsList/ui/ArticleRecommendationsList/ArticleRecommendationsList.tsx
+++ b/src/features/articleRecommendationsList/ui/ArticleRecommendationsList/ArticleRecommendationsList.tsx
@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next';
 import { memo } from 'react';
 import { VStack } from '@/shared/ui/redesigned/Stack';
-import { Text, TextSize } from '@/shared/ui/deprecated/Text';
+import { Text } from '@/shared/ui/redesigned/Text';
 import { classNames } from '@/shared/lib/classNames/classNames';
 import { ArticleList } from '../../../../entities/Article';
 import { useArticleRecommendaionsList } from '../../api/ArticleRecommendationsApi';
@@ -31,7 +31,7 @@ export const ArticleRecommendationsList = memo(
                 max
                 className={classNames('', {}, [className])}
             >
-                <Text size={TextSize.L} title={t('Recommend')} />
+                <Text size="l" title={t('Recommend')} />
                 <ArticleList articles={articles} target="_blank" />
             </VStack>
         );
diff --git a/src/pages/ArticlesDetailsPage/ui/ArticleDetailsComments/ArticleDetailsComments.tsx b/src/pages/ArticlesDetailsPage/ui/ArticleDetailsComments/ArticleDetailsComments.tsx
index 23e2400..1550b69 100644
--- a/src/pages/ArticlesDetailsPage/ui/ArticleDetailsComments/ArticleDetailsComments.tsx
+++ b/src/pages/ArticlesDetailsPage/ui/ArticleDetailsComments/ArticleDetailsComments.tsx
@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next';
 import { memo, Suspense, useCallback } from 'react';
 import { useSelector } from 'react-redux';
-import { Text, TextSize } from '@/shared/ui/deprecated/Text';
+import { Text } from '@/shared/ui/redesigned/Text';
 import { classNames } from '@/shared/lib/classNames/classNames';
 import { AddCommentForm } from '@/features/addCommentForm';
 import { useAppDispatch } from '@/shared/lib/hook/useAppDispatch/useAppDispatch';
@@ -41,7 +41,7 @@ export const ArticleDetailsComments = memo(
 
         return (
             <VStack gap="16" max className={classNames('', {}, [className])}>
-                <Text size={TextSize.L} title={t('Comments')} />
+                <Text size="l" title={t('Comments')} />
                 <Suspense fallback={<Loader />}>
                     <AddCommentForm onSendComment={onSendComment} />
                 </Suspense>
diff --git a/src/pages/ArticlesDetailsPage/ui/ArticlesDetailsPage/ArticlesDetailsPage.tsx b/src/pages/ArticlesDetailsPage/ui/ArticlesDetailsPage/ArticlesDetailsPage.tsx
index 0b8b811..3aaf7b0 100644
--- a/src/pages/ArticlesDetailsPage/ui/ArticlesDetailsPage/ArticlesDetailsPage.tsx
+++ b/src/pages/ArticlesDetailsPage/ui/ArticlesDetailsPage/ArticlesDetailsPage.tsx
@@ -7,7 +7,6 @@ import {
 } from '@/shared/lib/components/DynamicModuleLoared/DynamicModuleLoared';
 import { ArticleRecommendationsList } from '@/features/articleRecommendationsList';
 import { ArticleDetailsComments } from '../../ui/ArticleDetailsComments/ArticleDetailsComments';
-
 import { articleDetailsPageReducer } from '../../model/slices';
 import { ArticleRating } from '@/features/articleRating';
 import { Page } from '@/widgets/Page';
diff --git a/src/shared/ui/deprecated/StarRating/StarRating.module.scss b/src/shared/ui/deprecated/StarRating/StarRating.module.scss
deleted file mode 100644
index ad9217d..0000000
--- a/src/shared/ui/deprecated/StarRating/StarRating.module.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-.StarIcon {
-    cursor: pointer;
-}
-
-.normal {
-    fill: none;
-}
-
-.hovered {
-    fill: var(--primary-color);
-}
-
-.isSelected {
-    cursor: auto;
-}
diff --git a/src/shared/ui/redesigned/StarRating/StarRating.module.scss b/src/shared/ui/redesigned/StarRating/StarRating.module.scss
new file mode 100644
index 0000000..141cbc9
--- /dev/null
+++ b/src/shared/ui/redesigned/StarRating/StarRating.module.scss
@@ -0,0 +1,21 @@
+.StarRating {
+    .normal {
+        fill: none;
+    }
+
+    .hovered {
+        fill: var(--icon-redesigned);
+    }
+}
+
+.normal {
+    fill: none;
+}
+
+.starIcon {
+    cursor: pointer;
+}
+
+.selected {
+    cursor: auto;
+}
diff --git a/src/shared/ui/deprecated/StarRating/StarRating.stories.tsx b/src/shared/ui/redesigned/StarRating/StarRating.stories.tsx
similarity index 100%
rename from src/shared/ui/deprecated/StarRating/StarRating.stories.tsx
rename to src/shared/ui/redesigned/StarRating/StarRating.stories.tsx
diff --git a/src/shared/ui/deprecated/StarRating/StarRating.tsx b/src/shared/ui/redesigned/StarRating/StarRating.tsx
similarity index 92%
rename from src/shared/ui/deprecated/StarRating/StarRating.tsx
rename to src/shared/ui/redesigned/StarRating/StarRating.tsx
index 6ec7671..62fb572 100644
--- a/src/shared/ui/deprecated/StarRating/StarRating.tsx
+++ b/src/shared/ui/redesigned/StarRating/StarRating.tsx
@@ -1,8 +1,8 @@
 import { memo, useState } from 'react';
 import { classNames } from '@/shared/lib/classNames/classNames';
 import cls from './StarRating.module.scss';
-import { Icon } from '../Icon/Icon';
 import StarIcon from '@/shared/assets/icons/star.svg';
+import { Icon } from '../Icon';
 
 interface StarRatingProps {
     className?: string;
@@ -38,10 +38,7 @@ export const StarRating = memo((props: StarRatingProps) => {
             setIsSelected(true);
         }
     };
-    /**
-     * Устарел, используем новые компоненты из папки redesigned
-     * @deprecated
-     */
+
     return (
         <div className={classNames(cls.StarRating, {}, [className])}>
             {stars.map((starNumber) => (
@@ -64,6 +61,7 @@ export const StarRating = memo((props: StarRatingProps) => {
                     onClick={() => onClick(starNumber)}
                     data-testid={`StarRating.${starNumber}`}
                     data-selected={currentStarsCount >= starNumber}
+                    clickable={!isSelected}
                 />
             ))}
         </div>
diff --git a/src/shared/ui/deprecated/StarRating/index.ts b/src/shared/ui/redesigned/StarRating/index.ts
similarity index 100%
rename from src/shared/ui/deprecated/StarRating/index.ts
rename to src/shared/ui/redesigned/StarRating/index.ts