diff --git a/frontend-next-migration/src/shared/i18n/locales/en/feedbackCard.json b/frontend-next-migration/src/shared/i18n/locales/en/feedbackCard.json
index 7739d83ed..ace6bcc56 100644
--- a/frontend-next-migration/src/shared/i18n/locales/en/feedbackCard.json
+++ b/frontend-next-migration/src/shared/i18n/locales/en/feedbackCard.json
@@ -1,10 +1,24 @@
 {
     "title": "Tell your opinion about our websites",
-    "input-placeholder": "Please write here",
+    "success-title": "Thank you for your feedback!",
+    "input-placeholder": "(Optional)",
+    "input-placeholder-1": "What bothered you the most?",
+    "input-placeholder-2": "What fell short of your expectations?",
+    "input-placeholder-3": "What could be improved?",
+    "input-placeholder-4": "Any suggestions for improvement?",
+    "input-placeholder-5": "Wonderful! What did you like the most?",
     "send": "Send",
+    "loading": "Sending...",
     "href-to-fullform": "Go to the full form ->",
     "error": "Select emote and then write feedback",
+    "error-submit-failed": "Submission failed. Please try again.",
+    "feedback-text": "Give specific feedback",
     "success": "Thank you very much! We appreciate your feedback.",
-    "href-to-webform": "Website form",
-    "href-to-gameform": "Game form"
+    "href-to-webform": "Web form",
+    "href-to-gameform": "Game form",
+    "rating-label-1": "Bad",
+    "rating-label-2": "Meh..",
+    "rating-label-3": "OK",
+    "rating-label-4": "Good",
+    "rating-label-5": "Great"
 }
diff --git a/frontend-next-migration/src/shared/i18n/locales/fi/feedbackCard.json b/frontend-next-migration/src/shared/i18n/locales/fi/feedbackCard.json
index 831b82528..7ea297004 100644
--- a/frontend-next-migration/src/shared/i18n/locales/fi/feedbackCard.json
+++ b/frontend-next-migration/src/shared/i18n/locales/fi/feedbackCard.json
@@ -1,10 +1,24 @@
 {
     "title": "Kerro mielipiteesi verkkosivuistamme",
-    "input-placeholder": "Kirjoita tähän",
+    "success-title": "Kiitos palautteestasi!",
+    "input-placeholder": "(Valinnainen)",
+    "input-placeholder-1": "Harmi! Mikä mätti eniten?",
+    "input-placeholder-2": "Voi ei - mikä jäi vajaaksi?",
+    "input-placeholder-3": "Mikä oli hyvää ja mitä parantaisit?",
+    "input-placeholder-4": "Kiva kuulla! Parannus ehdotuksia?",
+    "input-placeholder-5": "Ihanaa! Mikä oli parasta?",
     "send": "Lähetä",
+    "loading": "Lähetetään...",
     "href-to-fullform": "Siirry koko lomakkeeseen ->",
     "error": "Valitse mieliala ja sitten kirjoita palaute.",
+    "error-submit-failed": "Lähetys epäonnistui. Yritä uudelleen.",
+    "feedback-text": "Anna tarkempi palaute",
     "success": "Kiitos paljon! Arvostamme palautettasi.",
-    "href-to-webform": "Verkkosivulomake",
-    "href-to-gameform": "Pelilomake"
+    "href-to-webform": "Web lomake",
+    "href-to-gameform": "Peli lomake",
+    "rating-label-1": "Huono",
+    "rating-label-2": "Meh..",
+    "rating-label-3": "Ihan ok",
+    "rating-label-4": "Hyvä",
+    "rating-label-5": "Loistava"
 }
diff --git a/frontend-next-migration/src/shared/i18n/locales/ru/feedbackCard.json b/frontend-next-migration/src/shared/i18n/locales/ru/feedbackCard.json
index b7c65af3b..26d43cfba 100644
--- a/frontend-next-migration/src/shared/i18n/locales/ru/feedbackCard.json
+++ b/frontend-next-migration/src/shared/i18n/locales/ru/feedbackCard.json
@@ -1,10 +1,19 @@
 {
     "title": "Поделитесь своим мнением о нашем сайте",
+    "success-title": "Спасибо за ваш отзыв!",
     "input-placeholder": "Напишите сюда",
+    "input-placeholder-1": "Что вам не понравилось больше всего?",
+    "input-placeholder-2": "Что не оправдало ваших ожиданий?",
+    "input-placeholder-3": "Что было хорошо и что можно улучшить?",
+    "input-placeholder-4": "Приятно слышать! Есть предложения по улучшению?",
+    "input-placeholder-5": "Замечательно! Что понравилось больше всего?",
     "send": "Отправить",
+    "loading": "Отправка...",
     "href-to-fullform": "Перейти к полной форме ->",
     "error": "Выберите настроение и затем напишите отзыв.",
+    "error-submit-failed": "Отправка не удалась. Попробуйте снова.",
+    "feedback-text": "Оставьте подробный отзыв",
     "success": "Большое спасибо! Мы ценим ваш отзыв.",
-    "href-to-webform": "Отзыв о сайте",
-    "href-to-gameform": "Отзыв о игре"
+    "href-to-webform": "Форма сайта",
+    "href-to-gameform": "Форма игры"
 }
diff --git a/frontend-next-migration/src/shared/ui/CustomForm/ui/CustomForm.tsx b/frontend-next-migration/src/shared/ui/CustomForm/ui/CustomForm.tsx
index eb552c0ed..70d704159 100644
--- a/frontend-next-migration/src/shared/ui/CustomForm/ui/CustomForm.tsx
+++ b/frontend-next-migration/src/shared/ui/CustomForm/ui/CustomForm.tsx
@@ -8,6 +8,7 @@ import React, {
     memo,
     DetailedHTMLProps,
     InputHTMLAttributes,
+    TextareaHTMLAttributes,
     useState,
     useEffect,
     useId,
@@ -318,12 +319,52 @@ function MultiSelectionDropdown<T>({
     );
 }
 
+type TextareaFieldProps = {
+    label?: string;
+    error?: any;
+    className?: string;
+    textareaProps?: DetailedHTMLProps<
+        TextareaHTMLAttributes<HTMLTextAreaElement>,
+        HTMLTextAreaElement
+    >;
+};
+
+function TextareaField({ label, error, textareaProps, className = '' }: TextareaFieldProps) {
+    const reactId = useId();
+    const slug = slugifyLabel(label);
+    const normalizedReactId = reactId
+        .toString()
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '-');
+    const textareaId =
+        textareaProps?.id || (slug ? `textarea-${slug}` : `textarea-${normalizedReactId}`);
+
+    return (
+        <div className={classNames(cls.field, {}, [className])}>
+            {label && <label htmlFor={textareaId}>{label}</label>}
+            <textarea
+                id={textareaId}
+                {...textareaProps}
+            />
+            {error && (
+                <p
+                    role="alert"
+                    className={cls.error}
+                >
+                    {error}
+                </p>
+            )}
+        </div>
+    );
+}
+
 interface IFormProps extends HTMLAttributes<HTMLFormElement> {}
 
 interface MemoizedFormCompose {
     Button: typeof Button;
     Header: typeof Header;
     InputField: typeof InputField;
+    TextareaField: typeof TextareaField;
     Checkbox: typeof Checkbox;
     MultiSelectionDropdown: typeof MultiSelectionDropdown;
 }
@@ -359,6 +400,7 @@ const MemoizedForm = memo(BaseForm) as NamedExoticComponent<IFormProps> & Memoiz
 MemoizedForm.Button = Button;
 MemoizedForm.Header = Header;
 MemoizedForm.InputField = InputField;
+MemoizedForm.TextareaField = TextareaField;
 MemoizedForm.Checkbox = Checkbox;
 MemoizedForm.MultiSelectionDropdown = MultiSelectionDropdown;
 
diff --git a/frontend-next-migration/src/shared/ui/v2/Feedback/index.ts b/frontend-next-migration/src/shared/ui/v2/Feedback/index.ts
index ed81f6b03..76d35200a 100644
--- a/frontend-next-migration/src/shared/ui/v2/Feedback/index.ts
+++ b/frontend-next-migration/src/shared/ui/v2/Feedback/index.ts
@@ -1,3 +1,4 @@
 export { default as FeedbackSideButton } from './ui/FeedbackSideButton/FeedbackSideButton';
 export { default as FeedbackCard } from './ui/FeedbackCard/FeedbackCard';
 export { default as FeedbackEmoji } from './ui/FeedbackEmoji/FeedbackEmoji';
+export { default as FeedbackCardSuccess } from './ui/FeedbackCardSuccess/FeedbackCardSuccess';
diff --git a/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackCard/FeedbackCard.module.scss b/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackCard/FeedbackCard.module.scss
index 72ac4c697..81ac023cb 100644
--- a/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackCard/FeedbackCard.module.scss
+++ b/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackCard/FeedbackCard.module.scss
@@ -2,12 +2,10 @@
     background-color: var(--base-card-background);
     display: flex;
     flex-direction: column;
-    margin: 5px;
-    width: 330px !important;
-    height: fit-content;
-    padding-top: 0;
+    max-width: 300px;
+    height: 400px;
     align-items: center;
-    gap: 10px;
+    gap: 8px;
     box-shadow: 8px 8px 1px #000000;
     border-width: 4px;
     border-style: solid;
@@ -15,10 +13,10 @@
 }
 
 .feedbackTitle {
-    line-height: 40px !important;
-    font:var(--font-sw-xl);
-    padding: 5px 1em 0 1em;
-    height: fit-content;
+    font-size: 24px;
+    font-family: 'Marko One';
+    font-weight: 400;
+    line-height: 100%;
     color: var(--primary-color);
     text-align: center;
     width: 100%;
@@ -36,7 +34,7 @@
     align-items: center;
     padding: 9px 12px;
     gap: 10px;
-    width: 300px;
+    width:250px;
     height: 48px;
     background: var(--primary-color) !important;
     border: 2px solid var(--drop-shadows) !important;
@@ -44,56 +42,58 @@
     box-shadow: 2px 4px 0 var(--black) !important;
 }
 
+.inputField {
+    label {
+        font: var(--font-dm-m);
+        font-size: 14px;
+        color: var(--white);
+        display: block;
+    }
+}
+
 .textInput {
     font: var(--font-dm-m);
     color: var(--black);
-    width: 300px !important;
-    height: 45px;
-    padding: 10px 10px;
+    height: 81px;
+    padding: 10px;
+    border-radius: 12px;
     background: #FFFFFF;
     border: 2px solid #000000;
     box-shadow: 2px 4px 0 #121212;
-    border-radius: 25px !important;
     box-sizing: border-box;
+    resize: none;
+    vertical-align: top;
+    outline: none;
 }
-
 .emojiList {
     display: inline-flex !important;
     justify-content: space-between;
-    align-items: center;
+    align-items: start;
     width: 100%;
-    padding-bottom: 5px;
-    box-sizing: border-box;
-}
-
-.linkToForm {
-    display: flex;
-    flex-direction: row;
-    font: var(--font-dm-m);
-    color: var(--white);
+    height: 100px;
 }
-
 .linkToFormContainer {
-    width: 300px;
+    max-width:fit-content;
     display: inline-flex !important;
-    flex-direction: row;
     justify-content: space-between;
-    gap: unset;
+    gap: 10px;
 }
 
-.linkToFormContainer > * {
-    display: inline-block;
-    vertical-align: middle;
-    justify-items: end;
-    padding: 0 10px 0 10px;
+.linkToFormLabel {
+    font: var(--font-dm-m);
+    color: var(--white);
+    padding: 0;
+    margin: 0;
 }
 
-.embedabbleVersion {
-    background-color: transparent !important;
-    border: none !important;
-    box-shadow: none !important;
-    outline: none !important;
+.linkToForm {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    font: var(--font-dm-m);
+    color: var(--white);
 }
+
 .externalLinkIcon {
     display: inline;
     vertical-align: middle !important;
diff --git a/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackCard/FeedbackCard.tsx b/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackCard/FeedbackCard.tsx
index 7924090a2..82a313049 100644
--- a/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackCard/FeedbackCard.tsx
+++ b/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackCard/FeedbackCard.tsx
@@ -12,6 +12,7 @@ import { useClientTranslation } from '@/shared/i18n';
 import { AppExternalLinks } from '@/shared/appLinks/appExternalLinks';
 import cls from './FeedbackCard.module.scss';
 import FeedbackEmoji from '../FeedbackEmoji/FeedbackEmoji';
+import FeedbackCardSuccess from '../FeedbackCardSuccess/FeedbackCardSuccess';
 
 /**
  * Props for the FeedbackCard component.
@@ -35,8 +36,21 @@ export default function FeedbackCard({ variant = 'full' }: FeedbackCardProps): J
     const { t } = useClientTranslation('feedbackCard');
     const [feedback, setFeedback] = useState<string>('');
     const [feedbackEmoji, setFeedbackEmoji] = useState<number>();
+    const [isSubmitted, setIsSubmitted] = useState(false);
     const [addFeedback, { isLoading }] = useAddFeedbackMutation();
 
+    const RATING_PLACEHOLDERS: Record<number, string> = {
+        1: t('input-placeholder-1'),
+        2: t('input-placeholder-2'),
+        3: t('input-placeholder-3'),
+        4: t('input-placeholder-4'),
+        5: t('input-placeholder-5'),
+    };
+
+    const currentPlaceholder = feedbackEmoji
+        ? RATING_PLACEHOLDERS[feedbackEmoji]
+        : t('input-placeholder');
+
     /**
      * Display a toast message to the user.
      * @function
@@ -56,7 +70,7 @@ export default function FeedbackCard({ variant = 'full' }: FeedbackCardProps): J
      * It sends the feedback data to the server if valid.
      */
     const submitFeedback = async () => {
-        if (!feedback || !feedbackEmoji) {
+        if (!feedbackEmoji) {
             showToast(t('error'), 'error');
             return;
         }
@@ -69,13 +83,22 @@ export default function FeedbackCard({ variant = 'full' }: FeedbackCardProps): J
             await addFeedback(feedbackData).unwrap();
 
             showToast(t('success'), 'success');
+            setIsSubmitted(true);
             setFeedback('');
-            setFeedbackEmoji(undefined);
         } catch {
             showToast(t('error-submit-failed'), 'error');
         }
     };
 
+    if (isSubmitted) {
+        return (
+            <FeedbackCardSuccess
+                className={variant === 'embedabble' ? cls.embedabbleVersion : ''}
+                rating={feedbackEmoji}
+            />
+        );
+    }
+
     return (
         <CustomForm
             className={`${cls.feedbackForm} ${variant === 'embedabble' ? cls.embedabbleVersion : ''}`}
@@ -90,9 +113,10 @@ export default function FeedbackCard({ variant = 'full' }: FeedbackCardProps): J
                 value={feedbackEmoji}
                 onImageClick={setFeedbackEmoji}
             />
-            <CustomForm.InputField
-                label=""
-                inputProps={{
+            <CustomForm.TextareaField
+                className={cls.inputField}
+                label={feedbackEmoji ? currentPlaceholder : '\u00A0'}
+                textareaProps={{
                     className: cls.textInput,
                     placeholder: t('input-placeholder'),
                     value: feedback,
@@ -118,6 +142,7 @@ export default function FeedbackCard({ variant = 'full' }: FeedbackCardProps): J
                     </>
                 )}
             </CustomForm.Button>
+            <span className={cls.linkToFormLabel}>{t('feedback-text')}</span>
             <div className={cls.linkToFormContainer}>
                 <a
                     className={cls.linkToForm}
@@ -132,6 +157,7 @@ export default function FeedbackCard({ variant = 'full' }: FeedbackCardProps): J
                         icon={faExternalLink}
                     />
                 </a>
+
                 <a
                     className={cls.linkToForm}
                     href={AppExternalLinks.googleFeedback}
diff --git a/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackCardSuccess/FeedbackCardSuccess.module.scss b/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackCardSuccess/FeedbackCardSuccess.module.scss
new file mode 100644
index 000000000..a35f2f721
--- /dev/null
+++ b/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackCardSuccess/FeedbackCardSuccess.module.scss
@@ -0,0 +1,59 @@
+.successCard {
+    background-color: var(--base-card-background);
+    display: flex;
+    flex-direction: column;
+    max-width: 300px;
+    align-items: center;
+    border-radius: 12px;
+    gap: 8px;
+    padding: 10px;
+    box-shadow: 8px 8px 1px #000000;
+    border-width: 4px;
+    border-style: solid;
+    border-color: #000000;
+}
+
+.successTitle {
+    font-size: 24px;
+    font-family: 'Marko One';
+    font-weight: 400;
+    line-height: 100%;
+    color: var(--primary-color);
+    text-align: center;
+    width: 100%;
+    margin: 0 auto;
+}
+
+.emojiList {
+    display: inline-flex !important;
+    justify-content: space-between;
+    align-items: start;
+    height: 80px !important;
+}
+
+.linkToFormLabel {
+    font: var(--font-dm-m);
+    color: var(--white);
+}
+
+.linkToFormContainer {
+    max-width: fit-content;
+    display: inline-flex !important;
+    justify-content: space-between;
+    gap: 10px;
+}
+
+.linkToForm {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    font: var(--font-dm-m);
+    color: var(--white);
+}
+
+.externalLinkIcon {
+    display: inline;
+    vertical-align: middle !important;
+    margin-left: 5px;
+    color: var(--primary-color);
+}
diff --git a/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackCardSuccess/FeedbackCardSuccess.tsx b/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackCardSuccess/FeedbackCardSuccess.tsx
new file mode 100644
index 000000000..2041d45b1
--- /dev/null
+++ b/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackCardSuccess/FeedbackCardSuccess.tsx
@@ -0,0 +1,59 @@
+import { faExternalLink } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useClientTranslation } from '@/shared/i18n';
+import { AppExternalLinks } from '@/shared/appLinks/appExternalLinks';
+import FeedbackEmoji from '../FeedbackEmoji/FeedbackEmoji';
+import cls from './FeedbackCardSuccess.module.scss';
+
+interface FeedbackCardSuccessProps {
+    className?: string;
+    rating: number | undefined;
+}
+
+/**
+ * FeedbackCardSuccess renders the post-submission view of the feedback card.
+ * Shows the selected emoji rating, a thank-you title, and links to full feedback forms.
+ */
+export default function FeedbackCardSuccess({ className = '', rating }: FeedbackCardSuccessProps) {
+    const { t } = useClientTranslation('feedbackCard');
+
+    return (
+        <div className={`${cls.successCard} ${className}`}>
+            <h3 className={cls.successTitle}>{t('success-title')}</h3>
+            <FeedbackEmoji
+                listClassName={cls.emojiList}
+                value={rating}
+                onImageClick={() => {}}
+            />
+            <span className={cls.linkToFormLabel}>{t('feedback-text')}</span>
+            <div className={cls.linkToFormContainer}>
+                <a
+                    className={cls.linkToForm}
+                    href={AppExternalLinks.googleWebFeedback}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                >
+                    {t('href-to-webform')}
+                    <FontAwesomeIcon
+                        className={cls.externalLinkIcon}
+                        size={'2xs'}
+                        icon={faExternalLink}
+                    />
+                </a>
+                <a
+                    className={cls.linkToForm}
+                    href={AppExternalLinks.googleFeedback}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                >
+                    {t('href-to-gameform')}
+                    <FontAwesomeIcon
+                        className={cls.externalLinkIcon}
+                        size={'2xs'}
+                        icon={faExternalLink}
+                    />
+                </a>
+            </div>
+        </div>
+    );
+}
diff --git a/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackEmoji/FeedbackEmoji.module.scss b/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackEmoji/FeedbackEmoji.module.scss
index 4f708bc46..979404404 100644
--- a/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackEmoji/FeedbackEmoji.module.scss
+++ b/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackEmoji/FeedbackEmoji.module.scss
@@ -1,3 +1,16 @@
+.emojiListContainer {
+    position: relative;
+    display: inline-block;
+    height: 100px;
+}
+
+.emojiList {
+    display: flex;
+    gap: 5px; 
+    justify-content: center;
+    display: inline-flex !important;
+}
+
 .selectedEmoji {
     transition: 0.1s;
     transform: scale(1.2);
@@ -6,8 +19,7 @@
     outline-offset: -4px;
     box-shadow: 0px 1px 7px 1px rgba($color: #c5a804cc, $alpha: 1);
     cursor: pointer;
-    width: 48px;
-    height: 48px;
+
 }
 
 .Emoji:hover {
@@ -16,3 +28,41 @@
     border-radius: 25px;
     outline-offset: -4px;
 }
+
+.ratingLabel {
+    position: absolute;
+    top: 60px; 
+    margin: 0;
+    background-color: #ffa101;
+    color: white;
+    border: 1px solid black;
+    border-radius: 12px;
+    height: 25px;
+    width: 64px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 500;
+    font-size: 16px;
+    white-space: nowrap;
+}
+
+.ratingLabel::before {
+    content: '';
+    position: absolute;
+    top: -8px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 0;
+    height: 0;
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    border-bottom: 8px solid #ffa101;
+}
+
+.ratingText {
+    margin: 0;
+    padding: 0;
+    font-size: 15px;
+    color: black !important;
+}
\ No newline at end of file
diff --git a/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackEmoji/FeedbackEmoji.tsx b/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackEmoji/FeedbackEmoji.tsx
index a31eef994..d99b01bef 100644
--- a/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackEmoji/FeedbackEmoji.tsx
+++ b/frontend-next-migration/src/shared/ui/v2/Feedback/ui/FeedbackEmoji/FeedbackEmoji.tsx
@@ -1,3 +1,4 @@
+'use client';
 import AngerEmoji from '@/shared/assets/icons/Feedback/AngerChatEmoticon.png';
 import JoyEmoji from '@/shared/assets/icons/Feedback/JoyChatEmoticon.png';
 import LoveEmoji from '@/shared/assets/icons/Feedback/LoveChatEmoticon.png';
@@ -5,6 +6,7 @@ import PlayfulEmoji from '@/shared/assets/icons/Feedback/PlayfulChatEmoticon.png
 import SadEmoji from '@/shared/assets/icons/Feedback/SadnessChatEmoticon.png';
 import Image from 'next/image';
 import { classNames } from '@/shared/lib/classNames/classNames';
+import { useClientTranslation } from '@/shared/i18n';
 import cls from './FeedbackEmoji.module.scss';
 
 /**
@@ -30,6 +32,7 @@ type Props = {
 };
 
 const FeedbackEmoji = ({ listClassName = '', value, onImageClick }: Props) => {
+    const { t } = useClientTranslation('feedbackCard');
     const emojies = [
         { src: AngerEmoji.src, value: 1 },
         { src: SadEmoji.src, value: 2 },
@@ -37,23 +40,45 @@ const FeedbackEmoji = ({ listClassName = '', value, onImageClick }: Props) => {
         { src: JoyEmoji.src, value: 4 },
         { src: LoveEmoji.src, value: 5 },
     ];
+    const RATING_LABELS: Record<number, string> = {
+        1: t('rating-label-1'),
+        2: t('rating-label-2'),
+        3: t('rating-label-3'),
+        4: t('rating-label-4'),
+        5: t('rating-label-5'),
+    };
 
     return (
-        <div className={classNames(cls.emojiList, {}, [listClassName])}>
-            {emojies.map((image: any, index: number) => (
-                <Image
-                    src={image.src}
-                    alt={`Feedback Emoji ${image.value}`}
-                    key={index}
-                    width={48}
-                    height={48}
-                    quality={100}
-                    className={value === image.value ? cls.selectedEmoji : cls.Emoji}
-                    onClick={() =>
-                        value !== image.value ? onImageClick(image.value) : onImageClick(undefined)
-                    }
-                />
-            ))}
+        <div className={classNames(cls.emojiListContainer, {}, [listClassName])}>
+            <div className={cls.emojiList}>
+                {emojies.map((image: any, index: number) => (
+                    <Image
+                        src={image.src}
+                        alt={`Feedback Emoji ${image.value}`}
+                        key={index}
+                        width={48}
+                        height={48}
+                        quality={100}
+                        className={value === image.value ? cls.selectedEmoji : cls.Emoji}
+                        onClick={() =>
+                            value !== image.value
+                                ? onImageClick(image.value)
+                                : onImageClick(undefined)
+                        }
+                    />
+                ))}
+            </div>
+            {value && (
+                <div
+                    className={cls.ratingLabel}
+                    style={{
+                        left: `calc(50% + ${(emojies.findIndex((emoji) => emoji.value === value) - 2) * 52}px)`,
+                        transform: 'translateX(-50%)',
+                    }}
+                >
+                    <p className={cls.ratingText}>{RATING_LABELS[value]}</p>
+                </div>
+            )}
         </div>
     );
 };